📝 chore: 完善 levaPanel 文档和示例

ant-design · Jul 22, 2023 · 5c659f2 · 5c659f2
1 parent 9b0225d
commit 5c659f2
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 49 deletions.
diff --git 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 (
     <>
       <LevaPanel<ButtonConfig>
-        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
diff --git a/src/LevaPanel/demos/schema.ts b/src/LevaPanel/demos/schema.ts
@@ -18,29 +18,17 @@ export const buttonSchema: JSONSchema<ButtonConfig> = {
   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<ButtonConfig> = {
     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<ButtonConfig> = {
           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
@@ -16,10 +16,6 @@ group:
 
 ### 基本使用
 
-<code src="./demos/basic.tsx" ></code>
-
-### 按钮组件配置
-
 <code src="./demos/button.tsx" compact></code>
 
 ## API
@@ -31,3 +27,89 @@ group:
 | value        | `T \| undefined`                                     | 表单当前值           |
 | onChange     | `(changedValue: Partial\<T\>, 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<ButtonConfig> = {
+  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,
+    },
+  },
+};
+
+```