优化主题设置页面的配色方案逻辑,增加当前配色方案的高亮显示,提升用户体验和代码可维护性。
This commit is contained in:
@@ -484,22 +484,40 @@ export const ThemeSettingsPage = () => {
|
||||
{(() => {
|
||||
const themeMode = (form.getFieldValue('theme_mode') as ThemeMode) || ThemeMode.LIGHT;
|
||||
const schemes = COLOR_SCHEMES[themeMode] || {};
|
||||
return Object.entries(schemes).map(([key, scheme]) => (
|
||||
<Button
|
||||
key={key}
|
||||
onClick={() => {
|
||||
handleColorSchemeChange(key);
|
||||
form.setFieldValue('scheme_name', scheme.name);
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: scheme.background,
|
||||
color: scheme.text,
|
||||
borderColor: scheme.primary
|
||||
}}
|
||||
>
|
||||
{scheme.name}
|
||||
</Button>
|
||||
));
|
||||
const currentPrimary = form.getFieldValue('primary_color');
|
||||
const currentBg = form.getFieldValue('background_color');
|
||||
const currentText = form.getFieldValue('text_color');
|
||||
|
||||
return Object.entries(schemes).map(([key, scheme]) => {
|
||||
const isActive =
|
||||
scheme.primary === currentPrimary &&
|
||||
scheme.background === currentBg &&
|
||||
scheme.text === currentText;
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={key}
|
||||
onClick={() => {
|
||||
handleColorSchemeChange(key);
|
||||
form.setFieldValue('scheme_name', scheme.name);
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: scheme.background,
|
||||
color: scheme.text,
|
||||
borderColor: isActive ? scheme.text : scheme.primary,
|
||||
borderWidth: isActive ? 2 : 1,
|
||||
boxShadow: isActive ? `0 0 0 2px ${scheme.primary}` : 'none',
|
||||
fontWeight: isActive ? 'bold' : 'normal',
|
||||
transition: 'all 0.3s'
|
||||
}}
|
||||
>
|
||||
{scheme.name}
|
||||
{isActive && (
|
||||
<span style={{ marginLeft: 4 }}>✓</span>
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
</Space>
|
||||
</Form.Item>
|
||||
|
||||
Reference in New Issue
Block a user