diff --git a/docs/pro-editor/demos/buttonAsset/_Panel.tsx b/docs/pro-editor/demos/buttonAsset/_Panel.tsx index 447ff135..cfbc7b47 100644 --- a/docs/pro-editor/demos/buttonAsset/_Panel.tsx +++ b/docs/pro-editor/demos/buttonAsset/_Panel.tsx @@ -6,7 +6,7 @@ import { FC, memo } from 'react'; import { Flexbox } from 'react-layout-kit'; import { shallow } from 'zustand/shallow'; -import { ButtonConfig, buttonSchema } from './models'; +import { ButtonConfig, buttonModel } from './models'; export const ButtonPanel: FC = memo(() => { const data = useProEditorStore((s) => s.config, isEqual); @@ -18,7 +18,7 @@ export const ButtonPanel: FC = memo(() => { return ( <> - schema={buttonSchema} + schema={buttonModel.schema()} onChange={(data, item) => { updateConfig(item, { replace: true }); }} diff --git a/src/LevaPanel/demos/basic.tsx b/src/LevaPanel/demos/basic.tsx deleted file mode 100644 index 6d053d00..00000000 --- a/src/LevaPanel/demos/basic.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { LevaPanel } from '@ant-design/pro-editor'; -import { useState } from 'react'; -import { ButtonConfig, buttonSchema } from './schema'; - -export default () => { - const [config, setConfig] = useState({ children: '默认按钮', type: 'primary' }); - - return ( - { - setConfig(fullValue); - console.log('check changedValue:', changedValue); - console.log('check fullValue:', fullValue); - }} - /> - ); -}; diff --git a/src/LevaPanel/demos/schema.ts b/src/LevaPanel/demos/schema.ts index 747fced0..32ddc7b6 100644 --- a/src/LevaPanel/demos/schema.ts +++ b/src/LevaPanel/demos/schema.ts @@ -18,29 +18,17 @@ export const buttonSchema: JSONSchema = { properties: { children: { type: 'string', - description: '设置按钮文本', title: '按钮文本', - renderProps: { - allowClear: true, - placeholder: '空值将无法正常显示', - autoFocus: true, - }, }, type: { type: 'string', title: '类型', - renderType: 'radioGroup', default: 'default', enum: ['primary', 'default', 'dashed', 'link', 'text'], enumNames: ['强调', '默认', '虚线', '链接', '文本'], - renderOptions: { - layout: 'vertical', - noLabel: true, - }, }, danger: { type: 'boolean', - renderType: 'boolean', title: '危险态', default: false, }, @@ -52,16 +40,13 @@ export const buttonSchema: JSONSchema = { size: { title: '大小', type: 'string', - renderType: 'radioGroup', enum: ['large', 'middle', 'small'], enumNames: ['大', '中', '小'], default: 'middle', - category: 'style', }, shape: { title: '形状', type: 'string', - renderType: 'radioGroup', enumOptions: [ { label: '默认', @@ -75,29 +60,21 @@ export const buttonSchema: JSONSchema = { value: 'round', }, ], - category: 'style', - renderOptions: {}, }, loading: { type: 'boolean', - renderType: 'boolean', title: '加载中', default: false, - category: 'status', }, disabled: { type: 'boolean', - renderType: 'boolean', title: '禁用', default: false, - category: 'status', }, ghost: { type: 'boolean', - renderType: 'boolean', title: '幽灵按钮', default: false, - category: 'style', }, }, }; diff --git a/src/LevaPanel/index.md b/src/LevaPanel/index.md index 062a26d3..6c6eabad 100644 --- a/src/LevaPanel/index.md +++ b/src/LevaPanel/index.md @@ -16,10 +16,6 @@ group: ### 基本使用 - - -### 按钮组件配置 - ## API @@ -31,3 +27,89 @@ group: | value | `T \| undefined` | 表单当前值 | | onChange | `(changedValue: Partial\, fullValue: T) => void` | 表单值变化的回调函数 | | title | `ReactNode` | 标题 | + +## JSONSchema + +| 属性名 | 类型 | 描述 | +| ----------- | --------------------------------------------------- | --------------------------------------------- | +| type | `'string'` \| `'boolean'` \| `'number'` \| `object` | 表单类型 | +| title | `string` | 表单标签 | +| default | `any` | 表单默认值 | +| enum | `string[]` | 选项值 | +| enumNames | `string[]` | 选项描述值,配合 `enum` 使用 | +| enumOptions | `{label: string, value: string}[]` | 选项描述列表,与 `enums`和`enumNames`作用一致 | +| properties | `object` | 属性配置项,类型为 `object` 使用 | + +示例 `schema`参考: + +```json +/** + * 按钮 Schema + */ +export const buttonSchema: JSONSchema = { + type: 'object', + properties: { + children: { + type: 'string', + title: '按钮文本', + }, + type: { + type: 'string', + title: '类型', + default: 'default', + enum: ['primary', 'default', 'dashed', 'link', 'text'], + enumNames: ['强调', '默认', '虚线', '链接', '文本'], + }, + danger: { + type: 'boolean', + title: '危险态', + default: false, + }, + icon: { + type: 'string', + title: '图标', + default: '', + }, + size: { + title: '大小', + type: 'string', + enum: ['large', 'middle', 'small'], + enumNames: ['大', '中', '小'], + default: 'middle', + }, + shape: { + title: '形状', + type: 'string', + enumOptions: [ + { + label: '默认', + }, + { + label: '圆形', + value: 'circle', + }, + { + label: '胶囊', + value: 'round', + }, + ], + }, + loading: { + type: 'boolean', + title: '加载中', + default: false, + }, + disabled: { + type: 'boolean', + title: '禁用', + default: false, + }, + ghost: { + type: 'boolean', + title: '幽灵按钮', + default: false, + }, + }, +}; + +```