feat(admin): 页头拆成三个子页签，导航顺序与命名调整

- 首页管理下顺序改为 页头 / 侧边栏 / 内容卡片，默认展开
- 资料 -> 资料管理、系统 -> 系统管理
- 页头面板内用水平页签分为 站点信息 / 操作工具 / 滚动信息
- 滚动信息页列出可用通配符 {count} / {project} / {status} 及含义

stash-web/src/App.css

@@ -53,6 +53,28 @@
   padding: 0 var(--su-space-5);
 }
 
+/* 通配符说明：两列小表 */
+.ticker-vars {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--su-space-2) var(--su-space-4);
+  align-items: center;
+  padding: var(--su-space-3);
+  border: 1px solid var(--su-border);
+  border-radius: var(--su-radius-md);
+  background-color: var(--su-bg-subtle);
+  font-size: var(--su-font-size-sm);
+}
+
+.ticker-vars code {
+  padding: 0 var(--su-space-2);
+  border-radius: var(--su-radius-xs);
+  background-color: var(--su-bg-card);
+  color: var(--su-color-primary);
+  font-family: var(--su-font-mono);
+  justify-self: start;
+}
+
 /* 后台：左侧导航 + 右侧内容 */
 .admin-shell {
   display: grid;

stash-web/src/components/admin/AdminNext.tsx

@@ -14,6 +14,7 @@ import {
   Select,
   Space,
   Switch,
+  Tabs,
   Tag,
   Text,
   Textarea,
@@ -81,13 +82,13 @@ const ADMIN_NAV: MenuItem[] = [
     key: 'home',
     label: '首页管理',
     children: [
+      { key: 'home-header', label: '页头' },
       { key: 'home-sidebar', label: '侧边栏' },
       { key: 'home-cards', label: '内容卡片' },
-      { key: 'home-header', label: '页头' },
     ],
   },
-  { key: 'profile', label: '资料' },
-  { key: 'system', label: '系统' },
+  { key: 'profile', label: '资料管理' },
+  { key: 'system', label: '系统管理' },
 ]
 
 const FORMAT_OPTIONS = [
@@ -308,6 +309,7 @@ export function AdminNext() {
                   activeKey={tab}
                   onSelect={(key) => setTab(key as TabKey)}
                   itemHeight={40}
+                  defaultOpenKeys={['home']}
                 />
               </nav>
 
@@ -1900,11 +1902,23 @@ function HeaderPanel({
   site: SiteSettings['site']
   onChangeSite: (site: SiteSettings['site']) => void
 }) {
+  const [tab, setTab] = useState<'site' | 'actions' | 'ticker'>('site')
+
   return (
     <Space direction="column" gap="lg" align="stretch" className="admin-form">
-      <Text size="sm" strong>
-        站点信息
-      </Text>
+      <Tabs
+        className="admin-tabs"
+        items={[
+          { key: 'site', label: '站点信息' },
+          { key: 'actions', label: '操作工具' },
+          { key: 'ticker', label: '滚动信息' },
+        ]}
+        activeKey={tab}
+        onChange={(key) => setTab(key as 'site' | 'actions' | 'ticker')}
+      />
+
+      {tab === 'site' && (
+        <Space direction="column" gap="lg" align="stretch">
           <FormField label="页面标题" htmlFor="site-title" hint="浏览器标签页上的文字">
             <Input
               id="site-title"
@@ -1913,7 +1927,11 @@ function HeaderPanel({
               onChange={(event) => onChangeSite({ ...site, title: event.target.value })}
             />
           </FormField>
-      <FormField label="Favicon 地址" htmlFor="site-favicon" hint="留空使用内置图标；支持 .svg / .png 或完整 URL">
+          <FormField
+            label="Favicon 地址"
+            htmlFor="site-favicon"
+            hint="留空使用内置图标；支持 .svg / .png 或完整 URL"
+          >
             <Input
               id="site-favicon"
               value={site.favicon}
@@ -1933,11 +1951,7 @@ function HeaderPanel({
             首页 Logo
           </Text>
           <div className="brand-preview">
-        <Brand
-          name={site.brand.name}
-          mark={site.brand.mark}
-          logo={site.brand.logo}
-        />
+            <Brand name={site.brand.name} mark={site.brand.mark} logo={site.brand.logo} />
           </div>
           <FormField label="Logo 图片地址" htmlFor="site-logo" hint="留空则用右侧的首字圆形标记">
             <Input
@@ -1971,9 +1985,13 @@ function HeaderPanel({
               />
             </FormField>
           </div>
+        </Space>
+      )}
 
-      <Text size="sm" strong>
-        操作工具
+      {tab === 'actions' && (
+        <Space direction="column" gap="md" align="stretch">
+          <Text size="sm" tone="muted">
+            说明：这里控制页头右侧显示哪些图标按钮；关掉的按钮不再出现，也不影响其它页面。
           </Text>
           <div className="sidebar-toggle-row">
             <Text>明暗切换</Text>
@@ -2015,10 +2033,11 @@ function HeaderPanel({
               label="页头显示登录或退出按钮"
             />
           </div>
+        </Space>
+      )}
 
-      <Text size="sm" strong>
-        滚动信息
-      </Text>
+      {tab === 'ticker' && (
+        <Space direction="column" gap="md" align="stretch">
           <div className="sidebar-toggle-row">
             <Text>显示页头滚动信息</Text>
             <Switch
@@ -2038,6 +2057,25 @@ function HeaderPanel({
               }}
             />
           </FormField>
+
+          <Text size="sm" strong>
+            可用通配符
+          </Text>
+          <Text size="sm" tone="muted">
+            说明：下面这些占位符写在「信息文本」里，渲染时会替换成实时值；写别的花括号不会替换。
+          </Text>
+          <div className="ticker-vars">
+            <code>{'{count}'}</code>
+            <span>本地应用数量</span>
+            <code>{'{project}'}</code>
+            <span>第一个本地项目的名字（没有项目时显示 —）</span>
+            <code>{'{status}'}</code>
+            <span>实时同步状态：实时同步已连接 / 等待服务连接</span>
+          </div>
+
+          <Text size="sm" strong>
+            信息条目
+          </Text>
           {value.items.map((item, index) => (
             <div className="admin-item-row" key={index}>
               <Input
@@ -2086,7 +2124,10 @@ function HeaderPanel({
                 icon={<Icon name="delete_2_line" />}
                 aria-label="删除这一条"
                 onClick={() =>
-              onChange({ ...value, items: value.items.filter((_, current) => current !== index) })
+                  onChange({
+                    ...value,
+                    items: value.items.filter((_, current) => current !== index),
+                  })
                 }
               />
             </div>
@@ -2101,6 +2142,8 @@ function HeaderPanel({
             添加一条
           </Button>
         </Space>
+      )}
+    </Space>
   )
 }