let5see/ai-write
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
完成内容:
- 导入 IconLibrary 组件
- 替换工具栏按钮图标 (copy, trash, save)
- 替换 AI 思考路径图标 (sparkles)
- 替换质检报告图标 (search, check, warning, error)
- 替换空状态图标 (keyboard, document, sparkles, chart)
- 替换范式写作页面图标 (copy, download)
- 替换范式编辑表单图标 (add, edit, close, info)
- 替换分析页面图标 (chart, copy, edit)
- 移除 stageLabel 中的 emoji
- 优化按钮样式 (flexbox, gap, 统一间距)
- 空状态使用带背景的图标容器

保留部分:
- iconOptions 数组保留 emoji 并添加 TODO 注释
- 该选择器需后续优化为 SVG 图标网格

Emoji 数量: 27 → 1 (iconOptions 待优化)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
empty
2026-01-12 02:05:32 +08:00
parent f40bdb007b
commit 4b1c0b9d54
1 changed files with 70 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/components/MainContent.vue
View File

@@ -4,7 +4,10 @@
<div v-if="showPromptDebug && currentPage === 'writer'" class="absolute inset-0 bg-slate-950/95 z-20 p-8 overflow-auto backdrop-blur-sm">
<div class="max-w-5xl mx-auto">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold text-yellow-500">🔧 构建的 Prompt 结构预览</h3>
<h3 class="text-lg font-bold text-yellow-500 flex items-center gap-2">
<IconLibrary name="gear" :size="20" />
构建的 Prompt 结构预览
</h3>
<button @click="showPromptDebug = false" class="text-sm text-slate-400 hover:text-white">关闭预览</button>
</div>
<div class="bg-black/50 p-6 rounded-lg border border-slate-700 font-mono text-sm text-green-400 whitespace-pre-wrap leading-relaxed shadow-inner">
@@ -25,11 +28,13 @@
字数: {{ generatedContent.length }} {{ isGenerating ? '(生成中...)' : '' }}
</span>
<div class="flex gap-3">
<button @click="copyContent" class="text-xs text-slate-400 hover:text-white flex items-center gap-1 transition">
📋 复制 Markdown
<button @click="copyContent" class="text-xs text-slate-400 hover:text-white flex items-center gap-1.5 transition">
<IconLibrary name="copy" :size="14" />
<span>复制 Markdown</span>
</button>
<button @click="clearContent" class="text-xs text-slate-400 hover:text-red-400 flex items-center gap-1 transition">
🗑️ 清空
<button @click="clearContent" class="text-xs text-slate-400 hover:text-red-400 flex items-center gap-1.5 transition">
<IconLibrary name="trash" :size="14" />
<span>清空</span>
</button>
</div>
</div>
@@ -39,11 +44,13 @@
字数: {{ documentContent.length }}
</span>
<div class="flex gap-3">
<button @click="saveDocument" class="text-xs text-green-400 hover:text-green-300 flex items-center gap-1 transition">
💾 保存
<button @click="saveDocument" class="text-xs text-green-400 hover:text-green-300 flex items-center gap-1.5 transition">
<IconLibrary name="save" :size="14" />
<span>保存</span>
</button>
<button @click="copyDocContent" class="text-xs text-slate-400 hover:text-white flex items-center gap-1 transition">
📋 复制
<button @click="copyDocContent" class="text-xs text-slate-400 hover:text-white flex items-center gap-1.5 transition">
<IconLibrary name="copy" :size="14" />
<span>复制</span>
</button>
</div>
</div>
@@ -55,7 +62,9 @@
<!-- 写作页面内容 -->
<div v-if="currentPage === 'writer'">
<div v-if="!generatedContent && !isGenerating" class="h-full flex flex-col items-center justify-center text-slate-700 mt-20">
<span class="text-6xl mb-4 opacity-20">⌨️</span>
<div class="w-20 h-20 flex items-center justify-center rounded-2xl bg-slate-800/50 border border-slate-700 mb-4 opacity-40">
<IconLibrary name="keyboard" :size="48" />
</div>
<p>在左侧配置参数，点击生成开始写作</p>
</div>
@@ -67,7 +76,7 @@
class="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-indigo-900/20 transition"
>
<div class="flex items-center gap-2">
<span class="text-indigo-400">🧠</span>
<IconLibrary name="sparkles" :size="16" class="text-indigo-400" />
<span class="text-sm font-medium text-indigo-300">AI 思考路径</span>
<span v-if="generationStage === 'thinking'" class="text-xs px-2 py-0.5 rounded bg-indigo-500/20 text-indigo-400 animate-pulse">
分析中...
@@ -89,7 +98,7 @@
<div v-if="qualityReport" class="bg-slate-800/50 rounded-lg border border-slate-600 overflow-hidden">
<div class="px-4 py-3 border-b border-slate-700 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-lg">🔍</span>
<IconLibrary name="search" :size="18" />
<span class="text-sm font-medium text-slate-200">质检报告</span>
<span
class="text-xs px-2 py-0.5 rounded"
@@ -117,9 +126,9 @@
class="flex items-start gap-3 text-sm"
>
<span class="shrink-0 mt-0.5">
<span v-if="check.status === 'pass'" class="text-green-400">✅</span>
<span v-else-if="check.status === 'warning'" class="text-yellow-400">⚠️</span>
<span v-else class="text-red-400">❌</span>
<IconLibrary v-if="check.status === 'pass'" name="check" :size="14" class="text-green-400" />
<IconLibrary v-else-if="check.status === 'warning'" name="warning" :size="14" class="text-yellow-400" />
<IconLibrary v-else name="error" :size="14" class="text-red-400" />
</span>
<div>
<span class="font-medium" :class="{
@@ -131,8 +140,9 @@
</div>
</div>
<div v-if="qualityReport.summary" class="pt-3 border-t border-slate-700">
<p class="text-xs text-slate-400 italic">📝 {{ qualityReport.summary }}</p>
<div v-if="qualityReport.summary" class="pt-3 border-t border-slate-700 flex items-start gap-2">
<IconLibrary name="edit" :size="12" class="text-slate-400 mt-0.5" />
<p class="text-xs text-slate-400 italic">{{ qualityReport.summary }}</p>
</div>
</div>
</div>
@@ -160,7 +170,9 @@
<!-- 文稿编辑页面内容 -->
<div v-else-if="currentPage === 'documents'" class="h-full">
<div v-if="!currentDocument" class="h-full flex flex-col items-center justify-center text-slate-700 mt-20">
<span class="text-6xl mb-4 opacity-20">📄</span>
<div class="w-20 h-20 flex items-center justify-center rounded-2xl bg-slate-800/50 border border-slate-700 mb-4 opacity-40">
<IconLibrary name="document" :size="48" />
</div>
<p>在左侧选择文稿进行编辑</p>
</div>
@@ -216,7 +228,9 @@
<!-- 范式写作页面内容 -->
<div v-else-if="currentPage === 'paradigmWriter'" class="h-full flex flex-col">
<div v-if="!totalGeneratedContent" class="h-full flex flex-col items-center justify-center text-slate-700 mt-20">
<span class="text-6xl mb-4 opacity-20">✨</span>
<div class="w-20 h-20 flex items-center justify-center rounded-2xl bg-slate-800/50 border border-slate-700 mb-4 opacity-40">
<IconLibrary name="sparkles" :size="48" />
</div>
<p>生成的内容将在这里实时预览</p>
<p class="text-xs text-slate-500 mt-2">选择章节并点击「生成本节」开始</p>
</div>
@@ -245,11 +259,13 @@
<!-- 操作按钮 -->
<div class="flex gap-3 pt-4 border-t border-slate-700">
<button @click="copyParadigmContent" class="text-xs px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded transition">
📋 复制全文
<button @click="copyParadigmContent" class="text-xs px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded transition flex items-center gap-2">
<IconLibrary name="copy" :size="14" />
<span>复制全文</span>
</button>
<button @click="exportParadigmToWord" class="text-xs px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded transition">
📥 导出 Word
<button @click="exportParadigmToWord" class="text-xs px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded transition flex items-center gap-2">
<IconLibrary name="download" :size="14" />
<span>导出 Word</span>
</button>
</div>
</div>
@@ -260,14 +276,15 @@
<!-- 范式编辑表单 -->
<div v-if="paradigmEditState.isEditing" class="bg-slate-900 rounded-lg border border-slate-700 overflow-hidden">
<div class="px-6 py-4 border-b border-slate-700 flex items-center justify-between">
<h3 class="text-lg font-bold text-white">
{{ paradigmEditState.isAddMode ? '➕ 新增写作范式' : '✏️ 编辑写作范式' }}
<h3 class="text-lg font-bold text-white flex items-center gap-2">
<IconLibrary :name="paradigmEditState.isAddMode ? 'add' : 'edit'" :size="20" />
{{ paradigmEditState.isAddMode ? '新增写作范式' : '编辑写作范式' }}
</h3>
<button
<button
@click="closeParadigmEdit"
class="text-slate-400 hover:text-white transition"
>
✕
<IconLibrary name="close" :size="18" />
</button>
</div>
@@ -351,7 +368,8 @@
<!-- ⭐ 核心字段：完整 Prompt -->
<div>
<label class="block text-sm text-slate-400 mb-2 flex items-center gap-2">
<span>✨</span> 完整 Prompt（核心字段）
<IconLibrary name="sparkles" :size="14" class="text-yellow-400" />
<span>完整 Prompt（核心字段）</span>
<span class="text-xs text-slate-500">粘贴您的完整提示词</span>
</label>
<textarea
@@ -360,8 +378,9 @@
class="w-full px-4 py-3 bg-slate-800 border border-slate-600 rounded-lg text-white outline-none focus:border-blue-500 resize-y font-mono text-sm leading-relaxed"
placeholder="在此粘贴您的完整 Prompt..."
></textarea>
<p class="text-xs text-slate-500 mt-2">
💡 提示：这是 AI 调用时的核心指令。完整的 Prompt 应包含角色、目标、步骤和输出格式。
<p class="text-xs text-slate-500 mt-2 flex items-start gap-1.5">
<IconLibrary name="info" :size="12" class="mt-0.5" />
<span>提示：这是 AI 调用时的核心指令。完整的 Prompt 应包含角色、目标、步骤和输出格式。</span>
</p>
</div>
</div>
@@ -386,7 +405,9 @@
<!-- 默认显示或分析结果 -->
<template v-else>
<div v-if="!analysisResult" class="h-full flex flex-col items-center justify-center text-slate-700 mt-20">
<span class="text-6xl mb-4 opacity-20">📊</span>
<div class="w-20 h-20 flex items-center justify-center rounded-2xl bg-slate-800/50 border border-slate-700 mb-4 opacity-40">
<IconLibrary name="chart" :size="48" />
</div>
<p>选择左侧的写作范式或使用分析工具</p>
</div>
@@ -413,17 +434,19 @@
<!-- 操作按钮 -->
<div class="mt-6 flex gap-3">
<button
<button
@click="copyAnalysis"
class="text-xs px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded transition"
class="text-xs px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded transition flex items-center gap-2"
>
📋 复制分析结果
<IconLibrary name="copy" :size="14" />
<span>复制分析结果</span>
</button>
<button
<button
@click="applyToWriting"
class="text-xs px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded transition"
class="text-xs px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded transition flex items-center gap-2"
>
✍️ 应用到写作
<IconLibrary name="edit" :size="14" />
<span>应用到写作</span>
</button>
</div>
</div>
@@ -457,7 +480,9 @@
<!-- 其他页面默认内容 -->
<div v-else class="h-full flex flex-col items-center justify-center text-slate-700 mt-20">
<span class="text-6xl mb-4 opacity-20">📄</span>
<div class="w-20 h-20 flex items-center justify-center rounded-2xl bg-slate-800/50 border border-slate-700 mb-4 opacity-40">
<IconLibrary name="document" :size="48" />
</div>
<p>选择左侧面板查看内容</p>
</div>
</div>
@@ -471,6 +496,7 @@ import { storeToRefs } from 'pinia'
import { useAppStore } from '../stores/app'
import { buildPrompt } from '../utils/promptBuilder.js'
import { marked } from 'marked'
import IconLibrary from './icons/IconLibrary.vue'
const appStore = useAppStore()
const {
@@ -558,7 +584,7 @@ const exportParadigmToWord = async () => {
}
}
// 图标选项
// 图标选项 (TODO: 后续优化为 IconLibrary 图标网格选择器)
const iconOptions = ['📝', '📄', '📊', '📈', '📉', '🏛️', '🍂', '💻', '📌', '💡']
// 颜色选项
@@ -785,11 +811,11 @@ const renderedThinking = computed(() => {
// 生成阶段标签
const stageLabel = computed(() => {
const labels = {
'thinking': '🧠 风格解构 & 大纲规划中...',
'draft': '✍️ 正在撰写初稿...',
'inspect': '🔍 正在进行质量检查...',
'critique': '💡 AI 深度反思中...',
'refine': '✨ 深度润色中...'
'thinking': '风格解构 & 大纲规划中...',
'draft': '正在撰写初稿...',
'inspect': '正在进行质量检查...',
'critique': 'AI 深度反思中...',
'refine': '深度润色中...'
}
return labels[generationStage.value] || ''
})