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

完成内容:
- 导入 IconLibrary 组件
- 替换头部标题图标 (sparkles)
- 替换范式选择条图标 (folder)
- 替换三栏标题图标 (document, search, sparkles)
- 替换按钮图标 (save, refresh, loading)
- 替换空状态图标 (edit, clipboard, sparkles)
- 替换状态指示器图标 (check, warning, error)
- 替换提示信息图标 (info)
- 优化按钮样式 (flexbox, gap, 统一间距)
- 空状态使用带背景的图标容器

Emoji 数量: 18+ → 0
Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/ArticleRewritePanel.vue | 82 ++++++++++++++++++--------
 1 file changed, 56 insertions(+), 26 deletions(-)

diff --git a/src/components/ArticleRewritePanel.vue b/src/components/ArticleRewritePanel.vue
index b11591a..8795733 100644
--- a/src/components/ArticleRewritePanel.vue
+++ b/src/components/ArticleRewritePanel.vue
@@ -4,7 +4,8 @@
     <header class="p-3 border-b border-slate-700 bg-slate-800 flex items-center justify-between shrink-0">
       <div class="flex items-center gap-3">
         <h1 class="font-bold text-white flex items-center gap-2">
-          <span class="text-xl">🎨</span> 范式润色
+          <IconLibrary name="sparkles" :size="20" class="text-purple-400" />
+          <span>范式润色</span>
         </h1>
         <span class="text-xs text-slate-500">基于范式规则检查并重写文章句子</span>
       </div>
@@ -13,7 +14,8 @@
     <!-- 范式选择条 -->
     <div class="px-4 py-2 bg-indigo-900/30 border-b border-indigo-700/50 flex items-center justify-between shrink-0">
       <div class="flex items-center gap-3">
-        <span class="text-indigo-400 text-sm">📚 当前范式：</span>
+        <IconLibrary name="folder" :size="16" class="text-indigo-400" />
+        <span class="text-indigo-400 text-sm">当前范式：</span>
         <span v-if="selectedParadigm" class="text-white text-sm font-medium flex items-center gap-1">
           {{ selectedParadigm.icon }} {{ selectedParadigm.name }}
         </span>
@@ -33,7 +35,8 @@
       <div class="w-[35%] flex flex-col border-r border-slate-700 min-w-0">
         <div class="p-3 bg-slate-800 border-b border-slate-700 flex items-center justify-between">
           <h2 class="text-sm font-medium text-amber-400 flex items-center gap-2">
-            📄 原文区
+            <IconLibrary name="document" :size="16" />
+            <span>原文区</span>
           </h2>
           <div class="flex items-center gap-2">
             <span class="text-xs text-slate-500">{{ sentences.length }} 句</span>
@@ -58,8 +61,9 @@
               :disabled="isSaving"
               class="text-xs px-2 py-0.5 rounded bg-green-600 text-white hover:bg-green-500 transition flex items-center gap-1 disabled:opacity-50"
             >
-              <span v-if="isSaving" class="animate-spin">↻</span>
-              <span>💾 {{ isSaving ? '保存中...' : '保存' }}</span>
+              <IconLibrary v-if="isSaving" name="loading" :size="12" class="animate-spin" />
+              <IconLibrary v-else name="save" :size="12" />
+              <span>{{ isSaving ? '保存中...' : '保存' }}</span>
             </button>
           </div>
         </div>
@@ -78,15 +82,18 @@
                 articleSourceType === 'document' ? 'bg-amber-600 text-white' : 'text-slate-400 hover:text-white']"
             >文稿库</button>
           </div>
-          <span v-if="articleSourceType === 'document' && sourceDocTitle" class="text-xs text-amber-400 ml-2">
-            📄 {{ sourceDocTitle }}
+          <span v-if="articleSourceType === 'document' && sourceDocTitle" class="text-xs text-amber-400 ml-2 flex items-center gap-1">
+            <IconLibrary name="document" :size="12" />
+            <span>{{ sourceDocTitle }}</span>
           </span>
         </div>
         <!-- 连续文本流 -->
         <div class="flex-1 overflow-y-auto p-4 min-h-0">
           <div v-if="sentences.length === 0" class="h-full flex items-center justify-center">
             <div class="text-center">
