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); gap: var(--su-space-2);
align-items: center; 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)} onUp={() => move(index, -1)}
onDown={() => move(index, 1)} onDown={() => move(index, 1)}
onRemove={card.id === 'local' ? undefined : () => onDelete(card)} onRemove={card.id === 'local' ? undefined : () => onDelete(card)}
disabledRemove={card.id === 'local'}
/> />
</div> </div>
))} ))}
@@ -710,24 +711,38 @@ function IconButtonGroup({
onUp, onUp,
onDown, onDown,
onRemove, onRemove,
disabledRemove = false,
}: { }: {
onUp: () => void onUp: () => void
onDown: () => void onDown: () => void
onRemove?: (() => void) | undefined onRemove?: (() => void) | undefined
/** 显示一个不可点的删除按钮(灰色),用于「本地服务」这类受保护项 */
disabledRemove?: boolean
}) { }) {
return ( return (
<Space gap="xs" className="admin-item-actions"> <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_up_line" />} onClick={onUp} aria-label="上移" />
<Button variant="ghost" size="sm" icon={<Icon name="arrow_down_line" />} onClick={onDown} aria-label="下移" /> <Button variant="ghost" size="sm" icon={<Icon name="arrow_down_line" />} onClick={onDown} aria-label="下移" />
{onRemove !== undefined && ( {onRemove !== undefined ? (
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="admin-remove"
icon={<Icon name="delete_2_line" />} icon={<Icon name="delete_2_line" />}
onClick={onRemove} onClick={onRemove}
aria-label="删除" aria-label="删除"
/> />
)} ) : disabledRemove ? (
<Button
variant="ghost"
size="sm"
className="admin-remove"
icon={<Icon name="delete_2_line" />}
disabled
aria-label="不可删除"
title="本地服务不能删除"
/>
) : null}
</Space> </Space>
) )
} }