From b06a502ebe51434b8d4494e2b836e49271fda1ce Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Mon, 24 Jun 2024 16:56:36 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=80=E5=8F=91=E7=8E=AF=E5=A2=83?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E4=BD=BF=E7=94=A8iframe?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/config/routes.ts | 5 ++++ .../DevelopmentEnvironment/Editor/index.tsx | 25 +++++++++++++++++++ .../DevelopmentEnvironment/List/index.tsx | 15 ++++++++--- .../pages/DevelopmentEnvironment/index.tsx | 22 ---------------- .../src/pages/Pipeline/editPipeline/index.jsx | 10 ++++---- .../services/developmentEnvironment/index.ts | 3 +-- react-ui/src/utils/sessionStorage.ts | 2 ++ react-ui/tsconfig.json | 1 + 8 files changed, 51 insertions(+), 32 deletions(-) create mode 100644 react-ui/src/pages/DevelopmentEnvironment/Editor/index.tsx delete mode 100644 react-ui/src/pages/DevelopmentEnvironment/index.tsx diff --git a/react-ui/config/routes.ts b/react-ui/config/routes.ts index 74390abf..81076627 100644 --- a/react-ui/config/routes.ts +++ b/react-ui/config/routes.ts @@ -119,6 +119,11 @@ export default [ path: 'create', component: './DevelopmentEnvironment/Create', }, + { + name: '编辑器', + path: 'editor', + component: './DevelopmentEnvironment/Editor', + }, ], }, { diff --git a/react-ui/src/pages/DevelopmentEnvironment/Editor/index.tsx b/react-ui/src/pages/DevelopmentEnvironment/Editor/index.tsx new file mode 100644 index 00000000..b113d76b --- /dev/null +++ b/react-ui/src/pages/DevelopmentEnvironment/Editor/index.tsx @@ -0,0 +1,25 @@ +import { editorUrl, getSessionStorageItem, removeSessionStorageItem } from '@/utils/sessionStorage'; +import { useEffect, useState } from 'react'; + +function DevEditor() { + const [iframeUrl, setIframeUrl] = useState(''); + useEffect(() => { + const url = getSessionStorageItem(editorUrl) || ''; + setIframeUrl(url); + return () => { + removeSessionStorageItem(editorUrl); + }; + }, []); + + // const requestJupyterUrl = async () => { + // const [res, error] = await to(getJupyterUrl()); + // if (res) { + // setIframeUrl(res.data as string); + // } else { + // console.log(error); + // } + // }; + + return ; +} +export default DevEditor; diff --git a/react-ui/src/pages/DevelopmentEnvironment/List/index.tsx b/react-ui/src/pages/DevelopmentEnvironment/List/index.tsx index 76f0dcb9..c7b22c6a 100644 --- a/react-ui/src/pages/DevelopmentEnvironment/List/index.tsx +++ b/react-ui/src/pages/DevelopmentEnvironment/List/index.tsx @@ -16,6 +16,7 @@ import { } from '@/services/developmentEnvironment'; import themes from '@/styles/theme.less'; import { to } from '@/utils/promise'; +import { editorUrl, setSessionStorageItem } from '@/utils/sessionStorage'; import { modalConfirm } from '@/utils/ui'; import { useNavigate } from '@umijs/max'; import { @@ -128,6 +129,16 @@ function EditorList() { }); }; + // 跳转编辑器页面 + const gotoEditorPage = (e: React.MouseEvent, record: EditorData) => { + e.stopPropagation(); + setSessionStorageItem(editorUrl, record.url); + navigate(`/developmentEnvironment/editor`); + setCacheState({ + pagination, + }); + }; + // 分页切换 const handleTableChange: TableProps['onChange'] = (pagination, filters, sorter, { action }) => { if (action === 'paginate') { @@ -143,9 +154,7 @@ function EditorList() { width: '30%', render: (text, record) => record.url ? ( - - {text} - + gotoEditorPage(e, record)}>{text} ) : ( {text ?? '--'} ), diff --git a/react-ui/src/pages/DevelopmentEnvironment/index.tsx b/react-ui/src/pages/DevelopmentEnvironment/index.tsx deleted file mode 100644 index c2e09d35..00000000 --- a/react-ui/src/pages/DevelopmentEnvironment/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { getJupyterUrl } from '@/services/developmentEnvironment'; -import { to } from '@/utils/promise'; -import { useEffect, useState } from 'react'; - -const DevelopmentEnvironment = () => { - const [iframeUrl, setIframeUrl] = useState(''); - useEffect(() => { - requestJupyterUrl(); - }, []); - - const requestJupyterUrl = async () => { - const [res, error] = await to(getJupyterUrl()); - if (res) { - setIframeUrl(res.data as string); - } else { - console.log(error); - } - }; - - return ; -}; -export default DevelopmentEnvironment; diff --git a/react-ui/src/pages/Pipeline/editPipeline/index.jsx b/react-ui/src/pages/Pipeline/editPipeline/index.jsx index c51ce935..2f434cb0 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/index.jsx +++ b/react-ui/src/pages/Pipeline/editPipeline/index.jsx @@ -93,11 +93,11 @@ const EditPipeline = () => { return; } - // const [propsRes, propsError] = await to(propsRef.current.getFieldsValue()); - // if (propsError) { - // message.error('基本信息必填项需配置'); - // return; - // } + const [propsRes, propsError] = await to(propsRef.current.getFieldsValue()); + if (propsError) { + message.error('节点必填项必须配置'); + return; + } propsRef.current.propClose(); setTimeout(() => { const data = graph.save(); diff --git a/react-ui/src/services/developmentEnvironment/index.ts b/react-ui/src/services/developmentEnvironment/index.ts index dbe2717a..330f76d3 100644 --- a/react-ui/src/services/developmentEnvironment/index.ts +++ b/react-ui/src/services/developmentEnvironment/index.ts @@ -1,9 +1,8 @@ import { request } from '@umijs/max'; // 查询开发环境url -export function getJupyterUrl(params: any) { +export function getJupyterUrl() { return request(`/api/mmp/jupyter/getURL`, { method: 'GET', - params, }); } diff --git a/react-ui/src/utils/sessionStorage.ts b/react-ui/src/utils/sessionStorage.ts index 6018dbe7..a8632070 100644 --- a/react-ui/src/utils/sessionStorage.ts +++ b/react-ui/src/utils/sessionStorage.ts @@ -2,6 +2,8 @@ export const mirrorNameKey = 'mirror-name'; // 模型部署 export const modelDeploymentInfoKey = 'model-deployment-info'; +// 编辑器 url +export const editorUrl = 'editor-url'; export const getSessionStorageItem = (key: string, isObject: boolean = false) => { const jsonStr = sessionStorage.getItem(key); diff --git a/react-ui/tsconfig.json b/react-ui/tsconfig.json index 9922437a..0afa8788 100644 --- a/react-ui/tsconfig.json +++ b/react-ui/tsconfig.json @@ -20,6 +20,7 @@ "noUnusedParameters": true, // 报告未使用的参数错误 "incremental": true, // 通过读写磁盘上的文件来启用增量编译 "noFallthroughCasesInSwitch": true, // 报告switch语句中的fallthrough案例错误 + "strictNullChecks": true, // 启用严格的null检查 "baseUrl": "./", "paths": { "@/*": ["src/*"],