diff --git a/react-ui/.storybook/blocks/StoryName.tsx b/react-ui/.storybook/blocks/StoryName.tsx new file mode 100644 index 00000000..074c73cb --- /dev/null +++ b/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

{resolvedOf.story.name}

; + } + case 'meta': { + return

{resolvedOf.preparedMeta.title}

; + } + } +}; diff --git a/react-ui/.storybook/main.ts b/react-ui/.storybook/main.ts index 54824837..820a0eeb 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: ['../static'], + staticDirs: ['../public'], docs: { defaultName: 'Documentation', }, diff --git a/react-ui/.storybook/manager.ts b/react-ui/.storybook/manager.ts new file mode 100644 index 00000000..baf80b25 --- /dev/null +++ b/react-ui/.storybook/manager.ts @@ -0,0 +1,6 @@ +import { addons } from '@storybook/manager-api'; +import theme from './theme'; + +addons.setConfig({ + theme: theme, +}); diff --git a/react-ui/.storybook/theme.ts b/react-ui/.storybook/theme.ts new file mode 100644 index 00000000..7b624111 --- /dev/null +++ b/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', +}); diff --git a/react-ui/package.json b/react-ui/package.json index 56a4b735..f2583d6b 100644 --- a/react-ui/package.json +++ b/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" ] } } diff --git a/react-ui/static/mockServiceWorker.js b/react-ui/public/mockServiceWorker.js similarity index 100% rename from react-ui/static/mockServiceWorker.js rename to react-ui/public/mockServiceWorker.js diff --git a/react-ui/src/components/BasicInfo/index.tsx b/react-ui/src/components/BasicInfo/index.tsx index 11eacfde..68622d7c 100644 --- a/react-ui/src/components/BasicInfo/index.tsx +++ b/react-ui/src/components/BasicInfo/index.tsx @@ -24,6 +24,12 @@ export type BasicInfoProps = { /** * 基础信息展示组件，用于展示基础信息，支持一行两列或一行三列，支持数据格式化 + * + * ### usage + * ```tsx + * import { BasicInfo } from '@/components/BasicInfo'; + * + * ``` */ export default function BasicInfo({ datas, diff --git a/react-ui/src/stories/BasicInfo.stories.tsx b/react-ui/src/stories/BasicInfo.stories.tsx index 80a0337c..eddbec12 100644 --- a/react-ui/src/stories/BasicInfo.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/BasicTableInfo.stories.tsx b/react-ui/src/stories/BasicTableInfo.stories.tsx index 82581f6a..cdde73fc 100644 --- a/react-ui/src/stories/BasicTableInfo.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/CodeSelect.stories.tsx b/react-ui/src/stories/CodeSelect.stories.tsx index b5520c96..08520603 100644 --- a/react-ui/src/stories/CodeSelect.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/CodeSelectorModal.stories.tsx b/react-ui/src/stories/CodeSelectorModal.stories.tsx index a042f238..9faae0ae 100644 --- a/react-ui/src/stories/CodeSelectorModal.stories.tsx +++ b/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; // 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 ( - <> - - - - ); - }, -}; - -/** 通过 `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 ( ); }, diff --git a/react-ui/src/stories/Config.stories.tsx b/react-ui/src/stories/Config.stories.tsx index 0287d718..5c2a42ce 100644 --- a/react-ui/src/stories/Config.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/FormInfo.stories.tsx b/react-ui/src/stories/FormInfo.stories.tsx index b822427f..8e2d89de 100644 --- a/react-ui/src/stories/FormInfo.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/FullScreenFrame.stories.tsx b/react-ui/src/stories/FullScreenFrame.stories.tsx index fa334ed1..74dae50a 100644 --- a/react-ui/src/stories/FullScreenFrame.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/IFramePage.stories.tsx b/react-ui/src/stories/IFramePage.stories.tsx index 3d1714e8..d5c6725b 100644 --- a/react-ui/src/stories/IFramePage.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/InfoGroup.stories.tsx b/react-ui/src/stories/InfoGroup.stories.tsx index f3a6def8..3fe86b80 100644 --- a/react-ui/src/stories/InfoGroup.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/KFEmpty.stories.tsx b/react-ui/src/stories/KFEmpty.stories.tsx index fef1d5bf..369695be 100644 --- a/react-ui/src/stories/KFEmpty.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/KFIcon.stories.tsx b/react-ui/src/stories/KFIcon.stories.tsx index 44cb274e..7367b302 100644 --- a/react-ui/src/stories/KFIcon.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/KFModal.stories.tsx b/react-ui/src/stories/KFModal.stories.tsx index 024a2708..054634f2 100644 --- a/react-ui/src/stories/KFModal.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/KFRadio.stories.tsx b/react-ui/src/stories/KFRadio.stories.tsx index c48c16e9..14bfd07c 100644 --- a/react-ui/src/stories/KFRadio.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/KFSpin.stories.tsx b/react-ui/src/stories/KFSpin.stories.tsx index 7f3185d2..75f9a872 100644 --- a/react-ui/src/stories/KFSpin.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/MenuIconSelector.stories.tsx b/react-ui/src/stories/MenuIconSelector.stories.tsx index f02fb77c..d89e7a6d 100644 --- a/react-ui/src/stories/MenuIconSelector.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/PageTitle.stories.tsx b/react-ui/src/stories/PageTitle.stories.tsx index 216591b1..b8eb31c7 100644 --- a/react-ui/src/stories/PageTitle.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/ParameterInput.stories.tsx b/react-ui/src/stories/ParameterInput.stories.tsx index 9d9525e2..914b6196 100644 --- a/react-ui/src/stories/ParameterInput.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/ResourceSelect.stories.tsx b/react-ui/src/stories/ResourceSelect.stories.tsx index 28c314e3..93474d7f 100644 --- a/react-ui/src/stories/ResourceSelect.stories.tsx +++ b/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 diff --git a/react-ui/src/stories/ResourceSelectorModal.mdx b/react-ui/src/stories/ResourceSelectorModal.mdx index 28702123..f7e0c569 100644 --- a/react-ui/src/stories/ResourceSelectorModal.mdx +++ b/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" + + + + +<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} /> diff --git a/react-ui/src/stories/ResourceSelectorModal.stories.tsx b/react-ui/src/stories/ResourceSelectorModal.stories.tsx index b39cb45e..b43a8e5b 100644 --- a/react-ui/src/stories/ResourceSelectorModal.stories.tsx +++ b/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> ); }, diff --git a/react-ui/src/stories/SubAreaTitle.stories.tsx b/react-ui/src/stories/SubAreaTitle.stories.tsx index 9fad7d71..30506448 100644 --- a/react-ui/src/stories/SubAreaTitle.stories.tsx +++ b/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 diff --git a/react-ui/static/favicon.ico b/react-ui/static/favicon.ico deleted file mode 100644 index 408b8a23..00000000 Binary files a/react-ui/static/favicon.ico and /dev/null differ