fix(admin): 删除按钮按可删性区分颜色(危险色 / 弱化色,均用主题令牌)

- 可删:var(--su-color-danger);hover 用 danger 10% 背景
- 不可删(本地服务):disabled + var(--su-text-muted)、opacity .45
- 侧栏与首页卡片两处共用同一个按钮组
This commit is contained in:
stash
2026-10-29 20:28:11 +08:00
parent 427338b329
commit 6d43b191c9
2 changed files with 33 additions and 2 deletions
+16
View File
@@ -963,3 +963,19 @@
gap: var(--su-space-2);
align-items: center;
}
/* 删除按钮:可删的用危险色,不可删的用弱化色(都取主题令牌) */
.admin-item-actions .admin-remove {
color: var(--su-color-danger);
}
.admin-item-actions .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);
cursor: not-allowed;
opacity: 0.45;
}
+17 -2
View File
@@ -504,6 +504,7 @@ function SectionForm({
onUp={() => move(index, -1)}
onDown={() => move(index, 1)}
onRemove={card.id === 'local' ? undefined : () => onDelete(card)}
disabledRemove={card.id === 'local'}
/>
</div>
))}
@@ -710,24 +711,38 @@ function IconButtonGroup({
onUp,
onDown,
onRemove,
disabledRemove = false,
}: {
onUp: () => void
onDown: () => void
onRemove?: (() => void) | undefined
/** 显示一个不可点的删除按钮(灰色),用于「本地服务」这类受保护项 */
disabledRemove?: boolean
}) {
return (
<Space gap="xs" className="admin-item-actions">
<Button variant="ghost" size="sm" icon={<Icon name="arrow_up_line" />} onClick={onUp} aria-label="上移" />
<Button variant="ghost" size="sm" icon={<Icon name="arrow_down_line" />} onClick={onDown} aria-label="下移" />
{onRemove !== undefined && (
{onRemove !== undefined ? (
<Button
variant="ghost"
size="sm"
className="admin-remove"
icon={<Icon name="delete_2_line" />}
onClick={onRemove}
aria-label="删除"
/>
)}
) : disabledRemove ? (
<Button
variant="ghost"
size="sm"
className="admin-remove"
icon={<Icon name="delete_2_line" />}
disabled
aria-label="不可删除"
title="本地服务不能删除"
/>
) : null}
</Space>
)
}