bi-sdk-react 0.0.1

package/src/components/plugins/@antd/item-props/CapsuleProps.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { Form, Input, Radio, Table, Button, Space, RadioGroupProps } from "antd";
+import type { PropEditorProps } from "./types";
+import { DeleteOutlined } from "@ant-design/icons";
+
+export type CapsuleOption = { label: string; value: any };
+export type CapsuleModel = {
+  var?: string;
+  size?: RadioGroupProps['size'];
+  options: CapsuleOption[];
+};
+
+export const CapsuleProps: React.FC<PropEditorProps<CapsuleModel>> = ({
+  model,
+  onChange,
+}) => {
+  const trigger = (key: keyof CapsuleModel, value: any) =>
+    onChange && onChange({ ...model, [key]: value });
+  const setOption = (index: number, key: keyof CapsuleOption, value: any) => {
+    const options = [...(model.options || [])];
+    options[index] = { ...options[index], [key]: value };
+    trigger("options", options);
+  };
+  const removeOption = (index: number) => {
+    const options = [...(model.options || [])];
+    options.splice(index, 1);
+    trigger("options", options);
+  };
+  const addOption = () => {
+    trigger("options", [...(model.options || []), { label: "", value: "" }]);
+  };
+  const columns = [
+    {
+      title: "选项标签",
+      dataIndex: "label",
+      render: (_: any, r: CapsuleOption, i: number) => (
+        <Input
+          size="small"
+          value={r.label}
+          onChange={(e) => setOption(i, "label", e.target.value)}
+        />
+      ),
+    },
+    {
+      title: "选项值",
+      dataIndex: "value",
+      render: (_: any, r: CapsuleOption, i: number) => (
+        <Input
+          size="small"
+          value={r.value}
+          onChange={(e) => setOption(i, "value", e.target.value)}
+        />
+      ),
+    },
+    {
+      title: "操作",
+      render: (_: any, r: CapsuleOption, i: number) => (
+        <Space>
+          <Button danger size="small" onClick={() => removeOption(i)}>
+            <DeleteOutlined />
+          </Button>
+        </Space>
+      ),
+    },
+  ];
+  return (
+    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+      <Form.Item label="变量名">
+        <Input
+          size="small"
+          value={model.var}
+          onChange={(e) => trigger("var", e.target.value)}
+          placeholder="请输入变量名"
+        />
+      </Form.Item>
+      <Form.Item label="大小">
+        <Radio.Group
+          size="small"
+          value={model.size}
+          onChange={(e) => trigger("size", e.target.value)}
+        >
+          <Radio.Button value="small">小</Radio.Button>
+          <Radio.Button value="middle">中</Radio.Button>
+          <Radio.Button value="large">大</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item>
+        <Table
+          size="small"
+          dataSource={model.options}
+          columns={columns as any}
+          pagination={false}
+          rowKey={(_, i) => String(i)}
+          bordered
+        />
+        <Button size="small" block onClick={addOption}>
+          添加选项
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};

package/src/components/plugins/@antd/item-props/CardProps.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Form, Input, Radio, Switch, type CardProps as AntCardProps } from "antd";
+import type { PropEditorProps } from "./types";
+
+export type CardModel = {
+  title?: string;
+  shadow?: boolean;
+} & Pick<AntCardProps, "bordered" | "hoverable" | "size">;
+
+export const CardProps: React.FC<PropEditorProps<CardModel>> = ({
+  model,
+  onChange,
+}) => {
+  const trigger = (key: keyof CardModel, value: any) =>
+    onChange && onChange({ ...model, [key]: value });
+  return (
+    <Form labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
+      <Form.Item label="标题">
+        <Input
+          size="small"
+          value={model.title}
+          onChange={(e) => trigger("title", e.target.value)}
+        />
+      </Form.Item>
+      <Form.Item label="边框">
+        <Switch
+          size="small"
+          checked={!!model.bordered}
+          onChange={(v) => trigger("bordered", v)}
+        />
+      </Form.Item>
+      <Form.Item label="悬停效果">
+        <Switch
+          size="small"
+          checked={!!model.hoverable}
+          onChange={(v) => trigger("hoverable", v)}
+        />
+      </Form.Item>
+      <Form.Item label="阴影">
+        <Switch
+          size="small"
+          checked={!!model.shadow}
+          onChange={(v) => trigger("shadow", v)}
+        />
+      </Form.Item>
+      <Form.Item label="大小">
+        <Radio.Group
+          size="small"
+          value={model.size}
+          onChange={(e) => trigger("size", e.target.value)}
+        >
+          <Radio.Button value="default">默认</Radio.Button>
+          <Radio.Button value="small">小</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+    </Form>
+  );
+};

