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

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

Browse Source 
完成内容:
- 导入 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>
This commit is contained in:
empty
2026-01-12 02:12:21 +08:00
parent 08baca41af
commit 6abe496cbc
1 changed files with 56 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/ArticleRewritePanel.vue
View File

@@ -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()