diff --git a/react-ui/config/defaultSettings.ts b/react-ui/config/defaultSettings.ts index b443031..35d75e3 100644 --- a/react-ui/config/defaultSettings.ts +++ b/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 diff --git a/react-ui/config/proxy.ts b/react-ui/config/proxy.ts index 527bff7..2b02d8f 100644 --- a/react-ui/config/proxy.ts +++ b/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, diff --git a/react-ui/public/assets/images/icon/流水线-1.png b/react-ui/public/assets/images/icon/流水线-1.png new file mode 100644 index 0000000..7fbb926 Binary files /dev/null and b/react-ui/public/assets/images/icon/流水线-1.png differ diff --git a/react-ui/src/assets/svg/save--return.svg b/react-ui/src/assets/svg/save--return.svg new file mode 100644 index 0000000..73fd196 --- /dev/null +++ b/react-ui/src/assets/svg/save--return.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/react-ui/src/global.less b/react-ui/src/global.less index 22ff008..4e5353a 100644 --- a/react-ui/src/global.less +++ b/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; diff --git a/react-ui/src/pages/Experiment/experimentText/index.jsx b/react-ui/src/pages/Experiment/experimentText/index.jsx index 15fd0f5..8ff58c1 100644 --- a/react-ui/src/pages/Experiment/experimentText/index.jsx +++ b/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); diff --git a/react-ui/src/pages/Experiment/experimentText/props.jsx b/react-ui/src/pages/Experiment/experimentText/props.jsx index a8fc72d..886f117 100644 --- a/react-ui/src/pages/Experiment/experimentText/props.jsx +++ b/react-ui/src/pages/Experiment/experimentText/props.jsx @@ -390,6 +390,7 @@ const Props = forwardRef(({ onParentChange }, ref) => { { }, }, // 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 = () => {