-              <span class="text-4xl opacity-20 block mb-2">📝</span>
+              <div class="w-16 h-16 flex items-center justify-center rounded-xl bg-slate-800/50 border border-slate-700 mx-auto mb-2 opacity-40">
+                <IconLibrary name="edit" :size="32" />
+              </div>
               <p class="text-slate-600 text-sm">请在下方输入或粘贴文章内容</p>
             </div>
           </div>
@@ -105,8 +112,9 @@
             </template>
           </div>
           <!-- 提示文字 -->
-          <p v-if="sentences.length > 0" class="text-xs text-slate-500 mt-3 text-center">
-            💡 点击句子可选中/取消，选中的句子将被检查
+          <p v-if="sentences.length > 0" class="text-xs text-slate-500 mt-3 text-center flex items-center justify-center gap-1">
+            <IconLibrary name="info" :size="12" />
+            <span>点击句子可选中/取消，选中的句子将被检查</span>
           </p>
         </div>
         <!-- 输入框 -->
@@ -124,20 +132,23 @@
       <div class="w-[30%] flex flex-col border-r border-slate-700 min-w-0">
         <div class="p-3 bg-slate-800 border-b border-slate-700">
           <h2 class="text-sm font-medium text-blue-400 flex items-center gap-2">
-            🔍 检查结果
+            <IconLibrary name="search" :size="16" />
+            <span>检查结果</span>
           </h2>
         </div>
         <div class="flex-1 overflow-y-auto p-4 space-y-3 min-h-0">
           <div v-if="!isChecking && checkResults.length === 0" class="h-full flex items-center justify-center">
             <div class="text-center">
-              <span class="text-4xl opacity-20 block mb-2">📋</span>
+              <div class="w-16 h-16 flex items-center justify-center rounded-xl bg-slate-800/50 border border-slate-700 mx-auto mb-2 opacity-40">
+                <IconLibrary name="clipboard" :size="32" />
+              </div>
               <p class="text-slate-600 text-sm">选中句子后点击「范式检查」</p>
             </div>
           </div>
           <!-- 检查中状态 -->
           <div v-if="isChecking" class="flex flex-col gap-2 text-blue-300">
             <div class="flex items-center gap-2">
-              <span class="animate-spin">↻</span>
+              <IconLibrary name="loading" :size="14" class="animate-spin" />
               <span class="text-sm">AI 正在检查中...</span>
             </div>
             <div v-if="checkProgress" class="text-xs text-slate-400 pl-6">
@@ -157,7 +168,9 @@
           >
             <div class="flex items-start gap-2">
               <span class="text-lg">
-                {{ result.status === 'pass' ? '✅' : result.status === 'warning' ? '⚠️' : '❌' }}
+                <IconLibrary v-if="result.status === 'pass'" name="check" :size="16" class="text-green-400" />
+                <IconLibrary v-else-if="result.status === 'warning'" name="warning" :size="16" class="text-yellow-400" />
+                <IconLibrary v-else name="error" :size="16" class="text-red-400" />
               </span>
               <div class="flex-1 min-w-0">
                 <p class="text-xs text-slate-400 mb-1">句子 {{ result.sentenceIdx + 1 }}</p>
@@ -172,7 +185,8 @@
       <div class="flex-1 flex flex-col min-w-0">
         <div class="p-3 bg-slate-800 border-b border-slate-700 flex items-center justify-between">
           <h2 class="text-sm font-medium text-emerald-400 flex items-center gap-2">
-            ✨ 重写预览
+            <IconLibrary name="sparkles" :size="16" />
+            <span>重写预览</span>
           </h2>
           <div class="flex items-center gap-2">
             <span class="text-xs text-slate-500">{{ rewrittenSentences.length }} 句</span>
@@ -193,23 +207,28 @@
               <button
                 @click="recheckRewrittenContent"
                 :disabled="selectedRewriteIdxs.length === 0 || isChecking"
-                class="text-xs px-2 py-0.5 rounded bg-purple-600 text-white hover:bg-purple-500 transition disabled:opacity-50"
+                class="text-xs px-2 py-0.5 rounded bg-purple-600 text-white hover:bg-purple-500 transition disabled:opacity-50 flex items-center gap-1"
                 title="对选中的重写内容再次进行范式检查"
