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