From 8a782099f534df3496f721e9bd020ea6b7fe641c Mon Sep 17 00:00:00 2001
From: CNWei <t6g888@163.com>
Date: Sun, 1 Nov 2026 15:28:22 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=BB=9F=E4=B8=80=E5=89=8D=E5=90=8E?=
 =?UTF-8?q?=E5=8F=B0=E5=AE=BD=E5=BA=A6=E4=B8=8E=E6=95=B0=E5=80=BC=E6=A0=87?=
 =?UTF-8?q?=E5=B0=BA=EF=BC=8C=E7=AB=99=E7=82=B9=E5=A4=96=E5=A3=B3=E6=94=B9?=
 =?UTF-8?q?=E7=94=A8=20@stash/ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

对应风格审计的 1-4 条：

1. 宽度：后台内容区改为与页头内层同宽同左缘（1380 - 40 = 1340），
   修掉品牌 x=50、卡片 x=280 的错位
2. 阴影：--su-shadow-card / hover 的覆盖从 .app 挪到 :root，前后台同一套
3. 死代码：删除未被引用的 App.tsx（436 行）、AdminPage.tsx（54KB）与 .content-veil 样式
4. 标尺：37 处脱离 4/8/12/16/20/24/32/40 与字阶的间距/字号/圆角/行高改为令牌
   （含新增的 --su-font-size-2xl）；6px 的认证角标按图标保留并注明原因

顺带把重复实现收进库：
- 页头品牌 -> Brand
- 页头滚动信息 -> Ticker（含实测宽度的无缝循环）
- 搜索框 -> SearchField（variant=card），删除 components/search/SearchBar.tsx
- 后台「首页 Logo」预览与后台页头同样复用 Brand
---
 stash-web/src/App.css                         |  209 +-
 stash-web/src/App.tsx                         |  437 ----
 stash-web/src/AppNext.tsx                     |   12 +-
 stash-web/src/components/admin/AdminNext.tsx  |   29 +-
 stash-web/src/components/admin/AdminPage.tsx  | 1782 -----------------
 .../src/components/header/SiteHeader.tsx      |  128 +-
 stash-web/src/components/search/SearchBar.tsx |   47 -
 7 files changed, 90 insertions(+), 2554 deletions(-)
 delete mode 100644 stash-web/src/App.tsx
 delete mode 100644 stash-web/src/components/admin/AdminPage.tsx
 delete mode 100644 stash-web/src/components/search/SearchBar.tsx

diff --git a/stash-web/src/App.css b/stash-web/src/App.css
index c4886fa..d6c5b62 100644
--- a/stash-web/src/App.css
+++ b/stash-web/src/App.css
@@ -1,14 +1,17 @@
 /* 页面级样式：只保留「组件库没有」的部分（背景、外壳、封面兜底、正文版式）。
    颜色 / 间距 / 字号全部取自 @stash/ui 的令牌。 */
 
+/* 主题级覆盖：放 :root 而不是 .app，前后台两个壳才能拿到同一套阴影 */
+:root {
+  --su-shadow-card: 0 6px 16px rgba(27, 26, 49, 0.02);
+  --su-shadow-hover: 0 6px 16px rgba(27, 26, 49, 0.06);
+}
+
 .app {
   position: relative;
   z-index: 1;
   /* 透明：让固定背景图从下面透出来（Layout 默认有底色） */
   background-color: transparent;
-  /* 旧版影子是 2% / 6%，比库默认更深，属于主题级覆盖 */
-  --su-shadow-card: 0 6px 16px rgba(27, 26, 49, 0.02);
-  --su-shadow-hover: 0 6px 16px rgba(27, 26, 49, 0.06);
 }
 
 /* 顶部背景图：固定 65vh，底部渐隐到页面底色 */
@@ -45,32 +48,7 @@
   padding: 0 var(--su-space-5);
 }
 
-.site-brand {
-  display: flex;
-  align-items: center;
-  gap: var(--su-space-2);
-}
-
-.site-brand-mark {
-  display: grid;
-  place-items: center;
-  width: 32px;
-  height: 32px;
-  border-radius: var(--su-radius-pill);
-  background-color: var(--su-text-main);
-  color: var(--su-white);
-  font-size: var(--su-font-size-base);
-  font-weight: var(--su-font-weight-strong);
-}
-
-.site-brand-logo {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--su-radius-sm);
-  object-fit: contain;
-}
-
-/* 后台「首页 Logo」的实时预览 */
+/* 后台「首页 Logo」的实时预览：外观交给库里的 Brand，这里只管外框 */
 .brand-preview {
   display: flex;
   align-items: center;
@@ -81,42 +59,9 @@
   background-color: var(--su-bg-card);
 }
 
-.site-brand-name {
-  font-size: var(--su-font-size-lg);
-  line-height: var(--su-line-height-lg);
-  letter-spacing: 0.04em;
-}
-
 /* ---------- 页头滚动信息 ---------- */
 
-.header-ticker {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  mask-image: linear-gradient(
-    90deg,
-    transparent 0,
-    #000 32px,
-    #000 calc(100% - 32px),
-    transparent 100%
-  );
-}
-
-.header-ticker-track {
-  display: flex;
-  width: max-content;
-  animation: header-ticker 24s linear infinite;
-}
-
-/* 每组占满整条轨道宽度：任何时候只看到一份信息，滚动时下一份从右侧进入 */
-.header-ticker-group {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-evenly;
-  gap: var(--su-space-8);
-  min-width: 100%;
-}
-
+/* 跑马灯外壳在 @stash/ui 的 Ticker 里，这里只剩每条信息的排版 */
 .header-ticker-item {
   display: inline-flex;
   align-items: center;
@@ -127,24 +72,6 @@
   white-space: nowrap;
 }
 
-@keyframes header-ticker {
-  from {
-    transform: translateX(0);
-  }
-
-  /* 位移量由 SiteHeader 量出「一组」的真实宽度写进 --ticker-shift；
-     回退值仅在第一帧兜底，正常情况不会用到 */
-  to {
-    transform: translateX(var(--ticker-shift, -33.3333%));
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .header-ticker-track {
-    animation: none;
-  }
-}
-
 .header-actions {
   margin-left: auto;
 }
@@ -158,21 +85,6 @@
   padding: var(--su-space-8) 0 calc(var(--su-space-10) + var(--su-space-1));
 }
 
-.search-row {
-  width: min(480px, 100%);
-  height: 44px;
-}
-
-/* 旧版搜索是「浅边框 + 卡片阴影」，聚焦时不额外加边框/焦点环 */
-.search-row > *:first-child,
-.search-row > *:first-child:focus-within {
-  border-color: var(--su-border);
-  border-radius: var(--su-radius-md);
-  box-shadow: var(--su-shadow-card);
-}
-
-/* 搜索框保持实底清晰，透明度/虚化只作用于周围区域 */
-
 /* ---------- 两栏骨架 ---------- */
 
 .content {
@@ -183,30 +95,6 @@
   padding-bottom: var(--su-space-10);
 }
 
-/* 顶部渐隐：sticky 固定在滚动区顶端，内容从下面淡出而不是被硬切 */
-.content-veil {
-  position: sticky;
-  top: 0;
-  z-index: 5;
-  height: 32px;
-  /* 抵消自身高度 + 父容器 gap，避免把首张卡片往下顶 */
-  margin-bottom: calc(-32px - var(--su-space-5));
-  pointer-events: none;
-  opacity: 0;
-  background: linear-gradient(to bottom, var(--su-bg-page) 0%, transparent 100%);
-  transition: opacity var(--su-duration-fast) var(--su-ease-in-out);
-}
-
-.content-veil.is-visible {
-  opacity: 1;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .content-veil {
-    transition: none;
-  }
-}
-
 .sidebar {
   display: flex;
   flex-direction: column;
@@ -220,8 +108,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 6px;
-  padding: 18px 14px 14px;
+  gap: var(--su-space-2);
+  padding: var(--su-space-5) var(--su-space-4) var(--su-space-4);
   text-align: center;
 }
 
@@ -230,11 +118,11 @@
 }
 
 .profile-role {
-  padding: 1px 8px;
+  padding: 0 var(--su-space-2);
   border: 1px solid var(--su-border);
   border-radius: var(--su-radius-pill);
   font-size: var(--su-font-size-xs);
-  line-height: 18px;
+  line-height: var(--su-line-height-sm);
   color: var(--su-text-sub);
 }
 
@@ -246,7 +134,7 @@
 .profile-location {
   margin-top: 2px;
   font-size: var(--su-font-size-xs);
-  line-height: 18px;
+  line-height: var(--su-line-height-sm);
   color: var(--su-text-muted);
 }
 
@@ -256,30 +144,30 @@
 }
 
 .service-panel {
-  padding: 12px 14px;
+  padding: var(--su-space-3) var(--su-space-4);
 }
 
 /* 旧版标题与统计值的行高比库默认更紧 */
 .service-panel h2 {
-  line-height: 20px;
+  line-height: var(--su-line-height-sm);
 }
 
 /* 旧版连接状态药丸：22 高、12px */
 .service-status {
   height: 22px;
-  padding: 0 10px;
+  padding: 0 var(--su-space-3);
   font-size: var(--su-font-size-xs);
 }
 
 /* 旧版统计行是 12/18 */
 .service-stats span {
-  line-height: 18px;
+  line-height: var(--su-line-height-sm);
 }
 
 .service-stats {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--su-space-2);
   margin-top: 10px;
 }
 
@@ -334,10 +222,10 @@
   right: -18px;
   height: 16px;
   min-width: 16px;
-  padding: 0 4px;
-  border-radius: 8px;
+  padding: 0 var(--su-space-1);
+  border-radius: var(--su-radius-sm);
   box-shadow: 0 1px 3px color-mix(in srgb, var(--su-color-danger) 30%, transparent);
-  font-size: 12px;
+  font-size: var(--su-font-size-xs);
   font-weight: var(--su-font-weight-strong);
   line-height: 1;
 }
@@ -356,7 +244,7 @@
   width: 4px;
   height: 16px;
   margin-right: var(--su-space-2);
-  border-radius: 2px;
+  border-radius: var(--su-radius-xs);
   background-color: var(--su-color-primary);
 }
 
@@ -379,7 +267,7 @@
 .group-crumbs {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--su-space-2);
   padding: var(--su-space-2) var(--su-space-3);
 }
 
@@ -401,7 +289,7 @@
   width: 4px;
   height: 16px;
   margin-right: var(--su-space-2);
-  border-radius: 2px;
+  border-radius: var(--su-radius-xs);
   background-color: var(--su-color-primary);
 }
 
@@ -410,8 +298,8 @@
 .app-card {
   display: flex;
   align-items: center;
-  gap: 15px;
-  padding: 6px 0;
+  gap: var(--su-space-4);
+  padding: var(--su-space-2) 0;
   border-radius: var(--su-radius-sm);
 }
 
@@ -422,7 +310,7 @@
 .app-card-info {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--su-space-1);
   min-width: 0;
 }
 
@@ -430,13 +318,15 @@
 .app-card-avatar {
   width: 48px;
   height: 48px;
-  font-size: 18px;
+  font-size: var(--su-font-size-lg);
 }
 
 .app-card-avatar > span + span {
   width: 10px;
   height: 10px;
   border-width: 1px;
+  /* 6px 不是文字尺寸：这是 10px 圆标里的一枚「✓」字形，按图标对待；
+     设计系统的字阶（12 起）不覆盖这种装饰字形 */
   font-size: 6px;
 }
 
@@ -495,7 +385,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 12px 0 4px;
+  padding: var(--su-space-3) 0 var(--su-space-1);
   text-align: center;
 }
 
@@ -509,7 +399,7 @@
   border-radius: 50%;
   background-color: var(--su-color-primary-soft);
   color: var(--su-color-primary);
