Prechádzať zdrojové kódy

优化主题设置页面的配色方案逻辑,增加当前配色方案的高亮显示,提升用户体验和代码可维护性。

zyh 8 mesiacov pred
rodič
commit
e86b0af2c4
1 zmenil súbory, kde vykonal 34 pridanie a 16 odobranie
  1. 34 16
      client/admin/pages_settings.tsx

+ 34 - 16
client/admin/pages_settings.tsx

@@ -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>