feat(日志): 日志跳转调整&描述组件增加快速复制按钮

frontend/src/api/modules/setting/user.ts

@@ -13,6 +13,7 @@ import {
   BatchAddProjectUrl,
   GetOrgsUrl,
   GetProjectsUrl,
+  GetUserInfoUrl,
 } from '@/api/requrls/setting/user';
 import type {
   UserListItem,
@@ -49,6 +50,12 @@ export function toggleUserStatus(data: UpdateUserStatusParams) {
   return MSR.post({ url: EnableUserUrl, data });
 }
 
+// 获取用户详情
+export function getUserInfo(keyword: string) {
+  // keyword 可以是邮箱或者用户 ID
+  return MSR.get<UserListItem>({ url: GetUserInfoUrl, params: keyword });
+}
+
 // 删除用户
 export function deleteUserInfo(data: DeleteUserParams) {
   return MSR.post({ url: DeleteUserUrl, data });

frontend/src/api/requrls/setting/user.ts

@@ -4,6 +4,8 @@ export const GetUserListUrl = '/system/user/page';
 export const CreateUserUrl = '/system/user/add';
 // 更新用户
 export const UpdateUserUrl = '/system/user/update';
+// 获取用户详情
+export const GetUserInfoUrl = '/system/user/get';
 // 删除用户
 export const DeleteUserUrl = '/system/user/delete';
 // 导入用户

frontend/src/components/pure/ms-description/index.vue

@@ -32,11 +32,30 @@
             <span v-show="Array.isArray(item.value) && item.value.length === 0">-</span>
           </template>
           <a-button v-else-if="item.isButton" type="text" @click="handleItemClick(item)">{{ item.value }}</a-button>
-          <div v-else>
+          <template v-else>
             <slot name="value" :item="item">
               {{ item.value === undefined || item.value === null || item.value?.toString() === '' ? '-' : item.value }}
             </slot>
-          </div>
+            <template v-if="item.showCopy">
+              <MsButton
+                v-if="item.copyTimer !== null && item.copyTimer !== undefined"
+                class="absolute bottom-0 right-0 bg-white pl-[16px] !text-[rgb(var(--success-6))]"
+                type="text"
+              >
+                <MsIcon type="icon-icon_succeed_filled" class="mr-[4px]"></MsIcon>
+                {{ t('ms.description.copySuccess') }}
+              </MsButton>
+              <MsButton
+                v-else
+                class="absolute bottom-0 right-0 bg-white pl-[16px]"
+                type="text"
+                @click="copyValue(item)"
+              >
+                <MsIcon type="icon-icon_copy_outlined" class="mr-[4px]"></MsIcon>
+                {{ t('ms.description.copy') }}
+              </MsButton>
+            </template>
+          </template>
         </slot>
       </div>
     </div>
@@ -44,12 +63,20 @@
 </template>
 
 <script setup lang="ts">
+  import { Message } from '@arco-design/web-vue';
+  import { useClipboard } from '@vueuse/core';
+  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
+  import MsButton from '@/components/pure/ms-button/index.vue';
+  import { useI18n } from '@/hooks/useI18n';
+
   export interface Description {
     label: string;
     value: (string | number) | (string | number)[];
     key?: string;
     isTag?: boolean;
     isButton?: boolean;
+    showCopy?: boolean;
+    copyTimer?: any | null;
     onClick?: () => void;
   }
 
@@ -65,6 +92,21 @@
     }
   );
 
+  const { t } = useI18n();
+  const { copy } = useClipboard();
+
+  async function copyValue(item: Description) {
+    try {
+      await copy(Array.isArray(item.value) ? item.value.join(',') : item.value.toString());
+      item.copyTimer = setTimeout(() => {
+        item.copyTimer = null;
+      }, 3000);
+    } catch (error) {
+      console.log(error);
+      Message.error(t('ms.description.copyFail'));
+    }
+  }
+
   function handleItemClick(item: Description) {
     if (typeof item.onClick === 'function') {
       item.onClick();
@@ -76,7 +118,7 @@
   .ms-description {
     @apply flex flex-wrap;
     .ms-description-item {
-      @apply flex items-center;
+      @apply flex;
 
       width: calc(100% / v-bind(column));
     }
@@ -89,7 +131,13 @@
       word-wrap: break-word;
     }
     .ms-description-item-value {
-      @apply !pr-0 align-top;
+      @apply relative flex-1 overflow-hidden break-all align-top;
+
+      /* stylelint-disable-next-line value-no-vendor-prefix */
+      display: -webkit-box;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
     }
   }
 </style>

frontend/src/components/pure/ms-description/locale/en-US.ts

@@ -0,0 +1,5 @@
+export default {
+  'ms.description.copy': 'Copy',
+  'ms.description.copySuccess': 'Copy successfully',
+  'ms.description.copyFail': 'Copy failed, please refresh the page and try again',
+};

frontend/src/components/pure/ms-description/locale/zh-CN.ts

@@ -0,0 +1,5 @@
+export default {
+  'ms.description.copy': '复制',
+  'ms.description.copySuccess': '复制成功',
+  'ms.description.copyFail': '复制失败，请刷新页面后重试',
+};

frontend/src/components/pure/ms-drawer/index.vue

@@ -29,7 +29,13 @@
           :descriptions="props.descriptions"
           :show-skeleton="props.showSkeleton"
           :skeleton-line="10"
-        ></MsDescription>
+        >
+          <template #value="{ item }">
+            <slot name="descValue" :item="item">
+              {{ item.value === undefined || item.value === null || item.value?.toString() === '' ? '-' : item.value }}
+            </slot>
+          </template>
+        </MsDescription>
       </slot>
     </a-scrollbar>
     <template #footer>

frontend/src/models/setting/user.ts

@@ -46,6 +46,7 @@ export interface UserListItem {
   updateUser: string;
   organizationList: OrganizationListItem[]; // 用户所属组织
   userRoleList: UserRoleListItem[]; // 用户所属用户组
+  userRoles?: UserRoleListItem[]; // 用户所属用户组
 }
 
 export interface Filter {

frontend/src/views/setting/system/log/components/logCards.vue

@@ -418,7 +418,7 @@
       title: 'system.log.time',
       dataIndex: 'createTime',
       fixed: 'right',
-      width: 160,
+      width: 170,
       sortable: {
         sortDirections: ['ascend', 'descend'],
       },

frontend/src/views/setting/system/resourcePool/index.vue

@@ -296,6 +296,7 @@
                 {
                   label: t('system.resourcePool.testResourceDTO.token'),
                   value: token,
+                  showCopy: true,
                 },
                 {
                   label: t('system.resourcePool.testResourceDTO.namespace'),

frontend/src/views/setting/system/user/index.vue

@@ -210,6 +210,7 @@
 
 <script setup lang="ts">
   import { onBeforeMount, Ref, ref } from 'vue';
+  import { useRoute } from 'vue-router';
   import { Message } from '@arco-design/web-vue';
   import { cloneDeep } from 'lodash-es';
   import useModal from '@/hooks/useModal';
@@ -245,6 +246,7 @@
   import type { FormItemModel, MsBatchFormInstance } from '@/components/business/ms-batch-form/types';
 
   const { t } = useI18n();
+  const route = useRoute();
 
   const columns: MsTableColumn = [
     {
@@ -609,6 +611,9 @@
   }
 
   onBeforeMount(async () => {
+    if (route.query.id) {
+      keyword.value = route.query.id as string;
+    }
     setKeyword(keyword.value);
     init();
     loadList();