style: 复用夭夭侧栏图标资源

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "@koa/bodyparser": "^5.0.0",
         "@koa/router": "^15.4.0",
+        "@vicons/ionicons5": "^0.13.0",
         "@vicons/tabler": "^0.13.0",
         "busboy": "^1.6.0",
         "cookie": "^1.0.2",
@@ -2582,6 +2583,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@vicons/ionicons5": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmmirror.com/@vicons/ionicons5/-/ionicons5-0.13.0.tgz",
+      "integrity": "sha512-zvZKBPjEXKN7AXNo2Na2uy+nvuv6SP4KAMQxpKL2vfHMj0fSvuw7JZcOPCjQC3e7ayssKnaoFVAhbYcW6v41qQ==",
+      "license": "MIT"
+    },
     "node_modules/@vicons/tabler": {
       "version": "0.13.0",
       "resolved": "https://registry.npmmirror.com/@vicons/tabler/-/tabler-0.13.0.tgz",

package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@koa/bodyparser": "^5.0.0",
     "@koa/router": "^15.4.0",
+    "@vicons/ionicons5": "^0.13.0",
     "@vicons/tabler": "^0.13.0",
     "busboy": "^1.6.0",
     "cookie": "^1.0.2",

src/client/components/app/WorkspaceShell.vue

@@ -3,6 +3,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import AppIcon from '@/components/common/AppIcon.vue'
 import BrandMark from '@/components/common/BrandMark.vue'
+import YaoYaoSidebarIcon from '@/components/common/YaoYaoSidebarIcon.vue'
 
 type NavItem = {
   key: 'chat' | 'groups' | 'files'
@@ -90,6 +91,10 @@ function toggleSidebar() {
   try { localStorage.setItem(SIDEBAR_COLLAPSED_KEY, sidebarCollapsed.value ? '1' : '0') } catch { /* optional persistence */ }
 }
 
+function navIcon(key: NavItem['key']): 'chat' | 'folder' | 'people' {
+  return key === 'groups' ? 'people' : key === 'files' ? 'folder' : 'chat'
+}
+
 async function openSidebarSearch(host: HTMLElement | null) {
   if (sidebarCollapsed.value) {
     sidebarCollapsed.value = false
@@ -193,7 +198,7 @@ onBeforeUnmount(() => {
         :tabindex="sidebarSearchOpen ? -1 : 0"
         @click="openSidebarSearch(desktopSidebarContext)"
       >
-        <AppIcon name="search" :size="18" />
+        <YaoYaoSidebarIcon name="search" />
         <span>搜索</span>
       </button>
 
@@ -211,7 +216,7 @@ onBeforeUnmount(() => {
           :title="item.label"
           @click="navigate(item.path)"
         >
-          <AppIcon :name="item.icon" :size="18" />
+          <YaoYaoSidebarIcon :name="navIcon(item.key)" />
           <span>{{ item.label }}</span>
         </button>
       </nav>

src/client/components/common/YaoYaoSidebarIcon.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NIcon } from 'naive-ui'
+import {
+  AddOutline,
+  ChatbubbleOutline,
+  FolderOutline,
+  PeopleOutline,
+  SearchOutline,
+} from '@vicons/ionicons5'
+
+type SidebarIconName = 'add' | 'chat' | 'folder' | 'people' | 'search'
+
+const props = withDefaults(defineProps<{ name: SidebarIconName; size?: number }>(), { size: 20 })
+const component = computed(() => ({
+  add: AddOutline,
+  chat: ChatbubbleOutline,
+  folder: FolderOutline,
+  people: PeopleOutline,
+  search: SearchOutline,
+})[props.name])
+</script>
+
+<template>
+  <NIcon :component="component" :size="size" aria-hidden="true" />
+</template>

src/client/views/ChatView.vue

@@ -2,6 +2,7 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import AppIcon from '@/components/common/AppIcon.vue'
+import YaoYaoSidebarIcon from '@/components/common/YaoYaoSidebarIcon.vue'
 import ChoiceDialog from '@/components/common/ChoiceDialog.vue'
 import type { ChoiceOption } from '@/components/common/types'
 import ComposerShell from '@/components/composer/ComposerShell.vue'
@@ -242,7 +243,7 @@ watch(() => chat.activeSessionId, async id => {
   <WorkspaceView sidebar-title="对话" :sidebar-subtitle="`${sessions.length} 个会话`" :inspector-open="!!preview" @close-inspector="preview = null">
     <template #sidebar-action>
       <button class="sidebar-primary-action" type="button" title="新建聊天" aria-label="新建聊天" @click="createSession">
-        <AppIcon name="edit" :size="17" />
+        <YaoYaoSidebarIcon name="add" />
         <span>新建聊天</span>
       </button>
     </template>

src/client/views/GroupsView.vue

@@ -2,6 +2,7 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import AppIcon from '@/components/common/AppIcon.vue'
+import YaoYaoSidebarIcon from '@/components/common/YaoYaoSidebarIcon.vue'
 import EmptyState from '@/components/common/EmptyState.vue'
 import ComposerShell from '@/components/composer/ComposerShell.vue'
 import type { ComposerOption, ComposerReference, ComposerSubmit } from '@/components/composer/types'
@@ -127,7 +128,7 @@ watch(() => route.params.roomId, async roomId => {
   <WorkspaceView sidebar-title="群聊" :sidebar-subtitle="groups.availability === 'available' ? `${filteredRooms.length} 个活跃房间` : '9119 群聊 v2'" :inspector-open="managerOpen && !!room" @close-inspector="managerOpen = false">
     <template #sidebar-action>
       <button class="sidebar-primary-action" type="button" :disabled="groups.availability !== 'available'" title="新建群聊" aria-label="新建群聊" @click="createOpen = true">
-        <AppIcon name="edit" :size="17" />
+        <YaoYaoSidebarIcon name="add" />
         <span>新建群聊</span>
       </button>
     </template>