From f40bdb007b6a05a8769d27b538ddf0c7f5c917bc Mon Sep 17 00:00:00 2001
From: empty <let5sne.mac@gmail.com>
Date: Mon, 12 Jan 2026 01:57:18 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=BF=81=E7=A7=BB=20GlobalSidebar.?=
 =?UTF-8?q?vue=20-=20SVG=20=E5=9B=BE=E6=A0=87=E6=9B=BF=E4=BB=A3=20emoji?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**变更内容**:
- 移除所有 emoji (🚀, ✍️, 🎯, 📝, 📂, 📚, 🎨, 🔍, 📊, ⚙️)
- 导入 IconLibrary 组件
- 使用专业 SVG 图标替代 emoji

**图标映射**:
- 🚀 Logo → 自定义 SVG 火箭图标
- ✍️ AI 写作 → edit
- 🎯 范式库 → analysis
- 📝 范式写作 → article
- 📂 文稿库 → folder
- 📚 素材库 → chart
- 🎨 范式润色 → sparkles
- 🔍 对照检查 → compare
- 📊 差异标注 → chart
- ⚙️ 设置 → settings

**样式优化**:
- Logo 区域添加 hover 效果和过渡动画
- 优化图标尺寸统一 (20px)
- 增强 tooltip 样式
- 改进激活指示器颜色 (使用 text-inverse)
- 添加 aria-label 提升可访问性
- 优化间距 (gap: space-3)

**技术细节**:
- 所有图标使用 flexbox 居中对齐
- 添加 flex-shrink: 0 防止图标被压缩
- 保持设计令牌一致性

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/GlobalSidebar.vue | 62 ++++++++++++++++++++++----------
 1 file changed, 44 insertions(+), 18 deletions(-)

diff --git a/src/components/GlobalSidebar.vue b/src/components/GlobalSidebar.vue
index 20692e7..9547f9d 100644
--- a/src/components/GlobalSidebar.vue
+++ b/src/components/GlobalSidebar.vue
@@ -1,8 +1,12 @@
 <template>
   <aside class="sidebar">
     <!-- Logo/Home -->
-    <div class="sidebar-logo">
-      🚀
+    <div class="sidebar-logo" title="AI 写作工坊">
+      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
     </div>
 
     <!-- 导航项 -->
@@ -13,8 +17,9 @@
         @click="switchPage(item.id)"
         :class="['nav-item', { active: currentPage === item.id }]"
         :title="item.label"
+        :aria-label="item.label"
       >
-        <span class="nav-icon">{{ item.icon }}</span>
+        <IconLibrary :name="item.icon" :size="20" class="nav-icon" />
 
         <!-- Tooltip -->
         <div class="nav-tooltip">
@@ -33,8 +38,9 @@
         @click="switchPage('settings')"
         :class="['nav-item', { active: currentPage === 'settings' }]"
         title="设置"
+        aria-label="设置"
       >
-        <span class="nav-icon">⚙️</span>
+        <IconLibrary name="settings" :size="20" class="nav-icon" />
         <div class="nav-tooltip">
           设置
           <div class="nav-tooltip-arrow"></div>
@@ -47,19 +53,20 @@
 <script setup>
 import { computed } from 'vue'
 import { useAppStore } from '../stores/app'
+import IconLibrary from './icons/IconLibrary.vue'
 
 const appStore = useAppStore()
 const currentPage = computed(() => appStore.currentPage)
 
 const navItems = [
-  { id: 'writer', label: 'AI 写作', icon: '✍️' },
-  { id: 'analysis', label: '范式库', icon: '🎯' },
-  { id: 'paradigmWriter', label: '范式写作', icon: '📝' },
-  { id: 'documents', label: '文稿库', icon: '📂' },
-  { id: 'materials', label: '素材库', icon: '📚' },
-  { id: 'rewrite', label: '范式润色', icon: '🎨' },
-  { id: 'compare', label: '对照检查', icon: '🔍' },
-  { id: 'diffAnnotation', label: '差异标注', icon: '📊' }
+  { id: 'writer', label: 'AI 写作', icon: 'edit' },
+  { id: 'analysis', label: '范式库', icon: 'analysis' },
+  { id: 'paradigmWriter', label: '范式写作', icon: 'article' },
+  { id: 'documents', label: '文稿库', icon: 'folder' },
+  { id: 'materials', label: '素材库', icon: 'chart' },
+  { id: 'rewrite', label: '范式润色', icon: 'sparkles' },
+  { id: 'compare', label: '对照检查', icon: 'compare' },
+  { id: 'diffAnnotation', label: '差异标注', icon: 'chart' }
 ]
 
 const switchPage = (page) => {
@@ -84,9 +91,24 @@ const switchPage = (page) => {
 
 /* Logo */
 .sidebar-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
   margin-bottom: var(--space-8);
-  font-size: var(--text-2xl);
-  filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.5));
+  color: var(--accent-primary);
+  transition: all var(--transition-normal);
+}
+
+.sidebar-logo:hover {
+  color: var(--accent-primary-hover);
+  transform: scale(1.05);
+}
+
+.sidebar-logo svg {
+  width: 100%;
+  height: 100%;
 }
 
 /* 导航区域 */
@@ -96,7 +118,7 @@ const switchPage = (page) => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--space-4);
+  gap: var(--space-3);
 }
 
 /* 导航项 */
@@ -127,7 +149,10 @@ const switchPage = (page) => {
 }
 
 .nav-icon {
-  font-size: var(--text-xl);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 /* Tooltip */
@@ -135,10 +160,11 @@ const switchPage = (page) => {
   position: absolute;
   left: 100%;
   margin-left: var(--space-3);
-  padding: var(--space-1) var(--space-2);
+  padding: var(--space-2) var(--space-3);
   background: var(--bg-secondary);
   color: var(--text-primary);
   font-size: var(--text-xs);
+  font-weight: var(--font-medium);
   border-radius: var(--radius-md);
   opacity: 0;
   visibility: hidden;
@@ -174,7 +200,7 @@ const switchPage = (page) => {
   left: 0;
   width: 4px;
   height: 24px;
-  background: var(--accent-primary);
+  background: var(--text-inverse);
   border-radius: 0 var(--radius-full) var(--radius-full) 0;
 }