feat: 前台标签接入 antd 组件、列表封面图、favicon 随站点 Logo 及侧栏收窄

- 前台列表/详情/标签页标签统一 antd Tag；标签页改 CheckableTagGroup 单选（选中态由组件承接，再点已选标签回到全部）；移除首页标签筛选条，标签入口收敛至顶部「标签」页 - 公开列表新增 cover 字段（取正文第一张站内图，store.FirstImageRef），首页条目左侧显示封面缩略图，无图条目保持纯文字 - favicon 随站点 Logo：webui.Meta.Icon 服务端注入 index.html，前端 useSiteTitle 兜底（dev 模板占位符场景）并即时生效；设置页「重置默认」清空 Logo 后回退内置 /favicon.svg - 后台侧栏改 antd Menu（inline 分组），宽度 256→208、窄侧栏档 224→184
2026-09-09 11:51:06 +08:00
parent 5457aeaa33
commit 5bac272f6d
13 changed files with 199 additions and 174 deletions
@@ -2,7 +2,7 @@ import { Link, NavLink, Outlet, useLocation, useNavigate } from 'react-router'
 import {
  Moon, Sun, Monitor, ExternalLink, House, PenLine, MoreHorizontal, Tags, Trash2, Settings, LogOut,
 } from 'lucide-react'
-import { Dropdown, Tooltip } from 'antd'
+import { Dropdown, Menu, Tooltip } from 'antd'
 import type { MenuProps } from 'antd'
 import { useSiteTitle } from '../features/site'
 import { useTheme } from '../lib/theme'
@@ -202,12 +202,28 @@ const adminNav = [
  { to: '/admin/settings', label: '设置', icon: Settings, end: true, match: 'exact' as const },
 ]