-  font-size: 24px;
+  font-size: var(--su-font-size-xl);
   line-height: 1;
 }
 
@@ -529,7 +419,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 24px 28px;
+  padding: var(--su-space-6);
 }
 
 .item-title {
@@ -545,7 +435,7 @@
 /* 旧版标签：2px 10px、12px、主色浅底 */
 .item-tag {
   height: 22px;
-  padding: 0 10px;
+  padding: 0 var(--su-space-3);
   font-size: var(--su-font-size-xs);
 }
 
@@ -565,7 +455,7 @@
 .item-cover {
   display: grid;
   place-items: center;
-  margin: 18px 0 10px;
+  margin: var(--su-space-5) 0 var(--su-space-3);
   overflow: hidden;
   background-color: var(--su-color-primary-soft);
   color: var(--su-color-primary);
@@ -590,13 +480,13 @@
 }
 
 .item-cover-letter {
-  font-size: 32px;
+  font-size: var(--su-font-size-2xl);
   color: var(--su-text-sub);
 }
 
 .item-quote {
   display: flex;
-  gap: 6px;
+  gap: var(--su-space-2);
   width: 100%;
   margin-top: 18px;
   text-align: left;
@@ -604,7 +494,7 @@
 
 .item-quote-mark {
   flex-shrink: 0;
-  font-size: 32px;
+  font-size: var(--su-font-size-2xl);
   font-weight: var(--su-font-weight-strong);
   line-height: 1;
   color: color-mix(in srgb, var(--su-color-danger) 35%, transparent);
@@ -647,7 +537,7 @@
   flex: 1;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: var(--su-space-2);
   height: 36px;
   border-radius: var(--su-radius-cover);
   background-color: var(--su-color-primary);
@@ -717,7 +607,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--su-space-3);
-  padding: 32px 40px 40px;
+  padding: var(--su-space-8) var(--su-space-10) var(--su-space-10);
 }
 
 .article-lead {
@@ -735,7 +625,7 @@
 .related-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px 24px;
+  gap: var(--su-space-4) var(--su-space-6);
   margin-top: var(--su-space-4);
 }
 
@@ -749,9 +639,9 @@
 .related-item {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--su-space-3);
   width: 100%;
-  padding: 4px;
+  padding: var(--su-space-1);
   border-radius: var(--su-radius-cover);
   text-align: left;
   transition: background-color var(--su-duration-fast) var(--su-ease-in-out);
@@ -862,9 +752,10 @@
 }
 
 .admin-main {
-  width: min(880px, calc(100% - 48px));
+  /* 与页头内层同宽同左缘：页头 1380 减左右各 20 的内边距 = 内容从 50 起 */
+  width: min(var(--su-layout-width), 100%);
   margin: 0 auto;
-  padding: var(--su-space-8) 0 var(--su-space-10);
+  padding: var(--su-space-8) var(--su-space-5) var(--su-space-10);
 }
 
 .admin-locked {
@@ -1434,7 +1325,7 @@ a.entry-href:hover {
 .cards-side-list {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--su-space-1);
 }
 
 .cards-side-item {
@@ -1564,18 +1455,18 @@ a.entry-href:hover {
 .card-order-cell {
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: var(--su-space-1);
 }
 
 /* 分组管理里状态为「关闭」的分组：卡片里只能看、不能勾选 */
 .group-off-tag {
   display: inline-block;
-  padding: 0 8px;
+  padding: 0 var(--su-space-2);
   border-radius: var(--su-radius-pill);
   background-color: var(--su-gray-2);
   color: var(--su-text-muted);
   font-size: var(--su-font-size-xs);
-  line-height: 20px;
+  line-height: var(--su-line-height-sm);
   white-space: nowrap;
 }
 
diff --git a/stash-web/src/App.tsx b/stash-web/src/App.tsx
deleted file mode 100644
index a5717df..0000000
--- a/stash-web/src/App.tsx
+++ /dev/null
@@ -1,437 +0,0 @@
-import { Empty, Layout, Notice, Toaster } from '@stash/ui'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { BackToTop } from './components/common/BackToTop'
-import { ArticleDetailView } from './components/content/ArticleDetailView'
-import { DetailView } from './components/content/DetailView'
-import { HomeView } from './components/content/HomeView'
-import { ItemDetailView } from './components/content/ItemDetailView'
-import { SiteHeader } from './components/header/SiteHeader'
-import { SearchBar } from './components/search/SearchBar'
-import { Sidebar } from './components/sidebar/Sidebar'
-import { withLocalCategory } from './data/local'
-import {
-  appDetailModel,
-  posterDetailModel,
-  posterToRelatedItem,
-  toRelatedItem,
-} from './data/detail'
-import { filterCategories } from './data/filter'
-import type { NavTarget } from './data/nav'
-import {
-  type Category,
-  findAppItem,
-  findArticleItem,
-  findPosterItem,
-  relatedAppItems,
-  relatedPosterItems,
-} from './data/types'
-import { useProjects } from './useProjects'
-import { useCatalog } from './useCatalog'
-import { useViewRoute } from './useViewRoute'
-import { fetchSession, logout as logoutRequest, type SessionState } from './auth'
-import {
-  applySidebarGroups,
-  applySidebarSettings,
-  defaultSettings,
-  fetchSettings,
-  type SettingsDocument,
-} from './settings'
-import { LoginDialog } from './components/auth/LoginDialog'
-import { ItemEditor } from './components/content/ItemEditor'
-import { parseViewPath, viewPath, type View } from './data/view'
-import './App.css'
-
-export default function App() {
-  const { status, projects, error, live, refreshing, refresh } = useProjects()
-  // 内容目录来自后端 SQLite 内容库；本地服务分类仍由托管项目动态生成
-  const catalog = useCatalog()
-  const [keyword, setKeyword] = useState('')
-  // 当前视图由地址栏决定：刷新 / 收藏 / 前进后退都回到同一页（见 useViewRoute.ts）
-  const { view, go } = useViewRoute()
-  const [session, setSession] = useState<SessionState | null>(null)
-  const [settings, setSettings] = useState<SettingsDocument>({
-    version: 0,
-    settings: defaultSettings(),
-  })
-  const [loginOpen, setLoginOpen] = useState(false)
-  const [editingKey, setEditingKey] = useState<string | null>(null)
-  const [scrolled, setScrolled] = useState(false)
-  const searchRef = useRef<HTMLInputElement>(null)
-
-  // 登录态：只用来切换页头按钮与后续的编辑入口
-  useEffect(() => {
-    let alive = true
-    fetchSession().then((next) => {
-      if (alive) setSession(next)
-    })
-    fetchSettings().then((next) => {
-      if (alive) setSettings(next)
-    })
-    return () => {
-      alive = false
-    }
-  }, [])
-
-  const categories = useMemo(
-    () => withLocalCategory(projects, catalog.categories),
-    [projects, catalog.categories],
-  )
-  const visibleCategories = useMemo(
-    () => filterCategories(categories, keyword),
-    [categories, keyword],
-  )
-
-  // 侧栏不显示「本地服务」，也不显示被标记 show_in_sidebar = 0 的分区；
-  // 再按 /admin 里的顺序、显隐与分组设置重排一遍
-  const sidebarCategories = useMemo(
-    () =>
-      applySidebarGroups(
-        applySidebarSettings(
-          categories.filter(
-            (category) => category.id !== 'local' && category.showInSidebar !== false,
-          ),
-          settings.settings.sidebar,
-        ),
-        settings.settings.sidebar,
-      ),
-    [categories, settings.settings.sidebar],
-  )
-
-  const detailView = view.type === 'detail' ? view : undefined
-  const itemView = view.type === 'item' ? view : undefined
-
-  const detailCategory =
-    detailView !== undefined
-      ? categories.find((category) => category.id === detailView.categoryId)
-      : undefined
-
-  const itemCategory =
-    itemView !== undefined
-      ? categories.find((category) => category.id === itemView.categoryId)
-      : undefined
-
-  // 应用与电影共用一个详情模型，这里按分类类型做映射
-  const detailModel = useMemo(() => {
-    if (itemView === undefined || itemCategory === undefined) return undefined
-
-    if (itemCategory.kind === 'apps') {
-      const item = findAppItem(itemCategory, itemView.itemId)
-      return item !== undefined ? appDetailModel(item) : undefined
-    }
-
-    if (itemCategory.kind === 'posters') {
-      const poster = findPosterItem(itemCategory, itemView.itemId)
-      return poster !== undefined ? posterDetailModel(poster) : undefined
-    }
-
-    return undefined
-  }, [itemView, itemCategory])
-
-  const relatedItems = useMemo(() => {
-    if (itemView === undefined || itemCategory === undefined) return []
-
-    if (itemCategory.kind === 'apps') {
-      return relatedAppItems(itemCategory, itemView.itemId, 4).map(toRelatedItem)
-    }
-
-    if (itemCategory.kind === 'posters') {
-      return relatedPosterItems(itemCategory, itemView.itemId, 4).map(posterToRelatedItem)
-    }
-
-    return []
-  }, [itemView, itemCategory])
-
-  // 切换视图时把内容区（内部滚动）和窗口都回到顶部
-  useEffect(() => {
-    const scroller = document.getElementById('content-scroll')
-    scroller?.scrollTo({ top: 0 })
-    window.scrollTo({ top: 0 })
-  }, [view])
-
-  /**
-   * 滚动状态同时驱动「顶部渐隐」和「回到顶部」。
-   * 桌面端滚的是内容容器（scroll 事件不冒泡），所以用捕获阶段监听。
-   */
-  useEffect(() => {
-    const sync = () => {
-      const inner = document.getElementById('content-scroll')?.scrollTop ?? 0
-      const next = Math.max(inner, window.scrollY) > 4
-      setScrolled((current) => (current === next ? current : next))
-    }
-
-    sync()
-    window.addEventListener('scroll', sync, { passive: true })
-    document.addEventListener('scroll', sync, { passive: true, capture: true })
-
-    return () => {
-      window.removeEventListener('scroll', sync)
-      document.removeEventListener('scroll', sync, { capture: true })
-    }
-  }, [])
-
-  /**
-   * 「打开这个分区」应该落到哪个视图。
-   *
-   * 应用类分区配了首页展示块时，直接落到那个分组；其余情况打开整个分区。
-   */
-  const detailViewFor = (categoryId: string): View => {
-    const category = categories.find((item) => item.id === categoryId)
-
-    if (category?.block !== undefined) {
-      const group = category.groups.find((item) => item.id === category.block?.nodeKey)
-      if (group !== undefined) {
-        return { type: 'detail', categoryId, groupId: group.id }
-      }
-    }
-
-    return { type: 'detail', categoryId }
-  }
-
-  const openDetail = (categoryId: string) => go(detailViewFor(categoryId))
-
-  /** 条目所在的分组：应用 / 海报 / 图文都可能有分组 */
-  const groupOfItem = (category: Category, itemId: string): string | undefined => {
-    return category.groups.find((group) => group.items.some((item) => item.id === itemId))?.id
-  }
-
-  const openItem = (categoryId: string, itemId: string) => {
-    const category = categories.find((item) => item.id === categoryId)
-
-    go({
-      type: 'item',
-      categoryId,
-      itemId,
-      // 地址里带上条目自己的分组，刷新后「返回」才有确定的落点
-      groupId: category === undefined ? undefined : groupOfItem(category, itemId),
-    })
-  }
-
-  /**
-   * 侧栏导航：带分组时直接打开那个分组；
-   * 点分区本身时，交给 openDetail 按展示块落到对应节点。
-   */
-  const navigate = (target: NavTarget) => {
-    if (target.groupId === undefined) {
-      openDetail(target.categoryId)
-      return
-    }
-
-    go({ type: 'detail', categoryId: target.categoryId, groupId: target.groupId })
-  }
-
-  const goHome = () => go({ type: 'home' })
-
-  /** 面包屑点击：把 href 解析回视图再跳转（保持 SPA 不刷新） */
-  const navigateHref = (href: string) => go(parseViewPath(href))
-
-  const searching = keyword.trim() !== ''
-
-  const viewCategoryId = detailView?.categoryId ?? itemView?.categoryId
-
-  /**
-   * 首屏数据还没回来时，地址指向的分类 / 条目只是「暂时查不到」，
-   * 不能直接报「不存在」——刷新详情页时最容易被这个误导。
-   */
-  const dataPending =
-    viewCategoryId !== undefined &&
-    (catalog.status === 'loading' || (viewCategoryId === 'local' && status === 'loading'))
-
-  /**
-   * 条目详情按分类类型分流：
-   * 图文走长文版式，应用 / 电影走通用的条目版式。
-   */
-  function renderItemView() {
-    if (itemView === undefined) return null
-    if (itemCategory === undefined) {
-      return <Empty text={dataPending ? '正在读取内容库…' : '分类不存在'} />
-    }
-
-    if (itemCategory.kind === 'articles') {
-      const article = findArticleItem(itemCategory, itemView.itemId)
-      if (article === undefined) {
-        return <Empty text={dataPending ? '正在读取内容库…' : '条目不存在'} />
-      }
-
-      return (
-        <ArticleDetailView
-          article={article}
-          categoryId={itemCategory.id}
-          categoryTitle={itemCategory.title}
-          onNavigate={navigateHref}
-          onEdit={() => setEditingKey(itemView.itemId)}
-          canEdit={session?.authenticated === true}
-        />
-      )
-    }
-
-    if (detailModel === undefined) {
-      return <Empty text={dataPending ? '正在读取内容库…' : '条目不存在'} />
-    }
-
-    return (
-      <ItemDetailView
-        itemKey={itemView.itemId}
-        crumbs={[
-          { label: '首页', href: '/' },
-          { label: itemCategory.title, href: viewPath({ type: 'detail', categoryId: itemCategory.id }) },
-          { label: detailModel.title },
-        ]}
-        model={detailModel}
-        related={relatedItems}
-        onNavigate={navigateHref}
-        onOpenItem={(itemId) => openItem(itemCategory.id, itemId)}
-        onEdit={() => setEditingKey(itemView.itemId)}
-        canEdit={session?.authenticated === true}
-      />
-    )
-  }
-
-  const handleLogout = () => {
-    void logoutRequest().then(() => {
-      setSession({ authenticated: false, has_admin: true })
-    })
-  }
-
-  return (
-    <>
-      <Toaster />
-
-      {/* 登录弹窗：成功后直接把会话状态写回，不刷新页面 */}
-      <LoginDialog
-        open={loginOpen}
-        hasAdmin={session?.has_admin ?? false}
-        onClose={() => setLoginOpen(false)}
-        onSuccess={(next) => {
-          setSession(next)
-          setLoginOpen(false)
-        }}
-      />
-
-      <ItemEditor
-        open={editingKey !== null}
-        itemKey={editingKey}
-        onClose={() => setEditingKey(null)}
-        onSaved={() => catalog.reload()}
-      />
-
-      {/* 主题的顶部背景图：固定 65vh，底部渐隐到页面底色 */}
-      <div className="site-background" aria-hidden="true" />
-
-      <Layout
-        contained
-        maxWidth={1380}
-        gutter={20}
-        siderWidth={240}
-        gap={20}
-        headerHeight={60}
-        headerVariant="solid"
-        siderBordered={false}
-        contentPadding="none"
-        contentOffset={88}
-        height="screen"
-        scrollable
-        hideScrollbar
-        contentId="content-scroll"
-        className="app"
-        header={
-          <SiteHeader
-            projectCount={projects.length}
-            sampleProject={projects[0]?.name}
-            live={live}
-            headerItems={settings.settings.header.items}
-            headerEnabled={settings.settings.header.enabled}
-            headerSpeed={settings.settings.header.speed}
-            site={settings.settings.site}
-            authenticated={session?.authenticated === true}
-            username={session?.username ?? undefined}
-            onRefresh={() => refresh()}
-            onLogin={() => setLoginOpen(true)}
-            onLogout={handleLogout}
-            onSettings={() => window.location.assign('/admin')}
-          />
-        }
-        sider={
-          <Sidebar
-            projects={projects}
-            categories={sidebarCategories}
-            profile={settings.settings.profile}
-            live={live}
-            refreshing={refreshing}
-            onRefresh={refresh}
-            activeCategoryId={viewCategoryId}
-            activeGroupId={detailView?.groupId}
-            homeActive={view.type === 'home'}
-            onNavigate={navigate}
-            onHome={goHome}
-          />
-        }
-      >
-        <div className="content">
-          {/* 滚动后淡入的顶部遮罩，避免内容在容器顶边被硬切 */}
-          <div className={`content-veil${scrolled ? ' is-visible' : ''}`} aria-hidden="true" />
-
-          <SearchBar value={keyword} onChange={setKeyword} inputRef={searchRef} />
-
-          <h1 className="sr-only">Stash 本地应用工作区</h1>
-
-          {status === 'error' && (
-            <Notice
-              tone="error"
-              title="连不上 Stash 服务"
-              action={{ label: '重试', onClick: refresh }}
-            >
-              {error}
-            </Notice>
-          )}
-
-          {/* 内容库读取失败通常是用户改坏了 data 列里的 JSON，错误信息会带条目 id */}
-          {catalog.status === 'error' && (
-            <Notice
-              tone="error"
-              title="内容库读取失败"
-              action={{ label: '重试', onClick: catalog.reload }}
-            >
-              {catalog.error}
-            </Notice>
-          )}
-
-          {detailView === undefined && itemView === undefined && (
-            <>
-              {catalog.status === 'loading' && <Empty text="正在读取内容库…" />}
-
-              <HomeView
-                categories={visibleCategories}
-                sections={settings.settings.sections}
-                onOpenDetail={openDetail}
-                onOpenItem={openItem}
-              />
-
-              {searching && visibleCategories.length === 0 && (
-                <Notice title={`没有匹配「${keyword.trim()}」的内容`}>
-                  换个关键字试试，或清空搜索查看全部。
-                </Notice>
-              )}
-            </>
-          )}
-
-          {detailView !== undefined && detailCategory !== undefined && (
-            <DetailView
-              category={detailCategory}
-              groupId={detailView.groupId}
-              onNavigate={navigateHref}
-              onOpenItem={(itemId) => openItem(detailCategory.id, itemId)}
-            />
-          )}
-
-          {detailView !== undefined && detailCategory === undefined && (
-            <Empty text={dataPending ? '正在读取内容库…' : '分类不存在'} />
-          )}
-
-          {itemView !== undefined && renderItemView()}
-        </div>
-      </Layout>
-
-      <BackToTop visible={scrolled} />
-    </>
-  )
-}
diff --git a/stash-web/src/AppNext.tsx b/stash-web/src/AppNext.tsx
index 020972c..9740bb0 100644
--- a/stash-web/src/AppNext.tsx
+++ b/stash-web/src/AppNext.tsx
@@ -3,6 +3,7 @@ import {
   Layout,
   Menu,
   Notice,
+  SearchField,
   Space,
   Toaster,
   type MenuItem,
@@ -17,7 +18,6 @@ import { ItemEditor } from './components/content/ItemEditor'
 import { PosterGrid } from './components/content/PosterGrid'
 import { SectionCard } from './components/content/SectionCard'
 import { SiteHeader } from './components/header/SiteHeader'
-import { SearchBar } from './components/search/SearchBar'
 import { LoginDialog } from './components/auth/LoginDialog'
 import { ProfileCard } from './components/sidebar/ProfileCard'
 import { ServicePanel } from './components/sidebar/ServicePanel'
@@ -654,7 +654,15 @@ export default function AppNext() {
         }
         toolbar={
           <div className="search-toolbar">
-            <SearchBar value={keyword} onChange={setKeyword} inputRef={searchRef} />
+            <SearchField
+              value={keyword}
+              onChange={setKeyword}
+              inputRef={searchRef}
+              placeholder="搜索本地项目…"
+              label="搜索本地项目"
+              variant="card"
+              hotkey="k"
+            />
           </div>
         }
         sider={
diff --git a/stash-web/src/components/admin/AdminNext.tsx b/stash-web/src/components/admin/AdminNext.tsx
index 159b3f2..3f4bfb1 100644
--- a/stash-web/src/components/admin/AdminNext.tsx
+++ b/stash-web/src/components/admin/AdminNext.tsx
@@ -1,4 +1,5 @@
 import {
+  Brand,
   Button,
   Card,
   FormField,
@@ -202,16 +203,7 @@ export function AdminNext() {
       {/* 与前台页头同一套结构：品牌在左、图标操作在右，整条吸顶 */}
       <header className="admin-topbar">
         <div className="site-header-inner">
-          <a className="site-brand" href="/" aria-label={`${brandName || '首页'} 首页`}>
-            {brandLogo !== '' ? (
-              <img className="site-brand-logo" src={brandLogo} alt="" />
-            ) : (
-              <span className="site-brand-mark" aria-hidden="true">
-                {brandMark}
-              </span>
-            )}
-            {brandName !== '' && <span className="site-brand-name">{brandName}</span>}
-          </a>
+          <Brand href="/" name={brandName} mark={brandMark} logo={brandLogo} />
 
           <div className="header-actions">
             <IconButton
@@ -1806,17 +1798,12 @@ function HeaderPanel({
       <Text size="sm" strong>
         首页 Logo
       </Text>
-      <div className="brand-preview" aria-hidden="true">
-        {site.brand.logo.trim() !== '' ? (
-          <img className="site-brand-logo" src={site.brand.logo} alt="" />
-        ) : (
-          <span className="site-brand-mark">
-            {(site.brand.mark.trim() || site.brand.name.trim().slice(0, 1) || 'S').slice(0, 4)}
-          </span>
-        )}
-        {site.brand.name.trim() !== '' && (
-          <span className="site-brand-name">{site.brand.name}</span>
-        )}
+      <div className="brand-preview">
+        <Brand
+          name={site.brand.name}
+          mark={site.brand.mark}
+          logo={site.brand.logo}
+        />
       </div>
       <FormField label="Logo 图片地址" htmlFor="site-logo" hint="留空则用右侧的首字圆形标记">
         <Input
diff --git a/stash-web/src/components/admin/AdminPage.tsx b/stash-web/src/components/admin/AdminPage.tsx
deleted file mode 100644
index 01906b9..0000000
--- a/stash-web/src/components/admin/AdminPage.tsx
+++ /dev/null
@@ -1,1782 +0,0 @@
-import {
-  Button,
-  Card,
-  FormField,
-  Icon,
-  Input,
-  Modal,
-  Notice,
-  PasswordInput,
-  Select,
-  Space,
-  Switch,
-  Tabs,
-  Text,
-  Textarea,
-  Title,
-  Toaster,
-  toast,
-} from '@stash/ui'
-import { useEffect, useMemo, useState } from 'react'
-import { changePassword, fetchSession, logout, type SessionState } from '../../auth'
-import { LoginDialog } from '../auth/LoginDialog'
-import {
-  createCategory,
-  createGroup,
-  deleteCategory,
-  deleteGroup,
-  fetchSettings,
-  saveSettings,
-  TONE_OPTIONS,
-  updateCategory,
-  updateGroup,
-  type HeaderItem,
-  type ProfileSettings,
-  type SectionSettings,
-  type SettingsDocument,
-  type SettingsTone,
-  type SiteSettings,
-} from '../../settings'
-import { createItem, deleteItem, fetchItem, saveItem } from '../../items'
-
-/**
- * 站点设置页（/admin）：页头滚动信息 + 侧栏顺序/显隐。
- *
- * 只做「全局配置」；条目内容仍在详情页就地编辑（P2）。
- * 保存用 `version` 乐观锁，冲突时提示刷新。
- */
-type EntrySummary = {
-  id: string
-  name?: string
-  title?: string
-}
-
-type CategoryGroupSummary = {
-  id: string
-  name: string
-  /** 数据库里的默认显隐；缺省视为显示 */
-  showInSidebar?: boolean
-  items?: EntrySummary[]
-}
-
-type CategorySummary = {
-  id: string
-  title: string
-  kind?: 'apps' | 'posters' | 'articles'
-  icon?: string
-  barColor?: string
-  previewLimit?: number
-  /** 是否允许子分组（与类型无关的开关） */
-  allowGroups?: boolean
-  /** 首页卡片标题与预览节点 */
-  block?: { title?: string; nodeKey?: string } | null
-  /** 应用类分区下的分组（子分类） */
-  groups?: CategoryGroupSummary[]
-  /** 海报 / 图文类分区直接挂的条目 */
-  items?: EntrySummary[]
-}
-
-const clone = (settings: SiteSettings): SiteSettings => structuredClone(settings)
-
-export function AdminPage() {
-  const [session, setSession] = useState<SessionState | null>(null)
-  const [loginOpen, setLoginOpen] = useState(false)
-  const [document, setDocument] = useState<SettingsDocument | null>(null)
-  const [draft, setDraft] = useState<SiteSettings | null>(null)
-  const [categories, setCategories] = useState<CategorySummary[]>([])
-  const [tab, setTab] = useState('header')
-  const [saving, setSaving] = useState(false)
-  /** 待删除的分类；非 null 时确认弹窗打开 */
-  const [pendingDelete, setPendingDelete] = useState<CategorySummary | null>(null)
-  const [deleting, setDeleting] = useState(false)
-
-  const load = async () => {
-    const [nextSession, nextDocument] = await Promise.all([fetchSession(), fetchSettings()])
-    setSession(nextSession)
-    setDocument(nextDocument)
-    setDraft(clone(nextDocument.settings))
-
-    try {
-      const response = await fetch('/api/catalog', { credentials: 'same-origin' })
-      if (response.ok) {
-        const payload = (await response.json()) as { categories?: CategorySummary[] }
-        setCategories(payload.categories ?? [])
-      }
-    } catch {
-      setCategories([])
-    }
-  }
-
-  useEffect(() => {
-    void load()
-  }, [])
-
-  const save = async () => {
-    if (document === null || draft === null) return
-    setSaving(true)
-
-    const result = await saveSettings(document.version, draft)
-    setSaving(false)
-
-    if (!result.ok) {
-      toast.error(result.error)
-      return
-    }
-
-    setDocument(result.document)
-    setDraft(clone(result.document.settings))
-    toast.success('已保存')
-  }
-
-  const requestDelete = (card: CategorySummary) => setPendingDelete(card)
-
-  /** 只更新本地分类缓存（不改 draft），用于「子分组」开关即时生效 */
-  const patchCategory = (id: string, patch: Partial<CategorySummary>) =>
-    setCategories((current) =>
-      current.map((category) =>
-        category.id === id ? { ...category, ...patch } : category,
-      ),
-    )
-
-  const confirmDelete = async () => {
-    if (pendingDelete === null) return
-    setDeleting(true)
-    const result = await deleteCategory(pendingDelete.id)
-    setDeleting(false)
-
-    if (!result.ok) {
-      toast.error(result.error)
-      return
-    }
-
-    toast.success(`已删除「${pendingDelete.title}」`)
-    setPendingDelete(null)
-    await load()
-  }
-
-  const authenticated = session?.authenticated === true
-
-  return (
-    <div className="admin-page">
-      <Toaster />
-      <header className="admin-topbar">
-        <a className="site-brand" href="/" aria-label="Stash 首页">
-          <span className="site-brand-mark" aria-hidden="true">
-            S
-          </span>
-          <span className="site-brand-name">STASH</span>
-        </a>
-
-        <Space gap="sm">
-          <Button variant="ghost" icon={<Icon name="arrow_left_line" />} onClick={() => window.location.assign('/')}>
-            返回首页
-          </Button>
-          {authenticated && (
-            <Button
-              variant="secondary"
-              icon={<Icon name="exit_line" />}
-              onClick={() => {
-                void logout().then(() => window.location.assign('/'))
-              }}
-            >
-              退出登录
-            </Button>
-          )}
-        </Space>
-      </header>
-
-      <main className="admin-main">
-        <Card padding="lg">
-          <Space direction="column" gap="sm" align="stretch">
-            <Title level={2}>站点设置</Title>
-            <Text size="sm" tone="muted">
-              页头滚动信息与侧栏导航都保存在内容库里，改完立即对新打开的页面生效。
-            </Text>
-          </Space>
-
-          {!authenticated && (
-            <div className="admin-locked">
-              <Text>需要登录后才能修改设置。</Text>
-              <Button icon={<Icon name="lock_line" />} onClick={() => setLoginOpen(true)}>
-                登录
-              </Button>
-            </div>
-          )}
-
-          {authenticated && draft !== null && (
-            <>
-              <Tabs
-                className="admin-tabs"
-                items={[
-                  { key: 'header', label: '页头滚动信息' },
-                  { key: 'sections', label: '首页卡片' },
-                  { key: 'content', label: '内容' },
-                  { key: 'categories', label: '分区' },
-                  { key: 'sidebar', label: '侧栏导航' },
-                  { key: 'profile', label: '资料' },
-                  { key: 'system', label: '系统' },
-                ]}
-                activeKey={tab}
-                onChange={setTab}
-              />
-
-              {tab === 'header' ? (
-                <HeaderForm
-                  value={draft.header}
-                  onChange={(header) => setDraft({ ...draft, header })}
-                />
-              ) : tab === 'sections' ? (
-                <SectionForm
-                  categories={categories}
-                  value={draft.sections}
-                  onChange={(sections) => setDraft({ ...draft, sections })}
-                  onDelete={requestDelete}
-                  onReload={load}
-                />
-              ) : tab === 'content' ? (
-                <ContentManager categories={categories} onReload={load} />
-              ) : tab === 'categories' ? (
-                <CategoryManager
-                  categories={categories}
-                  onReload={load}
-                  onDelete={requestDelete}
-                  onToggleGroups={(id, allow) => patchCategory(id, { allowGroups: allow })}
-                />
-              ) : tab === 'sidebar' ? (
-                <SidebarForm
-                  categories={categories}
-                  value={draft.sidebar}
-                  onChange={(sidebar) => setDraft({ ...draft, sidebar })}
-                  onDelete={requestDelete}
-                  onReload={load}
-                />
-              ) : tab === 'profile' ? (
-                <ProfileForm
-                  value={draft.profile}
-                  onChange={(profile) => setDraft({ ...draft, profile })}
-                />
-              ) : (
-                <SystemPanel />
-              )}
-
-              {/* 「内容」「分区」都是逐项保存，不参与整页设置的保存/撤销 */}
-              {tab !== 'categories' && tab !== 'content' && (
-                <Space gap="sm" justify="end" className="admin-actions">
-                  <Button
-                    variant="secondary"
-                    onClick={() => {
-                      setDraft(clone(draft))
-                      void load()
-                    }}
-                  >
-                    撤销改动
-                  </Button>
-                  <Button loading={saving} icon={<Icon name="check_line" />} onClick={save}>
-                    保存
-                  </Button>
-                </Space>
-              )}
-            </>
-          )}
-        </Card>
-      </main>
-
-      <LoginDialog
-        open={loginOpen}
-        hasAdmin={session?.has_admin ?? true}
-        onClose={() => setLoginOpen(false)}
-        onSuccess={(next) => {
-          setSession(next)
-          setLoginOpen(false)
-          void load()
-        }}
-      />
-
-      <Modal
-        open={pendingDelete !== null}
-        onClose={() => {
-          if (!deleting) setPendingDelete(null)
-        }}
-        title={pendingDelete === null ? '删除分类' : `删除「${pendingDelete.title}」？`}
-        size="sm"
-        footer={
-          <Space gap="sm" justify="end">
-            <Button variant="secondary" disabled={deleting} onClick={() => setPendingDelete(null)}>
-              取消
-            </Button>
-            <Button
-              variant="danger"
-              loading={deleting}
-              icon={<Icon name="delete_2_line" />}
-              onClick={() => void confirmDelete()}
-            >
-              删除
-            </Button>
-          </Space>
-        }
-      >
-        <Text>删除后，该分类下的所有条目会一起删除，且不可恢复。</Text>
-      </Modal>
-    </div>
-  )
-}
-
-// ---------- 页头表单 ----------
-
-const TONE_SELECT = TONE_OPTIONS.map((option) => ({ value: option.value, label: option.label }))
-
-function HeaderForm({
-  value,
-  onChange,
-}: {
-  value: SiteSettings['header']
-  onChange: (header: SiteSettings['header']) => void
-}) {
-  const update = (index: number, patch: Partial<HeaderItem>) => {
-    onChange({
-      ...value,
-      items: value.items.map((item, itemIndex) =>
-        itemIndex === index ? { ...item, ...patch } : item,
-      ),
-    })
-  }
-
-  const move = (index: number, step: -1 | 1) => {
-    const target = index + step
-    if (target < 0 || target >= value.items.length) return
-    const items = [...value.items]
-    const [item] = items.splice(index, 1)
-    items.splice(target, 0, item)
-    onChange({ ...value, items })
-  }
-
-  return (
-    <Space direction="column" gap="lg" align="stretch" className="admin-form">
-      <div className="admin-row">
-        <Text>显示页头滚动信息</Text>
-        <Switch
-          checked={value.enabled}
-          onChange={(enabled) => onChange({ ...value, enabled })}
-          label="显示页头滚动信息"
-        />
-        <Text size="sm" tone="muted">
-          关闭后页头中间留空
-        </Text>
-      </div>
-
-      <FormField label="滚动速度" htmlFor="header-speed" hint="秒数越大越慢，范围 8–120">
-        <Input
-          id="header-speed"
-          type="number"
-          value={String(value.speed)}
-          onChange={(event) => {
-            const speed = Number(event.target.value)
-            if (Number.isFinite(speed)) onChange({ ...value, speed })
-          }}
-        />
-      </FormField>
-
-      <Space direction="column" gap="sm" align="stretch">
-        <Text size="sm" tone="muted">
-          支持占位符：{'{count}'} 应用数、{'{project}'} 项目名、{'{status}'} 连接状态
-        </Text>
-
-        {value.items.map((item, index) => (
-          <div className="admin-item-row" key={index}>
-            <Input
-              value={item.text}
-              placeholder="信息文本"
-              onChange={(event) => update(index, { text: event.target.value })}
-            />
-            <Input
-              value={item.tag ?? ''}
-              placeholder="标签（可选）"
-              onChange={(event) => update(index, { tag: event.target.value })}
-            />
-            <Select
-              options={TONE_SELECT}
-              value={item.tone}
-              onChange={(tone) => update(index, { tone: tone as SettingsTone })}
-            />
-            <IconButtonGroup
-              onUp={() => move(index, -1)}
-              onDown={() => move(index, 1)}
-              onRemove={() => onChange({ ...value, items: value.items.filter((_, i) => i !== index) })}
-            />
-          </div>
-        ))}
-
-        <Button
-          variant="secondary"
-          icon={<Icon name="add_line" />}
-          disabled={value.items.length >= 8}
-          onClick={() => onChange({ ...value, items: [...value.items, { text: '', tag: '', tone: 'plain' }] })}
-        >
-          添加一条
-        </Button>
-      </Space>
-    </Space>
-  )
-}
-
-// ---------- 侧栏表单 ----------
-
-function SidebarForm({
-  categories,
-  value,
-  onChange,
-  onDelete,
-  onReload,
-}: {
-  categories: CategorySummary[]
-  value: SiteSettings['sidebar']
-  onChange: (sidebar: SiteSettings['sidebar']) => void
-  onDelete: (card: CategorySummary) => void
-  onReload: () => void
-}) {
-  const ordered = useMemo(() => {
-    const ranks = new Map(value.order.map((id, index) => [id, index]))
-    return [...categories].sort((a, b) => {
-      const left = ranks.get(a.id) ?? Number.MAX_SAFE_INTEGER
-      const right = ranks.get(b.id) ?? Number.MAX_SAFE_INTEGER
-      if (left === right) return 0
-      return left - right
-    })
-  }, [categories, value.order])
-
-  const move = (index: number, step: -1 | 1) => {
-    const target = index + step
-    if (target < 0 || target >= ordered.length) return
-    const ids = ordered.map((category) => category.id)
-    const [id] = ids.splice(index, 1)
-    ids.splice(target, 0, id)
-    onChange({ ...value, order: ids })
-  }
-
-  const toggle = (id: string, visible: boolean) => {
-    const hidden = visible
-      ? value.hidden.filter((entry) => entry !== id)
-      : [...new Set([...value.hidden, id])]
-    onChange({ ...value, hidden, order: ordered.map((category) => category.id) })
-  }
-
-  const orderedGroups = (category: CategorySummary) => {
-    const ranks = new Map(
-      (value.group_order[category.id] ?? []).map((id, index) => [id, index] as const),
-    )
-    return [...(category.groups ?? [])].sort((a, b) => {
-      const left = ranks.get(a.id) ?? Number.MAX_SAFE_INTEGER
-      const right = ranks.get(b.id) ?? Number.MAX_SAFE_INTEGER
-      if (left === right) return 0
-      return left - right
-    })
-  }
-
-  const groupVisible = (category: CategorySummary, group: CategoryGroupSummary) => {
-    const key = `${category.id}/${group.id}`
-    return (
-      !value.hidden_groups.includes(key) &&
-      (group.showInSidebar !== false || value.shown_groups.includes(key))
-    )
-  }
-
-  const toggleGroup = (
-    category: CategorySummary,
-    group: CategoryGroupSummary,
-    visible: boolean,
-  ) => {
-    const key = `${category.id}/${group.id}`
-    const hidden_groups = visible
-      ? value.hidden_groups.filter((entry) => entry !== key)
-      : [...new Set([...value.hidden_groups, key])]
-    const shown_groups = visible
-      ? [...new Set([...value.shown_groups, key])]
-      : value.shown_groups.filter((entry) => entry !== key)
-    onChange({ ...value, hidden_groups, shown_groups })
-  }
-
-  const moveGroup = (category: CategorySummary, index: number, step: -1 | 1) => {
-    const groups = orderedGroups(category)
-    const target = index + step
-    if (target < 0 || target >= groups.length) return
-
-    const ids = groups.map((group) => group.id)
-    const [id] = ids.splice(index, 1)
-    ids.splice(target, 0, id)
-    onChange({ ...value, group_order: { ...value.group_order, [category.id]: ids } })
-  }
-
-  return (
-    <Space direction="column" gap="sm" align="stretch" className="admin-form">
-      <Text size="sm" tone="muted">
-        顺序决定侧栏显示位置；关掉的分类仍可通过地址直接访问。应用类分区下的子分类（分组）可以单独显隐与排序。
-      </Text>
-
-      {ordered.map((category, index) => {
-        const visible = !value.hidden.includes(category.id)
-        const groups = category.allowGroups === true ? orderedGroups(category) : []
-
-        return (
-          <div className="admin-nav-block" key={category.id}>
-            <div className="admin-item-row admin-nav-row">
-              <Switch
-                checked={visible}
-                onChange={(next) => toggle(category.id, next)}
-                label={`显示 ${category.title}`}
-              />
-              <Text className="admin-item-title">{category.title}</Text>
-              <IconButtonGroup
-                onUp={() => move(index, -1)}
-                onDown={() => move(index, 1)}
-                onRemove={() => onDelete(category)}
-              />
-            </div>
-
-            {groups.map((group, groupIndex) => (
-              <div
-                className="admin-item-row admin-nav-row admin-nav-group-row"
-                key={group.id}
-              >
-                <Switch
-                  checked={groupVisible(category, group)}
-                  onChange={(next) => toggleGroup(category, group, next)}
-                  label={`显示 ${group.name}`}
-                />
-                <Text className="admin-item-title">{group.name}</Text>
-                <IconButtonGroup
-                  onUp={() => moveGroup(category, groupIndex, -1)}
-                  onDown={() => moveGroup(category, groupIndex, 1)}
-                />
-              </div>
-            ))}
-
-            {category.allowGroups === true && (
-              <div className="admin-nav-group-row">
-                <NewGroupRow sectionId={category.id} onReload={onReload} />
-              </div>
-            )}
-          </div>
-        )
-      })}
-
-      {ordered.length === 0 && <Text tone="muted">内容库还没有加载完成。</Text>}
-
-      <Text size="sm" tone="muted">
-        新增或删除分类会同时影响首页卡片与侧栏。
-      </Text>
-      <CategoryCreator onCreated={onReload} />
-    </Space>
-  )
-}
-
-// ---------- 首页卡片表单 ----------
-
-function SectionForm({
-  categories,
-  value,
-  onChange,
-  onDelete,
-  onReload,
-}: {
-  categories: CategorySummary[]
-  value: SectionSettings
-  onChange: (sections: SectionSettings) => void
-  onDelete: (card: CategorySummary) => void
-  onReload: () => void
-}) {
-  const cards = useMemo(() => {
-    const base = [
-      { id: 'local', title: '本地服务' },
-      ...categories
-        .filter((category) => category.id !== 'local')
-        .map((category) => ({
-          id: category.id,
-          title: category.block?.title ?? category.title,
-        })),
-    ]
-    const ranks = new Map(value.order.map((id, index) => [id, index]))
-
-    return [...base].sort((a, b) => {
-      const left = ranks.get(a.id) ?? Number.MAX_SAFE_INTEGER
-      const right = ranks.get(b.id) ?? Number.MAX_SAFE_INTEGER
-      return left - right
-    })
-  }, [categories, value.order])
-
-  const setOrder = (ids: string[]) => onChange({ ...value, order: ids })
-
-  const move = (index: number, step: -1 | 1) => {
-    const target = index + step
-    if (target < 0 || target >= cards.length) return
-    const ids = cards.map((card) => card.id)
-    const [id] = ids.splice(index, 1)
-    ids.splice(target, 0, id)
-    setOrder(ids)
-  }
-
-  const toggle = (id: string, visible: boolean) => {
-    const hidden = visible
-      ? value.hidden.filter((entry) => entry !== id)
-      : [...new Set([...value.hidden, id])]
-    onChange({ ...value, hidden, order: cards.map((card) => card.id) })
-  }
-
-  const setTitle = (id: string, title: string) => {
-    const titles = { ...value.titles }
-    if (title.trim() === '') delete titles[id]
-    else titles[id] = title
-    onChange({ ...value, titles })
-  }
-
-  const setLimit = (id: string, raw: string) => {
-    const limits = { ...value.limits }
-    const limit = Number(raw)
-    if (raw.trim() === '' || !Number.isFinite(limit) || limit <= 0) delete limits[id]
-    else limits[id] = Math.min(60, Math.round(limit))
-    onChange({ ...value, limits })
-  }
-
-  return (
-    <Space direction="column" gap="sm" align="stretch" className="admin-form">
-      <Text size="sm" tone="muted">
-        控制首页卡片：显示 / 隐藏、标题、每张卡预览条数与顺序。留空表示用内容库里的默认值。
-      </Text>
-
-      {cards.map((card, index) => (
-        <div className="admin-item-row admin-section-row" key={card.id}>
-          <Switch
-            checked={!value.hidden.includes(card.id)}
-            onChange={(next) => toggle(card.id, next)}
-            label={`显示 ${card.title}`}
-          />
-          <Input
-            value={value.titles[card.id] ?? ''}
-            placeholder={card.title}
-            aria-label={`${card.title} 标题`}
-            onChange={(event) => setTitle(card.id, event.target.value)}
-          />
-          <Input
-            type="number"
-            value={value.limits[card.id] === undefined ? '' : String(value.limits[card.id])}
-            placeholder="条数"
-            aria-label={`${card.title} 预览条数`}
-            onChange={(event) => setLimit(card.id, event.target.value)}
-          />
-          <IconButtonGroup
-            onUp={() => move(index, -1)}
-            onDown={() => move(index, 1)}
-            onRemove={card.id === 'local' ? undefined : () => onDelete(card)}
-            disabledRemove={card.id === 'local'}
-          />
-        </div>
-      ))}
-
-      {cards.length === 0 && <Text tone="muted">内容库还没有加载完成。</Text>}
-
-      <CategoryCreator onCreated={onReload} />
-    </Space>
-  )
-}
-
-// ---------- 新增分类 ----------
-
-function CategoryCreator({ onCreated }: { onCreated: () => void }) {
-  const [id, setId] = useState('')
-  const [title, setTitle] = useState('')
-  const [kind, setKind] = useState<'apps' | 'posters' | 'articles'>('posters')
-  const [busy, setBusy] = useState(false)
-
-  const submit = async () => {
-    setBusy(true)
-    const result = await createCategory({ id: id.trim(), title: title.trim(), kind })
-    setBusy(false)
-
-    if (!result.ok) {
-      toast.error(result.error)
-      return
-    }
-
-    toast.success('分类已创建')
-    setId('')
-    setTitle('')
-    onCreated()
-  }
-
-  return (
-    <Space direction="column" gap="sm" align="stretch" className="admin-create">
-      <Text size="sm" tone="muted">
-        新增分类（会同时出现在首页卡片与侧栏）。标识只允许小写字母、数字与连字符。
-      </Text>
-      <div className="admin-create-row">
-        <Input
-          value={id}
-          placeholder="标识，如 books"
-          aria-label="新分类标识"
-          onChange={(event) => setId(event.target.value)}
-        />
-        <Input
-          value={title}
-          placeholder="标题，如 书单"
-          aria-label="新分类标题"
-          onChange={(event) => setTitle(event.target.value)}
-        />
-        <Select
-          options={[
-            { value: 'apps', label: '应用' },
-            { value: 'posters', label: '海报' },
-            { value: 'articles', label: '图文' },
-          ]}
-          value={kind}
-          onChange={(next) => setKind(next as typeof kind)}
-        />
-        <Button
-          loading={busy}
-          disabled={id.trim() === '' || title.trim() === ''}
-          icon={<Icon name="add_line" />}
-          onClick={submit}
-        >
-          新增
-        </Button>
-      </div>
-    </Space>
-  )
-}
-
-// ---------- 分区与分组管理 ----------
-
-const KIND_OPTIONS = [
-  { value: 'apps', label: '应用' },
-  { value: 'posters', label: '海报' },
-  { value: 'articles', label: '图文' },
-]
-
-function CategoryManager({
-  categories,
-  onReload,
-  onDelete,
-  onToggleGroups,
-}: {
-  categories: CategorySummary[]
-  onReload: () => void
-  onDelete: (card: CategorySummary) => void
-  onToggleGroups: (id: string, allow: boolean) => void
-}) {
-  return (
-    <Space direction="column" gap="lg" align="stretch" className="admin-form">
-      <Text size="sm" tone="muted">
-        三种类型使用同一套模板：分区决定内容归到哪一类（应用 / 海报 / 图文），
-        「子分组」开关决定要不要分组。开启后可建分组、分组会出现在侧栏，也可以作为首页卡片预览；
-        关闭后条目按平铺渲染，已有分组里的内容不会丢。
-      </Text>
-
-      {categories.map((category) => (
-        <div className="admin-section-block" key={category.id}>
-          <CategoryRow
-            category={category}
-            onReload={onReload}
-            onDelete={onDelete}
-            onToggleGroups={onToggleGroups}
-          />
-          {category.allowGroups === true && (
-            <>
-              <BlockSelect section={category} onReload={onReload} />
-              <GroupManager section={category} onReload={onReload} />
-            </>
-          )}
-        </div>
-      ))}
-
-      {categories.length === 0 && <Text tone="muted">内容库还没有加载完成。</Text>}
-
-      <CategoryCreator onCreated={onReload} />
-    </Space>
-  )
-}
-
-function CategoryRow({
-  category,
-  onReload,
-  onDelete,
-  onToggleGroups,
-}: {
-  category: CategorySummary
-  onReload: () => void
-  onDelete: (card: CategorySummary) => void
-  onToggleGroups: (id: string, allow: boolean) => void
-}) {
-  const [title, setTitle] = useState(category.title)
-  const [kind, setKind] = useState(category.kind ?? 'apps')
-  const [icon, setIcon] = useState(category.icon ?? '')
-  const [color, setColor] = useState(category.barColor ?? '')
-  const [limit, setLimit] = useState(
-    category.previewLimit === undefined ? '' : String(category.previewLimit),
-  )
-  const [allowGroups, setAllowGroups] = useState(category.allowGroups === true)
-  const [busy, setBusy] = useState(false)
-
-  /** 子分组开关即时保存：切完立刻出现 / 收起分组管理 */
-  const toggleGroups = async (next: boolean) => {
-    setAllowGroups(next)
-    setBusy(true)
-    const result = await updateCategory(category.id, { allowGroups: next })
-    setBusy(false)
-
-    if (!result.ok) {
-      setAllowGroups(!next)
-      toast.error(result.error)
-      return
-    }
-
-    onToggleGroups(category.id, next)
-    toast.success(next ? '已开启子分组' : '已关闭子分组')
-  }
-
-  const save = async () => {
-    setBusy(true)
-    const result = await updateCategory(category.id, {
-      title,
-      kind,
-      icon,
-      barColor: color,
-      previewLimit: limit.trim() === '' ? undefined : Number(limit),
-      allowGroups,
-    })
-    setBusy(false)
-
-    if (!result.ok) {
-      toast.error(result.error)
-      return
-    }
-
-    toast.success(`已保存「${title}」`)
-    onReload()
-  }
-
-  return (
-    <div className="admin-category-row">
-      <Input
-        value={title}
-        placeholder="标题"
-        aria-label={`${category.title} 标题`}
-        onChange={(event) => setTitle(event.target.value)}
-      />
-      <Select
-        options={KIND_OPTIONS}
-        value={kind}
-        onChange={(next) => setKind(next as typeof kind)}
-      />
-      <Input
-        value={icon}
-        placeholder="图标"
-        aria-label={`${category.title} 图标`}
-        onChange={(event) => setIcon(event.target.value)}
-      />
-      <Input
-        value={color}
-        placeholder="#3858f6"
-        aria-label={`${category.title} 色条`}
-        onChange={(event) => setColor(event.target.value)}
-      />
-      <Input
-        type="number"
-        value={limit}
-        placeholder="条数"
-        aria-label={`${category.title} 预览条数`}
-        onChange={(event) => setLimit(event.target.value)}
-      />
-      <div className="admin-toggle">
-        <Switch
-          checked={allowGroups}
-          onChange={(next) => void toggleGroups(next)}
-          label={`${category.title} 允许子分组`}
-        />
-        <Text size="sm" tone="muted">
-          子分组
-        </Text>
-      </div>
-      <Button variant="secondary" size="sm" loading={busy} onClick={save}>
-        保存
-      </Button>
-      <Button
-        variant="ghost"
-        size="sm"
-        className="admin-remove"
-        icon={<Icon name="delete_2_line" />}
-        aria-label="删除"
-        onClick={() => onDelete(category)}
-      />
-    </div>
-  )
-}
-
-// ---------- 首页卡片预览节点 ----------
-
-function BlockSelect({ section, onReload }: { section: CategorySummary; onReload: () => void }) {
-  const options = [
-    { value: section.id, label: '整个分区' },
-    ...(section.groups ?? []).map((group) => ({ value: group.id, label: group.name })),
-  ]
-  const [busy, setBusy] = useState(false)
-
-  const change = async (next: string) => {
-    setBusy(true)
-    const result = await updateCategory(section.id, { blockNodeKey: next })
-    setBusy(false)
-    if (!result.ok) {
-      toast.error(result.error)
-      return
-    }
-    toast.success('首页卡片预览已切换')
-    onReload()
-  }
-
-  return (
-    <div className="admin-block-row">
-      <Text size="sm" tone="muted">
-        首页卡片预览
-      </Text>
-      <div style={{ width: 220 }}>
-        <Select
-          options={options}
-          value={section.block?.nodeKey ?? section.id}
-          onChange={(next) => void change(next)}
-        />
-      </div>
-      {busy && (
-        <Text size="sm" tone="muted">
-          保存中…
-        </Text>
-      )}
-    </div>
-  )
-}
-
-// ---------- 分组（子分类）管理 ----------
-
-function GroupManager({ section, onReload }: { section: CategorySummary; onReload: () => void }) {
-  const groups = section.groups ?? []
-  const [pending, setPending] = useState<CategoryGroupSummary | null>(null)
-  const [busy, setBusy] = useState(false)
-
-  const remove = async () => {
-    if (pending === null) return
-    setBusy(true)
-    const result = await deleteGroup(pending.id)
-    setBusy(false)
-    if (!result.ok) {
-      toast.error(result.error)
-      return
-    }
-    toast.success(`已删除分组「${pending.name}」`)
-    setPending(null)
-    onReload()
-  }
-
-  return (
-    <div className="admin-groups">
-      <Text size="sm" tone="muted">
-        子分组：可改名、控制侧栏显隐；删除会连同组内条目一起删除。
-      </Text>
-
-      {groups.map((group) => (
-        <GroupRow
-          key={group.id}
-          group={group}
-          onReload={onReload}
-          onDelete={() => setPending(group)}
-        />
-      ))}
-
-      <NewGroupRow sectionId={section.id} onReload={onReload} />
-
-      <ConfirmModal
-        open={pending !== null}
-        title={pending === null ? '删除分组' : `删除分组「${pending.name}」？`}
-        description="组内所有条目会一起删除，且不可恢复。"
-        busy={busy}
-        onCancel={() => setPending(null)}
-        onConfirm={() => void remove()}
-      />
-    </div>
-  )
-}
-
-function GroupRow({
-  group,
-  onReload,
-  onDelete,
-}: {
-  group: CategoryGroupSummary
-  onReload: () => void
-  onDelete: () => void
-}) {
-  const [title, setTitle] = useState(group.name)
-  const [visible, setVisible] = useState(group.showInSidebar !== false)
-  const [busy, setBusy] = useState(false)
-
-  const save = async () => {
-    setBusy(true)
-    const result = await updateGroup(group.id, {
-      title,
-      showInSidebar: visible,
-    })
-    setBusy(false)
-    if (!result.ok) {
-      toast.error(result.error)
-      return
-    }
-    toast.success(`已保存分组「${title}」`)
-    onReload()
-  }
-
-  return (
-    <div className="admin-group-row">
-      <Switch
-        checked={visible}
-        onChange={setVisible}
-        label={`侧栏显示 ${group.name}`}
-      />
-      <Input
-        value={title}
-        aria-label={`${group.name} 名称`}
-        onChange={(event) => setTitle(event.target.value)}
-      />
-      <Button variant="secondary" size="sm" loading={busy} onClick={save}>
-        保存
-      </Button>
-      <Button
-        variant="ghost"
-        size="sm"
-        className="admin-remove"
-        icon={<Icon name="delete_2_line" />}
-        aria-label="删除分组"
-        onClick={onDelete}
-      />
-    </div>
-  )
-}
-
-function NewGroupRow({ sectionId, onReload }: { sectionId: string; onReload: () => void }) {
-  const [id, setId] = useState('')
-  const [title, setTitle] = useState('')
-  const [busy, setBusy] = useState(false)
-
-  const submit = async () => {
-    setBusy(true)
-    const result = await createGroup(sectionId, { id: id.trim(), title: title.trim() })
-    setBusy(false)
-    if (!result.ok) {
-      toast.error(result.error)
-      return
-    }
-    toast.success('分组已创建')
-    setId('')
-    setTitle('')
-    onReload()
-  }
-
-  return (
-    <div className="admin-new-group-row">
-      <Input
-        value={id}
-        placeholder="分组标识，如 ui-kit"
-        aria-label="新分组标识"
-        onChange={(event) => setId(event.target.value)}
-      />
-      <Input
-        value={title}
-        placeholder="分组名称，如 设计资源"
-        aria-label="新分组名称"
-        onChange={(event) => setTitle(event.target.value)}
-      />
-      <Button
-        variant="secondary"
-        size="sm"
-        icon={<Icon name="add_line" />}
-        loading={busy}
-        disabled={id.trim() === '' || title.trim() === ''}
-        onClick={submit}
-      >
-        新增分组
-      </Button>
-    </div>
-  )
-}
-
-// ---------- 内容（条目列表 + 新增/编辑弹窗） ----------
-
-type EntryRow = EntrySummary & {
-  groupName?: string
-  sectionId: string
-  groupId?: string
-}
-
-function ContentManager({
-  categories,
-  onReload,
-}: {
-  categories: CategorySummary[]
-  onReload: () => void
-}) {
-  const [sectionId, setSectionId] = useState(categories[0]?.id ?? '')
-  const [dialog, setDialog] = useState<{
-    open: boolean
-    key: string | null
-    location: { sectionId: string; groupId?: string } | null
-  }>({ open: false, key: null, location: null })
-  const [pendingEntry, setPendingEntry] = useState<EntryRow | null>(null)
-  const [deleting, setDeleting] = useState(false)
-
-  const section =
-    categories.find((category) => category.id === sectionId) ?? categories[0]
-
-  useEffect(() => {
-    if (categories.length === 0) return
-    if (!categories.some((category) => category.id === sectionId)) {
-      setSectionId(categories[0].id)
-    }
-  }, [categories, sectionId])
-
-  const entries: EntryRow[] =
-    section === undefined
-      ? []
-      : [
-          ...(section.groups ?? []).flatMap((group) =>
-            (group.items ?? []).map((item) => ({
-              ...item,
-              groupName: group.name,
-              sectionId: section.id,
-              groupId: group.id,
-            })),
-          ),
-          ...(section.items ?? []).map((item) => ({
-            ...item,
-            groupName: undefined,
-            sectionId: section.id,
-          })),
-        ]
-
-  const removeEntry = async () => {
-    if (pendingEntry === null) return
-    setDeleting(true)
-    const result = await deleteItem(pendingEntry.id)
-    setDeleting(false)
-    if (!result.ok) {
-      toast.error(result.error)
-      return
-    }
-    toast.success('条目已删除')
-    setPendingEntry(null)
-    onReload()
-  }
-
-  return (
-    <Space direction="column" gap="lg" align="stretch" className="admin-form">
-      <Text size="sm" tone="muted">
-        新增网址 / 海报 / 图文条目时，选择它挂在哪个分区、哪个分组（应用类必须选分组）；
-        列表里的条目可以点铅笔修改，包括换分区 / 分组。
-      </Text>
-
-      <Space gap="sm" wrap>
-        <div style={{ width: 200 }}>
-          <Select
-            options={categories.map((category) => ({
-              value: category.id,
-              label: category.title,
-            }))}
-            value={section?.id ?? ''}
-            onChange={setSectionId}
-          />
-        </div>
-        <Button
-          icon={<Icon name="add_line" />}
-          onClick={() =>
-            setDialog({
-              open: true,
-              key: null,
-              location: section === undefined ? null : { sectionId: section.id },
-            })
-          }
-        >
-          新增条目
-        </Button>
-      </Space>
-
-      <Space direction="column" gap="sm" align="stretch">
-        <Text size="sm" tone="muted">
-          {section?.title ?? ''} 下已有 {entries.length} 条
-        </Text>
-        {entries.map((entry) => (
-          <div className="admin-entry-row" key={entry.id}>
-            <Text>{entry.name ?? entry.title ?? entry.id}</Text>
-            <Text size="sm" tone="muted">
-              {entry.groupName ?? '直属分区'}
-            </Text>
-            <Button
-              variant="ghost"
-              size="sm"
-              icon={<Icon name="pencil_line" />}
-              aria-label="编辑条目"
-              onClick={() =>
-                setDialog({
-                  open: true,
-                  key: entry.id,
-                  location: { sectionId: entry.sectionId, groupId: entry.groupId },
-                })
-              }
-            />
-            <Button
-              variant="ghost"
-              size="sm"
-              className="admin-remove"
-              icon={<Icon name="delete_2_line" />}
-              aria-label="删除条目"
-              onClick={() => setPendingEntry(entry)}
-            />
-          </div>
-        ))}
-      </Space>
-
-      <EntryDialog
-        open={dialog.open}
-        entryKey={dialog.key}
-        categories={categories}
-        defaultLocation={dialog.location}
-        onClose={() => setDialog({ open: false, key: null, location: null })}
-        onSaved={() => {
-          setDialog({ open: false, key: null, location: null })
-          onReload()
-        }}
-      />
-
-      <ConfirmModal
-        open={pendingEntry !== null}
-        title={
-          pendingEntry === null
-            ? '删除条目'
-            : `删除「${pendingEntry.name ?? pendingEntry.title ?? pendingEntry.id}」？`
-        }
-        description="删除后不可恢复。"
-        busy={deleting}
-        onCancel={() => setPendingEntry(null)}
-        onConfirm={() => void removeEntry()}
-      />
-    </Space>
-  )
-}
-
-type EntryForm = {
-  key: string
-  name: string
-  href: string
-  icon: string
-  description: string
-  cover: string
-  tags: string
-  comment: string
-  body: string
-  badge: string
-  summary: string
-  banner: string
-}
-
-const EMPTY_ENTRY_FORM: EntryForm = {
-  key: '',
-  name: '',
-  href: '',
-  icon: '',
-  description: '',
-  cover: '',
-  tags: '',
-  comment: '',
-  body: '',
-  badge: '',
-  summary: '',
-  banner: '',
-}
-
-function EntryDialog({
-  open,
-  entryKey,
-  categories,
-  defaultLocation,
-  onClose,
-  onSaved,
-}: {
-  open: boolean
-  entryKey: string | null
-  categories: CategorySummary[]
-  defaultLocation: { sectionId: string; groupId?: string } | null
-  onClose: () => void
-  onSaved: () => void
-}) {
-  const editing = entryKey !== null
-  const [loading, setLoading] = useState(false)
-  const [updatedAt, setUpdatedAt] = useState(0)
-  const [sectionId, setSectionId] = useState('')
-  const [groupId, setGroupId] = useState('')
-  const [form, setForm] = useState<EntryForm>(EMPTY_ENTRY_FORM)
-  const [busy, setBusy] = useState(false)
-  const [error, setError] = useState('')
-
-  const section =
-    categories.find((category) => category.id === sectionId) ?? categories[0]
-  const groups = section?.allowGroups === true ? (section.groups ?? []) : []
-
-  // 打开时重置：新建用当前选择，编辑先拉完整条目
-  useEffect(() => {
-    if (!open) return
-
-    setError('')
-    const startSection =
-      defaultLocation?.sectionId ?? categories[0]?.id ?? ''
-    setSectionId(startSection)
-    const startCategory = categories.find((category) => category.id === startSection)
-    setGroupId(
-      defaultLocation?.groupId ??
-        (startCategory?.allowGroups === true ? (startCategory.groups?.[0]?.id ?? '') : ''),
-    )
-
-    if (entryKey === null) {
-      setLoading(false)
-      setUpdatedAt(0)
-      setForm(EMPTY_ENTRY_FORM)
-      return
-    }
-
-    setLoading(true)
-    fetchItem(entryKey).then((result) => {
-      setLoading(false)
-      if (!result.ok) {
-        setError(result.error)
-        return
-      }
-      const entry = result.entry
-      setUpdatedAt(entry.updated_at)
-      setForm({
-        key: entry.key,
-        name: entry.name,
-        href: entry.href,
-        icon: entry.icon,
-        description: entry.description,
-        cover: entry.cover,
-        tags: entry.tags.join('，'),
-        comment: entry.comment,
-        body: entry.body,
-        badge: entry.badge,
-        summary: entry.summary,
-        banner: entry.banner,
-      })
-    })
-    // 只在打开/切换条目时重置，表单输入不应触发重新拉取
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, entryKey])
-
-  // 只有开启「允许子分组」的分区有分组；其余始终是直属分区
-  useEffect(() => {
-    if (section?.allowGroups !== true) {
-      if (groupId !== '') setGroupId('')
-      return
-    }
-    if (groupId !== '' && !groups.some((group) => group.id === groupId)) {
-      setGroupId(groups[0]?.id ?? '')
-    }
-  }, [section, groups, groupId])
-
-  const nodeKey =
-    section === undefined
-      ? ''
-      : section.allowGroups === true && groupId !== ''
-        ? groupId
-        : section.id
-
-  const update = (patch: Partial<EntryForm>) =>
-    setForm((previous) => ({ ...previous, ...patch }))
-
-  const submit = async () => {
-    if (section === undefined || nodeKey === '') {
-      setError('请先选择分区与分组')
-      return
-    }
-    if (!editing && form.key.trim() === '') {
-      setError('标识不能为空')
-      return
-    }
-    if (form.name.trim() === '') {
-      setError('标题不能为空')
-      return
-    }
-
-    setBusy(true)
-    setError('')
-    const item = {
-      name: form.name.trim(),
-      description: form.description,
-      icon: form.icon,
-      tags: form.tags
-        .split(/[，,]/)
-        .map((tag) => tag.trim())
-        .filter(Boolean),
-      badge: form.badge,
-      comment: form.comment,
-      summary: form.summary,
-      body: form.body,
-      cover: form.cover,
-      banner: form.banner,
-      href: form.href,
-      nodeKey,
-    }
-
-    const result =
-      editing && entryKey !== null
-        ? await saveItem(entryKey, updatedAt, item)
-        : await createItem({ key: form.key.trim(), nodeKey, item })
-    setBusy(false)
-
-    if (!result.ok) {
-      setError(result.error)
-      return
-    }
-
-    toast.success(editing ? '条目已保存' : `已添加「${form.name.trim()}」`)
-    onSaved()
-  }
-
-  return (
-    <Modal
-      open={open}
-      onClose={busy ? () => undefined : onClose}
-      title={editing ? '编辑条目' : '新增条目'}
-      size="lg"
-      footer={
-        <Space gap="sm" justify="end">
-          <Button variant="secondary" onClick={onClose}>
-            取消
-          </Button>
-          <Button
-            loading={busy}
-            disabled={loading}
-            icon={<Icon name="check_line" />}
-            onClick={submit}
-          >
-            保存
-          </Button>
-        </Space>
-      }
-    >
-      {loading ? (
-        <Text>正在读取…</Text>
-      ) : (
-        <Space direction="column" gap="md" align="stretch">
-          {error !== '' && (
-            <Notice tone="error" title="操作失败">
-              {error}
-            </Notice>
-          )}
-
-          <Space gap="sm" wrap>
-            <div style={{ width: 200 }}>
-              <Select
-                options={categories.map((category) => ({
-                  value: category.id,
-                  label: category.title,
-                }))}
-                value={section?.id ?? ''}
-                onChange={setSectionId}
-              />
-            </div>
-            {section?.allowGroups === true && (
-              <div style={{ width: 240 }}>
-                <Select
-                  options={[
-                    { value: '', label: '直属分区（不分组）' },
-                    ...groups.map((group) => ({
-                      value: group.id,
-                      label: group.name,
-                    })),
-                  ]}
-                  value={groupId}
-                  onChange={setGroupId}
-                />
-              </div>
-            )}
-          </Space>
-
-          <div className="admin-content-form">
-            {!editing && (
-              <Input
-                value={form.key}
-                placeholder="标识，如 my-site"
-                aria-label="条目标识"
-                onChange={(event) => update({ key: event.target.value })}
-              />
-            )}
-            <Input
-              value={form.name}
-              placeholder="标题，如 我的站点"
-              aria-label="条目标题"
-              onChange={(event) => update({ name: event.target.value })}
-            />
-            <Input
-              value={form.href}
-              placeholder="跳转地址，如 https://example.com 或 /project/"
-              aria-label="跳转地址"
-              onChange={(event) => update({ href: event.target.value })}
-            />
-            <Input
-              value={form.icon}
-              placeholder="字符图标，如 G"
-              aria-label="图标"
-              onChange={(event) => update({ icon: event.target.value })}
-            />
-            <Input
-              value={form.description}
-              placeholder="一句话简介"
-              aria-label="简介"
-              onChange={(event) => update({ description: event.target.value })}
-            />
-            <Input
-              value={form.cover}
-              placeholder="封面 / 海报图片地址"
-              aria-label="封面地址"
-              onChange={(event) => update({ cover: event.target.value })}
-            />
-            <Input
-              value={form.tags}
-              placeholder="标签，用逗号分隔"
-              aria-label="标签"
-              onChange={(event) => update({ tags: event.target.value })}
-            />
-            <Input
-              value={form.comment}
-              placeholder="一句话评价"
-              aria-label="一句话评价"
-              onChange={(event) => update({ comment: event.target.value })}
-            />
-            <div className="admin-col-span">
-              <Textarea
-                rows={4}
-                value={form.body}
-                placeholder="正文（图文 / Markdown），可留空"
-                aria-label="正文"
-                onChange={(event) => update({ body: event.target.value })}
-              />
-            </div>
-          </div>
-        </Space>
-      )}
-    </Modal>
-  )
-}
-
-
-// ---------- 通用删除确认（页面级） ----------
-
-function ConfirmModal({
-  open,
-  title,
-  description,
-  busy,
-  onCancel,
-  onConfirm,
-}: {
-  open: boolean
-  title: string
-  description: string
-  busy: boolean
-  onCancel: () => void
-  onConfirm: () => void
-}) {
-  return (
-    <Modal
-      open={open}
-      onClose={busy ? () => undefined : onCancel}
-      title={title}
-      size="sm"
-      footer={
-        <Space gap="sm" justify="end">
-          <Button variant="secondary" disabled={busy} onClick={onCancel}>
-            取消
-          </Button>
-          <Button
-            variant="danger"
-            loading={busy}
-            icon={<Icon name="delete_2_line" />}
-            onClick={onConfirm}
-          >
-            删除
-          </Button>
-        </Space>
-      }
-    >
-      <Text>{description}</Text>
-    </Modal>
-  )
-}
-
-// ---------- 资料 ----------
-
-function ProfileForm({
-  value,
-  onChange,
-}: {
-  value: ProfileSettings
-  onChange: (profile: ProfileSettings) => void
-}) {
-  const update = (patch: Partial<ProfileSettings>) => onChange({ ...value, ...patch })
-
-  return (
-    <Space direction="column" gap="lg" align="stretch" className="admin-form">
-      <FormField label="头像地址" htmlFor="profile-avatar" hint="留空则用图标占位；支持 https 图片地址">
-        <Input
-          id="profile-avatar"
-          value={value.avatar}
-          placeholder="https://…"
-          onChange={(event) => update({ avatar: event.target.value })}
-        />
-      </FormField>
-
-      <FormField label="名称" htmlFor="profile-name" required>
-        <Input
-          id="profile-name"
-          value={value.name}
-          onChange={(event) => update({ name: event.target.value })}
-        />
-      </FormField>
-
-      <FormField label="角色" htmlFor="profile-role">
-        <Input
-          id="profile-role"
-          value={value.role}
-          onChange={(event) => update({ role: event.target.value })}
-        />
-      </FormField>
-
-      <FormField label="简介" htmlFor="profile-description">
-        <Textarea
-          id="profile-description"
-          rows={3}
-          value={value.description}
-          onChange={(event) => update({ description: event.target.value })}
-        />
-      </FormField>
-
-      <FormField label="位置" htmlFor="profile-location" hint="直接显示在资料卡底部，如「IP属地：局域网」">
-        <Input
-          id="profile-location"
-          value={value.location}
-          onChange={(event) => update({ location: event.target.value })}
-        />
-      </FormField>
-    </Space>
-  )
-}
-
-// ---------- 系统 ----------
-
-function SystemPanel() {
-  const [current, setCurrent] = useState('')
-  const [next, setNext] = useState('')
-  const [busy, setBusy] = useState(false)
-  const [message, setMessage] = useState<{ tone: 'info' | 'error'; text: string } | null>(null)
-
-  const change = async () => {
-    setBusy(true)
-    setMessage(null)
-    const result = await changePassword(current, next)
-    setBusy(false)
-    if (!result.ok) {
-      setMessage({ tone: 'error', text: result.error })
-      return
-    }
-    setMessage({ tone: 'info', text: '密码已修改，所有会话已失效，请重新登录' })
-    setCurrent('')
-    setNext('')
-  }
-
-  return (
-    <Space direction="column" gap="lg" align="stretch" className="admin-form">
-      <FormField label="当前密码" htmlFor="current-password">
-        <PasswordInput
-          id="current-password"
-          autoComplete="current-password"
-          value={current}
-          onChange={(event) => setCurrent(event.target.value)}
-        />
-      </FormField>
-      <FormField label="新密码" htmlFor="next-password" hint="至少 8 位">
-        <PasswordInput
-          id="next-password"
-          autoComplete="new-password"
-          value={next}
-          onChange={(event) => setNext(event.target.value)}
-        />
-      </FormField>
-      {message !== null && (
-        <Notice tone={message.tone} title={message.tone === 'info' ? '已修改' : '修改失败'}>
-          {message.text}
-        </Notice>
-      )}
-      <Button
-        variant="secondary"
-        loading={busy}
-        icon={<Icon name="key_2_line" />}
-        onClick={change}
-      >
-        修改密码
-      </Button>
-
-      <Text size="sm" tone="muted">
-        备份：下载一份 SQLite 快照（VACUUM INTO 生成，一致性副本）。恢复时停掉服务，用它替换
-        data/stash.db 再启动。
-      </Text>
-      <Button
-        icon={<Icon name="download_line" />}
-        onClick={() => window.location.assign('/api/backup')}
-      >
-        下载备份
-      </Button>
-    </Space>
-  )
-}
-
-// ---------- 行内按钮组 ----------
-function IconButtonGroup({
-  onUp,
-  onDown,
-  onRemove,
-  disabledRemove = false,
-}: {
-  onUp: () => void
-  onDown: () => void
-  onRemove?: (() => void) | undefined
-  /** 显示一个不可点的删除按钮（灰色），用于「本地服务」这类受保护项 */
-  disabledRemove?: boolean
-}) {
-  return (
-    <Space gap="xs" className="admin-item-actions">
-      <Button variant="ghost" size="sm" icon={<Icon name="arrow_up_line" />} onClick={onUp} aria-label="上移" />
-      <Button variant="ghost" size="sm" icon={<Icon name="arrow_down_line" />} onClick={onDown} aria-label="下移" />
-      {onRemove !== undefined ? (
-        <Button
-          variant="ghost"
-          size="sm"
-          className="admin-remove"
-          icon={<Icon name="delete_2_line" />}
-          onClick={onRemove}
-          aria-label="删除"
-        />
-      ) : disabledRemove ? (
-        <Button
-          variant="ghost"
-          size="sm"
-          className="admin-remove"
-          icon={<Icon name="delete_2_line" />}
-          disabled
-          aria-label="不可删除"
-          title="本地服务不能删除"
-        />
-      ) : null}
-    </Space>
-  )
-}
diff --git a/stash-web/src/components/header/SiteHeader.tsx b/stash-web/src/components/header/SiteHeader.tsx
index a8b28c3..33acafa 100644
--- a/stash-web/src/components/header/SiteHeader.tsx
+++ b/stash-web/src/components/header/SiteHeader.tsx
@@ -1,5 +1,4 @@
-import { useEffect, useRef } from 'react'
-import { Icon, IconButton, Tag } from '@stash/ui'
+import { Brand, Icon, IconButton, Tag, Ticker } from '@stash/ui'
 import {
   fillHeaderText,
   type HeaderItem,
@@ -9,8 +8,8 @@ import {
 
 /**
  * 顶部栏：左品牌、中间滚动信息（可在 /admin 配置）、右侧操作图标。
- * 品牌（logo / 文字）与操作图标是否出现，都来自「页头」Tab 的站点设置。
- * 外层 <header> 由 Layout 提供，这里只渲染栏内的内容。
+ * 品牌与操作图标是否出现，都来自「页头」Tab 的站点设置。
+ * 外壳（品牌、跑马灯）都用组件库，这里只拼内容。
  */
 type SiteHeaderProps = {
   projectCount: number
@@ -42,40 +41,6 @@ const tagTone: Record<SettingsTone, 'neutral' | 'primary' | 'success'> = {
   success: 'success',
 }
 
-type InfoGroupProps = {
-  items: HeaderItem[]
-  projectCount: number
-  sampleProject?: string
-  live: boolean
-  'aria-hidden'?: boolean
-}
-
-/** 运行信息：同一份内容渲染三遍，轨道平移 1/3 形成无缝滚动 */
-function InfoGroup({
-  items,
-  projectCount,
-  sampleProject,
-  live,
-  'aria-hidden': ariaHidden,
-}: InfoGroupProps) {
-  const context = { count: projectCount, project: sampleProject, live }
-
-  return (
-    <span className="header-ticker-group" aria-hidden={ariaHidden}>
-      {items.map((item, index) => (
-        <span className="header-ticker-item" key={`${index}-${item.text}`}>
-          {item.tag !== undefined && item.tag !== null && item.tag !== '' && (
-            <Tag tone={tagTone[item.tone]} shape="rounded">
-              {item.tag}
-            </Tag>
-          )}
-          {fillHeaderText(item.text, context)}
-        </span>
-      ))}
-    </span>
-  )
-}
-
 export function SiteHeader({
   projectCount,
   sampleProject,
@@ -92,79 +57,30 @@ export function SiteHeader({
   onLogout,
   onSettings,
 }: SiteHeaderProps) {
-  const brandName = site.brand.name.trim()
-  const brandMark = site.brand.mark.trim() || brandName.slice(0, 1) || 'S'
-  const brandLogo = site.brand.logo.trim()
-
-  // 跑马灯的位移要正好等于「一组」的宽度，循环才接得上。
-  // CSS 里的 -100%/3 会按轨道的 border-box（只有一组宽）算，导致提前 2/3 回跳，
-  // 所以这里量一次真实宽度写进 --ticker-shift。
-  const trackRef = useRef<HTMLDivElement>(null)
-  const tickerKey = `${headerItems.map((item) => `${item.tag ?? ''}:${item.text}`).join('|')}@${headerSpeed}`
-
-  useEffect(() => {
-    const track = trackRef.current
-    if (track === null) return
-
-    const sync = () => {
-      const group = track.firstElementChild
-      if (!(group instanceof HTMLElement)) return
-      track.style.setProperty('--ticker-shift', `${-group.getBoundingClientRect().width}px`)
-    }
-
-    sync()
-    const observer = new ResizeObserver(sync)
-    observer.observe(track)
-    window.addEventListener('resize', sync)
-    return () => {
-      observer.disconnect()
-      window.removeEventListener('resize', sync)
-    }
-  }, [tickerKey])
+  const context = { count: projectCount, project: sampleProject, live }
 
   return (
     <div className="site-header-inner">
-      <a className="site-brand" href="/" aria-label={`${brandName || '首页'} 首页`}>
-        {brandLogo !== '' ? (
-          <img className="site-brand-logo" src={brandLogo} alt="" />
-        ) : (
-          <span className="site-brand-mark" aria-hidden="true">
-            {brandMark}
-          </span>
-        )}
-        {brandName !== '' && <span className="site-brand-name">{brandName}</span>}
-      </a>
+      <Brand
+        href="/"
+        name={site.brand.name}
+        mark={site.brand.mark}
+        logo={site.brand.logo}
+      />
 
       {headerEnabled && (
-        <div className="header-ticker" role="status" aria-label="运行状态">
-          <div
-            ref={trackRef}
-            className="header-ticker-track"
-            style={{ animationDuration: `${headerSpeed}s` }}
-          >
-            <InfoGroup
-              items={headerItems}
-              projectCount={projectCount}
-              sampleProject={sampleProject}
-              live={live}
-            />
-            <InfoGroup
-              items={headerItems}
-              projectCount={projectCount}
-              sampleProject={sampleProject}
-              live={live}
-              // 后两份只用于视觉无缝，读屏忽略
-              aria-hidden
-            />
-            <InfoGroup
-              items={headerItems}
-              projectCount={projectCount}
-              sampleProject={sampleProject}
-              live={live}
-              aria-hidden
-            />
-          </div>
-        </div>
+        <Ticker speed={headerSpeed} label="运行状态">
+          {headerItems.map((item, index) => (
+            <span className="header-ticker-item" key={`${index}-${item.text}`}>
+              {item.tag !== undefined && item.tag !== null && item.tag !== '' && (
+                <Tag tone={tagTone[item.tone]} shape="rounded">
+                  {item.tag}
+                </Tag>
+              )}
+              {fillHeaderText(item.text, context)}
+            </span>
+          ))}
+        </Ticker>
       )}
 
       <div className="header-actions">
diff --git a/stash-web/src/components/search/SearchBar.tsx b/stash-web/src/components/search/SearchBar.tsx
deleted file mode 100644
index 66f3fde..0000000
--- a/stash-web/src/components/search/SearchBar.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Input } from '@stash/ui'
-import { useEffect, type RefObject } from 'react'
-
-/**
- * 全局搜索框：吸在内容区顶部。
- * 支持 Ctrl/Cmd+K 聚焦、Esc 清空，输入内容由父组件接管过滤逻辑。
- */
-type SearchBarProps = {
-  value: string
-  onChange: (value: string) => void
-  inputRef: RefObject<HTMLInputElement | null>
-}
-
-export function SearchBar({ value, onChange, inputRef }: SearchBarProps) {
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
-        event.preventDefault()
-        inputRef.current?.focus()
-        inputRef.current?.select()
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [inputRef])
-
-  return (
-    <div className="search-row">
-      <Input
-        inputRef={inputRef}
-        size="lg"
-        icon="search_3_line"
-        value={value}
-        placeholder="搜索本地项目…"
-        aria-label="搜索本地项目"
-        clearable
-        onClear={() => onChange('')}
-        spellCheck={false}
-        onChange={(event) => onChange(event.target.value)}
-        onKeyDown={(event) => {
-          if (event.key === 'Escape') onChange('')
-        }}
-      />
-    </div>
-  )
-}