package/src/components/plugins/@antd/item-props/CheckboxProps.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Form, Input, Radio, InputNumber, Table, Button, Space, Switch } from 'antd'
+import type { PropEditorProps } from './types'
+import { DeleteOutlined } from '@ant-design/icons';
+
+export type CheckboxOption = { label: string; value: any }
+export type CheckboxModel = {
+  var?: string
+  layout?: 'horizontal' | 'vertical' | 'grid'
+  lineNumber?: number
+  options: CheckboxOption[]
+}
+
+export const CheckboxProps: React.FC<PropEditorProps<CheckboxModel>> = ({ model, onChange }) => {
+  const trigger = (key: keyof CheckboxModel, value: any) => onChange && onChange({ ...model, [key]: value })
+  const setOption = (index: number, key: keyof CheckboxOption, value: any) => {
+    const options = [...(model.options || [])]
+    options[index] = { ...options[index], [key]: value }
+    trigger('options', options)
+  }
+  const removeOption = (index: number) => {
+    const options = [...(model.options || [])]
+    options.splice(index, 1)
+    trigger('options', options)
+  }
+  const addOption = () => {
+    trigger('options', [...(model.options || []), { label: '', value: '' }])
+  }
+  const columns = [
+    {
+      title: '选项标签',
+      dataIndex: 'label',
+      render: (_: any, r: CheckboxOption, i: number) => <Input size="small" value={r.label} onChange={e => setOption(i, 'label', e.target.value)} />
+    },
+    {
+      title: '选项值',
+      dataIndex: 'value',
+      render: (_: any, r: CheckboxOption, i: number) => <Input size="small" value={r.value} onChange={e => setOption(i, 'value', e.target.value)} />
+    },
+    {
+      title: '操作',
+      render: (_: any, r: CheckboxOption, i: number) => (
+        <Space>
+          <Button danger size="small" onClick={() => removeOption(i)}>
+            <DeleteOutlined />
+          </Button>
+        </Space>
+      )
+    }
+  ]
+  return (
+    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+      <Form.Item label="变量名">
+        <Input size="small" value={model.var} onChange={e => trigger('var', e.target.value)} placeholder="请输入变量名" />
+      </Form.Item>
+      <Form.Item label="布局">
+        <Radio.Group size="small" value={model.layout} onChange={e => trigger('layout', e.target.value)}>
+          <Radio.Button value="horizontal">水平</Radio.Button>
+          <Radio.Button value="vertical">垂直</Radio.Button>
+          <Radio.Button value="grid">网格</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      {model.layout === 'grid' && (
+        <Form.Item label="网格行数">
+          <InputNumber size="small" value={model.lineNumber} onChange={v => trigger('lineNumber', v)} min={1} max={10} />
+        </Form.Item>
+      )}
+      <Form.Item>
+        <Table size="small" dataSource={model.options} columns={columns as any} pagination={false} rowKey={(_, i) => String(i)} bordered />
+        <Button size="small" block onClick={addOption}>添加选项</Button>
+      </Form.Item>
+    </Form>
+  )
+}
+

