From 4b1c0b9d549925ecfebaa4ce0ff83295117515fc Mon Sep 17 00:00:00 2001
From: empty <let5sne.mac@gmail.com>
Date: Mon, 12 Jan 2026 02:05:32 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=BF=81=E7=A7=BB=20MainContent.vu?=
 =?UTF-8?q?e=20-=20SVG=20=E5=9B=BE=E6=A0=87=E6=9B=BF=E4=BB=A3=20emoji?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

完成内容:
- 导入 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>
---
 src/components/MainContent.vue | 114 ++++++++++++++++++++-------------
 1 file changed, 70 insertions(+), 44 deletions(-)

diff --git a/src/components/MainContent.vue b/src/components/MainContent.vue
index 2d63bd0..7fb0a34 100644
--- a/src/components/MainContent.vue
+++ b/src/components/MainContent.vue
@@ -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] || ''
 })