From 00c909e6f1e1767e69024620e99f71f98f2cf474 Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Sat, 26 Oct 2024 22:20:33 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E5=A4=B4=E5=83=8F=E8=A7=84=E5=88=99=EF=BC=8C=E7=94=B1?=
 =?UTF-8?q?=E5=9F=BA=E4=BA=8E=E6=80=A7=E5=88=AB=E7=9A=84=E5=9B=BA=E5=AE=9A?=
 =?UTF-8?q?=E5=A4=B4=E5=83=8F=E8=B0=83=E6=95=B4=E4=B8=BA=E5=9F=BA=E4=BA=8E?=
 =?UTF-8?q?=E6=98=B5=E7=A7=B0=E5=B1=95=E7=A4=BA=EF=BC=88=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E5=9F=BA=E4=BA=8E=E6=98=B5=E7=A7=B0=E8=AE=A1?=
 =?UTF-8?q?=E7=AE=97=E9=9A=8F=E6=9C=BA=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Avatar/index.vue               | 82 +++++++++++++++++++
 src/components/GiCell/GiCellAvatar.vue        | 16 +++-
 .../components/HeaderRightBar/index.vue       |  6 +-
 src/stores/modules/user.ts                    |  9 +-
 src/types/auto-imports.d.ts                   |  2 +-
 src/types/components.d.ts                     |  1 +
 .../workplace/components/Welcome.vue          |  6 +-
 src/views/setting/profile/BasicInfo.vue       |  5 +-
 src/views/system/user/index.vue               | 21 +++--
 9 files changed, 117 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Avatar/index.vue

diff --git a/src/components/Avatar/index.vue b/src/components/Avatar/index.vue
new file mode 100644
index 0000000..c8a337b
--- /dev/null
+++ b/src/components/Avatar/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <a-avatar v-if="src" :size="size">
+    <img :src="src" :alt="alt" />
+    <template v-if="trigger" #trigger-icon><slot name="trigger-icon"></slot></template>
+  </a-avatar>
+  <a-avatar
+    v-else-if="name || text"
+    :size="size"
+    :style="{
+      backgroundColor: avatarColor,
+    }"
+  >
+    <span v-if="name">{{ avatarName }}</span>
+    <span v-else>{{ text }}</span>
+    <template v-if="trigger" #trigger-icon><slot name="trigger-icon"></slot></template>
+  </a-avatar>
+  <a-avatar v-else :size="size">
+    <img :src="Unknown" :alt="alt" />
+    <template v-if="trigger" #trigger-icon><slot name="trigger-icon"></slot></template>
+  </a-avatar>
+</template>
+
+<script lang="ts" setup>
+import Unknown from '@/assets/images/avatar/unknown.png'
+import * as Regexp from '@/utils/regexp'
+
+defineOptions({ name: 'Avatar' })
+
+const props = withDefaults(defineProps<Props>(), {
+  color: '#168CFF',
+  size: 20,
+  alt: 'avatar',
+  trigger: false
+})
+
+interface Props {
+  src?: string
+  name?: string
+  text?: string
+  color?: string
+  size?: string | number
+  alt?: string
+  trigger?: boolean
+}
+
+/**
+ * 英文开头：取传入字符串的前面两个字符，例如：Charles => Ch
+ * 超过 4 位：取字符串第一个字符，例如：系统管理员 => 系
+ * 其他：取传入字符串的最后两个字符，例如：张三 => 张三；王多鱼：多鱼
+ */
+const avatarName = computed(() => {
+  const name = props.name
+  if (!name) return ''
+  if (name[0].match(Regexp.OnlyEn)) {
+    const nameArr = name.split(' ')
+    if (nameArr.length > 1 && nameArr[1][0].match(Regexp.OnlyEn)) return `${nameArr[0][0]}${nameArr[1][0]}`
+    return name.substring(0, 2)
+  }
+  if (name.length > 4) return name[0]
+  return name.substring(name.length - 2, name.length)
+})
+
+const colors = [
+  '#168CFF',
+  '#7BC616',
+  '#14C9C9',
+  '#FF7D00',
+  '#FFC72E'
+]
+const avatarColor = computed(() => {
+  const hash = (s) => {
+    let hash = 0
+    for (let i = 0; i < s.length; i++) {
+      hash = (hash << 5) - hash + s.charCodeAt(i)
+    }
+    return Math.abs(hash)
+  }
+  return colors[hash(props.name || props.text) % (colors.length)]
+})
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/components/GiCell/GiCellAvatar.vue b/src/components/GiCell/GiCellAvatar.vue
index 3b3724f..ca4ae6e 100644
--- a/src/components/GiCell/GiCellAvatar.vue
+++ b/src/components/GiCell/GiCellAvatar.vue
@@ -1,8 +1,6 @@
 <template>
   <a-space fill>