+const adminMenuPathByKey: Record<string, string> = {
+  notes: '/admin',
+  new: '/admin/notes/new',
+  trash: '/admin/trash',
+  settings: '/admin/settings',
+}
+
 function AdminSidebar() {
  const { logout } = useAuth()
  const navigate = useNavigate()
  const location = useLocation()
  // 新建/编辑共用「新建笔记」高亮（设计稿：编辑页高亮新建入口）
  const editing = location.pathname.startsWith('/admin/notes')
+  const selectedKey = editing
+    ? 'new'
+    : location.pathname === '/admin'
+      ? 'notes'
+      : location.pathname.startsWith('/admin/trash')
+        ? 'trash'
+        : location.pathname.startsWith('/admin/settings')
+          ? 'settings'
+          : ''
  return (
    <aside className="pn-admin-sidebar">
      <Link to="/admin" className="pn-admin-brand">
@@ -218,25 +234,32 @@ function AdminSidebar() {
        </span>
      </Link>

-      <div className="pn-admin-section">内容</div>
-      <nav className="pn-admin-nav" aria-label="内容">
-        <NavLink to="/admin" end className="pn-admin-item">
-          <House size={15} /><span>笔记管理</span>
-        </NavLink>
-        <Link to="/admin/notes/new" className={`pn-admin-item${editing ? ' active' : ''}`} aria-current={editing ? 'page' : undefined}>
-          <PenLine size={15} /><span>新建笔记</span>
-        </Link>
-      </nav>
-
-      <div className="pn-admin-section">系统</div>
-      <nav className="pn-admin-nav" aria-label="系统">
-        <NavLink to="/admin/trash" className="pn-admin-item">
-          <Trash2 size={15} /><span>回收站</span>
-        </NavLink>
-        <NavLink to="/admin/settings" className="pn-admin-item">
-          <Settings size={15} /><span>设置</span>
-        </NavLink>
-      </nav>
+      <Menu
+        mode="inline"
+        className="pn-admin-menu"
+        selectedKeys={selectedKey ? [selectedKey] : []}
+        onClick={({ key }) => navigate(adminMenuPathByKey[key])}
+        items={[
+          {
+            key: 'g-content',
+            type: 'group',
+            label: '内容',
+            children: [
+              { key: 'notes', icon: <House size={15} />, label: '笔记管理' },
+              { key: 'new', icon: <PenLine size={15} />, label: '新建笔记' },
+            ],
+          },
+          {
+            key: 'g-system',
+            type: 'group',
+            label: '系统',
+            children: [
+              { key: 'trash', icon: <Trash2 size={15} />, label: '回收站' },
+              { key: 'settings', icon: <Settings size={15} />, label: '设置' },
+            ],
+          },
+        ]}
+      />

      <div className="pn-admin-foot">
        <div className="pn-admin-user">
@@ -4,11 +4,20 @@ import { api } from '../lib/api'
 import type { SiteSettings } from '../lib/api'

 export function useSiteTitle() {
-  return useQuery({
+  const { data } = useQuery({
    queryKey: ['site'],
    queryFn: () => api<SiteSettings>('/api/site'),
    staleTime: 5 * 60_000,
  })
+
+  // favicon 随站点 Logo：生产由服务端注入 index.html，此处兜底（dev 模板占位符
+  // 不会被渲染）并保证设置变更后 SPA 内即时生效
+  useEffect(() => {
+    const link = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
+    if (link) link.href = data?.site_logo || '/favicon.svg'
+  }, [data?.site_logo])
+
+  return { data }
 }

 /**
@@ -242,16 +242,16 @@ li.ant-dropdown-menu-item.pn-dd-item-active span {
 li.ant-dropdown-menu-item.pn-dd-item-active svg {
  color: var(--foreground);
 }
-/* 标签云（antd CheckableTag）：计数用等宽字体，选中态反白 */
-.pn-cloud-tag {
-  display: inline-flex;
-}
-.pn-cloud-tag a {
+/* 标签云（antd CheckableTagGroup 单选）：计数用等宽字体，选中态反白。
+   antd 会把 label 包进单个块级 span，行内排版由内层选择器承接 */
+.pn-cloud-tag > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
-  color: inherit;
-  text-decoration: none;
+}
+.pn-cloud-tag svg {
+  width: 14px;
+  height: 14px;
 }
 .pn-cloud-count {
  font-family: var(--font-mono);
@@ -538,16 +538,36 @@ button.pn-login-back:hover {
  padding-top: 56px;
  padding-bottom: 24px;
 }
-.pn-home-filter {
-  margin-bottom: 8px;
-}
 .pn-home-post {
+  display: flex;
+  align-items: flex-start;
+  gap: 18px;
  padding: 30px 0;
  border-bottom: 1px solid var(--border);
 }
 .pn-home-post:last-child {
  border-bottom: 0;
 }
+/* 封面缩略图（正文第一张图，无图不渲染） */
+.pn-home-cover {
+  flex: none;
+  width: 104px;
+  height: 104px;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  border: 1px solid var(--border);
+  background: var(--muted);
+}
+.pn-home-cover img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.pn-home-post-main {
+  flex: 1;
+  min-width: 0;
+}
 .pn-home-date {
  display: block;
  margin-bottom: 10px;
@@ -640,32 +660,6 @@ button.pn-login-back:hover {
  color: var(--muted-foreground);
  white-space: nowrap;
 }
-/* 首页标签筛选条：链接型分段导航（配色走无 layer 类规则，
-   避免 antd 的 <a> 重置压过 utilities 层） */
-.pn-home-filter a {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 32px;
-  padding: 0 12px;
-  border-radius: calc(var(--radius-md) - 3px);
-  font-size: 13px;
-  font-weight: 500;
-  white-space: nowrap;
-  color: var(--muted-foreground);
-  transition: color 0.15s ease;
-}
-.pn-home-filter a:hover {
-  color: var(--foreground);
-}
-.pn-home-filter a[aria-current='page'] {
-  background: var(--primary);
-  color: var(--primary-foreground);
-}
-.pn-home-filter a:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
 /* 首页分页器已由 antd Pagination 承接（.pn-home-pager 仅保留布局行） */
@media (max-width: 640px) {
  .pn-home-content {
@@ -673,6 +667,12 @@ button.pn-login-back:hover {
  }
  .pn-home-post {
    padding: 26px 0;
+    gap: 12px;
+  }
+  .pn-home-cover {
+    width: 72px;
+    height: 72px;
+    border-radius: var(--radius-sm);
  }
  .pn-home-post-title {
    font-size: 20px;
@@ -1217,7 +1217,7 @@ button.pn-note-back:hover {
   ============================================================ */
 .pn-admin-shell {
  display: grid;
-  grid-template-columns: 256px minmax(0, 1fr);
+  grid-template-columns: 208px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
@@ -1285,58 +1285,34 @@ button.pn-note-back:hover {
  letter-spacing: var(--tracking-tight);
  color: var(--sidebar-foreground);
 }
-.pn-admin-section {
-  padding: 0 10px;
-  margin-bottom: -6px;
+/* 侧栏导航（antd Menu inline）：融入 sidebar 底色，沿用窄侧栏密度 */
+.pn-admin-menu {
+  flex: 1;
+  min-height: 0;
+  background: transparent;
+  border-inline-end: 0 !important;
+}
+.pn-admin-menu .ant-menu-item-group-title {
+  padding: 8px 10px 4px;
  font-size: 10.5px;
+  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
 }
-.pn-admin-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.pn-admin-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
+.pn-admin-menu .ant-menu-item {
+  margin-inline: 6px;
+  width: auto;
  min-height: 34px;
-  padding: 0 10px;
-  border: 0;
+  line-height: 34px;
  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--sidebar-foreground);
  font-size: 13px;
  font-weight: 500;
-  text-align: left;
-  text-decoration: none;
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
+  color: var(--sidebar-foreground);
 }
-.pn-admin-item:hover {
-  background: var(--sidebar-accent);
-  color: var(--sidebar-accent-foreground);
-}
-.pn-admin-item.active {
-  background: var(--sidebar-primary);
-  color: var(--sidebar-primary-foreground);
-  font-weight: 600;
-}
-.pn-admin-item svg {
+.pn-admin-menu .ant-menu-item svg {
  width: 15px;
  height: 15px;
-  flex: none;
-  color: var(--muted-foreground);
-  transition: color 0.15s ease;
-}
-.pn-admin-item:hover svg {
-  color: var(--sidebar-accent-foreground);
-}
-.pn-admin-item.active svg {
-  color: var(--sidebar-primary-foreground);
 }
 .pn-admin-foot {
  display: flex;
@@ -1503,7 +1479,7 @@ button.pn-note-back:hover {
 /* 响应式 */
@media (max-width: 1023px) {
  .pn-admin-shell {
-    grid-template-columns: 224px minmax(0, 1fr);
+    grid-template-columns: 184px minmax(0, 1fr);
  }
  .pn-admin-content {
    padding: 20px;
@@ -99,6 +99,8 @@ export interface NoteItem {
  status?: string
  tags: string[]
  pinned: boolean
+  /** 公开列表项的封面图（正文第一张图；无图缺省） */
+  cover?: string
  deleted_at?: number | null
  created_at: number
  updated_at: number
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { Eye, EyeOff, ImageUp, KeyRound, Lock, Save, Trash2 } from 'lucide-react'
+import { Eye, EyeOff, ImageUp, KeyRound, Lock, RotateCcw, Save } from 'lucide-react'
 import { Button, Card, Divider, Input, Select, Upload } from 'antd'
 import { api, ApiError } from '../lib/api'
 import type { SiteSettings } from '../lib/api'
@@ -145,14 +145,14 @@ export default function AdminSettings() {
                </Upload>
                {logo && (
                  <Button
-                    icon={<Trash2 size={15} />}
+                    icon={<RotateCcw size={15} />}
                    onClick={() => setLogo('')}
                  >
-                    清除
+                    重置默认
                  </Button>
                )}
              </div>
-              <p className="pn-as-hint">显示在博客顶部站点名称前，建议正方形图片；修改后需点击「保存更改」。</p>
+              <p className="pn-as-hint">显示在博客顶部站点名称前，并用作站点 favicon，建议正方形图片；「重置默认」恢复内置图标。修改后需点击「保存更改」。</p>
            </div>
          </div>
        </Card>
@@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query'
 import { ArrowRight, Pin } from 'lucide-react'
 import { Pagination, Tag } from 'antd'
 import { api } from '../lib/api'
-import type { NoteItem, NoteList, TagCount } from '../lib/api'
+import type { NoteItem, NoteList } from '../lib/api'
 import { useDocumentTitle } from '../features/site'
 import { formatDateISO } from '../lib/utils'

@@ -16,72 +16,57 @@ function useNotes(page: number) {
  })
 }

-function useTags() {
-  return useQuery({
-    queryKey: ['tags'],
-    queryFn: () => api<{ tags: TagCount[] }>('/api/tags'),
-  })
-}
-
 function NotePost({ note }: { note: NoteItem }) {
  return (
    <article className="pn-home-post">
-      <time className="pn-home-date" dateTime={formatDateISO(note.published_at)}>
-        {note.pinned && (
-          <span className="pn-home-pin">
-            <Pin size={11} aria-hidden />置顶
-          </span>
-        )}
-        {formatDateISO(note.published_at)}
-      </time>
-      <h2 className="pn-home-post-title">
-        <Link to={`/notes/${encodeURIComponent(note.slug)}`}>
-          {note.title}
-          <ArrowRight className="pn-home-arrow" size={17} aria-hidden />
+      {note.cover && (
+        <Link
+          to={`/notes/${encodeURIComponent(note.slug)}`}
+          className="pn-home-cover"
+          tabIndex={-1}
+          aria-hidden
+        >
+          <img src={note.cover} alt="" loading="lazy" />
        </Link>
-      </h2>
-      {note.summary && <p className="pn-home-summary">{note.summary}</p>}
-      {note.tags.length > 0 && (
-        <div className="pn-home-tags">
-          {note.tags.map((t) => (
-            <Tag key={t}>
-              <Link className="pn-tag-link" to={`/tags/${encodeURIComponent(t)}`}>{t}</Link>
-            </Tag>
-          ))}
-        </div>
      )}
+      <div className="pn-home-post-main">
+        <time className="pn-home-date" dateTime={formatDateISO(note.published_at)}>
+          {note.pinned && (
+            <span className="pn-home-pin">
+              <Pin size={11} aria-hidden />置顶
+            </span>
+          )}
+          {formatDateISO(note.published_at)}
+        </time>
+        <h2 className="pn-home-post-title">
+          <Link to={`/notes/${encodeURIComponent(note.slug)}`}>
+            {note.title}
+            <ArrowRight className="pn-home-arrow" size={17} aria-hidden />
+          </Link>
+        </h2>
+        {note.summary && <p className="pn-home-summary">{note.summary}</p>}
+        {note.tags.length > 0 && (
+          <div className="pn-home-tags">
+            {note.tags.map((t) => (
+              <Tag key={t}>
+                <Link className="pn-tag-link" to={`/tags/${encodeURIComponent(t)}`}>{t}</Link>
+              </Tag>
+            ))}
+          </div>
+        )}
+      </div>
    </article>
  )
 }

-// 首页标签筛选：链接型分段导航（路由跳转而非受控切换，故用原生导航标记；
-// 链接配色由 .pn-home-filter a 的无 layer 规则承接，见 index.css）
-const filterStripCls =
-  'inline-flex min-w-0 items-center gap-1 rounded-[var(--radius-md)] border border-[var(--border)] bg-muted p-1'
-
 export default function Home() {
  const [page, setPage] = useState(1)
  useDocumentTitle()
  const { data, isLoading } = useNotes(page)
-  const { data: tagsData } = useTags()
  const totalPages = data ? Math.max(1, Math.ceil(data.total / data.page_size)) : 1
-  const topTags = (tagsData?.tags ?? []).slice(0, 4)

  return (
    <div className="pn-home-content">
-      {topTags.length > 0 && (
-        <nav className={`pn-home-filter ${filterStripCls}`} aria-label="按标签筛选笔记">
-          <Link to="/" aria-current={page === 1 ? 'page' : undefined}>
-            全部
-          </Link>
-          {topTags.map((t) => (
-            <Link key={t.name} to={`/tags/${encodeURIComponent(t.name)}`}>
-              {t.name}
-            </Link>
-          ))}
-        </nav>
-      )}
-
      <section aria-label="笔记列表">
        {isLoading ? (
          <p className="pn-home-list-empty">加载中…</p>
@@ -1,4 +1,4 @@
-import { Link, useParams } from 'react-router'
+import { Link, useNavigate, useParams } from 'react-router'
 import { useQuery } from '@tanstack/react-query'
 import { ArrowRight, Tag } from 'lucide-react'
 import { Tag as AntTag } from 'antd'
@@ -16,6 +16,7 @@ function useTags() {

 export default function TagPage() {
  const { tag } = useParams()
+  const navigate = useNavigate()
  useDocumentTitle(tag ? `标签：${tag}` : '标签')
  const { data: tagsData } = useTags()
  const { data, isLoading, error } = useQuery({
@@ -32,26 +33,31 @@ export default function TagPage() {
        <p>按主题浏览所有公开笔记</p>
      </section>

-      <nav className="pn-tag-cloud" aria-label="全部标签">
-        {tagsData?.tags.map((t) => (
-          <AntTag.CheckableTag key={t.name} checked={t.name === tag} className="pn-cloud-tag">
-            <Link
-              to={`/tags/${encodeURIComponent(t.name)}`}
-              aria-current={t.name === tag ? 'true' : undefined}
-            >
+      {/* 单选 CheckableTagGroup：选中态由组件承接；再次点击已选标签 = 取消（回全部） */}
+      <AntTag.CheckableTagGroup
+        multiple={false}
+        className="pn-tag-cloud"
+        value={tag ?? null}
+        onChange={(v) => navigate(v === null ? '/tags' : `/tags/${encodeURIComponent(v)}`)}
+        options={(tagsData?.tags ?? []).map((t) => ({
+          value: t.name,
+          className: 'pn-cloud-tag',
+          label: (
+            <>
              <Tag size={14} />
              <span>{t.name}</span>
              <span className="pn-cloud-count">{t.count}</span>
-            </Link>
-          </AntTag.CheckableTag>
-        ))}
-        {!tagsData && (
-          <span className="p-2 font-mono text-xs text-muted-foreground">加载中…</span>
-        )}
-        {tagsData && tagsData.tags.length === 0 && (
-          <span className="p-2 font-mono text-xs text-muted-foreground">还没有标签</span>
-        )}
-      </nav>
+            </>
+          ),
+        }))}
+        aria-label="全部标签"
+      />
+      {!tagsData && (
+        <span className="p-2 font-mono text-xs text-muted-foreground">加载中…</span>
+      )}
+      {tagsData && tagsData.tags.length === 0 && (
+        <span className="p-2 font-mono text-xs text-muted-foreground">还没有标签</span>
+      )}

      {tag === undefined && tagsData && (
        <p className="pn-home-list-empty" style={{ marginTop: 48 }}>选择一个标签，查看对应笔记</p>