package/src/components/plugins/@antd/item-props/ColProps.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Form, InputNumber, Tooltip } from 'antd'
+import type { PropEditorProps } from './types'
+import { InfoCircleOutlined } from '@ant-design/icons';
+import styled from 'styled-components';
+
+const HelpIcon = styled(InfoCircleOutlined)`
+  vertical-align: middle;
+  margin-left: 2px;
+  color: var(--ant-color-text-description);
+`
+
+export type ColModel = { span?: number; xs?: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number }
+
+export const ColProps: React.FC<PropEditorProps<ColModel>> = ({ model, onChange }) => {
+  const trigger = (key: keyof ColModel, value: any) => onChange && onChange({ ...model, [key]: value })
+  return (
+    <Form labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
+      <Form.Item label="默认列数">
+        <InputNumber size="small" value={model.span} min={0} max={24} step={4} onChange={v => trigger('span', v || 0)} />
+      </Form.Item>
+      <Form.Item label={<>xs <Tooltip title="<576px 响应式栅格"><HelpIcon /></Tooltip></>}>
+        <InputNumber size="small" value={model.xs} min={0} max={24} step={4} onChange={v => trigger('xs', v || 0)} />
+      </Form.Item>
+      <Form.Item label={<>sm <Tooltip title="≥576px 响应式栅格"><HelpIcon /></Tooltip></>}>
+        <InputNumber size="small" value={model.sm} min={0} max={24} step={4} onChange={v => trigger('sm', v || 0)} />
+      </Form.Item>
+      <Form.Item label={<>md <Tooltip title="≥768px 响应式栅格"><HelpIcon /></Tooltip></>}>
+        <InputNumber size="small" value={model.md} min={0} max={24} step={4} onChange={v => trigger('md', v || 0)} />
+      </Form.Item>
+      <Form.Item label={<>lg <Tooltip title="≥992px 响应式栅格"><HelpIcon /></Tooltip></>}>
+        <InputNumber size="small" value={model.lg} min={0} max={24} step={4} onChange={v => trigger('lg', v || 0)} />
+      </Form.Item>
+      <Form.Item label={<>xl <Tooltip title="≥1200px 响应式栅格"><HelpIcon /></Tooltip></>}>
+        <InputNumber size="small" value={model.xl} min={0} max={24} step={4} onChange={v => trigger('xl', v || 0)} />
+      </Form.Item>
+      <Form.Item label={<>xxl <Tooltip title="≥1600px 响应式栅格"><HelpIcon /></Tooltip></>}>
+        <InputNumber size="small" value={model.xxl} min={0} max={24} step={4} onChange={v => trigger('xxl', v || 0)} />
+      </Form.Item>
+    </Form>
+  )
+}
+

package/src/components/plugins/@antd/item-props/DatePickerProps.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import {
+  Form,
+  Input,
+  Radio,
+  Switch,
+  type DatePickerProps as AntDatePickerProps,
+} from "antd";
+import type { PropEditorProps } from "./types";
+
+export type DatePickerModel = {
+  var?: string;
+  type?: "date" | "time" | "month" | "year" | "range";
+} & Pick<AntDatePickerProps, "size" | "allowClear" | "showTime">;
+
+export const DatePickerProps: React.FC<PropEditorProps<DatePickerModel>> = ({
+  model,
+  onChange,
+}) => {
+  const trigger = (key: keyof DatePickerModel, value: any) =>
+    onChange && onChange({ ...model, [key]: value });
+  return (
+    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+      <Form.Item label="变量名">
+        <Input
+          size="small"
+          value={model.var}
+          onChange={(e) => trigger("var", e.target.value)}
+          placeholder="请输入变量名"
+        />
+      </Form.Item>
+      <Form.Item label="类型">
+        <Radio.Group
+          size="small"
+          value={model.type}
+          onChange={(e) => trigger("type", e.target.value)}
+        >
+          <Radio.Button value="date">日期</Radio.Button>
+          <Radio.Button value="time">时间</Radio.Button>
+          <Radio.Button value="month">月份</Radio.Button>
+          <Radio.Button value="year">年份</Radio.Button>
+          <Radio.Button value="range">日期范围</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="大小">
+        <Radio.Group
+          size="small"
+          value={model.size}
+          onChange={(e) => trigger("size", e.target.value)}
+        >
+          <Radio.Button value="small">小</Radio.Button>
+          <Radio.Button value="middle">中</Radio.Button>
+          <Radio.Button value="large">大</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="清除图标">
+        <Switch
+          size="small"
+          checked={!!model.allowClear}
+          onChange={(v) => trigger("allowClear", v)}
+        />
+      </Form.Item>
+      <Form.Item label="显示时间">
+        <Switch
+          size="small"
+          checked={!!model.showTime}
+          onChange={(v) => trigger("showTime", v)}
+        />
+      </Form.Item>
+    </Form>
+  );
+};

