mirrors2/ONE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后台管理重塑 + 主题 / 皮肤双轴 + a11y 与编辑器增强

Browse Source 
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）
This commit is contained in:
cjun
2026-09-21 22:14:58 +08:00
parent 4d8f2de3a4
commit a721e26e45
32 changed files with 5823 additions and 976 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/admin/PostsView.vue
+207 -211
View File
@@ -1,33 +1,49 @@
<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useRoute, useRouter } from 'vue-router'
import { adminApi } from '../api'
import { formatDateShort, relativeDate } from '../utils'
const route = useRoute()
const router = useRouter()
const items = ref([])
const total = ref(0)
const loading = ref(true)
const error = ref('')
const allTags = ref([])
const status = ref('')
const kind = ref('')
const q = ref('')
const page = ref(1)
// 筛选状态——初始值从 URL 读，变化时 push 回 URL
const status = ref(String(route.query.status || ''))
const kind = ref(String(route.query.kind || ''))
const tagFilter = ref(String(route.query.tag || ''))
const sort = ref(String(route.query.sort || 'newest'))
const q = ref(String(route.query.q || ''))
const page = ref(Number(route.query.page || 1))
const size = 20
const selected = ref(new Set())
const orderMap = {
newest: 'published_at DESC',
oldest: 'published_at ASC',
updated: 'updated_at DESC',
longest: 'reading_minutes DESC'
}
async function load() {
loading.value = true
error.value = ''
try {
const params = { page: page.value, size }
const params = { page: page.value, size, order: orderMap[sort.value] || orderMap.newest }
if (status.value) params.status = status.value
if (kind.value) params.kind = kind.value
if (tagFilter.value) params.tag = tagFilter.value
if (q.value.trim()) params.q = q.value.trim()
const data = await adminApi.posts(params)
items.value = data.items || []
total.value = data.total || 0
selected.value = new Set()
} catch (e) {
error.value = e.message || '加载失败'
} finally {
@@ -35,19 +51,77 @@ async function load() {
}
}
onMounted(load)
watch([status, kind, page], load)
async function loadTags() {
try {
const data = await adminApi.tags()
allTags.value = data.tags || data || []
} catch (e) {
/* ignore */
}
}
onMounted(() => {
loadTags()
load()
})
// 数据变化 → 同步 URL（用 replace，不污染历史栈）
function syncQuery() {
const q2 = { ...route.query }
const setOrDel = (k, v, def = '') => {
if (v && v !== def) q2[k] = v
else delete q2[k]
}
setOrDel('status', status.value)
setOrDel('kind', kind.value)
setOrDel('tag', tagFilter.value)
setOrDel('sort', sort.value, 'newest')
setOrDel('q', q.value.trim())
if (page.value > 1) q2.page = String(page.value)
else delete q2.page
router.replace({ path: '/admin/posts', query: q2 })
}
watch([status, kind, tagFilter, sort, page], () => {
syncQuery()
load()
})
let searchTimer
function onSearch() {
clearTimeout(searchTimer)
searchTimer = setTimeout(() => {
page.value = 1
syncQuery()
load()
}, 300)
}
const pageCount = computed(() => Math.max(1, Math.ceil(total.value / size)))
const allSelected = computed(() => items.value.length && selected.value.size === items.value.length)
function toggle(id) {
const s = new Set(selected.value)
if (s.has(id)) s.delete(id)
else s.add(id)
selected.value = s
}
function toggleAll() {
if (allSelected.value) selected.value = new Set()
else selected.value = new Set(items.value.map((p) => p.id))
}
async function bulk(action) {
if (!selected.value.size) return
if (action === 'delete' && !window.confirm(`删除 ${selected.value.size} 篇文章？此操作不可撤销。`)) return
try {
await adminApi.bulkPosts([...selected.value], action)
await load()
} catch (e) {
alert(e.message || '操作失败')
}
}
async function remove(id, title) {
if (!window.confirm(`删除《${title}》？此操作不可撤销。`)) return
@@ -62,29 +136,76 @@ async function remove(id, title) {
function edit(id) {
router.push(`/admin/${id}`)
}
function clearFilters() {
status.value = ''
kind.value = ''
tagFilter.value = ''
q.value = ''
page.value = 1
syncQuery()
load()
}
</script>
<template>
<section>
<header class="head">
<h1 class="title">文章 <span class="count">{{ total }}</span></h1>
<RouterLink to="/admin/new" class="btn btn-primary">写新的</RouterLink>
<header style="display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px;">
<h1 style="font-family: var(--serif); font-size: 22px;">文章 <span style="font-family: var(--sans); font-size: 13px; color: var(--admin-muted); font-weight: 400;">{{ total }}</span></h1>
<RouterLink to="/admin/new" class="btn btn-primary">+ 写新的</RouterLink>
</header>
<div class="filters">
<input v-model="q" class="input search" placeholder="搜索标题 / 摘要 / 正文" @input="onSearch" />
<select v-model="status" class="select">
<option value="">全部状态</option>
<option value="published">已发布</option>
<option value="draft">草稿</option>
</select>
<select v-model="kind" class="select">
<option value="">全部类型</option>
<option value="long">长文</option>
<option value="short">短文</option>
<div class="posts-toolbar">
<input
v-model="q"
class="input grow"
placeholder="搜索标题 / 摘要 / 正文"
aria-label="搜索文章"
type="search"
spellcheck="false"
@input="onSearch"
/>
<select v-model="sort" class="select" style="width: auto; min-width: 130px;" aria-label="排序方式">
<option value="newest">最新发布</option>
<option value="oldest">最早发布</option>
<option value="updated">最近修改</option>
<option value="longest">字数最多</option>
</select>
</div>
<div class="posts-toolbar" style="margin-bottom: 16px;">
<span style="font-size: 12px; color: var(--admin-muted); margin-right: 4px;">状态</span>
<button class="chip" :class="{ on: status === '' }" @click="status = ''">全部</button>
<button class="chip" :class="{ on: status === 'published' }" @click="status = 'published'">已发布</button>
<button class="chip" :class="{ on: status === 'draft' }" @click="status = 'draft'">草稿</button>
<span style="font-size: 12px; color: var(--admin-muted); margin: 0 4px 0 12px;">类型</span>
<button class="chip" :class="{ on: kind === '' }" @click="kind = ''">全部</button>
<button class="chip" :class="{ on: kind === 'long' }" @click="kind = 'long'">长文</button>
<button class="chip" :class="{ on: kind === 'short' }" @click="kind = 'short'">短文</button>
<span v-if="allTags.length" style="font-size: 12px; color: var(--admin-muted); margin: 0 4px 0 12px;">标签</span>
<button class="chip" :class="{ on: tagFilter === '' }" @click="tagFilter = ''">全部</button>
<button
v-for="t in allTags"
:key="t.id"
class="chip"
:class="{ on: tagFilter === t.name }"
@click="tagFilter = t.name"
>
<span class="tag-dot" :style="{ background: t.color || 'var(--admin-accent)' }" aria-hidden="true"></span>
{{ t.name }}
</button>
<button v-if="status || kind || tagFilter || q" class="chip" style="margin-left: auto;" @click="clearFilters">清除筛选 ✕</button>
</div>
<div v-if="selected.size" class="bulk-bar">
<span>已选 <strong>{{ selected.size }}</strong> 篇</span>
<span class="grow"></span>
<button @click="bulk('publish')">批量发布</button>
<button @click="bulk('draft')">转为草稿</button>
<button @click="bulk('delete')">批量删除</button>
<button class="x" @click="selected = new Set(); load()" aria-label="清除选择">×</button>
</div>
<div v-if="loading" class="loading">载入中…</div>
<div v-else-if="error" class="empty">{{ error }}</div>
<div v-else-if="!items.length" class="empty">
@@ -92,196 +213,71 @@ function edit(id) {
</div>
<template v-else>
<table class="table">
<thead>
<tr>
<th class="c-title">标题</th>
<th class="c-kind">类型</th>
<th class="c-status">状态</th>
<th class="c-date">发布时间</th>
<th class="c-act"></th>
</tr>
</thead>
<tbody>
<tr v-for="p in items" :key="p.id">
<td class="c-title">
<a href="#" class="name" @click.prevent="edit(p.id)">
{{ p.title || '无题' }}
</a>
<span v-if="p.tags && p.tags.length" class="tags">
<span v-for="t in p.tags" :key="t" class="tag-chip">{{ t }}</span>
</span>
</td>
<td class="c-kind">
<span class="badge" :class="{ short: p.kind === 'short' }">
{{ p.kind === 'short' ? '短文' : '长文' }}
</span>
</td>
<td class="c-status">
<span class="dot" :class="p.status"></span>{{ p.status === 'published' ? '已发布' : '草稿' }}
</td>
<td class="c-date">
<span :title="formatDateShort(p.published_at)">{{ relativeDate(p.published_at) }}</span>
</td>
<td class="c-act">
<a href="#" @click.prevent="edit(p.id)">编辑</a>
<a v-if="p.status === 'published'" :href="`/post/${p.slug}`" target="_blank">查看</a>
<a href="#" class="danger" @click.prevent="remove(p.id, p.title)">删除</a>
</td>
</tr>
</tbody>
</table>
<div style="margin-bottom: 8px;">
<label style="font-size: 13px; color: var(--admin-muted); cursor: pointer;">
<input type="checkbox" :checked="allSelected" @change="toggleAll" style="margin-right: 6px;" />
全选当前页
</label>
</div>
<div
v-for="p in items"
:key="p.id"
class="post-card has-check"
:class="{ selected: selected.has(p.id) }"
@click.self="edit(p.id)"
>
<input
type="checkbox"
:checked="selected.has(p.id)"
class="check"
:aria-label="`选择《${p.title || '无题'}》`"
@click.stop="toggle(p.id)"
/>
<div class="cover">
<img
v-if="p.cover_url"
:src="p.cover_url"
alt=""
referrerpolicy="no-referrer"
width="96"
height="64"
loading="lazy"
decoding="async"
/>
<span v-else class="ph" aria-hidden="true">{{ p.kind === 'short' ? '短' : '长' }}</span>
</div>
<div class="body">
<div class="title">{{ p.title || '无题' }}</div>
<div v-if="p.summary" class="summary">{{ p.summary }}</div>
<div class="meta">
<span class="dot" :class="p.status" aria-hidden="true"></span>
<span>{{ p.status === 'published' ? '已发布' : '草稿' }}</span>
<span style="margin: 0 6px;" aria-hidden="true">·</span>
<span>{{ p.kind === 'short' ? '短文' : '长文' }}</span>
<span style="margin: 0 6px;" aria-hidden="true">·</span>
<span :title="formatDateShort(p.published_at)">{{ relativeDate(p.published_at) }}</span>
<template v-if="p.tags && p.tags.length">
<span style="margin: 0 6px;" aria-hidden="true">·</span>
<span v-for="t in p.tags" :key="t" class="chip-static" style="font-size: 11px;">{{ t }}</span>
</template>
</div>
</div>
<div class="stats" aria-hidden="true">
<div>{{ p.reading_minutes || 1 }}′</div>
<div>{{ (p.content_md || '').length }} 字</div>
</div>
<div class="actions">
<a href="#" @click.prevent.stop="edit(p.id)">编辑</a>
<a v-if="p.status === 'published'" :href="`/post/${p.slug}`" target="_blank" @click.stop>查看</a>
<a href="#" class="danger" @click.prevent.stop="remove(p.id, p.title)">删除</a>
</div>
</div>
<nav v-if="pageCount > 1" class="pager">
<button class="btn" :disabled="page <= 1" @click="page = page - 1">← 上一页</button>
<span class="page-info">第 {{ page }} / {{ pageCount }} 页</span>
<button class="btn" :disabled="page >= pageCount" @click="page = page + 1">下一页 →</button>
<nav v-if="pageCount > 1" aria-label="分页" style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px;">
<button class="btn" :disabled="page <= 1" @click="page = page - 1" aria-label="上一页">← 上一页</button>
<span style="font-size: 13px; color: var(--admin-muted);" aria-live="polite">第 {{ page }} / {{ pageCount }} 页</span>
<button class="btn" :disabled="page >= pageCount" @click="page = page + 1" aria-label="下一页">下一页 →</button>
</nav>
</template>
</section>
</template>
<style scoped>
.head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.title {
font-size: 22px;
}
.count {
font-family: var(--sans);
font-size: 13px;
color: var(--muted);
font-weight: 400;
}
.filters {
display: flex;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.search {
flex: 1;
min-width: 200px;
}
.select {
width: auto;
min-width: 120px;
}
.table {
width: 100%;
border-collapse: collapse;
background: var(--card);
border: 1px solid var(--line);
border-radius: 4px;
font-size: 14px;
}
.table th {
text-align: left;
font-weight: 500;
font-size: 12px;
letter-spacing: 0.06em;
color: var(--muted);
padding: 10px 12px;
border-bottom: 1px solid var(--line);
}
.table td {
padding: 12px;
border-bottom: 1px solid var(--line-soft);
vertical-align: top;
}
.table tr:last-child td {
border-bottom: 0;
}
.table tr:hover td {
background: var(--paper-sunken);
}
.name {
font-size: 15px;
}
.tags {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 6px;
}
.badge {
display: inline-block;
padding: 1px 8px;
border: 1px solid var(--line);
border-radius: 2px;
font-size: 12px;
color: var(--muted);
}
.badge.short {
color: var(--accent);
border-color: var(--accent-line);
}
.dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--faint);
margin-right: 6px;
vertical-align: 2px;
}
.dot.published {
background: var(--accent);
}
.c-act {
white-space: nowrap;
text-align: right;
}
.c-act a {
margin-left: 12px;
font-size: 13px;
color: var(--accent);
}
.c-act a.danger {
color: #9a5b45;
}
.pager {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 18px;
}
.page-info {
font-size: 13px;
color: var(--muted);
}
@media (max-width: 640px) {
.c-kind,
.c-date {
display: none;
}
}
</style>
</template>