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

完成内容:
- 导入 IconLibrary 组件
- 替换头部标题图标 (folder)
- 替换空状态图标 (document)
- 替换操作按钮图标 (edit, copy, history, trash)
- 优化按钮样式 (flexbox, gap, 居中对齐)
- 空状态使用带背景的图标容器
- 删除按钮添加 aria-label

Emoji 数量: 6 → 0
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
empty
2026-01-12 02:07:34 +08:00
parent abe984606e
commit 320061edbc

View File

@@ -3,7 +3,8 @@
<!-- 头部 --> <!-- 头部 -->
<header class="docs-header"> <header class="docs-header">
<h1 class="docs-header-title"> <h1 class="docs-header-title">
<span style="font-size: var(--text-xl)">📂</span> 文稿管理 <IconLibrary name="folder" :size="20" />
<span>文稿管理</span>
</h1> </h1>
<span class="badge badge-primary">Pro版</span> <span class="badge badge-primary">Pro版</span>
</header> </header>
@@ -31,7 +32,9 @@
<!-- 文稿列表 --> <!-- 文稿列表 -->
<div class="docs-list"> <div class="docs-list">
<div v-if="filteredDocuments.length === 0" class="text-center text-muted py-8"> <div v-if="filteredDocuments.length === 0" class="text-center text-muted py-8">
<span style="font-size: var(--text-2xl); display: block; margin-bottom: var(--space-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-3 opacity-40">
<IconLibrary name="document" :size="32" />
</div>
<p class="text-sm">暂无文稿</p> <p class="text-sm">暂无文稿</p>
</div> </div>
@@ -62,27 +65,31 @@
<div class="flex gap-2"> <div class="flex gap-2">
<button <button
@click="openDocument" @click="openDocument"
class="action-btn primary" class="action-btn primary flex items-center justify-center gap-1.5"
> >
📝 编辑 <IconLibrary name="edit" :size="14" />
<span>编辑</span>
</button> </button>
<button <button
@click="duplicateDocument" @click="duplicateDocument"
class="action-btn secondary" class="action-btn secondary flex items-center justify-center gap-1.5"
> >
📋 复制 <IconLibrary name="copy" :size="14" />
<span>复制</span>
</button> </button>
<button <button
@click="toggleVersionPanel" @click="toggleVersionPanel"
class="action-btn success" class="action-btn success flex items-center justify-center gap-1.5"
> >
🕰 版本 <IconLibrary name="history" :size="14" />
<span>版本</span>
</button> </button>
<button <button
@click="confirmDelete" @click="confirmDelete"
class="action-btn danger" class="action-btn danger flex items-center justify-center"
aria-label="删除文稿"
> >
🗑 <IconLibrary name="trash" :size="16" />
</button> </button>
</div> </div>
</div> </div>
@@ -116,6 +123,7 @@ import { ref, computed, onMounted } from 'vue'
import { useAppStore } from '../stores/app' import { useAppStore } from '../stores/app'
import { useDatabaseStore } from '../stores/database.js' import { useDatabaseStore } from '../stores/database.js'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import IconLibrary from './icons/IconLibrary.vue'
const appStore = useAppStore() const appStore = useAppStore()
const dbStore = useDatabaseStore() const dbStore = useDatabaseStore()