From 0375669a6e18c6d866a29fcc896a06b54bba76a1 Mon Sep 17 00:00:00 2001
From: CNWei <t6g888@163.com>
Date: Sun, 1 Nov 2026 20:36:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin):=20=E9=A1=B5=E5=A4=B4=E6=8B=86?=
 =?UTF-8?q?=E6=88=90=E4=B8=89=E4=B8=AA=E5=AD=90=E9=A1=B5=E7=AD=BE=EF=BC=8C?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E9=A1=BA=E5=BA=8F=E4=B8=8E=E5=91=BD=E5=90=8D?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 首页管理下顺序改为 页头 / 侧边栏 / 内容卡片，默认展开
- 资料 -> 资料管理、系统 -> 系统管理
- 页头面板内用水平页签分为 站点信息 / 操作工具 / 滚动信息
- 滚动信息页列出可用通配符 {count} / {project} / {status} 及含义
---
 stash-web/src/App.css                        |  22 +
 stash-web/src/components/admin/AdminNext.tsx | 433 ++++++++++---------
 2 files changed, 260 insertions(+), 195 deletions(-)

diff --git a/stash-web/src/App.css b/stash-web/src/App.css
index f287654..129fcd4 100644
--- a/stash-web/src/App.css
+++ b/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;
diff --git a/stash-web/src/components/admin/AdminNext.tsx b/stash-web/src/components/admin/AdminNext.tsx
index 394e72c..71f5a96 100644
--- a/stash-web/src/components/admin/AdminNext.tsx
+++ b/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,206 +1902,247 @@ 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>
-      <FormField label="页面标题" htmlFor="site-title" hint="浏览器标签页上的文字">
-        <Input
-          id="site-title"
-          value={site.title}
-          placeholder="Stash · 本地应用工作区"
-          onChange={(event) => onChangeSite({ ...site, title: event.target.value })}
-        />
-      </FormField>
-      <FormField label="Favicon 地址" htmlFor="site-favicon" hint="留空使用内置图标；支持 .svg / .png 或完整 URL">
-        <Input
-          id="site-favicon"
-          value={site.favicon}
-          placeholder="/favicon.svg"
-          onChange={(event) => onChangeSite({ ...site, favicon: event.target.value })}
-        />
-      </FormField>
-      <FormField label="配色" hint="深色由组件库的令牌块接管，页面与组件都不用改">
-        <Select
-          options={THEME_SELECT}
-          value={site.theme}
-          onChange={(theme) => onChangeSite({ ...site, theme: theme as SiteTheme })}
-        />
-      </FormField>
+      <Tabs
+        className="admin-tabs"
+        items={[
+          { key: 'site', label: '站点信息' },
+          { key: 'actions', label: '操作工具' },
+          { key: 'ticker', label: '滚动信息' },
+        ]}
+        activeKey={tab}
+        onChange={(key) => setTab(key as 'site' | 'actions' | 'ticker')}
+      />
 
