From bd2c1ede9888ab40ad185f286cf53065cf9906ed Mon Sep 17 00:00:00 2001 From: zhoux Date: Wed, 15 Nov 2023 17:48:29 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=AD=97=E5=85=B8?= =?UTF-8?q?=E6=B8=B2=E6=9F=93=E7=BB=84=E4=BB=B6=E9=87=8A=E6=94=BE=E4=B8=9A?= =?UTF-8?q?=E5=8A=A1=E5=B1=82=E5=A4=84=E7=90=86=EF=BC=8C=E6=96=B0=E5=A2=9E?= =?UTF-8?q?small=E6=A8=A1=E5=BC=8F=E7=9A=84=E8=A1=A8=E5=8D=95=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/defaultForm.ts | 18 +- src/components/DictionaryBox/isEnable.tsx | 24 +++ src/components/TableActionCard/index.tsx | 67 ++++--- src/components/TablePaginationCard/index.tsx | 44 +++++ src/enums/common.ts | 9 + src/global.css | 5 +- src/global.less | 5 +- src/locales/zh-CN/pages.ts | 1 + src/pages/Project/ProjectList/index.tsx | 15 +- .../components/CreateForm.tsx | 12 +- .../components/UpdateForm.tsx | 15 +- .../Resource/AlgorithmModelList/index.tsx | 100 ++++++---- .../components/ColumnDrawer.tsx | 14 +- .../components/CreateForm.tsx | 16 +- .../components/MyCreateForm.tsx | 76 ++++---- .../components/UpdateForm.tsx | 20 +- src/pages/Resource/ModelVersionList/index.tsx | 183 ++++++++++-------- 17 files changed, 388 insertions(+), 236 deletions(-) create mode 100644 src/components/DictionaryBox/isEnable.tsx create mode 100644 src/components/TablePaginationCard/index.tsx create mode 100644 src/enums/common.ts diff --git a/config/defaultForm.ts b/config/defaultForm.ts index 0b3b4c6..3e908a0 100644 --- a/config/defaultForm.ts +++ b/config/defaultForm.ts @@ -2,7 +2,7 @@ * @Author: zhoux zhouxia@supervision.ltd * @Date: 2023-11-13 14:19:57 * @LastEditors: zhoux zhouxia@supervision.ltd - * @LastEditTime: 2023-11-14 14:46:05 + * @LastEditTime: 2023-11-15 17:22:54 * @FilePath: \general-ai-platform-web\config\defaultForm.ts * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE2 */ @@ -12,15 +12,25 @@ export const proFormCommonOptions: Record = { } +const formBoxMargin = 2 * 24 + +// Small 560 +export const proFormSmallModelWidth: number = 560; +export const proFormSmallItemStyleProps: Record = { + width: proFormSmallModelWidth - formBoxMargin, // 一列 + // column2Width: (proFormSmallModelWidth - 2 * formBoxMargin)/2 , // 两列 +}; + // normal 804 export const proFormModelWidth: number = 804; export const proFormItemStyleProps: Record = { - width: proFormModelWidth - 30, // 一列 - column2Width: (proFormModelWidth - 62)/2 , // 两列 + width: proFormModelWidth - formBoxMargin, // 一列 + column2Width: (proFormModelWidth - formBoxMargin - 32)/2 , // 两列 }; // max 968 export const proFormMaxModelWidth: number = 968; export const proFormMaxItemStyleProps: Record = { - width: proFormMaxModelWidth - 30, + width: proFormMaxModelWidth - formBoxMargin, + column2Width: (proFormMaxModelWidth - formBoxMargin - 32)/2 , // 两列 }; \ No newline at end of file diff --git a/src/components/DictionaryBox/isEnable.tsx b/src/components/DictionaryBox/isEnable.tsx new file mode 100644 index 0000000..09e6ab7 --- /dev/null +++ b/src/components/DictionaryBox/isEnable.tsx @@ -0,0 +1,24 @@ +import { isEnableEnum } from '@/enums/common'; +import { Badge } from 'antd'; +import { FormattedMessage } from 'react-intl'; + +type IsEnableBoxProps = { + isEnable: boolean; +}; + +const IsEnableBox: React.FC = (props) => { + const { isEnable } = props; + + const currentItem = isEnableEnum[isEnable ? '1' : '0'] + + return ( +
+ + + + +
+ ); +}; + +export default IsEnableBox; diff --git a/src/components/TableActionCard/index.tsx b/src/components/TableActionCard/index.tsx index b57d5b7..dbaaa13 100644 --- a/src/components/TableActionCard/index.tsx +++ b/src/components/TableActionCard/index.tsx @@ -2,7 +2,7 @@ * @Author: zhoux zhouxia@supervision.ltd * @Date: 2023-11-14 15:49:36 * @LastEditors: zhoux zhouxia@supervision.ltd - * @LastEditTime: 2023-11-14 16:07:11 + * @LastEditTime: 2023-11-15 16:47:40 * @FilePath: \general-ai-platform-web\src\components\TableActionCard\index.tsx * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ @@ -11,46 +11,53 @@ import { DownOutlined } from '@ant-design/icons'; import { Dropdown } from 'antd'; import React from 'react'; -//TODO 表单的操作按钮集合 +//TODO 表单的操作按钮集合 key的报错未解决 type TableActionItemProps = { renderActions: any[]; }; - const TableActionCard: React.FC = (props) => { +const TableActionCard: React.FC = (props) => { const { renderActions } = props; const maxActionCount = 3; + let prevActions: any[] = []; + const moreActions: { key: string; label: any }[] = []; if (renderActions.length <= maxActionCount) { - return renderActions.map((item) => { - return <>{item}; + prevActions = renderActions; + } else { + // eslint-disable-next-line array-callback-return + renderActions.map((item, index) => { + if (index < maxActionCount - 1) { + prevActions.push(item); + } else { + moreActions.push({ + key: index + '', + label: item.renderDom, + }); + } + // eslint-disable-next-line react/jsx-key }); } - const prevActions: any[] = []; - const moreActions: { key: string; label: any }[] = []; - // eslint-disable-next-line array-callback-return - renderActions.map((item, index) => { - if (index < maxActionCount - 1) { - prevActions.push(item); - } else { - moreActions.push({ - key: index + '', - label: item, - }); - } - // eslint-disable-next-line react/jsx-key - }); return ( - <> - {prevActions.map((item, index) => { - return
{item}
; +
+ {prevActions.map((item) => { + return ( + + {item.renderDom} + + ); })} - - - 更多 - - - - + {moreActions.length ? ( + + + 更多 + + + + ) : ( + <> + )} +
); }; -export default TableActionCard \ No newline at end of file +export default TableActionCard; diff --git a/src/components/TablePaginationCard/index.tsx b/src/components/TablePaginationCard/index.tsx new file mode 100644 index 0000000..95aec6c --- /dev/null +++ b/src/components/TablePaginationCard/index.tsx @@ -0,0 +1,44 @@ +/* + * @Author: zhoux zhouxia@supervision.ltd + * @Date: 2023-11-14 17:03:13 + * @LastEditors: zhoux zhouxia@supervision.ltd + * @LastEditTime: 2023-11-15 13:27:35 + * @FilePath: \general-ai-platform-web\src\components\TablePaginationCard\index.tsx + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ +import { TableDropdown } from '@ant-design/pro-components'; +import React from 'react'; + +export type TablePaginationCardProps = { + total: number; + pageSize: number; + current: number; + // eslint-disable-next-line @typescript-eslint/ban-types + onChange: Function + +}; +// 分页器 +const TablePaginationCard: React.FC = (props) => { + const { total, pageSize, current, onChange } = props; + const totalPage = Math.ceil(total / pageSize); + + const handleChange = (page: number, pageSize: number) => { + onChange(page, pageSize); + }; + + return ( +
+ + Total {total} items, {totalPage} pages + + handleChange(e, pageSize)} + /> +
+ ); +}; + +export default TablePaginationCard; diff --git a/src/enums/common.ts b/src/enums/common.ts new file mode 100644 index 0000000..47e9ee7 --- /dev/null +++ b/src/enums/common.ts @@ -0,0 +1,9 @@ +// 是否启用 +export const isEnableEnum = { + '0' : { + color: '#999999', + }, + '1' : { + color: '#52C41A', + } +} \ No newline at end of file diff --git a/src/global.css b/src/global.css index f436b67..4ad33d0 100644 --- a/src/global.css +++ b/src/global.css @@ -80,7 +80,10 @@ ol { font-size: 16px; } .ant-modal .ant-modal-content { - padding: 20px 15px; + padding: 20px 24px; +} +.ant-modal-header { + padding-bottom: 10px; } /* 单行文本溢出显示省略号 */ .single_line { diff --git a/src/global.less b/src/global.less index 5839539..f411dfc 100644 --- a/src/global.less +++ b/src/global.less @@ -101,7 +101,10 @@ ol { // 弹出框 .ant-modal .ant-modal-content{ - padding: 20px 15px; + padding: 20px 24px; +} +.ant-modal-header{ + padding-bottom: 10px; } // TODO_update 自定义样式块 diff --git a/src/locales/zh-CN/pages.ts b/src/locales/zh-CN/pages.ts index 123c158..f38c701 100644 --- a/src/locales/zh-CN/pages.ts +++ b/src/locales/zh-CN/pages.ts @@ -27,6 +27,7 @@ export default { 'pages.admin.subPage.title': ' 这个页面只有 admin 权限才能查看', 'pages.admin.subPage.alertMessage': 'umi ui 现已发布，欢迎使用 npm run ui 启动体验。', 'pages.searchTable.createForm.newRule': '新建规则', + 'pages.searchTable.detail': '详情', 'pages.searchTable.update': '更新', 'pages.searchTable.destroy': '删除', 'pages.searchTable.create_son_menu': '添加子菜单', diff --git a/src/pages/Project/ProjectList/index.tsx b/src/pages/Project/ProjectList/index.tsx index e9a453b..41203b1 100644 --- a/src/pages/Project/ProjectList/index.tsx +++ b/src/pages/Project/ProjectList/index.tsx @@ -1,3 +1,4 @@ +import IsEnableBox from '@/components/DictionaryBox/isEnable'; import { deleteProjectDeleteProject, deleteProjectDeleteProjectByIds, @@ -7,7 +8,7 @@ import { PlusOutlined } from '@ant-design/icons'; import type { ActionType, ProColumns } from '@ant-design/pro-components'; import { FooterToolbar, PageContainer, ProTable } from '@ant-design/pro-components'; import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max'; -import { Badge, Button, message } from 'antd'; +import { Button, message } from 'antd'; import React, { useRef, useState } from 'react'; import { ColumnDrawer } from './components/ColumnDrawer'; import MyCreateForm from './components/MyCreateForm'; @@ -121,18 +122,10 @@ const ProjectList: React.FC = () => { onFilter: true, hideInSearch: true, valueType: 'switch', - render: (_, item) => { + render: (_text, item) => { return ( <> - - } - > + ); }, diff --git a/src/pages/Resource/AlgorithmModelList/components/CreateForm.tsx b/src/pages/Resource/AlgorithmModelList/components/CreateForm.tsx index 9ce7e65..7d31e61 100644 --- a/src/pages/Resource/AlgorithmModelList/components/CreateForm.tsx +++ b/src/pages/Resource/AlgorithmModelList/components/CreateForm.tsx @@ -2,7 +2,7 @@ * @Author: zhoux zhouxia@supervision.ltd * @Date: 2023-11-01 13:56:33 * @LastEditors: zhoux zhouxia@supervision.ltd - * @LastEditTime: 2023-11-14 14:57:12 + * @LastEditTime: 2023-11-15 16:35:04 * @FilePath: \general-ai-platform-web\src\pages\Resource\AlgorithmModelList\components\CreateForm.tsx * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ @@ -12,7 +12,7 @@ import { ModalForm, ProForm, ProFormSelect, ProFormText } from '@ant-design/pro- import { FormattedMessage, useIntl } from '@umijs/max'; import { Form, message } from 'antd'; import React from 'react'; -import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm'; +import { proFormSmallItemStyleProps,proFormSmallModelWidth } from '../../../../../config/defaultForm'; export type FormValueType = { target?: string; template?: string; @@ -33,7 +33,7 @@ const CreateForm: React.FC = (props) => { return ( - width={proFormModelWidth} + width={proFormSmallModelWidth} title={intl.formatMessage({ id: 'resource.algorithm_model.table.list.add', defaultMessage: '$$$', @@ -61,7 +61,7 @@ const CreateForm: React.FC = (props) => { > @@ -87,7 +87,7 @@ const CreateForm: React.FC = (props) => { ]} /> = (props) => { }} /> = (props) => { return ( + width={proFormModelWidth} title={intl.formatMessage({ id: 'resource.algorithm_model.table.list.update', defaultMessage: '$$$', @@ -58,14 +61,14 @@ const UpdateForm: React.FC = (props) => { > @@ -93,7 +96,7 @@ const UpdateForm: React.FC = (props) => { ]} /> = (props) => { }} /> = (props) => { disabled={false} /> = (props) => { disabled={true} /> { /** * @en-US Pop-up window of new window @@ -257,6 +255,7 @@ const AlgorithmModelList: React.FC = () => { dataIndex: 'option', valueType: 'option', fixed: 'right', + key: 'option', // width: 140, render: (_, record) => [ // { // eslint-disable-next-line react/jsx-key { - setCurrentRow(record); - doToDetail(record); - // setShowDetail(true); - }} - > - 详情 - , - , - { - handleDestroy(record).then(() => {}); - }} - > - - , + { + key: 'detail', + renderDom: ( + + ), + }, + { + key: 'update', + renderDom: ( + + ), + }, + { + key: 'destroy', + renderDom: ( + { + handleDestroy(record).then(() => {}); + }} + > + + + ), + }, ]} >, // , diff --git a/src/pages/Resource/ModelCategoryList/components/ColumnDrawer.tsx b/src/pages/Resource/ModelCategoryList/components/ColumnDrawer.tsx index 6b331df..6ee4b9d 100644 --- a/src/pages/Resource/ModelCategoryList/components/ColumnDrawer.tsx +++ b/src/pages/Resource/ModelCategoryList/components/ColumnDrawer.tsx @@ -1,3 +1,11 @@ +/* + * @Author: zhoux zhouxia@supervision.ltd + * @Date: 2023-11-01 13:56:33 + * @LastEditors: zhoux zhouxia@supervision.ltd + * @LastEditTime: 2023-11-15 14:51:54 + * @FilePath: \general-ai-platform-web\src\pages\Resource\ModelCategoryList\components\ColumnDrawer.tsx + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ import React from "react"; import {Drawer} from "antd"; import {ProColumns, ProDescriptions, ProDescriptionsItemProps} from "@ant-design/pro-components"; @@ -14,7 +22,7 @@ const ColumnDrawer: React.FC = (props) => { return ( { props.handleDrawer(); @@ -24,8 +32,8 @@ const ColumnDrawer: React.FC = (props) => { {props.currentRow?.id && ( style={{ - paddingLeft: 10, - paddingRight: 10 + // paddingLeft: 4, + // paddingRight: 4 }} column={2} title={props.currentRow?.id} diff --git a/src/pages/Resource/ModelVersionList/components/CreateForm.tsx b/src/pages/Resource/ModelVersionList/components/CreateForm.tsx index aba1cf8..6a033ba 100644 --- a/src/pages/Resource/ModelVersionList/components/CreateForm.tsx +++ b/src/pages/Resource/ModelVersionList/components/CreateForm.tsx @@ -2,7 +2,7 @@ * @Author: zhoux zhouxia@supervision.ltd * @Date: 2023-11-01 13:56:33 * @LastEditors: zhoux zhouxia@supervision.ltd - * @LastEditTime: 2023-11-14 15:29:30 + * @LastEditTime: 2023-11-15 17:23:44 * @FilePath: \general-ai-platform-web\src\pages\Resource\ModelVersionList\components\CreateForm.tsx * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ @@ -17,6 +17,7 @@ import { } from '@ant-design/pro-components'; import { FormattedMessage, useIntl } from '@umijs/max'; import { Form, message } from 'antd'; +import { proFormMaxItemStyleProps, proFormMaxModelWidth } from '../../../../../config/defaultForm'; import React from 'react'; export type FormValueType = { target?: string; @@ -38,6 +39,7 @@ const CreateForm: React.FC = (props) => { return ( + width={proFormMaxModelWidth} title={intl.formatMessage({ id: 'resource.model_version.table.list.add', defaultMessage: '$$$', @@ -65,7 +67,7 @@ const CreateForm: React.FC = (props) => { > = (props) => { }} /> @@ -111,7 +113,7 @@ const CreateForm: React.FC = (props) => { required={false} /> @@ -137,7 +139,7 @@ const CreateForm: React.FC = (props) => { ]} /> = (props) => { required={false} /> = (props) => { initialValue={true} /> diff --git a/src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx b/src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx index 288c72f..e96f86a 100644 --- a/src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx +++ b/src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx @@ -2,7 +2,7 @@ * @Author: zhoux zhouxia@supervision.ltd * @Date: 2023-11-01 13:56:33 * @LastEditors: zhoux zhouxia@supervision.ltd - * @LastEditTime: 2023-11-14 15:29:42 + * @LastEditTime: 2023-11-15 17:39:37 * @FilePath: \general-ai-platform-web\src\pages\Resource\ModelVersionList\components\MyCreateForm.tsx * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ @@ -23,6 +23,7 @@ import { FormattedMessage, useIntl } from '@umijs/max'; import { Form, Modal, UploadFile, message } from 'antd'; import yaml from 'js-yaml'; import React, { useRef, useState } from 'react'; +import { proFormMaxItemStyleProps, proFormMaxModelWidth } from '../../../../../config/defaultForm'; export type FormValueType = { target?: string; @@ -95,8 +96,10 @@ const MyCreateForm: React.FC = (props) => { stepsFormRender={(dom, submitter) => { return ( + } + width={proFormMaxModelWidth} onCancel={() => { setCurrent(0); formRef.current?.resetFields(); @@ -129,7 +132,7 @@ const MyCreateForm: React.FC = (props) => { > = (props) => { }} /> = (props) => { })}`} required={false} /> + - } - placeholder={`${intl.formatMessage({ - id: 'common.please_input', - defaultMessage: '$$$', - })}${intl.formatMessage({ - id: 'resource.model_version.table.list.path', - defaultMessage: '$$$', - })}`} - required={true} - rules={[ - { - required: true, - message: ( - - ), - }, - ]} - /> - = (props) => { required={false} /> = (props) => { initialValue={true} /> + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'resource.model_version.table.list.path', + defaultMessage: '$$$', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + = (props) => { }} > 配置文件上传} value={fileList} name="dragger" fieldProps={{ @@ -334,6 +339,7 @@ const MyCreateForm: React.FC = (props) => { }} /> = (props) => { return ( + width={proFormModelWidth} title={intl.formatMessage({ id: 'resource.model_version.table.list.update', defaultMessage: '$$$', @@ -59,14 +61,14 @@ const UpdateForm: React.FC = (props) => { > = (props) => { }} /> @@ -115,7 +117,7 @@ const UpdateForm: React.FC = (props) => { disabled={false} /> @@ -143,7 +145,7 @@ const UpdateForm: React.FC = (props) => { ]} /> = (props) => { disabled={false} /> = (props) => { disabled={false} /> @@ -192,7 +194,7 @@ const UpdateForm: React.FC = (props) => { disabled={false} /> = (props) => { disabled={true} /> { message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' })); }); }; - + const columns: ProColumns[] = [ { title: ( @@ -287,85 +287,108 @@ const ModelVersionList: React.FC = () => { > { - setUpdateModalOpen(true); - setCurrentRow(record); - }} - > - - , - { - putAlgorithmModelUpdateAlgorithmModel({ - id: record.modelFkId, - defaultVersionFkId: record.id, - }) - .then(() => { - message.success( - intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }), - ); - }) - .catch(() => { - message.error( - intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }), - ); - }); - }} - onCancel={() => {}} - okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })} - cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })} - > - - , - {}} - onCancel={() => {}} - okText="Yes" - cancelText="No" - > - - , - { - handleDestroy(record).then(() => {}); - }} - > - - , + { + key: 'update', + renderDom: ( + + ), + }, + { + key: 'setDefault', + renderDom: ( + { + putAlgorithmModelUpdateAlgorithmModel({ + id: record.modelFkId, + defaultVersionFkId: record.id, + }) + .then(() => { + message.success( + intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }), + ); + }) + .catch(() => { + message.error( + intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }), + ); + }); + }} + onCancel={() => {}} + okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })} + cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })} + > + + + ), + }, + { + key: 'publishModel', + renderDom: ( + {}} + onCancel={() => {}} + okText="Yes" + cancelText="No" + > + + + ), + }, + { + key: 'destroy', + renderDom: ( + { + handleDestroy(record).then(() => {}); + }} + > + + + ), + }, ]} > ,