.

src/components/common/UserAvatar/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { NAvatar } from 'naive-ui'
+import { NAvatar, avatarProps } from 'naive-ui'
 import { useUserStore } from '@/store'
 import defaultAvatar from '@/assets/avatar.png'
 import { isString } from '@/utils/is'
@@ -11,8 +11,8 @@ const userInfo = computed(() => userStore.userInfo)
 
 const props = defineProps({
     avatarType: {
-        type: String,
-        default: 'default'
+        type: avatarProps.size,
+        default: 'large'
     },
     onlyAvatar: {
         type: Boolean,
@@ -25,10 +25,10 @@ const props = defineProps({
     <div class="flex items-center overflow-hidden">
         <div class="w-10 h-10 overflow-hidden rounded-full shrink-0" :class="[avatarType]">
             <template v-if="isString(userInfo.avatar) && userInfo.avatar.length > 0">
-                <NAvatar size="large" round :src="userInfo.avatar" :fallback-src="defaultAvatar" />
+                <NAvatar :size="avatarType" round :src="userInfo.avatar" :fallback-src="defaultAvatar" />
             </template>
             <template v-else>
-                <NAvatar size="large" round :src="defaultAvatar" />
+                <NAvatar :size="avatarType" round :src="defaultAvatar" />
             </template>
         </div>
         <div class="flex-1 min-w-0 ml-2" v-if="!onlyAvatar" :class="[avatarType + '-text']">
@@ -43,17 +43,17 @@ const props = defineProps({
 </template>
 
 <style lang="less" scoped>
-.small {
-    width: 24px;
-    height: 24px;
-    --n-avatar-size-override: 24px;
-}
+// .small {
+//     width: 24px;
+//     height: 24px;
+//     --n-avatar-size-override: 24px;
+// }
 
-.large {
-    width: 50px;
-    height: 50px;
-    --n-avatar-size-override: 50px;
-}
+// .large {
+//     width: 50px;
+//     height: 50px;
+//     --n-avatar-size-override: 50px;
+// }
 
 .large-text {
     h2 {

src/views/chat/components/Header/index.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import { computed, nextTick } from 'vue'
-import { HoverButton, SvgIcon } from '@/components/common'
+import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'
 import { useAppStore, useChatStore } from '@/store'
+import { useRouter } from 'vue-router'
+import { useBasicLayout } from '@/hooks/useBasicLayout'
 
 interface Props {
     usingContext: boolean
@@ -10,6 +12,7 @@ interface Props {
 interface Emit {
     (ev: 'export'): void
     (ev: 'toggleUsingContext'): void
+    (ev: 'goMine'): void
 }
 
 defineProps<Props>()
@@ -39,6 +42,15 @@ function toggleUsingContext() {
     emit('toggleUsingContext')
 }
 
+const { isMobile } = useBasicLayout()
+const router = useRouter()
+function goMine() {
+    if (isMobile.value) {
+        router.push({
+            name: 'mine'
+        })
+    }
+}
 </script>
 
 <template>
@@ -70,6 +82,8 @@ function toggleUsingContext() {
                         <SvgIcon icon="ri:download-2-line" />
                     </span>
                 </HoverButton>
+
+                <HoverButton @click="goMine"> <user-avatar :avatarType="24" onlyAvatar></user-avatar> </HoverButton>
             </div>
         </div>
     </header>

src/views/chat/index.vue

@@ -420,6 +420,10 @@ onMounted(() => {
 onUnmounted(() => {
     if (loading.value) controller.abort()
 })
+
+function goMine() {
+    
+}
 </script>
 
 <template>
@@ -429,6 +433,7 @@ onUnmounted(() => {
             :using-context="usingContext"
             @export="handleExport"
             @toggle-using-context="toggleUsingContext"
+            @go-mine="goMine"
         />
         <main class="flex-1 overflow-hidden">
             <div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">

src/views/chat/layout/sider/Footer.vue

@@ -2,16 +2,20 @@
 import { defineAsyncComponent, ref } from 'vue'
 import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'
 import { useRouter } from 'vue-router'
+import { useBasicLayout } from '@/hooks/useBasicLayout'
 
 const Setting = defineAsyncComponent(() => import('@/components/common/Setting/index.vue'))
 
 const show = ref(false)
 
+const { isMobile } = useBasicLayout()
 const router = useRouter()
 function goMine() {
-    router.push({
-        name: 'mine'
-    })
+    if (isMobile.value) {
+        router.push({
+            name: 'mine'
+        })
+    }
 }
 </script>
 

src/views/page/Home.vue

@@ -14,12 +14,12 @@
                 <div class="flex items-center py-3 lg:py-8 pr-4 lg:pr-52">
                     <template v-if="isLogin">
                         <n-button text v-if="isMobile" @click="goMine">
-                            <user-avatar avatarType="small" onlyAvatar />
+                            <user-avatar avatarType="medium" onlyAvatar />
                         </n-button>
                         <n-popover placement="bottom" trigger="click" v-else>
                             <template #trigger>
                                 <n-button text>
-                                    <user-avatar :avatarType="isMobile ? 'small' : 'default'" onlyAvatar />
+                                    <user-avatar :avatarType="isMobile ? 'medium' : 'large'" onlyAvatar />
                                 </n-button>
                             </template>
                             <n-button size="small" @click="logout" text>退出登录</n-button>
@@ -129,7 +129,8 @@ import {
     NEl,
     NPopover,
     useMessage,
-    useDialog
+    useDialog,
+    avatarProps
 } from 'naive-ui'
 import h5Bg from '@/assets/bg_mobile.jpg'
 import pcBg from '@/assets/bg_desktop.jpg'