refactor: 迁移 GlobalSidebar.vue - SVG 图标替代 emoji

**变更内容**:
- 移除所有 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>
This commit is contained in:
empty
2026-01-12 01:57:18 +08:00
parent 1b7209833e
commit f40bdb007b

View File

@@ -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;
}