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