CNWei/stash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 首页管理下顺序改为 页头 / 侧边栏 / 内容卡片，默认展开
- 资料 -> 资料管理、系统 -> 系统管理
- 页头面板内用水平页签分为 站点信息 / 操作工具 / 滚动信息
- 滚动信息页列出可用通配符 {count} / {project} / {status} 及含义
This commit is contained in:
CNWei
2026-11-01 20:36:11 +08:00
parent 10b653e30f
commit 0375669a6e
2 changed files with 260 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stash-web/src/App.css
+22
View File
@@ -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
+238 -195
View File
@@ -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>
)
}