cjun
a721e26e45
Backend
- Post 加 cover_url，Tag 加 color；老库 ALTER 兼容
- admin API: GET /api/admin/dashboard，POST /bulk，POST /tags/:id/merge，
PUT /tags/:id 接 {name,color}，Settings 加 light_skin_id（兼容老 theme_id）
- 白名单兜底（非法 light_skin_id 落 paper）
- 新增合并 / Dashboard / Theme 测试覆盖
Frontend
- AdminLayout 改为侧边栏布局；新增 Dashboard 总览页
- PostsView 卡片化预览 + 筛选 chip + 批量操作 + 排序
- EditorView 增强：封面图 / WYSIWYG↔MD 双模式 / 实时大纲 / 字数统计 /
自动保存条 / ⌘S / unsaved 守卫（beforeunload + beforeRouteLeave）
- TagsView 加色板 + 合并到目标
- SettingsView 主题外观改为「亮色皮肤」三选一 + 「暗色皮肤」固定墨色说明
- 新增 CommandPalette（⌘K）+ ShortcutsPanel（?）
- api.js 接新接口；router.js 拆 /admin → /admin/posts
主题 / 皮肤双轴
- site.js: themeMode（light/dark/auto）+ light_skin_id；data-theme 前台，
data-admin-theme 后台（仅跟随 mode 切明暗）
- styles.css: :root[data-theme] 四套皮肤 + :root[data-admin-theme=dark] 后台墨感
- 修 sticky head / ThemeSwitcher / 表单 / 批量条 等 token 引用
- 后台用独立 --admin-* 系列，与前台主题解耦
- 左栏底部放 inline 形态 ThemeSwitcher（图标按钮 36×36），mobile 保留浮窗
a11y
- 全局 :focus-visible 描边（前后台跟随 token）
- prefers-reduced-motion 全局降级
- color-scheme 随主题切
- meta theme-color 双套（light/dark）
- 命令面板 / 快捷键面板：role=dialog aria-modal aria-label + 搜索框 aria-label
- icon-only 按钮加 aria-label（tag × / 清除选择 / 移除封面等）
- 输入框 aria-label + spellcheck=false
- PostsView 筛选同步 URL（可分享、可刷新保留）
- img width/height + loading=lazy
- utils.js 用 Intl.DateTimeFormat（zh-CN / sv-SE）
67 lines
2.1 KiB
Vue
67 lines
2.1 KiB
Vue
<script setup>
|
|
import { onMounted, onBeforeUnmount } from 'vue'
|
|
|
|
const emit = defineEmits(['close'])
|
|
|
|
const groups = [
|
|
{
|
|
title: '导航',
|
|
shortcuts: [
|
|
{ keys: ['G', 'D'], label: '去总览' },
|
|
{ keys: ['G', 'P'], label: '去文章列表' },
|
|
{ keys: ['G', 'T'], label: '去标签' },
|
|
{ keys: ['G', 'S'], label: '去设置' },
|
|
{ keys: ['N'], label: '写新文章' }
|
|
]
|
|
},
|
|
{
|
|
title: '命令',
|
|
shortcuts: [
|
|
{ keys: ['⌘', 'K'], label: '打开命令面板' },
|
|
{ keys: ['?'], label: '显示本面板' },
|
|
{ keys: ['Esc'], label: '关闭弹层' }
|
|
]
|
|
},
|
|
{
|
|
title: '编辑器',
|
|
shortcuts: [
|
|
{ keys: ['⌘', 'S'], label: '立即保存' },
|
|
{ keys: ['⌘', 'B'], label: '加粗（编辑器内）' },
|
|
{ keys: ['⌘', 'I'], label: '斜体（编辑器内）' },
|
|
{ keys: ['/'], label: '唤出命令菜单（编辑器内）' }
|
|
]
|
|
}
|
|
]
|
|
|
|
function onKey(e) {
|
|
if (e.key === 'Escape') emit('close')
|
|
}
|
|
|
|
onMounted(() => window.addEventListener('keydown', onKey))
|
|
onBeforeUnmount(() => window.removeEventListener('keydown', onKey))
|
|
</script>
|
|
|
|
<template>
|
|
<div class="cmd-overlay" role="dialog" aria-modal="true" aria-label="快捷键面板" @click.self="emit('close')">
|
|
<div class="cmd-panel" style="width: 640px;">
|
|
<div style="padding: 16px 20px; border-bottom: 1px solid var(--admin-line); font-weight: 600;">
|
|
快捷键
|
|
</div>
|
|
<div style="padding: 16px 20px; max-height: 60vh; overflow-y: auto;">
|
|
<div v-for="g in groups" :key="g.title" style="margin-bottom: 18px;">
|
|
<div style="font-size: 12px; color: var(--admin-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px;">
|
|
{{ g.title }}
|
|
</div>
|
|
<div class="shortcut-grid">
|
|
<div v-for="s in g.shortcuts" :key="s.label" class="row">
|
|
<span class="lab">{{ s.label }}</span>
|
|
<span>
|
|
<kbd v-for="k in s.keys" :key="k" style="margin-right: 4px;">{{ k }}</kbd>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |