refactor: chat left menu avatar

Author: 1myuan

ui/src/api/chat/chat.ts

@@ -42,6 +42,10 @@ const open: (loading?: Ref<boolean>) => Promise<Result<string>> = (loading) => {
 const chat: (chat_id: string, data: any) => Promise<any> = (chat_id, data) => {
   return postStream(`/chat/api/chat_message/${chat_id}`, data)
 }
+
+/**
+ * 应用认证信息
+ */
 const chatProfile: (assessToken: string, loading?: Ref<boolean>) => Promise<Result<ChatProfile>> = (
   assessToken,
   loading,
@@ -219,6 +223,13 @@ const resetCurrentPassword: (
 ) => Promise<Result<boolean>> = (request, loading) => {
   return post('/chat_user/current/reset_password', request, undefined, loading)
 }
+
+/**
+ * 获取当前用户信息
+ */
+const getChatUserProfile: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
+  return get('/chat_user/profile', {}, loading)
+}
 export default {
   open,
   chat,
@@ -240,5 +251,6 @@ export default {
   pageChat,
   pageChatRecord,
   logout,
-  resetCurrentPassword
+  resetCurrentPassword,
+  getChatUserProfile
 }

ui/src/api/type/chat.ts

@@ -12,4 +12,12 @@ interface ChatProfile {
   // 登录类型
   login_value?: Array<string>
 }
-export { type ChatProfile }
+
+interface ChatUserProfile {
+  email: string
+  id: string
+  nick_name: string
+  username: string
+  source: string
+}
+export { type ChatProfile, type ChatUserProfile }

ui/src/router/chat/index.ts

@@ -59,6 +59,7 @@ router.beforeEach(
         } else {
           try {
             await chatUser.applicationProfile()
+            await chatUser.getChatUserProfile()
           } catch (e: any) {
             if (e.response?.status === 401) {
               next({

ui/src/stores/modules/chat-user.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import ChatAPI from '@/api/chat/chat'
-import { type ChatProfile } from '@/api/type/chat'
+import type { ChatProfile, ChatUserProfile } from '@/api/type/chat'
 import type { LoginRequest } from '@/api/type/user'
 import type { Ref } from 'vue'
 interface ChatUser {
@@ -11,6 +11,7 @@ interface Application {}
 interface Chat {
   chat_profile?: ChatProfile
   application?: Application
+  chatUserProfile?: ChatUserProfile 
   token?: string
   accessToken?: string
 }
@@ -30,6 +31,10 @@ const useChatUserStore = defineStore('chat-user', {
         return this.chat_profile
       })
     },
+    async getChatUserProfile() {
+      const res = await ChatAPI.getChatUserProfile()
+      this.chatUserProfile = res.data
+    },
     applicationProfile() {
       return ChatAPI.applicationProfile().then((ok) => {
         this.application = ok.data

ui/src/views/chat/pc/index.vue

@@ -135,34 +135,38 @@
               <el-text type="info">{{ $t('chat.noHistory') }}</el-text>
             </div>
           </el-sub-menu>
-          <el-dropdown trigger="click" type="primary" class="w-full">
+
+          <div v-if="!chatUser.chat_profile?.authentication" class="no-auth-avatar">
+            <el-avatar :size="32">
+              <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+            </el-avatar>
+          </div>
+          <el-dropdown v-else trigger="click" type="primary" class="w-full">
             <div class="flex align-center user-info">
               <el-avatar :size="32">
                 <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
               </el-avatar>
-              <!-- TODO -->
-              <span v-show="!isPcCollapse" class="ml-8 color-text-primary">{{ 222 }}</span>
+              <span v-show="!isPcCollapse" class="ml-8 color-text-primary">{{ chatUser.chatUserProfile?.nick_name }}</span>
             </div>
 
             <template #dropdown>
               <el-dropdown-menu class="avatar-dropdown">
-                <div class="flex align-center" style="padding: 12px;">
+                <div class="flex align-center" style="padding: 8px 12px;">
                   <div class="mr-8 flex align-center">
                     <el-avatar :size="40">
                       <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
                     </el-avatar>
                   </div>
                   <div>
-                    <!-- TODO -->
-                    <h4 class="medium mb-4">{{ 111 }}</h4>
-                    <div class="color-secondary">{{ `${t('common.username')}: 222` }}</div>
+                    <h4 class="medium mb-4">{{ chatUser.chatUserProfile?.nick_name }}</h4>
+                    <div class="color-secondary">{{ `${t('common.username')}: ${chatUser.chatUserProfile?.username}` }}</div>
                   </div>
                 </div>
-                <el-dropdown-item class="border-t" style="padding-top: 8px; padding-bottom: 8px;" @click="openResetPassword">
+                <el-dropdown-item v-if="chatUser.chatUserProfile?.source === 'LOCAL'" class="border-t" style="padding-top: 8px; padding-bottom: 8px;" @click="openResetPassword">
                   <AppIcon iconName="app-export" />
                   {{ $t('views.login.resetPassword') }}
                 </el-dropdown-item>
-                <el-dropdown-item class="border-t" @click="logout">
+                <el-dropdown-item v-if="chatUser.chatUserProfile?.source === 'LOCAL'" class="border-t" style="padding-top: 8px; padding-bottom: 8px;" @click="logout">
                   <AppIcon iconName="app-export" />
                   {{ $t('layout.logout') }}
                 </el-dropdown-item>
@@ -545,6 +549,14 @@ onMounted(() => {
         background: transparent;
       }
 
+      .no-auth-avatar {
+        margin-top: auto;
+        padding: 16px;
+        .el-avatar {
+          cursor: default;
+        }
+      }
+
       .el-dropdown {
         margin-top: auto;
         .user-info {