package/src/components/plugins/@antd/item-props/EchartsProps.tsx

@@ -0,0 +1,35 @@
+import React, { useRef } from 'react'
+import { Form } from 'antd'
+import Editor from '@monaco-editor/react'
+import type { PropEditorProps } from './types'
+
+export type EchartsModel = { script: string }
+
+export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({ model, onChange }) => {
+  const ref = useRef<any>(null)
+  const setScript = (v?: string) => onChange && onChange({ ...model, script: v || '' })
+  const format = () => {
+    // Monaco-react does not expose format directly; relying on editor action
+    const editor = (ref.current as any)?.editor
+    editor?.getAction('editor.action.formatDocument')?.run()
+  }
+  return (
+    <Form labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
+      <Form.Item label={<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>Echarts 渲染脚本 <a onClick={format}>格式化</a></div>}>
+        <div style={{ border: '1px solid #d9d9d9', borderRadius: 4, textAlign: 'left' }}>
+          <div style={{ color: '#0000ff', fontSize: 14, padding: '0 50px' }}>function getOptions(data) {'{'} </div>
+          <Editor
+            onMount={(editor) => { (ref.current as any) = { editor } }}
+            height="400px"
+            defaultLanguage="javascript"
+            value={model.script}
+            onChange={(v) => setScript(v || '')}
+            options={{ minimap: { enabled: false }, scrollBeyondLastLine: false, tabSize: 2 }}
+          />
+          <div style={{ color: '#0000ff', fontSize: 14, padding: '0 50px' }}>{'}'}</div>
+        </div>
+      </Form.Item>
+    </Form>
+  )
+}
+

package/src/components/plugins/@antd/item-props/HtmlProps.tsx

