diff --git a/react-ui/src/components/BasicInfo/index.tsx b/react-ui/src/components/BasicInfo/index.tsx
index 68622d7c..a918b8ee 100644
--- a/react-ui/src/components/BasicInfo/index.tsx
+++ b/react-ui/src/components/BasicInfo/index.tsx
@@ -24,21 +24,15 @@ export type BasicInfoProps = {
/**
* 基础信息展示组件,用于展示基础信息,支持一行两列或一行三列,支持数据格式化
- *
- * ### usage
- * ```tsx
- * import { BasicInfo } from '@/components/BasicInfo';
- *
- * ```
*/
export default function BasicInfo({
datas,
- className,
- style,
labelWidth,
labelEllipsis = true,
- threeColumns = false,
labelAlign = 'start',
+ threeColumns = false,
+ className,
+ style,
}: BasicInfoProps) {
return (
;
+
/**
* 表格基础信息展示组件,用于展示基础信息,一行四列,支持数据格式化
*/
export default function BasicTableInfo({
datas,
- className,
- style,
labelWidth,
labelEllipsis,
-}: BasicInfoProps) {
+ className,
+ style,
+}: BasicTableInfoProps) {
const remainder = datas.length % 4;
const array = [];
if (remainder > 0) {
diff --git a/react-ui/src/pages/Experiment/components/LogGroup/index.tsx b/react-ui/src/pages/Experiment/components/LogGroup/index.tsx
index 9625118a..655e0b92 100644
--- a/react-ui/src/pages/Experiment/components/LogGroup/index.tsx
+++ b/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 =
diff --git a/react-ui/src/stories/BasicInfo.stories.tsx b/react-ui/src/stories/BasicInfo.stories.tsx
index eddbec12..f669104e 100644
--- a/react-ui/src/stories/BasicInfo.stories.tsx
+++ b/react-ui/src/stories/BasicInfo.stories.tsx
@@ -89,6 +89,8 @@ export const Primary: Story = {
],
labelWidth: 80,
labelAlign: 'justify',
+ threeColumns: false,
+ labelEllipsis: true,
},
};
diff --git a/react-ui/src/stories/BasicTableInfo.stories.tsx b/react-ui/src/stories/BasicTableInfo.stories.tsx
index cdde73fc..3d261d03 100644
--- a/react-ui/src/stories/BasicTableInfo.stories.tsx
+++ b/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;
// 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,
},
};
diff --git a/react-ui/src/stories/docs/Less.mdx b/react-ui/src/stories/docs/Less.mdx
index 9098d96d..2caed9ba 100644
--- a/react-ui/src/stories/docs/Less.mdx
+++ b/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 的嵌套,使代码逻辑更加清晰,易于理解与维护,同时实现模块化和组件化