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