@@ -0,0 +1,61 @@
+import React, { useRef } from "react";
+import { Form } from "antd";
+import Editor from "@monaco-editor/react";
+import type { PropEditorProps } from "./types";
+
+export type HtmlModel = { template: string };
+
+export const HtmlProps: React.FC<PropEditorProps<HtmlModel>> = ({
+  model,
+  onChange,
+}) => {
+  const ref = useRef<any>(null);
+  const setTemplate = (v?: string) =>
+    onChange && onChange({ ...model, template: v || "" });
+  const format = () => {
+    const editor = (ref.current as any)?.editor;
+    editor?.getAction("editor.action.formatDocument")?.run();
+  };
+  return (
+    <div>
+      <Form layout="vertical">
+        <Form.Item
+          label={
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+            >
+              模板 <a onClick={format}>格式化</a>
+            </div>
+          }
+        >
+          <div
+            style={{
+              border: "1px solid #d9d9d9",
+              borderRadius: 4,
+              textAlign: "left",
+            }}
+          >
+            <Editor
+              onMount={(editor) => {
+                (ref.current as any) = { editor };
+              }}
+              height="300px"
+              defaultLanguage="html"
+              value={model.template}
+              onChange={(v) => setTemplate(v || "")}
+              options={{
+                minimap: { enabled: false },
+                scrollBeyondLastLine: false,
+                tabSize: 2,
+              }}
+            />
+          </div>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};

package/src/components/plugins/@antd/item-props/ImageProps.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Form, Input, Upload, Button, message } from 'antd'
+import { UploadOutlined } from '@ant-design/icons'
+import type { PropEditorProps } from './types'
+
+export type ImageModel = { src?: string; alt?: string; href?: string; width?: string; height?: string }
+
+export const ImageProps: React.FC<PropEditorProps<ImageModel>> = ({ model, onChange }) => {
+  const trigger = (key: keyof ImageModel, value: any) => onChange && onChange({ ...model, [key]: value })
+  const beforeUpload = (file: File) => {
+    const isImage = file.type.startsWith('image/')
+    if (!isImage) message.error('上传封面只能是图片文件')
+    return isImage
+  }
+  const handleUpload = (info: any) => {
+    if (info.file.status === 'done') {
+      trigger('src', info.file.response?.data)
+      message.success('上传成功')
+    } else if (info.file.status === 'error') {
+      message.error('上传失败')
+    }
+  }
+  const headers = { Authorization: `Bearer ${localStorage.getItem('ASKDATA_TOKEN') || ''}` }
+  return (
+    <Form labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
+      <Form.Item label={
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          图片URL
+          <Upload name="file" multiple={false} accept=".png,.jpg,.jpeg" headers={headers} action="/api/datareport/upload" showUploadList={false} beforeUpload={beforeUpload} onChange={handleUpload}>
+            <Button size="small" type="link" icon={<UploadOutlined />} />
+          </Upload>
+        </div>
+      }>
+        <Input size="small" value={model.src} onChange={e => trigger('src', e.target.value)} />
+      </Form.Item>
+      <Form.Item label="图片替代文本"><Input size="small" value={model.alt} onChange={e => trigger('alt', e.target.value)} /></Form.Item>
+      <Form.Item label="图片链接"><Input size="small" value={model.href} onChange={e => trigger('href', e.target.value)} /></Form.Item>
+      <Form.Item label="图片宽度"><Input size="small" value={model.width} onChange={e => trigger('width', e.target.value)} /></Form.Item>
+      <Form.Item label="图片高度"><Input size="small" value={model.height} onChange={e => trigger('height', e.target.value)} /></Form.Item>
+    </Form>
+  )
+}
+

package/src/components/plugins/@antd/item-props/InputNumberProps.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Form, InputNumber, Input } from 'antd'
+import type { PropEditorProps } from './types'
+
+export type InputNumberModel = { var?: string; min?: number; max?: number; step?: number }
+
+export const InputNumberProps: React.FC<PropEditorProps<InputNumberModel>> = ({ model, onChange }) => {
+  const trigger = (key: keyof InputNumberModel, value: any) => onChange && onChange({ ...model, [key]: value })
+  return (
+    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+      <Form.Item label="变量名"><Input size="small" value={model.var} onChange={e => trigger('var', e.target.value)} /></Form.Item>
+      <Form.Item label="最小值"><InputNumber size="small" value={model.min} onChange={v => trigger('min', v)} /></Form.Item>
+      <Form.Item label="最大值"><InputNumber size="small" value={model.max} onChange={v => trigger('max', v)} /></Form.Item>
+      <Form.Item label="步长"><InputNumber size="small" value={model.step} onChange={v => trigger('step', v)} /></Form.Item>
+    </Form>
+  )
+}
+

