refactor(admin): 三张手写表格改用库里的 Table，文字按钮/开关行收进库

- 分组管理 / 数据管理 / 内容卡片 / 本地服务 四处手写 <table> 全部换成 Table size='sm'
- 行内操作（新建子分组 / 编辑 / 删除）改用 TextButton，删除统一 danger 色
- 侧边栏、页头共 7 处开关行改用 ToggleRow
- 空状态改用 Empty
- 删掉随之失效的 CSS：.group-table* / .entry-table* / .cards-table* / .group-action* /
  .sidebar-toggle-row / .admin-item-title 等，App.css 净减 144 行

视觉：表格外框、表头底色、行 hover 统一由 @stash/ui 提供，与接口页一致

stash-web/src/App.css

@@ -795,15 +795,7 @@
   gap: var(--su-space-2);
 }
 
-.admin-item-row > :first-child:not(.admin-item-title) {
-  grid-column: span 1;
-}
 
-.admin-item-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
 .admin-nav-row {
   grid-template-columns: auto minmax(0, 1fr) auto;
@@ -927,10 +919,6 @@
   padding-left: var(--su-space-6);
 }
 
-.admin-nav-group-row .admin-item-title {
-  color: var(--su-text-sub);
-  font-size: var(--su-font-size-sm);
-}
 
 /* 归类页：一行一个分区，标题 / 类型 / 图标 / 色条 / 条数 / 保存 / 删除 */
 .admin-category-row {
@@ -977,62 +965,15 @@
   justify-content: flex-start;
 }
 
-.group-table-wrap {
-  overflow: hidden;
-  border: 1px solid var(--su-card-border);
-  border-radius: var(--su-radius-md);
-  background-color: var(--su-bg-card);
-}
 
-.group-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: var(--su-font-size-md);
-}
 
-.group-table th {
-  padding: var(--su-space-3) var(--su-space-4);
-  background-color: var(--su-bg-subtle);
-  border-bottom: 1px solid var(--su-card-border);
-  color: var(--su-text-muted);
-  font-size: var(--su-font-size-sm);
-  font-weight: 600;
-  text-align: left;
-  white-space: nowrap;
-}
 
-.group-table td {
-  padding: var(--su-space-3) var(--su-space-4);
-  border-bottom: 1px solid var(--su-card-border);
-  vertical-align: middle;
-}
 
-.group-table tbody tr:last-child td {
-  border-bottom: none;
-}
 
-.group-table tbody tr:hover {
-  background-color: var(--su-bg-subtle);
-}
 
-.group-col-sort {
-  width: 110px;
-}
 
-.group-col-count {
-  width: 120px;
-  text-align: center !important;
-}
 
-.group-col-status {
-  width: 90px;
-  text-align: center !important;
-}
 
-.group-col-actions {
-  width: 190px;
-  text-align: right !important;
-}
 
 .group-name-cell {
   display: flex;
@@ -1183,49 +1124,12 @@
   font-size: var(--su-font-size-sm);
 }
 
-.group-sort {
-  color: var(--su-text-muted);
-  font-family: var(--su-font-mono);
-  font-size: var(--su-font-size-sm);
-}
 
-.group-count {
-  color: var(--su-text-sub);
-  text-align: center;
-}
 
-.group-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--su-space-3);
-}
 
-.group-action {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--su-space-1);
-  padding: 0;
-  border: none;
-  background: none;
-  color: var(--su-color-primary);
-  font-size: var(--su-font-size-sm);
-  cursor: pointer;
-  white-space: nowrap;
-}
 
-.group-action:hover {
-  text-decoration: underline;
-}
 
-.group-action-danger {
-  color: var(--su-color-danger);
-}
 
-.group-empty {
-  padding: var(--su-space-6) 0 !important;
-  color: var(--su-text-muted);
-  text-align: center;
-}
 
 .group-icon-field {
   display: flex;
@@ -1251,14 +1155,7 @@
   gap: var(--su-space-3);
 }
 
-/* 内容页：与分组管理一致的列表 */
-.entry-table .entry-col-href {
-  width: 36%;
-}
 
-.entry-table .entry-col-format {
-  width: 80px;
-}
 
 .entry-format {
   display: inline-block;
@@ -1269,9 +1166,6 @@
   font-size: var(--su-font-size-sm);
 }
 
-.entry-table .entry-col-group {
-  width: 180px;
-}
 
 .entry-title {
   color: var(--su-text-main);
@@ -1303,19 +1197,7 @@ a.entry-href:hover {
   font-size: var(--su-font-size-sm);
 }
 
-/* 侧边栏勾选：标题在左，开关在右 */
-.sidebar-toggle-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--su-space-3);
-  padding: var(--su-space-1) 0;
-}
 
