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

Revert "style(admin): 统一标题层级与页面排版"

Browse Source 
This reverts commit b1f7589538.
This commit is contained in:
CNWei
2026-11-02 19:54:36 +08:00
parent b1f7589538
commit bbfbc77b30
2 changed files with 54 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stash-web/src/App.css
+1 -62
View File
@@ -787,67 +787,7 @@
}
.admin-form {
margin-top: 0;
}
.admin-form-narrow {
max-width: 820px;
}
/* 每个后台页面统一的标题区 */
.admin-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--su-space-5);
padding-bottom: var(--su-space-4);
border-bottom: 1px solid var(--su-border);
margin-bottom: var(--su-space-2);
}
.admin-panel-heading {
min-width: 0;
}
.admin-panel-title {
margin: 0;
color: var(--su-text-main);
font-size: 20px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
}
.admin-panel-desc {
max-width: 760px;
margin: var(--su-space-2) 0 0;
color: var(--su-text-muted);
font-size: var(--su-font-size-sm);
line-height: 1.65;
}
.admin-panel-actions {
display: flex;
flex: none;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--su-space-2);
}
/* 表单标签统一加粗，避免组件默认字重在不同字体下发虚 */
.admin-panel label {
font-weight: 600;
}
.admin-inline-actions {
display: flex;
gap: var(--su-space-2);
}
.admin-form-divider {
margin: var(--su-space-1) 0;
border-top: 1px dashed var(--su-border-strong);
margin-top: var(--su-space-5);
}
.admin-row {
@@ -956,7 +896,6 @@
}
.admin-actions {
max-width: 820px;
margin-top: var(--su-space-6);
}
stash-web/src/components/admin/AdminNext.tsx
+29 -77
View File
@@ -30,7 +30,7 @@ import {
type IconName,
type MenuItem,
} from '@stash/ui'
import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
import { useEffect, useMemo, useRef, useState } from 'react'
import { changePassword, fetchSession, logout, type SessionState } from '../../auth'
import { LoginDialog } from '../auth/LoginDialog'
import { GroupMark as GroupGlyph } from '../common/GroupMark'
@@ -127,27 +127,6 @@ function flattenCardsGroups(groups: GroupNode[]) {
return flattenGroups(groups)
}
/** 后台每个页面统一的标题区：加粗标题 + 说明 + 右侧操作 */
function PanelHeader({
title,
description,
children,
}: {
title: string
description?: string
children?: ReactNode
}) {
return (
<header className="admin-panel-head">
<div className="admin-panel-heading">
<h2 className="admin-panel-title">{title}</h2>
{description !== undefined && <p className="admin-panel-desc">{description}</p>}
</div>
{children !== undefined && <div className="admin-panel-actions">{children}</div>}
</header>
)
}
export function AdminNext() {
const [session, setSession] = useState<SessionState | null>(null)
const [loginOpen, setLoginOpen] = useState(false)
@@ -313,9 +292,9 @@ export function AdminNext() {
<main className="admin-main">
<Card padding="lg">
<Space direction="column" gap="sm" align="stretch">
<Title level={2}>后台管理</Title>
<Title level={2}>站点设置</Title>
<Text size="sm" tone="muted">
管理内容、首页展示与站点设置。
分组是唯一容器；侧边栏和内容卡片都只是勾选分组来组合展示。
</Text>
</Space>
@@ -353,10 +332,7 @@ export function AdminNext() {
{tab === 'home-sidebar' && (
<section className="admin-home-section">
<PanelHeader
title="侧边栏"
description="控制资料卡、本地服务与分组导航是否显示；分组本身的显隐由「分组管理」决定。"
/>
<Title level={4}>侧边栏</Title>
<SidebarPanel
value={draft.sidebar}
saving={saving}
@@ -376,10 +352,11 @@ export function AdminNext() {
{tab === 'home-cards' && (
<section className="admin-home-section">
<PanelHeader
title="内容卡片"
description="卡片是首页上的一个区块。勾选它包含的分组，并调整分组顺序与预览条数；停用的分组不会出现在卡片里。"
/>
<Title level={4}>内容卡片</Title>
<Text size="sm" tone="muted">
说明：卡片是首页上的一个区块；在这里勾选它包含哪些分组，并调整这些分组的先后顺序与预览条数。
分组是否启用仍由「分组管理」决定，停用的分组不会出现在卡片里。
</Text>
<CardsPanel
groups={groups}
cards={cards}
@@ -594,17 +571,18 @@ function GroupsPanel({
return (
<Space direction="column" gap="md" align="stretch" className="admin-form">
<PanelHeader
title="分组管理"
description="分组用于控制前台侧边栏与内容卡片，可多层嵌套；内容（条目）只挂在分组上。"
>
<Text size="sm" tone="muted">
说明：分组用于控制前台侧边栏与卡片；可多层嵌套，根分组决定格式。内容（条目）只挂在分组上。
</Text>
<div className="group-toolbar">
<Button
icon={<Icon name="add_line" />}
onClick={() => setDialog({ mode: 'root' })}
>
新建根分组
</Button>
</PanelHeader>
</div>
<Table
size="sm"
@@ -612,7 +590,7 @@ function GroupsPanel({
columns={[
{ key: 'name', title: '分组名称' },
{ key: 'sort', title: '排序权重', width: 110 },
{ key: 'count', title: '关联内容数', width: 120 },
{ key: 'count', title: '关联网页数', width: 120 },
{ key: 'status', title: '状态', width: 90 },
{ key: 'actions', title: '操作', width: 260, align: 'right' },
]}
@@ -1004,10 +982,10 @@ function ContentPanel({ groups, onReload }: { groups: GroupNode[]; onReload: ()
return (
<Space direction="column" gap="md" align="stretch" className="admin-form">
<PanelHeader
title="数据管理"
description="每条数据只属于一个分组；选中主分组时会连同其所有子分组的数据一起列出。"
>
<Text size="sm" tone="muted">
说明：数据只属于一个分组；选中主分组时会连同其所有子分组的数据一起列出。
</Text>
<div className="entry-toolbar">
<div className="entry-toolbar-select">
<Select
@@ -1027,7 +1005,6 @@ function ContentPanel({ groups, onReload }: { groups: GroupNode[]; onReload: ()
新建数据
</Button>
</div>
</PanelHeader>
<Text size="sm" tone="muted">
{group?.title ?? ''} 下共 {rows.length} 条（含子分组）
@@ -1356,7 +1333,11 @@ function SidebarPanel({
saving: boolean
}) {
return (
<Space direction="column" gap="md" align="stretch" className="admin-form admin-form-narrow">
<Space direction="column" gap="md" align="stretch">
<Text size="sm" tone="muted">
说明：分组在侧边栏的显隐只由「分组管理 → 状态」决定；这里只管三块侧栏卡片。
</Text>
<ToggleRow
label="本地管理员"
checked={value.show_profile !== false}
@@ -1458,7 +1439,7 @@ function CardsPanel({
<>
<div className="cards-manager">
<aside className="cards-side">
<Text size="sm" strong>
<Text size="sm" tone="muted">
卡片
</Text>
<div className="cards-side-new">
@@ -1807,11 +1788,7 @@ function HeaderPanel({
const [tab, setTab] = useState<'site' | 'actions' | 'ticker'>('site')
return (
<Space direction="column" gap="lg" align="stretch" className="admin-form admin-form-narrow">
<PanelHeader
title="页头"
description="站点标题、Logo、操作图标与滚动信息。修改后点右下角「保存」生效。"
/>
<Space direction="column" gap="lg" align="stretch" className="admin-form">
<Tabs
className="admin-tabs"
items={[
@@ -2066,11 +2043,7 @@ function ProfilePanel({
}) {
const update = (patch: Partial<ProfileSettings>) => onChange({ ...value, ...patch })
return (
<Space direction="column" gap="lg" align="stretch" className="admin-form admin-form-narrow">
<PanelHeader
title="资料管理"
description="这些内容会显示在首页左侧的资料卡上。修改后点右下角「保存」生效。"
/>
<Space direction="column" gap="lg" align="stretch" className="admin-form">
<FormField label="头像地址" htmlFor="profile-avatar">
<Input
id="profile-avatar"
@@ -2132,15 +2105,7 @@ function SystemPanel() {
}
return (
<Space direction="column" gap="lg" align="stretch" className="admin-form admin-form-narrow">
<PanelHeader
title="系统管理"
description="账户安全与数据备份。"
/>
<Text size="sm" strong>
修改密码
</Text>
<Space direction="column" gap="lg" align="stretch" className="admin-form">
<FormField label="当前密码" htmlFor="current-password">
<PasswordInput
id="current-password"
@@ -2160,25 +2125,12 @@ function SystemPanel() {
{message.text}
</Notice>
)}
<div className="admin-inline-actions">
<Button variant="secondary" loading={busy} icon={<Icon name="key_2_line" />} onClick={change}>
修改密码
</Button>
</div>
<div className="admin-form-divider" />
<Text size="sm" strong>
数据备份
</Text>
<Text size="sm" tone="muted">
下载当前数据库快照（VACUUM INTO），不会中断服务。
</Text>
<div className="admin-inline-actions">
<Button icon={<Icon name="download_line" />} onClick={() => window.location.assign('/api/backup')}>
下载备份
</Button>
</div>
</Space>
)
}