diff --git a/.gitignore b/.gitignore index 10d7d838..2797765a 100644 --- a/.gitignore +++ b/.gitignore @@ -63,3 +63,5 @@ mvnw /react-ui/docs /react-ui/types/tsconfig.tsbuildinfo +/react-ui/storybook-static +/react-ui/.storybook/deploy.sh diff --git a/react-ui/.storybook/babel-plugin-auto-css-modules.js b/react-ui/.storybook/babel-plugin-auto-css-modules.js index 9c7709ff..660744b4 100644 --- a/react-ui/.storybook/babel-plugin-auto-css-modules.js +++ b/react-ui/.storybook/babel-plugin-auto-css-modules.js @@ -4,7 +4,6 @@ export default function(babel) { visitor: { ImportDeclaration(path) { const source = path.node.source.value; - // console.log("zzzz", source); if (source.endsWith('.less')) { if (path.node.specifiers.length > 0) { path.node.source.value += "?modules"; diff --git a/react-ui/.storybook/main.ts b/react-ui/.storybook/main.ts index 1512aa48..c21ab45b 100644 --- a/react-ui/.storybook/main.ts +++ b/react-ui/.storybook/main.ts @@ -16,7 +16,11 @@ const config: StorybookConfig = { name: '@storybook/react-webpack5', options: {}, }, - staticDirs: ['../public', { from: '../docs', to: '/docs' }], + staticDirs: [ + '../public', + { from: '../docs', to: '/docs' }, + { from: '../docs/index.html', to: '/docs/index.html' }, + ], docs: { defaultName: 'Documentation', }, diff --git a/react-ui/package.json b/react-ui/package.json index 2c7b13a1..c49cda16 100644 --- a/react-ui/package.json +++ b/react-ui/package.json @@ -40,6 +40,7 @@ "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev", "storybook": "storybook dev -p 6006", "storybook-build": "storybook build", + "storybook-deploy": "./.storybook/deploy.sh", "storybook-docs": "storybook dev --docs", "storybook-docs-build": "storybook build --docs", "test": "jest", diff --git a/react-ui/public/fonts/TaoBaoMaiCaiTi-Regular.otf b/react-ui/public/fonts/TaoBaoMaiCaiTi-Regular.otf deleted file mode 100644 index 21ba9622..00000000 Binary files a/react-ui/public/fonts/TaoBaoMaiCaiTi-Regular.otf and /dev/null differ diff --git a/react-ui/public/fonts/TaoBaoMaiCaiTi-Regular.ttf b/react-ui/public/fonts/TaoBaoMaiCaiTi-Regular.ttf deleted file mode 100644 index 31ab5e30..00000000 Binary files a/react-ui/public/fonts/TaoBaoMaiCaiTi-Regular.ttf and /dev/null differ diff --git a/react-ui/public/fonts/TaoBaoMaiCaiTi-Regular.woff b/react-ui/public/fonts/TaoBaoMaiCaiTi-Regular.woff deleted file mode 100644 index 0abc0f0e..00000000 Binary files a/react-ui/public/fonts/TaoBaoMaiCaiTi-Regular.woff and /dev/null differ diff --git a/react-ui/public/fonts/TaoBaoMaiCaiTi-Regular.woff2 b/react-ui/public/fonts/TaoBaoMaiCaiTi-Regular.woff2 deleted file mode 100644 index f4433e2e..00000000 Binary files a/react-ui/public/fonts/TaoBaoMaiCaiTi-Regular.woff2 and /dev/null differ diff --git a/react-ui/src/components/IFramePage/index.tsx b/react-ui/src/components/IFramePage/index.tsx index b57869d3..cd08c7b7 100644 --- a/react-ui/src/components/IFramePage/index.tsx +++ b/react-ui/src/components/IFramePage/index.tsx @@ -44,7 +44,7 @@ type IframePageProps = { /** 子系统 */ type: IframePageType; /** 是否可以在页签上打开 */ - openInTab: boolean; + openInTab?: boolean; /** 自定义样式类名 */ className?: string; /** 自定义样式 */ diff --git a/react-ui/src/pages/Dataset/components/ResourceInfo/index.tsx b/react-ui/src/pages/Dataset/components/ResourceInfo/index.tsx index c74a3cc8..2eeb09b8 100644 --- a/react-ui/src/pages/Dataset/components/ResourceInfo/index.tsx +++ b/react-ui/src/pages/Dataset/components/ResourceInfo/index.tsx @@ -13,6 +13,7 @@ import { } from '@/pages/Dataset/config'; import GraphLegend from '@/pages/Model/components/GraphLegend'; import ModelEvolution from '@/pages/Model/components/ModelEvolution'; +import { VersionChangedMessage } from '@/utils/constant'; import { openAntdModal } from '@/utils/modal'; import { to } from '@/utils/promise'; import { modalConfirm } from '@/utils/ui'; @@ -124,6 +125,7 @@ const ResourceInfo = ({ resourceType }: ResourceInfoProps) => { onOk: () => { getVersionList(true); close(); + window.postMessage({ type: VersionChangedMessage }); }, }); }; @@ -170,6 +172,7 @@ const ResourceInfo = ({ resourceType }: ResourceInfoProps) => { if (res) { message.success('删除成功'); getVersionList(true); + window.postMessage({ type: VersionChangedMessage }); } }; diff --git a/react-ui/src/pages/Dataset/components/VersionCompareModal/index.less b/react-ui/src/pages/Dataset/components/VersionCompareModal/index.less index f1935eb2..4a1c0d94 100644 --- a/react-ui/src/pages/Dataset/components/VersionCompareModal/index.less +++ b/react-ui/src/pages/Dataset/components/VersionCompareModal/index.less @@ -11,7 +11,6 @@ text-align: center; background: @background; border-radius: 4px 4px 0 0; - .singleLine(); } .text() { @@ -20,7 +19,6 @@ font-size: 13px; line-height: 22px; word-break: break-all; - .singleLine(); } .version-container(@background) { diff --git a/react-ui/src/pages/Dataset/components/VersionCompareModal/index.tsx b/react-ui/src/pages/Dataset/components/VersionCompareModal/index.tsx index 10660221..5e2292f8 100644 --- a/react-ui/src/pages/Dataset/components/VersionCompareModal/index.tsx +++ b/react-ui/src/pages/Dataset/components/VersionCompareModal/index.tsx @@ -88,7 +88,7 @@ function VersionCompareModal({ format: formatProject, }, { - key: 'description', + key: 'version_desc', text: '版本描述', }, ] @@ -123,7 +123,7 @@ function VersionCompareModal({ format: formatTrainTask, }, { - key: 'description', + key: 'version_desc', text: '版本描述', }, ], @@ -193,7 +193,14 @@ function VersionCompareModal({ ))}
-
{v1.version}
+
+ + {v1.version} + +
{fields.map(({ key, format }) => { const text = getValue(v1, key as keyof typeof v1, format); return ( @@ -203,7 +210,7 @@ function VersionCompareModal({ [styles['version-compare__left__text--different']]: isDifferent(key), })} > - + {isEmpty(text) ? '--' : text}
@@ -211,7 +218,14 @@ function VersionCompareModal({ })}
-
{v2.version}
+
+ + {v2.version} + +
{fields.map(({ key, format }) => { const text = getValue(v2, key as keyof typeof v2, format); return ( @@ -221,7 +235,7 @@ function VersionCompareModal({ [styles['version-compare__right__text--different']]: isDifferent(key), })} > - + {isEmpty(text) ? '--' : text}
diff --git a/react-ui/src/pages/Mirror/Create/index.tsx b/react-ui/src/pages/Mirror/Create/index.tsx index 89dc1e21..a32e99a1 100644 --- a/react-ui/src/pages/Mirror/Create/index.tsx +++ b/react-ui/src/pages/Mirror/Create/index.tsx @@ -90,6 +90,7 @@ function MirrorCreate() { ...omit(formData, ['fileList', 'upload_type']), path: file.response.data.url, file_size: file.response.data.fileSize, + file_name: file.response.data.fileName, upload_type: 1, image_type: 0, }; @@ -289,7 +290,7 @@ function MirrorCreate() { rules={[ { required: true, - message: '请上传镜像地址', + message: '请上传镜像文件', }, ]} > diff --git a/react-ui/src/pages/Model/components/ModelMetrics/index.tsx b/react-ui/src/pages/Model/components/ModelMetrics/index.tsx index afcb9be3..a88755df 100644 --- a/react-ui/src/pages/Model/components/ModelMetrics/index.tsx +++ b/react-ui/src/pages/Model/components/ModelMetrics/index.tsx @@ -3,6 +3,7 @@ import TableColTitle from '@/components/TableColTitle'; import { useCheck } from '@/hooks/useCheck'; import { getModelPageVersionsReq, getModelVersionsMetricsReq } from '@/services/dataset'; import { tableSorter } from '@/utils'; +import { VersionChangedMessage } from '@/utils/constant'; import { to } from '@/utils/promise'; import tableCellRender from '@/utils/table'; import { Checkbox, Flex, Table, type TablePaginationConfig, type TableProps } from 'antd'; @@ -27,10 +28,10 @@ type ModelMetricsProps = { resourceId: number; identifier: string; owner: string; - version: string; + version: string; // 当前版本 }; -function ModelMetrics({ resourceId, identifier, owner, version }: ModelMetricsProps) { +function ModelMetrics({ resourceId, identifier, owner, version, refreshTag }: ModelMetricsProps) { const [pagination, setPagination] = useState({ current: 1, pageSize: 10, @@ -59,6 +60,24 @@ function ModelMetrics({ resourceId, identifier, owner, version }: ModelMetricsPr checkSingleMetrics, ] = useCheck(allMetricsNames); + // 新增，删除版本时，重置分页，然后刷新版本列表 + useEffect(() => { + const handleMessage = (e: MessageEvent) => { + const { type } = e.data; + if (type === VersionChangedMessage) { + setPagination({ + current: 1, + pageSize: 10, + }); + } + }; + + window.addEventListener('message', handleMessage); + return () => { + window.removeEventListener('message', handleMessage); + }; + }, []); + useEffect(() => { // 获取模型版本列表，带有参数和指标数据 const getModelPageVersions = async () => { @@ -128,6 +147,7 @@ function ModelMetrics({ resourceId, identifier, owner, version }: ModelMetricsPr } }; + // 行勾选 const rowSelection: TableProps['rowSelection'] = { type: 'checkbox', fixed: 'left', @@ -140,6 +160,7 @@ function ModelMetrics({ resourceId, identifier, owner, version }: ModelMetricsPr }), }; + // 计算的表格数据 const showTableData = useMemo(() => { const index = tableData.findIndex((item) => item.name === version); if (index !== -1) { diff --git a/react-ui/src/pages/ModelDeployment/CreateService/index.tsx b/react-ui/src/pages/ModelDeployment/CreateService/index.tsx index ae7b1ad8..93026dde 100644 --- a/react-ui/src/pages/ModelDeployment/CreateService/index.tsx +++ b/react-ui/src/pages/ModelDeployment/CreateService/index.tsx @@ -8,11 +8,11 @@ import PageTitle from '@/components/PageTitle'; import SubAreaTitle from '@/components/SubAreaTitle'; import { CommonTabKeys, serviceTypeOptions } from '@/enums'; import { createServiceReq, getServiceInfoReq, updateServiceReq } from '@/services/modelDeployment'; +import { ServiceCreatedMessage } from '@/utils/constant'; import { to } from '@/utils/promise'; import { useNavigate, useParams } from '@umijs/max'; import { App, Button, Col, Form, Input, Row, Select } from 'antd'; import { useEffect } from 'react'; -import { createServiceVersionMessage } from '../types'; import styles from './index.less'; // 表单数据 @@ -63,7 +63,7 @@ function CreateService() { navigate(-1); if (!serviceId) { setTimeout(() => { - window.postMessage({ type: createServiceVersionMessage, payload: res.data.id }); + window.postMessage({ type: ServiceCreatedMessage, payload: res.data.id }); }, 500); } } diff --git a/react-ui/src/pages/ModelDeployment/List/index.tsx b/react-ui/src/pages/ModelDeployment/List/index.tsx index 4d5f7a3c..9893b0eb 100644 --- a/react-ui/src/pages/ModelDeployment/List/index.tsx +++ b/react-ui/src/pages/ModelDeployment/List/index.tsx @@ -31,9 +31,9 @@ import { CreateServiceVersionFrom, ServiceData, ServiceOperationType, - createServiceVersionMessage, } from '../types'; import styles from './index.less'; +import { ServiceCreatedMessage } from '@/utils/constant'; const allServiceTypeOptions = [{ label: '全部', value: '' }, ...serviceTypeOptions]; @@ -95,7 +95,7 @@ function ModelDeployment() { useEffect(() => { const handleMessage = (e: MessageEvent) => { const { type, payload } = e.data; - if (type === createServiceVersionMessage) { + if (type === ServiceCreatedMessage) { modalConfirm({ title: '创建服务成功', content: '是否创建服务版本?', diff --git a/react-ui/src/pages/ModelDeployment/types.ts b/react-ui/src/pages/ModelDeployment/types.ts index 92452fe5..4f7f76e6 100644 --- a/react-ui/src/pages/ModelDeployment/types.ts +++ b/react-ui/src/pages/ModelDeployment/types.ts @@ -63,6 +63,3 @@ export enum CreateServiceVersionFrom { CreateService = 'CreateService', // 来自创建服务 ServiceInfo = 'ServiceInfo', // 来自服务详情 } - -// 去创建服务版本消息 -export const createServiceVersionMessage = 'createServiceVersion'; diff --git a/react-ui/src/stories/FullScreenFrame.stories.tsx b/react-ui/src/stories/FullScreenFrame.stories.tsx index 74dae50a..93ce8891 100644 --- a/react-ui/src/stories/FullScreenFrame.stories.tsx +++ b/react-ui/src/stories/FullScreenFrame.stories.tsx @@ -4,7 +4,7 @@ import { fn } from '@storybook/test'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { - title: 'Components/FullScreenFrame 全屏iframe', + title: 'Components/FullScreenFrame 全屏 iframe', component: FullScreenFrame, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout diff --git a/react-ui/src/stories/IFramePage.stories.tsx b/react-ui/src/stories/IFramePage.stories.tsx index d5c6725b..2b40330f 100644 --- a/react-ui/src/stories/IFramePage.stories.tsx +++ b/react-ui/src/stories/IFramePage.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { - title: 'Components/IFramePage iframe页面', + title: 'Components/IFramePage iframe 页面', component: IFramePage, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout diff --git a/react-ui/src/utils/constant.ts b/react-ui/src/utils/constant.ts index 0ca0c423..4f3ec89c 100644 --- a/react-ui/src/utils/constant.ts +++ b/react-ui/src/utils/constant.ts @@ -10,4 +10,10 @@ const xllCols = { span: 10 }; /** * 输入控件宽度，xl: 12, xll: 10 */ -export const formCols = { xl: xlCols, xxl: xllCols }; +export const FormCols = { xl: xlCols, xxl: xllCols }; + +// 数据集、模型新增和删除版本消息 +export const VersionChangedMessage = 'versionChanged'; + +// 创建服务成功消息，去创建服务版本 +export const ServiceCreatedMessage = 'serviceCreated'; diff --git a/react-ui/src/utils/functional.ts b/react-ui/src/utils/functional.ts index 6128c897..0c806998 100644 --- a/react-ui/src/utils/functional.ts +++ b/react-ui/src/utils/functional.ts @@ -5,14 +5,10 @@ */ /** - * Safely invokes a function with a given value, returning the result of the - * function or the provided value if it is `undefined` or `null`. + * 安全调用函数，如果参数是 `undefined` 或 `null`，直接返回 `undefined` 或 `null`，而不会导致异常 * - * @template T - The type of the input value. - * @template M - The type of the output value. - * @param {function} fn - The function to be invoked with the input value. - * @returns {function} A function that takes a value, invokes `fn` with it if - * it's not `undefined` or `null`, and returns the result or the original value. + * @param fn - 要调用的函数 + * @returns 封装后的函数，该函数的参数如果是 `undefined` 或 `null`，结果直接返回 `undefined` 或 `null`，而不会导致异常 */ export function safeInvoke( fn: (value: T) => M | undefined | null,