-    <a-avatar :size="24" shape="circle">
-      <img :src="props.avatar" alt="avatar" />
-    </a-avatar>
+    <Avatar :src="props.avatar" :name="props.name" :size="24" />
     <a-link v-if="props.isLink" @click="emit('click')">
       <a-typography-paragraph
         class="link-text"
@@ -15,7 +13,17 @@
         {{ props.name }}
       </a-typography-paragraph>
     </a-link>
-    <span v-else>{{ props.name }}</span>
+    <span v-else>
+      <a-typography-paragraph
+        :ellipsis="{
+          rows: 1,
+          showTooltip: true,
+          css: true,
+        }"
+      >
+        {{ props.name }}
+      </a-typography-paragraph>
+    </span>
   </a-space>
 </template>
 
diff --git a/src/layout/components/HeaderRightBar/index.vue b/src/layout/components/HeaderRightBar/index.vue
index 68d598a..c77c261 100644
--- a/src/layout/components/HeaderRightBar/index.vue
+++ b/src/layout/components/HeaderRightBar/index.vue
@@ -48,10 +48,8 @@
       <a-dropdown trigger="hover">
         <a-row align="center" :wrap="false" class="user">
           <!-- 管理员头像 -->
-          <a-avatar :size="32">
-            <img :src="userStore.avatar" alt="avatar" />
-          </a-avatar>
-          <span class="username">{{ userStore.name }}</span>
+          <Avatar :src="userStore.avatar" :name="userStore.nickname" :size="32" />
+          <span class="username">{{ userStore.nickname }}</span>
           <icon-down />
         </a-row>
         <template #content>
diff --git a/src/stores/modules/user.ts b/src/stores/modules/user.ts
index 5d5d179..277ac42 100644
--- a/src/stores/modules/user.ts
+++ b/src/stores/modules/user.ts
@@ -15,7 +15,6 @@ import {
 } from '@/apis'
 import { clearToken, getToken, setToken } from '@/utils/auth'
 import { resetHasRouteFlag } from '@/router/permission'
