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">
<h1 class="docs-header-title">
<span style="font-size: var(--text-xl)">📂</span> 文稿管理
<IconLibrary name="folder" :size="20" />
<span>文稿管理</span>
</h1>
<span class="badge badge-primary">Pro版</span>
</header>
@@ -31,7 +32,9 @@
<!-- 文稿列表 -->
<div class="docs-list">
<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>
</div>
@@ -62,27 +65,31 @@
<div class="flex gap-2">
<button
@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
@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
@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
@click="confirmDelete"
class="action-btn danger"
class="action-btn danger flex items-center justify-center"
aria-label="删除文稿"
>
🗑
<IconLibrary name="trash" :size="16" />
</button>
</div>
</div>
@@ -116,6 +123,7 @@ import { ref, computed, onMounted } from 'vue'
import { useAppStore } from '../stores/app'
import { useDatabaseStore } from '../stores/database.js'
import { storeToRefs } from 'pinia'
import IconLibrary from './icons/IconLibrary.vue'
const appStore = useAppStore()
const dbStore = useDatabaseStore()