📝 docs: add levapanle button demo

package.json

@@ -171,5 +171,8 @@
   "authors": [
     "rdmclin2@163.com",
     "arvinx@foxmail.com"
-  ]
+  ],
+  "gitmoji": {
+    "capitalizeTitle": false
+  }
 }

src/LevaPanel/demos/basic.tsx

@@ -0,0 +1,20 @@
+import { LevaPanel } from '@ant-design/pro-editor';
+import { useState } from 'react';
+import { ButtonConfig, buttonSchema } from './schema';
+
+export default () => {
+  const [config, setConfig] = useState<ButtonConfig>({ children: '默认按钮', type: 'primary' });
+
+  return (
+    <LevaPanel
+      schema={buttonSchema}
+      title="按钮属性配置器"
+      value={config}
+      onChange={(changedValue, fullValue) => {
+        setConfig(fullValue);
+        console.log('check changedValue:', changedValue);
+        console.log('check fullValue:', fullValue);
+      }}
+    />
+  );
+};

src/LevaPanel/demos/button.tsx

@@ -0,0 +1,41 @@
+import { DraggablePanel, LevaPanel } from '@ant-design/pro-editor';
+import { Button } from 'antd';
+import { useState } from 'react';
+import { ButtonConfig, buttonSchema } from './schema';
+
+export default () => {
+  const [config, setConfig] = useState<ButtonConfig>({ children: '默认按钮', type: 'primary' });
+
+  return (
+    <div
+      style={{
+        minHeight: 300,
+        display: 'flex',
+      }}
+    >
+      <div
+        style={{
+          flex: 1,
+          display: 'flex',
+          justifyContent: 'center',
+          padding: 12,
+          alignSelf: 'center',
+        }}
+      >
+        <Button {...config} />
+      </div>
+      <DraggablePanel style={{ padding: 12 }}>
+        <LevaPanel
+          schema={buttonSchema}
+          title="按钮属性配置器"
+          value={config}
+          onChange={(changedValue, fullValue) => {
+            setConfig(fullValue);
+            console.log('check changedValue:', changedValue);
+            console.log('check fullValue:', fullValue);
+          }}
+        />
+      </DraggablePanel>
+    </div>
+  );
+};

src/LevaPanel/demos/schema.ts

@@ -0,0 +1,103 @@
+import type { JSONSchema } from '@ant-design/pro-editor';
+
+export interface ButtonConfig {
+  children?: string;
+  type?: 'primary' | 'default' | 'dashed' | 'link' | 'text';
+  size?: 'large' | 'middle' | 'small';
+  danger?: boolean;
+  ghost?: boolean;
+  icon?: string;
+  shape?: 'circle' | 'round';
+}
+
+/**
+ * 按钮 Schema
+ */
+export const buttonSchema: JSONSchema<ButtonConfig> = {
+  type: 'object',
+  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,
+    },
+    icon: {
+      type: 'string',
+      title: '图标',
+      default: '',
+    },
+    size: {
+      title: '大小',
+      type: 'string',
+      renderType: 'radioGroup',
+      enum: ['large', 'middle', 'small'],
+      enumNames: ['大', '中', '小'],
+      default: 'middle',
+      category: 'style',
+    },
+    shape: {
+      title: '形状',
+      type: 'string',
+      renderType: 'radioGroup',
+      enumOptions: [
+        {
+          label: '默认',
+        },
+        {
+          label: '圆形',
+          value: 'circle',
+        },
+        {
+          label: '胶囊',
+          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',
+    },
+  },
+};

src/LevaPanel/index.md

@@ -0,0 +1,33 @@
+---
+title: LevaPanel 属性面板
+atomId: LevaPanel
+group:
+  title: 面板模块
+  order: 1
+---
+
+# LevaPanel 属性面板
+
+## 何时使用
+
+基于 [Leva](https://leva.pmnd.rs/) 根据 JsonSchema 生成面板模块。
+
+## 代码演示
+
+### 基本使用
+
+<code src="./demos/basic.tsx" ></code>
+
+### 按钮组件配置
+
+<code src="./demos/button.tsx" compact></code>
+
+## API
+
+| 属性名       | 类型                                                 | 描述                 |
+| ------------ | ---------------------------------------------------- | -------------------- |
+| schema       | `JSONSchema\<T\>`                                    | JSON Schema 配置项   |
+| defaultValue | `T \| undefined`                                     | 表单默认值           |
+| value        | `T \| undefined`                                     | 表单当前值           |
+| onChange     | `(changedValue: Partial\<T\>, fullValue: T) => void` | 表单值变化的回调函数 |
+| title        | `ReactNode`                                          | 标题                 |