feat: storybook 添加主题

react-ui/.storybook/blocks/StoryName.tsx

@@ -0,0 +1,19 @@
+import { Of, useOf } from '@storybook/blocks';
+
+/**
+ * A block that displays the story name or title from the of prop
+ * - if a story reference is passed, it renders the story name
+ * - if a meta reference is passed, it renders the stories' title
+ * - if nothing is passed, it defaults to the primary story
+ */
+export const StoryName = ({ of }: { of?: Of }) => {
+  const resolvedOf = useOf(of || 'story', ['story', 'meta']);
+  switch (resolvedOf.type) {
+    case 'story': {
+      return <h3 className="css-wzniqs">{resolvedOf.story.name}</h3>;
+    }
+    case 'meta': {
+      return <h3 className="css-wzniqs">{resolvedOf.preparedMeta.title}</h3>;
+    }
+  }
+};

react-ui/.storybook/main.ts

@@ -16,7 +16,7 @@ const config: StorybookConfig = {
     name: '@storybook/react-webpack5',
     options: {},
   },
-  staticDirs: ['../static'],
+  staticDirs: ['../public'],
   docs: {
     defaultName: 'Documentation',
   },

react-ui/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({
+  theme: theme,
+});

react-ui/.storybook/theme.ts

@@ -0,0 +1,7 @@
+import { create } from '@storybook/theming';
+export default create({
+  base: 'light',
+  brandTitle: '组件库文档',
+  brandUrl: 'https://storybook.js.org/docs',
+  brandTarget: '_blank',
+});

react-ui/package.json

@@ -96,9 +96,11 @@
     "@storybook/addon-webpack5-compiler-babel": "~3.0.5",
     "@storybook/addon-webpack5-compiler-swc": "~2.0.0",
     "@storybook/blocks": "~8.5.3",
+    "@storybook/manager-api": "~8.6.0",
     "@storybook/react": "~8.5.3",
     "@storybook/react-webpack5": "~8.5.3",
     "@storybook/test": "~8.5.3",
+    "@storybook/theming": "~8.6.0",
     "@testing-library/react": "^14.0.0",
     "@types/antd": "^1.0.0",
     "@types/express": "^4.17.14",
@@ -166,7 +168,7 @@
   },
   "msw": {
     "workerDirectory": [
-      "static"
+      "public"
     ]
   }
 }

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