-.sidebar-toggle-row .admin-item-title {
-  flex: 1;
-  min-width: 0;
-}
 
 /* 首页：左右栏共用一个滚动区，左侧吸顶交给 CSS sticky */
 #page-scroll {
@@ -1500,44 +1382,12 @@ a.entry-href:hover {
   min-width: 0;
 }
 
-.cards-table-head {
-  display: flex;
-  align-items: center;
-  gap: var(--su-space-2);
-  margin-bottom: var(--su-space-2);
-}
 
-.cards-table-wrap {
-  margin-top: var(--su-space-2);
-  /* 列多了以后表格会比面板宽，横向滚动而不是把名字挤成两三行 */
-  overflow-x: auto;
-}
 
-.cards-table th,
-.cards-table td {
-  padding: var(--su-space-2);
-}
 
-.cards-col-limit {
-  width: 100px;
-}
 
-/* 分组名不换行，超长省略；列宽固定，保证五列都落在面板内 */
-.cards-table {
-  table-layout: fixed;
-}
 
-.cards-table td:first-child .group-name {
-  display: block;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
 
-.cards-table th,
-.cards-table td {
-  padding: var(--su-space-2) var(--su-space-4);
-}
 
 /* 首页 Tab：侧边栏设置 + 首页卡片上下两段 */
 .admin-home {
@@ -1552,14 +1402,7 @@ a.entry-href:hover {
   gap: var(--su-space-3);
 }
 
-/* 首页卡片：分组展示顺序（表格里的「顺序」列，上下箭头即时保存） */
-.cards-col-state {
-  width: 72px;
-}
 
-.cards-col-order {
-  width: 112px;
-}
 
 .card-order-cell {
   display: flex;
@@ -1682,17 +1525,7 @@ a.entry-href:hover {
   border-bottom: 1px solid var(--su-border);
 }
 
-/* 删除按钮：可删的用危险色，不可删的用弱化色（都取主题令牌） */
-.admin-item-actions .admin-remove,
-.cards-table-head .admin-remove {
-  color: var(--su-color-danger);
-}
 
-.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);
-}
 
 .admin-item-actions .admin-remove:disabled {
   color: var(--su-text-muted);
@@ -1700,3 +1533,26 @@ a.entry-href:hover {
   opacity: 0.45;
 }
 
+
+/* 后台表格里的操作列与卡片标题栏（其余表格样式已交给 @stash/ui 的 Table） */
+.group-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--su-space-3);
+}
+
+.cards-table-head {
+  display: flex;
+  align-items: center;
+  gap: var(--su-space-2);
+  margin-bottom: var(--su-space-2);
+}
+
+.cards-table-head .admin-remove {
+  color: var(--su-color-danger);
+}
+
+.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);
+}

stash-web/src/components/admin/AdminNext.tsx

