ci4sManagement-cloud/react-ui/src/stories/ParameterSelect.stories.tsx

import ParameterSelect, { type ParameterSelectObject } from '@/components/ParameterSelect';
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/preview-api';
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { Button, Col, Form, Row } from 'antd';
import { http, HttpResponse } from 'msw';
import { computeResourceData, datasetListData, modelListData, serviceListData } from './mockData';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: 'Components/ParameterSelect 参数选择器',
  component: ParameterSelect,
  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/newmodel/queryModels', () => {
          return HttpResponse.json(modelListData);
        }),
        http.get('/api/mmp/service', () => {
          return HttpResponse.json(serviceListData);
        }),
        http.get('/api/mmp/computingResource', () => {
          return HttpResponse.json(computeResourceData);
        }),
      ],
    },
  },
  // 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
  // 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: { onChange: fn() },
} satisfies Meta<typeof ParameterSelect>;

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: {
    placeholder: '请选择',
    dataType: 'dataset',
    style: { width: 400 },
    size: 'large',
  },
  render: function Render(args) {
    const [{ value }, updateArgs] = useArgs();
    function handleChange(value?: string | ParameterSelectObject) {
      updateArgs({ value: value });
      args.onChange?.(value);
    }

    return <ParameterSelect {...args} value={value} onChange={handleChange}></ParameterSelect>;
  },
};

/** 值可以是一个对象，典型的是流水线节点对象 **PipelineNodeModelParameter** */
export const Object: Story = {
  args: {
    placeholder: '请选择',
    dataType: 'dataset',
    style: { width: 400 },
    size: 'large',
    value: {
      value: undefined,
    },
  },
  render: function Render(args) {
    const [{ value }, updateArgs] = useArgs();
    function handleChange(value?: string | ParameterSelectObject) {
      updateArgs({ value: value });
      args.onChange?.(value);
    }

    return <ParameterSelect {...args} value={value} onChange={handleChange}></ParameterSelect>;
  },
};

export const InForm: Story = {
  args: {
    dataType: 'dataset',
  },
  render: ({ onChange }) => {
    return (
      <Form
        name="parameter-select-form"
        labelCol={{ flex: '80px' }}
        labelAlign="left"
        size="large"
        onFinish={action('onFinish')}
        autoComplete="off"
        initialValues={{
          dataset: {
            type: 'select',
            item_type: 'dataset',
            placeholder: '请选择数据集',
            label: '数据集',
          },
          model: {
            type: 'select',
            item_type: 'model',
            placeholder: '请选择模型',
            label: '模型',
          },
          service: {
            type: 'select',
            item_type: 'service',
            placeholder: '请选择服务',
            label: '服务',
          },
          resource: {
            type: 'select',
            item_type: 'resource',
            placeholder: '请选择计算资源',
            label: '计算资源',
          },
          test: '1234',
        }}
      >
        <Row gutter={8}>
          <Col span={10}>
            <Form.Item label="数据集" name="dataset">
              <ParameterSelect dataType="dataset" placeholder="请选择数据集" onChange={onChange} />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={8}>
          <Col span={10}>
            <Form.Item label="模型" name="model">
              <ParameterSelect dataType="model" placeholder="请选择模型" onChange={onChange} />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={8}>
          <Col span={10}>
            <Form.Item label="服务" name="service">
              <ParameterSelect dataType="service" placeholder="请选择服务" onChange={onChange} />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={8}>
          <Col span={10}>
            <Form.Item label="计算资源" name="resource">
              <ParameterSelect
                dataType="resource"
                placeholder="请选择计算资源"
                onChange={onChange}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={8}>
          <Button htmlType="submit" type="primary">
            提交
          </Button>
        </Row>
      </Form>
    );
  },
};