fix(style): dark css vars

src/components/echarts/config.ts

@@ -37,7 +37,7 @@ export default function useChartConfig() {
       splitLineColor: token.colorBorder,
       tickLineColor: token.colorSplit,
       axislabelColor: token.colorTextTertiary,
-      gaugeSplitLineColor: 'rgba(255, 255, 255, 0.38)',
+      gaugeSplitLineColor: isDarkTheme ? '#b8b8b8' : 'rgba(255, 255, 255, 1)',
       colorBgContainerHover: isDarkTheme ? '#424242' : '#fff'
     };
   }, [userSettings.theme, isDarkTheme]);
@@ -176,7 +176,7 @@ export default function useChartConfig() {
       }
     },
     axisTick: {
-      distance: -12,
+      distance: -11,
       length: 6,
       splitNumber: 5,
       lineStyle: {

src/components/progress-bar/index.tsx

@@ -36,7 +36,7 @@ const RenderProgress = memo(
             return (
               <span
                 style={{
-                  color: '#fff'
+                  color: 'var(--color-progress-text)'
                 }}
               >
                 {percent}%

src/components/seal-form/wrapper/select.ts

@@ -117,11 +117,6 @@ const SelectWrapper = styled.div`
       padding-block: 20px 0 !important;
       box-shadow: none !important;
 
-      &:hover {
-        border-color: var(--ant-input-hover-border-color) !important;
-        transition: all 0.2s ease;
-      }
-
       &:focus-within {
         border-color: var(--ant-input-active-border-color) !important;
         outline: 0;

src/components/status-tag/index.less

@@ -22,7 +22,7 @@
   }
 
   &.download {
-    border: 1px solid #93ecc5 !important;
+    border: 1px solid var(--ant-color-success-border-hover) !important;
   }
 
   .download {
@@ -34,13 +34,12 @@
     top: 0;
     bottom: 0;
     height: 100%;
-    background-color: #e0f5ec;
+    background-color: var(--ant-color-success-border);
   }
 
   .progress {
     position: relative;
     z-index: 10;
-    // color: var(--ant-color-text);
     color: var(--ant-color-success);
   }
 }

src/global.less

@@ -38,6 +38,7 @@ html {
   --font-weight-normal: 400;
   --font-weight-medium: 600;
   --font-weight-bold: 700;
+  --color-progress-text: rgba(255, 255, 255, 100%);
   --color-white-primary: rgba(255, 255, 255, 100%);
   --color-white-secondary: rgba(255, 255, 255, 90%);
   --color-white-tertiary: rgba(255, 255, 255, 70%);
@@ -91,6 +92,7 @@ html[data-theme='realDark'] {
   --color-fill-spin-bg: rgba(55, 55, 55, 50%);
   --color-bg-tooltip: #424242;
   --color-editor-header-bg: #292929;
+  --color-progress-text: rgba(255, 255, 255, 80%);
 
   background: #141414;
 }

src/layouts/rightRender.tsx

@@ -341,8 +341,10 @@ export const getRightRenderContent = (opts: {
     <div>
       <Menu {...helpMenu} style={getMenuStyle(collapsed, siderWidth)} />
       <Menu {...langMenu} style={getMenuStyle(collapsed, siderWidth)} />
-      <Menu {...themeMenu} style={getMenuStyle(collapsed, siderWidth)} />
+      <Menu
-      <Menu {...userMenu} style={getMenuStyle(collapsed, siderWidth)} />
+        {...userMenu}
+        style={getMenuStyle(collapsed, siderWidth, { marginTop: 20 })}
+      />
     </div>
   );
 };

src/pages/llmodels/components/instance-item.tsx

@@ -463,6 +463,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
     return (
       <div>
         <SimpleTabel
+          rowKey="worker_name"
           columns={distributeCols}
           dataSource={[...mainWorker, ...list]}
         ></SimpleTabel>

src/pages/profile/components/appearance.tsx

@@ -0,0 +1,39 @@
+import useUserSettings from '@/hooks/use-user-settings';
+import { MoonOutlined, SunOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Radio } from 'antd';
+import React from 'react';
+
+const ThemeOptions = [
+  {
+    key: 'realDark',
+    label: 'common.appearance.dark',
+    icon: <MoonOutlined />
+  },
+  {
+    key: 'light',
+    label: 'common.appearance.light',
+    icon: <SunOutlined />
+  }
+];
+const Appearance: React.FC = () => {
+  const { setTheme } = useUserSettings();
+  const intl = useIntl();
+
+  const handleOnChange = (e: any) => {
+    setTheme(e.target.value);
+  };
+  return (
+    <Radio.Group onChange={handleOnChange} style={{ marginTop: 16 }}>
+      {ThemeOptions.map((item) => (
+        <Radio key={item.key} value={item.key}>
+          {intl.formatMessage({ id: item.label })}
+        </Radio>
+      ))}
+    </Radio.Group>
+  );
+};
+
+Appearance.displayName = 'Appearance';
+
+export default Appearance;

src/pages/profile/index.tsx

@@ -4,7 +4,7 @@ import { useIntl } from '@umijs/max';
 import { TabsProps } from 'antd';
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
-import CustomUI from './components/custom-ui';
+import Appearance from './components/appearance';
 import ModifyPasswordn from './components/modify-password';
 
 const Wrapper = styled.div`
@@ -27,9 +27,9 @@ const Profile: React.FC = () => {
       children: <ModifyPasswordn />
     },
     {
-      key: 'custom-ui',
+      key: 'appearance',
-      label: 'Custom UI',
+      label: intl.formatMessage({ id: 'common.appearance' }),
-      children: <CustomUI />
+      children: <Appearance />
     }
   ];