@@ -2,6 +2,7 @@ import {
   Brand,
   Button,
   Card,
+  Empty,
   FormField,
   Icon,
   ICON_NAMES,
@@ -14,11 +15,14 @@ import {
   Select,
   Space,
   Switch,
+  Table,
   Tabs,
   Tag,
   Text,
   Textarea,
+  TextButton,
   Title,
+  ToggleRow,
   Toaster,
   toast,
   type IconName,
@@ -578,24 +582,22 @@ function GroupsPanel({
         </Button>
       </div>
 
-      <div className="group-table-wrap">
+      <Table
-        <table className="group-table">
+        size="sm"
-          <thead>
+        rowKey="key"
-            <tr>
+        columns={[
-              <th>分组名称</th>
+          { key: 'name', title: '分组名称' },
-              <th className="group-col-sort">排序权重</th>
+          { key: 'sort', title: '排序权重', width: 110 },
-              <th className="group-col-count">关联网页数</th>
+          { key: 'count', title: '关联网页数', width: 120 },
-              <th className="group-col-status">状态</th>
+          { key: 'status', title: '状态', width: 90 },
-              <th className="group-col-actions">操作</th>
+          { key: 'actions', title: '操作', width: 260, align: 'right' },
-            </tr>
+        ]}
-          </thead>
+        rows={rows.map(({ node, level }) => {
-          <tbody>
-            {rows.map(({ node, level }) => {
           const hasChildren = node.children.length > 0
           const open = !collapsed.has(node.key)
-              return (
+          return {
-                <tr key={node.key}>
+            key: node.key,
-                  <td>
+            name: (
               <div className="group-name-cell" style={{ paddingLeft: level * 20 }}>
                 {hasChildren ? (
                   <button
@@ -611,59 +613,44 @@ function GroupsPanel({
                 <GroupMark icon={node.icon} />
                 <span className="group-name">{node.title}</span>
               </div>
-                  </td>
+            ),
-                  <td className="group-sort">{node.sort}</td>
+            sort: node.sort,
-                  <td className="group-count">{countGroupEntries(node)}</td>
+            count: countGroupEntries(node),
-                  <td>
+            status: (
               <Switch
                 checked={node.enabled !== false}
                 onChange={(next) => void toggleEnabled(node, next)}
                 label={`启用 ${node.title}`}
                 size="sm"
               />
-                  </td>
+            ),
-                  <td>
+            actions: (
               <div className="group-actions">
-                      <button
+                <TextButton
-                        type="button"
+                  icon={<Icon name="add_line" />}
-                        className="group-action"
                   onClick={() => setDialog({ mode: 'child', parent: node })}
                 >
-                        <Icon name="add_line" />
                   新建子分组
-                      </button>
+                </TextButton>
-                      <button
+                <TextButton
-                        type="button"
+                  icon={<Icon name="edit_4_line" />}
-                        className="group-action"
                   onClick={() => setDialog({ mode: 'edit', group: node })}
                 >
-                        <Icon name="edit_4_line" />
                   编辑
-                      </button>
+                </TextButton>
-                      <button
+                <TextButton
-                        type="button"
+                  tone="danger"
-                        className="group-action group-action-danger"
+                  icon={<Icon name="delete_2_line" />}
                   onClick={() => onDelete(node.key, node.title)}
                 >
-                        <Icon name="delete_2_line" />
                   删除
-                      </button>
+                </TextButton>
               </div>
-                  </td>
+            ),
-                </tr>
+          }
-              )
         })}
-
+        emptyText={<Empty text="暂无分组数据，点击上方「新建根分组」" />}
-            {rows.length === 0 && (
+      />
-              <tr>
-                <td colSpan={5} className="group-empty">
-                  暂无分组数据，点击左侧「新建根分组」
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
 
       <GroupDialog
         state={dialog}
@@ -1019,47 +1006,37 @@ function ContentPanel({ groups, onReload }: { groups: GroupNode[]; onReload: ()
         {group?.title ?? ''} 下共 {rows.length} 条（含子分组）
       </Text>
 
-      <div className="group-table-wrap">
+      <Table
-        <table className="group-table entry-table">
+        size="sm"
-          <thead>
+        rowKey="key"
-            <tr>
+        columns={[
-              <th>标题</th>
+          { key: 'title', title: '标题' },
-              <th className="entry-col-format">格式</th>
+          { key: 'format', title: '格式', width: 80 },
-              <th className="entry-col-href">跳转链接</th>
+          { key: 'href', title: '跳转链接', width: '36%' },
-              <th className="entry-col-group">所属分组</th>
+          { key: 'group', title: '所属分组', width: 180 },
-              <th className="group-col-actions">操作</th>
+          { key: 'actions', title: '操作', width: 160, align: 'right' },
-            </tr>
+        ]}
-          </thead>
+        rows={rows.map(({ entry, group: owner }) => ({
-          <tbody>
+          key: entry.id,
-            {rows.map(({ entry, group: owner }) => (
+          title: <span className="entry-title">{entry.name ?? entry.title ?? entry.id}</span>,
-              <tr key={entry.id}>
+          format: (
-                <td>
-                  <span className="entry-title">{entry.name ?? entry.title ?? entry.id}</span>
-                </td>
-                <td>
             <span className="entry-format">
               {FORMAT_LABEL[(entry.format ?? 'apps') as GroupFormat]}
             </span>
-                </td>
+          ),
-                <td>
+          href: <EntryLink href={entry.href} />,
-                  <EntryLink href={entry.href} />
+          group: <span className="entry-group">{owner.title}</span>,
-                </td>
+          actions: (
-                <td>
-                  <span className="entry-group">{owner.title}</span>
-                </td>
-                <td>
             <div className="group-actions">
-                    <button
+              <TextButton
-                      type="button"
+                icon={<Icon name="edit_4_line" />}
-                      className="group-action"
                 onClick={() => setDialog({ key: entry.id, groupKey: owner.key })}
               >
-                      <Icon name="edit_4_line" />
                 编辑
-                    </button>
+              </TextButton>
-                    <button
+              <TextButton
-                      type="button"
+                tone="danger"
-                      className="group-action group-action-danger"
+                icon={<Icon name="delete_2_line" />}
                 onClick={async () => {
                   const result = await deleteItem(entry.id)
                   if (!result.ok) {
@@ -1070,24 +1047,13 @@ function ContentPanel({ groups, onReload }: { groups: GroupNode[]; onReload: ()
                   onReload()
                 }}
               >
-                      <Icon name="delete_2_line" />
                 删除
-                    </button>
+              </TextButton>
-                  </div>
-                </td>
-              </tr>
-            ))}
-
-            {rows.length === 0 && (
-              <tr>
-                <td colSpan={5} className="group-empty">
-                  该分组下还没有内容
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
             </div>
+          ),
+        }))}
+        emptyText={<Empty text="该分组下还没有内容" />}
+      />
 
       <EntryDialog
         open={dialog !== null}
@@ -1371,33 +1337,27 @@ function SidebarPanel({
       <Text size="sm" strong>
         侧栏卡片
       </Text>
-      <div className="sidebar-toggle-row">
+      <ToggleRow
-        <Text className="admin-item-title">本地管理员</Text>
+        label="本地管理员"
-        <Switch
         checked={value.show_profile !== false}
         onChange={(visible) => onToggleCard('profile', visible)}
-          label="显示本地管理员卡片"
+        switchLabel="显示本地管理员卡片"
         disabled={saving}
       />
-      </div>
+      <ToggleRow
-      <div className="sidebar-toggle-row">
+        label="本地服务"
-        <Text className="admin-item-title">本地服务</Text>
-        <Switch
         checked={value.show_service !== false}
         onChange={(visible) => onToggleCard('service', visible)}
-          label="显示本地服务卡片"
+        switchLabel="显示本地服务卡片"
         disabled={saving}
       />
-      </div>
+      <ToggleRow
-      <div className="sidebar-toggle-row">
+        label="分组导航"
-        <Text className="admin-item-title">分组导航</Text>
-        <Switch
         checked={value.show_nav !== false}
         onChange={(visible) => onToggleCard('nav', visible)}
-          label="显示分组导航卡片"
+        switchLabel="显示分组导航卡片"
         disabled={saving}
       />
-      </div>
     </Space>
   )
 }
@@ -1634,42 +1594,23 @@ function LocalServiceTable({ projects }: { projects: Project[] }) {
         本地服务卡片由托管目录自动生成，随项目扫描更新；后台只能查看，不能删除或改名。
       </Text>
 
-      <div className="group-table-wrap cards-table-wrap">
+      <Table
-        <table className="group-table cards-table">
+        size="sm"
-          <thead>
+        rowKey="name"
-            <tr>
+        columns={[
-              <th>项目名称</th>
+          { key: 'name', title: '项目名称' },
-              <th className="entry-col-href">访问地址</th>
+          { key: 'href', title: '访问地址', width: '50%' },
-            </tr>
+        ]}
-          </thead>
+        rows={projects.map((project) => ({
-          <tbody>
+          name: <span className="group-name">{project.name}</span>,
-            {projects.map((project) => (
+          href: (
-              <tr key={project.name}>
+            <a className="entry-href" href={project.route_path} target="_blank" rel="noreferrer">
-                <td>
-                  <span className="group-name">{project.name}</span>
-                </td>
-                <td>
-                  <a
-                    className="entry-href"
-                    href={project.route_path}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
               {project.route_path}
             </a>
-                </td>
+          ),
-              </tr>
+        }))}
-            ))}
+        emptyText={<Empty text="还没有托管项目" />}
-            {projects.length === 0 && (
+      />
-              <tr>
-                <td colSpan={2} className="group-empty">
-                  还没有托管项目
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
     </div>
   )
 }
@@ -1795,34 +1736,31 @@ function CardTable({
         说明：开关和条数修改后即时保存；条数留空使用默认。
       </Text>
 
-      <div className="group-table-wrap cards-table-wrap">
+      <Table
-        <table className="group-table cards-table">
+        size="sm"
-          <thead>
+        rowKey="key"
-            <tr>
+        columns={[
-              <th>分组名称</th>
+          { key: 'name', title: '分组名称' },
-              <th className="cards-col-state">状态</th>
+          { key: 'state', title: '状态', width: 90 },
-              <th className="cards-col-limit">预览条数</th>
+          { key: 'limit', title: '预览条数', width: 110 },
-              <th className="cards-col-order">顺序</th>
+          { key: 'order', title: '顺序', width: 120 },
-              <th className="group-col-status">展示</th>
+          { key: 'show', title: '展示', width: 90 },
-            </tr>
+        ]}
-          </thead>
+        rows={options.map((option) => {
-          <tbody>
-            {options.map((option) => {
           const checked = option.key in selected
-              return (
+          return {
-                <tr key={option.key}>
+            key: option.key,
-                  <td>
+            name: (
               <div style={{ paddingLeft: option.depth * 18 }}>
                 <span className="group-name">{option.title}</span>
               </div>
-                  </td>
+            ),
-                  <td>
+            state: (
               <span className={option.enabled ? 'card-state card-state-on' : 'card-state card-state-off'}>
                 {option.enabled ? '启用' : '已停用'}
               </span>
-                  </td>
+            ),
-                  <td>
+            limit: checked ? (
-                    {checked ? (
               <Input
                 type="number"
                 value={selected[option.key]}
@@ -1838,10 +1776,8 @@ function CardTable({
               />
             ) : (
               <span className="entry-href entry-href-empty">—</span>
-                    )}
+            ),
-                  </td>
+            order: checked ? (
-                  <td>
-                    {checked ? (
               <div className="card-order-cell">
                 <span className="card-order-index">{order.indexOf(option.key) + 1}</span>
                 <IconButton
@@ -1861,22 +1797,19 @@ function CardTable({
               </div>
             ) : (
               <span className="entry-href entry-href-empty">—</span>
-                    )}
+            ),
-                  </td>
+            show: (
-                  <td>
               <Switch
                 checked={checked}
                 onChange={(next) => toggle(option.key, next)}
                 label={`卡片包含 ${option.title}`}
                 disabled={busy || !option.enabled}
               />
-                  </td>
+            ),
-                </tr>
+          }
-              )
         })}
-          </tbody>
+        emptyText={<Empty text="还没有可选的分组" />}
-        </table>
+      />
-      </div>
     </div>
   )
 }
@@ -1993,59 +1926,48 @@ function HeaderPanel({
           <Text size="sm" tone="muted">
             说明：这里控制页头右侧显示哪些图标按钮；关掉的按钮不再出现，也不影响其它页面。
           </Text>
-          <div className="sidebar-toggle-row">
+          <ToggleRow
-            <Text>明暗切换</Text>
+            label="明暗切换"
-            <Switch
             checked={site.actions.theme}
             onChange={(next) =>
               onChangeSite({ ...site, actions: { ...site.actions, theme: next } })
             }
-              label="页头显示明暗切换按钮"
+            switchLabel="页头显示明暗切换按钮"
           />
-          </div>
+          <ToggleRow
-          <div className="sidebar-toggle-row">
+            label="刷新"
-            <Text>刷新</Text>
-            <Switch
             checked={site.actions.refresh}
             onChange={(next) =>
               onChangeSite({ ...site, actions: { ...site.actions, refresh: next } })
             }
-              label="页头显示刷新按钮"
+            switchLabel="页头显示刷新按钮"
           />
-          </div>
+          <ToggleRow
-          <div className="sidebar-toggle-row">
+            label="站点设置"
-            <Text>站点设置</Text>
-            <Switch
             checked={site.actions.settings}
             onChange={(next) =>
               onChangeSite({ ...site, actions: { ...site.actions, settings: next } })
             }
-              label="页头显示站点设置按钮"
+            switchLabel="页头显示站点设置按钮"
           />
-          </div>
+          <ToggleRow
-          <div className="sidebar-toggle-row">
+            label="登录 / 退出"
-            <Text>登录 / 退出</Text>
-            <Switch
             checked={site.actions.session}
             onChange={(next) =>
               onChangeSite({ ...site, actions: { ...site.actions, session: next } })
             }
-              label="页头显示登录或退出按钮"
+            switchLabel="页头显示登录或退出按钮"
           />
-          </div>
         </Space>
       )}
 
       {tab === 'ticker' && (
         <Space direction="column" gap="md" align="stretch">
-          <div className="sidebar-toggle-row">
+          <ToggleRow
-            <Text>显示页头滚动信息</Text>
+            label="显示页头滚动信息"
-            <Switch
             checked={value.enabled}
             onChange={(enabled) => onChange({ ...value, enabled })}
-              label="显示页头滚动信息"
           />
-          </div>
           <FormField label="滚动速度" htmlFor="header-speed" hint="秒数越大越慢，范围 8–120">
             <Input
               id="header-speed"