package/src/components/plugins/@antd/item-props/InputProps.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import {
+  Form,
+  Input,
+  Radio,
+  Switch,
+  type InputProps as AntInputProps,
+} from "antd";
+import type { PropEditorProps } from "./types";
+
+export type InputModel = {
+  search?: boolean;
+  var?: string;
+  prefix?: string;
+  suffix?: string;
+} & Pick<AntInputProps, "placeholder" | "size" | "allowClear">;
+
+export const InputProps: React.FC<PropEditorProps<InputModel>> = ({
+  model,
+  onChange,
+}) => {
+  const trigger = (key: keyof InputModel, value: any) =>
+    onChange && onChange({ ...model, [key]: value });
+  return (
+    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+      <Form.Item label="搜索框">
+        <Switch
+          size="small"
+          checked={!!model.search}
+          onChange={(v) => trigger("search", v)}
+        />
+      </Form.Item>
+      <Form.Item label="变量名">
+        <Input
+          size="small"
+          value={model.var}
+          onChange={(e) => trigger("var", e.target.value)}
+          placeholder="请输入变量名"
+        />
+      </Form.Item>
+      <Form.Item label="占位符">
+        <Input
+          size="small"
+          value={model.placeholder}
+          onChange={(e) => trigger("placeholder", e.target.value)}
+          placeholder="请输入占位符"
+        />
+      </Form.Item>
+      {!model.search && (
+        <>
+          <Form.Item label="前缀">
+            <Input
+              size="small"
+              value={model.prefix}
+              onChange={(e) => trigger("prefix", e.target.value)}
+              placeholder="请输入前缀"
+            />
+          </Form.Item>
+          <Form.Item label="后缀">
+            <Input
+              size="small"
+              value={model.suffix}
+              onChange={(e) => trigger("suffix", e.target.value)}
+              placeholder="请输入后缀"
+            />
+          </Form.Item>
+        </>
+      )}
+      <Form.Item label="大小">
+        <Radio.Group
+          size="small"
+          value={model.size}
+          onChange={(e) => trigger("size", e.target.value)}
+        >
+          <Radio.Button value="small">小</Radio.Button>
+          <Radio.Button value="middle">中</Radio.Button>
+          <Radio.Button value="large">大</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="清除图标">
+        <Switch
+          size="small"
+          checked={!!model.allowClear}
+          onChange={(v) => trigger("allowClear", v)}
+        />
+      </Form.Item>
+    </Form>
+  );
+};

package/src/components/plugins/@antd/item-props/ListProps.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect } from 'react'
+import { Form, Radio, Switch, InputNumber } from 'antd'
+import type { PropEditorProps } from './types'
+
+export type ListModel = {
+  size?: 'default' | 'small' | 'large';
+  itemLayout?: 'horizontal' | 'vertical';
+  bordered?: boolean;
+  split?: boolean;
+  pageSize?: number;
+}
+
+export const ListProps: React.FC<PropEditorProps<ListModel>> = ({ model, onChange }) => {
+  const [form] = Form.useForm();
+
+  // 当外部 model 更新时同步到 form
+  useEffect(() => {
+    form.setFieldsValue({
+      size: model.size || 'default',
+      itemLayout: model.itemLayout || 'horizontal',
+      bordered: model.bordered ?? false,
+      split: model.split ?? true,
+      pageSize: model.pageSize || 10,
+    });
+  }, [model, form]);
+
+  const handleValuesChange = (changedValues: any) => {
+    onChange?.({
+      ...model,
+      ...changedValues,
+    });
+  };
+
+  return (
+    <Form
+      form={form}
+      labelCol={{ span: 12 }}
+      wrapperCol={{ span: 12 }}
+      onValuesChange={handleValuesChange}
+    >
+      <Form.Item label="大小" name="size">
+        <Radio.Group size="small" buttonStyle="solid">
+          <Radio.Button value="default">默认</Radio.Button>
+          <Radio.Button value="small">小</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+
+      <Form.Item label="布局" name="itemLayout">
+        <Radio.Group size="small" buttonStyle="solid">
+          <Radio.Button value="horizontal">水平</Radio.Button>
+          <Radio.Button value="vertical">垂直</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+
+      <Form.Item label="边框" name="bordered" valuePropName="checked">
+        <Switch size="small" />
+      </Form.Item>
+
+      <Form.Item label="分割线" name="split" valuePropName="checked">
+        <Switch size="small" />
+      </Form.Item>
+
+      <Form.Item label="分页大小" name="pageSize">
+        <InputNumber size="small" />
+      </Form.Item>
+    </Form>
+  )
+}
+