style(admin): 首页管理 Tab 整理

- Tab 改名:首页 -> 首页管理
- 两个区块标题改用 Title(侧边栏 / 内容卡片,原「首页卡片」)
- 卡片表格状态列统一成胶囊:启用绿底绿字、已停用红底红字,形状一致
- 卡片删除按钮改成与数据管理一致的红色
- 顺序列 92 -> 112px
- 首页 Tab 内所有说明补上「说明:」前缀;新建卡片的说明挪到按钮下方
This commit is contained in:
2026-11-01 20:08:09 +08:00
parent d0a79283ed
commit 30baa96237
2 changed files with 35 additions and 17 deletions
+25 -3
View File
@@ -1476,7 +1476,7 @@ a.entry-href:hover {
} }
.cards-col-order { .cards-col-order {
width: 92px; width: 112px;
} }
.card-order-cell { .card-order-cell {
@@ -1497,6 +1497,26 @@ a.entry-href:hover {
white-space: nowrap; white-space: nowrap;
} }
/* 卡片表格的状态列:启用/已停用同一个胶囊,只换颜色 */
.card-state {
display: inline-block;
padding: 0 var(--su-space-2);
border-radius: var(--su-radius-pill);
font-size: var(--su-font-size-xs);
line-height: var(--su-line-height-sm);
white-space: nowrap;
}
.card-state-on {
background-color: var(--su-color-success-soft);
color: var(--su-color-success);
}
.card-state-off {
background-color: var(--su-color-danger-soft);
color: var(--su-color-danger);
}
.group-state-on { .group-state-on {
font-size: var(--su-font-size-xs); font-size: var(--su-font-size-xs);
color: var(--su-text-muted); color: var(--su-text-muted);
@@ -1581,11 +1601,13 @@ a.entry-href:hover {
} }
/* 删除按钮:可删的用危险色,不可删的用弱化色(都取主题令牌) */ /* 删除按钮:可删的用危险色,不可删的用弱化色(都取主题令牌) */
.admin-item-actions .admin-remove { .admin-item-actions .admin-remove,
.cards-table-head .admin-remove {
color: var(--su-color-danger); color: var(--su-color-danger);
} }
.admin-item-actions .admin-remove:not(:disabled):hover { .admin-item-actions .admin-remove:not(:disabled):hover,
.cards-table-head .admin-remove:not(:disabled):hover {
color: var(--su-color-danger); color: var(--su-color-danger);
background-color: color-mix(in srgb, var(--su-color-danger) 10%, transparent); background-color: color-mix(in srgb, var(--su-color-danger) 10%, transparent);
} }
+10 -14
View File
@@ -282,7 +282,7 @@ export function AdminNext() {
items={[ items={[
{ key: 'groups', label: '分组管理' }, { key: 'groups', label: '分组管理' },
{ key: 'content', label: '数据管理' }, { key: 'content', label: '数据管理' },
{ key: 'home', label: '首页' }, { key: 'home', label: '首页管理' },
{ key: 'header', label: '页头' }, { key: 'header', label: '页头' },
{ key: 'profile', label: '资料' }, { key: 'profile', label: '资料' },
{ key: 'system', label: '系统' }, { key: 'system', label: '系统' },
@@ -304,9 +304,7 @@ export function AdminNext() {
{tab === 'home' && ( {tab === 'home' && (
<div className="admin-home"> <div className="admin-home">
<section className="admin-home-section"> <section className="admin-home-section">
<Text size="md" strong> <Title level={4}>侧边栏</Title>
侧边栏
</Text>
<SidebarPanel <SidebarPanel
value={draft.sidebar} value={draft.sidebar}
saving={saving} saving={saving}
@@ -326,12 +324,7 @@ export function AdminNext() {
<div className="sidebar-divider" /> <div className="sidebar-divider" />
<section className="admin-home-section"> <section className="admin-home-section">
<Text size="md" strong> <Title level={4}>内容卡片</Title>
首页卡片
</Text>
<Text size="sm" tone="muted">
卡片 = 一张首页区块 + 勾选它包含哪些分组;分组本身的启停仍由「分组管理」决定。
</Text>
<CardsPanel <CardsPanel
groups={groups} groups={groups}
cards={cards} cards={cards}
@@ -1346,7 +1339,7 @@ function SidebarPanel({
return ( return (
<Space direction="column" gap="md" align="stretch" className="admin-form"> <Space direction="column" gap="md" align="stretch" className="admin-form">
<Text size="sm" tone="muted"> <Text size="sm" tone="muted">
分组在侧边栏的显隐只由「分组管理 → 状态」决定;这里只管三块侧栏卡片。 说明:分组在侧边栏的显隐只由「分组管理 → 状态」决定;这里只管三块侧栏卡片。
</Text> </Text>
<Text size="sm" strong> <Text size="sm" strong>
@@ -1489,6 +1482,9 @@ function CardsPanel({
新建卡片 新建卡片
</Button> </Button>
</div> </div>
<Text size="sm" tone="muted">
说明:卡片 = 一张首页区块 + 勾选它包含哪些分组;分组本身的启停仍由「分组管理」决定。
</Text>
<div className="cards-side-list"> <div className="cards-side-list">
{cards.map((card) => ( {cards.map((card) => (
@@ -1541,7 +1537,7 @@ function CardsPanel({
{cards.length > 1 && ( {cards.length > 1 && (
<Text size="sm" tone="muted" className="cards-drag-hint"> <Text size="sm" tone="muted" className="cards-drag-hint">
拖动卡片可调整首页顺序 说明:拖动卡片可调整首页顺序
</Text> </Text>
)} )}
</aside> </aside>
@@ -1774,7 +1770,7 @@ function CardTable({
</div> </div>
<Text size="sm" tone="muted"> <Text size="sm" tone="muted">
开关和条数修改后即时保存;条数留空使用默认。 说明:开关和条数修改后即时保存;条数留空使用默认。
</Text> </Text>
<div className="group-table-wrap cards-table-wrap"> <div className="group-table-wrap cards-table-wrap">
@@ -1799,7 +1795,7 @@ function CardTable({
</div> </div>
</td> </td>
<td> <td>
<span className={option.enabled ? 'group-state-on' : 'group-off-tag'}> <span className={option.enabled ? 'card-state card-state-on' : 'card-state card-state-off'}>
{option.enabled ? '启用' : '已停用'} {option.enabled ? '启用' : '已停用'}
</span> </span>
</td> </td>