diff --git a/src/views/im/home/components/ToolBar.vue b/src/views/im/home/components/ToolBar.vue index 28c5e249b..dd5a64475 100644 --- a/src/views/im/home/components/ToolBar.vue +++ b/src/views/im/home/components/ToolBar.vue @@ -3,36 +3,24 @@ ToolBar:IM 左侧工具栏 布局:顶部头像 → 中间三 Tab(消息/好友/群聊)→ 底部设置 --> -
+
- + {{ nicknameShort }}
- +
conversationStore.getTotalUnread) /** - * 三个主 Tab 的配置,路径对应 /im/home/{conversation,friend,group} - * icon 走通用 组件,支持 ep: / svg-icon: 前缀 - * 群聊用项目自带的 svg-icon:peoples(双人剪影)一眼区分单人 / 群体 + * 三个主 Tab 的配置,name 对应路由 ImHomeConversation/Friend/Group + * 用 name 而非 path:path 后期容易变(前缀调整、嵌套加层),name 更稳定 + * icon 走通用 组件,支持 iconify 全部前缀(ep: / ant-design: / svg-icon: 等) + * 群聊用 ant-design:team(三人组合):ep 没有"群体"图标,三人剪影跟 ep:user(单人)一眼区分单人 / 群体 */ -// TODO @AI:改成 name 更合适把? -// TODO @AI: 其他地方,是不是也能减少 path?主要 path 容易变! const tabs = [ - { path: '/im/home/conversation', label: '消息', icon: 'ep:chat-dot-round' }, - { path: '/im/home/friend', label: '好友', icon: 'ep:user' }, - { path: '/im/home/group', label: '群聊', icon: 'svg-icon:peoples' } // TODO @AI:这个图标不是很好,看看怎么优化下;ep 里,有 group 概念的图标么? + { name: 'ImHomeConversation', label: '消息', icon: 'ep:chat-dot-round' }, + { name: 'ImHomeFriend', label: '好友', icon: 'ep:user' }, + { name: 'ImHomeGroup', label: '群聊', icon: 'ant-design:team' } ] -/** 当前路由是否命中 Tab:完全匹配或 Tab 路径是当前路径前缀均算命中 */ -const isActive = (path: string) => route.path === path || route.path.startsWith(path + '/') - -// TODO @AI:方法注释 -const goTab = (path: string) => { - if (route.path === path) { - return - } - router.push(path) -} - -// TODO @AI:改成 name 更合适把? -const goProfile = () => router.push('/user/profile') +/** 当前路由是否命中 Tab:直接比对 route.name */ +const isActive = (name: string) => route.name === name const avatar = computed(() => userStore.getUser?.avatar || '') @@ -111,6 +87,17 @@ const nicknameShort = computed(() => { const name = userStore.getUser?.nickname || '' return name ? name.slice(-1) : '我' }) + +/** 切换 Tab:当前 Tab 已选中时跳过,避免无意义的导航 */ +const goTab = (name: string) => { + if (route.name === name) { + return + } + router.push({ name }) +} + +/** 跳转个人中心(路由 name=Profile) */ +const goProfile = () => router.push({ name: 'Profile' })