ci4sManagement-cloud/react-ui/src/stories/KFModal.mdx

import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
import * as KFModalStories from "./KFModal.stories"
 
<Meta of={KFModalStories} />

<Title />
<Subtitle />
<Description />

## Usage

为了风格统一，应用中的其它 Modal 应该使用 **KFModal** 进行封装，例如 **CodeSelectorModal**

```ts
export interface CodeSelectorModalProps extends Omit<ModalProps, 'onOk'> {
  onOk?: (params: CodeConfigData | undefined) => void;
}

function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
  return (
    <KFModal
      {...rest}
      title="选择代码配置"
      image={require('@/assets/img/modal-code-config.png')}
      width={920}
      footer={null}
      destroyOnClose
    >
      <div>children</div>
    </KFModal>
  );
}

export default CodeSelectorModal;

```

## Primary

<Primary />

<Controls />

<Stories />