style: 修改全局样式

react-ui/config/defaultSettings.ts

@@ -19,7 +19,7 @@ const Settings: ProLayoutProps & {
   title: '智能软件开发平台',
   pwa: true,
   logo: '/assets/images/left-top-logo.png',
-  iconfontUrl: '//at.alicdn.com/t/c/font_4511326_1cmi0j3dj1x.js',
+  iconfontUrl: '//at.alicdn.com/t/c/font_4511326_t634djsqobs.js',
   token: {
     // 参见ts声明，demo 见文档，通过token 修改样式
     //https://procomponents.ant.design/components/layout#%E9%80%9A%E8%BF%87-token-%E4%BF%AE%E6%94%B9%E6%A0%B7%E5%BC%8F

react-ui/src/app.tsx

@@ -215,6 +215,7 @@ export const antd: RuntimeAntdConfig = (memo) => {
     colorError: themes['errorColor'],
     colorWarning: themes['warningColor'],
     colorLink: themes['primaryColor'],
+    colorText: themes['textColor'],
   };
   memo.theme.components ??= {};
   memo.theme.components.Tabs = {};
@@ -229,10 +230,11 @@ export const antd: RuntimeAntdConfig = (memo) => {
     defaultActiveBorderColor: 'rgba(22, 100, 255, 0.75)',
     defaultActiveColor: themes['primaryColor'],
     contentFontSize: parseInt(themes['fontSize']),
-    controlHeight: 34,
   };
   memo.theme.components.Input = {
-    inputFontSize: parseInt(themes['fontSize']),
+    inputFontSize: parseInt(themes['fontSizeInput']),
+    inputFontSizeLG: parseInt(themes['fontSizeInputLg']),
+    paddingBlockLG: 10,
   };
   memo.theme.components.Table = {
     headerBg: 'rgba(242, 244, 247, 0.36)',
@@ -241,6 +243,11 @@ export const antd: RuntimeAntdConfig = (memo) => {
   memo.theme.components.Tabs = {
     titleFontSize: 16,
   };
+
+  memo.theme.components.Form = {
+    labelColor: 'rgba(29, 29, 32, 0.8);',
+  };
+
   memo.theme.cssVar = true;
   // memo.theme.hashed = false;
 

react-ui/src/components/KFModal/index.less

@@ -17,7 +17,7 @@
     margin-top: 40px;
 
     .ant-btn {
-      height: 40px;
+      height: 42px;
       padding: 0 30px;
       font-size: @font-size-content;
       border-radius: 10px;

react-ui/src/components/KFRadio/index.less

@@ -23,6 +23,11 @@
     &--active {
       color: @primary-color;
       border: 1px solid @primary-color;
+
+      &:hover {
+        color: @primary-color;
+        border: 1px solid @primary-color;
+      }
     }
 
     & + & {

react-ui/src/overrides.less

@@ -57,11 +57,6 @@
   overflow-y: auto;
 }
 
-// Input
-.ant-input-textarea-affix-wrapper.ant-input-affix-wrapper {
-  padding: 0;
-}
-
 // Modal
 .ant-modal {
   .ant-modal-close {
@@ -81,18 +76,24 @@
     }
   }
 
+  .ant-form-item .ant-form-item-label > label {
+    font-size: @font-size;
+  }
+
+  // 输入框高度为46px
   .ant-input-affix-wrapper {
-    height: 46px;
-    padding: 1px 11px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+
+    .ant-input {
+      height: 40px;
+    }
   }
 
+  // 选择框高度为46px
   .ant-select-single {
     height: 46px;
   }
-
-  .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
-    line-height: 46px;
-  }
 }
 
 // Confirm Modal
@@ -137,3 +138,11 @@
     }
   }
 }
+
+.ant-form-large {
+  .ant-form-item-label {
+    label {
+      font-size: @font-size;
+    }
+  }
+}

react-ui/src/pages/Experiment/experimentText/addExperimentModal.less

