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:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user