-              >🔄 复检</button>
+              >
+                <IconLibrary name="refresh" :size="12" />
+                <span>复检</span>
+              </button>
             </div>
           </div>
         </div>
         <div class="flex-1 overflow-y-auto p-4 min-h-0">
           <div v-if="!isRewriting && rewrittenSentences.length === 0" class="h-full flex items-center justify-center">
             <div class="text-center">
-              <span class="text-4xl opacity-20 block mb-2">✨</span>
+              <div class="w-16 h-16 flex items-center justify-center rounded-xl bg-slate-800/50 border border-slate-700 mx-auto mb-2 opacity-40">
+                <IconLibrary name="sparkles" :size="32" />
+              </div>
               <p class="text-slate-600 text-sm">检查完成后点击「AI 重写」</p>
             </div>
           </div>
           <!-- 重写中状态 -->
           <div v-if="isRewriting" class="flex flex-col gap-2">
             <div class="flex items-center gap-2 text-emerald-300">
-              <span class="animate-spin">↻</span>
+              <IconLibrary name="loading" :size="14" class="animate-spin" />
               <span class="text-sm">AI 正在重写中...</span>
             </div>
             <div v-if="rewriteProgress" class="text-xs text-slate-400 pl-6">
@@ -234,8 +253,9 @@
             </template>
           </div>
           <!-- 提示文字 -->
-          <p v-if="rewrittenSentences.length > 0" class="text-xs text-slate-500 mt-3 text-center">
-            💡 点击句子可选中/取消，选中的句子将替换原文
+          <p v-if="rewrittenSentences.length > 0" class="text-xs text-slate-500 mt-3 text-center flex items-center justify-center gap-1">
+            <IconLibrary name="info" :size="12" />
+            <span>点击句子可选中/取消，选中的句子将替换原文</span>
           </p>
         </div>
       </div>
@@ -267,9 +287,13 @@
             class="px-4 py-2 rounded-lg text-sm font-medium text-white transition disabled:opacity-50 disabled:cursor-not-allowed bg-blue-600 hover:bg-blue-500"
           >
             <span v-if="isChecking" class="flex items-center gap-2">
-              <span class="animate-spin">↻</span> 检查中...
+              <IconLibrary name="loading" :size="14" class="animate-spin" />
+              <span>检查中...</span>
+            </span>
+            <span v-else class="flex items-center gap-2">
+              <IconLibrary name="search" :size="16" />
+              <span>范式检查</span>
             </span>
-            <span v-else>🔍 范式检查</span>
           </button>
           <button
             @click="runAIRewrite"
@@ -277,16 +301,21 @@
             class="px-4 py-2 rounded-lg text-sm font-medium text-white transition disabled:opacity-50 disabled:cursor-not-allowed bg-purple-600 hover:bg-purple-500"
           >
             <span v-if="isRewriting" class="flex items-center gap-2">
-              <span class="animate-spin">↻</span> 重写中...
+              <IconLibrary name="loading" :size="14" class="animate-spin" />
+              <span>重写中...</span>
+            </span>
+            <span v-else class="flex items-center gap-2">
+              <IconLibrary name="sparkles" :size="16" />
+              <span>AI 重写</span>
             </span>
-            <span v-else>✨ AI 重写</span>
           </button>
           <button
             @click="applySelectedRewrites"
             :disabled="!canApply"
             class="px-4 py-2 rounded-lg text-sm font-medium text-white transition disabled:opacity-50 disabled:cursor-not-allowed bg-gradient-to-r from-amber-600 to-emerald-600 hover:from-amber-500 hover:to-emerald-500"
           >
-            🔄 应用替换
+            <IconLibrary name="refresh" :size="16" />
+            <span>应用替换</span>
           </button>
         </div>
       </div>
@@ -325,6 +354,7 @@ import { updateDocument, saveDocumentVersion } from '../db/index.js'
 import ParadigmSelectorModal from './ParadigmSelectorModal.vue'
 import DocumentSelectorModal from './DocumentSelectorModal.vue'
 import RequirementParserPanel from './RequirementParserPanel.vue'
+import IconLibrary from './icons/IconLibrary.vue'
 
 const appStore = useAppStore()
 const paradigmStore = useParadigmStore()