diff --git a/react-ui/.storybook/main.ts b/react-ui/.storybook/main.ts index 820a0eeb..54824837 100644 --- a/react-ui/.storybook/main.ts +++ b/react-ui/.storybook/main.ts @@ -16,7 +16,7 @@ const config: StorybookConfig = { name: '@storybook/react-webpack5', options: {}, }, - staticDirs: ['../public'], + staticDirs: ['../static'], docs: { defaultName: 'Documentation', }, diff --git a/react-ui/package.json b/react-ui/package.json index 2b2cfd4b..56a4b735 100644 --- a/react-ui/package.json +++ b/react-ui/package.json @@ -166,7 +166,7 @@ }, "msw": { "workerDirectory": [ - "public" + "static" ] } } diff --git a/react-ui/src/components/DisabledInput/index.tsx b/react-ui/src/components/DisabledInput/index.tsx deleted file mode 100644 index 3a31def8..00000000 --- a/react-ui/src/components/DisabledInput/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Typography } from 'antd'; -import styles from './index.less'; - -type DisabledInputProps = { - value?: any; - valuePropName?: string; -}; - -/** - * 模拟禁用的输入框，但是完全显示内容 - */ -function DisabledInput({ value, valuePropName }: DisabledInputProps) { - const data = valuePropName ? value[valuePropName] : value; - return ( -
- {data} -
- ); -} - -export default DisabledInput; diff --git a/react-ui/src/components/DisabledInput/index.less b/react-ui/src/components/FormInfo/index.less similarity index 55% rename from react-ui/src/components/DisabledInput/index.less rename to react-ui/src/components/FormInfo/index.less index 06808c5a..868404c7 100644 --- a/react-ui/src/components/DisabledInput/index.less +++ b/react-ui/src/components/FormInfo/index.less @@ -1,4 +1,5 @@ -.disabled-input { +.form-info { + min-height: 32px; padding: 4px 11px; color: @text-disabled-color; font-size: @font-size-input; @@ -6,4 +7,14 @@ border: 1px solid #d9d9d9; border-radius: 6px; cursor: not-allowed; + + .ant-typography { + margin: 0 !important; + } +} + +.form-info--multiline { + .ant-typography { + white-space: pre-wrap; + } } diff --git a/react-ui/src/components/FormInfo/index.tsx b/react-ui/src/components/FormInfo/index.tsx new file mode 100644 index 00000000..a784e433 --- /dev/null +++ b/react-ui/src/components/FormInfo/index.tsx @@ -0,0 +1,41 @@ +import { Typography } from 'antd'; +import classNames from 'classnames'; +import './index.less'; + +type FormInfoProps = { + /** 自定义类名 */ + value?: any; + /** 如果 `value` 是对象时，取对象的哪个属性作为值 */ + valuePropName?: string; + /** 是否是多行 */ + multiline?: boolean; + /** 自定义类名 */ + className?: string; + /** 自定义样式 */ + style?: React.CSSProperties; +}; + +/** + * 模拟禁用的输入框，但是内容超长时，hover 时显示所有内容 + */ +function FormInfo({ value, valuePropName, className, style, multiline = false }: FormInfoProps) { + const data = value && typeof value === 'object' && valuePropName ? value[valuePropName] : value; + return ( +
+ + {data} + +
+ ); +} + +export default FormInfo; diff --git a/react-ui/src/pages/AutoML/components/ExperimentInstance/index.tsx b/react-ui/src/pages/AutoML/components/ExperimentInstance/index.tsx index ea319dc8..ab713f48 100644 --- a/react-ui/src/pages/AutoML/components/ExperimentInstance/index.tsx +++ b/react-ui/src/pages/AutoML/components/ExperimentInstance/index.tsx @@ -107,7 +107,7 @@ function ExperimentInstanceComponent({ }; if (!experimentInsList || experimentInsList.length === 0) { - return null; + return
暂无实验实例
; } return ( diff --git a/react-ui/src/pages/Experiment/components/ExperimentInstance/index.tsx b/react-ui/src/pages/Experiment/components/ExperimentInstance/index.tsx index 4d68d93c..9b37dba8 100644 --- a/react-ui/src/pages/Experiment/components/ExperimentInstance/index.tsx +++ b/react-ui/src/pages/Experiment/components/ExperimentInstance/index.tsx @@ -20,7 +20,7 @@ import TensorBoardStatusCell from '../TensorBoardStatus'; import styles from './index.less'; type ExperimentInstanceProps = { - experimentInList?: ExperimentInstance[]; + experimentInsList?: ExperimentInstance[]; experimentInsTotal: number; onClickInstance?: (instance: ExperimentInstance) => void; onClickTensorBoard?: (instance: ExperimentInstance) => void; @@ -30,7 +30,7 @@ type ExperimentInstanceProps = { }; function ExperimentInstanceComponent({ - experimentInList, + experimentInsList, experimentInsTotal, onClickInstance, onClickTensorBoard, @@ -40,8 +40,8 @@ function ExperimentInstanceComponent({ }: ExperimentInstanceProps) { const { message } = App.useApp(); const allIntanceIds = useMemo(() => { - return experimentInList?.map((item) => item.id) || []; - }, [experimentInList]); + return experimentInsList?.map((item) => item.id) || []; + }, [experimentInsList]); const [ selectedIns, setSelectedIns, @@ -57,7 +57,7 @@ function ExperimentInstanceComponent({ if (allIntanceIds.length === 0) { setSelectedIns([]); } - }, [experimentInList]); + }, [experimentInsList]); // 删除实验实例确认 const handleRemove = (instance: ExperimentInstance) => { @@ -118,8 +118,8 @@ function ExperimentInstanceComponent({ } }; - if (!experimentInList || experimentInList.length === 0) { - return null; + if (!experimentInsList || experimentInsList.length === 0) { + return
暂无数据
; } return ( @@ -152,7 +152,7 @@ function ExperimentInstanceComponent({ - {experimentInList.map((item, index) => ( + {experimentInsList.map((item, index) => (
))} - {experimentInsTotal > experimentInList.length ? ( + {experimentInsTotal > experimentInsList.length ? (