feat: 修改 BasicTableInfo 组件参数

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

@@ -24,21 +24,15 @@ export type BasicInfoProps = {
 
 /**
  * 基础信息展示组件，用于展示基础信息，支持一行两列或一行三列，支持数据格式化
- *
- * ### usage
- * ```tsx
- * import { BasicInfo } from '@/components/BasicInfo';
- * <BasicInfo datas={datas} labelWidth={80} />
- * ```
  */
 export default function BasicInfo({
   datas,
-  className,
-  style,
   labelWidth,
   labelEllipsis = true,
-  threeColumns = false,
   labelAlign = 'start',
+  threeColumns = false,
+  className,
+  style,
 }: BasicInfoProps) {
   return (
     <div

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

@@ -5,16 +5,18 @@ import { type BasicInfoData, type BasicInfoLink } from '../BasicInfo/types';
 import './index.less';
 export type { BasicInfoData, BasicInfoLink };
 
+export type BasicTableInfoProps = Omit<BasicInfoProps, 'labelAlign' | 'threeColumns'>;
+
 /**
  * 表格基础信息展示组件，用于展示基础信息，一行四列，支持数据格式化
  */
 export default function BasicTableInfo({
   datas,
-  className,
-  style,
   labelWidth,
   labelEllipsis,
-}: BasicInfoProps) {
+  className,
+  style,
+}: BasicTableInfoProps) {
   const remainder = datas.length % 4;
   const array = [];
   if (remainder > 0) {

react-ui/src/pages/Experiment/components/LogGroup/index.tsx

@@ -211,6 +211,7 @@ function LogGroup({
       element.scrollTo(optons);
     }
   };
+
   const showLog = (log_type === 'resource' && !collapse) || log_type === 'normal';
   const logText = log_content + logList.map((v) => v.log_content).join('');
   const showMoreBtn =

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

@@ -89,6 +89,8 @@ export const Primary: Story = {
     ],
     labelWidth: 80,
     labelAlign: 'justify',
+    threeColumns: false,
+    labelEllipsis: true,
   },
 };
 

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

@@ -14,7 +14,49 @@ const meta = {
   tags: ['autodocs'],
   // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
-    // backgroundColor: { control: 'color' },
+    datas: {
+      description: '基础信息',
+      table: {
+        type: { summary: 'BasicInfoData[]' },
+      },
+      type: {
+        required: true,
+        name: 'array',
+        value: {
+          name: 'object',
+          value: {},
+        },
+      },
+    },
+    labelWidth: {
+      description: '标题宽度',
+      type: {
+        required: true,
+        name: 'number',
+      },
+    },
+    labelEllipsis: {
+      description: '标题是否显示省略号',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+      control: 'boolean',
+    },
+    className: {
+      description: '自定义类名',
+      table: {
+        type: { summary: 'string' },
+      },
+      control: 'text',
+    },
+    style: {
+      description: '自定义样式',
+      table: {
+        type: { summary: 'ReactCSSProperties' },
+      },
+      control: 'object',
+    },
   },
   // 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() },
@@ -26,7 +68,8 @@ type Story = StoryObj<typeof meta>;
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
   args: {
-    ...BasicInfoStories.Primary.args,
+    datas: BasicInfoStories.Primary.args.datas,
     labelWidth: 100,
+    labelEllipsis: true,
   },
 };

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

@@ -8,7 +8,45 @@ import { Meta } from '@storybook/blocks';
 
 ### 自定义主题
 
-`src/styles/theme.less` 定义了 UI 主题颜色变量、Less 函数、Less 混合。在开发过程中使用这个文件的定义的变量、函数以及混合，通过 UmiJS 的配置，我们在 Less 文件不需要收到导入这个文件。
+`src/styles/theme.less` 定义了 UI 主题颜色变量、Less 函数、Less 混合。
+
+在开发过程中使用这个文件的定义的变量、函数以及混合。通过 UmiJS 的配置，我们在 Less 文件不需要收到导入这个文件。
+
+```css
+// 颜色
+@primary-color: #1664ff; // 主色调
+@primary-color-secondary: #4e89ff;
+@primary-color-hover: #69b1ff;
+@sider-background-color: #f2f5f7; // 侧边栏背景颜色
+@background-color: #f9fafb; // 页面背景颜色
+@text-color: #1d1d20;
+@text-color-secondary: #575757;
+@text-color-tertiary: #8a8a8a;
+@text-placeholder-color: rgba(0, 0, 0, 0.25);
+@text-disabled-color: rgba(0, 0, 0, 0.25);
+@success-color: #6ac21d;
+@error-color: #c73131;
+@warning-color: #f98e1b;
+@abort-color: #8a8a8a;
+@pending-color: #ecb934;
+@underline-color: #5d93ff;
+@border-color: #eaeaea;
+@link-hover-color: #69b1ff;
+@heading-color: rgba(0, 0, 0, 0.85);
+@input-icon-hover-color: rgba(0, 0, 0, 0.85);
+
+// 字体大小
+@font-size-title: 18px;
+@font-size-content: 16px;
+@font-size: 15px;
+@font-size-input: 14px;
+@font-size-input-lg: @font-size-content;
+
+// padding
+@content-padding: 25px;
+```
+
+
 
 颜色变量还可以在 `js/ts/jsx/tsx` 里使用
 
@@ -193,7 +231,7 @@ function Component() {
 }
 ```
 
-既减少了类名的嵌套，又减少了HTML的嵌套，使代码逻辑更加清晰，易于理解与维护
+既减少了类名的嵌套，又减少了 HTML 的嵌套，使代码逻辑更加清晰，易于理解与维护，同时实现模块化和组件化