CNWei/stash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 分组管理 / 数据管理 / 内容卡片 / 本地服务 四处手写 <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 提供，与接口页一致
This commit is contained in:
CNWei
2026-11-01 21:59:18 +08:00
parent a67ab7bfe0
commit 4ae69b29fe
2 changed files with 293 additions and 515 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stash-web/src/App.css
+23 -167
View File
@@ -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
+131 -209
View File
@@ -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 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 }) => {
<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 (
<tr key={node.key}>
<td>
return {
key: node.key,
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>
<td className="group-count">{countGroupEntries(node)}</td>
<td>
),
sort: node.sort,
count: countGroupEntries(node),
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
type="button"
className="group-action"
<TextButton
icon={<Icon name="add_line" />}
onClick={() => setDialog({ mode: 'child', parent: node })}
>
<Icon name="add_line" />
新建子分组
</button>
<button
type="button"
className="group-action"
</TextButton>
<TextButton
icon={<Icon name="edit_4_line" />}
onClick={() => setDialog({ mode: 'edit', group: node })}
>
<Icon name="edit_4_line" />
编辑
</button>
<button
type="button"
className="group-action group-action-danger"
</TextButton>
<TextButton
tone="danger"
icon={<Icon name="delete_2_line" />}
onClick={() => onDelete(node.key, node.title)}
>
<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="暂无分组数据，点击上方「新建根分组」" />}
/>
<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 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>
<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>
</td>
<td>
<EntryLink href={entry.href} />
</td>
<td>
<span className="entry-group">{owner.title}</span>
</td>
<td>
),
href: <EntryLink href={entry.href} />,
group: <span className="entry-group">{owner.title}</span>,
actions: (
<div className="group-actions">
<button
type="button"
className="group-action"
<TextButton
icon={<Icon name="edit_4_line" />}
onClick={() => setDialog({ key: entry.id, groupKey: owner.key })}
>
<Icon name="edit_4_line" />
编辑
</button>
<button
type="button"
className="group-action group-action-danger"
</TextButton>
<TextButton
tone="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>
</div>
</td>
</tr>
))}
{rows.length === 0 && (
<tr>
<td colSpan={5} className="group-empty">
该分组下还没有内容
</td>
</tr>
)}
</tbody>
</table>
</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
<ToggleRow
label="本地管理员"
checked={value.show_profile !== false}
onChange={(visible) => onToggleCard('profile', visible)}
label="显示本地管理员卡片"
switchLabel="显示本地管理员卡片"
disabled={saving}
/>
</div>
<div className="sidebar-toggle-row">
<Text className="admin-item-title">本地服务</Text>
<Switch
<ToggleRow
label="本地服务"
checked={value.show_service !== false}
onChange={(visible) => onToggleCard('service', visible)}
label="显示本地服务卡片"
switchLabel="显示本地服务卡片"
disabled={saving}
/>
</div>
<div className="sidebar-toggle-row">
<Text className="admin-item-title">分组导航</Text>
<Switch
<ToggleRow
label="分组导航"
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 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"
>
<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>
</td>
</tr>
))}
{projects.length === 0 && (
<tr>
<td colSpan={2} className="group-empty">
还没有托管项目
</td>
</tr>
)}
</tbody>
</table>
</div>
),
}))}
emptyText={<Empty text="还没有托管项目" />}
/>
</div>
)
}
@@ -1795,34 +1736,31 @@ 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) => {
<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 (
<tr key={option.key}>
<td>
return {
key: option.key,
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>
{checked ? (
),
limit: checked ? (
<Input
type="number"
value={selected[option.key]}
@@ -1838,10 +1776,8 @@ function CardTable({
/>
) : (
<span className="entry-href entry-href-empty">—</span>
)}
</td>
<td>
{checked ? (
),
order: 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>
<td>
),
show: (
<Switch
checked={checked}
onChange={(next) => toggle(option.key, next)}
label={`卡片包含 ${option.title}`}
disabled={busy || !option.enabled}
/>
</td>
</tr>
)
),
}
})}
</tbody>
</table>
</div>
emptyText={<Empty text="还没有可选的分组" />}
/>
</div>
)
}
@@ -1993,59 +1926,48 @@ function HeaderPanel({
<Text size="sm" tone="muted">
说明：这里控制页头右侧显示哪些图标按钮；关掉的按钮不再出现，也不影响其它页面。
</Text>
<div className="sidebar-toggle-row">
<Text>明暗切换</Text>
<Switch
<ToggleRow
label="明暗切换"
checked={site.actions.theme}
onChange={(next) =>
onChangeSite({ ...site, actions: { ...site.actions, theme: next } })
}
label="页头显示明暗切换按钮"
switchLabel="页头显示明暗切换按钮"
/>
</div>
<div className="sidebar-toggle-row">
<Text>刷新</Text>
<Switch
<ToggleRow
label="刷新"
checked={site.actions.refresh}
onChange={(next) =>
onChangeSite({ ...site, actions: { ...site.actions, refresh: next } })
}
label="页头显示刷新按钮"
switchLabel="页头显示刷新按钮"
/>
</div>
<div className="sidebar-toggle-row">
<Text>站点设置</Text>
<Switch
<ToggleRow
label="站点设置"
checked={site.actions.settings}
onChange={(next) =>
onChangeSite({ ...site, actions: { ...site.actions, settings: next } })
}
label="页头显示站点设置按钮"
switchLabel="页头显示站点设置按钮"
/>
</div>
<div className="sidebar-toggle-row">
<Text>登录 / 退出</Text>
<Switch
<ToggleRow
label="登录 / 退出"
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">
<Text>显示页头滚动信息</Text>
<Switch
<ToggleRow
label="显示页头滚动信息"
checked={value.enabled}
onChange={(enabled) => onChange({ ...value, enabled })}
label="显示页头滚动信息"
/>
</div>
<FormField label="滚动速度" htmlFor="header-speed" hint="秒数越大越慢，范围 8–120">
<Input
id="header-speed"