-      <Text size="sm" strong>
-        首页 Logo
-      </Text>
-      <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
-          id="site-logo"
-          value={site.brand.logo}
-          placeholder="https://… 或 /logo.svg"
-          onChange={(event) =>
-            onChangeSite({ ...site, brand: { ...site.brand, logo: event.target.value } })
-          }
-        />
-      </FormField>
-      <div className="admin-row">
-        <FormField label="品牌文字" htmlFor="site-brand-name" hint="可留空只显示 logo">
-          <Input
-            id="site-brand-name"
-            value={site.brand.name}
-            placeholder="STASH"
-            onChange={(event) =>
-              onChangeSite({ ...site, brand: { ...site.brand, name: event.target.value } })
-            }
-          />
-        </FormField>
-        <FormField label="首字标记" htmlFor="site-brand-mark" hint="1–4 个字">
-          <Input
-            id="site-brand-mark"
-            value={site.brand.mark}
-            placeholder="S"
-            onChange={(event) =>
-              onChangeSite({ ...site, brand: { ...site.brand, mark: event.target.value } })
-            }
-          />
-        </FormField>
-      </div>
+      {tab === 'site' && (
+        <Space direction="column" gap="lg" align="stretch">
+          <FormField label="页面标题" htmlFor="site-title" hint="浏览器标签页上的文字">
+            <Input
+              id="site-title"
+              value={site.title}
+              placeholder="Stash · 本地应用工作区"
+              onChange={(event) => onChangeSite({ ...site, title: event.target.value })}
+            />
+          </FormField>
+          <FormField
+            label="Favicon 地址"
+            htmlFor="site-favicon"
+            hint="留空使用内置图标；支持 .svg / .png 或完整 URL"
+          >
+            <Input
+              id="site-favicon"
+              value={site.favicon}
+              placeholder="/favicon.svg"
+              onChange={(event) => onChangeSite({ ...site, favicon: event.target.value })}
+            />
+          </FormField>
+          <FormField label="配色" hint="深色由组件库的令牌块接管，页面与组件都不用改">
+            <Select
+              options={THEME_SELECT}
+              value={site.theme}
+              onChange={(theme) => onChangeSite({ ...site, theme: theme as SiteTheme })}
+            />
+          </FormField>
 
-      <Text size="sm" strong>
-        操作工具
-      </Text>
-      <div className="sidebar-toggle-row">
-        <Text>明暗切换</Text>
-        <Switch
-          checked={site.actions.theme}
-          onChange={(next) =>
-            onChangeSite({ ...site, actions: { ...site.actions, theme: next } })
-          }
-          label="页头显示明暗切换按钮"
-        />
-      </div>
-      <div className="sidebar-toggle-row">
-        <Text>刷新</Text>
-        <Switch
-          checked={site.actions.refresh}
-          onChange={(next) =>
-            onChangeSite({ ...site, actions: { ...site.actions, refresh: next } })
-          }
-          label="页头显示刷新按钮"
-        />
-      </div>
-      <div className="sidebar-toggle-row">
-        <Text>站点设置</Text>
-        <Switch
-          checked={site.actions.settings}
-          onChange={(next) =>
-            onChangeSite({ ...site, actions: { ...site.actions, settings: next } })
-          }
-          label="页头显示站点设置按钮"
-        />
-      </div>
-      <div className="sidebar-toggle-row">
-        <Text>登录 / 退出</Text>
-        <Switch
-          checked={site.actions.session}
-          onChange={(next) =>
-            onChangeSite({ ...site, actions: { ...site.actions, session: next } })
-          }
-          label="页头显示登录或退出按钮"
-        />
-      </div>
+          <Text size="sm" strong>
+            首页 Logo
+          </Text>
+          <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
+              id="site-logo"
+              value={site.brand.logo}
+              placeholder="https://… 或 /logo.svg"
+              onChange={(event) =>
+                onChangeSite({ ...site, brand: { ...site.brand, logo: event.target.value } })
+              }
+            />
+          </FormField>
+          <div className="admin-row">
+            <FormField label="品牌文字" htmlFor="site-brand-name" hint="可留空只显示 logo">
+              <Input
+                id="site-brand-name"
+                value={site.brand.name}
+                placeholder="STASH"
+                onChange={(event) =>
+                  onChangeSite({ ...site, brand: { ...site.brand, name: event.target.value } })
+                }
+              />
+            </FormField>
+            <FormField label="首字标记" htmlFor="site-brand-mark" hint="1–4 个字">
+              <Input
+                id="site-brand-mark"
+                value={site.brand.mark}
+                placeholder="S"
+                onChange={(event) =>
+                  onChangeSite({ ...site, brand: { ...site.brand, mark: event.target.value } })
+                }
+              />
+            </FormField>
+          </div>
+        </Space>
+      )}
 
