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:
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user