-import getAvatar from '@/utils/avatar'
 
 const storeSetup = () => {
   const userInfo = reactive<UserInfo>({
@@ -33,7 +32,8 @@ const storeSetup = () => {
     roles: [],
     permissions: []
   })
-  const name = computed(() => userInfo.nickname)
+  const nickname = computed(() => userInfo.nickname)
+  const username = computed(() => userInfo.username)
   const avatar = computed(() => userInfo.avatar)
 
   const token = ref(getToken() || '')
@@ -100,7 +100,7 @@ const storeSetup = () => {
   const getInfo = async () => {
     const res = await getUserInfoApi()
     Object.assign(userInfo, res.data)
-    userInfo.avatar = getAvatar(res.data.avatar, res.data.gender)
+    userInfo.avatar = res.data.avatar
     if (res.data.roles && res.data.roles.length) {
       roles.value = res.data.roles
       permissions.value = res.data.permissions
@@ -109,7 +109,8 @@ const storeSetup = () => {
 
   return {
     userInfo,
-    name,
+    nickname,
+    username,
     avatar,
     token,
     roles,
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index a606bd4..00e05c3 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -82,6 +82,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 6d02673..3ca36d7 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    Avatar: typeof import('./../components/Avatar/index.vue')['default']
     Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
     Chart: typeof import('./../components/Chart/index.vue')['default']
     CronForm: typeof import('./../components/GenCron/CronForm/index.vue')['default']
diff --git a/src/views/dashboard/workplace/components/Welcome.vue b/src/views/dashboard/workplace/components/Welcome.vue
index 62ec024..07c1244 100644
--- a/src/views/dashboard/workplace/components/Welcome.vue
+++ b/src/views/dashboard/workplace/components/Welcome.vue
@@ -2,11 +2,9 @@
   <a-card class="card" :bordered="false">
     <a-row align="center" wrap :gutter="[{ xs: 0, sm: 14, md: 14, lg: 14, xl: 14, xxl: 14 }, 16]" class="content">
       <a-space size="medium">
-        <a-avatar :size="68">
-          <img :src="userStore.avatar" alt="avatar" />
-        </a-avatar>
+        <Avatar :src="userStore.avatar" :name="userStore.nickname" :size="68" />
         <div class="welcome">
-          <p class="hello">{{ goodTimeText() }}！{{ userStore.name }}</p>
+          <p class="hello">{{ goodTimeText() }}！{{ userStore.nickname }}</p>
           <p>北海虽赊，扶摇可接；东隅已逝，桑榆非晚。</p>
         </div>
       </a-space>
diff --git a/src/views/setting/profile/BasicInfo.vue b/src/views/setting/profile/BasicInfo.vue
index d441ad5..93b853c 100644
--- a/src/views/setting/profile/BasicInfo.vue
+++ b/src/views/setting/profile/BasicInfo.vue
@@ -11,10 +11,9 @@
           :on-before-upload="onBeforeUpload"
         >
           <template #upload-button>
-            <a-avatar :size="100">
+            <Avatar :src="avatarList[0].url" :name="userStore.nickname" :size="100" trigger>
               <template #trigger-icon><icon-camera /></template>
-              <img v-if="avatarList.length" :src="avatarList[0].url" alt="avatar" />
-            </a-avatar>
+            </Avatar>
           </template>
         </a-upload>
         <div class="name">
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 8f0cd32..f0b6bc8 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -18,7 +18,7 @@
           :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
           :pagination="pagination"
           :disabled-tools="['size']"
-          :disabled-column-keys="['username']"
+          :disabled-column-keys="['nickname']"
           @refresh="search"
         >
           <template #top>
@@ -40,9 +40,8 @@
               <template #default>导出</template>
             </a-button>
           </template>
-          <template #username="{ record }">
-            <GiCellAvatar :avatar="getAvatar(record.avatar, record.gender)" :name="record.username" is-link
-                          @click="onDetail(record)" />
+          <template #nickname="{ record }">
+            <GiCellAvatar :avatar="record.avatar" :name="record.nickname" />
           </template>
           <template #gender="{ record }">
             <GiCellGender :gender="record.gender" />
@@ -59,6 +58,7 @@
           </template>
           <template #action="{ record }">
             <a-space>
+              <a-link v-permission="['system:user:list']" @click="onDetail(record)">详情</a-link>
               <a-link v-permission="['system:user:update']" @click="onUpdate(record)">修改</a-link>
               <a-link
                 v-permission="['system:user:delete']"
@@ -103,7 +103,6 @@ import type { Columns, Options } from '@/components/GiForm'
 import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useDownload, useTable } from '@/hooks'
 import { isMobile } from '@/utils'
-import getAvatar from '@/utils/avatar'
 import has from '@/utils/has'
 import { DisEnableStatusList } from '@/constant/common'
 
@@ -170,15 +169,15 @@ const columns: TableInstanceColumns[] = [
     fixed: !isMobile() ? 'left' : undefined
   },
   {
-    title: '用户名',
-    dataIndex: 'username',
-    slotName: 'username',
-    width: 140,
+    title: '昵称',
+    dataIndex: 'nickname',
+    slotName: 'nickname',
+    minWidth: 140,
     ellipsis: true,
     tooltip: true,
     fixed: !isMobile() ? 'left' : undefined
   },
-  { title: '昵称', dataIndex: 'nickname', width: 120, ellipsis: true, tooltip: true },
+  { title: '用户名', dataIndex: 'username', slotName: 'username', minWidth: 140, ellipsis: true, tooltip: true },
   { title: '状态', slotName: 'status', align: 'center', width: 80 },
   { title: '性别', slotName: 'gender', align: 'center', width: 100 },
   { title: '所属部门', dataIndex: 'deptName', ellipsis: true, tooltip: true, width: 180 },
@@ -194,7 +193,7 @@ const columns: TableInstanceColumns[] = [
   {
     title: '操作',
     slotName: 'action',
-    width: 150,
+    width: 190,
     align: 'center',
     fixed: !isMobile() ? 'right' : undefined,
     show: has.hasPermOr(['system:user:update', 'system:user:delete', 'system:user:resetPwd'])