-      <Text size="sm" strong>
-        滚动信息
-      </Text>
-      <div className="sidebar-toggle-row">
-        <Text>显示页头滚动信息</Text>
-        <Switch
-          checked={value.enabled}
-          onChange={(enabled) => onChange({ ...value, enabled })}
-          label="显示页头滚动信息"
-        />
-      </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>
-      {value.items.map((item, index) => (
-        <div className="admin-item-row" key={index}>
-          <Input
-            value={item.text}
-            placeholder="信息文本"
-            aria-label="信息文本"
-            onChange={(event) =>
-              onChange({
-                ...value,
-                items: value.items.map((current, currentIndex) =>
-                  currentIndex === index ? { ...current, text: event.target.value } : current,
-                ),
-              })
-            }
-          />
-          <Input
-            value={item.tag ?? ''}
-            placeholder="标签"
-            aria-label="标签"
-            onChange={(event) =>
-              onChange({
-                ...value,
-                items: value.items.map((current, currentIndex) =>
-                  currentIndex === index ? { ...current, tag: event.target.value } : current,
-                ),
-              })
-            }
-          />
-          <Select
-            options={TONE_SELECT}
-            value={item.tone}
-            onChange={(tone) =>
-              onChange({
-                ...value,
-                items: value.items.map((current, currentIndex) =>
-                  currentIndex === index
-                    ? { ...current, tone: tone as SettingsTone }
-                    : current,
-                ),
-              })
-            }
-          />
+      {tab === 'actions' && (
+        <Space direction="column" gap="md" align="stretch">
+          <Text size="sm" tone="muted">
+            说明：这里控制页头右侧显示哪些图标按钮；关掉的按钮不再出现，也不影响其它页面。
+          </Text>
+          <div className="sidebar-toggle-row">
+            <Text>明暗切换</Text>
+            <Switch
+              checked={site.actions.theme}
+              onChange={(next) =>
+                onChangeSite({ ...site, actions: { ...site.actions, theme: next } })
+              }
+              label="页头显示明暗切换按钮"
+            />
+          </div>
+          <div className="sidebar-toggle-row">
+            <Text>刷新</Text>
+            <Switch
+              checked={site.actions.refresh}
+              onChange={(next) =>
+                onChangeSite({ ...site, actions: { ...site.actions, refresh: next } })
+              }
+              label="页头显示刷新按钮"
+            />
+          </div>
+          <div className="sidebar-toggle-row">
+            <Text>站点设置</Text>
+            <Switch
+              checked={site.actions.settings}
+              onChange={(next) =>
+                onChangeSite({ ...site, actions: { ...site.actions, settings: next } })
+              }
+              label="页头显示站点设置按钮"
+            />
+          </div>
+          <div className="sidebar-toggle-row">
+            <Text>登录 / 退出</Text>
+            <Switch
+              checked={site.actions.session}
+              onChange={(next) =>
+                onChangeSite({ ...site, actions: { ...site.actions, session: next } })
+              }
+              label="页头显示登录或退出按钮"
+            />
+          </div>
+        </Space>
+      )}
+
+      {tab === 'ticker' && (
+        <Space direction="column" gap="md" align="stretch">
+          <div className="sidebar-toggle-row">
+            <Text>显示页头滚动信息</Text>
+            <Switch
+              checked={value.enabled}
+              onChange={(enabled) => onChange({ ...value, enabled })}
+              label="显示页头滚动信息"
+            />
+          </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>
+
+          <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
+                value={item.text}
+                placeholder="信息文本"
+                aria-label="信息文本"
+                onChange={(event) =>
+                  onChange({
+                    ...value,
+                    items: value.items.map((current, currentIndex) =>
+                      currentIndex === index ? { ...current, text: event.target.value } : current,
+                    ),
+                  })
+                }
+              />
+              <Input
+                value={item.tag ?? ''}
+                placeholder="标签"
+                aria-label="标签"
+                onChange={(event) =>
+                  onChange({
+                    ...value,
+                    items: value.items.map((current, currentIndex) =>
+                      currentIndex === index ? { ...current, tag: event.target.value } : current,
+                    ),
+                  })
+                }
+              />
+              <Select
+                options={TONE_SELECT}
+                value={item.tone}
+                onChange={(tone) =>
+                  onChange({
+                    ...value,
+                    items: value.items.map((current, currentIndex) =>
+                      currentIndex === index
+                        ? { ...current, tone: tone as SettingsTone }
+                        : current,
+                    ),
+                  })
+                }
+              />
+              <Button
+                variant="ghost"
+                size="sm"
+                icon={<Icon name="delete_2_line" />}
+                aria-label="删除这一条"
+                onClick={() =>
+                  onChange({
+                    ...value,
+                    items: value.items.filter((_, current) => current !== index),
+                  })
+                }
+              />
+            </div>
+          ))}
           <Button
-            variant="ghost"
-            size="sm"
-            icon={<Icon name="delete_2_line" />}
-            aria-label="删除这一条"
+            variant="secondary"
+            icon={<Icon name="add_line" />}
             onClick={() =>
-              onChange({ ...value, items: value.items.filter((_, current) => current !== index) })
+              onChange({ ...value, items: [...value.items, { text: '', tag: '', tone: 'plain' }] })
             }
-          />
-        </div>
-      ))}
-      <Button
-        variant="secondary"
-        icon={<Icon name="add_line" />}
-        onClick={() =>
-          onChange({ ...value, items: [...value.items, { text: '', tag: '', tone: 'plain' }] })
-        }
-      >
-        添加一条
-      </Button>
+          >
+            添加一条
+          </Button>
+        </Space>
+      )}
     </Space>
   )
 }