@@ -1,17 +1,4 @@
 .modal {
-  :global {
-    // .ant-input {
-    //   height: 30px;
-    //   border-color: #e6e6e6;
-    // }
-    // .ant-select-single {
-    //   height: 40px;
-    // }
-    .ant-form-item .ant-form-item-label > label {
-      color: rgba(29, 29, 32, 0.8);
-    }
-  }
-
   .global_param_item {
     max-height: 230px;
     padding: 24px 12px 0;

react-ui/src/pages/Experiment/experimentText/addExperimentModal.tsx

@@ -132,6 +132,7 @@ function AddExperimentModal({
         {...layout}
         labelAlign="left"
         labelWrap
+        size="large"
       >
         <Form.Item
           label="实验名称"

react-ui/src/pages/Mirror/create.less

@@ -9,9 +9,9 @@
     background-color: white;
     border-radius: 10px;
 
-    &__title {
-      display: flex;
-      align-items: center;
+    &__type {
+      color: @text-color;
+      font-size: @font-size-input-lg;
     }
   }
 }

react-ui/src/pages/Mirror/create.tsx

@@ -118,6 +118,7 @@ function MirrorCreate() {
     navgite(-1);
   };
 
+  // 上传前认证
   const beforeUpload: UploadProps['beforeUpload'] = () => {
     const fileList = form.getFieldValue('fileList');
     if (Array.isArray(fileList) && fileList.length >= 1) {
@@ -134,12 +135,13 @@ function MirrorCreate() {
         <div>
           <Form
             name="mirror-create"
-            labelCol={{ flex: '120px' }}
+            labelCol={{ flex: '130px' }}
             wrapperCol={{ flex: 1 }}
             labelAlign="left"
             form={form}
             initialValues={{ upload_type: CommonTabKeys.Public }}
             onFinish={handleSubmit}
+            size="large"
           >
             <SubAreaTitle
               title="基本信息"
@@ -242,7 +244,7 @@ function MirrorCreate() {
                       <Row gutter={10}>
                         <Col span={10}>
                           <Form.Item label="仓库类型" required>
-                            <span>公网</span>
+                            <span className={styles['mirror-create__content__type']}>公网</span>
                           </Form.Item>
                         </Col>
                       </Row>

react-ui/src/pages/Mirror/list.less

@@ -20,7 +20,7 @@
     }
 
     &__table {
-      height: calc(100% - 34px - 28px);
+      height: calc(100% - 32px - 28px);
       margin-top: 28px;
     }
   }

react-ui/src/pages/Model/index.less

@@ -190,8 +190,8 @@
     flex: 1;
     flex-direction: column;
     height: 100%;
-    overflow-y: auto;
     padding: 22px 30px 26px 30px;
+    overflow-y: auto;
     background: #ffffff;
     box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
     .dataSource {
@@ -212,17 +212,17 @@
       .dataItem {
         position: relative;
         width: 23.8%;
-        height:164px;
+        height: 164px;
         margin: 0 20px 25px 0;
         background: #ffffff;
         border: 1px solid;
         border-color: #eaeaea;
         border-radius: 4px;
         cursor: pointer;
-        .dropdown{
+        .dropdown {
           position: absolute;
-          right: 20px;
           top: 15px;
+          right: 20px;
         }
         .itemText {
           position: absolute;
@@ -281,9 +281,9 @@
     }
   }
 }
-.tipContent{
-  color: #c73131;
+.tipContent {
   margin-top: 5px;
+  color: #c73131;
 }
 .modal {
   :global {
@@ -314,7 +314,7 @@
     }
     .ant-btn {
       width: 110px;
-      height: 40px;
+      height: 42px;
       font-size: 18px;
       background: rgba(22, 100, 255, 0.06);
       border-color: transparent;

react-ui/src/pages/Model/modelIntro.jsx

@@ -19,7 +19,7 @@ const { TabPane } = Tabs;
 
 const Dataset = () => {
   const props = {
-    action: '/api/mmp/dataset/upload',
+    action: '/api/mmp/models/upload',
     // headers: {
     // 'X-Requested-With': null
     // },

react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.tsx

@@ -162,7 +162,6 @@ const GlobalParamsDrawer = forwardRef(
             )}
           </Form.List>
         </Form>
-        {/* //{contextHolder} */}
       </Drawer>
     );
   },

react-ui/src/pages/Workspace/components/AssetsManagement/index.tsx

@@ -35,10 +35,10 @@ function AssetsManagement() {
           title: '组件',
           value: component,
         },
-        {
-          title: '代码配置',
-          value: 0,
-        },
+        // {
+        //   title: '代码配置',
+        //   value: 0,
+        // },
         {
           title: '流水线模版',
           value: workflow,
@@ -64,9 +64,8 @@ function AssetsManagement() {
           ]}
         />
       </Flex>
-
-      <div className={styles['assets-management__increase']}>今日新增数量：5</div>
-      <Flex justify="space-between" gap="22px 0" wrap="wrap">
+      {/* <div className={styles['assets-management__increase']}>今日新增数量：5</div> */}
+      <Flex gap="22px 0" wrap="wrap" style={{ marginTop: '30px' }}>
         {assetCounts.map((item, index) => (
           <div className={styles['assets-management__summary']} key={index}>
             <div className={styles['assets-management__summary__title']}>{item.title}</div>

react-ui/src/pages/Workspace/components/ExperimentChart/index.less

@@ -2,6 +2,6 @@
   width: 295px;
   min-width: 295px;
   height: 140px;
-  background-color: @workspace-background;
+  background: @workspace-background;
   border-radius: 4px;
 }

react-ui/src/pages/Workspace/components/ExperimentTable/index.less

@@ -3,7 +3,7 @@
   min-width: 500px;
   height: 140px;
   padding: 12px 24px;
-  background-color: @workspace-background;
+  background: @workspace-background;
   border-radius: 4px;
 
   &__header {

react-ui/src/pages/Workspace/components/TotalStatistics/index.less

@@ -4,7 +4,7 @@
   justify-content: center;
   width: 400px;
   height: 140px;
-  background-color: @workspace-background;
+  background: @workspace-background;
   border-radius: 4px;
 
   &__icon {

react-ui/src/pages/Workspace/components/UserSpace/index.less

@@ -20,8 +20,7 @@
   &__avatar {
     position: relative;
     top: -28px;
-    width: 56px;
-    height: 56px;
+    background-color: white;
   }
 
   &__name {
@@ -56,10 +55,5 @@
       background-color: rgba(153, 153, 153, 0.13);
       border-radius: 50%;
     }
-
-    &__user {
-      width: 36px;
-      height: 36px;
-    }
   }
 }

react-ui/src/pages/Workspace/components/UserSpace/index.tsx

@@ -1,5 +1,5 @@
 import { useModel } from '@umijs/max';
-import { Divider, Flex, Space } from 'antd';
+import { Avatar, Divider, Flex, Space } from 'antd';
 import styles from './index.less';
 
 type UserSpaceProps = {
@@ -14,7 +14,14 @@ function UserSpace({ users = [] }: UserSpaceProps) {
     <div className={styles['user-space']}>
       <div className={styles['user-space__title']}>工作空间管理</div>
       <div style={{ padding: '0 20px' }}>
-        <img className={styles['user-space__avatar']} src={currentUser?.avatar} alt="" />
+        <Avatar
+          size={56}
+          shape="circle"
+          className={styles['user-space__avatar']}
+          src={currentUser?.avatar}
+          alt=""
+          icon={<img src={require('@/assets/img/avatar-default.png')} width={56} height={56} />}
+        ></Avatar>
         <div className={styles['user-space__name']}>{currentUser?.nickName}</div>
         <div className={styles['user-space__role']}>{currentUser?.roleNames?.[0]?.roleName}</div>
         <Divider
@@ -29,12 +36,15 @@ function UserSpace({ users = [] }: UserSpaceProps) {
           <Flex align="center" gap={12} wrap="wrap">
             {users?.map((item, index) => {
               return (
-                <img
-                  className={styles['user-space__participant__user']}
+                <Avatar
                   key={index}
+                  size={36}
                   src={require(`@/assets/img/user-avatar/${index + 1}.png`)}
                   alt=""
-                />
+                  icon={
+                    <img src={require('@/assets/img/avatar-default.png')} width={36} height={36} />
+                  }
+                ></Avatar>
               );
             })}
           </Flex>

react-ui/src/pages/Workspace/index.less

@@ -5,6 +5,7 @@
   background-color: linear-gradient(#ecf2fe, #f9fafb);
 
   &__overview {
+    gap: 15px;
     margin-bottom: 16px;
     padding: 20px 30px;
     background-color: white;

react-ui/src/requestConfig.ts

@@ -25,21 +25,6 @@ export const requestConfig: RequestConfig = {
         if (accessToken) {
           headers['Authorization'] = `Bearer ${accessToken}`;
         }
-        // const expireTime = getTokenExpireTime();
-        // if (expireTime) {
-        //   const left = Number(expireTime) - new Date().getTime();
-        //   const refreshToken = getRefreshToken();
-        //   if (left < 0 && refreshToken) {
-        //     clearSessionToken();
-        //   } else {
-        //     const accessToken = getAccessToken();
-        //     if (accessToken) {
-        //       headers['Authorization'] = `Bearer ${accessToken}`;
-        //     }
-        //   }
-        // } else {
-        //   clearSessionToken();
-        // }
       }
       return { url, options };
     },
@@ -55,6 +40,8 @@ export const requestConfig: RequestConfig = {
           clearSessionToken();
           setRemoteMenu(null);
           gotoLoginPage(false);
+          message.error(data?.msg ?? '请重新登录');
+          return Promise.reject(response);
         } else {
           message.error(data?.msg ?? '请求失败');
           return Promise.reject(response);

react-ui/src/styles/theme.less

@@ -36,6 +36,8 @@
 @font-size: 15px;
 @font-size-title: 18px;
 @font-size-content: 16px;
+@font-size-input: 14px;
+@font-size-input-lg: 16px;
 
 // 函数
 .addAlpha(@color, @alpha) {
@@ -55,5 +57,9 @@
   textColor: @text-color;
   textColorSecondary: @text-color-secondary;
   fontSize: @font-size;
+  fontSizeTitle: @font-size-title;
+  fontSizeContent: @font-size-content;
+  fontSizeInput: @font-size-input;
+  fontSizeInputLg: @font-size-input-lg;
   siderBGColor: @sider-background-color;
 }