style: ui style

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}%

src/components/seal-form/components/wrapper.less

@@ -3,11 +3,12 @@
   @inputheight: 32px;
   @borderRadius: 8px;
   @input-inner-padding: 12px;
+  @bgColor: transparent;
 
   position: relative;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   height: 54px;
   border-width: var(--ant-line-width);
   border-style: var(--ant-line-type);
@@ -15,6 +16,7 @@
   border-radius: @borderRadius;
   padding-inline: 12px;
   padding-block: 20px 0;
+  background-color: var(--color-white-1);
 
   &.filled {
     border: none;
@@ -105,6 +107,7 @@
   }
 
   // ==================== select ==================
+
   :global(.ant-select) {
     display: flex;
     align-items: center;
@@ -118,6 +121,7 @@
     padding-block: 5px;
     padding-inline: @input-inner-padding !important;
     box-shadow: none !important;
+    background-color: @bgColor !important;
   }
 
   :global(.ant-select-selection-item) {
@@ -127,6 +131,10 @@
     padding-inline-end: 0 !important;
   }
 
+  :global(.ant-select-auto-complete) :global(.ant-select-selector) {
+    padding-inline: 0 !important;
+  }
+
   :global(.ant-select-arrow) {
     top: 10px;
   }
@@ -144,6 +152,7 @@
   // ==================== input ====================
   :global(.ant-input),
   :global(.ant-input-password) {
+    width: 100%;
     display: flex;
     align-items: center;
     border: none;
@@ -151,6 +160,11 @@
     padding-block: 5px;
     padding-inline: 12px;
     height: @inputheight !important;
+    background-color: @bgColor;
+  }
+
+  :global(.ant-input.seal-textarea) {
+    width: 100%;
   }
 
   :global(.ant-input-number) {
@@ -160,6 +174,7 @@
     box-shadow: none;
     padding: 0;
     height: @inputheight !important;
+    background-color: @bgColor;
   }
 
   :global(.ant-input-outlined) {
@@ -170,6 +185,7 @@
     padding-block: 5px;
     padding-inline: @input-inner-padding;
     height: @inputheight !important;
+    background-color: transparent;
 
     &.seal-textarea {
       min-height: 100px !important;
@@ -213,7 +229,7 @@
   :global(.ant-input-search-button) {
     position: absolute;
     top: -20px;
-    right: -11px;
+    right: 0;
     border-radius: 0 @borderRadius @borderRadius 0 !important;
     overflow: hidden;
     border: none;

src/components/seal-form/password.tsx

@@ -68,6 +68,7 @@ const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
         {...rest}
         ref={inputRef}
         autoComplete="off"
+        className="seal-input-password"
         onFocus={handleOnFocus}
         onBlur={handleOnBlur}
         onChange={handleChange}

src/components/seal-table/styles/cell.less

@@ -4,13 +4,16 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  height: 70px;
+  height: 68px;
+
   &-left {
     justify-content: flex-start;
   }
+
   &-right {
     justify-content: flex-end;
   }
+
   &-center {
     justify-content: center;
   }

src/components/seal-table/styles/index.less

@@ -23,7 +23,7 @@
     margin-bottom: 20px;
     border-radius: var(--ant-table-header-border-radius);
     overflow: hidden;
-    box-shadow: var(--box-shadow-base);
+    // box-shadow: var(--box-shadow-base);
   }
 
   .expanded-row {
@@ -39,7 +39,7 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    background-color: var(--color-white-1);
+    background-color: var(--color-fill-sider);
     transition: all 0.2s ease;
 
     &:hover {

src/components/transition/index.less

@@ -1,5 +1,5 @@
 .transition-wrapper {
-  border-radius: 16px;
+  border-radius: 8px;
   display: flex;
   flex-direction: column;
   overflow: hidden;

src/components/util-bar/index.tsx

@@ -25,12 +25,12 @@ const UitilBar: React.FC<UitilBarProps> = (props) => {
 
   const strokeColorFunc = (percent: number) => {
     if (percent <= 50) {
-      return 'var(--ant-color-primary)';
+      return 'var(--color-chart-green)';
     }
     if (percent <= 80) {
-      return 'var(--ant-color-warning)';
+      return 'var(--color-chart-glod)';
     }
-    return 'var(--ant-color-error)';
+    return 'var(--color-chart-red)';
   };
   return (
     <div className="util-bar-box">