feat: storybook add configInfo

react-ui/.storybook/preview.tsx

@@ -22,6 +22,11 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    options: {
+      storySort: {
+        method: 'alphabetical',
+      },
+    },
   },
   decorators: [
     (Story) => (

react-ui/src/components/ConfigInfo/index.tsx

@@ -0,0 +1,41 @@
+import BasicInfo, { type BasicInfoData, type BasicInfoProps } from '@/components/BasicInfo';
+import InfoGroup from '@/components/InfoGroup';
+import classNames from 'classnames';
+export type { BasicInfoData };
+
+interface ConfigInfoProps extends BasicInfoProps {
+  /** 标题 */
+  title: string;
+  /** 子元素 */
+  children?: React.ReactNode;
+}
+
+/** 详情基本信息块，目前主要用于主动机器学习、超参数寻优、自主学习详情中 */
+function ConfigInfo({
+  title,
+  datas,
+  labelWidth,
+  labelAlign = 'start',
+  labelEllipsis = true,
+  threeColumns = true,
+  className,
+  style,
+  children,
+}: ConfigInfoProps) {
+  return (
+    <InfoGroup title={title} className={classNames('kf-config-info', className)} style={style}>
+      <div className={'kf-config-info__content'}>
+        <BasicInfo
+          datas={datas}
+          labelWidth={labelWidth}
+          labelAlign={labelAlign}
+          labelEllipsis={labelEllipsis}
+          threeColumns={threeColumns}
+        />
+        {children}
+      </div>
+    </InfoGroup>
+  );
+}
+
+export default ConfigInfo;

react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx

@@ -1,3 +1,4 @@
+import ConfigInfo, { type BasicInfoData } from '@/components/ConfigInfo';
 import { AutoMLTaskType, autoMLEnsembleClassOptions, autoMLTaskTypeOptions } from '@/enums';
 import { AutoMLData } from '@/pages/AutoML/types';
 import { experimentStatusInfo } from '@/pages/Experiment/status';
@@ -8,7 +9,6 @@ import { formatBoolean, formatDataset, formatDate, formatEnum } from '@/utils/fo
 import { Flex } from 'antd';
 import classNames from 'classnames';
 import { useMemo } from 'react';
-import ConfigInfo, { type BasicInfoData } from '../ConfigInfo';
 import styles from './index.less';
 
 // 格式化优化方向
@@ -236,7 +236,7 @@ function AutoMLBasic({ info, className, runStatus, isInstance = false }: AutoMLB
       {isInstance && runStatus && (
         <ConfigInfo
           title="运行信息"
-          data={instanceDatas}
+          datas={instanceDatas}
           labelWidth={70}
           style={{ marginBottom: '20px' }}
         />
@@ -244,18 +244,18 @@ function AutoMLBasic({ info, className, runStatus, isInstance = false }: AutoMLB
       {!isInstance && (
         <ConfigInfo
           title="基本信息"
-          data={basicDatas}
+          datas={basicDatas}
           labelWidth={70}
           style={{ marginBottom: '20px' }}
         />
       )}
       <ConfigInfo
         title="配置信息"
-        data={configDatas}
+        datas={configDatas}
         labelWidth={150}
         style={{ marginBottom: '20px' }}
       />
-      <ConfigInfo title="优化指标" data={metricsData} labelWidth={70} />
+      <ConfigInfo title="优化指标" datas={metricsData} labelWidth={70} />
     </div>
   );
 }

react-ui/src/pages/AutoML/components/ConfigInfo/index.less

@@ -1,20 +0,0 @@
-.config-info {
-  :global {
-    .kf-basic-info {
-      width: 100%;
-
-      &__item {
-        width: calc((100% - 80px) / 3);
-        &__label {
-          font-size: @font-size;
-          text-align: left;
-          text-align-last: left;
-        }
-        &__value {
-          min-width: 0;
-          font-size: @font-size;
-        }
-      }
-    }
-  }
-}

react-ui/src/pages/AutoML/components/ConfigInfo/index.tsx

@@ -1,27 +0,0 @@
-import BasicInfo, { type BasicInfoData } from '@/components/BasicInfo';
-import InfoGroup from '@/components/InfoGroup';
-import classNames from 'classnames';
-import styles from './index.less';
-export type { BasicInfoData };
-
-type ConfigInfoProps = {
-  title: string;
-  data: BasicInfoData[];
-  labelWidth: number;
-  className?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode;
-};
-
-function ConfigInfo({ title, data, labelWidth, className, style, children }: ConfigInfoProps) {
-  return (
-    <InfoGroup title={title} className={classNames(styles['config-info'], className)} style={style}>
-      <div className={styles['config-info__content']}>
-        <BasicInfo datas={data} labelWidth={labelWidth} />
-        {children}
-      </div>
-    </InfoGroup>
-  );
-}
-
-export default ConfigInfo;

react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx

@@ -1,6 +1,6 @@
+import ConfigInfo, { type BasicInfoData } from '@/components/ConfigInfo';
 import { hyperParameterOptimizedMode } from '@/enums';
 import { useComputingResource } from '@/hooks/resource';
-import ConfigInfo, { type BasicInfoData } from '@/pages/AutoML/components/ConfigInfo';
 import { experimentStatusInfo } from '@/pages/Experiment/status';
 import {
   schedulerAlgorithms,
@@ -198,7 +198,7 @@ function HyperParameterBasic({
       {isInstance && runStatus && (
         <ConfigInfo
           title="运行信息"
-          data={instanceDatas}
+          datas={instanceDatas}
           labelWidth={70}
           style={{ marginBottom: '20px' }}
         />
@@ -206,14 +206,14 @@ function HyperParameterBasic({
       {!isInstance && (
         <ConfigInfo
           title="基本信息"
-          data={basicDatas}
+          datas={basicDatas}
           labelWidth={70}
           style={{ marginBottom: '20px' }}
         />
       )}
       <ConfigInfo
         title="配置信息"
-        data={configDatas}
+        datas={configDatas}
         labelWidth={120}
         style={{ marginBottom: '20px' }}
       >

react-ui/src/stories/Config.stories.tsx

@@ -0,0 +1,37 @@
+import ConfigInfo from '@/components/ConfigInfo';
+import type { Meta, StoryObj } from '@storybook/react';
+import * as BasicInfoStories from './BasicInfo.stories';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/ConfigInfo',
+  component: ConfigInfo,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    // layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  // args: { onClick: fn() },
+} satisfies Meta<typeof ConfigInfo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    title: '基本信息',
+    datas: BasicInfoStories.Primary.args.datas,
+    labelAlign: 'start',
+    labelEllipsis: true,
+    threeColumns: true,
+    labelWidth: 80,
+    children: <div>I am a child element </div>,
+  },
+};

react-ui/src/stories/docs/Less.mdx

@@ -176,7 +176,7 @@ function Component() {
 function Component1() {
   return (
     <div className="component1">
-      <div className="component1__element2">
+      <div className="component1__element1">
       </div>
     </div>
   )