merge

react-ui/config/defaultSettings.ts

@@ -19,7 +19,7 @@ const Settings: ProLayoutProps & {
   title: '复杂智能软件',
   pwa: true,
   logo: '/assets/images/left-top-logo.png',
-  iconfontUrl: '',
+  iconfontUrl: '//at.alicdn.com/t/c/font_4509211_dfghcwme8ki.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/config/proxy.ts

@@ -16,8 +16,8 @@ export default {
     '/api/': {
       // 要代理的地址
       // target: 'http://172.20.32.181:31205',
-      target: 'http://172.20.32.98:8082',
-      // target: 'http://172.20.32.150:8082',
+      // target: 'http://172.20.32.98:8082',
+      target: 'http://172.20.32.150:8082',
       // 配置了这个可以从 http 代理到 https
       // 依赖 origin 的功能可能需要这个，比如 cookie
       changeOrigin: true,

react-ui/src/assets/svg/save--return.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.545" height="15.046" viewBox="0 0 13.545 15.046"><defs><style>.a{fill:#1664ff;}</style></defs><path class="a" d="M143.094,101.214h5.614v3.363a1.006,1.006,0,0,0,1.139,1.139h3.363v7.115a.559.559,0,0,1-.075.248,1.247,1.247,0,0,1-.195.267.832.832,0,0,1-.542.3h-9.3a.832.832,0,0,1-.542-.3,1.247,1.247,0,0,1-.195-.267.559.559,0,0,1-.075-.248V102.025h0a.559.559,0,0,1,.075-.248,1.247,1.247,0,0,1,.195-.267.832.832,0,0,1,.542-.3Zm3.546,6.358.344-.344a.577.577,0,1,0-.816-.816l-1.315,1.315h0l0,0a.577.577,0,0,0,.4,1h3.037a.818.818,0,1,1,0,1.635H146.91a.577.577,0,0,0,0,1.154h1.374a1.971,1.971,0,1,0,0-3.943Zm3.327-7.4a.889.889,0,0,0-.634-.265h-6.239a2.116,2.116,0,0,0-2.12,2.12v10.805a2.116,2.116,0,0,0,2.12,2.12h9.3a2.166,2.166,0,0,0,2.12-2.12v-7.673a.889.889,0,0,0-.256-.624Zm.05,4.237v-2.317l2.317,2.317h-2.317Z" transform="translate(-140.974 -99.905)"/></svg>

react-ui/src/global.less

@@ -82,7 +82,7 @@ a{
   height: 98vh;
 }
 .ant-modal-confirm .ant-modal-confirm-paragraph{
-  margin: 40px 0 auto;
+  margin: 54px 0 auto;
   text-align: center;
 }
 .ant-modal-confirm-confirm .ant-modal-confirm-body>.anticon{
@@ -93,24 +93,36 @@ a{
   text-align: center;
 }
 .ant-modal-confirm-btns .ant-btn-default{
-  width:91px;
-height:42px;
+  width:110px;
+height:40px;
 background:rgba(22, 100, 255, 0.06);
 border-radius:10px;
 color:#1d1d20;
-font-size:16px;
+font-size:18px;
 margin-right: 10px;
+border-color: transparent;
 }
 .ant-modal-confirm-btns .ant-btn-default:hover{
   background:rgba(22, 100, 255, 0.06);
   border-color: transparent;
 }
 .ant-modal-confirm-btns .ant-btn-primary{
-  width:91px;
-  height:42px;
+  width:110px;
+  height:40px;
   background:#1664ff;
   border-radius:10px;
-  font-size: 16px;
+  font-size: 18px;
+}
+.ant-modal .ant-input-affix-wrapper{
+  height: 46px;
+  padding: 1px 11px;
+}
+.ant-modal  .ant-select-single{
+  height: 46px;
+  
+}
+.ant-modal .ant-select-single .ant-select-selector .ant-select-selection-placeholder{
+  line-height: 46px;
 }
 .ant-modal .ant-modal-close-x{
   border: 2px solid #272536;
@@ -134,6 +146,10 @@ background-image: url(/assets/images/modal-back.png);
 background-repeat:no-repeat;
 background-size:100%;
 background-position: top center;
+border-radius: 0;
+}
+.ant-modal .ant-modal-content {
+  border-radius: 20px;
 }
 .ant-modal .ant-modal-close:hover {
   background-color: transparent;

react-ui/src/pages/Experiment/experimentText/index.jsx

@@ -168,6 +168,32 @@ function ExperimentText() {
   }, [message]);
 
   const initGraph = () => {
+    const fittingString = (str, maxWidth, fontSize) => {
+      const ellipsis = '...';
+      const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
+      let currentWidth = 0;
+      let res = str;
+      const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
+      str.split('').forEach((letter, i) => {
+        if (currentWidth > maxWidth - ellipsisLength) return;
+        if (pattern.test(letter)) {
+          // Chinese charactors
+          currentWidth += fontSize;
+        } else {
+          // get the width of single letter according to the fontSize
+          currentWidth += G6.Util.getLetterWidth(letter, fontSize);
+        }
+        if (currentWidth > maxWidth - ellipsisLength) {
+          res = `${str.substr(0, i)}${ellipsis}`;
+        }
+      });
+      return res;
+    };
+    // 获取文本的长度
+    const getTextSize = (str, maxWidth, fontSize) => {
+      let width = G6.Util.getTextSize(str, fontSize)[0];
+      return width > maxWidth ? maxWidth : width;
+    };
     G6.registerNode(
       'rect-node',
       {
@@ -194,19 +220,21 @@ function ExperimentText() {
             },
             draggable: true,
           });
-          // if (cfg.label) {
-          //   group.addShape('text', {
-          //     attrs: {
-          //       x: 0,
-          //       y: cfg.height / 2 - 5,
-          //       textAlign: 'center',
-          //       textBaseline: 'middle',
-          //       text: cfg.label,
-          //       fill: '#fff',
-          //     },
-          //     draggable: true,
-          //   });
-          // }
+          if (cfg.label) {
+            group.addShape('text', {
+              attrs: {
+                text: fittingString(cfg.label, 70, 10),
+                x: -20,
+                y: 0,
+                fontSize: 10,
+                textAlign: 'left',
+                textBaseline: 'middle',
+                fill: '#000',
+              },
+              name: 'text-shape',
+              draggable: true,
+            });
+          }
           const bbox = group.getBBox();
           const anchorPoints = this.getAnchorPoints(cfg);
           // console.log(anchorPoints);
@@ -357,8 +385,8 @@ function ExperimentText() {
         },
       },
       // linkCenter: true,
-      fitView: false,
-      fitViewPadding: [60, 60, 60, 80],
+      fitView: true,
+      fitViewPadding: [320, 320, 220, 320],
     });
 
     graph.on('dblclick', handlerClick);

react-ui/src/pages/Experiment/experimentText/props.jsx

@@ -390,6 +390,7 @@ const Props = forwardRef(({ onParentChange }, ref) => {
       <Drawer
         title="任务执行详情"
         placement="right"
+        rootStyle={{ marginTop: '45px' }}
         closeIcon={false}
         onClose={onClose}
         afterOpenChange={afterOpenChange}

react-ui/src/pages/Pipeline/editPipeline/index.jsx

@@ -1,4 +1,5 @@
 import { ReactComponent as ParameterIcon } from '@/assets/svg/parameter.svg';
+import { ReactComponent as SaveAndReturn } from '@/assets/svg/save--return.svg';
 import { useAntdModal } from '@/hooks';
 import { getWorkflowById, saveWorkflow } from '@/services/pipeline/index.js';
 import { to } from '@/utils/promise';
@@ -606,8 +607,8 @@ const EditPipeline = () => {
         },
       },
       // linkCenter: true,
-      fitView: false,
-      fitViewPadding: [60, 60, 60, 80],
+      fitView: true,
+      fitViewPadding: [320, 320, 220, 320],
     });
     graph.on('dblclick', (e) => {
       console.log(e.item);
@@ -722,7 +723,13 @@ const EditPipeline = () => {
           </Button>
           <Button
             type="primary"
-            icon={<SaveOutlined />}
+            style={{
+              border: '1px solid',
+              borderColor: '#1664ff',
+              background: '#fff',
+              color: '#1664ff',
+            }}
+            icon={<SaveAndReturn />}
             onClick={() => {
               savePipeline(true);
             }}

react-ui/src/pages/Pipeline/editPipeline/modelMenus.jsx

@@ -24,7 +24,7 @@ const modelMenus = ({ onParDragEnd }) => {
   useEffect(() => {
     getComponentAll().then((ret) => {
       console.log(ret);
-      if (ret.code == 200) {
+      if (ret.code === 200) {
         setModelMenusList(ret.data);
       }
     });
@@ -43,32 +43,38 @@ const modelMenus = ({ onParDragEnd }) => {
   return (
     <div style={{ width: '250px', height: '99%' }} className={Styles.collapse}>
       <div className={Styles.modelMenusTitle}>组件库</div>
-      <Collapse collapsible="header" defaultActiveKey={['1']} expandIconPosition="end">
-        {modelMenusList && modelMenusList.length > 0
-          ? modelMenusList.map((item) => (
-              <Panel header={<div>{item.name}</div>} key={item.key}>
-                {item.value && item.value.length > 0
-                  ? item.value.map((ele) => (
-                      <div
-                        draggable="true"
-                        onDragEnd={(e) => {
-                          dragEnd(e, ele);
-                        }}
-                        className={Styles.collapseItem}
-                      >
-                        <img
-                          style={{ height: '16px', marginRight: '15px' }}
-                          src={`/assets/images/${ele.icon_path}.png`}
-                          alt=""
-                        />
-                        {ele.component_label}
-                      </div>
-                    ))
-                  : ''}
-              </Panel>
-            ))
-          : ''}
-      </Collapse>
+      {modelMenusList && modelMenusList.length > 0 ? (
+        <Collapse
+          collapsible="header"
+          defaultActiveKey={modelMenusList.map((item) => item.key + '')}
+          expandIconPosition="end"
+        >
+          {modelMenusList && modelMenusList.length > 0
+            ? modelMenusList.map((item) => (
+                <Panel header={<div>{item.name}</div>} key={item.key}>
+                  {item.value && item.value.length > 0
+                    ? item.value.map((ele) => (
+                        <div
+                          draggable="true"
+                          onDragEnd={(e) => {
+                            dragEnd(e, ele);
+                          }}
+                          className={Styles.collapseItem}
+                        >
+                          <img
+                            style={{ height: '16px', marginRight: '15px' }}
+                            src={`/assets/images/${ele.icon_path}.png`}
+                            alt=""
+                          />
+                          {ele.component_label}
+                        </div>
+                      ))
+                    : ''}
+                </Panel>
+              ))
+            : ''}
+        </Collapse>
+      ) : null}
     </div>
   );
 };

react-ui/src/pages/Pipeline/editPipeline/props.jsx

@@ -81,25 +81,22 @@ const Props = forwardRef(({ onParentChange }, ref) => {
       <Drawer
         title="编辑任务"
         placement="right"
+        rootStyle={{ marginTop: '45px' }}
         getContainer={false}
         closeIcon={false}
         onClose={onClose}
         afterOpenChange={afterOpenChange}
         open={open}
+        width={540}
       >
         <Form
           name="form"
           form={form}
-          layout="vertical"
-          labelCol={{
-            span: 16,
-          }}
-          wrapperCol={{
-            span: 16,
-          }}
-          style={{
-            maxWidth: 600,
-          }}
+          // layout="vertical"
+          labelCol={{ span: 10 }}
+          wrapperCol={{ span: 20 }}
+          // initialValues={{ global_param: globalParam }}
+          labelAlign="left"
           initialValues={{
             remember: true,
           }}

react-ui/src/services/session.ts

@@ -2,13 +2,15 @@ import { createIcon } from '@/utils/IconUtil';
 import { MenuDataItem } from '@ant-design/pro-components';
 import { request } from '@umijs/max';
 import React, { lazy } from 'react';
-
+import { createFromIconfontCN } from '@ant-design/icons';
 let remoteMenu: any = null;
 
 export function getRemoteMenu() {
   return remoteMenu;
 }
-
+const IconFont  = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
+});
 export function setRemoteMenu(data: any) {
   remoteMenu = data;
 }
@@ -100,7 +102,8 @@ export function convertCompatRouters(childrens: API.RoutersMenuItem[]): any[] {
   return childrens.map((item: API.RoutersMenuItem) => {
     return {
       path: item.path,
-      icon: createIcon(item.meta.icon),
+      // icon:'icon-a-057_fenlei',
+      icon: 'icon-'+item.meta.icon,
       //  icon: item.meta.icon,
       name: item.meta.title,
       routes: item.children ? convertCompatRouters(item.children) : undefined,

react-ui/src/utils/IconUtil.ts

@@ -14,6 +14,7 @@ export function createIcon(icon: string | any): React.ReactNode | string {
   }
   const ele = allIcons[icon];
   if (ele) {
+    
     return React.createElement(allIcons[icon]);
   }
   return '';