From 30baa96237fb9b6de949af64fbefb9fc849b3f19 Mon Sep 17 00:00:00 2001
From: CNWei <t6g888@163.com>
Date: Sun, 1 Nov 2026 20:08:09 +0800
Subject: [PATCH] =?UTF-8?q?style(admin):=20=E9=A6=96=E9=A1=B5=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=20Tab=20=E6=95=B4=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Tab 改名：首页 -> 首页管理
- 两个区块标题改用 Title（侧边栏 / 内容卡片，原「首页卡片」）
- 卡片表格状态列统一成胶囊：启用绿底绿字、已停用红底红字，形状一致
- 卡片删除按钮改成与数据管理一致的红色
- 顺序列 92 -> 112px
- 首页 Tab 内所有说明补上「说明：」前缀；新建卡片的说明挪到按钮下方
---
 stash-web/src/App.css                        | 28 +++++++++++++++++---
 stash-web/src/components/admin/AdminNext.tsx | 24 +++++++----------
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/stash-web/src/App.css b/stash-web/src/App.css
index d352b61..971964b 100644
--- a/stash-web/src/App.css
+++ b/stash-web/src/App.css
@@ -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);
 }
diff --git a/stash-web/src/components/admin/AdminNext.tsx b/stash-web/src/components/admin/AdminNext.tsx
index 9614cd7..6f6f390 100644
--- a/stash-web/src/components/admin/AdminNext.tsx
+++ b/stash-web/src/components/admin/AdminNext.tsx
@@ -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>