fix(admin): 删除按钮按可删性区分颜色(危险色 / 弱化色,均用主题令牌)
- 可删:var(--su-color-danger);hover 用 danger 10% 背景 - 不可删(本地服务):disabled + var(--su-text-muted)、opacity .45 - 侧栏与首页卡片两处共用同一个按钮组
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user