From 68dd82f00b7465c735658c409b55153138af2b3a Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Sun, 7 Apr 2024 09:16:08 +0800 Subject: [PATCH 1/3] =?UTF-8?q?chore:=20=E4=BB=A3=E7=A0=81=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/src/app.tsx | 29 +++++++++---------- .../Experiment/experimentText/LogList.tsx | 7 +++-- .../Experiment/experimentText/logGroup.tsx | 23 ++++++++------- .../pages/Experiment/experimentText/props.jsx | 8 +++-- react-ui/src/pages/Experiment/status.ts | 11 ------- react-ui/src/pages/Experiment/types.ts | 10 +++++++ react-ui/src/requestConfig.ts | 10 +++---- react-ui/src/services/session.ts | 7 ++--- react-ui/tsconfig.json | 5 ++-- 9 files changed, 53 insertions(+), 57 deletions(-) diff --git a/react-ui/src/app.tsx b/react-ui/src/app.tsx index 07fa0094..ee86b5cd 100644 --- a/react-ui/src/app.tsx +++ b/react-ui/src/app.tsx @@ -2,7 +2,6 @@ import RightContent from '@/components/RightContent'; import type { Settings as LayoutSettings } from '@ant-design/pro-components'; import type { RunTimeLayoutConfig } from '@umijs/max'; import { history } from '@umijs/max'; -import axios from 'axios'; import defaultSettings from '../config/defaultSettings'; import '../public/fonts/font.css'; import { getAccessToken } from './access'; @@ -17,8 +16,7 @@ import { setRemoteMenu, } from './services/session'; export { requestConfig as request } from './requestConfig'; -axios.defaults.baseUrl = 'http://172.20.32.150:8082'; -const isDev = process.env.NODE_ENV === 'development'; +// const isDev = process.env.NODE_ENV === 'development'; /** * @see https://umijs.org/zh-CN/plugins/plugin-initial-state @@ -34,10 +32,9 @@ export async function getInitialState(): Promise<{ const response = await getUserInfo({ skipErrorHandler: true, }); - if (response.user.avatar === '') { - response.user.avatar = - 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'; - } + response.user.avatar = + response.user.avatar || + 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'; return { ...response.user, permissions: response.permissions, @@ -66,7 +63,7 @@ export async function getInitialState(): Promise<{ } // ProLayout 支持的api https://procomponents.ant.design/components/layout -export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => { +export const layout: RunTimeLayoutConfig = ({ initialState }) => { return { rightContentRender: () => , waterMarkProps: { @@ -155,26 +152,26 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) = }; }; -export async function onRouteChange({ clientRoutes, location }) { +export async function onRouteChange({ clientRoutes, location }: any) { const menus = getRemoteMenu(); - // console.log('onRouteChange', clientRoutes, location, menus); + console.log('onRouteChange', clientRoutes, location, menus); if (menus === null && location.pathname !== PageEnum.LOGIN) { console.log('refresh'); history.go(0); } } -// export function patchRoutes({ routes, routeComponents }) { -// console.log('patchRoutes', routes, routeComponents); -// } +export function patchRoutes({ routes, routeComponents }: any) { + console.log('patchRoutes', routes, routeComponents); +} -export async function patchClientRoutes({ routes }) { - // console.log('patchClientRoutes', routes); +export async function patchClientRoutes({ routes }: any) { + console.log('patchClientRoutes', routes); patchRouteWithRemoteMenus(routes); } export function render(oldRender: () => void) { - // console.log('render get routers', oldRender) + console.log('render get routers', oldRender); const token = getAccessToken(); if (!token || token?.length === 0) { oldRender(); diff --git a/react-ui/src/pages/Experiment/experimentText/LogList.tsx b/react-ui/src/pages/Experiment/experimentText/LogList.tsx index 57e7a7e1..053819f4 100644 --- a/react-ui/src/pages/Experiment/experimentText/LogList.tsx +++ b/react-ui/src/pages/Experiment/experimentText/LogList.tsx @@ -1,8 +1,9 @@ -import LogGroup from './logGroup'; +import { ExperimentStatus } from '../types'; +import LogGroup, { type LogGroupProps } from './logGroup'; type LogListProps = { - list: any[]; - status: string; + list: Omit[]; + status: ExperimentStatus; }; function LogList({ list = [], status }: LogListProps) { diff --git a/react-ui/src/pages/Experiment/experimentText/logGroup.tsx b/react-ui/src/pages/Experiment/experimentText/logGroup.tsx index f50114b3..523645fa 100644 --- a/react-ui/src/pages/Experiment/experimentText/logGroup.tsx +++ b/react-ui/src/pages/Experiment/experimentText/logGroup.tsx @@ -3,34 +3,35 @@ import { getExperimentPodsLog } from '@/services/experiment/index.js'; import { DoubleRightOutlined, DownOutlined, UpOutlined } from '@ant-design/icons'; import { Button } from 'antd'; import { useEffect, useState } from 'react'; +import { ExperimentStatus } from '../types'; import styles from './logGroup.less'; -type LogGroupProps = { - log_type?: string; - pod_name?: string; - log_content?: string; - start_time?: string; - status: string; +export type LogGroupProps = { + log_type: 'normal' | 'resource'; // 日志类型 + pod_name?: string; // 分布式名称 + log_content?: string; // 日志内容 + start_time?: string; // 日志开始时间 + status: ExperimentStatus; // 实验状态 }; type Log = { - start_time: string; - log_content: string; + start_time: string; // 日志开始时间 + log_content: string; // 日志内容 }; function LogGroup({ - log_type = '', + log_type = 'normal', pod_name = '', log_content = '', start_time = '', - status = '', + status = ExperimentStatus.Pending, }: LogGroupProps) { const [collapse, setCollapse] = useState(true); const [logList, setLogList, logListRef] = useStateRef([]); const [completed, setCompleted] = useState(false); useEffect(() => { - if (status === 'Running') { + if (status === ExperimentStatus.Running) { const timerId = setInterval(() => { requestExperimentPodsLog(); }, 5000); diff --git a/react-ui/src/pages/Experiment/experimentText/props.jsx b/react-ui/src/pages/Experiment/experimentText/props.jsx index 1ab54930..3c15566d 100644 --- a/react-ui/src/pages/Experiment/experimentText/props.jsx +++ b/react-ui/src/pages/Experiment/experimentText/props.jsx @@ -160,7 +160,7 @@ const Props = forwardRef(({ onParentChange }, ref) => { Object.keys(stagingItem.control_strategy) && Object.keys(stagingItem.control_strategy).length > 0 ? Object.keys(stagingItem.control_strategy).map((item) => ( - + )) @@ -178,6 +178,7 @@ const Props = forwardRef(({ onParentChange }, ref) => { Object.keys(stagingItem.in_parameters).length > 0 ? Object.keys(stagingItem.in_parameters).map((item) => ( { Object.keys(stagingItem.out_parameters).length > 0 ? Object.keys(stagingItem.out_parameters).map((item) => ( { > {resultObj && resultObj.length > 0 ? resultObj.map((item) => ( -
+
{item.name}
@@ -249,7 +251,7 @@ const Props = forwardRef(({ onParentChange }, ref) => {
{item.value && item.value.length > 0 ? item.value.map((ele) => ( -
+
{ele.name} {ele.size}
diff --git a/react-ui/src/pages/Experiment/status.ts b/react-ui/src/pages/Experiment/status.ts index 0a7b6652..fc4eb586 100644 --- a/react-ui/src/pages/Experiment/status.ts +++ b/react-ui/src/pages/Experiment/status.ts @@ -4,17 +4,6 @@ export interface StatusInfo { icon: string; } -export enum ExperimentStatus { - Running = 'Running', - Succeeded = 'Succeeded', - Pending = 'Pending', - Failed = 'Failed', - Error = 'Error', - Terminated = 'Terminated', - Skipped = 'Skipped', - Omitted = 'Omitted', -} - export const experimentStatusInfo: Record = { Running: { label: '运行中', diff --git a/react-ui/src/pages/Experiment/types.ts b/react-ui/src/pages/Experiment/types.ts index e69de29b..c90f310c 100644 --- a/react-ui/src/pages/Experiment/types.ts +++ b/react-ui/src/pages/Experiment/types.ts @@ -0,0 +1,10 @@ +export enum ExperimentStatus { + Running = 'Running', + Succeeded = 'Succeeded', + Pending = 'Pending', + Failed = 'Failed', + Error = 'Error', + Terminated = 'Terminated', + Skipped = 'Skipped', + Omitted = 'Omitted', +} diff --git a/react-ui/src/requestConfig.ts b/react-ui/src/requestConfig.ts index 13c13ac8..ca732f12 100644 --- a/react-ui/src/requestConfig.ts +++ b/react-ui/src/requestConfig.ts @@ -13,7 +13,6 @@ export const requestConfig: RequestConfig = { requestInterceptors: [ (url: any, options: { headers: any }) => { const headers = options.headers ? options.headers : []; - console.log('request ====>:', url); const authHeader = headers['Authorization']; const isToken = headers['isToken']; if (!authHeader && isToken !== false) { @@ -39,18 +38,17 @@ export const requestConfig: RequestConfig = { }, ], responseInterceptors: [ - (response: any) => - { + (response: any) => { const { status, data } = response; if (status && status >= 200 && status < 300 && data && data.code === 200) { - return response + return response; } else { if (data && data.msg) { message.error(data.msg); } else { - message.error("请求失败"); + message.error('请求失败'); } - return Promise.reject(response) + return Promise.reject(response); } }, ], diff --git a/react-ui/src/services/session.ts b/react-ui/src/services/session.ts index 89630a4a..021cf4fc 100644 --- a/react-ui/src/services/session.ts +++ b/react-ui/src/services/session.ts @@ -96,10 +96,6 @@ export async function refreshToken() { }); } -export async function getRouters(): Promise { - return request('/api/system/menu/getRouters'); -} - export function convertCompatRouters(childrens: API.RoutersMenuItem[]): any[] { return childrens.map((item: API.RoutersMenuItem) => { return { @@ -116,8 +112,9 @@ export function convertCompatRouters(childrens: API.RoutersMenuItem[]): any[] { }); } +// 获取路由列表 export async function getRoutersInfo(): Promise { - return getRouters().then((res) => { + return request('/api/system/menu/getRouters').then((res: any) => { if (res.code === 200) { return convertCompatRouters(res.data); } else { diff --git a/react-ui/tsconfig.json b/react-ui/tsconfig.json index e94cf4cf..9922437a 100644 --- a/react-ui/tsconfig.json +++ b/react-ui/tsconfig.json @@ -7,7 +7,7 @@ "esModuleInterop": true, // 禁用命名空间导入（import * as fs from "fs"），并启用CJS/AMD/UMD样式的导入（import fs from "fs"） "allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块进行默认导入 "strict": true, // 启用所有严格类型检查选项 - "forceConsistentCasingInFileNames": true, // 不允许对同一文件的引用使用不一致的大小写 + "forceConsistentCasingInFileNames": false, // 允许对同一文件的引用使用不一致的大小写 "module": "esnext", // 指定模块代码生成 "moduleResolution": "node", // 使用Node.js样式解析模块 "isolatedModules": true, // 无条件地为未解析的文件发出导入 @@ -22,7 +22,8 @@ "noFallthroughCasesInSwitch": true, // 报告switch语句中的fallthrough案例错误 "baseUrl": "./", "paths": { - "@/*": ["src/*"] + "@/*": ["src/*"], + "@@/*": ["src/.umi/*"] } }, "include": [ From 16804b6985ebc8384e17abdf8334a99239bc3312 Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Sun, 7 Apr 2024 14:01:27 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E9=9B=86?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=92=8C=E6=A8=A1=E5=9E=8B=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=89=88=E6=9C=AC=E6=8F=8F=E8=BF=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/config/defaultSettings.ts | 4 +- react-ui/src/pages/Dataset/datasetIntro.jsx | 476 ++++++++++------- react-ui/src/pages/Dataset/index.less | 548 ++++++++++---------- react-ui/src/pages/Model/index.jsx | 96 ++-- react-ui/src/pages/Model/index.less | 541 ++++++++++--------- react-ui/src/pages/Model/modelIntro.jsx | 127 +++-- react-ui/src/pages/Pipeline/index.jsx | 516 +++++++++--------- react-ui/src/requestConfig.ts | 3 +- react-ui/src/styles/theme.less | 8 + 9 files changed, 1236 insertions(+), 1083 deletions(-) create mode 100644 react-ui/src/styles/theme.less diff --git a/react-ui/config/defaultSettings.ts b/react-ui/config/defaultSettings.ts index 91930d6e..b4430310 100644 --- a/react-ui/config/defaultSettings.ts +++ b/react-ui/config/defaultSettings.ts @@ -9,7 +9,7 @@ const Settings: ProLayoutProps & { } = { navTheme: 'light', // 拂晓蓝 - colorPrimary: '#1890ff', + colorPrimary: '#1664ff', layout: 'mix', contentWidth: 'Fluid', fixedHeader: false, @@ -19,7 +19,7 @@ const Settings: ProLayoutProps & { title: '复杂智能软件', pwa: true, logo: '/assets/images/left-top-logo.png', - iconfontUrl: '', + iconfontUrl: '', 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/src/pages/Dataset/datasetIntro.jsx b/react-ui/src/pages/Dataset/datasetIntro.jsx index 05b01e31..e3cf7baf 100644 --- a/react-ui/src/pages/Dataset/datasetIntro.jsx +++ b/react-ui/src/pages/Dataset/datasetIntro.jsx @@ -1,88 +1,95 @@ - -import React ,{useEffect,useState,useRef}from 'react'; -import Styles from './index.less' -import { Input, Space ,Button,Tabs,Pagination,Modal, Form,message, Radio,Select,Table,Upload} from 'antd'; -import { PlusOutlined,PlusCircleOutlined, DeleteOutlined,UploadOutlined, ExclamationCircleOutlined, DownOutlined, EditOutlined ,CopyOutlined} from '@ant-design/icons'; -import {getDatasetList,getDatasetById,getDatasetVersionsById,getDatasetVersionIdList,deleteDatasetVersion,addDatasetVersionDetail,exportDataset} from '@/services/dataset/index.js' -import { useParams } from 'react-router-dom' -import {downLoadZip} from '@/utils/downloadfile' -const { Search } = Input; +import { getAccessToken } from '@/access'; +import { + addDatasetVersionDetail, + deleteDatasetVersion, + getDatasetById, + getDatasetVersionIdList, + getDatasetVersionsById, +} from '@/services/dataset/index.js'; +import { downLoadZip } from '@/utils/downloadfile'; +import { + DeleteOutlined, + DownloadOutlined, + PlusCircleOutlined, + UploadOutlined, +} from '@ant-design/icons'; +import { Button, Form, Input, Modal, Select, Table, Tabs, Upload, message } from 'antd'; import moment from 'moment'; -import { getAccessToken } from '@/access'; +import { useEffect, useRef, useState } from 'react'; +import { useParams } from 'react-router-dom'; +import Styles from './index.less'; +const { Search } = Input; const { TabPane } = Tabs; -const Dataset= React.FC = () => { +const Dataset = () => { const props = { action: '/api/mmp/dataset/upload', // headers: { // 'X-Requested-With': null // }, headers: { - Authorization:getAccessToken(), - 'X-Requested-With': null - + Authorization: getAccessToken(), + 'X-Requested-With': null, }, onChange({ file, fileList }) { if (file.status !== 'uploading') { console.log(file, fileList); - setFormList(fileList.map(item=>{ - return { - ...form.getFieldsValue(), - dataset_id:locationParams.id, - file_name:item.response.data[0].fileName, - file_size:item.response.data[0].fileSize, - url:item.response.data[0].url, - } - })) + setFormList( + fileList.map((item) => { + return { + ...form.getFieldsValue(), + dataset_id: locationParams.id, + file_name: item.response.data[0].fileName, + file_size: item.response.data[0].fileSize, + url: item.response.data[0].url, + }; + }), + ); } }, - defaultFileList: [ - ], + defaultFileList: [], }; const [form] = Form.useForm(); - const [formList,setFormList]=useState([]) + const [formList, setFormList] = useState([]); const [dialogTitle, setDialogTitle] = useState('新建版本'); - const [isModalOpen,setIsModalOpen]=useState(false) - const [datasetDetailObj,setDatasetDetailObj]=useState({ - }); - const [version,setVersion]=useState('') + const [isModalOpen, setIsModalOpen] = useState(false); + const [datasetDetailObj, setDatasetDetailObj] = useState({}); + const [version, setVersion] = useState(''); const [versionList, setVersionList] = useState([]); - const locationParams =useParams () //新版本获取路由参数接口 - console.log(locationParams); + const locationParams = useParams(); //新版本获取路由参数接口 const [wordList, setWordList] = useState([]); - const getDatasetByDetail=()=>{ - getDatasetById(locationParams.id).then(ret=>{ + const [activeTabKey, setActiveTabKey] = useState('1'); + const getDatasetByDetail = () => { + getDatasetById(locationParams.id).then((ret) => { console.log(ret); - if(ret.code==200){ - setDatasetDetailObj(ret.data) - } - }) - } - const getDatasetVersionList=()=>{ - getDatasetVersionsById(locationParams.id).then(ret=>{ + setDatasetDetailObj(ret.data); + }); + }; + const getDatasetVersionList = () => { + getDatasetVersionsById(locationParams.id).then((ret) => { console.log(ret); - if(ret.code==200&&ret.data&&ret.data.length>0){ - setVersionList(ret.data.map(item=>{ - return { - 'label':item, - 'value':item - } - })) + if (ret.data && ret.data.length > 0) { + setVersionList( + ret.data.map((item) => { + return { + label: item, + value: item, + }; + }), + ); } - }) - } - useEffect(()=>{ - getDatasetByDetail() - getDatasetVersionList() - return ()=>{ - - } - },[]) + }); + }; + useEffect(() => { + getDatasetByDetail(); + getDatasetVersionList(); + return () => {}; + }, []); const showModal = () => { - form.resetFields() - form.setFieldsValue({name:datasetDetailObj.name}) - - setDialogTitle('创建新版本') + form.resetFields(); + form.setFieldsValue({ name: datasetDetailObj.name }); + + setDialogTitle('创建新版本'); setIsModalOpen(true); }; const handleCancel = () => { @@ -91,80 +98,74 @@ const Dataset= React.FC = () => { const handleExport = async () => { const hide = message.loading('正在下载'); hide(); - downLoadZip(`/api/mmp/dataset/downloadAllFiles`,{dataset_id:locationParams.id,version}) + downLoadZip(`/api/mmp/dataset/downloadAllFiles`, { dataset_id: locationParams.id, version }); }; - const deleteDataset=()=>{ + const deleteDataset = () => { Modal.confirm({ title: '删除', content: '确定删除数据集版本？', okText: '确认', cancelText: '取消', - onOk: () => { - deleteDatasetVersion({dataset_id:locationParams.id,version}).then(ret=>{ - if(ret.code==200){ - message.success('删除成功') - getDatasetVersions({version,dataset_id:locationParams.id}) - } - else{ - message.error(ret.msg) - } + onOk: () => { + deleteDatasetVersion({ dataset_id: locationParams.id, version }).then((ret) => { + message.success('删除成功'); + getDatasetVersions({ version, dataset_id: locationParams.id }); }); }, }); - } - const onFinish = (values) => { - addDatasetVersionDetail(formList).then(ret=>{ - console.log(ret); - getDatasetVersionList() - setIsModalOpen(false); - }) - }; - const getDatasetVersions=(params)=>{ - getDatasetVersionIdList(params).then(ret=>{ + }; + const onFinish = (values) => { + addDatasetVersionDetail(formList).then((ret) => { console.log(ret); - if(ret.code==200){ - setWordList(ret.data) - } - }) - } - const handleChange=(value)=>{ + getDatasetVersionList(); + setIsModalOpen(false); + }); + }; + const getDatasetVersions = (params) => { + getDatasetVersionIdList(params).then((res) => { + setWordList( + res.data.map((v) => ({ + ...v, + key: v.id, + })), + ); + }); + }; + const handleChange = (value) => { console.log(value); - if(value){ - getDatasetVersions({version:value,dataset_id:locationParams.id}) - setVersion(value) - } - else{ - setVersion(null) + if (value) { + getDatasetVersions({ version: value, dataset_id: locationParams.id }); + setVersion(value); + } else { + setVersion(null); } - } + }; const onFinishFailed = (errorInfo) => { console.log('Failed:', errorInfo); }; - const downloadAlone=(e,record)=>{ + const downloadAlone = (e, record) => { console.log(record); const hide = message.loading('正在下载'); hide(); - downLoadZip(`/api/mmp//dataset/download/${record.id}`) - } + downLoadZip(`/api/mmp/dataset/download/${record.id}`); + }; const columns = [ - // { - // title: '序号', - // dataIndex: 'index', - // key: 'index', - // width: 80, - // render(text, record, index) { - // return ( - // {(pageOption.current.page - 1) * 10 + index + 1} - // ) - // } - // // render: (text, record, index) => `${((curPage-1)*10)+(index+1)}`, - // }, + { + title: '序号', + dataIndex: 'index', + key: 'index', + width: 80, + render(text, record, index) { + return {(pageOption.current.page - 1) * 10 + index + 1}; + }, + // render: (text, record, index) => `${((curPage-1)*10)+(index+1)}`, + }, { title: '文件名称', dataIndex: 'file_name', key: 'file_name', - render: (text,record) => downloadAlone(e,record)}>{text}, + render: (text, record) => downloadAlone(e, record)}>{text}, }, { title: '版本号', @@ -182,80 +183,128 @@ const Dataset= React.FC = () => { key: 'update_time', render: (text) => {moment(text).format('YYYY-MM-DD HH:mm:ss')}, }, + { + title: '操作', + dataIndex: 'option', + width: '100px', + key: 'option', + render: (_, record) => [ + , + ], + }, ]; - const pageOption = useRef({page: 1,size: 10}) + const pageOption = useRef({ page: 1, size: 10 }); // 当前页面切换 const paginationChange = async (current, size) => { - console.log('page', current, size) - pageOption.current={ - page:current, - size:size - } + console.log('page', current, size); + pageOption.current = { + page: current, + size: size, + }; // getList() - } - return (
-
- {datasetDetailObj.name} -
-
{datasetDetailObj.data_tag||'...'}
+ }; + return ( +
+
+ {datasetDetailObj.name} +
+
{datasetDetailObj.data_tag || '...'}
{datasetDetailObj.data_type}
{/*
English
*/} -
-
-
- - -
简介
-
{datasetDetailObj.description}
- - -
-
数据集文件列表
-
-
- 版本号： - + +
+
+ + +
+
+
+ {wordList.length > 0 ? wordList[0].description : null} +
+ + + + + + + + {dialogTitle} + + } + open={isModalOpen} + className={Styles.modal} + okButtonProps={{ + htmlType: 'submit', + form: 'form', + }} + onCancel={handleCancel} + >
{ label="数据集名称" name="name" rules={[ - // { - // required: true, - // message: 'Please input your username!', - // }, + { + required: true, + message: '请输入数据集名称', + }, ]} > - + - - + + + + + + + + + - - - - - - - ) + + ); }; -export default Dataset; \ No newline at end of file +export default Dataset; diff --git a/react-ui/src/pages/Dataset/index.less b/react-ui/src/pages/Dataset/index.less index a3994d1d..320ca827 100644 --- a/react-ui/src/pages/Dataset/index.less +++ b/react-ui/src/pages/Dataset/index.less @@ -1,303 +1,297 @@ -.datasetTopBox{ +.datasetTopBox { + display: flex; + align-items: center; + width: 100%; + height: 49px; + padding: 0 30px; + padding-right: 30px; + background-image: url(/assets/images/pipeline-back.png); + background-size: 100% 100%; +} +.datasetIntroTopBox { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + height: 110px; + margin-bottom: 10px; + padding: 25px 30px; + background-image: url(/assets/images/dataset-back.png); + background-size: 100% 100%; + .smallTagBox { display: flex; align-items: center; - padding-right: 30px; - width: 100%; - height: 49px; - background-size: 100% 100%; - background-image: url(/assets/images/pipeline-back.png); - padding: 0 30px; + color: #1664ff; + font-size: 14px; + .tagItem { + margin-right: 20px; + padding: 4px 10px; + background: rgba(22, 100, 255, 0.1); + border-radius: 4px; + } + } } -.datasetIntroTopBox{ +.dataListBox { + padding: 20px 30px; + color: #1d1d20; + font-size: 16px; + background: #ffffff; + border-radius: 10px; + box-shadow: 0px 2px 12px rgba(180, 182, 191, 0.09); + .dataButtonList { display: flex; - flex-direction: column; + align-items: center; justify-content: space-between; - width: 100%; - height: 110px; - background-size: 100% 100%; - background-image: url(/assets/images/dataset-back.png); - margin-bottom: 10px; - padding: 25px 30px; - .smallTagBox{ - display: flex; - align-items: center; - color:#1664ff; - font-size:14px; - .tagItem{ - padding: 4px 10px; - background: rgba(22, 100, 255, 0.1); - border-radius:4px; - margin-right: 20px; - } - } -} -.dataListBox{ - padding: 20px 30px; - background:#ffffff; - border-radius:10px; - box-shadow:0px 2px 12px rgba(180, 182, 191, 0.09); - color:#1d1d20; - font-size:16px; - .dataButtonList{ - display: flex; - justify-content: space-between; - align-items: center; - height: 32px; - margin: 24px 0 30px 0; - color:#575757; - font-size:16px; - } + height: 32px; + margin: 24px 0 30px 0; + color: #575757; + font-size: 16px; + } } -.datasetIntroCneterBox{ - height: 77vh; - padding: 20px 30px; - background:#ffffff; - border-radius:10px; - box-shadow:0px 2px 12px rgba(180, 182, 191, 0.09); +.datasetIntroCneterBox { + height: 77vh; + padding: 20px 30px; + background: #ffffff; + border-radius: 10px; + box-shadow: 0px 2px 12px rgba(180, 182, 191, 0.09); } -.datasetIntroTitle{ - color:#1d1d20; - font-size:15px; - margin: 37px 0 10px 0; +.datasetIntroTitle { + margin: 37px 0 10px 0; + color: #1d1d20; + font-size: 15px; } -.datasetIntroText{ - color:#575757; - font-size:14px; - margin-bottom: 30px; +.datasetIntroText { + margin-bottom: 30px; + color: #575757; + font-size: 14px; } -.datasetBox{ - background:#f9fafb; - font-family: 'Alibaba'; - :global{ - .ant-tabs-top >.ant-tabs-nav{ - margin: 0; - } - .ant-pagination{ - text-align: right; - } - +.datasetBox { + font-family: 'Alibaba'; + background: #f9fafb; + :global { + .ant-tabs-top > .ant-tabs-nav { + margin: 0; } + .ant-pagination { + text-align: right; + } + } } -.datasetAllBox{ - :global{ - .ant-tabs-nav .ant-tabs-nav-wrap{ - margin: -48px 0 0 30px; - } - +.datasetAllBox { + :global { + .ant-tabs-nav .ant-tabs-nav-wrap { + margin: -48px 0 0 30px; } + } } -.plusButton{ - margin: 0 18px 0 20px; - background:rgba(22, 100, 255, 0.06); - border:1px solid; - border-color:rgba(22, 100, 255, 0.11); - border-radius:4px; - color:#1d1d20; - font-size:14px; - font-family: 'Alibaba'; +.plusButton { + margin: 0 18px 0 20px; + color: #1d1d20; + font-size: 14px; + font-family: 'Alibaba'; + background: rgba(22, 100, 255, 0.06); + border: 1px solid; + border-color: rgba(22, 100, 255, 0.11); + border-radius: 4px; } -.plusButton:hover{ - background:rgba(22, 100, 255, 0.06)!important; - border:1px solid!important; - border-color:rgba(22, 100, 255, 0.11)!important; - color:#1d1d20!important; +.plusButton:hover { + color: #1d1d20 !important; + background: rgba(22, 100, 255, 0.06) !important; + border: 1px solid !important; + border-color: rgba(22, 100, 255, 0.11) !important; } -.datasetCneterBox{ - display: flex; - justify-content: space-between; - height: 85vh; - width: 100%; - :global{ - .ant-btn{ - color:#1d1d20; - font-size:14px; - } +.datasetCneterBox { + display: flex; + justify-content: space-between; + width: 100%; + height: 85vh; + :global { + .ant-btn { + color: #1d1d20; + font-size: 14px; } - .datasetCneterLeftBox{ - width:340px; - height:100%; - background:#ffffff; - box-shadow:0px 3px 6px rgba(146, 146, 146, 0.09); - margin-right: 10px; - padding-top: 15px; - .custTab{ - display: flex; - border-bottom: 1px solid #e0eaff; - height: 32px; - .tabItem{ - width: 52px; - height: 100%; - text-align: center; - color:#808080; - font-size:15px; - cursor: pointer; - } + } + .datasetCneterLeftBox { + width: 340px; + height: 100%; + margin-right: 10px; + padding-top: 15px; + background: #ffffff; + box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09); + .custTab { + display: flex; + height: 32px; + border-bottom: 1px solid #e0eaff; + .tabItem { + width: 52px; + height: 100%; + color: #808080; + font-size: 15px; + text-align: center; + cursor: pointer; + } + } + .leftContentBox { + max-height: 80vh; + padding: 15px 20px; + overflow-x: hidden; + overflow-y: auto; + .itemTitle { + margin-bottom: 15px; + color: #1d1d20; + font-size: 14px; + } + .itemBox { + display: flex; + flex-wrap: wrap; + align-content: start; + width: 110%; + .messageBox { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + width: 92px; + height: 62px; + margin: 0 12px 20px 0; + padding: 11px 0px 7px 0px; + color: #1d1d20; + font-size: 12px; + border: 1px solid; + border-color: rgba(22, 100, 255, 0.05); + border-radius: 4px; + cursor: pointer; + .ptIcon { + display: block; + } + .hoverIcon { + display: none; + } + .messageText { + width: 65px; + overflow: hidden; + white-space: nowrap; + text-align: center; + text-overflow: ellipsis; + } } - .leftContentBox{ - max-height: 80vh; - overflow-y: auto; - overflow-x: hidden; - padding: 15px 20px; - .itemTitle{ - color:#1d1d20; - font-size:14px; - margin-bottom: 15px; - } - .itemBox{ - width: 110%; - display: flex; - flex-wrap: wrap; - align-content: start; - .messageBox{ - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - cursor: pointer; - width:92px; - height:62px; - border:1px solid; - border-color:rgba(22, 100, 255, 0.05); - border-radius:4px; - margin: 0 12px 20px 0; - padding: 11px 0px 7px 0px; - color:#1d1d20; - font-size:12px; - .ptIcon{ - display: block; - } - .hoverIcon{ - display: none; - } - .messageText{ - width: 65px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - .messageBox:hover{ - background:rgba(22, 100, 255, 0.03); - border:1px solid; - border-color:#1664ff; - .ptIcon{ - display: none; - } - .hoverIcon{ - display: block; - } - } - .active{ - background:rgba(22, 100, 255, 0.03)!important; - border:1px solid!important; - border-color:#1664ff!important; - .ptIcon{ - display: none!important; - } - .hoverIcon{ - display: block!important; - } - } - } + .messageBox:hover { + background: rgba(22, 100, 255, 0.03); + border: 1px solid; + border-color: #1664ff; + .ptIcon { + display: none; + } + .hoverIcon { + display: block; + } } + .active { + background: rgba(22, 100, 255, 0.03) !important; + border: 1px solid !important; + border-color: #1664ff !important; + .ptIcon { + display: none !important; + } + .hoverIcon { + display: block !important; + } + } + } } + } - .datasetCneterRightBox{ - display: flex; - flex-direction: column; - padding: 22px 30px 26px 30px; - flex: 1; - height:100%; - background:#ffffff; - box-shadow:0px 3px 6px rgba(146, 146, 146, 0.09); - .dataSource{ - display: flex; - justify-content: space-between; - align-items: center; - height: 32px; - margin-bottom: 30px; - color:rgba(29, 29, 32, 0.8); - font-size:15px; + .datasetCneterRightBox { + display: flex; + flex: 1; + flex-direction: column; + height: 100%; + padding: 22px 30px 26px 30px; + background: #ffffff; + box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09); + .dataSource { + display: flex; + align-items: center; + justify-content: space-between; + height: 32px; + margin-bottom: 30px; + color: rgba(29, 29, 32, 0.8); + font-size: 15px; + } + .dataContent { + display: flex; + flex: 1; + flex-wrap: wrap; + align-content: flex-start; + width: 100%; + .dataItem { + position: relative; + width: 32%; + height: 66px; + margin: 0 15px 18px 0; + background: rgba(128, 128, 128, 0.05); + border-radius: 8px; + box-shadow: 0px 0px 12px rgba(75, 84, 137, 0.05); + cursor: pointer; + .itemText { + position: absolute; + top: 10px; + left: 20px; + color: #1d1d20; + font-size: 15px; + } + .itemTime { + position: absolute; + bottom: 10px; + left: 20px; + color: #808080; + font-size: 14px; } - .dataContent{ - width: 100%; - flex: 1; - display: flex; - flex-wrap: wrap; - align-content: flex-start; - .dataItem{ - width: 32%; - margin: 0 15px 18px 0; - height:66px; - position: relative; - background:rgba(128, 128, 128, 0.05); - border-radius:8px; - box-shadow:0px 0px 12px rgba(75, 84, 137, 0.05); - cursor: pointer; - .itemText{ - position: absolute; - left: 20px; - top: 10px; - color:#1d1d20; - font-size:15px; - - } - .itemTime{ - position: absolute; - left: 20px; - bottom: 10px; - color:#808080; - font-size:14px; - } - .itemIcon{ - position: absolute; - right: 20px; - bottom: 10px; - color:#808080; - font-size:14px; - } - } + .itemIcon { + position: absolute; + right: 20px; + bottom: 10px; + color: #808080; + font-size: 14px; } + } } + } } .modal { - :global { - .ant-modal-content { - background:linear-gradient(180deg,#cfdfff 0%,#d4e2ff 9.77%,#ffffff 40%,#ffffff 100%); - border-radius:21px; - padding: 20px 67px; - width: 825px; - - } - .ant-modal-header{ - background-color: transparent; - margin: 20px 0; - } - .ant-input{ - border-color:#e6e6e6; - height: 40px; - - } - .ant-form-item .ant-form-item-label >label{ - color:rgba(29, 29, 32, 0.8); - } - .ant-modal-footer{ - margin: 40px 0 30px 0; - display: flex; - justify-content: center; - } - .ant-btn{ - width:110px; - height:40px; - font-size:18px; - background:rgba(22, 100, 255, 0.06); - border-radius:10px; - border-color: transparent; - - } - .ant-btn-primary{ - background:#1664ff; - } + :global { + .ant-modal-content { + width: 825px; + padding: 20px 67px; + background: linear-gradient(180deg, #cfdfff 0%, #d4e2ff 9.77%, #ffffff 40%, #ffffff 100%); + border-radius: 21px; + } + .ant-modal-header { + margin: 20px 0; + background-color: transparent; + } + .ant-input { + height: 40px; + border-color: #e6e6e6; } -} \ No newline at end of file + .ant-form-item .ant-form-item-label > label { + color: rgba(29, 29, 32, 0.8); + } + .ant-modal-footer { + display: flex; + justify-content: center; + margin: 40px 0 30px 0; + } + .ant-btn { + width: 110px; + height: 40px; + font-size: 18px; + background: rgba(22, 100, 255, 0.06); + border-color: transparent; + border-radius: 10px; + } + .ant-btn-primary { + background: #1664ff; + } + } +} diff --git a/react-ui/src/pages/Model/index.jsx b/react-ui/src/pages/Model/index.jsx index 5b93bcec..2e926b87 100644 --- a/react-ui/src/pages/Model/index.jsx +++ b/react-ui/src/pages/Model/index.jsx @@ -1,27 +1,24 @@ - -import React ,{useEffect,useState}from 'react'; -import Styles from './index.less' -import { Input, Space ,Button,Tabs,Pagination,Modal, Form,message, Radio,} from 'antd'; -import { PlusOutlined,PlusCircleOutlined, DeleteOutlined, ExclamationCircleOutlined, DownOutlined, EditOutlined ,CopyOutlined} from '@ant-design/icons'; +import { Form, Input, Tabs } from 'antd'; +import { useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import Styles from './index.less'; +import PersonalData from './personalData'; +import PublicData from './publicData'; // import {getModelList} from '@/services/dataset/index.js' const { Search } = Input; -import { useNavigate} from 'react-router-dom'; -import moment from 'moment'; const { TabPane } = Tabs; -import PublicData from './publicData'; -import PersonalData from './personalData' -const leftdataList=[1,2,3] +const leftdataList = [1, 2, 3]; -const Dataset= React.FC = () => { - const [queryFlow,setQueryFlow]=useState({ - page:0, - size:10, - name:null +const Dataset = () => { + const [queryFlow, setQueryFlow] = useState({ + page: 0, + size: 10, + name: null, }); - const navgite=useNavigate(); - const [isModalOpen,setIsModalOpen]=useState(false) - const [datasetList,setDatasetList]=useState([]); - const [total,setTotal]=useState(0); + const navgite = useNavigate(); + const [isModalOpen, setIsModalOpen] = useState(false); + const [datasetList, setDatasetList] = useState([]); + const [total, setTotal] = useState(0); const [form] = Form.useForm(); const [dialogTitle, setDialogTitle] = useState('新建数据'); // const getModelLists=()=>{ @@ -35,49 +32,42 @@ const Dataset= React.FC = () => { // } const showModal = () => { - form.resetFields() - setDialogTitle('新建数据集') + form.resetFields(); + setDialogTitle('新建数据集'); setIsModalOpen(true); }; const handleOk = () => { - console.log(1111); + console.log(1111); setIsModalOpen(false); }; const handleCancel = () => { setIsModalOpen(false); }; - const onFinish = (values) => { - - }; - const routeToIntro=(e,record)=>{ - e.stopPropagation() - navgite({pathname:'/dataset/datasetIntro' }); -} + const onFinish = (values) => {}; + const routeToIntro = (e, record) => { + e.stopPropagation(); + navgite({ pathname: '/dataset/datasetIntro' }); + }; const onFinishFailed = (errorInfo) => { console.log('Failed:', errorInfo); }; - useEffect(()=>{ - - return ()=>{ - - } - },[]) - return (
-
-
-
- - - - - - - - -
- -
) + useEffect(() => { + return () => {}; + }, []); + return ( +
+
+
+ + + + + + + + +
+
+ ); }; -export default Dataset; \ No newline at end of file +export default Dataset; diff --git a/react-ui/src/pages/Model/index.less b/react-ui/src/pages/Model/index.less index ff21467e..857d0a7c 100644 --- a/react-ui/src/pages/Model/index.less +++ b/react-ui/src/pages/Model/index.less @@ -1,296 +1,293 @@ -.datasetTopBox{ +.datasetTopBox { + display: flex; + align-items: center; + width: 100%; + height: 49px; + padding: 0 30px; + padding-right: 30px; + background-image: url(/assets/images/pipeline-back.png); + background-size: 100% 100%; +} +.datasetIntroTopBox { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + height: 110px; + margin-bottom: 10px; + padding: 25px 30px; + background-image: url(/assets/images/dataset-back.png); + + background-size: 100% 100%; + .smallTagBox { display: flex; align-items: center; - padding-right: 30px; - width: 100%; - height: 49px; - background-size: 100% 100%; - background-image: url(/assets/images/pipeline-back.png); - padding: 0 30px; + color: #1664ff; + font-size: 14px; + .tagItem { + margin-right: 20px; + padding: 4px 10px; + background: rgba(22, 100, 255, 0.1); + border-radius: 4px; + } + } } -.datasetIntroTopBox{ +.dataListBox { + padding: 20px 30px; + color: #1d1d20; + font-size: 16px; + background: #ffffff; + border-radius: 10px; + box-shadow: 0px 2px 12px rgba(180, 182, 191, 0.09); + .dataButtonList { display: flex; - flex-direction: column; + align-items: center; justify-content: space-between; - width: 100%; - height: 110px; - background-size: 100% 100%; - background-image: url(/assets/images/dataset-back.png); - margin-bottom: 10px; - padding: 25px 30px; - .smallTagBox{ - display: flex; - align-items: center; - color:#1664ff; - font-size:14px; - .tagItem{ - padding: 4px 10px; - background: rgba(22, 100, 255, 0.1); - border-radius:4px; - margin-right: 20px; - } - } -} -.dataListBox{ - padding: 20px 30px; - background:#ffffff; - border-radius:10px; - box-shadow:0px 2px 12px rgba(180, 182, 191, 0.09); - color:#1d1d20; - font-size:16px; - .dataButtonList{ - display: flex; - justify-content: space-between; - align-items: center; - height: 32px; - margin: 24px 0 30px 0; - color:#575757; - font-size:16px; - } + height: 32px; + margin: 24px 0 30px 0; + color: #575757; + font-size: 16px; + } } -.datasetIntroCneterBox{ - height: 77vh; - padding: 20px 30px; - background:#ffffff; - border-radius:10px; - box-shadow:0px 2px 12px rgba(180, 182, 191, 0.09); +.datasetIntroCneterBox { + height: 77vh; + padding: 20px 30px; + background: #ffffff; + border-radius: 10px; + box-shadow: 0px 2px 12px rgba(180, 182, 191, 0.09); } -.datasetIntroTitle{ - color:#1d1d20; - font-size:15px; - margin: 37px 0 10px 0; +.datasetIntroTitle { + margin: 37px 0 10px 0; + color: #1d1d20; + font-size: 15px; } -.datasetIntroText{ - color:#575757; - font-size:14px; - margin-bottom: 30px; +.datasetIntroText { + margin-bottom: 30px; + color: #575757; + font-size: 14px; } -.datasetBox{ - background:#f9fafb; - font-family: 'Alibaba'; - :global{ - .ant-tabs-top >.ant-tabs-nav{ - margin: 0; - } - .ant-pagination{ - text-align: right; - } +.datasetBox { + font-family: 'Alibaba'; + background: #f9fafb; + :global { + .ant-tabs-top > .ant-tabs-nav { + margin: 0; + } + .ant-pagination { + text-align: right; } + } } -.datasetAllBox{ - :global{ - .ant-tabs-nav .ant-tabs-nav-wrap{ - margin: -48px 0 0 30px; - } - +.datasetAllBox { + :global { + .ant-tabs-nav .ant-tabs-nav-wrap { + margin: -48px 0 0 30px; } + } } -.plusButton{ - margin: 0 18px 0 20px; - background:rgba(22, 100, 255, 0.06); - border:1px solid; - border-color:rgba(22, 100, 255, 0.11); - border-radius:4px; - color:#1d1d20; - font-size:14px; - font-family: 'Alibaba'; +.plusButton { + margin: 0 18px 0 20px; + color: #1d1d20; + font-size: 14px; + font-family: 'Alibaba'; + background: rgba(22, 100, 255, 0.06); + border: 1px solid; + border-color: rgba(22, 100, 255, 0.11); + border-radius: 4px; } -.plusButton:hover{ - background:rgba(22, 100, 255, 0.06)!important; - border:1px solid!important; - border-color:rgba(22, 100, 255, 0.11)!important; - color:#1d1d20!important; +.plusButton:hover { + color: #1d1d20 !important; + background: rgba(22, 100, 255, 0.06) !important; + border: 1px solid !important; + border-color: rgba(22, 100, 255, 0.11) !important; } -.datasetCneterBox{ - display: flex; - justify-content: space-between; - height: 85vh; - width: 100%; - - .datasetCneterLeftBox{ - width:340px; - height:100%; - background:#ffffff; - box-shadow:0px 3px 6px rgba(146, 146, 146, 0.09); - margin-right: 10px; - padding-top: 15px; - .custTab{ - display: flex; - border-bottom: 1px solid #e0eaff; - height: 32px; - .tabItem{ - width: 52px; - height: 100%; - text-align: center; - color:#808080; - font-size:15px; - cursor: pointer; - } +.datasetCneterBox { + display: flex; + justify-content: space-between; + width: 100%; + height: 85vh; + + .datasetCneterLeftBox { + width: 340px; + height: 100%; + margin-right: 10px; + padding-top: 15px; + background: #ffffff; + box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09); + .custTab { + display: flex; + height: 32px; + border-bottom: 1px solid #e0eaff; + .tabItem { + width: 52px; + height: 100%; + color: #808080; + font-size: 15px; + text-align: center; + cursor: pointer; + } + } + .leftContentBox { + max-height: 80vh; + padding: 15px 20px; + overflow-x: hidden; + overflow-y: auto; + .itemTitle { + margin-bottom: 15px; + color: #1d1d20; + font-size: 14px; + } + .itemBox { + display: flex; + flex-wrap: wrap; + align-content: start; + width: 110%; + .messageBox { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + width: 92px; + height: 62px; + margin: 0 12px 20px 0; + padding: 11px 0px 7px 0px; + color: #1d1d20; + font-size: 12px; + border: 1px solid; + border-color: rgba(22, 100, 255, 0.05); + border-radius: 4px; + cursor: pointer; + .ptIcon { + display: block; + } + .hoverIcon { + display: none; + } + .messageText { + width: 65px; + overflow: hidden; + white-space: nowrap; + text-align: center; + text-overflow: ellipsis; + transition: all 0.2s; + } + } + .messageBox:hover { + background: rgba(22, 100, 255, 0.03); + border: 1px solid; + border-color: #1664ff; + .ptIcon { + display: none; + } + .hoverIcon { + display: block; + } } - .leftContentBox{ - max-height: 80vh; - overflow-y: auto; - overflow-x: hidden; - padding: 15px 20px; - .itemTitle{ - color:#1d1d20; - font-size:14px; - margin-bottom: 15px; - } - .itemBox{ - width: 110%; - display: flex; - flex-wrap: wrap; - align-content: start; - .messageBox{ - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - cursor: pointer; - width:92px; - height:62px; - border:1px solid; - border-color:rgba(22, 100, 255, 0.05); - border-radius:4px; - margin: 0 12px 20px 0; - padding: 11px 0px 7px 0px; - color:#1d1d20; - font-size:12px; - .ptIcon{ - display: block; - } - .hoverIcon{ - display: none; - } - .messageText{ - width: 65px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - transition: all 0.2s; - } - } - .messageBox:hover{ - background:rgba(22, 100, 255, 0.03); - border:1px solid; - border-color:#1664ff; - .ptIcon{ - display: none; - } - .hoverIcon{ - display: block; - } - } - .active{ - background:rgba(22, 100, 255, 0.03)!important; - border:1px solid!important; - border-color:#1664ff!important; - .ptIcon{ - display: none!important; - } - .hoverIcon{ - display: block!important; - } - } - } + .active { + background: rgba(22, 100, 255, 0.03) !important; + border: 1px solid !important; + border-color: #1664ff !important; + .ptIcon { + display: none !important; + } + .hoverIcon { + display: block !important; + } } + } } - .datasetCneterRightBox{ - display: flex; - flex-direction: column; - padding: 22px 30px 26px 30px; - flex: 1; - height:100%; - background:#ffffff; - box-shadow:0px 3px 6px rgba(146, 146, 146, 0.09); - .dataSource{ - display: flex; - justify-content: space-between; - align-items: center; - height: 32px; - margin-bottom: 30px; - color:rgba(29, 29, 32, 0.8); - font-size:15px; + } + .datasetCneterRightBox { + display: flex; + flex: 1; + flex-direction: column; + height: 100%; + padding: 22px 30px 26px 30px; + background: #ffffff; + box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09); + .dataSource { + display: flex; + align-items: center; + justify-content: space-between; + height: 32px; + margin-bottom: 30px; + color: rgba(29, 29, 32, 0.8); + font-size: 15px; + } + .dataContent { + display: flex; + flex: 1; + flex-wrap: wrap; + align-content: flex-start; + width: 100%; + .dataItem { + position: relative; + width: 32%; + height: 66px; + margin: 0 15px 18px 0; + background: rgba(128, 128, 128, 0.05); + border-radius: 8px; + box-shadow: 0px 0px 12px rgba(75, 84, 137, 0.05); + cursor: pointer; + .itemText { + position: absolute; + top: 10px; + left: 20px; + color: #1d1d20; + font-size: 15px; + } + .itemTime { + position: absolute; + bottom: 10px; + left: 20px; + color: #808080; + font-size: 14px; } - .dataContent{ - width: 100%; - flex: 1; - display: flex; - flex-wrap: wrap; - align-content: flex-start; - .dataItem{ - width: 32%; - margin: 0 15px 18px 0; - height:66px; - position: relative; - background:rgba(128, 128, 128, 0.05); - border-radius:8px; - box-shadow:0px 0px 12px rgba(75, 84, 137, 0.05); - cursor: pointer; - .itemText{ - position: absolute; - left: 20px; - top: 10px; - color:#1d1d20; - font-size:15px; - - } - .itemTime{ - position: absolute; - left: 20px; - bottom: 10px; - color:#808080; - font-size:14px; - } - .itemIcon{ - position: absolute; - right: 20px; - bottom: 10px; - color:#808080; - font-size:14px; - } - } + .itemIcon { + position: absolute; + right: 20px; + bottom: 10px; + color: #808080; + font-size: 14px; } + } } + } } .modal { - :global { - .ant-modal-content { - background:linear-gradient(180deg,#cfdfff 0%,#d4e2ff 9.77%,#ffffff 40%,#ffffff 100%); - border-radius:21px; - padding: 20px 67px; - width: 825px; - - } - .ant-modal-header{ - background-color: transparent; - margin: 20px 0; - } - .ant-input{ - border-color:#e6e6e6; - height: 40px; - - } - .ant-form-item .ant-form-item-label >label{ - color:rgba(29, 29, 32, 0.8); - } - .ant-modal-footer{ - margin: 40px 0 30px 0; - display: flex; - justify-content: center; - } - .ant-btn{ - width:110px; - height:40px; - font-size:18px; - background:rgba(22, 100, 255, 0.06); - border-radius:10px; - border-color: transparent; - } - .ant-btn-primary{ - background:#1664ff; - } + :global { + .ant-modal-content { + width: 825px; + padding: 20px 67px; + background: linear-gradient(180deg, #cfdfff 0%, #d4e2ff 9.77%, #ffffff 40%, #ffffff 100%); + border-radius: 21px; + } + .ant-modal-header { + margin: 20px 0; + background-color: transparent; + } + .ant-input { + height: 40px; + border-color: #e6e6e6; } -} \ No newline at end of file + .ant-form-item .ant-form-item-label > label { + color: rgba(29, 29, 32, 0.8); + } + .ant-modal-footer { + display: flex; + justify-content: center; + margin: 40px 0 30px 0; + } + .ant-btn { + width: 110px; + height: 40px; + font-size: 18px; + background: rgba(22, 100, 255, 0.06); + border-color: transparent; + border-radius: 10px; + } + .ant-btn-primary { + background: #1664ff; + } + } +} diff --git a/react-ui/src/pages/Model/modelIntro.jsx b/react-ui/src/pages/Model/modelIntro.jsx index 91f0884e..2ce4a7e6 100644 --- a/react-ui/src/pages/Model/modelIntro.jsx +++ b/react-ui/src/pages/Model/modelIntro.jsx @@ -7,7 +7,12 @@ import { getModelVersionsById, } from '@/services/dataset/index.js'; import { downLoadZip } from '@/utils/downloadfile'; -import { DeleteOutlined, PlusCircleOutlined, UploadOutlined } from '@ant-design/icons'; +import { + DeleteOutlined, + DownloadOutlined, + PlusCircleOutlined, + UploadOutlined, +} from '@ant-design/icons'; import { Button, Form, Input, Modal, Select, Table, Tabs, Upload, message } from 'antd'; import moment from 'moment'; import { useEffect, useRef, useState } from 'react'; @@ -57,15 +62,13 @@ const Dataset = () => { const getModelByDetail = () => { getModelById(locationParams.id).then((ret) => { console.log(ret); - if (ret.code == 200) { - setDatasetDetailObj(ret.data); - } + setDatasetDetailObj(ret.data); }); }; const getModelVersionsList = () => { getModelVersionsById(locationParams.id).then((ret) => { console.log(ret); - if (ret.code == 200 && ret.data && ret.data.length > 0) { + if (ret.data && ret.data.length > 0) { setVersionList( ret.data.map((item) => { return { @@ -101,12 +104,8 @@ const Dataset = () => { onOk: () => { deleteModelVersion({ models_id: locationParams.id, version }).then((ret) => { - if (ret.code == 200) { - message.success('删除成功'); - getModelVersions({ version, models_id: locationParams.id }); - } else { - message.error(ret.msg); - } + message.success('删除成功'); + getModelVersions({ version, models_id: locationParams.id }); }); }, }); @@ -121,9 +120,7 @@ const Dataset = () => { const getModelVersions = (params) => { getModelVersionIdList(params).then((ret) => { console.log(ret); - if (ret.code == 200) { - setWordList(ret.data); - } + setWordList(ret.data); }); }; const handleExport = async () => { @@ -150,18 +147,16 @@ const Dataset = () => { console.log('Failed:', errorInfo); }; const columns = [ - // { - // title: '序号', - // dataIndex: 'index', - // key: 'index', - // width: 80, - // render(text, record, index) { - // return ( - // {(pageOption.current.page - 1) * 10 + index + 1} - // ) - // } - // // render: (text, record, index) => `${((curPage-1)*10)+(index+1)}`, - // }, + { + title: '序号', + dataIndex: 'index', + key: 'index', + width: 80, + render(text, record, index) { + return {(pageOption.current.page - 1) * 10 + index + 1}; + }, + // render: (text, record, index) => `${((curPage-1)*10)+(index+1)}`, + }, { title: '文件名称', dataIndex: 'file_name', @@ -184,6 +179,23 @@ const Dataset = () => { key: 'update_time', render: (text) => {moment(text).format('YYYY-MM-DD HH:mm:ss')}, }, + { + title: '操作', + dataIndex: 'option', + width: '100px', + key: 'option', + render: (_, record) => [ + , + ], + }, ]; const pageOption = useRef({ page: 1, size: 10 }); @@ -256,12 +268,15 @@ const Dataset = () => { disabled={!version} style={{ margin: '0 20px 0 0' }} onClick={handleExport} - icon={} + icon={} > 下载 +
+ {wordList.length > 0 ? wordList[0].description : null} +
@@ -300,21 +315,55 @@ const Dataset = () => { - + - - + + - + + + + - + + + }); + + // if (success) { + // if (actionRef.current) { + // actionRef.current.reload(); + // } + // } + }, + }); + }} + > + 删除 + + + ), + }, + ]; + return ( +
+
- - ), - }, - ]; - return (
-
- -
-
- - {dialogTitle} - } open={isModalOpen} className={Styles.modal} okButtonProps={{ - htmlType: 'submit', - form: 'form', - }} onCancel={handleCancel}> + +
+ + + {dialogTitle} + + } + open={isModalOpen} + className={Styles.modal} + okButtonProps={{ + htmlType: 'submit', + form: 'form', + }} + onCancel={handleCancel} + >
{ - )}; -export default Pipeline; \ No newline at end of file + + ); +}; +export default Pipeline; diff --git a/react-ui/src/requestConfig.ts b/react-ui/src/requestConfig.ts index ca732f12..1036bc86 100644 --- a/react-ui/src/requestConfig.ts +++ b/react-ui/src/requestConfig.ts @@ -40,7 +40,8 @@ export const requestConfig: RequestConfig = { responseInterceptors: [ (response: any) => { const { status, data } = response; - if (status && status >= 200 && status < 300 && data && data.code === 200) { + // console.log('response', response); + if (status >= 200 && status < 300 && data && (data instanceof Blob || data.code === 200)) { return response; } else { if (data && data.msg) { diff --git a/react-ui/src/styles/theme.less b/react-ui/src/styles/theme.less new file mode 100644 index 00000000..a4400afb --- /dev/null +++ b/react-ui/src/styles/theme.less @@ -0,0 +1,8 @@ +// 全局颜色变量 + +@primary-color: #1664ff; // 主色调 + +// 导出变量 +:export { + primaryColor: #1664ff; // FIXME: 设置为 @primary-color 不起作用，感觉是哪里被重置了 +} From f4afbf142373b8443e4cd9a30eea2c7c12e8eb5f Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Sun, 7 Apr 2024 14:03:22 +0800 Subject: [PATCH 3/3] =?UTF-8?q?style:=20=E6=A0=BC=E5=BC=8F=E5=8C=96?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/.eslintrc.js | 4 +- react-ui/package.json | 28 +- react-ui/src/components/DictTag/index.tsx | 160 +-- .../src/components/HeaderDropdown/index.tsx | 4 +- .../src/components/IconSelector/Category.tsx | 19 +- .../components/IconSelector/CopyableIcon.tsx | 17 +- .../IconSelector/IconPicSearcher.tsx | 57 +- .../src/components/IconSelector/fields.ts | 4 +- .../src/components/IconSelector/index.tsx | 32 +- .../components/IconSelector/themeIcons.tsx | 7 +- .../RightContent/AvatarDropdown.tsx | 10 +- react-ui/src/enums/pagesEnums.ts | 5 +- react-ui/src/enums/status.d.ts | 1 - react-ui/src/global.less | 56 +- react-ui/src/locales/en-US/app.ts | 48 +- react-ui/src/locales/zh-CN.ts | 24 +- react-ui/src/locales/zh-CN/monitor/job-log.ts | 20 +- react-ui/src/locales/zh-CN/monitor/job.ts | 34 +- .../src/locales/zh-CN/monitor/logininfor.ts | 22 +- .../src/locales/zh-CN/monitor/onlineUser.ts | 3 +- react-ui/src/locales/zh-CN/monitor/operlog.ts | 34 +- react-ui/src/locales/zh-CN/monitor/server.ts | 3 +- react-ui/src/locales/zh-CN/system/config.ts | 24 +- react-ui/src/locales/zh-CN/system/dept.ts | 32 +- react-ui/src/locales/zh-CN/system/menu.ts | 40 +- react-ui/src/locales/zh-CN/system/notice.ts | 22 +- react-ui/src/locales/zh-CN/system/post.ts | 22 +- react-ui/src/locales/zh-CN/system/role.ts | 38 +- react-ui/src/locales/zh-CN/system/user.ts | 58 +- react-ui/src/pages/Dataset/index.jsx | 116 +- react-ui/src/pages/Dataset/personalData.jsx | 572 ++++---- react-ui/src/pages/Dataset/publicData.jsx | 363 ++--- .../experimentText/editPipeline.less | 78 +- .../pages/Experiment/experimentText/props.jsx | 7 +- react-ui/src/pages/Monitor/Job/detail.tsx | 10 +- react-ui/src/pages/Monitor/Job/edit.tsx | 47 +- react-ui/src/pages/Monitor/Job/index.tsx | 60 +- react-ui/src/pages/Monitor/JobLog/detail.tsx | 13 +- react-ui/src/pages/Monitor/JobLog/index.tsx | 40 +- react-ui/src/pages/Monitor/Online/index.tsx | 66 +- .../Pipeline/editPipeline/editPipeline.less | 50 +- .../src/pages/Pipeline/editPipeline/index.jsx | 1255 +++++++++-------- .../Pipeline/editPipeline/modelMenus.jsx | 132 +- .../Pipeline/editPipeline/modelMenus.less | 78 +- .../src/pages/Pipeline/editPipeline/props.jsx | 270 ++-- react-ui/src/pages/Pipeline/index.less | 116 +- react-ui/src/pages/System/Config/edit.tsx | 53 +- react-ui/src/pages/System/Config/index.tsx | 42 +- react-ui/src/pages/System/Dept/edit.tsx | 17 +- react-ui/src/pages/System/Dept/index.tsx | 47 +- react-ui/src/pages/System/Dict/edit.tsx | 35 +- react-ui/src/pages/System/Dict/index.tsx | 42 +- react-ui/src/pages/System/DictData/edit.tsx | 31 +- react-ui/src/pages/System/DictData/index.tsx | 61 +- react-ui/src/pages/System/Logininfor/edit.tsx | 62 +- .../src/pages/System/Logininfor/index.tsx | 41 +- react-ui/src/pages/System/Menu/edit.tsx | 54 +- react-ui/src/pages/System/Menu/index.tsx | 37 +- react-ui/src/pages/System/Notice/edit.tsx | 57 +- react-ui/src/pages/System/Notice/index.tsx | 48 +- react-ui/src/pages/System/Operlog/detail.tsx | 11 +- react-ui/src/pages/System/Operlog/index.tsx | 41 +- react-ui/src/pages/System/Post/edit.tsx | 53 +- react-ui/src/pages/System/Post/index.tsx | 36 +- react-ui/src/pages/System/Role/authUser.tsx | 505 +++---- .../System/Role/components/DataScope.tsx | 418 +++--- .../Role/components/UserSelectorModal.tsx | 26 +- react-ui/src/pages/System/Role/edit.tsx | 28 +- react-ui/src/pages/System/Role/index.tsx | 88 +- .../pages/System/User/components/AuthRole.tsx | 122 +- .../pages/System/User/components/DeptTree.tsx | 7 +- .../pages/System/User/components/ResetPwd.tsx | 10 +- react-ui/src/pages/System/User/edit.tsx | 42 +- react-ui/src/pages/System/User/index.tsx | 108 +- .../pages/Tool/Gen/components/BaseInfo.tsx | 11 +- .../pages/Tool/Gen/components/ColumnInfo.tsx | 8 +- .../src/pages/Tool/Gen/components/GenInfo.tsx | 12 +- .../pages/Tool/Gen/components/PreviewCode.tsx | 14 +- react-ui/src/pages/Tool/Gen/edit.tsx | 40 +- react-ui/src/pages/Tool/Gen/import.tsx | 10 +- react-ui/src/pages/Tool/Gen/index.tsx | 24 +- react-ui/src/pages/Tool/Gen/service.ts | 4 +- react-ui/src/pages/User/Center/Center.less | 7 +- .../components/AvatarCropper/index.less | 18 +- .../Center/components/AvatarCropper/index.tsx | 14 +- .../User/Center/components/BaseInfo/index.tsx | 9 +- .../Center/components/ResetPassword/index.tsx | 102 +- react-ui/src/pages/User/Login/index.tsx | 573 ++++---- react-ui/src/pages/User/Login/login.less | 49 +- react-ui/src/pages/User/Settings/index.tsx | 1 - .../src/services/ant-design-pro/typings.d.ts | 2 +- react-ui/src/services/dataset/index.js | 85 +- .../services/developmentEnvironment/index.js | 12 +- react-ui/src/services/experiment/index.js | 6 +- react-ui/src/services/monitor/cache.ts | 6 +- react-ui/src/services/monitor/cachelist.ts | 34 +- react-ui/src/services/monitor/job.ts | 18 +- react-ui/src/services/monitor/jobLog.ts | 19 +- react-ui/src/services/monitor/logininfor.ts | 20 +- react-ui/src/services/monitor/online.ts | 6 +- react-ui/src/services/monitor/operlog.ts | 12 +- react-ui/src/services/monitor/server.ts | 5 +- react-ui/src/services/pipeline/index.js | 75 +- react-ui/src/services/system/config.ts | 21 +- react-ui/src/services/system/dept.ts | 16 +- react-ui/src/services/system/dict.ts | 24 +- react-ui/src/services/system/dictdata.ts | 5 +- react-ui/src/services/system/index.ts | 2 +- react-ui/src/services/system/menu.ts | 19 +- react-ui/src/services/system/notice.ts | 16 +- react-ui/src/services/system/post.ts | 16 +- react-ui/src/services/system/role.ts | 46 +- react-ui/src/services/system/user.ts | 62 +- react-ui/src/types/monitor/cache.d.ts | 7 +- react-ui/src/types/monitor/cacheList.d.ts | 7 +- react-ui/src/types/monitor/job.d.ts | 12 +- react-ui/src/types/monitor/jobLog.d.ts | 12 +- react-ui/src/types/monitor/logininfor.d.ts | 11 +- react-ui/src/types/monitor/online.d.ts | 11 +- react-ui/src/types/monitor/operlog.d.ts | 11 +- react-ui/src/types/monitor/server.d.ts | 8 +- react-ui/src/types/system/config.d.ts | 11 +- react-ui/src/types/system/dept.d.ts | 11 +- react-ui/src/types/system/menu.d.ts | 11 +- react-ui/src/types/system/notice.d.ts | 11 +- react-ui/src/types/system/post.d.ts | 11 +- react-ui/src/types/system/role.d.ts | 17 +- react-ui/src/types/system/user.d.ts | 11 +- react-ui/src/utils/downloadfile.ts | 3 +- react-ui/src/utils/index.js | 20 +- react-ui/src/utils/options.ts | 22 +- 131 files changed, 4117 insertions(+), 3736 deletions(-) diff --git a/react-ui/.eslintrc.js b/react-ui/.eslintrc.js index ad3e7590..564a28d2 100644 --- a/react-ui/.eslintrc.js +++ b/react-ui/.eslintrc.js @@ -5,6 +5,6 @@ module.exports = { REACT_APP_ENV: true, }, rules: { - "@typescript-eslint/no-use-before-define": "off" - } + '@typescript-eslint/no-use-before-define': 'off', + }, }; diff --git a/react-ui/package.json b/react-ui/package.json index 0a55edde..a3ad6812 100644 --- a/react-ui/package.json +++ b/react-ui/package.json @@ -4,19 +4,10 @@ "private": true, "description": "An out-of-box UI solution for enterprise applications", "scripts": { - "dev": "npm run start:dev", + "analyze": "cross-env ANALYZE=1 max build", "build": "max build", "deploy": "npm run build && npm run gh-pages", - "preview": "npm run build && max preview --port 8000", - "serve": "umi-serve", - "start": "cross-env UMI_ENV=dev max dev", - "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev", - "start:no-mock": "cross-env MOCK=none UMI_ENV=dev max dev", - "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev", - "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev", - "test": "jest", - "test:coverage": "npm run jest -- --coverage", - "test:update": "npm run jest -- -u", + "dev": "npm run start:dev", "docker-hub:build": "docker build -f Dockerfile.hub -t ant-design-pro ./", "docker-prod:build": "docker-compose -f ./docker/docker-compose.yml build", "docker-prod:dev": "docker-compose -f ./docker/docker-compose.yml up", @@ -24,7 +15,6 @@ "docker:dev": "docker-compose -f ./docker/docker-compose.dev.yml up", "docker:push": "npm run docker-hub:build && npm run docker:tag && docker push antdesign/ant-design-pro", "docker:tag": "docker tag ant-design-pro antdesign/ant-design-pro", - "analyze": "cross-env ANALYZE=1 max build", "gh-pages": "gh-pages -d dist", "i18n-remove": "pro i18n-remove --locale=zh-CN --write", "postinstall": "max setup", @@ -38,8 +28,18 @@ "openapi": "max openapi", "prepare": "cd .. && husky install", "prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"", - "tsc": "tsc --noEmit", - "record": "cross-env NODE_ENV=development REACT_APP_ENV=test max record --scene=login" + "preview": "npm run build && max preview --port 8000", + "record": "cross-env NODE_ENV=development REACT_APP_ENV=test max record --scene=login", + "serve": "umi-serve", + "start": "cross-env UMI_ENV=dev max dev", + "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev", + "start:no-mock": "cross-env MOCK=none UMI_ENV=dev max dev", + "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev", + "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev", + "test": "jest", + "test:coverage": "npm run jest -- --coverage", + "test:update": "npm run jest -- -u", + "tsc": "tsc --noEmit" }, "lint-staged": { "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js", diff --git a/react-ui/src/components/DictTag/index.tsx b/react-ui/src/components/DictTag/index.tsx index 2b2a7910..cd5bce07 100644 --- a/react-ui/src/components/DictTag/index.tsx +++ b/react-ui/src/components/DictTag/index.tsx @@ -1,7 +1,7 @@ -import React from 'react'; -import { Tag } from 'antd'; import { ProSchemaValueEnumType } from '@ant-design/pro-components'; +import { Tag } from 'antd'; import { DefaultOptionType } from 'antd/es/select'; +import React from 'react'; /* * * @@ -11,105 +11,101 @@ import { DefaultOptionType } from 'antd/es/select'; * */ export interface DictValueEnumType extends ProSchemaValueEnumType { - id?: string | number; - key?: string | number; - value: string | number; - label: string; - listClass?: string; + id?: string | number; + key?: string | number; + value: string | number; + label: string; + listClass?: string; } export interface DictOptionType extends DefaultOptionType { - id?: string | number; - key?: string | number; - text: string; - listClass?: string; + id?: string | number; + key?: string | number; + text: string; + listClass?: string; } - export type DictValueEnumObj = Record; export type DictTagProps = { - key?: string; - value?: string | number; - enums?: DictValueEnumObj; - options?: DictOptionType[]; + key?: string; + value?: string | number; + enums?: DictValueEnumObj; + options?: DictOptionType[]; }; const DictTag: React.FC = (props) => { - function getDictColor(type?: string) { - switch (type) { - case 'primary': - return 'blue'; - case 'success': - return 'success'; - case 'info': - return 'green'; - case 'warning': - return 'warning'; - case 'danger': - return 'error'; - case 'default': - default: - return 'default'; - } + function getDictColor(type?: string) { + switch (type) { + case 'primary': + return 'blue'; + case 'success': + return 'success'; + case 'info': + return 'green'; + case 'warning': + return 'warning'; + case 'danger': + return 'error'; + case 'default': + default: + return 'default'; } + } - function getDictLabelByValue(value: string | number | undefined): string { - if (value === undefined) { - return ''; - } - if (props.enums) { - const item = props.enums[value]; - return item.label; - } - if (props.options) { - if (!Array.isArray(props.options)) { - console.log('DictTag options is no array!') - return ''; - } - for (const item of props.options) { - if (item.value === value) { - return item.text; - } - } + function getDictLabelByValue(value: string | number | undefined): string { + if (value === undefined) { + return ''; + } + if (props.enums) { + const item = props.enums[value]; + return item.label; + } + if (props.options) { + if (!Array.isArray(props.options)) { + console.log('DictTag options is no array!'); + return ''; + } + for (const item of props.options) { + if (item.value === value) { + return item.text; } - return String(props.value); + } } + return String(props.value); + } - function getDictListClassByValue(value: string | number | undefined): string { - if (value === undefined) { - return 'default'; - } - if (props.enums) { - const item = props.enums[value]; - return item.listClass || 'default'; - } - if (props.options) { - if (!Array.isArray(props.options)) { - console.log('DictTag options is no array!') - return 'default'; - } - for (const item of props.options) { - if (item.value === value) { - return item.listClass || 'default'; - } - } + function getDictListClassByValue(value: string | number | undefined): string { + if (value === undefined) { + return 'default'; + } + if (props.enums) { + const item = props.enums[value]; + return item.listClass || 'default'; + } + if (props.options) { + if (!Array.isArray(props.options)) { + console.log('DictTag options is no array!'); + return 'default'; + } + for (const item of props.options) { + if (item.value === value) { + return item.listClass || 'default'; } - return String(props.value); + } } + return String(props.value); + } - const getTagColor = () => { - return getDictColor(getDictListClassByValue(props.value).toLowerCase()); - }; - - const getTagText = (): string => { - return getDictLabelByValue(props.value); - }; + const getTagColor = () => { + return getDictColor(getDictListClassByValue(props.value).toLowerCase()); + }; - return ( - {getTagText()} - ) -} + const getTagText = (): string => { + return getDictLabelByValue(props.value); + }; + return {getTagText()}; +}; -export default DictTag; \ No newline at end of file +export default DictTag; diff --git a/react-ui/src/components/HeaderDropdown/index.tsx b/react-ui/src/components/HeaderDropdown/index.tsx index 8474be51..ae560fd2 100644 --- a/react-ui/src/components/HeaderDropdown/index.tsx +++ b/react-ui/src/components/HeaderDropdown/index.tsx @@ -1,8 +1,8 @@ +import { useEmotionCss } from '@ant-design/use-emotion-css'; import { Dropdown } from 'antd'; import type { DropDownProps } from 'antd/es/dropdown'; -import React from 'react'; -import { useEmotionCss } from '@ant-design/use-emotion-css'; import classNames from 'classnames'; +import React from 'react'; export type HeaderDropdownProps = { overlayClassName?: string; diff --git a/react-ui/src/components/IconSelector/Category.tsx b/react-ui/src/components/IconSelector/Category.tsx index dd0e93f7..5f683276 100644 --- a/react-ui/src/components/IconSelector/Category.tsx +++ b/react-ui/src/components/IconSelector/Category.tsx @@ -1,8 +1,8 @@ +import { useIntl } from '@umijs/max'; import * as React from 'react'; import CopyableIcon from './CopyableIcon'; -import type { ThemeType } from './index'; import type { CategoriesKeys } from './fields'; -import { useIntl } from '@umijs/max'; +import type { ThemeType } from './index'; import styles from './style.less'; interface CategoryProps { @@ -13,8 +13,7 @@ interface CategoryProps { onSelect: (type: string, name: string) => any; } -const Category: React.FC = props => { - +const Category: React.FC = (props) => { const { icons, title, newIcons, theme } = props; const intl = useIntl(); const [justCopied, setJustCopied] = React.useState(null); @@ -40,12 +39,14 @@ const Category: React.FC = props => { return (
-

{intl.formatMessage({ - id: `app.docs.components.icon.category.${title}`, - defaultMessage: '信息', - })}

+

+ {intl.formatMessage({ + id: `app.docs.components.icon.category.${title}`, + defaultMessage: '信息', + })} +

    - {icons.map(name => ( + {icons.map((name) => ( any; } -const CopyableIcon: React.FC = ({ - name, - justCopied, - onSelect, - theme, -}) => { +const CopyableIcon: React.FC = ({ name, justCopied, onSelect, theme }) => { const className = classNames({ copied: justCopied === name, [theme]: !!theme, }); return ( -
  • { if (onSelect) { onSelect(theme, name); } - }}> + }} + > {React.createElement(allIcons[name], { className: styles.anticon })} diff --git a/react-ui/src/components/IconSelector/IconPicSearcher.tsx b/react-ui/src/components/IconSelector/IconPicSearcher.tsx index 3a4cf016..2183f4d4 100644 --- a/react-ui/src/components/IconSelector/IconPicSearcher.tsx +++ b/react-ui/src/components/IconSelector/IconPicSearcher.tsx @@ -1,7 +1,7 @@ -import React, { useCallback, useEffect, useState } from 'react'; -import { Upload, Tooltip, Popover, Modal, Progress, Spin, Result } from 'antd'; import * as AntdIcons from '@ant-design/icons'; import { useIntl } from '@umijs/max'; +import { Modal, Popover, Progress, Result, Spin, Tooltip, Upload } from 'antd'; +import React, { useCallback, useEffect, useState } from 'react'; import './style.less'; const allIcons: { [key: string]: any } = AntdIcons; @@ -34,7 +34,7 @@ interface iconObject { const PicSearcher: React.FC = () => { const intl = useIntl(); - const {formatMessage} = intl; + const { formatMessage } = intl; const [state, setState] = useState({ loading: false, modalOpen: false, @@ -53,15 +53,15 @@ const PicSearcher: React.FC = () => { event_label: icons[0].className, }); } - icons = icons.map(i => ({ score: i.score, type: i.className.replace(/\s/g, '-') })); - setState(prev => ({ ...prev, loading: false, error: false, icons })); + icons = icons.map((i) => ({ score: i.score, type: i.className.replace(/\s/g, '-') })); + setState((prev) => ({ ...prev, loading: false, error: false, icons })); } catch { - setState(prev => ({ ...prev, loading: false, error: true })); + setState((prev) => ({ ...prev, loading: false, error: true })); } }; // eslint-disable-next-line class-methods-use-this const toImage = (url: string) => - new Promise(resolve => { + new Promise((resolve) => { const img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); img.src = url; @@ -71,11 +71,11 @@ const PicSearcher: React.FC = () => { }); const uploadFile = useCallback((file: File) => { - setState(prev => ({ ...prev, loading: true })); + setState((prev) => ({ ...prev, loading: true })); const reader = new FileReader(); reader.onload = () => { toImage(reader.result as string).then(predict); - setState(prev => ({ + setState((prev) => ({ ...prev, fileList: [{ uid: 1, name: file.name, status: 'done', url: reader.result }], })); @@ -99,7 +99,7 @@ const PicSearcher: React.FC = () => { } }, []); const toggleModal = useCallback(() => { - setState(prev => ({ + setState((prev) => ({ ...prev, modalOpen: !prev.modalOpen, popoverVisible: false, @@ -115,12 +115,12 @@ const PicSearcher: React.FC = () => { const script = document.createElement('script'); script.onload = async () => { await window.antdIconClassifier.load(); - setState(prev => ({ ...prev, modelLoaded: true })); + setState((prev) => ({ ...prev, modelLoaded: true })); document.addEventListener('paste', onPaste); }; script.src = 'https://cdn.jsdelivr.net/gh/lewis617/antd-icon-classifier@0.0/dist/main.js'; document.head.appendChild(script); - setState(prev => ({ ...prev, popoverVisible: !localStorage.getItem('disableIconTip') })); + setState((prev) => ({ ...prev, popoverVisible: !localStorage.getItem('disableIconTip') })); return () => { document.removeEventListener('paste', onPaste); }; @@ -129,7 +129,7 @@ const PicSearcher: React.FC = () => { return (
    @@ -148,7 +148,6 @@ const PicSearcher: React.FC = () => { spinning={!state.modelLoaded} tip={formatMessage({ id: 'app.docs.components.icon.pic-searcher.modelloading', - })} >
    @@ -158,7 +157,7 @@ const PicSearcher: React.FC = () => { uploadFile(o.file as File)} + customRequest={(o) => uploadFile(o.file as File)} fileList={state.fileList} showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }} > @@ -166,21 +165,21 @@ const PicSearcher: React.FC = () => {

    - {formatMessage({id: 'app.docs.components.icon.pic-searcher.upload-text'})} + {formatMessage({ id: 'app.docs.components.icon.pic-searcher.upload-text' })}

    - {formatMessage({id: 'app.docs.components.icon.pic-searcher.upload-hint'})} + {formatMessage({ id: 'app.docs.components.icon.pic-searcher.upload-hint' })}

    )}
    {state.icons.length > 0 && (
    - {formatMessage({id: 'app.docs.components.icon.pic-searcher.result-tip'})} + {formatMessage({ id: 'app.docs.components.icon.pic-searcher.result-tip' })}
    )}
@@ -188,25 +187,27 @@ const PicSearcher: React.FC = () => { + - )} - {state.icons.map(icon => { + {state.icons.map((icon) => { const { type } = icon; const iconName = `${type .split('-') - .map(str => `${str[0].toUpperCase()}${str.slice(1)}`) + .map((str) => `${str[0].toUpperCase()}${str.slice(1)}`) .join('')}Outlined`; return (
- {formatMessage({id: 'app.docs.components.icon.pic-searcher.th-icon'})} + {formatMessage({ id: 'app.docs.components.icon.pic-searcher.th-icon' })} + + {formatMessage({ id: 'app.docs.components.icon.pic-searcher.th-score' })} {formatMessage({id: 'app.docs.components.icon.pic-searcher.th-score'})}
- - {React.createElement(allIcons[iconName])} - + + {React.createElement(allIcons[iconName])} + @@ -220,7 +221,9 @@ const PicSearcher: React.FC = () => { )} diff --git a/react-ui/src/components/IconSelector/fields.ts b/react-ui/src/components/IconSelector/fields.ts index de37e675..5de572cb 100644 --- a/react-ui/src/components/IconSelector/fields.ts +++ b/react-ui/src/components/IconSelector/fields.ts @@ -1,7 +1,7 @@ import * as AntdIcons from '@ant-design/icons/lib/icons'; const all = Object.keys(AntdIcons) - .map(n => n.replace(/(Outlined|Filled|TwoTone)$/, '')) + .map((n) => n.replace(/(Outlined|Filled|TwoTone)$/, '')) .filter((n, i, arr) => arr.indexOf(n) === i); const direction = [ @@ -206,7 +206,7 @@ const logo = [ const datum = [...direction, ...suggestion, ...editor, ...data, ...logo]; -const other = all.filter(n => !datum.includes(n)); +const other = all.filter((n) => !datum.includes(n)); export const categories = { direction, diff --git a/react-ui/src/components/IconSelector/index.tsx b/react-ui/src/components/IconSelector/index.tsx index 78dc931b..0d50db68 100644 --- a/react-ui/src/components/IconSelector/index.tsx +++ b/react-ui/src/components/IconSelector/index.tsx @@ -1,13 +1,13 @@ -import * as React from 'react'; import Icon, * as AntdIcons from '@ant-design/icons'; -import { Radio, Input, Empty } from 'antd'; +import { Empty, Input, Radio } from 'antd'; import type { RadioChangeEvent } from 'antd/es/radio/interface'; import debounce from 'lodash/debounce'; +import * as React from 'react'; import Category from './Category'; import IconPicSearcher from './IconPicSearcher'; -import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons'; import type { CategoriesKeys } from './fields'; import { categories } from './fields'; +import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons'; // import { useIntl } from '@umijs/max'; export enum ThemeType { @@ -41,13 +41,13 @@ const IconSelector: React.FC = (props) => { const handleSearchIcon = React.useCallback( debounce((searchKey: string) => { - setDisplayState(prevState => ({ ...prevState, searchKey })); + setDisplayState((prevState) => ({ ...prevState, searchKey })); }), [], ); const handleChangeTheme = React.useCallback((e: RadioChangeEvent) => { - setDisplayState(prevState => ({ ...prevState, theme: e.target.value as ThemeType })); + setDisplayState((prevState) => ({ ...prevState, theme: e.target.value as ThemeType })); }, []); const renderCategories = React.useMemo(() => { @@ -62,15 +62,19 @@ const IconSelector: React.FC = (props) => { .replace(new RegExp(`^<([a-zA-Z]*)\\s/>$`, 'gi'), (_, name) => name) .replace(/(Filled|Outlined|TwoTone)$/, '') .toLowerCase(); - iconList = iconList.filter((iconName:string) => iconName.toLowerCase().includes(matchKey)); + iconList = iconList.filter((iconName: string) => + iconName.toLowerCase().includes(matchKey), + ); } // CopyrightCircle is same as Copyright, don't show it - iconList = iconList.filter((icon:string) => icon !== 'CopyrightCircle'); + iconList = iconList.filter((icon: string) => icon !== 'CopyrightCircle'); return { category: key, - icons: iconList.map((iconName:string) => iconName + theme).filter((iconName:string) => allIcons[iconName]), + icons: iconList + .map((iconName: string) => iconName + theme) + .filter((iconName: string) => allIcons[iconName]), }; }) .filter(({ icons }) => !!icons.length) @@ -101,16 +105,16 @@ const IconSelector: React.FC = (props) => { buttonStyle="solid" options={[ { - label: , - value: ThemeType.Outlined + label: , + value: ThemeType.Outlined, }, { label: , - value: ThemeType.Filled + value: ThemeType.Filled, }, { label: , - value: ThemeType.TwoTone + value: ThemeType.TwoTone, }, ]} > @@ -128,7 +132,7 @@ const IconSelector: React.FC = (props) => { // placeholder={messages['app.docs.components.icon.search.placeholder']} style={{ margin: '0 10px', flex: 1 }} allowClear - onChange={e => handleSearchIcon(e.currentTarget.value)} + onChange={(e) => handleSearchIcon(e.currentTarget.value)} size="large" autoFocus suffix={} @@ -139,4 +143,4 @@ const IconSelector: React.FC = (props) => { ); }; -export default IconSelector +export default IconSelector; diff --git a/react-ui/src/components/IconSelector/themeIcons.tsx b/react-ui/src/components/IconSelector/themeIcons.tsx index abefe04d..1d9762cd 100644 --- a/react-ui/src/components/IconSelector/themeIcons.tsx +++ b/react-ui/src/components/IconSelector/themeIcons.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; - -export const FilledIcon: React.FC = props => { +export const FilledIcon: React.FC = (props) => { const path = 'M864 64H160C107 64 64 107 64 160v' + '704c0 53 43 96 96 96h704c53 0 96-43 96-96V16' + @@ -13,7 +12,7 @@ export const FilledIcon: React.FC = props => { ); }; -export const OutlinedIcon: React.FC = props => { +export const OutlinedIcon: React.FC = (props) => { const path = 'M864 64H160C107 64 64 107 64 160v7' + '04c0 53 43 96 96 96h704c53 0 96-43 96-96V160c' + @@ -27,7 +26,7 @@ export const OutlinedIcon: React.FC = props => { ); }; -export const TwoToneIcon: React.FC = props => { +export const TwoToneIcon: React.FC = (props) => { const path = 'M16 512c0 273.932 222.066 496 496 49' + '6s496-222.068 496-496S785.932 16 512 16 16 238.' + diff --git a/react-ui/src/components/RightContent/AvatarDropdown.tsx b/react-ui/src/components/RightContent/AvatarDropdown.tsx index 9447493e..c6c52a92 100644 --- a/react-ui/src/components/RightContent/AvatarDropdown.tsx +++ b/react-ui/src/components/RightContent/AvatarDropdown.tsx @@ -1,17 +1,17 @@ +import { clearSessionToken } from '@/access'; +import { PageEnum } from '@/enums/pagesEnums'; +import { setRemoteMenu } from '@/services/session'; +import { logout } from '@/services/system/auth'; import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons'; +import { setAlpha } from '@ant-design/pro-components'; import { useEmotionCss } from '@ant-design/use-emotion-css'; import { history, useModel } from '@umijs/max'; import { Avatar, Spin } from 'antd'; -import { setAlpha } from '@ant-design/pro-components'; import { stringify } from 'querystring'; import type { MenuInfo } from 'rc-menu/lib/interface'; import React, { useCallback } from 'react'; import { flushSync } from 'react-dom'; import HeaderDropdown from '../HeaderDropdown'; -import { setRemoteMenu } from '@/services/session'; -import { PageEnum } from '@/enums/pagesEnums'; -import { clearSessionToken } from '@/access'; -import { logout } from '@/services/system/auth'; export type GlobalHeaderRightProps = { menu?: boolean; diff --git a/react-ui/src/enums/pagesEnums.ts b/react-ui/src/enums/pagesEnums.ts index 4bdb5fd3..756d3325 100644 --- a/react-ui/src/enums/pagesEnums.ts +++ b/react-ui/src/enums/pagesEnums.ts @@ -1,4 +1,3 @@ - export enum PageEnum { - LOGIN = '/user/login' -} \ No newline at end of file + LOGIN = '/user/login', +} diff --git a/react-ui/src/enums/status.d.ts b/react-ui/src/enums/status.d.ts index 8b137891..e69de29b 100644 --- a/react-ui/src/enums/status.d.ts +++ b/react-ui/src/enums/status.d.ts @@ -1 +0,0 @@ - diff --git a/react-ui/src/global.less b/react-ui/src/global.less index c6d331ea..df9fc389 100644 --- a/react-ui/src/global.less +++ b/react-ui/src/global.less @@ -19,8 +19,8 @@ body, .ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed { left: unset; } -.ant-layout-sider-children{ - margin-top: 60px!important; +.ant-layout-sider-children { + margin-top: 60px !important; } canvas { display: block; @@ -31,67 +31,65 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -.ant-pro-layout .ant-pro-layout-content{ +.ant-pro-layout .ant-pro-layout-content { padding: 10px; } -.ant-pro-layout .ant-pro-layout-bg-list{ - background:#f9fafb; +.ant-pro-layout .ant-pro-layout-bg-list { + background: #f9fafb; } -.ant-table-wrapper .ant-table-thead >tr>th{ +.ant-table-wrapper .ant-table-thead > tr > th { background-color: #fff; } -.ant-table-wrapper .ant-table-thead >tr>td{ +.ant-table-wrapper .ant-table-thead > tr > td { background-color: #fff; } -.ant-menu-light .ant-menu-item-selected{ - background:rgba(197, 232, 255, 0.8)!important; +.ant-menu-light .ant-menu-item-selected { + background: rgba(197, 232, 255, 0.8) !important; } -.ant-pro-base-menu-inline{ +.ant-pro-base-menu-inline { // height: 87vh; - background:#f2f5f7; -border-radius:0px 20px 20px 0px; + background: #f2f5f7; + border-radius: 0px 20px 20px 0px; } -.ant-pro-layout .ant-pro-layout-content{ +.ant-pro-layout .ant-pro-layout-content { background-color: transparent; } -.ant-pro-global-header-logo img{ +.ant-pro-global-header-logo img { height: 21px; } -.ant-pro-layout .ant-layout-sider.ant-pro-sider{ +.ant-pro-layout .ant-layout-sider.ant-pro-sider { height: 87vh; } -.ant-pro-layout .ant-pro-layout-container{ +.ant-pro-layout .ant-pro-layout-container { height: 98vh; } -.ant-pagination .ant-pagination-item-active a{ - background:#1664ff; +.ant-pagination .ant-pagination-item-active a { color: #fff; + background: #1664ff; border-color: #1664ff; } -.ant-pagination .ant-pagination-item-active a:hover{ - background:rgba(22, 100, 255, 0.8); +.ant-pagination .ant-pagination-item-active a:hover { color: #fff; + background: rgba(22, 100, 255, 0.8); border-color: rgba(22, 100, 255, 0.8); } // ::-webkit-scrollbar-button { // background: #97a1bd; // } -::-webkit-scrollbar{ - width:9px; +::-webkit-scrollbar { + width: 9px; border-radius: 2px; } -::-webkit-scrollbar-thumb{ +::-webkit-scrollbar-thumb { // background-color: #9aa3bc!important; width: 7px; - background:rgba(77, 87, 123,0.5)!important; - + background: rgba(77, 87, 123, 0.5) !important; } -::-webkit-scrollbar-track{ +::-webkit-scrollbar-track { // background-color: #eaf1ff!important; width: 9px; - background:rgba(22, 100, 255,0.06)!important; - + background: rgba(22, 100, 255, 0.06) !important; } ul, ol { @@ -114,5 +112,3 @@ ol { } } } - - diff --git a/react-ui/src/locales/en-US/app.ts b/react-ui/src/locales/en-US/app.ts index 074dcb85..6a196446 100644 --- a/react-ui/src/locales/en-US/app.ts +++ b/react-ui/src/locales/en-US/app.ts @@ -1,26 +1,26 @@ export default { - 'app.docs.components.icon.search.placeholder': 'Search icons here, click icon to copy code', - 'app.docs.components.icon.outlined': 'Outlined', - 'app.docs.components.icon.filled': 'Filled', - 'app.docs.components.icon.two-tone': 'Two Tone', - 'app.docs.components.icon.category.direction': 'Directional Icons', - 'app.docs.components.icon.category.suggestion': 'Suggested Icons', - 'app.docs.components.icon.category.editor': 'Editor Icons', - 'app.docs.components.icon.category.data': 'Data Icons', - 'app.docs.components.icon.category.other': 'Application Icons', - 'app.docs.components.icon.category.logo': 'Brand and Logos', - 'app.docs.components.icon.pic-searcher.intro': - 'AI Search by image is online, you are welcome to use it! 🎉', - 'app.docs.components.icon.pic-searcher.title': 'Search by image', - 'app.docs.components.icon.pic-searcher.upload-text': - 'Click, drag, or paste file to this area to upload', - 'app.docs.components.icon.pic-searcher.upload-hint': - 'We will find the best matching icon based on the image provided', - 'app.docs.components.icon.pic-searcher.server-error': - 'Predict service is temporarily unavailable', - 'app.docs.components.icon.pic-searcher.matching': 'Matching...', - 'app.docs.components.icon.pic-searcher.modelloading': 'Model is loading...', - 'app.docs.components.icon.pic-searcher.result-tip': 'Matched the following icons for you:', - 'app.docs.components.icon.pic-searcher.th-icon': 'Icon', - 'app.docs.components.icon.pic-searcher.th-score': 'Probability', + 'app.docs.components.icon.search.placeholder': 'Search icons here, click icon to copy code', + 'app.docs.components.icon.outlined': 'Outlined', + 'app.docs.components.icon.filled': 'Filled', + 'app.docs.components.icon.two-tone': 'Two Tone', + 'app.docs.components.icon.category.direction': 'Directional Icons', + 'app.docs.components.icon.category.suggestion': 'Suggested Icons', + 'app.docs.components.icon.category.editor': 'Editor Icons', + 'app.docs.components.icon.category.data': 'Data Icons', + 'app.docs.components.icon.category.other': 'Application Icons', + 'app.docs.components.icon.category.logo': 'Brand and Logos', + 'app.docs.components.icon.pic-searcher.intro': + 'AI Search by image is online, you are welcome to use it! 🎉', + 'app.docs.components.icon.pic-searcher.title': 'Search by image', + 'app.docs.components.icon.pic-searcher.upload-text': + 'Click, drag, or paste file to this area to upload', + 'app.docs.components.icon.pic-searcher.upload-hint': + 'We will find the best matching icon based on the image provided', + 'app.docs.components.icon.pic-searcher.server-error': + 'Predict service is temporarily unavailable', + 'app.docs.components.icon.pic-searcher.matching': 'Matching...', + 'app.docs.components.icon.pic-searcher.modelloading': 'Model is loading...', + 'app.docs.components.icon.pic-searcher.result-tip': 'Matched the following icons for you:', + 'app.docs.components.icon.pic-searcher.th-icon': 'Icon', + 'app.docs.components.icon.pic-searcher.th-score': 'Probability', }; diff --git a/react-ui/src/locales/zh-CN.ts b/react-ui/src/locales/zh-CN.ts index 06e2eac5..ae9b1a77 100644 --- a/react-ui/src/locales/zh-CN.ts +++ b/react-ui/src/locales/zh-CN.ts @@ -2,25 +2,25 @@ import app from './zh-CN/app'; import component from './zh-CN/component'; import globalHeader from './zh-CN/globalHeader'; import sysmenu from './zh-CN/menu'; +import job from './zh-CN/monitor/job'; +import joblog from './zh-CN/monitor/job-log'; +import logininfor from './zh-CN/monitor/logininfor'; +import onlineUser from './zh-CN/monitor/onlineUser'; +import operlog from './zh-CN/monitor/operlog'; +import server from './zh-CN/monitor/server'; import pages from './zh-CN/pages'; import pwa from './zh-CN/pwa'; import settingDrawer from './zh-CN/settingDrawer'; import settings from './zh-CN/settings'; -import user from './zh-CN/system/user'; -import menu from './zh-CN/system/menu'; +import config from './zh-CN/system/config'; +import dept from './zh-CN/system/dept'; import dict from './zh-CN/system/dict'; import dictData from './zh-CN/system/dict-data'; -import role from './zh-CN/system/role'; -import dept from './zh-CN/system/dept'; -import post from './zh-CN/system/post'; -import config from './zh-CN/system/config'; +import menu from './zh-CN/system/menu'; import notice from './zh-CN/system/notice'; -import operlog from './zh-CN/monitor/operlog'; -import logininfor from './zh-CN/monitor/logininfor'; -import onlineUser from './zh-CN/monitor/onlineUser'; -import job from './zh-CN/monitor/job'; -import joblog from './zh-CN/monitor/job-log'; -import server from './zh-CN/monitor/server'; +import post from './zh-CN/system/post'; +import role from './zh-CN/system/role'; +import user from './zh-CN/system/user'; export default { 'navBar.lang': '语言', diff --git a/react-ui/src/locales/zh-CN/monitor/job-log.ts b/react-ui/src/locales/zh-CN/monitor/job-log.ts index 75cf8d06..5c038599 100644 --- a/react-ui/src/locales/zh-CN/monitor/job-log.ts +++ b/react-ui/src/locales/zh-CN/monitor/job-log.ts @@ -1,18 +1,18 @@ /** * 定时任务调度日志 - * + * * @author whiteshader * @date 2023-02-07 */ export default { - 'monitor.job.log.title': '定时任务调度日志', - 'monitor.job.log.job_log_id': '任务日志编号', - 'monitor.job.log.job_name': '任务名称', - 'monitor.job.log.job_group': '任务组名', - 'monitor.job.log.invoke_target': '调用方法', - 'monitor.job.log.job_message': '日志信息', - 'monitor.job.log.status': '执行状态', - 'monitor.job.log.exception_info': '异常信息', - 'monitor.job.log.create_time': '创建时间', + 'monitor.job.log.title': '定时任务调度日志', + 'monitor.job.log.job_log_id': '任务日志编号', + 'monitor.job.log.job_name': '任务名称', + 'monitor.job.log.job_group': '任务组名', + 'monitor.job.log.invoke_target': '调用方法', + 'monitor.job.log.job_message': '日志信息', + 'monitor.job.log.status': '执行状态', + 'monitor.job.log.exception_info': '异常信息', + 'monitor.job.log.create_time': '创建时间', }; diff --git a/react-ui/src/locales/zh-CN/monitor/job.ts b/react-ui/src/locales/zh-CN/monitor/job.ts index 7e0d5b9a..866ad8f0 100644 --- a/react-ui/src/locales/zh-CN/monitor/job.ts +++ b/react-ui/src/locales/zh-CN/monitor/job.ts @@ -1,25 +1,25 @@ /** * 定时任务调度 - * + * * @author whiteshader@163.com * @date 2023-02-07 */ export default { - 'monitor.job.title': '定时任务调度', - 'monitor.job.job_id': '任务编号', - 'monitor.job.job_name': '任务名称', - 'monitor.job.job_group': '任务组名', - 'monitor.job.invoke_target': '调用方法', - 'monitor.job.cron_expression': 'cron执行表达式', - 'monitor.job.misfire_policy': '执行策略', - 'monitor.job.concurrent': '是否并发执行', - 'monitor.job.next_valid_time': '下次执行时间', - 'monitor.job.status': '状态', - 'monitor.job.create_by': '创建者', - 'monitor.job.create_time': '创建时间', - 'monitor.job.update_by': '更新者', - 'monitor.job.update_time': '更新时间', - 'monitor.job.remark': '备注信息', - 'monitor.job.detail': '任务详情', + 'monitor.job.title': '定时任务调度', + 'monitor.job.job_id': '任务编号', + 'monitor.job.job_name': '任务名称', + 'monitor.job.job_group': '任务组名', + 'monitor.job.invoke_target': '调用方法', + 'monitor.job.cron_expression': 'cron执行表达式', + 'monitor.job.misfire_policy': '执行策略', + 'monitor.job.concurrent': '是否并发执行', + 'monitor.job.next_valid_time': '下次执行时间', + 'monitor.job.status': '状态', + 'monitor.job.create_by': '创建者', + 'monitor.job.create_time': '创建时间', + 'monitor.job.update_by': '更新者', + 'monitor.job.update_time': '更新时间', + 'monitor.job.remark': '备注信息', + 'monitor.job.detail': '任务详情', }; diff --git a/react-ui/src/locales/zh-CN/monitor/logininfor.ts b/react-ui/src/locales/zh-CN/monitor/logininfor.ts index 959a6d2c..10369ac8 100644 --- a/react-ui/src/locales/zh-CN/monitor/logininfor.ts +++ b/react-ui/src/locales/zh-CN/monitor/logininfor.ts @@ -1,13 +1,13 @@ export default { - 'monitor.logininfor.title': '系统访问记录', - 'monitor.logininfor.info_id': '访问编号', - 'monitor.logininfor.user_name': '用户账号', - 'monitor.logininfor.ipaddr': '登录IP地址', - 'monitor.logininfor.login_location': '登录地点', - 'monitor.logininfor.browser': '浏览器类型', - 'monitor.logininfor.os': '操作系统', - 'monitor.logininfor.status': '登录状态', - 'monitor.logininfor.msg': '提示消息', - 'monitor.logininfor.login_time': '访问时间', - 'monitor.logininfor.unlock': '解锁', + 'monitor.logininfor.title': '系统访问记录', + 'monitor.logininfor.info_id': '访问编号', + 'monitor.logininfor.user_name': '用户账号', + 'monitor.logininfor.ipaddr': '登录IP地址', + 'monitor.logininfor.login_location': '登录地点', + 'monitor.logininfor.browser': '浏览器类型', + 'monitor.logininfor.os': '操作系统', + 'monitor.logininfor.status': '登录状态', + 'monitor.logininfor.msg': '提示消息', + 'monitor.logininfor.login_time': '访问时间', + 'monitor.logininfor.unlock': '解锁', }; diff --git a/react-ui/src/locales/zh-CN/monitor/onlineUser.ts b/react-ui/src/locales/zh-CN/monitor/onlineUser.ts index c693cde7..fd2377a3 100644 --- a/react-ui/src/locales/zh-CN/monitor/onlineUser.ts +++ b/react-ui/src/locales/zh-CN/monitor/onlineUser.ts @@ -1,9 +1,8 @@ - /* * * * @author whiteshader@163.com * @datetime 2021/09/16 - * + * * */ export default { diff --git a/react-ui/src/locales/zh-CN/monitor/operlog.ts b/react-ui/src/locales/zh-CN/monitor/operlog.ts index c45824c6..6faf1c85 100644 --- a/react-ui/src/locales/zh-CN/monitor/operlog.ts +++ b/react-ui/src/locales/zh-CN/monitor/operlog.ts @@ -1,19 +1,19 @@ export default { - 'monitor.operlog.title': '操作日志记录', - 'monitor.operlog.oper_id': '日志主键', - 'monitor.operlog.business_type': '业务类型', - 'monitor.operlog.method': '方法名称', - 'monitor.operlog.request_method': '请求方式', - 'monitor.operlog.operator_type': '操作类别', - 'monitor.operlog.oper_name': '操作人员', - 'monitor.operlog.dept_name': '部门名称', - 'monitor.operlog.oper_url': '请求URL', - 'monitor.operlog.oper_ip': '主机地址', - 'monitor.operlog.oper_location': '操作地点', - 'monitor.operlog.oper_param': '请求参数', - 'monitor.operlog.json_result': '返回参数', - 'monitor.operlog.status': '操作状态', - 'monitor.operlog.error_msg': '错误消息', - 'monitor.operlog.oper_time': '操作时间', - 'monitor.operlog.module': '操作模块', + 'monitor.operlog.title': '操作日志记录', + 'monitor.operlog.oper_id': '日志主键', + 'monitor.operlog.business_type': '业务类型', + 'monitor.operlog.method': '方法名称', + 'monitor.operlog.request_method': '请求方式', + 'monitor.operlog.operator_type': '操作类别', + 'monitor.operlog.oper_name': '操作人员', + 'monitor.operlog.dept_name': '部门名称', + 'monitor.operlog.oper_url': '请求URL', + 'monitor.operlog.oper_ip': '主机地址', + 'monitor.operlog.oper_location': '操作地点', + 'monitor.operlog.oper_param': '请求参数', + 'monitor.operlog.json_result': '返回参数', + 'monitor.operlog.status': '操作状态', + 'monitor.operlog.error_msg': '错误消息', + 'monitor.operlog.oper_time': '操作时间', + 'monitor.operlog.module': '操作模块', }; diff --git a/react-ui/src/locales/zh-CN/monitor/server.ts b/react-ui/src/locales/zh-CN/monitor/server.ts index f887a221..33210f65 100644 --- a/react-ui/src/locales/zh-CN/monitor/server.ts +++ b/react-ui/src/locales/zh-CN/monitor/server.ts @@ -1,9 +1,8 @@ - /* * * * @author whiteshader@163.com * @datetime 2021/09/16 - * + * * */ export default { diff --git a/react-ui/src/locales/zh-CN/system/config.ts b/react-ui/src/locales/zh-CN/system/config.ts index 5e1e7646..8c230928 100644 --- a/react-ui/src/locales/zh-CN/system/config.ts +++ b/react-ui/src/locales/zh-CN/system/config.ts @@ -1,14 +1,14 @@ export default { - 'system.config.title': '参数配置', - 'system.config.config_id': '参数主键', - 'system.config.config_name': '参数名称', - 'system.config.config_key': '参数键名', - 'system.config.config_value': '参数键值', - 'system.config.config_type': '系统内置', - 'system.config.create_by': '创建者', - 'system.config.create_time': '创建时间', - 'system.config.update_by': '更新者', - 'system.config.update_time': '更新时间', - 'system.config.remark': '备注', - 'system.config.refreshCache': '刷新缓存', + 'system.config.title': '参数配置', + 'system.config.config_id': '参数主键', + 'system.config.config_name': '参数名称', + 'system.config.config_key': '参数键名', + 'system.config.config_value': '参数键值', + 'system.config.config_type': '系统内置', + 'system.config.create_by': '创建者', + 'system.config.create_time': '创建时间', + 'system.config.update_by': '更新者', + 'system.config.update_time': '更新时间', + 'system.config.remark': '备注', + 'system.config.refreshCache': '刷新缓存', }; diff --git a/react-ui/src/locales/zh-CN/system/dept.ts b/react-ui/src/locales/zh-CN/system/dept.ts index 7774f2c2..534f3119 100644 --- a/react-ui/src/locales/zh-CN/system/dept.ts +++ b/react-ui/src/locales/zh-CN/system/dept.ts @@ -1,18 +1,18 @@ export default { - 'system.dept.title': '部门', - 'system.dept.dept_id': '部门id', - 'system.dept.parent_id': '父部门id', - 'system.dept.parent_dept': '上级部门', - 'system.dept.ancestors': '祖级列表', - 'system.dept.dept_name': '部门名称', - 'system.dept.order_num': '显示顺序', - 'system.dept.leader': '负责人', - 'system.dept.phone': '联系电话', - 'system.dept.email': '邮箱', - 'system.dept.status': '部门状态', - 'system.dept.del_flag': '删除标志', - 'system.dept.create_by': '创建者', - 'system.dept.create_time': '创建时间', - 'system.dept.update_by': '更新者', - 'system.dept.update_time': '更新时间', + 'system.dept.title': '部门', + 'system.dept.dept_id': '部门id', + 'system.dept.parent_id': '父部门id', + 'system.dept.parent_dept': '上级部门', + 'system.dept.ancestors': '祖级列表', + 'system.dept.dept_name': '部门名称', + 'system.dept.order_num': '显示顺序', + 'system.dept.leader': '负责人', + 'system.dept.phone': '联系电话', + 'system.dept.email': '邮箱', + 'system.dept.status': '部门状态', + 'system.dept.del_flag': '删除标志', + 'system.dept.create_by': '创建者', + 'system.dept.create_time': '创建时间', + 'system.dept.update_by': '更新者', + 'system.dept.update_time': '更新时间', }; diff --git a/react-ui/src/locales/zh-CN/system/menu.ts b/react-ui/src/locales/zh-CN/system/menu.ts index 8a01e582..163c2cec 100644 --- a/react-ui/src/locales/zh-CN/system/menu.ts +++ b/react-ui/src/locales/zh-CN/system/menu.ts @@ -1,22 +1,22 @@ export default { - 'system.menu.title': '菜单权限', - 'system.menu.menu_id': '菜单编号', - 'system.menu.menu_name': '菜单名称', - 'system.menu.parent_id': '上级菜单', - 'system.menu.order_num': '显示顺序', - 'system.menu.path': '路由地址', - 'system.menu.component': '组件路径', - 'system.menu.query': '路由参数', - 'system.menu.is_frame': '是否为外链', - 'system.menu.is_cache': '是否缓存', - 'system.menu.menu_type': '菜单类型', - 'system.menu.visible': '显示状态', - 'system.menu.status': '菜单状态', - 'system.menu.perms': '权限标识', - 'system.menu.icon': '菜单图标', - 'system.menu.create_by': '创建者', - 'system.menu.create_time': '创建时间', - 'system.menu.update_by': '更新者', - 'system.menu.update_time': '更新时间', - 'system.menu.remark': '备注', + 'system.menu.title': '菜单权限', + 'system.menu.menu_id': '菜单编号', + 'system.menu.menu_name': '菜单名称', + 'system.menu.parent_id': '上级菜单', + 'system.menu.order_num': '显示顺序', + 'system.menu.path': '路由地址', + 'system.menu.component': '组件路径', + 'system.menu.query': '路由参数', + 'system.menu.is_frame': '是否为外链', + 'system.menu.is_cache': '是否缓存', + 'system.menu.menu_type': '菜单类型', + 'system.menu.visible': '显示状态', + 'system.menu.status': '菜单状态', + 'system.menu.perms': '权限标识', + 'system.menu.icon': '菜单图标', + 'system.menu.create_by': '创建者', + 'system.menu.create_time': '创建时间', + 'system.menu.update_by': '更新者', + 'system.menu.update_time': '更新时间', + 'system.menu.remark': '备注', }; diff --git a/react-ui/src/locales/zh-CN/system/notice.ts b/react-ui/src/locales/zh-CN/system/notice.ts index ad55d516..b5c94982 100644 --- a/react-ui/src/locales/zh-CN/system/notice.ts +++ b/react-ui/src/locales/zh-CN/system/notice.ts @@ -1,13 +1,13 @@ export default { - 'system.notice.title': '通知公告', - 'system.notice.notice_id': '公告编号', - 'system.notice.notice_title': '公告标题', - 'system.notice.notice_type': '公告类型', - 'system.notice.notice_content': '公告内容', - 'system.notice.status': '公告状态', - 'system.notice.create_by': '创建者', - 'system.notice.create_time': '创建时间', - 'system.notice.update_by': '更新者', - 'system.notice.update_time': '更新时间', - 'system.notice.remark': '备注', + 'system.notice.title': '通知公告', + 'system.notice.notice_id': '公告编号', + 'system.notice.notice_title': '公告标题', + 'system.notice.notice_type': '公告类型', + 'system.notice.notice_content': '公告内容', + 'system.notice.status': '公告状态', + 'system.notice.create_by': '创建者', + 'system.notice.create_time': '创建时间', + 'system.notice.update_by': '更新者', + 'system.notice.update_time': '更新时间', + 'system.notice.remark': '备注', }; diff --git a/react-ui/src/locales/zh-CN/system/post.ts b/react-ui/src/locales/zh-CN/system/post.ts index 40e589bc..c230a6c0 100644 --- a/react-ui/src/locales/zh-CN/system/post.ts +++ b/react-ui/src/locales/zh-CN/system/post.ts @@ -1,13 +1,13 @@ export default { - 'system.post.title': '岗位信息', - 'system.post.post_id': '岗位编号', - 'system.post.post_code': '岗位编码', - 'system.post.post_name': '岗位名称', - 'system.post.post_sort': '显示顺序', - 'system.post.status': '状态', - 'system.post.create_by': '创建者', - 'system.post.create_time': '创建时间', - 'system.post.update_by': '更新者', - 'system.post.update_time': '更新时间', - 'system.post.remark': '备注', + 'system.post.title': '岗位信息', + 'system.post.post_id': '岗位编号', + 'system.post.post_code': '岗位编码', + 'system.post.post_name': '岗位名称', + 'system.post.post_sort': '显示顺序', + 'system.post.status': '状态', + 'system.post.create_by': '创建者', + 'system.post.create_time': '创建时间', + 'system.post.update_by': '更新者', + 'system.post.update_time': '更新时间', + 'system.post.remark': '备注', }; diff --git a/react-ui/src/locales/zh-CN/system/role.ts b/react-ui/src/locales/zh-CN/system/role.ts index e88f9794..3c3d10e1 100644 --- a/react-ui/src/locales/zh-CN/system/role.ts +++ b/react-ui/src/locales/zh-CN/system/role.ts @@ -1,21 +1,21 @@ export default { - 'system.role.title': '角色信息', - 'system.role.role_id': '角色编号', - 'system.role.role_name': '角色名称', - 'system.role.role_key': '权限字符', - 'system.role.role_sort': '显示顺序', - 'system.role.data_scope': '数据范围', - 'system.role.menu_check_strictly': '菜单树选择项是否关联显示', - 'system.role.dept_check_strictly': '部门树选择项是否关联显示', - 'system.role.status': '角色状态', - 'system.role.del_flag': '删除标志', - 'system.role.create_by': '创建者', - 'system.role.create_time': '创建时间', - 'system.role.update_by': '更新者', - 'system.role.update_time': '更新时间', - 'system.role.remark': '备注', - 'system.role.auth': '菜单权限', - 'system.role.auth.user': '选择用户', - 'system.role.auth.addUser': '添加用户', - 'system.role.auth.cancelAll': '批量取消授权', + 'system.role.title': '角色信息', + 'system.role.role_id': '角色编号', + 'system.role.role_name': '角色名称', + 'system.role.role_key': '权限字符', + 'system.role.role_sort': '显示顺序', + 'system.role.data_scope': '数据范围', + 'system.role.menu_check_strictly': '菜单树选择项是否关联显示', + 'system.role.dept_check_strictly': '部门树选择项是否关联显示', + 'system.role.status': '角色状态', + 'system.role.del_flag': '删除标志', + 'system.role.create_by': '创建者', + 'system.role.create_time': '创建时间', + 'system.role.update_by': '更新者', + 'system.role.update_time': '更新时间', + 'system.role.remark': '备注', + 'system.role.auth': '菜单权限', + 'system.role.auth.user': '选择用户', + 'system.role.auth.addUser': '添加用户', + 'system.role.auth.cancelAll': '批量取消授权', }; diff --git a/react-ui/src/locales/zh-CN/system/user.ts b/react-ui/src/locales/zh-CN/system/user.ts index 7d676d03..66a9f8b1 100644 --- a/react-ui/src/locales/zh-CN/system/user.ts +++ b/react-ui/src/locales/zh-CN/system/user.ts @@ -1,31 +1,31 @@ export default { - 'system.user.title': '用户信息', - 'system.user.user_id': '用户编号', - 'system.user.dept_name': '部门', - 'system.user.user_name': '用户账号', - 'system.user.nick_name': '用户昵称', - 'system.user.user_type': '用户类型', - 'system.user.email': '用户邮箱', - 'system.user.phonenumber': '手机号码', - 'system.user.sex': '用户性别', - 'system.user.avatar': '头像地址', - 'system.user.password': '密码', - 'system.user.status': '帐号状态', - 'system.user.del_flag': '删除标志', - 'system.user.login_ip': '最后登录IP', - 'system.user.login_date': '最后登录时间', - 'system.user.create_by': '创建者', - 'system.user.create_time': '创建时间', - 'system.user.update_by': '更新者', - 'system.user.update_time': '更新时间', - 'system.user.remark': '备注', - 'system.user.post': '岗位', - 'system.user.role': '角色', - 'system.user.auth.role': '分配角色', - 'system.user.reset.password': '密码重置', - 'system.user.modify_info': '编辑用户信息', - 'system.user.old_password': '旧密码', - 'system.user.new_password': '新密码', - 'system.user.confirm_password': '确认密码', - 'system.user.modify_avatar': '修改头像', + 'system.user.title': '用户信息', + 'system.user.user_id': '用户编号', + 'system.user.dept_name': '部门', + 'system.user.user_name': '用户账号', + 'system.user.nick_name': '用户昵称', + 'system.user.user_type': '用户类型', + 'system.user.email': '用户邮箱', + 'system.user.phonenumber': '手机号码', + 'system.user.sex': '用户性别', + 'system.user.avatar': '头像地址', + 'system.user.password': '密码', + 'system.user.status': '帐号状态', + 'system.user.del_flag': '删除标志', + 'system.user.login_ip': '最后登录IP', + 'system.user.login_date': '最后登录时间', + 'system.user.create_by': '创建者', + 'system.user.create_time': '创建时间', + 'system.user.update_by': '更新者', + 'system.user.update_time': '更新时间', + 'system.user.remark': '备注', + 'system.user.post': '岗位', + 'system.user.role': '角色', + 'system.user.auth.role': '分配角色', + 'system.user.reset.password': '密码重置', + 'system.user.modify_info': '编辑用户信息', + 'system.user.old_password': '旧密码', + 'system.user.new_password': '新密码', + 'system.user.confirm_password': '确认密码', + 'system.user.modify_avatar': '修改头像', }; diff --git a/react-ui/src/pages/Dataset/index.jsx b/react-ui/src/pages/Dataset/index.jsx index 7a8bf2eb..b2aeda48 100644 --- a/react-ui/src/pages/Dataset/index.jsx +++ b/react-ui/src/pages/Dataset/index.jsx @@ -1,84 +1,74 @@ - -import React ,{useEffect,useState}from 'react'; -import Styles from './index.less' -import { Input, Space ,Button,Tabs,Pagination,Modal, Form,message, Radio,} from 'antd'; -import { PlusOutlined,PlusCircleOutlined, DeleteOutlined, ExclamationCircleOutlined, DownOutlined, EditOutlined ,CopyOutlined} from '@ant-design/icons'; -import {getDatasetList} from '@/services/dataset/index.js' +import { getDatasetList } from '@/services/dataset/index.js'; +import { Form, Input, Tabs } from 'antd'; +import React, { useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import Styles from './index.less'; +import PersonalData from './personalData'; +import PublicData from './publicData'; const { Search } = Input; -import { useNavigate} from 'react-router-dom'; -import moment from 'moment'; const { TabPane } = Tabs; -import PublicData from './publicData'; -import PersonalData from './personalData' -const leftdataList=[1,2,3] +const leftdataList = [1, 2, 3]; -const Dataset= React.FC = () => { - const [queryFlow,setQueryFlow]=useState({ - page:0, - size:10, - name:null +const Dataset = (React.FC = () => { + const [queryFlow, setQueryFlow] = useState({ + page: 0, + size: 10, + name: null, }); - const navgite=useNavigate(); - const [isModalOpen,setIsModalOpen]=useState(false) - const [datasetList,setDatasetList]=useState([]); - const [total,setTotal]=useState(0); + const navgite = useNavigate(); + const [isModalOpen, setIsModalOpen] = useState(false); + const [datasetList, setDatasetList] = useState([]); + const [total, setTotal] = useState(0); const [form] = Form.useForm(); const [dialogTitle, setDialogTitle] = useState('新建数据'); - const getDatasetlist=()=>{ - getDatasetList(queryFlow).then(ret=>{ + const getDatasetlist = () => { + getDatasetList(queryFlow).then((ret) => { console.log(ret); - if(ret.code==200){ - setDatasetList(ret.data.content) - setTotal(ret.data.totalElements) + if (ret.code == 200) { + setDatasetList(ret.data.content); + setTotal(ret.data.totalElements); } - }) - } + }); + }; const showModal = () => { - form.resetFields() - setDialogTitle('新建数据集') + form.resetFields(); + setDialogTitle('新建数据集'); setIsModalOpen(true); }; const handleOk = () => { - console.log(1111); + console.log(1111); setIsModalOpen(false); }; const handleCancel = () => { setIsModalOpen(false); }; - const onFinish = (values) => { - - }; - const routeToIntro=(e,record)=>{ - e.stopPropagation() - navgite({pathname:'/dataset/datasetIntro' }); -} + const onFinish = (values) => {}; + const routeToIntro = (e, record) => { + e.stopPropagation(); + navgite({ pathname: '/dataset/datasetIntro' }); + }; const onFinishFailed = (errorInfo) => { console.log('Failed:', errorInfo); }; - useEffect(()=>{ - - getDatasetlist() - return ()=>{ - - } - },[]) - return (
-
-
-
- - - - - - - - -
- -
) -}; -export default Dataset; \ No newline at end of file + useEffect(() => { + getDatasetlist(); + return () => {}; + }, []); + return ( +
+
+
+ + + + + + + + +
+
+ ); +}); +export default Dataset; diff --git a/react-ui/src/pages/Dataset/personalData.jsx b/react-ui/src/pages/Dataset/personalData.jsx index 5ee5d3c6..ac04fd40 100644 --- a/react-ui/src/pages/Dataset/personalData.jsx +++ b/react-ui/src/pages/Dataset/personalData.jsx @@ -1,240 +1,302 @@ - -import React ,{useEffect,useState}from 'react'; -import Styles from './index.less' -import './index.less' -import { Input, Space ,Button,Tabs,Pagination,Modal, Form,message, Radio,Select,Upload } from 'antd'; -import { PlusOutlined,PlusCircleOutlined,UploadOutlined , DeleteOutlined, ExclamationCircleOutlined, DownOutlined, EditOutlined ,CopyOutlined} from '@ant-design/icons'; -import {getDatasetList,addDatesetAndVesion,getAssetIcon} from '@/services/dataset/index.js' -import { getDictSelectOption } from "@/services/system/dict"; -const { Search } = Input; -import { useNavigate} from 'react-router-dom'; +import { getAccessToken } from '@/access'; +import { addDatesetAndVesion, getAssetIcon, getDatasetList } from '@/services/dataset/index.js'; +import { getDictSelectOption } from '@/services/system/dict'; +import { PlusCircleOutlined, UploadOutlined } from '@ant-design/icons'; +import { Button, Form, Input, Modal, Pagination, Radio, Select, Upload } from 'antd'; import moment from 'moment'; -import axios from 'axios' -import { getAccessToken } from '@/access'; -const leftdataList=[1,2,3] - -const PublicData= React.FC = () => { +import React, { useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import './index.less'; +import Styles from './index.less'; +const { Search } = Input; +const leftdataList = [1, 2, 3]; +const PublicData = (React.FC = () => { const props = { action: '/api/mmp/dataset/upload', // headers: { // 'X-Requested-With': null // }, headers: { - Authorization:getAccessToken(), - 'X-Requested-With': null - + Authorization: getAccessToken(), + 'X-Requested-With': null, }, onChange({ file, fileList }) { if (file.status !== 'uploading') { console.log(file, fileList); - form.setFieldsValue({dataset_version_vos:fileList.map(item=>item.response.data[0])}) + form.setFieldsValue({ dataset_version_vos: fileList.map((item) => item.response.data[0]) }); } }, - defaultFileList: [ - ], + defaultFileList: [], }; - const [queryFlow,setQueryFlow]=useState({ - page:0, - size:10, - name:null, - available_range:0, + const [queryFlow, setQueryFlow] = useState({ + page: 0, + size: 10, + name: null, + available_range: 0, + }); + const [iconParams, setIconParams] = useState({ + name: null, + page: 0, + size: 10000, }); - const [iconParams,setIconParams]=useState({ - name:null, - page:0, - size:10000 - }) - const [activeType,setActiveType]=useState(null) - const [activeTag,setActiveTag]=useState(null) - const [datasetTypeList,setDatasetTypeList]=useState([]) - const [datasetDirectionList,setDatasetDirectionList]=useState([]) - const navgite=useNavigate(); - const [clusterOptions,setClusterOptions]=useState([]) - const [isModalOpen,setIsModalOpen]=useState(false) - const [datasetList,setDatasetList]=useState([]); - const [total,setTotal]=useState(0); + const [activeType, setActiveType] = useState(null); + const [activeTag, setActiveTag] = useState(null); + const [datasetTypeList, setDatasetTypeList] = useState([]); + const [datasetDirectionList, setDatasetDirectionList] = useState([]); + const navgite = useNavigate(); + const [clusterOptions, setClusterOptions] = useState([]); + const [isModalOpen, setIsModalOpen] = useState(false); + const [datasetList, setDatasetList] = useState([]); + const [total, setTotal] = useState(0); const [form] = Form.useForm(); const [dialogTitle, setDialogTitle] = useState('新建数据'); - const getDatasetlist=(queryFlow)=>{ - getDatasetList(queryFlow).then(ret=>{ + const getDatasetlist = (queryFlow) => { + getDatasetList(queryFlow).then((ret) => { console.log(ret); - if(ret.code==200){ - setDatasetList(ret.data.content) - setTotal(ret.data.totalElements) + if (ret.code == 200) { + setDatasetList(ret.data.content); + setTotal(ret.data.totalElements); } - }) - } + }); + }; const showModal = () => { - form.resetFields() - setDialogTitle('新建数据集') + form.resetFields(); + setDialogTitle('新建数据集'); setIsModalOpen(true); }; - const getAssetIconList=(params)=>{ - getAssetIcon(params).then(ret=>{ + const getAssetIconList = (params) => { + getAssetIcon(params).then((ret) => { console.log(ret); - if(ret.code==200&&ret.data.content&&ret.data.content.length>0){ - setDatasetTypeList(ret.data.content.filter(item=>item.category_id==1)) - setDatasetDirectionList(ret.data.content.filter(item=>item.category_id==2)) + if (ret.code == 200 && ret.data.content && ret.data.content.length > 0) { + setDatasetTypeList(ret.data.content.filter((item) => item.category_id == 1)); + setDatasetDirectionList(ret.data.content.filter((item) => item.category_id == 2)); + } else { + setDatasetTypeList([]); + setDatasetDirectionList([]); } - else{ - setDatasetTypeList([]) - setDatasetDirectionList([]) - } - }) - } - const onSearch=(values)=>{ + }); + }; + const onSearch = (values) => { console.log(values); - getAssetIconList({...iconParams,name:values}) - } - const nameSearch=(values)=>{ + getAssetIconList({ ...iconParams, name: values }); + }; + const nameSearch = (values) => { console.log(values); - getDatasetlist({...queryFlow,name:values}) - } + getDatasetlist({ ...queryFlow, name: values }); + }; const handleOk = () => { - console.log(1111); + console.log(1111); setIsModalOpen(false); }; const handleCancel = () => { setIsModalOpen(false); }; - const chooseDatasetType=(val,item)=>{ - console.log(val,item); - if(item.path==queryFlow.data_type){ - setActiveType('') - setQueryFlow({...queryFlow,data_type:null}) - getDatasetlist({...queryFlow,data_type:null}) - } - else{ - setActiveType(item.path) - setQueryFlow({...queryFlow,data_type:item.path}) - getDatasetlist({...queryFlow,data_type:item.path}) + const chooseDatasetType = (val, item) => { + console.log(val, item); + if (item.path == queryFlow.data_type) { + setActiveType(''); + setQueryFlow({ ...queryFlow, data_type: null }); + getDatasetlist({ ...queryFlow, data_type: null }); + } else { + setActiveType(item.path); + setQueryFlow({ ...queryFlow, data_type: item.path }); + getDatasetlist({ ...queryFlow, data_type: item.path }); } // setQueryFlow({...queryFlow,data_type:item.path},()=>{ // getDatasetlist() // }) }; - const chooseDatasetTag=(val,item)=>{ - console.log(val,item); - if(item.path==queryFlow.data_tag){ - setActiveTag('') - setQueryFlow({...queryFlow,data_tag:null}) - getDatasetlist({...queryFlow,data_tag:null}) - } - else{ - setActiveTag(item.path) - setQueryFlow({...queryFlow,data_tag:item.path}) - getDatasetlist({...queryFlow,data_tag:item.path}) + const chooseDatasetTag = (val, item) => { + console.log(val, item); + if (item.path == queryFlow.data_tag) { + setActiveTag(''); + setQueryFlow({ ...queryFlow, data_tag: null }); + getDatasetlist({ ...queryFlow, data_tag: null }); + } else { + setActiveTag(item.path); + setQueryFlow({ ...queryFlow, data_tag: item.path }); + getDatasetlist({ ...queryFlow, data_tag: item.path }); } // setQueryFlow({...queryFlow,data_type:item.path},()=>{ // getDatasetlist() // }) }; const onFinish = (values) => { - addDatesetAndVesion(values).then(ret=>{ - console.log(ret); - setIsModalOpen(false); - getDatasetlist(queryFlow) - }) - }; - const routeToIntro=(e,record)=>{ - e.stopPropagation() + addDatesetAndVesion(values).then((ret) => { + console.log(ret); + setIsModalOpen(false); + getDatasetlist(queryFlow); + }); + }; + const routeToIntro = (e, record) => { + e.stopPropagation(); console.log(record); - navgite({pathname:`/dataset/datasetIntro/${record.id}` }); -} + navgite({ pathname: `/dataset/datasetIntro/${record.id}` }); + }; const onFinishFailed = (errorInfo) => { console.log('Failed:', errorInfo); }; - useEffect(()=>{ + useEffect(() => { getDictSelectOption('available_cluster').then((data) => { - setClusterOptions(data); }); - getAssetIconList(iconParams) - getDatasetlist(queryFlow) - return ()=>{ - - } - },[]) - return (<> - -
-
-
- -
分类
-
- - {datasetTypeList&&datasetTypeList.length>0?datasetTypeList.map(item=>{return
-
{chooseDatasetType(e, item)}} > - - - {item.name} + getAssetIconList(iconParams); + getDatasetlist(queryFlow); + return () => {}; + }, []); + return ( + <> +
+
+
+ +
分类
+
+ {datasetTypeList && datasetTypeList.length > 0 + ? datasetTypeList.map((item) => { + return ( +
+
{ + chooseDatasetType(e, item); + }} + > + + + {item.name} +
+
+ ); + }) + : ''} +
+
研究方向/应用领域
+
+ {datasetDirectionList && datasetDirectionList.length > 0 + ? datasetDirectionList.map((item) => { + return ( +
+
{ + chooseDatasetTag(e, item); + }} + > + + + {item.name} +
+
+ ); + }) + : ''} +
-
}):''} -
-
研究方向/应用领域
-
- - {datasetDirectionList&&datasetDirectionList.length>0?datasetDirectionList.map(item=>{return
-
{chooseDatasetTag(e, item)}}> - - - {item.name} +
+
+
+ 数据总数：{total}个 +
+ + +
-
}):''} -
-
-
-
-
- 数据总数：{total}个 -
- - +
+ {datasetList && datasetList.length > 0 + ? datasetList.map((item) => { + return ( +
routeToIntro(e, item)}> +
{item.name}
+
+ 最近更新: {moment(item.update_time).format('YYYY-MM-DD')} +
+
+ + 1582 +
+
+ ); + }) + : ''} + {/* Demo */} +
+
-
- {datasetList&&datasetList.length>0?datasetList.map(item=>{return
routeToIntro(e,item)}> -
{item.name}
-
最近更新: {moment(item.update_time).format('YYYY-MM-DD')}
-
1582
-
}):''} - {/* Demo */} -
- -
-
- - {dialogTitle} -
} open={isModalOpen} className={Styles.modal} okButtonProps={{ - htmlType: 'submit', - form: 'form', - }} onCancel={handleCancel}> + + + {dialogTitle} +
+ } + open={isModalOpen} + className={Styles.modal} + okButtonProps={{ + htmlType: 'submit', + form: 'form', + }} + onCancel={handleCancel} + >
{ - + - + {return {value:item.id,label:item.name}})} - /> + allowClear + placeholder="请选择研究方向/应用领域" + options={datasetDirectionList.map((item) => { + return { value: item.id, label: item.name }; + })} + /> - - - + - - 仅自己可见 - 工作空间可见 - - - - - - - + + 仅自己可见 + 工作空间可见 + + + + + + +
- ) -}; -export default PublicData; \ No newline at end of file + + ); +}); +export default PublicData; diff --git a/react-ui/src/pages/Dataset/publicData.jsx b/react-ui/src/pages/Dataset/publicData.jsx index ea783ff9..95e20846 100644 --- a/react-ui/src/pages/Dataset/publicData.jsx +++ b/react-ui/src/pages/Dataset/publicData.jsx @@ -1,195 +1,244 @@ - -import React ,{useEffect,useState}from 'react'; -import Styles from './index.less' -import { Input, Space ,Button,Tabs,Pagination,Modal, Form,message, Radio,} from 'antd'; -import { PlusOutlined,PlusCircleOutlined, DeleteOutlined, ExclamationCircleOutlined, DownOutlined, EditOutlined ,CopyOutlined} from '@ant-design/icons'; -import {getDatasetList,getAssetIcon} from '@/services/dataset/index.js' -const { Search } = Input; -import { useNavigate} from 'react-router-dom'; +import { getAssetIcon, getDatasetList } from '@/services/dataset/index.js'; +import { Form, Input, Pagination } from 'antd'; import moment from 'moment'; -const leftdataList=[1,2,3] +import React, { useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import Styles from './index.less'; +const { Search } = Input; +const leftdataList = [1, 2, 3]; -const PublicData= React.FC = () => { - const [queryFlow,setQueryFlow]=useState({ - page:0, - size:10, - name:null, - available_range:1 +const PublicData = (React.FC = () => { + const [queryFlow, setQueryFlow] = useState({ + page: 0, + size: 10, + name: null, + available_range: 1, }); - const [iconParams,setIconParams]=useState({ - name:null, - page:0, - size:10000 - }) - const navgite=useNavigate(); - const [datasetTypeList,setDatasetTypeList]=useState([]) - const [datasetDirectionList,setDatasetDirectionList]=useState([]) - const [activeType,setActiveType]=useState(null) - const [activeTag,setActiveTag]=useState(null) - const [isModalOpen,setIsModalOpen]=useState(false) - const [datasetList,setDatasetList]=useState([]); - const [total,setTotal]=useState(0); + const [iconParams, setIconParams] = useState({ + name: null, + page: 0, + size: 10000, + }); + const navgite = useNavigate(); + const [datasetTypeList, setDatasetTypeList] = useState([]); + const [datasetDirectionList, setDatasetDirectionList] = useState([]); + const [activeType, setActiveType] = useState(null); + const [activeTag, setActiveTag] = useState(null); + const [isModalOpen, setIsModalOpen] = useState(false); + const [datasetList, setDatasetList] = useState([]); + const [total, setTotal] = useState(0); const [form] = Form.useForm(); const [dialogTitle, setDialogTitle] = useState('新建数据'); - const getDatasetlist=(queryFlow)=>{ - getDatasetList(queryFlow).then(ret=>{ + const getDatasetlist = (queryFlow) => { + getDatasetList(queryFlow).then((ret) => { console.log(ret); - if(ret.code==200){ - setDatasetList(ret.data.content) - setTotal(ret.data.totalElements) + if (ret.code == 200) { + setDatasetList(ret.data.content); + setTotal(ret.data.totalElements); } - }) - } - const onSearch=(values)=>{ + }); + }; + const onSearch = (values) => { console.log(values); - getAssetIconList({...iconParams,name:values}) - } - const getAssetIconList=(params)=>{ - getAssetIcon(params).then(ret=>{ + getAssetIconList({ ...iconParams, name: values }); + }; + const getAssetIconList = (params) => { + getAssetIcon(params).then((ret) => { console.log(ret); - if(ret.code==200&&ret.data.content&&ret.data.content.length>0){ - setDatasetTypeList(ret.data.content.filter(item=>item.category_id==1)) - setDatasetDirectionList(ret.data.content.filter(item=>item.category_id==2)) - } - else{ - setDatasetTypeList([]) - setDatasetDirectionList([]) + if (ret.code == 200 && ret.data.content && ret.data.content.length > 0) { + setDatasetTypeList(ret.data.content.filter((item) => item.category_id == 1)); + setDatasetDirectionList(ret.data.content.filter((item) => item.category_id == 2)); + } else { + setDatasetTypeList([]); + setDatasetDirectionList([]); } - }) - } - const nameSearch=(values)=>{ + }); + }; + const nameSearch = (values) => { console.log(values); - getDatasetlist({...queryFlow,name:values}) - } + getDatasetlist({ ...queryFlow, name: values }); + }; const showModal = () => { - form.resetFields() - setDialogTitle('新建数据集') + form.resetFields(); + setDialogTitle('新建数据集'); setIsModalOpen(true); }; const handleOk = () => { - console.log(1111); + console.log(1111); setIsModalOpen(false); }; const handleCancel = () => { setIsModalOpen(false); }; - const chooseDatasetType=(val,item)=>{ - console.log(val,item); - if(item.path==queryFlow.data_type){ - setActiveType('') - setQueryFlow({...queryFlow,data_type:null}) - getDatasetlist({...queryFlow,data_type:null}) - } - else{ - setActiveType(item.path) - setQueryFlow({...queryFlow,data_type:item.path}) - getDatasetlist({...queryFlow,data_type:item.path}) + const chooseDatasetType = (val, item) => { + console.log(val, item); + if (item.path == queryFlow.data_type) { + setActiveType(''); + setQueryFlow({ ...queryFlow, data_type: null }); + getDatasetlist({ ...queryFlow, data_type: null }); + } else { + setActiveType(item.path); + setQueryFlow({ ...queryFlow, data_type: item.path }); + getDatasetlist({ ...queryFlow, data_type: item.path }); } // setQueryFlow({...queryFlow,data_type:item.path},()=>{ // getDatasetlist() // }) }; - const chooseDatasetTag=(val,item)=>{ - console.log(val,item); - if(item.path==queryFlow.data_tag){ - setActiveTag('') - setQueryFlow({...queryFlow,data_tag:null}) - getDatasetlist({...queryFlow,data_tag:null}) - } - else{ - setActiveTag(item.path) - setQueryFlow({...queryFlow,data_tag:item.path}) - getDatasetlist({...queryFlow,data_tag:item.path}) + const chooseDatasetTag = (val, item) => { + console.log(val, item); + if (item.path == queryFlow.data_tag) { + setActiveTag(''); + setQueryFlow({ ...queryFlow, data_tag: null }); + getDatasetlist({ ...queryFlow, data_tag: null }); + } else { + setActiveTag(item.path); + setQueryFlow({ ...queryFlow, data_tag: item.path }); + getDatasetlist({ ...queryFlow, data_tag: item.path }); } // setQueryFlow({...queryFlow,data_type:item.path},()=>{ // getDatasetlist() // }) }; - const routeToIntro=(e,record)=>{ - e.stopPropagation() - console.log(record); - navgite({pathname:`/dataset/datasetIntro/${record.id}` }); - } + const routeToIntro = (e, record) => { + e.stopPropagation(); + console.log(record); + navgite({ pathname: `/dataset/datasetIntro/${record.id}` }); + }; const onFinishFailed = (errorInfo) => { console.log('Failed:', errorInfo); }; - useEffect(()=>{ - getAssetIconList(iconParams) - getDatasetlist(queryFlow) - return ()=>{ - - } - },[]) - return (<> - -
-
-
- -
分类
-
- - {datasetTypeList&&datasetTypeList.length>0?datasetTypeList.map(item=>{return
-
{chooseDatasetType(e, item)}}> - - - {item.name} + useEffect(() => { + getAssetIconList(iconParams); + getDatasetlist(queryFlow); + return () => {}; + }, []); + return ( + <> +
+
+
+ +
分类
+
+ {datasetTypeList && datasetTypeList.length > 0 + ? datasetTypeList.map((item) => { + return ( +
+
{ + chooseDatasetType(e, item); + }} + > + + + {item.name} +
+
+ ); + }) + : ''} +
+
研究方向/应用领域
+
+ {datasetDirectionList && datasetDirectionList.length > 0 + ? datasetDirectionList.map((item) => { + return ( +
+
{ + chooseDatasetTag(e, item); + }} + > + + + {item.name} +
+
+ ); + }) + : ''} +
-
}):''} -
-
研究方向/应用领域
-
- - {datasetDirectionList&&datasetDirectionList.length>0?datasetDirectionList.map(item=>{return
-
{chooseDatasetTag(e, item)}}> - - - {item.name} +
+
+
+ 数据总数：{total}个 +
+ +
-
}):''} -
-
-
-
-
- 数据总数：{total}个 -
- +
+ {datasetList && datasetList.length > 0 + ? datasetList.map((item) => { + return ( +
routeToIntro(e, item)}> +
{item.name}
+
+ 最近更新: {moment(item.update_time).format('YYYY-MM-DD')} +
+
+ + 1582 +
+
+ ); + }) + : ''} + {/* Demo */} +
+
-
- {datasetList&&datasetList.length>0?datasetList.map(item=>{return
routeToIntro(e,item)}> -
{item.name}
-
最近更新: {moment(item.update_time).format('YYYY-MM-DD')}
-
1582
-
}):''} - {/* Demo */} -
- -
-
- ) -}; -export default PublicData; \ No newline at end of file + + ); +}); +export default PublicData; diff --git a/react-ui/src/pages/Experiment/experimentText/editPipeline.less b/react-ui/src/pages/Experiment/experimentText/editPipeline.less index 684b377c..f9e0e21b 100644 --- a/react-ui/src/pages/Experiment/experimentText/editPipeline.less +++ b/react-ui/src/pages/Experiment/experimentText/editPipeline.less @@ -1,61 +1,61 @@ #graph { - height: 100%; - width: 100%; - position: relative; - } -.editPipelinePropsContent{ + position: relative; + width: 100%; + height: 100%; +} +.editPipelinePropsContent { display: flex; align-items: center; width: 100%; - height:43px; - background:#f8fbff; - color:#1d1d20; - font-size:15px; - font-family: 'Alibaba'; - padding: 0 20px; + height: 43px; margin-bottom: 10px; + padding: 0 20px; + color: #1d1d20; + font-size: 15px; + font-family: 'Alibaba'; + background: #f8fbff; } -.centerContainer{ - flex: 1; +.centerContainer { display: flex; + flex: 1; flex-direction: column; } -.buttonList{ +.buttonList { display: flex; align-items: center; - padding: 0 30px; width: 100%; - height:45px; - background:#ffffff; - box-shadow:0px 3px 6px rgba(146, 146, 146, 0.09); -} -.detailBox{ - color:#1d1d20; -font-size:15px; -margin-bottom: 15px; -display: flex; -align-items: center; -} -.allMessageItem{ + height: 45px; + padding: 0 30px; + background: #ffffff; + box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09); +} +.detailBox { display: flex; align-items: center; - color:rgba(29, 29, 32, 0.8); -font-size:15px; -margin-right: 30px; + margin-bottom: 15px; + color: #1d1d20; + font-size: 15px; } -.resultTop{ - border-bottom: 1px solid #eee; +.allMessageItem { display: flex; - justify-content: space-between; align-items: center; - padding: 10px 0; + margin-right: 30px; + color: rgba(29, 29, 32, 0.8); + font-size: 15px; } -.resultContent{ - width: 100%; +.resultTop { display: flex; + align-items: center; justify-content: space-between; - + padding: 10px 0; + border-bottom: 1px solid #eee; +} +.resultContent { + display: flex; + align-items: center; - padding: 0 20px 0 0; + justify-content: space-between; + width: 100%; margin-bottom: 10px; -} \ No newline at end of file + padding: 0 20px 0 0; +} diff --git a/react-ui/src/pages/Experiment/experimentText/props.jsx b/react-ui/src/pages/Experiment/experimentText/props.jsx index 3c15566d..1a6c738b 100644 --- a/react-ui/src/pages/Experiment/experimentText/props.jsx +++ b/react-ui/src/pages/Experiment/experimentText/props.jsx @@ -160,7 +160,12 @@ const Props = forwardRef(({ onParentChange }, ref) => { Object.keys(stagingItem.control_strategy) && Object.keys(stagingItem.control_strategy).length > 0 ? Object.keys(stagingItem.control_strategy).map((item) => ( - + )) diff --git a/react-ui/src/pages/Monitor/Job/detail.tsx b/react-ui/src/pages/Monitor/Job/detail.tsx index e27bfb79..476f5816 100644 --- a/react-ui/src/pages/Monitor/Job/detail.tsx +++ b/react-ui/src/pages/Monitor/Job/detail.tsx @@ -1,14 +1,14 @@ -import React, { useEffect } from 'react'; -import { Modal, Descriptions, Button } from 'antd'; -import { FormattedMessage, useIntl } from '@umijs/max'; -import { getValueEnumLabel } from '@/utils/options'; import { DictValueEnumObj } from '@/components/DictTag'; +import { getValueEnumLabel } from '@/utils/options'; +import { FormattedMessage, useIntl } from '@umijs/max'; +import { Button, Descriptions, Modal } from 'antd'; +import React, { useEffect } from 'react'; /* * * * @author whiteshader@163.com * @datetime 2023/02/07 - * + * * */ export type OperlogFormValueType = Record & Partial; diff --git a/react-ui/src/pages/Monitor/Job/edit.tsx b/react-ui/src/pages/Monitor/Job/edit.tsx index e4bfc749..9e927e78 100644 --- a/react-ui/src/pages/Monitor/Job/edit.tsx +++ b/react-ui/src/pages/Monitor/Job/edit.tsx @@ -1,20 +1,20 @@ -import React, { useEffect } from 'react'; +import { DictOptionType, DictValueEnumObj } from '@/components/DictTag'; import { ProForm, + ProFormCaptcha, ProFormDigit, - ProFormText, - ProFormTextArea, ProFormRadio, ProFormSelect, - ProFormCaptcha, + ProFormText, + ProFormTextArea, } from '@ant-design/pro-components'; +import { FormattedMessage, useIntl } from '@umijs/max'; import { Form, Modal } from 'antd'; -import { useIntl, FormattedMessage } from '@umijs/max'; -import { DictOptionType, DictValueEnumObj } from '@/components/DictTag'; +import React, { useEffect } from 'react'; /** * 定时任务调度 Edit Form - * + * * @author whiteshader * @date 2023-02-07 */ @@ -83,7 +83,8 @@ const JobForm: React.FC = (props) => { grid={true} submitter={false} layout="horizontal" - onFinish={handleFinish}> + onFinish={handleFinish} + > = (props) => { rules={[ { required: true, - message: , + message: ( + + ), }, ]} /> @@ -153,7 +159,7 @@ const JobForm: React.FC = (props) => { id: 'monitor.job.cron_expression', defaultMessage: 'cron执行表达式', })} - captchaTextRender={() => "生成表达式"} + captchaTextRender={() => '生成表达式'} onGetCaptcha={() => { // form.setFieldValue('cronExpression', '0/20 * * * * ?'); return new Promise((resolve, reject) => { @@ -172,17 +178,22 @@ const JobForm: React.FC = (props) => { valueEnum={{ 0: '立即执行', 1: '执行一次', - 3: '放弃执行' + 3: '放弃执行', }} rules={[ { required: false, - message: , + message: ( + + ), }, ]} fieldProps={{ - optionType: "button", - buttonStyle: "solid" + optionType: 'button', + buttonStyle: 'solid', }} /> = (props) => { rules={[ { required: false, - message: , + message: ( + + ), }, ]} fieldProps={{ - optionType: "button", - buttonStyle: "solid" + optionType: 'button', + buttonStyle: 'solid', }} /> { } }; - const JobTableList: React.FC = () => { const formTableRef = useRef(); @@ -184,7 +200,7 @@ const JobTableList: React.FC = () => { valueType: 'text', valueEnum: jobGroupOptions, render: (_, record) => { - return (); + return ; }, }, { @@ -203,7 +219,7 @@ const JobTableList: React.FC = () => { valueType: 'select', valueEnum: statusOptions, render: (_, record) => { - return (); + return ; }, }, { @@ -216,7 +232,7 @@ const JobTableList: React.FC = () => { type="link" size="small" key="edit" - icon = + icon= hidden={!access.hasPerms('monitor:job:edit')} onClick={() => { setModalVisible(true); @@ -230,7 +246,7 @@ const JobTableList: React.FC = () => { size="small" danger key="batchRemove" - icon = + icon= hidden={!access.hasPerms('monitor:job:remove')} onClick={async () => { Modal.confirm({ @@ -282,15 +298,13 @@ const JobTableList: React.FC = () => { } }, }); - } - else if (key === 'detail') { + } else if (key === 'detail') { setDetailModalVisible(true); setCurrentRow(record); - } - else if( key === 'log') { + } else if (key === 'log') { history.push(`/monitor/job-log/index/${record.jobId}`); } - } + }, }} > e.preventDefault()}> @@ -347,7 +361,7 @@ const JobTableList: React.FC = () => { actionRef.current?.reloadAndRest?.(); } }, - onCancel() { }, + onCancel() {}, }); }} > @@ -439,7 +453,7 @@ const JobTableList: React.FC = () => { }} open={modalVisible} values={currentRow || {}} - jobGroupOptions={jobGroupOptions||{}} + jobGroupOptions={jobGroupOptions || {}} statusOptions={statusOptions} /> & Partial; @@ -22,19 +22,16 @@ export type JobLogFormProps = { }; const JobLogDetailForm: React.FC = (props) => { - const { values, statusOptions, jobGroupOptions } = props; - useEffect(() => { - }, []); + useEffect(() => {}, []); const intl = useIntl(); - const handleOk = () => { - }; + const handleOk = () => {}; const handleCancel = () => { props.onCancel(); }; - + return ( { } }; - const JobLogTableList: React.FC = () => { const formTableRef = useRef(); @@ -107,10 +111,10 @@ const JobLogTableList: React.FC = () => { const jobId = params.id || 0; useEffect(() => { if (jobId !== undefined && jobId !== 0) { - getJob(Number(jobId)).then(response => { + getJob(Number(jobId)).then((response) => { setQueryParams({ jobName: response.data.jobName, - jobGroup: response.data.jobGroup + jobGroup: response.data.jobGroup, }); }); } @@ -140,7 +144,9 @@ const JobLogTableList: React.FC = () => { valueType: 'text', }, { - title: , + title: ( + + ), dataIndex: 'invokeTarget', valueType: 'textarea', }, @@ -155,7 +161,7 @@ const JobLogTableList: React.FC = () => { valueType: 'select', valueEnum: statusOptions, render: (_, record) => { - return (); + return ; }, }, { @@ -253,7 +259,7 @@ const JobLogTableList: React.FC = () => { actionRef.current?.reloadAndRest?.(); } }, - onCancel() { }, + onCancel() {}, }); }} > diff --git a/react-ui/src/pages/Monitor/Online/index.tsx b/react-ui/src/pages/Monitor/Online/index.tsx index 2f81e3b0..2d22bd21 100644 --- a/react-ui/src/pages/Monitor/Online/index.tsx +++ b/react-ui/src/pages/Monitor/Online/index.tsx @@ -1,20 +1,18 @@ +import { forceLogout, getOnlineUserList } from '@/services/monitor/online'; +import { DeleteOutlined } from '@ant-design/icons'; +import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components'; +import { FormattedMessage, useAccess, useIntl } from '@umijs/max'; import type { FormInstance } from 'antd'; import { Button, message, Modal } from 'antd'; -import React, { useRef, useEffect } from 'react'; -import { useIntl, FormattedMessage, useAccess } from '@umijs/max'; -import { getOnlineUserList, forceLogout } from '@/services/monitor/online'; -import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components'; -import { DeleteOutlined } from '@ant-design/icons'; - +import React, { useEffect, useRef } from 'react'; /* * * * @author whiteshader@163.com * @datetime 2023/02/07 - * + * * */ - const handleForceLogout = async (selectedRow: API.Monitor.OnlineUserType) => { const hide = message.loading('正在强制下线'); try { @@ -130,32 +128,32 @@ const OnlineUserTableList: React.FC = () => { ]; return ( -
- - headerTitle={intl.formatMessage({ - id: 'pages.searchTable.title', - defaultMessage: '信息', - })} - actionRef={actionRef} - formRef={formTableRef} - rowKey="tokenId" - key="logininforList" - search={{ - labelWidth: 120, - }} - request={(params) => - getOnlineUserList({ ...params } as API.Monitor.OnlineUserListParams).then((res) => { - const result = { - data: res.rows, - total: res.total, - success: true, - }; - return result; - }) - } - columns={columns} - /> -
+
+ + headerTitle={intl.formatMessage({ + id: 'pages.searchTable.title', + defaultMessage: '信息', + })} + actionRef={actionRef} + formRef={formTableRef} + rowKey="tokenId" + key="logininforList" + search={{ + labelWidth: 120, + }} + request={(params) => + getOnlineUserList({ ...params } as API.Monitor.OnlineUserListParams).then((res) => { + const result = { + data: res.rows, + total: res.total, + success: true, + }; + return result; + }) + } + columns={columns} + /> +
); }; diff --git a/react-ui/src/pages/Pipeline/editPipeline/editPipeline.less b/react-ui/src/pages/Pipeline/editPipeline/editPipeline.less index 284a6b9d..f4074a51 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/editPipeline.less +++ b/react-ui/src/pages/Pipeline/editPipeline/editPipeline.less @@ -1,46 +1,46 @@ #graph { - height: 100%; - width: 100%; - position: relative; - } -.editPipelinePropsContent{ + position: relative; + width: 100%; + height: 100%; +} +.editPipelinePropsContent { display: flex; align-items: center; width: 100%; - height:43px; - background:#f8fbff; + height: 43px; margin-bottom: 10px; - color:#1d1d20; - font-size:15px; - font-family: 'Alibaba'; padding: 0 20px; + color: #1d1d20; + font-size: 15px; + font-family: 'Alibaba'; + background: #f8fbff; } -.centerContainer{ - flex: 1; +.centerContainer { display: flex; + flex: 1; flex-direction: column; } -.buttonList{ +.buttonList { display: flex; align-items: center; justify-content: end; - padding: 0 30px; width: 100%; - height:45px; - background:#ffffff; - box-shadow:0px 3px 6px rgba(146, 146, 146, 0.09); + height: 45px; + padding: 0 30px; + background: #ffffff; + box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09); } .rightmenu { position: absolute; + top: 0px; + left: 0px; width: 120px; height: 146px; - left: 0px; - top: 0px; - - background-color: #ffffff; - font-size: 12px; - color: #333333; overflow-y: auto; + color: #333333; + font-size: 12px; + + background-color: #ffffff; } .rightmenuItem { @@ -48,6 +48,6 @@ cursor: pointer; } .rightmenuItem:hover { - background-color: rgba(24, 144, 255, 0.3); color: #ffffff; -} \ No newline at end of file + background-color: rgba(24, 144, 255, 0.3); +} diff --git a/react-ui/src/pages/Pipeline/editPipeline/index.jsx b/react-ui/src/pages/Pipeline/editPipeline/index.jsx index 2740b419..d62f56c1 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/index.jsx +++ b/react-ui/src/pages/Pipeline/editPipeline/index.jsx @@ -1,266 +1,283 @@ -import React ,{ useState,useEffect,useRef }from 'react'; -import { useParams } from 'react-router-dom' -import ModelMenus from './modelMenus'; -import Props from './props'; +import { getWorkflowById, saveWorkflow } from '@/services/pipeline/index.js'; +import { SaveOutlined } from '@ant-design/icons'; import { useEmotionCss } from '@ant-design/use-emotion-css'; import G6 from '@antv/g6'; -import Styles from './editPipeline.less' +import { Button, message } from 'antd'; +import React, { useEffect, useRef } from 'react'; +import { useNavigate, useParams } from 'react-router-dom'; import { s8 } from '../../../utils'; -import { Button, message} from 'antd'; -import {SaveOutlined} from '@ant-design/icons'; -import {saveWorkflow,getWorkflowById} from '@/services/pipeline/index.js' -import { useNavigate} from 'react-router-dom'; -const editPipeline = React.FC = () => { - const propsRef=useRef() - const navgite=useNavigate(); - // const [contextMenu,setContextMenu]=useState({}) - let contextMenu={} - const locationParams =useParams () //新版本获取路由参数接口 - let graph=null - let sourceAnchorIdx, targetAnchorIdx; - const pipelineContainer = useEmotionCss(() => { - return { - display: 'flex', - backgroundColor:'#fff', - height:'98vh', - position:'relative' - }; - }); - const rightmenu= useEmotionCss(() => { - return { - position: 'absolute', - width: '120px', - height: '146px', - left: '0px', - top: '0px', - - color: '#333333', - overflowY: 'auto' - }; - }); - const rightmenuItem =useEmotionCss(() => { - return { - padding: '10px 20px', - cursor: 'pointer', - fontSize: '12px', - }; - }); - const graphStyle = useEmotionCss(() => { - return { - width:'100%', - backgroundSize: '100% 100%', - backgroundImage: 'url(/assets/images/pipeline-canvas-back.png)', - flex:1 - }; - }); - const graphRef=useRef() - - const onDragEnd=(val)=>{ - console.log(val,'eee'); - const _x = val.x - const _y = val.y - const point = graph.getPointByClient(_x, _y); - let model = {}; - // 元模型 - model = { - ...val, - x: point.x, - y: point.y, - id: val.component_name+'-'+s8(), - isCluster: false, - }; - console.log(graph, model); +import Styles from './editPipeline.less'; +import ModelMenus from './modelMenus'; +import Props from './props'; +const editPipeline = (React.FC = () => { + const propsRef = useRef(); + const navgite = useNavigate(); + // const [contextMenu,setContextMenu]=useState({}) + let contextMenu = {}; + const locationParams = useParams(); //新版本获取路由参数接口 + let graph = null; + let sourceAnchorIdx, targetAnchorIdx; + const pipelineContainer = useEmotionCss(() => { + return { + display: 'flex', + backgroundColor: '#fff', + height: '98vh', + position: 'relative', + }; + }); + const rightmenu = useEmotionCss(() => { + return { + position: 'absolute', + width: '120px', + height: '146px', + left: '0px', + top: '0px', + + color: '#333333', + overflowY: 'auto', + }; + }); + const rightmenuItem = useEmotionCss(() => { + return { + padding: '10px 20px', + cursor: 'pointer', + fontSize: '12px', + }; + }); + const graphStyle = useEmotionCss(() => { + return { + width: '100%', + backgroundSize: '100% 100%', + backgroundImage: 'url(/assets/images/pipeline-canvas-back.png)', + flex: 1, + }; + }); + const graphRef = useRef(); - graph.addItem('node', model, true); - console.log(graph); - + const onDragEnd = (val) => { + console.log(val, 'eee'); + const _x = val.x; + const _y = val.y; + const point = graph.getPointByClient(_x, _y); + let model = {}; + // 元模型 + model = { + ...val, + x: point.x, + y: point.y, + id: val.component_name + '-' + s8(), + isCluster: false, + }; + console.log(graph, model); + + graph.addItem('node', model, true); + console.log(graph); + }; + const formChange = (val) => { + const data = graph.save(); + const index = data.nodes.findIndex((item) => { + return item.id === val.id; + }); + data.nodes[index] = val; + graph.changeData(data); + graph.render(); + }; + const savePipeline = (val) => { + const data = graph.save(); + console.log(data); + let params = { + ...locationParams, + dag: JSON.stringify(data), + }; + saveWorkflow(params).then((ret) => { + console.log(ret); + if (ret.code == 200) { + message.success('保存成功'); + setTimeout(() => { + if (val) { + navgite({ pathname: `/pipeline` }); + } + }, 500); + } else { + message.error('保存失败'); } - const formChange=(val)=>{ - - const data = graph.save(); - const index = data.nodes.findIndex(item => { - return item.id ===val.id; - }); - data.nodes[index] = val; - graph.changeData(data) - graph.render() + }); + console.log(params); + }; + const handlerClick = (e) => { + e.stopPropagation(); + console.log(propsRef, graph); + // let cache = []; + // let json_str = JSON.stringify(graph, function(key, value) { + // if (typeof value === 'object' && value !== null) { + // if (cache.indexOf(value) !== -1) { + // return; + // } + // cache.push(value); + // } + // return value; + // }); + // console.log(json_str); + propsRef.current.showDrawer(e); + }; + const getGraphData = (data) => { + if (graph) { + console.log(graph); + graph.data(data); + graph.render(); + } else { + setTimeout(() => { + getGraphData(data); + }, 500); + } + }; + + const processParallelEdgesOnAnchorPoint = ( + edges, + offsetDiff = 15, + multiEdgeType = 'cubic-vertical', + singleEdgeType = undefined, + loopEdgeType = undefined, + ) => { + const len = edges.length; + const cod = offsetDiff * 2; + const loopPosition = [ + 'top', + 'top-right', + 'right', + 'bottom-right', + 'bottom', + 'bottom-left', + 'left', + 'top-left', + ]; + const edgeMap = {}; + const tags = []; + const reverses = {}; + for (let i = 0; i < len; i++) { + const edge = edges[i]; + const { source, target, sourceAnchor, targetAnchor } = edge; + const sourceTarget = `${source}|${sourceAnchor}-${target}|${targetAnchor}`; + + if (tags[i]) continue; + if (!edgeMap[sourceTarget]) { + edgeMap[sourceTarget] = []; } - const savePipeline=(val)=>{ - const data = graph.save(); - console.log(data); - let params={ - ...locationParams, - dag:JSON.stringify(data) - } - saveWorkflow(params).then(ret=>{ - console.log(ret); - if(ret.code==200){ - message.success('保存成功') - setTimeout(()=>{ - if(val){ - navgite({pathname:`/pipeline`,}); - } - },500) - } - else{ - message.error('保存失败') + tags[i] = true; + edgeMap[sourceTarget].push(edge); + for (let j = 0; j < len; j++) { + if (i === j) continue; + const sedge = edges[j]; + const { + source: src, + target: dst, + sourceAnchor: srcAnchor, + targetAnchor: dstAnchor, + } = sedge; + + // 两个节点之间共同的边 + // 第一条的source = 第二条的target + // 第一条的target = 第二条的source + if (!tags[j]) { + if ( + source === dst && + sourceAnchor === dstAnchor && + target === src && + targetAnchor === srcAnchor + ) { + edgeMap[sourceTarget].push(sedge); + tags[j] = true; + reverses[ + `${src}|${srcAnchor}|${dst}|${dstAnchor}|${edgeMap[sourceTarget].length - 1}` + ] = true; + } else if ( + source === src && + sourceAnchor === srcAnchor && + target === dst && + targetAnchor === dstAnchor + ) { + edgeMap[sourceTarget].push(sedge); + tags[j] = true; } - }) - console.log(params); - } - const handlerClick=(e)=>{ - e.stopPropagation() - console.log(propsRef,graph); - // let cache = []; - // let json_str = JSON.stringify(graph, function(key, value) { - // if (typeof value === 'object' && value !== null) { - // if (cache.indexOf(value) !== -1) { - // return; - // } - // cache.push(value); - // } - // return value; - // }); - // console.log(json_str); - propsRef.current.showDrawer(e) + } } - const getGraphData=(data)=>{ - if(graph){ - console.log(graph); - graph.data(data) - graph.render() + } + + for (const key in edgeMap) { + const arcEdges = edgeMap[key]; + const { length } = arcEdges; + for (let k = 0; k < length; k++) { + const current = arcEdges[k]; + if (current.source === current.target) { + if (loopEdgeType) current.type = loopEdgeType; + // 超过8条自环边，则需要重新处理 + current.loopCfg = { + position: loopPosition[k % 8], + dist: Math.floor(k / 8) * 20 + 50, + }; + continue; } - else{ - setTimeout(()=>{ - getGraphData(data) - },500) + if ( + length === 1 && + singleEdgeType && + (current.source !== current.target || current.sourceAnchor !== current.targetAnchor) + ) { + current.type = singleEdgeType; + continue; } - } - - const processParallelEdgesOnAnchorPoint = ( - edges, - offsetDiff = 15, - multiEdgeType = 'cubic-vertical', - singleEdgeType = undefined, - loopEdgeType = undefined - ) => { - const len = edges.length; - const cod = offsetDiff * 2; - const loopPosition = [ - 'top', - 'top-right', - 'right', - 'bottom-right', - 'bottom', - 'bottom-left', - 'left', - 'top-left', - ]; - const edgeMap = {}; - const tags = []; - const reverses = {}; - for (let i = 0; i < len; i++) { - const edge = edges[i]; - const { source, target, sourceAnchor, targetAnchor } = edge; - const sourceTarget = `${source}|${sourceAnchor}-${target}|${targetAnchor}`; - - if (tags[i]) continue; - if (!edgeMap[sourceTarget]) { - edgeMap[sourceTarget] = []; - } - tags[i] = true; - edgeMap[sourceTarget].push(edge); - for (let j = 0; j < len; j++) { - if (i === j) continue; - const sedge = edges[j]; - const { source: src, target: dst, sourceAnchor: srcAnchor, targetAnchor: dstAnchor } = sedge; - - // 两个节点之间共同的边 - // 第一条的source = 第二条的target - // 第一条的target = 第二条的source - if (!tags[j]) { - if (source === dst && sourceAnchor === dstAnchor - && target === src && targetAnchor === srcAnchor) { - edgeMap[sourceTarget].push(sedge); - tags[j] = true; - reverses[`${src}|${srcAnchor}|${dst}|${dstAnchor}|${edgeMap[sourceTarget].length - 1}`] = true; - } else if (source === src && sourceAnchor === srcAnchor - && target === dst && targetAnchor === dstAnchor) { - edgeMap[sourceTarget].push(sedge); - tags[j] = true; - } - } - } + current.type = multiEdgeType; + const sign = + (k % 2 === 0 ? 1 : -1) * + (reverses[ + `${current.source}|${current.sourceAnchor}|${current.target}|${current.targetAnchor}|${k}` + ] + ? -1 + : 1); + if (length % 2 === 1) { + current.curveOffset = sign * Math.ceil(k / 2) * cod; + } else { + current.curveOffset = sign * (Math.floor(k / 2) * cod + offsetDiff); } - - for (const key in edgeMap) { - const arcEdges = edgeMap[key]; - const { length } = arcEdges; - for (let k = 0; k < length; k++) { - const current = arcEdges[k]; - if (current.source === current.target) { - if (loopEdgeType) current.type = loopEdgeType; - // 超过8条自环边，则需要重新处理 - current.loopCfg = { - position: loopPosition[k % 8], - dist: Math.floor(k / 8) * 20 + 50, - }; - continue; - } - if (length === 1 && singleEdgeType && (current.source !== current.target || current.sourceAnchor !== current.targetAnchor)) { - current.type = singleEdgeType; - continue; - } - current.type = multiEdgeType; - const sign = - (k % 2 === 0 ? 1 : -1) * (reverses[`${current.source}|${current.sourceAnchor}|${current.target}|${current.targetAnchor}|${k}`] ? -1 : 1); - if (length % 2 === 1) { - current.curveOffset = sign * Math.ceil(k / 2) * cod; - } else { - current.curveOffset = sign * (Math.floor(k / 2) * cod + offsetDiff); - } - } + } + } + return edges; + }; + const cloneElement = (item) => { + console.log(item); + let data = graph.save(); + const nodeId = s8(); + console.log(item.getModel()); + data.nodes.push({ + ...item.getModel(), + label: item.getModel().label + '-copy', + x: item.getModel().x + 150, + y: item.getModel().y, + id: item.getModel().component_name + '-' + nodeId, + }); + graph.changeData(data); + }; + const getFirstWorkflow = (val) => { + getWorkflowById(val).then((ret) => { + console.log(ret); + if (ret.code == 200) { + if (graph && ret.data && ret.data.dag) { + getGraphData(JSON.parse(ret.data.dag)); } - return edges; - }; - const cloneElement=(item)=>{ - console.log(item); - let data=graph.save() - const nodeId = s8(); - console.log(item.getModel()); - data.nodes.push({ - ...item.getModel(), - label: item.getModel().label+'-copy', - x: item.getModel().x + 150, - y: item.getModel().y, - id: item.getModel().component_name+'-'+nodeId, - }); - graph.changeData(data) } - const getFirstWorkflow=(val)=>{ - getWorkflowById(val).then(ret=>{ - console.log(ret); - if(ret.code==200){ - if(graph&&ret.data&&ret.data.dag){ - getGraphData(JSON.parse(ret.data.dag)) - - } - } - - // graph&&graph.data(JSON.parse(ret.dag)) - // graph.render() - }) - } - const handlerContextMenu=(e)=> { - e.stopPropagation(); - // this.menuType = e.item._cfg.type; - } - const initMenu=()=> { - // const selectedNodes = this.selectedNodes; - contextMenu=new G6.Menu({ - getContent(evt) { - return ` + // graph&&graph.data(JSON.parse(ret.dag)) + // graph.render() + }); + }; + const handlerContextMenu = (e) => { + e.stopPropagation(); + // this.menuType = e.item._cfg.type; + }; + const initMenu = () => { + // const selectedNodes = this.selectedNodes; + contextMenu = new G6.Menu({ + getContent(evt) { + return `
    复制
  • 删除
`; - }, - handleMenuClick: (target, item) => { - switch (target.getAttribute('code')) { - case 'delete': - graph.removeItem(item); - break; - case 'clone': - cloneElement(item) - break; - default: - break; - } - }, - // offsetX and offsetY include the padding of the parent container - // 需要加上父级容器的 padding-left 16 与自身偏移量 10 - offsetX: 16 + 10, - // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10 - offsetY: 0, - // the types of items that allow the menu show up - // 在哪些类型的元素上响应 - itemTypes: ['node', 'edge']}) - - initGraph() - }; - useEffect(()=>{ - getFirstWorkflow(locationParams.id) - initMenu() - - return ()=>{ - graph.off('node:mouseenter', e => { - graph.setItemState(e.item, 'showAnchors', true); - graph.setItemState(e.item, 'nodeSelected', true); - }); - graph.off('node:mouseleave', e => { - // this.graph.setItemState(e.item, 'showAnchors', false); - graph.setItemState(e.item, 'nodeSelected', false); - }); - graph.off('dblclick', handlerClick); + }, + handleMenuClick: (target, item) => { + switch (target.getAttribute('code')) { + case 'delete': + graph.removeItem(item); + break; + case 'clone': + cloneElement(item); + break; + default: + break; } - console.log(contextMenu); - },[]) - 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', - { - // draw anchor-point circles according to the anchorPoints in afterDraw - getAnchorPoints(cfg) { - return ( - cfg.anchorPoints || [ - // 上下各3，左右各1 - [0.5, 0], - [0.5, 1], - ] - ); - }, - // draw(cfg, group) { - - // let rect=group.addShape('text', { - // attrs: { - // text: fittingString(cfg.label, 110, 15), - // x: 90 - getTextSize(cfg.label, 110, 15), - // y: 0, - // fontSize: 10, - // textAlign: 'center', - // textBaseline: 'middle', - // fill:'#000' - // }, - // name: 'text-shape', - // }); - // return rect; - // }, - afterDraw(cfg, group) { - // console.log(group, cfg, 12312); - const image = group.addShape('image', { - attrs: { - x: -45, - y: -10, - width: 20, - height: 20, - img: cfg.img, - cursor: 'pointer', - }, - 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); - anchorPoints.forEach((anchorPos, i) => { - group.addShape('circle', { - attrs: { - r: 3, - x: bbox.x + bbox.width * anchorPos[0], - y: bbox.y + bbox.height * anchorPos[1], - fill: '#fff', - stroke: '#a4a4a5', - }, - name: `anchor-point`, // the name, for searching by group.find(ele => ele.get('name') === 'anchor-point') - anchorPointIdx: i, // flag the idx of the anchor-point circle - links: 0, // cache the number of edges connected to this shape - visible: false, // invisible by default, shows up when links > 1 or the node is in showAnchors state - }); - }); - return image; - }, - - // response the state changes and show/hide the link-point circles - setState(name, value, item) { - const anchorPoints = item.getContainer().findAll(ele => ele.get('name') === 'anchor-point'); - anchorPoints.forEach(point => { - if (value || point.get('links') > 0) point.show() - else point.hide() - }) - // } - }, - }, - 'rect' + }, + // offsetX and offsetY include the padding of the parent container + // 需要加上父级容器的 padding-left 16 与自身偏移量 10 + offsetX: 16 + 10, + // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10 + offsetY: 0, + // the types of items that allow the menu show up + // 在哪些类型的元素上响应 + itemTypes: ['node', 'edge'], + }); + + initGraph(); + }; + useEffect(() => { + getFirstWorkflow(locationParams.id); + initMenu(); + + return () => { + graph.off('node:mouseenter', (e) => { + graph.setItemState(e.item, 'showAnchors', true); + graph.setItemState(e.item, 'nodeSelected', true); + }); + graph.off('node:mouseleave', (e) => { + // this.graph.setItemState(e.item, 'showAnchors', false); + graph.setItemState(e.item, 'nodeSelected', false); + }); + graph.off('dblclick', handlerClick); + }; + console.log(contextMenu); + }, []); + 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', + { + // draw anchor-point circles according to the anchorPoints in afterDraw + getAnchorPoints(cfg) { + return ( + cfg.anchorPoints || [ + // 上下各3，左右各1 + [0.5, 0], + [0.5, 1], + ] ); - console.log(graphRef,'graphRef'); - graph = new G6.Graph({ - container: graphRef.current, - grid: true, - width: graphRef.current.clientWidth ||500, - height: graphRef.current.clientHeight||'100%', - animate: false, - groupByTypes: false, - fitView:true, - plugins: [contextMenu], - enabledStack: true, - modes: { - default: [ - // config the shouldBegin for drag-node to avoid node moving while dragging on the anchor-point circles - { - type: 'drag-node', - shouldBegin: e => { - if (e.target.get('name') === 'anchor-point') return false; - return true; - }, - // shouldEnd: e => { - // console.log(e); - // return false; - // }, + }, + // draw(cfg, group) { + + // let rect=group.addShape('text', { + // attrs: { + // text: fittingString(cfg.label, 110, 15), + // x: 90 - getTextSize(cfg.label, 110, 15), + // y: 0, + // fontSize: 10, + // textAlign: 'center', + // textBaseline: 'middle', + // fill:'#000' + // }, + // name: 'text-shape', + // }); + // return rect; + // }, + afterDraw(cfg, group) { + // console.log(group, cfg, 12312); + const image = group.addShape('image', { + attrs: { + x: -45, + y: -10, + width: 20, + height: 20, + img: cfg.img, + cursor: 'pointer', }, - // config the shouldBegin and shouldEnd to make sure the create-edge is began and ended at anchor-point circles - { - type: 'create-edge', - // trigger: 'drag', - shouldBegin: e => { - // avoid beginning at other shapes on the node - if (e.target && e.target.get('name') !== 'anchor-point') return false; - sourceAnchorIdx = e.target.get('anchorPointIdx'); - e.target.set('links', e.target.get('links') + 1); // cache the number of edge connected to this anchor-point circle - return true; + 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', }, - shouldEnd: e => { - // avoid ending at other shapes on the node - if (e.target && e.target.get('name') !== 'anchor-point') return false; - if (e.target) { - targetAnchorIdx = e.target.get('anchorPointIdx'); - e.target.set('links', e.target.get('links') + 1); // cache the number of edge connected to this anchor-point circle - return true; - } - targetAnchorIdx = undefined; - return true; + name: 'text-shape', + draggable: true, + }); + } + const bbox = group.getBBox(); + const anchorPoints = this.getAnchorPoints(cfg); + // console.log(anchorPoints); + anchorPoints.forEach((anchorPos, i) => { + group.addShape('circle', { + attrs: { + r: 3, + x: bbox.x + bbox.width * anchorPos[0], + y: bbox.y + bbox.height * anchorPos[1], + fill: '#fff', + stroke: '#a4a4a5', }, + name: `anchor-point`, // the name, for searching by group.find(ele => ele.get('name') === 'anchor-point') + anchorPointIdx: i, // flag the idx of the anchor-point circle + links: 0, // cache the number of edges connected to this shape + visible: false, // invisible by default, shows up when links > 1 or the node is in showAnchors state + }); + }); + return image; + }, + // response the state changes and show/hide the link-point circles + setState(name, value, item) { + const anchorPoints = item + .getContainer() + .findAll((ele) => ele.get('name') === 'anchor-point'); + anchorPoints.forEach((point) => { + if (value || point.get('links') > 0) point.show(); + else point.hide(); + }); + // } + }, + }, + 'rect', + ); + console.log(graphRef, 'graphRef'); + graph = new G6.Graph({ + container: graphRef.current, + grid: true, + width: graphRef.current.clientWidth || 500, + height: graphRef.current.clientHeight || '100%', + animate: false, + groupByTypes: false, + fitView: true, + plugins: [contextMenu], + enabledStack: true, + modes: { + default: [ + // config the shouldBegin for drag-node to avoid node moving while dragging on the anchor-point circles + { + type: 'drag-node', + shouldBegin: (e) => { + if (e.target.get('name') === 'anchor-point') return false; + return true; }, - 'drag-canvas', - 'zoom-canvas', - // 'brush-select', - 'drag-combo', - ], - altSelect: [ - { - type: 'brush-select', - trigger: 'drag', + // shouldEnd: e => { + // console.log(e); + // return false; + // }, + }, + // config the shouldBegin and shouldEnd to make sure the create-edge is began and ended at anchor-point circles + { + type: 'create-edge', + // trigger: 'drag', + shouldBegin: (e) => { + // avoid beginning at other shapes on the node + if (e.target && e.target.get('name') !== 'anchor-point') return false; + sourceAnchorIdx = e.target.get('anchorPointIdx'); + e.target.set('links', e.target.get('links') + 1); // cache the number of edge connected to this anchor-point circle + return true; }, - 'drag-node', - ], - }, - - defaultNode: { - type: 'rect-node', - size: [110,36], - - labelCfg: { - style: { - fill: 'transparent', - fontSize: 0, - boxShadow:'0px 0px 12px rgba(75, 84, 137, 0.05)', - overflow:'hidden', - x: -20, - y: 0, - textAlign: 'left', - textBaseline: 'middle', + shouldEnd: (e) => { + // avoid ending at other shapes on the node + if (e.target && e.target.get('name') !== 'anchor-point') return false; + if (e.target) { + targetAnchorIdx = e.target.get('anchorPointIdx'); + e.target.set('links', e.target.get('links') + 1); // cache the number of edge connected to this anchor-point circle + return true; + } + targetAnchorIdx = undefined; + return true; }, }, + 'drag-canvas', + 'zoom-canvas', + // 'brush-select', + 'drag-combo', + ], + altSelect: [ + { + type: 'brush-select', + trigger: 'drag', + }, + 'drag-node', + ], + }, + + defaultNode: { + type: 'rect-node', + size: [110, 36], + + labelCfg: { style: { - fill: '#fff', - stroke: '#fff', - cursor: 'pointer', - radius:10, - overflow:'hidden', - lineWidth:0.5 + fill: 'transparent', + fontSize: 0, + boxShadow: '0px 0px 12px rgba(75, 84, 137, 0.05)', + overflow: 'hidden', + x: -20, + y: 0, + textAlign: 'left', + textBaseline: 'middle', }, }, - nodeStateStyles: { - nodeSelected: { + style: { + fill: '#fff', + stroke: '#fff', + cursor: 'pointer', + radius: 10, + overflow: 'hidden', + lineWidth: 0.5, + }, + }, + nodeStateStyles: { + nodeSelected: { + fill: 'red', + shadowColor: 'red', + stroke: 'red', + 'text-shape': { fill: 'red', - shadowColor: 'red', stroke: 'red', - 'text-shape': { - fill: 'red', - stroke: 'red', - }, }, }, - defaultEdge: { - // type: 'quadratic', - type: 'cubic-vertical', + }, + defaultEdge: { + // type: 'quadratic', + type: 'cubic-vertical', - style: { - endArrow: { // 设置终点箭头 - path: G6.Arrow.triangle(3, 3, 3), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应） - d: 4.5, - fill:'#CDD0DC' - }, - cursor: 'pointer', - lineWidth: 1, - opacity: 1, - stroke: '#CDD0DC', - radius: 1, + style: { + endArrow: { + // 设置终点箭头 + path: G6.Arrow.triangle(3, 3, 3), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应） + d: 4.5, + fill: '#CDD0DC', }, - nodeStateStyle: { - hover: { - opacity: 1, - stroke: '#8fe8ff', - }, - }, - labelCfg: { - autoRotate: true, - // refY: 10, - style: { - fontSize: 10, - fill: '#FFF', - }, + cursor: 'pointer', + lineWidth: 1, + opacity: 1, + stroke: '#CDD0DC', + radius: 1, + }, + nodeStateStyle: { + hover: { + opacity: 1, + stroke: '#8fe8ff', }, }, - defaultCombo: { - type: 'rect', - fixCollapseSize: 70, + labelCfg: { + autoRotate: true, + // refY: 10, style: { - fill: '#00e0ff0d', - stroke: '#00e0ff', - lineDash: [5, 10], - cursor: 'pointer', + fontSize: 10, + fill: '#FFF', }, }, - // linkCenter: true, - fitView: false, - fitViewPadding: [60, 60, 60, 80], - }); - graph.on('dblclick', (e)=>{ - console.log(e.item); - graph.setItemState(e.item, 'nodeClicked', true); - handlerClick(e) - }); - graph.on('click', (e)=>{ - console.log(e.item); - - }); - graph.on('aftercreateedge', (e) => { + }, + defaultCombo: { + type: 'rect', + fixCollapseSize: 70, + style: { + fill: '#00e0ff0d', + stroke: '#00e0ff', + lineDash: [5, 10], + cursor: 'pointer', + }, + }, + // linkCenter: true, + fitView: false, + fitViewPadding: [60, 60, 60, 80], + }); + graph.on('dblclick', (e) => { + console.log(e.item); + graph.setItemState(e.item, 'nodeClicked', true); + handlerClick(e); + }); + graph.on('click', (e) => { + console.log(e.item); + }); + graph.on('aftercreateedge', (e) => { // update the sourceAnchor and targetAnchor for the newly added edge graph.updateItem(e.edge, { sourceAnchor: sourceAnchorIdx, - targetAnchor: targetAnchorIdx - }) + targetAnchor: targetAnchorIdx, + }); - // update the curveOffset for parallel edges - const edges = graph.save().edges; - processParallelEdgesOnAnchorPoint(edges); - graph.getEdges().forEach((edge, i) => { - graph.updateItem(edge, { - curveOffset: edges[i].curveOffset, - curvePosition: edges[i].curvePosition, - }); + // update the curveOffset for parallel edges + const edges = graph.save().edges; + processParallelEdgesOnAnchorPoint(edges); + graph.getEdges().forEach((edge, i) => { + graph.updateItem(edge, { + curveOffset: edges[i].curveOffset, + curvePosition: edges[i].curvePosition, }); }); - graph.on('node:mouseenter', e => { - // this.graph.setItemState(e.item, 'showAnchors', true); - graph.setItemState(e.item, 'nodeSelected', true); - graph.updateItem(e.item, { - // 节点的样式 - style: { - stroke: '#1664ff', - }, - }); + }); + graph.on('node:mouseenter', (e) => { + // this.graph.setItemState(e.item, 'showAnchors', true); + graph.setItemState(e.item, 'nodeSelected', true); + graph.updateItem(e.item, { + // 节点的样式 + style: { + stroke: '#1664ff', + }, }); - graph.on('node:mouseleave', e => { - // this.graph.setItemState(e.item, 'showAnchors', false); - graph.setItemState(e.item, 'nodeSelected', false); - graph.updateItem(e.item, { - // 节点的样式 - style: { - stroke: 'transparent', - }, - }); + }); + graph.on('node:mouseleave', (e) => { + // this.graph.setItemState(e.item, 'showAnchors', false); + graph.setItemState(e.item, 'nodeSelected', false); + graph.updateItem(e.item, { + // 节点的样式 + style: { + stroke: 'transparent', + }, }); - graph.on('afterremoveitem', e => { - if (e.item && e.item.source && e.item.target) { - const sourceNode = graph.findById(e.item.source); - const targetNode = graph.findById(e.item.target); - const { sourceAnchor, targetAnchor } = e.item; - if (sourceNode && !isNaN(sourceAnchor)) { - const sourceAnchorShape = sourceNode.getContainer().find(ele => (ele.get('name') === 'anchor-point' && ele.get('anchorPointIdx') === sourceAnchor)); - sourceAnchorShape.set('links', sourceAnchorShape.get('links') - 1); - } - if (targetNode && !isNaN(targetAnchor)) { - const targetAnchorShape = targetNode.getContainer().find(ele => (ele.get('name') === 'anchor-point' && ele.get('anchorPointIdx') === targetAnchor)); - targetAnchorShape.set('links', targetAnchorShape.get('links') - 1); - } + }); + graph.on('afterremoveitem', (e) => { + if (e.item && e.item.source && e.item.target) { + const sourceNode = graph.findById(e.item.source); + const targetNode = graph.findById(e.item.target); + const { sourceAnchor, targetAnchor } = e.item; + if (sourceNode && !isNaN(sourceAnchor)) { + const sourceAnchorShape = sourceNode + .getContainer() + .find( + (ele) => + ele.get('name') === 'anchor-point' && ele.get('anchorPointIdx') === sourceAnchor, + ); + sourceAnchorShape.set('links', sourceAnchorShape.get('links') - 1); } - }) - - // after clicking on the first node, the edge is created, update the sourceAnchor - graph.on('afteradditem', e => { - if (e.item && e.item.getType() === 'edge') { - graph.updateItem(e.item, { - sourceAnchor: sourceAnchorIdx - }); + if (targetNode && !isNaN(targetAnchor)) { + const targetAnchorShape = targetNode + .getContainer() + .find( + (ele) => + ele.get('name') === 'anchor-point' && ele.get('anchorPointIdx') === targetAnchor, + ); + targetAnchorShape.set('links', targetAnchorShape.get('links') - 1); } - }) - window.onresize = () => { - if (!graph || graph.get('destroyed')) return; - if (!graphRef.current || !graphRef.current.scrollWidth || !graphRef.current.scrollHeight) return; - graph.changeSize(graphRef.current.scrollWidth, graphRef.current.scrollHeight - 20); - }; } - return (
- -
+ }); + + // after clicking on the first node, the edge is created, update the sourceAnchor + graph.on('afteradditem', (e) => { + if (e.item && e.item.getType() === 'edge') { + graph.updateItem(e.item, { + sourceAnchor: sourceAnchorIdx, + }); + } + }); + window.onresize = () => { + if (!graph || graph.get('destroyed')) return; + if (!graphRef.current || !graphRef.current.scrollWidth || !graphRef.current.scrollHeight) + return; + graph.changeSize(graphRef.current.scrollWidth, graphRef.current.scrollHeight - 20); + }; + }; + return ( +
+ +
- - + +
-
- -
)}; -export default editPipeline; \ No newline at end of file +
+ +
+ ); +}); +export default editPipeline; diff --git a/react-ui/src/pages/Pipeline/editPipeline/modelMenus.jsx b/react-ui/src/pages/Pipeline/editPipeline/modelMenus.jsx index 626e532c..a60a9a0c 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/modelMenus.jsx +++ b/react-ui/src/pages/Pipeline/editPipeline/modelMenus.jsx @@ -1,62 +1,74 @@ -import React ,{ useState,useEffect,useRef }from 'react'; -import { Collapse, Divider } from 'antd'; -import Styles from './modelMenus.less' -import {getComponentAll} from '@/services/pipeline/index.js' +import { getComponentAll } from '@/services/pipeline/index.js'; +import { Collapse } from 'antd'; +import { useEffect, useState } from 'react'; +import Styles from './modelMenus.less'; const items = [ - { - key: '1', - label: 'This is panel header 1', - children: [1,2,3,4,5], - }, - { - key: '2', - label: 'This is panel header 2', - children: [1,2,3,4,5], - }, - { - key: '3', - label: 'This is panel header 3', - children: [1,2,3,4,5], - }, - ]; -const modelMenus = ({onParDragEnd}) => { - const [modelMenusList,setModelMenusList]=useState([]) - useEffect(()=>{ - getComponentAll().then(ret=>{ - console.log(ret); - if(ret.code==200){ - setModelMenusList(ret.data) - } - }) - },[]) - const dragEnd=(e,data)=>{ - console.log(e,data); - onParDragEnd({...data,x:e.clientX,y:e.clientY,label:data.component_label,img:`/assets/images/${data.icon_path}.png`}) - } - const { Panel } = Collapse; - return (
- + { + key: '1', + label: 'This is panel header 1', + children: [1, 2, 3, 4, 5], + }, + { + key: '2', + label: 'This is panel header 2', + children: [1, 2, 3, 4, 5], + }, + { + key: '3', + label: 'This is panel header 3', + children: [1, 2, 3, 4, 5], + }, +]; +const modelMenus = ({ onParDragEnd }) => { + const [modelMenusList, setModelMenusList] = useState([]); + useEffect(() => { + getComponentAll().then((ret) => { + console.log(ret); + if (ret.code == 200) { + setModelMenusList(ret.data); + } + }); + }, []); + const dragEnd = (e, data) => { + console.log(e, data); + onParDragEnd({ + ...data, + x: e.clientX, + y: e.clientY, + label: data.component_label, + img: `/assets/images/${data.icon_path}.png`, + }); + }; + const { Panel } = Collapse; + return ( +
+ {modelMenusList && modelMenusList.length > 0 - ? modelMenusList.map(item => ( - {item.name}
} - key={item.key} - > - {item.value&&item.value.length>0?item.value.map(ele=>(
{dragEnd(e,ele)}} className={Styles.collapseItem}> - - {ele.component_label} -
) - - ):''} - - )) - : ""} - -
)}; -export default modelMenus; \ No newline at end of file + ? modelMenusList.map((item) => ( + {item.name}
} key={item.key}> + {item.value && item.value.length > 0 + ? item.value.map((ele) => ( +
{ + dragEnd(e, ele); + }} + className={Styles.collapseItem} + > + + {ele.component_label} +
+ )) + : ''} + + )) + : ''} + +
+ ); +}; +export default modelMenus; diff --git a/react-ui/src/pages/Pipeline/editPipeline/modelMenus.less b/react-ui/src/pages/Pipeline/editPipeline/modelMenus.less index c8adc787..e58e17ac 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/modelMenus.less +++ b/react-ui/src/pages/Pipeline/editPipeline/modelMenus.less @@ -1,44 +1,40 @@ -.collapseList{ - +.collapseList { } -.collapseItem{ - - display: flex; - align-items: center; - color:#575757; - font-size:14px; - height:40px; - cursor: pointer; - border-radius:4px; - padding: 0 16px; +.collapseItem { + display: flex; + align-items: center; + height: 40px; + padding: 0 16px; + color: #575757; + font-size: 14px; + border-radius: 4px; + cursor: pointer; } -.collapseItem:hover{ - background:rgba(22, 100, 255, 0.08); +.collapseItem:hover { + background: rgba(22, 100, 255, 0.08); +} +.collapse { + :global { + .ant-collapse { + background-color: #fff; + border-color: transparent !important; + } + .ant-collapse > .ant-collapse-item > .ant-collapse-header { + margin-bottom: 5px; + background-color: #fff; + border-color: transparent; + } + .ant-collapse > .ant-collapse-item { + margin: 0 10px; + border-color: rgba(20, 49, 179, 0.12); + border-radius: 0px; + } + .ant-collapse .ant-collapse-content { + padding-bottom: 15px; + border-top: 1px solid transparent; + } + .ant-collapse .ant-collapse-content > .ant-collapse-content-box { + padding: 0; + } + } } -.collapse{ - :global { - .ant-collapse{ - border-color: transparent!important; - background-color: #fff; - - } - .ant-collapse>.ant-collapse-item >.ant-collapse-header{ - background-color: #fff; - border-color: transparent; - margin-bottom: 5px; - } - .ant-collapse>.ant-collapse-item{ - border-radius: 0px; - border-color:rgba(20, 49, 179, 0.12); - margin: 0 10px; - } - .ant-collapse .ant-collapse-content{ - padding-bottom: 15px; - border-top: 1px solid transparent; - - } - .ant-collapse .ant-collapse-content>.ant-collapse-content-box{ - padding: 0; - } - } -} \ No newline at end of file diff --git a/react-ui/src/pages/Pipeline/editPipeline/props.jsx b/react-ui/src/pages/Pipeline/editPipeline/props.jsx index 38eea3a0..5b22cdb8 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/props.jsx +++ b/react-ui/src/pages/Pipeline/editPipeline/props.jsx @@ -1,75 +1,93 @@ -import React, { useState,useImperativeHandle ,forwardRef } from 'react'; -import { Button, Drawer,Form, Input , } from 'antd'; -import Styles from './editPipeline.less' +import { Drawer, Form, Input } from 'antd'; +import { forwardRef, useImperativeHandle, useState } from 'react'; +import Styles from './editPipeline.less'; const { TextArea } = Input; -const Props = forwardRef(({onParentChange}, ref) =>{ - const [form] = Form.useForm(); - const [stagingItem,setStagingItem]=useState({}) - const [open, setOpen] = useState(false); - const afterOpenChange=()=>{ - - if(!open){ - console.log(111,open); - - console.log(stagingItem,form.getFieldsValue()); - for(let i in form.getFieldsValue()){ - for(let j in stagingItem.in_parameters){ - - if(i==j){ - console.log(j,i); - stagingItem.in_parameters[j].value=form.getFieldsValue()[i] - } +const Props = forwardRef(({ onParentChange }, ref) => { + const [form] = Form.useForm(); + const [stagingItem, setStagingItem] = useState({}); + const [open, setOpen] = useState(false); + const afterOpenChange = () => { + if (!open) { + console.log(111, open); + + console.log(stagingItem, form.getFieldsValue()); + for (let i in form.getFieldsValue()) { + for (let j in stagingItem.in_parameters) { + if (i == j) { + console.log(j, i); + stagingItem.in_parameters[j].value = form.getFieldsValue()[i]; } - for(let p in stagingItem.out_parameters){ - if(i==p){ - stagingItem.out_parameters[p].value=form.getFieldsValue()[i] - } + } + for (let p in stagingItem.out_parameters) { + if (i == p) { + stagingItem.out_parameters[p].value = form.getFieldsValue()[i]; } - for(let k in stagingItem.control_strategy){ - if(i==k){ - stagingItem.control_strategy[k].value=form.getFieldsValue()[i] - } + } + for (let k in stagingItem.control_strategy) { + if (i == k) { + stagingItem.control_strategy[k].value = form.getFieldsValue()[i]; } } - // setStagingItem({...stagingItem,}) - console.log((stagingItem.control_strategy)); - onParentChange({...stagingItem,control_strategy:JSON.stringify(stagingItem.control_strategy),in_parameters:JSON.stringify(stagingItem.in_parameters),out_parameters:JSON.stringify(stagingItem.out_parameters),...form.getFieldsValue()}) - // onParentChange({...stagingItem,...form.getFieldsValue()}) } + // setStagingItem({...stagingItem,}) + console.log(stagingItem.control_strategy); + onParentChange({ + ...stagingItem, + control_strategy: JSON.stringify(stagingItem.control_strategy), + in_parameters: JSON.stringify(stagingItem.in_parameters), + out_parameters: JSON.stringify(stagingItem.out_parameters), + ...form.getFieldsValue(), + }); + // onParentChange({...stagingItem,...form.getFieldsValue()}) } - const onClose=()=> { - setOpen(false); - }; - const onFinish = (values) => { - - console.log('Success:', values); - }; - const onFinishFailed = (errorInfo) => { - console.log('Failed:', errorInfo); - }; - useImperativeHandle(ref, () => ({ - showDrawer (e) { - if(e.item&&e.item.getModel()){ - // console.log(e.item.getModel().in_parameters); - form.resetFields(); - form.setFieldsValue({...e.item.getModel(),in_parameters:JSON.parse(e.item.getModel().in_parameters),out_parameters:JSON.parse(e.item.getModel().out_parameters),control_strategy:JSON.parse(e.item.getModel().control_strategy)}) - setStagingItem({...e.item.getModel(),in_parameters:JSON.parse(e.item.getModel().in_parameters),out_parameters:JSON.parse(e.item.getModel().out_parameters),control_strategy:JSON.parse(e.item.getModel().control_strategy)}) - // form.setFieldsValue({...e.item.getModel(),in_parameters:JSON.parse(e.item.getModel().in_parameters),out_parameters:JSON.parse(e.item.getModel().out_parameters)}) - // setStagingItem({...e.item.getModel(),in_parameters:JSON.parse(e.item.getModel().in_parameters),out_parameters:JSON.parse(e.item.getModel().out_parameters)}) - // setTimeout(() => { - // console.log(stagingItem); - // }, (500)); - setOpen(true); - } - - }, - - })); + }; + const onClose = () => { + setOpen(false); + }; + const onFinish = (values) => { + console.log('Success:', values); + }; + const onFinishFailed = (errorInfo) => { + console.log('Failed:', errorInfo); + }; + useImperativeHandle(ref, () => ({ + showDrawer(e) { + if (e.item && e.item.getModel()) { + // console.log(e.item.getModel().in_parameters); + form.resetFields(); + form.setFieldsValue({ + ...e.item.getModel(), + in_parameters: JSON.parse(e.item.getModel().in_parameters), + out_parameters: JSON.parse(e.item.getModel().out_parameters), + control_strategy: JSON.parse(e.item.getModel().control_strategy), + }); + setStagingItem({ + ...e.item.getModel(), + in_parameters: JSON.parse(e.item.getModel().in_parameters), + out_parameters: JSON.parse(e.item.getModel().out_parameters), + control_strategy: JSON.parse(e.item.getModel().control_strategy), + }); + // form.setFieldsValue({...e.item.getModel(),in_parameters:JSON.parse(e.item.getModel().in_parameters),out_parameters:JSON.parse(e.item.getModel().out_parameters)}) + // setStagingItem({...e.item.getModel(),in_parameters:JSON.parse(e.item.getModel().in_parameters),out_parameters:JSON.parse(e.item.getModel().out_parameters)}) + // setTimeout(() => { + // console.log(stagingItem); + // }, (500)); + setOpen(true); + } + }, + })); return ( <> - - -
+ { onFinishFailed={onFinishFailed} autoComplete="off" > -
- - 基本信息 -
+
+ + 基本信息 +
{ { }, ]} > - +
- - 任务信息 + + 任务信息
{ > - + - - + + { > - + - -