@@ -24,6 +24,12 @@ export type BasicInfoProps = {
 
 /**
  * 基础信息展示组件，用于展示基础信息，支持一行两列或一行三列，支持数据格式化
+ *
+ * ### usage
+ * ```tsx
+ * import { BasicInfo } from '@/components/BasicInfo';
+ * <BasicInfo datas={datas} labelWidth={80} />
+ * ```
  */
 export default function BasicInfo({
   datas,

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

@@ -6,7 +6,7 @@ import { Button } from 'antd';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Components/BasicInfo',
+  title: 'Components/BasicInfo 基本信息',
   component: BasicInfo,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

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

@@ -4,7 +4,7 @@ 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/BasicTableInfo',
+  title: 'Components/BasicTableInfo 表格基本信息',
   component: BasicTableInfo,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

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

@@ -8,7 +8,7 @@ import { codeListData } from './mockData';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Components/CodeSelect',
+  title: 'Components/CodeSelect 代码配置选择器',
   component: CodeSelect,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

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

@@ -1,6 +1,5 @@
 import CodeSelectorModal from '@/components/CodeSelectorModal';
 import { openAntdModal } from '@/utils/modal';
-import { useArgs } from '@storybook/preview-api';
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { Button } from 'antd';
@@ -9,7 +8,7 @@ import { codeListData } from './mockData';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Components/CodeSelectorModal',
+  title: 'Components/CodeSelectorModal 代码选择对话框',
   component: CodeSelectorModal,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
@@ -39,39 +38,8 @@ 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: {
-    open: false,
-  },
-  render: function Render({ onOk, onCancel, ...args }) {
-    const [{ open }, updateArgs] = useArgs();
-    function onClick() {
-      updateArgs({ open: true });
-    }
-    function handleOk(res: any) {
-      updateArgs({ open: false });
-      onOk?.(res);
-    }
-
-    function handleCancel() {
-      updateArgs({ open: false });
-      onCancel?.();
-    }
 
-    return (
-      <>
-        <Button type="primary" onClick={onClick}>
-          选择代码配置
-        </Button>
-        <CodeSelectorModal {...args} open={open} onOk={handleOk} onCancel={handleCancel} />
-      </>
-    );
-  },
-};
-
-/** 通过 `openAntdModal` 函数打开 */
-export const OpenByFunction: Story = {
-  name: '通过函数的方式打开',
+export const Primary: Story = {
   render: function Render(args) {
     const handleClick = () => {
       const { close } = openAntdModal(CodeSelectorModal, {
@@ -84,7 +52,7 @@ export const OpenByFunction: Story = {
     };
     return (
       <Button type="primary" onClick={handleClick}>
-        以函数的方式打开
+        选择代码配置
       </Button>
     );
   },

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

@@ -4,7 +4,7 @@ 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',
+  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

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

@@ -4,7 +4,7 @@ import { Form, Input, Select, Typography } from 'antd';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Components/FormInfo',
+  title: 'Components/FormInfo 表单信息',
   component: FormInfo,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

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',
+  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

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',
+  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

react-ui/src/stories/InfoGroup.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/InfoGroup',
+  title: 'Components/InfoGroup 信息分组',
   component: InfoGroup,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

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

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 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/KFEmpty',
+  title: 'Components/KFEmpty 空状态',
   component: KFEmpty,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

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

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from 'antd';
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Components/KFIcon',
+  title: 'Components/KFIcon 图标',
   component: KFIcon,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

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

@@ -8,7 +8,7 @@ import { Button } from 'antd';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Components/KFModal',
+  title: 'Components/KFModal 对话框',
   component: KFModal,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

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

@@ -5,7 +5,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/KFRadio',
+  title: 'Components/KFRadio 单选框',
   component: KFRadio,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

react-ui/src/stories/KFSpin.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/KFSpin',
+  title: 'Components/KFSpin 加载器',
   component: KFSpin,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

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

@@ -6,7 +6,7 @@ import { Button } from 'antd';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Components/MenuIconSelector',
+  title: 'Components/MenuIconSelector 菜单图标选择器',
   component: MenuIconSelector,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

react-ui/src/stories/PageTitle.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/PageTitle',
+  title: 'Components/PageTitle 页面标题',
   component: PageTitle,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

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

@@ -5,7 +5,7 @@ import { useState } from 'react';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Components/ParameterInput',
+  title: 'Components/ParameterInput 参数输入框',
   component: ParameterInput,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

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

@@ -21,7 +21,7 @@ import {
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Components/ResourceSelect',
+  title: 'Components/ResourceSelect 资源选择器',
   component: ResourceSelect,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

react-ui/src/stories/ResourceSelectorModal.mdx

@@ -1,13 +1,22 @@
-import { Meta, Canvas } from '@storybook/blocks';
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
 import * as ResourceSelectorModalStories from "./ResourceSelectorModal.stories"
+import { StoryName } from "../../.storybook/blocks/StoryName"
+
+<Meta of={ResourceSelectorModalStories} />
+
+<Title />
+<Subtitle />
+<Description />
  
-<Meta of={ResourceSelectorModalStories} name="Usage" />
- 
-# Usage
+### Usage
  
 推荐通过 `openAntdModal` 函数打开 `ResourceSelectorModal`，打开 -> 处理 -> 关闭，整套代码在同一个地方
 
 ```ts
+import { openAntdModal } from '@/utils/modal';
+import ResourceSelectorModal } from '@/components/ResourceSelectorModal';
+
+// 打开资源选择对话框
 const handleClick = () => {
   const { close } = openAntdModal(ResourceSelectorModal, {
   type: ResourceSelectorType.Dataset,
@@ -18,6 +27,11 @@ const handleClick = () => {
 });
 ```
 
- 
-<Canvas of={ResourceSelectorModalStories.OpenByFunction} />
+### Primary
+
+<Primary />
+
+<Controls />
+
+<Stories of={ResourceSelectorModalStories} />
  

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

@@ -1,6 +1,5 @@
 import ResourceSelectorModal, { ResourceSelectorType } from '@/components/ResourceSelectorModal';
 import { openAntdModal } from '@/utils/modal';
-import { useArgs } from '@storybook/preview-api';
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { Button } from 'antd';
@@ -18,14 +17,42 @@ import {
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Components/ResourceSelectorModal',
+  title: 'Components/ResourceSelectorModal 资源选择对话框',
   component: ResourceSelectorModal,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
+    msw: {
+      handlers: [
+        http.get('/api/mmp/newdataset/queryDatasets', () => {
+          return HttpResponse.json(datasetListData);
+        }),
+        http.get('/api/mmp/newdataset/getVersionList', () => {
+          return HttpResponse.json(datasetVersionData);
+        }),
+        http.get('/api/mmp/newdataset/getDatasetDetail', () => {
+          return HttpResponse.json(datasetDetailData);
+        }),
+        http.get('/api/mmp/newmodel/queryModels', () => {
+          return HttpResponse.json(modelListData);
+        }),
+        http.get('/api/mmp/newmodel/getVersionList', () => {
+          return HttpResponse.json(modelVersionData);
+        }),
+        http.get('/api/mmp/newmodel/getModelDetail', () => {
+          return HttpResponse.json(modelDetailData);
+        }),
+        http.get('/api/mmp/image', () => {
+          return HttpResponse.json(mirrorListData);
+        }),
+        http.get('/api/mmp/imageVersion', () => {
+          return HttpResponse.json(mirrorVerionData);
+        }),
+      ],
+    },
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
+  tags: ['!autodocs'],
   // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
     // backgroundColor: { control: 'color' },
@@ -45,158 +72,58 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+/** 选择数据集 */
 export const Dataset: Story = {
   args: {
     type: ResourceSelectorType.Dataset,
-    open: false,
   },
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('/api/mmp/newdataset/queryDatasets', () => {
-          return HttpResponse.json(datasetListData);
-        }),
-        http.get('/api/mmp/newdataset/getVersionList', () => {
-          return HttpResponse.json(datasetVersionData);
-        }),
-        http.get('/api/mmp/newdataset/getDatasetDetail', () => {
-          return HttpResponse.json(datasetDetailData);
-        }),
-      ],
-    },
-  },
-  render: function Render({ onOk, onCancel, ...args }) {
-    const [{ open }, updateArgs] = useArgs();
-    function onClick() {
-      updateArgs({ open: true });
-    }
-    function handleOk(res: any) {
-      updateArgs({ open: false });
-      onOk?.(res);
-    }
-
-    function handleCancel() {
-      updateArgs({ open: false });
-      onCancel?.();
-    }
-
+  render: function Render(args) {
+    const handleClick = () => {
+      const { close } = openAntdModal(ResourceSelectorModal, {
+        type: args.type,
+        onOk: (res) => {
+          const { onOk } = args;
+          onOk?.(res);
+          close();
+        },
+      });
+    };
     return (
-      <>
-        <Button type="primary" onClick={onClick}>
-          选择数据集
-        </Button>
-        <ResourceSelectorModal {...args} open={open} onOk={handleOk} onCancel={handleCancel} />
-      </>
+      <Button type="primary" onClick={handleClick}>
+        选择数据集
+      </Button>
     );
   },
 };
 
+/** 选择模型 */
 export const Model: Story = {
   args: {
     type: ResourceSelectorType.Model,
-    open: false,
-  },
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('/api/mmp/newmodel/queryModels', () => {
-          return HttpResponse.json(modelListData);
-        }),
-        http.get('/api/mmp/newmodel/getVersionList', () => {
-          return HttpResponse.json(modelVersionData);
-        }),
-        http.get('/api/mmp/newmodel/getModelDetail', () => {
-          return HttpResponse.json(modelDetailData);
-        }),
-      ],
-    },
   },
-  render: function Render({ onOk, onCancel, ...args }) {
-    const [{ open }, updateArgs] = useArgs();
-    function onClick() {
-      updateArgs({ open: true });
-    }
-    function handleOk(res: any) {
-      updateArgs({ open: false });
-      onOk?.(res);
-    }
-
-    function handleCancel() {
-      updateArgs({ open: false });
-      onCancel?.();
-    }
-
+  render: function Render(args) {
+    const handleClick = () => {
+      const { close } = openAntdModal(ResourceSelectorModal, {
+        type: args.type,
+        onOk: (res) => {
+          const { onOk } = args;
+          onOk?.(res);
+          close();
+        },
+      });
+    };
     return (
-      <>
-        <Button type="primary" onClick={onClick}>
-          选择模型
-        </Button>
-        <ResourceSelectorModal {...args} open={open} onOk={handleOk} onCancel={handleCancel} />
-      </>
+      <Button type="primary" onClick={handleClick}>
+        选择模型
+      </Button>
     );
   },
 };
 
+/** 选择镜像 */
 export const Mirror: Story = {
   args: {
     type: ResourceSelectorType.Mirror,
-    open: false,
-  },
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('/api/mmp/image', () => {
-          return HttpResponse.json(mirrorListData);
-        }),
-        http.get('/api/mmp/imageVersion', () => {
-          return HttpResponse.json(mirrorVerionData);
-        }),
-      ],
-    },
-  },
-  render: function Render({ onOk, onCancel, ...args }) {
-    const [{ open }, updateArgs] = useArgs();
-    function onClick() {
-      updateArgs({ open: true });
-    }
-    function handleOk(res: any) {
-      updateArgs({ open: false });
-      onOk?.(res);
-    }
-
-    function handleCancel() {
-      updateArgs({ open: false });
-      onCancel?.();
-    }
-
-    return (
-      <>
-        <Button type="primary" onClick={onClick}>
-          选择镜像
-        </Button>
-        <ResourceSelectorModal {...args} open={open} onOk={handleOk} onCancel={handleCancel} />
-      </>
-    );
-  },
-};
-
-/** 通过 `openAntdModal` 函数打开 */
-export const OpenByFunction: Story = {
-  name: '通过函数的方式打开',
-  args: {
-    type: ResourceSelectorType.Mirror,
-  },
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('/api/mmp/image', () => {
-          return HttpResponse.json(mirrorListData);
-        }),
-        http.get('/api/mmp/imageVersion', () => {
-          return HttpResponse.json(mirrorVerionData);
-        }),
-      ],
-    },
   },
   render: function Render(args) {
     const handleClick = () => {
@@ -211,7 +138,7 @@ export const OpenByFunction: Story = {
     };
     return (
       <Button type="primary" onClick={handleClick}>
-        以函数的方式打开
+        选择镜像
       </Button>
     );
   },

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

@@ -4,7 +4,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/SubAreaTitle',
+  title: 'Components/SubAreaTitle 子区域标题',
   component: SubAreaTitle,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout