From 248e2e67e10fe7685f16738f074580cdd9fe4457 Mon Sep 17 00:00:00 2001
From: baiqi <qi.bai@fit2cloud.com>
Date: Tue, 29 Aug 2023 16:21:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=97=A5=E5=BF=97):=20=20=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97=E8=B7=B3=E8=BD=AC=E8=B0=83=E6=95=B4&=E6=8F=8F?=
 =?UTF-8?q?=E8=BF=B0=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0=E5=BF=AB=E9=80=9F?=
 =?UTF-8?q?=E5=A4=8D=E5=88=B6=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/modules/setting/user.ts      |  7 +++
 frontend/src/api/requrls/setting/user.ts      |  2 +
 .../components/pure/ms-description/index.vue  | 56 +++++++++++++++++--
 .../pure/ms-description/locale/en-US.ts       |  5 ++
 .../pure/ms-description/locale/zh-CN.ts       |  5 ++
 .../src/components/pure/ms-drawer/index.vue   |  8 ++-
 frontend/src/models/setting/user.ts           |  1 +
 .../system/log/components/logCards.vue        |  2 +-
 .../setting/system/resourcePool/index.vue     |  1 +
 .../src/views/setting/system/user/index.vue   |  5 ++
 10 files changed, 86 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/pure/ms-description/locale/en-US.ts
 create mode 100644 frontend/src/components/pure/ms-description/locale/zh-CN.ts

diff --git a/frontend/src/api/modules/setting/user.ts b/frontend/src/api/modules/setting/user.ts
index 01dd7c1deb..2be497d43e 100644
--- a/frontend/src/api/modules/setting/user.ts
+++ b/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 });
diff --git a/frontend/src/api/requrls/setting/user.ts b/frontend/src/api/requrls/setting/user.ts
index 4dc442b78d..cd20e4147b 100644
--- a/frontend/src/api/requrls/setting/user.ts
+++ b/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';
 // 导入用户
diff --git a/frontend/src/components/pure/ms-description/index.vue b/frontend/src/components/pure/ms-description/index.vue
index 1946e7511e..3e39f9ed75 100644
--- a/frontend/src/components/pure/ms-description/index.vue
+++ b/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>
diff --git a/frontend/src/components/pure/ms-description/locale/en-US.ts b/frontend/src/components/pure/ms-description/locale/en-US.ts
new file mode 100644
index 0000000000..5efdcdea6f
--- /dev/null
+++ b/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',
+};
diff --git a/frontend/src/components/pure/ms-description/locale/zh-CN.ts b/frontend/src/components/pure/ms-description/locale/zh-CN.ts
new file mode 100644
index 0000000000..c250a62354
--- /dev/null
+++ b/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': '复制失败，请刷新页面后重试',
+};
diff --git a/frontend/src/components/pure/ms-drawer/index.vue b/frontend/src/components/pure/ms-drawer/index.vue
index 52a7d0881f..c3116b0feb 100644
--- a/frontend/src/components/pure/ms-drawer/index.vue
+++ b/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>
diff --git a/frontend/src/models/setting/user.ts b/frontend/src/models/setting/user.ts
index 546603de46..ff13746f5f 100644
--- a/frontend/src/models/setting/user.ts
+++ b/frontend/src/models/setting/user.ts
@@ -46,6 +46,7 @@ export interface UserListItem {
   updateUser: string;
   organizationList: OrganizationListItem[]; // 用户所属组织
   userRoleList: UserRoleListItem[]; // 用户所属用户组
+  userRoles?: UserRoleListItem[]; // 用户所属用户组
 }
 
 export interface Filter {
diff --git a/frontend/src/views/setting/system/log/components/logCards.vue b/frontend/src/views/setting/system/log/components/logCards.vue
index 9b22784284..134f5544a0 100644
--- a/frontend/src/views/setting/system/log/components/logCards.vue
+++ b/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'],
       },
diff --git a/frontend/src/views/setting/system/resourcePool/index.vue b/frontend/src/views/setting/system/resourcePool/index.vue
index 37670fbbf0..4f48f2e87d 100644
--- a/frontend/src/views/setting/system/resourcePool/index.vue
+++ b/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'),
diff --git a/frontend/src/views/setting/system/user/index.vue b/frontend/src/views/setting/system/user/index.vue
index 877bba73ee..e9bffbace7 100644
--- a/frontend/src/views/setting/system/user/index.vue
+++ b/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();