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