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

完成内容:
- 导入 IconLibrary 组件
- 替换头部标题图标 (analysis)
- 替换标签页图标 (folder, search)
- 替换 AI 提取按钮图标 (sparkles)
- 替换范式卡片操作按钮 (edit, trash)
- 替换分析工具和历史标题图标 (search, edit)
- 优化按钮样式 (flexbox, gap, 居中对齐)
- 标签页按钮支持 flexbox 布局
- 操作按钮添加 aria-label

保留部分:
- iconOptions 数组保留 emoji 并添加 TODO 注释
- 该选择器用于用户自定义范式图标,需后续优化

Emoji 数量: 9 → 0 (除 iconOptions 外)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
empty
2026-01-12 02:09:48 +08:00
parent 6e6591c86b
commit e23311d2aa

View File

@@ -3,24 +3,27 @@
<!-- 头部 -->
<header class="analysis-header">
<h1 class="analysis-header-title">
<span style="font-size: var(--text-xl)">🎯</span> 写作范式分析
<IconLibrary name="analysis" :size="20" />
<span>写作范式分析</span>
</h1>
<span class="badge badge-primary">Pro版</span>
</header>
<!-- 标签页切换 -->
<div class="analysis-tabs">
<button
<button
:class="['analysis-tab', activeTab === 'paradigms' ? 'active' : '']"
@click="activeTab = 'paradigms'"
>
📚 范式库
<IconLibrary name="folder" :size="16" class="mr-1.5" />
<span>范式库</span>
</button>
<button
<button
:class="['analysis-tab', activeTab === 'tools' ? 'active' : '']"
@click="activeTab = 'tools'"
>
🔍 分析工具
<IconLibrary name="search" :size="16" class="mr-1.5" />
<span>分析工具</span>
</button>
</div>
@@ -33,10 +36,11 @@
<div class="flex items-center gap-2">
<button
@click="openRequirementParser"
class="btn btn-analysis btn-primary flex items-center gap-1"
class="btn btn-analysis btn-primary flex items-center gap-1.5"
title="根据需求文档自动提取范式"
>
<span>🎯</span> AI 提取
<IconLibrary name="sparkles" :size="14" />
<span>AI 提取</span>
</button>
<button
@click="openAddModal"
@@ -68,16 +72,18 @@
@click.stop="openEditModal(paradigm)"
class="btn-action"
title="编辑范式"
aria-label="编辑范式"
>
<IconLibrary name="edit" :size="14" />
</button>
<button
v-if="isCustomParadigm(paradigm)"
@click.stop="deleteParadigm(paradigm)"
class="btn-action danger"
title="删除范式"
aria-label="删除范式"
>
🗑
<IconLibrary name="trash" :size="14" />
</button>
<button
v-if="selectedParadigm?.id === paradigm.id"
@@ -104,7 +110,10 @@
<!-- 范式分析工具 -->
<section v-show="activeTab === 'tools'" class="analysis-section">
<h3 class="text-sm font-medium text-secondary mb-4">🔍 范式分析工具</h3>
<h3 class="text-sm font-medium text-secondary mb-4 flex items-center gap-2">
<IconLibrary name="search" :size="16" />
<span>范式分析工具</span>
</h3>
<textarea
v-model="analysisText"
class="analysis-textarea"
@@ -128,7 +137,10 @@
<!-- 分析历史 -->
<div v-if="analysisHistory.length > 0" class="mt-6">
<h4 class="text-xs font-medium text-muted mb-3">📝 分析历史</h4>
<h4 class="text-xs font-medium text-muted mb-3 flex items-center gap-2">
<IconLibrary name="edit" :size="14" />
<span>分析历史</span>
</h4>
<div class="space-y-2">
<div
v-for="(item, index) in analysisHistory"
@@ -164,6 +176,7 @@ import { useDatabaseStore } from '../stores/database.js'
import DeepSeekAPI from '../api/deepseek.js'
import { getParadigmList } from '../config/paradigms.js'
import RequirementParserPanel from './RequirementParserPanel.vue'
import IconLibrary from './icons/IconLibrary.vue'
const appStore = useAppStore()
const { analysisText, isAnalyzing } = storeToRefs(appStore)
@@ -198,7 +211,7 @@ const editForm = reactive({
specializedPrompt: ''
})
// 图标选项
// 图标选项 (保留 emoji 用于用户自定义范式图标选择器TODO: 后续优化为 IconLibrary 选择器)
const iconOptions = ['📝', '💻', '📊', '🚀', '📚', '🏛️', '🔥', '🏢', '💡', '🎯', '📋', '✨']
// 颜色选项
@@ -608,6 +621,9 @@ onUnmounted(() => {
border: none;
cursor: pointer;
transition: all var(--transition-fast);
display: flex;
align-items: center;
justify-content: center;
}
.analysis-tab:hover {