refactor: chat left menu avatar

This commit is contained in:
teukkk 2025-06-25 19:20:30 +08:00
parent bdba507090
commit 4c66fa998f
5 changed files with 50 additions and 12 deletions

View File

@ -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) => { const chat: (chat_id: string, data: any) => Promise<any> = (chat_id, data) => {
return postStream(`/chat/api/chat_message/${chat_id}`, data) return postStream(`/chat/api/chat_message/${chat_id}`, data)
} }
/**
*
*/
const chatProfile: (assessToken: string, loading?: Ref<boolean>) => Promise<Result<ChatProfile>> = ( const chatProfile: (assessToken: string, loading?: Ref<boolean>) => Promise<Result<ChatProfile>> = (
assessToken, assessToken,
loading, loading,
@ -219,6 +223,13 @@ const resetCurrentPassword: (
) => Promise<Result<boolean>> = (request, loading) => { ) => Promise<Result<boolean>> = (request, loading) => {
return post('/chat_user/current/reset_password', request, undefined, 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 { export default {
open, open,
chat, chat,
@ -240,5 +251,6 @@ export default {
pageChat, pageChat,
pageChatRecord, pageChatRecord,
logout, logout,
resetCurrentPassword resetCurrentPassword,
getChatUserProfile
} }

View File

@ -12,4 +12,12 @@ interface ChatProfile {
// 登录类型 // 登录类型
login_value?: Array<string> 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 }

View File

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

View File

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

View File

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