style(admin): 首页管理 Tab 整理
- Tab 改名:首页 -> 首页管理 - 两个区块标题改用 Title(侧边栏 / 内容卡片,原「首页卡片」) - 卡片表格状态列统一成胶囊:启用绿底绿字、已停用红底红字,形状一致 - 卡片删除按钮改成与数据管理一致的红色 - 顺序列 92 -> 112px - 首页 Tab 内所有说明补上「说明:」前缀;新建卡片的说明挪到按钮下方
This commit is contained in:
+25
-3
@@ -1476,7 +1476,7 @@ a.entry-href:hover {
|
||||
}
|
||||
|
||||
.cards-col-order {
|
||||
width: 92px;
|
||||
width: 112px;
|
||||
}
|
||||
|
||||
.card-order-cell {
|
||||
@@ -1497,6 +1497,26 @@ a.entry-href:hover {
|
||||
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 {
|
||||
font-size: var(--su-font-size-xs);
|
||||
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);
|
||||
}
|
||||
|
||||
.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);
|
||||
background-color: color-mix(in srgb, var(--su-color-danger) 10%, transparent);
|
||||
}
|
||||
|
||||
@@ -282,7 +282,7 @@ export function AdminNext() {
|
||||
items={[
|
||||
{ key: 'groups', label: '分组管理' },
|
||||
{ key: 'content', label: '数据管理' },
|
||||
{ key: 'home', label: '首页' },
|
||||
{ key: 'home', label: '首页管理' },
|
||||
{ key: 'header', label: '页头' },
|
||||
{ key: 'profile', label: '资料' },
|
||||
{ key: 'system', label: '系统' },
|
||||
@@ -304,9 +304,7 @@ export function AdminNext() {
|
||||
{tab === 'home' && (
|
||||
<div className="admin-home">
|
||||
<section className="admin-home-section">
|
||||
<Text size="md" strong>
|
||||
侧边栏
|
||||
</Text>
|
||||
<Title level={4}>侧边栏</Title>
|
||||
<SidebarPanel
|
||||
value={draft.sidebar}
|
||||
saving={saving}
|
||||
@@ -326,12 +324,7 @@ export function AdminNext() {
|
||||
<div className="sidebar-divider" />
|
||||
|
||||
<section className="admin-home-section">
|
||||
<Text size="md" strong>
|
||||
首页卡片
|
||||
</Text>
|
||||
<Text size="sm" tone="muted">
|
||||
卡片 = 一张首页区块 + 勾选它包含哪些分组;分组本身的启停仍由「分组管理」决定。
|
||||
</Text>
|
||||
<Title level={4}>内容卡片</Title>
|
||||
<CardsPanel
|
||||
groups={groups}
|
||||
cards={cards}
|
||||
@@ -1346,7 +1339,7 @@ function SidebarPanel({
|
||||
return (
|
||||
<Space direction="column" gap="md" align="stretch" className="admin-form">
|
||||
<Text size="sm" tone="muted">
|
||||
分组在侧边栏的显隐只由「分组管理 → 状态」决定;这里只管三块侧栏卡片。
|
||||
说明:分组在侧边栏的显隐只由「分组管理 → 状态」决定;这里只管三块侧栏卡片。
|
||||
</Text>
|
||||
|
||||
<Text size="sm" strong>
|
||||
@@ -1489,6 +1482,9 @@ function CardsPanel({
|
||||
新建卡片
|
||||
</Button>
|
||||
</div>
|
||||
<Text size="sm" tone="muted">
|
||||
说明:卡片 = 一张首页区块 + 勾选它包含哪些分组;分组本身的启停仍由「分组管理」决定。
|
||||
</Text>
|
||||
|
||||
<div className="cards-side-list">
|
||||
{cards.map((card) => (
|
||||
@@ -1541,7 +1537,7 @@ function CardsPanel({
|
||||
|
||||
{cards.length > 1 && (
|
||||
<Text size="sm" tone="muted" className="cards-drag-hint">
|
||||
拖动卡片可调整首页顺序
|
||||
说明:拖动卡片可调整首页顺序
|
||||
</Text>
|
||||
)}
|
||||
</aside>
|
||||
@@ -1774,7 +1770,7 @@ function CardTable({
|
||||
</div>
|
||||
|
||||
<Text size="sm" tone="muted">
|
||||
开关和条数修改后即时保存;条数留空使用默认。
|
||||
说明:开关和条数修改后即时保存;条数留空使用默认。
|
||||
</Text>
|
||||
|
||||
<div className="group-table-wrap cards-table-wrap">
|
||||
@@ -1799,7 +1795,7 @@ function CardTable({
|
||||
</div>
|
||||
</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 ? '启用' : '已停用'}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
Reference in New Issue
Block a user