feat: 以函数的方式打开 modal

react-ui/.storybook/main.ts

@@ -21,7 +21,7 @@ const config: StorybookConfig = {
       config.resolve.alias = {
         ...config.resolve.alias,
         '@': path.resolve(__dirname, '../src'),
-        '@umijs/max$': path.resolve(__dirname, './mock/umijs.tsx'),
+        '@umijs/max$': path.resolve(__dirname, './mock/umijs.mock.tsx'),
       };
     }
     if (config.module && config.module.rules) {

react-ui/.storybook/mock/umijs.tsx → react-ui/.storybook/mock/umijs.mock.tsx

@@ -4,9 +4,6 @@ export const Link = ({ to, children, ...props }: any) => (
   </a>
 );
 
-export const request = () => {
-  return Promise.resolve({
-    success: true,
-    data: { message: 'Mocked response' },
-  });
+export const request = (url: string, options: any) => {
+  return fetch(url, options).then((res) => res.json());
 };

react-ui/.storybook/preview.tsx

@@ -20,6 +20,7 @@ const preview: Preview = {
       <ConfigProvider
         locale={zhCN}
         theme={{
+          cssVar: true,
           token: {
             colorPrimary: themes['primaryColor'],
             colorSuccess: themes['successColor'],

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

@@ -13,9 +13,8 @@ import './index.less';
 
 export { requiredValidator, type ParameterInputObject } from '../ParameterInput';
 
-type CodeSelectProps = ParameterInputProps;
-
-function CodeSelect({ value, onChange, disabled, ...rest }: CodeSelectProps) {
+/** 代码配置选择表单组件 */
+function CodeSelect({ value, onChange, disabled, ...rest }: ParameterInputProps) {
   const selectResource = () => {
     const { close } = openAntdModal(CodeSelectorModal, {
       onOk: (res) => {

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

@@ -4,11 +4,11 @@
  * @Description: 选择代码
  */
 
+import KFIcon from '@/components/KFIcon';
 import KFModal from '@/components/KFModal';
 import { type CodeConfigData } from '@/pages/CodeConfig/List';
 import { getCodeConfigListReq } from '@/services/codeConfig';
 import { to } from '@/utils/promise';
-import { Icon } from '@umijs/max';
 import type { ModalProps, PaginationProps } from 'antd';
 import { Empty, Input, Pagination } from 'antd';
 import { useEffect, useState } from 'react';
@@ -21,6 +21,7 @@ export interface CodeSelectorModalProps extends Omit<ModalProps, 'onOk'> {
   onOk?: (params: CodeConfigData | undefined) => void;
 }
 
+/** 代码配置选择弹窗 */
 function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
   const [dataList, setDataList] = useState<CodeConfigData[]>([]);
   const [total, setTotal] = useState(0);
@@ -90,8 +91,11 @@ function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
           suffix={null}
           value={inputText}
           prefix={
-            <Icon icon="local:magnifying-glass" style={{ marginLeft: '10px', marginTop: '2px' }} />
+            <KFIcon type="icon-sousuo" color="rgba(22,100,255,0.4" style={{ marginLeft: '10px' }} />
           }
+          // prefix={
+          //   <Icon icon="local:magnifying-glass" style={{ marginLeft: '10px', marginTop: '2px' }} />
+          // }
         />
         {dataList?.length !== 0 ? (
           <>

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

@@ -1,7 +1,7 @@
 /*
  * @Author: 赵伟
  * @Date: 2024-04-16 08:42:57
- * @Description: 参数输入组件，支持手动输入，选择全局参数，选择数据集/模型/镜像
+ * @Description: 参数输入表单组件，支持手动输入，也支持选择全局参数
  */
 
 import { CommonTabKeys } from '@/enums';

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

@@ -4,11 +4,11 @@
  * @Description: 选择数据集、模型、镜像
  */
 
+import KFIcon from '@/components/KFIcon';
 import KFModal from '@/components/KFModal';
 import { CommonTabKeys } from '@/enums';
 import { ResourceFileData } from '@/pages/Dataset/config';
 import { to } from '@/utils/promise';
-import { Icon } from '@umijs/max';
 import type { GetRef, ModalProps, TreeDataNode, TreeProps } from 'antd';
 import { Input, Tabs, Tree } from 'antd';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
@@ -267,7 +267,14 @@ function ResourceSelectorModal({
               variant="borderless"
               value={searchText}
               onChange={(e) => setSearchText(e.target.value)}
-              prefix={<Icon icon="local:magnifying-glass" style={{ height: '15px' }} />}
+              prefix={
+                <KFIcon
+                  type="icon-sousuo"
+                  color="rgba(22,100,255,0.4)"
+                  style={{ height: '15px' }}
+                />
+              }
+              // prefix={<Icon icon="local:magnifying-glass" style={{ height: '15px' }} />}
             />
             <Tree
               ref={treeRef}

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

@@ -0,0 +1,28 @@
+import CodeSelect from '@/components/CodeSelect';
+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/CodeSelect',
+  component: CodeSelect,
+  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 CodeSelect>;
+
+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: {},
+};

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

@@ -0,0 +1,81 @@
+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';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  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
+    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' },
+    title: {
+      description: '标题',
+    },
+    open: {
+      description: '对话框是否可见',
+    },
+  },
+  // 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: { onCancel: fn(), onOk: fn() },
+} satisfies Meta<typeof CodeSelectorModal>;
+
+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(args) {
+    const [{ open }, updateArgs] = useArgs();
+    function onClick() {
+      updateArgs({ open: true });
+    }
+    function onOk() {
+      updateArgs({ open: false });
+    }
+
+    function onCancel() {
+      updateArgs({ open: false });
+    }
+
+    return (
+      <>
+        <Button type="primary" onClick={onClick}>
+          选择代码配置
+        </Button>
+        <CodeSelectorModal {...args} open={open} onOk={onOk} onCancel={onCancel} />
+      </>
+    );
+  },
+};
+
+const OpenModalByFunction = () => {
+  const handleOnChange = () => {
+    const { close } = openAntdModal(CodeSelectorModal, {
+      onOk: () => {
+        close();
+      },
+    });
+  };
+  return (
+    <Button type="primary" onClick={handleOnChange}>
+      以函数的方式打开
+    </Button>
+  );
+};
+
+export const OpenInFunction: Story = {
+  render: () => <OpenModalByFunction />,
+};

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

@@ -1,5 +1,6 @@
 import CreateExperiment from '@/assets/img/create-experiment.png';
 import KFModal from '@/components/KFModal';
+import { openAntdModal } from '@/utils/modal';
 import { useArgs } from '@storybook/preview-api';
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
@@ -63,3 +64,25 @@ export const Primary: Story = {
     );
   },
 };
+
+const OpenModalByFunction = () => {
+  const handleOnChange = () => {
+    const { close } = openAntdModal(KFModal, {
+      title: '创建实验',
+      image: CreateExperiment,
+      children: '这是一个模态框',
+      onOk: () => {
+        close();
+      },
+    });
+  };
+  return (
+    <Button type="primary" onClick={handleOnChange}>
+      以函数的方式打开
+    </Button>
+  );
+};
+
+export const OpenInFunction: Story = {
+  render: () => <OpenModalByFunction />,
+};