style: ui style

config/config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from '@umijs/max';
+import theme from './theme';
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
 
 import proxy from './proxy';
@@ -44,6 +45,24 @@ export default defineConfig({
                 minRatio: 0.8
               }
             ]);
+          config.module
+            .rule('images')
+            .test(/\.(png|jpe?g|gif|svg|ico)(\?.*)?$/)
+            .use('url-loader')
+            .loader(require.resolve('url-loader'))
+            .tap((options: any) => {
+              console.log('iamges==options========', options);
+              return {
+                ...options,
+                limit: 8192, // 小于8KB的图片会被转为base64
+                fallback: {
+                  loader: require.resolve('file-loader'),
+                  options: {
+                    name: 'static/[name].[hash:8].[ext]' // 将所有图片输出到 static 目录
+                  }
+                }
+              };
+            });
         }
       }
     : {}),
@@ -58,25 +77,7 @@ export default defineConfig({
     style: 'less',
     configProvider: {
       componentSize: 'large',
-      theme: {
-        'root-entry-name': 'variable',
-        cssVar: true,
-        hashed: false,
-        components: {
-          Input: {
-            inputFontSize: 12
-          },
-          Table: {
-            cellFontSize: 12
-          }
-        },
-        token: {
-          colorPrimary: '#2fbf85',
-          borderRadius: 8,
-          fontSize: 12,
-          motion: true
-        }
-      }
+      theme
     }
   },
   hash: true,

config/theme.ts

@@ -0,0 +1,25 @@
+export default {
+  'root-entry-name': 'variable',
+  cssVar: true,
+  hashed: false,
+  components: {
+    Input: {
+      inputFontSize: 12
+    },
+    Table: {
+      cellFontSize: 12,
+      rowSelectedHoverBg: '#e6f6ff'
+    },
+    Menu: {
+      iconSize: 16,
+      iconMarginInlineEnd: 12,
+      itemHeight: 44
+    }
+  },
+  token: {
+    colorPrimary: '#007BFF',
+    borderRadius: 8,
+    fontSize: 12,
+    motion: true
+  }
+};

package.json

@@ -27,6 +27,7 @@
     "dayjs": "^1.11.11",
     "has-ansi": "^5.0.1",
     "jotai": "^2.8.4",
+    "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "numeral": "^2.0.6",
     "query-string": "^9.0.0",

src/assets/styles/menu.less

@@ -7,7 +7,7 @@
       background-color: var(--color-fill-1);
       border-inline: none;
       border-radius: 0;
-      padding-inline: 16px;
+      // padding-inline: 16px;
       padding-block-end: 12px;
     }
 

src/components/card-wrapper/index.less

@@ -1,6 +1,8 @@
 .cardWrapper {
   border-radius: var(--border-radius-small);
   background-color: var(--color-white-1);
-  box-shadow: var(--box-shadow-base);
+  // box-shadow: var(--box-shadow-base);
+  box-shadow: none;
   padding: 10px;
+  border: 1px solid var(--ant-color-border);
 }

src/components/charts/area.tsx

@@ -35,15 +35,15 @@ const LineChart: React.FC<LineChartProps> = (props) => {
       x: {
         textStyle: {
           autoRoate: true
-        }
+        },
+        labelFormatter
       },
       y: {
         tick: false,
         // size: 14,
         // title: '%',
         titlePosition: 'top',
-        titleFontSize: 12,
-        labelFormatter
+        titleFontSize: 12
       }
     },
     style: {

src/components/charts/column-bar.tsx

@@ -13,6 +13,7 @@ interface BarChartProps {
   seriesField?: string;
   stack?: boolean;
   legend?: any;
+  labelFormatter?: (v: any) => string;
 }
 const BarChart: React.FC<BarChartProps> = (props) => {
   const {
@@ -25,7 +26,8 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     colorField,
     seriesField,
     stack,
-    legend = undefined
+    legend = undefined,
+    labelFormatter
   } = props;
   const config = {
     data,
@@ -57,7 +59,8 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     axis: {
       x: {
         xAxis: true,
-        tick: false
+        tick: false,
+        labelFormatter
       },
       y: {
         tick: false,
@@ -86,10 +89,7 @@ const BarChart: React.FC<BarChartProps> = (props) => {
 
     style: {
       fill: (params: any) => {
-        return (
-          params.color ||
-          'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgb(0, 168, 143,.7) 100%)'
-        );
+        return params.color || 'rgba(84, 204, 152,0.8)';
       },
       // radiusTopLeft: 12,
       // radiusTopRight: 12,

src/components/editor-wrap/index.less

@@ -1,21 +1,25 @@
 .editor-wrap {
-  border-radius: 16px;
+  border-radius: 8px;
   overflow: hidden;
+
   .editor-header {
     display: flex;
     padding: 6px 10px;
     justify-content: space-between;
     align-items: center;
     background-color: rgb(56, 56, 56);
+
     .ant-select-selector {
-      background-color: rgba(255, 255, 255, 0.09) !important;
-      color: rgba(255, 255, 255, 0.7);
+      background-color: rgba(255, 255, 255, 9%) !important;
+      color: rgba(255, 255, 255, 70%);
+
       .ant-select-selection-item {
-        color: rgba(255, 255, 255, 0.7);
+        color: rgba(255, 255, 255, 70%);
       }
     }
+
     .ant-select-arrow {
-      color: rgba(255, 255, 255, 0.7);
+      color: rgba(255, 255, 255, 70%);
     }
   }
   //  set scrollbar style

src/components/modal-footer/index.tsx

@@ -1,3 +1,4 @@
+import { useIntl } from '@umijs/max';
 import { Button, Space } from 'antd';
 
 type ModalFooterProps = {
@@ -18,10 +19,11 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
   htmlType = 'button',
   form
 }) => {
+  const intl = useIntl();
   return (
     <Space size={20}>
       <Button onClick={onCancel} style={{ width: '88px' }} loading={loading}>
-        {cancelText || '取消'}
+        {cancelText || intl.formatMessage({ id: 'common.button.cancel' })}
       </Button>
       <Button
         type="primary"
@@ -30,7 +32,7 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
         loading={loading}
         htmlType={htmlType}
       >
-        {okText || '保存'}
+        {okText || intl.formatMessage({ id: 'common.button.save' })}
       </Button>
     </Space>
   );

src/components/page-tools/index.tsx

@@ -14,7 +14,7 @@ const PageTools: React.FC<PageToolsProps> = (props) => {
     left,
     right,
     marginBottom = 0,
-    marginTop = 70,
+    marginTop = 60,
     style: pageStyle
   } = props;
 

src/components/progress-bar/index.tsx

@@ -29,12 +29,12 @@ const RenderProgress = memo(
           <Tooltip title={label}>
             <Progress
               percentPosition={{ align: 'center', type: 'inner' }}
-              size={[undefined, 12]}
+              size={[undefined, 16]}
               format={() => {
                 return (
                   <span
                     style={{
-                      color: 'var(--ant-color-text)'
+                      color: '#fff'
                     }}
                   >
                     {percent}%
@@ -49,12 +49,12 @@ const RenderProgress = memo(
           <Progress
             type="line"
             percentPosition={{ align: 'center', type: 'inner' }}
-            size={[undefined, 12]}
+            size={[undefined, 16]}
             format={() => {
               return (
                 <span
                   style={{
-                    color: 'var(--ant-color-text)'
+                    color: '#fff'
                   }}
                 >
                   {percent}%