diff --git a/designer-demo/engine.config.js b/designer-demo/engine.config.js
index fa308f9bc2..09b46bf472 100644
--- a/designer-demo/engine.config.js
+++ b/designer-demo/engine.config.js
@@ -1,7 +1,9 @@
+import material from '@opentiny/tiny-engine-materials'
+
 export default {
   id: 'engine.config',
   theme: 'light',
-  material: ['/mock/bundle.json'],
+  material: [material],
   scripts: [],
   styles: []
 }
diff --git a/designer-demo/package.json b/designer-demo/package.json
index be5e7ae796..2069097d50 100644
--- a/designer-demo/package.json
+++ b/designer-demo/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@opentiny/tiny-engine": "workspace:^",
+    "@opentiny/tiny-engine-materials": "workspace:*",
     "@opentiny/tiny-engine-meta-register": "workspace:^",
     "@opentiny/tiny-engine-utils": "workspace:*",
     "@opentiny/vue": "~3.20.0",
diff --git a/packages/materials/README.md b/packages/materials/README.md
new file mode 100644
index 0000000000..7aa6a92d8a
--- /dev/null
+++ b/packages/materials/README.md
@@ -0,0 +1,52 @@
+# TinyEngine 官方物料
+
+## 使用
+
+### 持续构建
+
+```bash
+npm run serve
+```
+
+解释：
+
+1. 会持续监听 src 目录下文件变动，持续构建出来物料产物
+2. 会启动静态服务器。
+
+### 将组件库分别进行构建，以及将所有组件库构建成一份物料产物
+
+```bash
+npm run build
+
+# 构建成功会得到比如 ElementPlus.json、TinyVue.json 等组件库对应的 json，以及 all.json
+```
+
+### 将组件库分别进行构建
+
+```bash
+npm run build:split
+
+# 构建成功会得到比如 ElementPlus.json、TinyVue.json 等组件库对应的 json
+```
+
+## 添加自己的物料
+
+请先大致了解 TinyEngine 物料协议：[TinyEngine物料协议](https://opentiny.design/tiny-engine#/protocol)
+
+src 目录功能约定结构：
+
+```bash
+src/
+|__ ElementPlus 组件库名称
+   |__ Button.json ElementPlus Button组件
+   |__ Table.json  ElementPlus Table 组件
+```
+
+所以，我们添加自己的物料可以大致分为两步：
+
+1. 根据目录结构约定添加  xxx.json 组件文件
+2. xxx.json 中根据物料协议进行书写。
+
+## TODO
+
+- [ ] 脚本自动生成组件库对应物料。
diff --git a/packages/materials/buildMaterials.mjs b/packages/materials/buildMaterials.mjs
new file mode 100644
index 0000000000..19093290d1
--- /dev/null
+++ b/packages/materials/buildMaterials.mjs
@@ -0,0 +1,267 @@
+import fsExtra from 'fs-extra'
+import path from 'node:path'
+import chokidar from 'chokidar'
+import fg from 'fast-glob'
+import { fileURLToPath } from 'node:url'
+import httpServer from 'http-server'
+import portFinder from 'portfinder'
+import Logger from '../../scripts/logger.mjs'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const logger = new Logger('buildMaterials')
+
+// 物料文件存放文件夹名称
+const materialsDir = path.resolve(__dirname, './src')
+
+/**
+ * 校验组件文件数据
+ * @param {string} file 组件文件路径
+ * @param {object} component 组件数据
+ * @returns
+ */
+const validateComponent = (file, component) => {
+  const requiredFields = ['component']
+  const fields = Object.keys(component)
+  const requiredList = requiredFields.filter((field) => !fields.includes(field))
+
+  if (requiredList.length) {
+    logger.error(`组件文件 ${file} 缺少必要字段：${requiredList.join('、')}。`)
+
+    return false
+  }
+
+  if (!component.npm) {
+    logger.warn(`组件文件 ${file} 缺少 npm 字段，出码时将不能通过import语句导入组件。`)
+
+    return false
+  }
+
+  return true
+}
+
+const generateComponents = async (entry) => {
+  const files = await fg('*.json', { cwd: entry })
+
+  if (!files.length) {
+    return
+  }
+
+  const bundle = {
+    components: [],
+    snippets: [],
+    packages: []
+  }
+  const componentsMap = []
+
+  const metaInfo = fsExtra.readJsonSync(path.resolve(entry, 'meta.json'), { throws: false })
+
+  if (metaInfo?.package) {
+    bundle.packages.push(metaInfo.package)
+  }
+  if (metaInfo?.snippets) {
+    bundle.snippets = metaInfo.snippets
+  }
+
+  const componentFiles = files.filter((fileName) => {
+    if (fileName === 'meta.json') {
+      return false
+    }
+
+    // 下划线开头的组件文件不导出
+    return !fileName.startsWith('_')
+  })
+
+  componentFiles.forEach((file) => {
+    const material = fsExtra.readJsonSync(path.resolve(entry, file), { throws: false })
+
+    if (!material) {
+      const fileFullPath = path.join(process.cwd(), file)
+
+      logger.error(`文件格式有误 (${fileFullPath})`)
+
+      return
+    }
+
+    const valid = validateComponent(file, material)
+
+    if (!valid) return
+
+    const { snippets: componentSnippets, category, ...componentInfo } = material
+
+    bundle.components.push(componentInfo)
+
+    const snippet = bundle.snippets.find((item) => item.group === category)
+
+    if (snippet) {
+      if (!snippet.children) {
+        snippet.children = []
+      }
+
+      if (componentSnippets) {
+        snippet.children.push(...componentSnippets)
+      }
+    } else if (category && componentInfo && componentSnippets) {
+      bundle.snippets.push({
+        group: category,
+        children: componentSnippets || []
+      })
+    }
+
+    const npmInfo = componentInfo.npm
+    const { package: packageName = '', exportName = '' } = npmInfo
+
+    const mapItem = {
+      componentName: componentInfo.component,
+      package: packageName,
+      exportName
+    }
+
+    if (typeof npmInfo.destructuring === 'boolean') {
+      mapItem.destructuring = componentInfo.npm.destructuring
+    }
+
+    if (npmInfo.package) {
+      componentsMap.push(mapItem)
+    }
+  })
+
+  return {
+    bundle,
+    componentsMap
+  }
+}
+
+const getFrameworkWithData = (data) => {
+  return {
+    framework: 'Vue',
+    materials: data
+  }
+}
+
+const buildComponents = async (config = {}) => {
+  try {
+    const entries = await fg('*/', {
+      cwd: materialsDir,
+      onlyDirectories: true,
+      deep: 1
+    })
+
+    const { buildCombine = true } = config
+
+    const allBundles = {
+      components: [],
+      snippets: [],
+      packages: []
+    }
+    let allComponentsMap = []
+
+    for (const entry of entries) {
+      const res = await generateComponents(path.resolve(materialsDir, `${entry}`))
+
+      if (!res) {
+        continue
+      }
+
+      fsExtra.outputJSONSync(path.resolve(__dirname, `./dist/${entry}.json`), getFrameworkWithData(res.bundle), {
+        spaces: 2
+      })
+      fsExtra.outputJSONSync(path.resolve(__dirname, `./dist/${entry}.compsMap.json`), res.componentsMap, { spaces: 2 })
+
+      allBundles.components = allBundles.components.concat(res.bundle.components)
+      allComponentsMap = allComponentsMap.concat(res.componentsMap)
+      allBundles.packages = allBundles.packages.concat(res.bundle.packages)
+
+      for (const snippetItem of res.bundle.snippets) {
+        const snippet = allBundles.snippets.find((item) => item.group === snippetItem.group)
+
+        if (snippet) {
+          if (!snippet.children) {
+            snippet.children = []
+          }
+
+          snippet.children.push(...(snippetItem.children || []))
+        } else {
+          allBundles.snippets.push(snippetItem)
+        }
+      }
+    }
+
+    if (buildCombine) {
+      fsExtra.outputJSONSync(path.resolve(__dirname, `./dist/index.json`), getFrameworkWithData(allBundles), {
+        spaces: 2
+      })
+      fsExtra.outputJSONSync(path.resolve(__dirname, `./dist/index.compsMap.json`), allComponentsMap, { spaces: 2 })
+    }
+
+    logger.success('物料资产包构建成功')
+  } catch (error) {
+    logger.error(`物料资产包构建失败：${error}`)
+  }
+}
+
+// 持续构建
+async function serve() {
+  // 监听materials下json文件的变化
+  const watcher = chokidar.watch(`${materialsDir}/**/*.json`, { ignoreInitial: true })
+
+  watcher.on('all', (event, file) => {
+    const eventMap = {
+      add: '新增',
+      change: '更新',
+      unlink: '删除'
+    }
+    const fileFullPath = path.join(process.cwd(), file)
+
+    logger.info(`${eventMap[event]}组件文件 (${fileFullPath})`)
+
+    // 监听物料文件变化，更新物料资产包
+    buildComponents()
+  })
+
+  // 第一次需要手动出发构建一遍
+  await buildComponents()
+
+  const staticServerPort = await portFinder.getPortPromise({ port: 4001 })
+
+  const server = httpServer.createServer({
+    caches: 1,
+    cors: true,
+    root: path.resolve(__dirname, './dist')
+  })
+
+  server.listen(staticServerPort, () => {
+    logger.success(`物料服务已启动  http://127.0.0.1:${staticServerPort}`)
+  })
+}
+
+// 单次构建，分组件库
+function buildSplit() {
+  buildComponents({ buildCombine: false })
+}
+
+// 单次构建，合并所有组件库
+function build() {
+  buildComponents()
+}
+
+function start() {
+  const commandsMap = {
+    serve: serve,
+    build: build,
+    'build:split': buildSplit
+  }
+
+  const command = process.argv.slice(2)
+
+  if (!commandsMap[command]) {
+    logger.error(`[@opentiny/tiny-engine-materials] 不支持${command}命令`)
+
+    return
+  }
+
+  commandsMap[command]()
+}
+
+start()
diff --git a/packages/materials/package.json b/packages/materials/package.json
new file mode 100644
index 0000000000..7e45717c5b
--- /dev/null
+++ b/packages/materials/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@opentiny/tiny-engine-materials",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.json",
+  "module": "dist/index.json",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "serve": "node buildMaterials.mjs serve",
+    "build": "node buildMaterials.mjs build",
+    "build:split": "node buildMaterials.mjs build:split"
+  },
+  "keywords": [],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/opentiny/tiny-engine",
+    "directory": "packages/materials"
+  },
+  "bugs": {
+    "url": "https://github.com/opentiny/tiny-engine/issues"
+  },
+  "author": "OpenTiny Team",
+  "license": "MIT",
+  "homepage": "https://opentiny.design/tiny-engine",
+  "devDependencies": {
+    "chokidar": "^3.5.3",
+    "fast-glob": "^3.3.2",
+    "fs-extra": "^11.2.0",
+    "http-server": "^14.1.1",
+    "portfinder": "^1.0.32"
+  }
+}
diff --git a/packages/materials/src/ElementPlus/ElButton.json b/packages/materials/src/ElementPlus/ElButton.json
new file mode 100644
index 0000000000..d38e786f62
--- /dev/null
+++ b/packages/materials/src/ElementPlus/ElButton.json
@@ -0,0 +1,339 @@
+{
+  "id": 1,
+  "version": "2.4.2",
+  "name": {
+    "zh_CN": "按钮"
+  },
+  "component": "ElButton",
+  "icon": "button",
+  "description": "常用的操作按钮",
+  "doc_url": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "dev_mode": "proCode",
+  "npm": {
+    "package": "element-plus",
+    "exportName": "ElButton",
+    "destructuring": true
+  },
+  "group": "基础组件",
+  "category": "element-plus",
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "isModal": false,
+    "isPopper": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["type", "size"]
+    },
+    "contextMenu": {
+      "actions": ["copy", "remove", "insert", "updateAttr", "bindEvent", "createBlock"],
+      "disable": []
+    },
+    "invalidity": [""],
+    "clickCapture": true,
+    "framework": "Vue"
+  },
+  "schema": {
+    "properties": [
+      {
+        "name": "0",
+        "label": {
+          "zh_CN": "基础属性"
+        },
+        "content": [
+          {
+            "property": "size",
+            "label": {
+              "text": {
+                "zh_CN": "尺寸"
+              }
+            },
+            "description": {
+              "zh_CN": "尺寸"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "defaultValue": "default",
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "large",
+                    "value": "large"
+                  },
+                  {
+                    "label": "default",
+                    "value": "default"
+                  },
+                  {
+                    "label": "small",
+                    "value": "small"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "property": "type",
+            "label": {
+              "text": {
+                "zh_CN": "类型"
+              }
+            },
+            "description": {
+              "zh_CN": "类型"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "plain",
+            "label": {
+              "text": {
+                "zh_CN": "朴素按钮"
+              }
+            },
+            "description": {
+              "zh_CN": "是否为朴素按钮"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "text",
+            "label": {
+              "text": {
+                "zh_CN": "文字按钮"
+              }
+            },
+            "description": {
+              "zh_CN": "是否为文字按钮"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "bg",
+            "label": {
+              "text": {
+                "zh_CN": "背景颜色"
+              }
+            },
+            "description": {
+              "zh_CN": "是否显示文字按钮背景颜色"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "link",
+            "label": {
+              "text": {
+                "zh_CN": "链接按钮"
+              }
+            },
+            "description": {
+              "zh_CN": "是否为链接按钮"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "round",
+            "label": {
+              "text": {
+                "zh_CN": "圆角按钮"
+              }
+            },
+            "description": {
+              "zh_CN": "是否为圆角按钮"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "circle",
+            "label": {
+              "text": {
+                "zh_CN": "圆形按钮"
+              }
+            },
+            "description": {
+              "zh_CN": "是否为圆形按钮"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "loading",
+            "label": {
+              "text": {
+                "zh_CN": "加载中状态"
+              }
+            },
+            "description": {
+              "zh_CN": "是否为加载中状态"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "description": {
+              "zh_CN": "是否禁用"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "defaultValue": false,
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "device": []
+          }
+        ],
+        "description": {
+          "zh_CN": ""
+        }
+      }
+    ],
+    "events": {},
+    "slots": {
+      "default": {
+        "label": {
+          "zh_CN": "default"
+        },
+        "description": {
+          "zh_CN": "自定义默认内容"
+        }
+      },
+      "loading": {
+        "label": {
+          "zh_CN": "loading"
+        },
+        "description": {
+          "zh_CN": "自定义加载中组件"
+        }
+      }
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "按钮"
+      },
+      "icon": "button",
+      "screenshot": "",
+      "snippetName": "ElButton",
+      "schema": {
+        "children": [
+          {
+            "componentName": "Text",
+            "props": {
+              "text": "按钮文本"
+            }
+          }
+        ]
+      },
+      "category": "element-plus"
+    }
+  ]
+}
diff --git a/packages/materials/src/ElementPlus/ElForm.json b/packages/materials/src/ElementPlus/ElForm.json
new file mode 100644
index 0000000000..3dfc423557
--- /dev/null
+++ b/packages/materials/src/ElementPlus/ElForm.json
@@ -0,0 +1,535 @@
+{
+  "id": 1,
+  "version": "2.4.2",
+  "name": {
+    "zh_CN": "表单"
+  },
+  "component": "ElForm",
+  "icon": "form",
+  "description": "表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。 使用表单，您可以收集、验证和提交数据。",
+  "doc_url": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "dev_mode": "proCode",
+  "npm": {
+    "package": "element-plus",
+    "exportName": "ElForm",
+    "destructuring": true
+  },
+  "group": "表单组件",
+  "category": "element-plus",
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "isModal": false,
+    "isPopper": false,
+    "nestingRule": {
+      "childWhitelist": ["ElFormItem"],
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["inline", "label-width"]
+    },
+    "contextMenu": {
+      "actions": ["copy", "remove", "insert", "updateAttr", "bindEvent", "createBlock"],
+      "disable": []
+    },
+    "invalidity": [""],
+    "clickCapture": true,
+    "framework": "Vue"
+  },
+  "schema": {
+    "properties": [
+      {
+        "name": "0",
+        "label": {
+          "zh_CN": "基础属性"
+        },
+        "content": [
+          {
+            "property": "model",
+            "label": {
+              "text": {
+                "zh_CN": "数据对象"
+              }
+            },
+            "description": {
+              "zh_CN": "表单数据对象"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "top",
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {
+                "language": "json"
+              }
+            }
+          },
+          {
+            "property": "rules",
+            "label": {
+              "text": {
+                "zh_CN": "验证规则"
+              }
+            },
+            "description": {
+              "zh_CN": "表单验证规则"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "top",
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {
+                "language": "json"
+              }
+            }
+          },
+          {
+            "property": "inline",
+            "label": {
+              "text": {
+                "zh_CN": "行内模式"
+              }
+            },
+            "description": {
+              "zh_CN": "行内表单模式"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "label-position",
+            "label": {
+              "text": {
+                "zh_CN": "标签位置"
+              }
+            },
+            "description": {
+              "zh_CN": "表单域标签的位置， 当设置为 left 或 right 时，则也需要设置标签宽度属性"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "defaultValue": "right",
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "left",
+                    "value": "left"
+                  },
+                  {
+                    "label": "right",
+                    "value": "right"
+                  },
+                  {
+                    "label": "top",
+                    "value": "top"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "property": "label-width",
+            "label": {
+              "text": {
+                "zh_CN": "标签宽度"
+              }
+            },
+            "description": {
+              "zh_CN": "标签的长度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto。"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "label-suffix",
+            "label": {
+              "text": {
+                "zh_CN": "标签后缀"
+              }
+            },
+            "description": {
+              "zh_CN": "表单域标签的后缀"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "hide-required-asterisk",
+            "label": {
+              "text": {
+                "zh_CN": "隐藏必填星号"
+              }
+            },
+            "description": {
+              "zh_CN": "是否隐藏必填字段标签旁边的红色星号"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "require-asterisk-position",
+            "label": {
+              "text": {
+                "zh_CN": "星号位置"
+              }
+            },
+            "description": {
+              "zh_CN": "星号的位置"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "defaultValue": "left",
+            "widget": {
+              "component": "ButtonGroupConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "left",
+                    "value": "left"
+                  },
+                  {
+                    "label": "right",
+                    "value": "right"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "property": "show-message",
+            "label": {
+              "text": {
+                "zh_CN": "显示校验信息"
+              }
+            },
+            "description": {
+              "zh_CN": "是否显示校验错误信息"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "defaultValue": true,
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "inline-message",
+            "label": {
+              "text": {
+                "zh_CN": "行内显示校验信息"
+              }
+            },
+            "description": {
+              "zh_CN": "是否以行内形式展示校验信息"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "defaultValue": false,
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "status-icon",
+            "label": {
+              "text": {
+                "zh_CN": "显示校验结果图标"
+              }
+            },
+            "description": {
+              "zh_CN": "是否在输入框中显示校验结果反馈图标"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "defaultValue": false,
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "validate-on-rule-change",
+            "label": {
+              "text": {
+                "zh_CN": "触发验证"
+              }
+            },
+            "description": {
+              "zh_CN": "是否在 rules 属性改变后立即触发一次验证"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "defaultValue": true,
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "size",
+            "label": {
+              "text": {
+                "zh_CN": "尺寸"
+              }
+            },
+            "description": {
+              "zh_CN": "用于控制该表单内组件的尺寸"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "defaultValue": "default",
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "large",
+                    "value": "large"
+                  },
+                  {
+                    "label": "default",
+                    "value": "default"
+                  },
+                  {
+                    "label": "small",
+                    "value": "small"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "description": {
+              "zh_CN": "是否禁用该表单内的所有组件。 如果设置为 true, 它将覆盖内部组件的 disabled 属性"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "defaultValue": false,
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "scroll-to-error",
+            "label": {
+              "text": {
+                "zh_CN": "滚动到错误项"
+              }
+            },
+            "description": {
+              "zh_CN": "当校验失败时，滚动到第一个错误表单项"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "defaultValue": false,
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "device": []
+          }
+        ],
+        "description": {
+          "zh_CN": ""
+        }
+      }
+    ],
+    "events": {
+      "onValidate": {
+        "label": {
+          "zh_CN": "任一表单项被校验后触发"
+        },
+        "description": {
+          "zh_CN": "任一表单项被校验后触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    },
+    "slots": {}
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "表单"
+      },
+      "icon": "form",
+      "screenshot": "",
+      "snippetName": "ElForm",
+      "schema": {
+        "children": [
+          {
+            "componentName": "ElFormItem",
+            "props": {
+              "label": "账号",
+              "prop": "account"
+            },
+            "children": [
+              {
+                "componentName": "ElInput",
+                "props": {
+                  "modelValue": "",
+                  "placeholder": "请输入账号"
+                }
+              }
+            ]
+          },
+          {
+            "componentName": "ElFormItem",
+            "props": {
+              "label": "密码",
+              "prop": "password"
+            },
+            "children": [
+              {
+                "componentName": "ElInput",
+                "props": {
+                  "modelValue": "",
+                  "placeholder": "请输入密码",
+                  "type": "password"
+                }
+              }
+            ]
+          },
+          {
+            "componentName": "ElFormItem",
+            "props": {},
+            "children": [
+              {
+                "componentName": "ElButton",
+                "props": {
+                  "type": "primary",
+                  "style": "margin-right: 10px"
+                },
+                "children": [
+                  {
+                    "componentName": "Text",
+                    "props": {
+                      "text": "提交"
+                    }
+                  }
+                ]
+              },
+              {
+                "componentName": "ElButton",
+                "props": {
+                  "type": "primary"
+                },
+                "children": [
+                  {
+                    "componentName": "Text",
+                    "props": {
+                      "text": "重置"
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      "category": "element-plus"
+    }
+  ]
+}
diff --git a/packages/materials/src/ElementPlus/ElFormItem.json b/packages/materials/src/ElementPlus/ElFormItem.json
new file mode 100644
index 0000000000..52eaeee233
--- /dev/null
+++ b/packages/materials/src/ElementPlus/ElFormItem.json
@@ -0,0 +1,346 @@
+{
+  "id": 1,
+  "version": "2.4.2",
+  "name": {
+    "zh_CN": "表单子项"
+  },
+  "component": "ElFormItem",
+  "icon": "formItem",
+  "description": "表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。 使用表单，您可以收集、验证和提交数据。",
+  "doc_url": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "dev_mode": "proCode",
+  "npm": {
+    "package": "element-plus",
+    "exportName": "ElFormItem",
+    "destructuring": true
+  },
+  "group": "表单组件",
+  "category": "element-plus",
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "isModal": false,
+    "isPopper": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["inline", "label-width"]
+    },
+    "contextMenu": {
+      "actions": ["copy", "remove", "insert", "updateAttr", "bindEvent", "createBlock"],
+      "disable": []
+    },
+    "invalidity": [""],
+    "clickCapture": true,
+    "framework": "Vue"
+  },
+  "schema": {
+    "properties": [
+      {
+        "name": "0",
+        "label": {
+          "zh_CN": "基础属性"
+        },
+        "content": [
+          {
+            "property": "prop",
+            "label": {
+              "text": {
+                "zh_CN": "键名"
+              }
+            },
+            "description": {
+              "zh_CN": "model 的键名。 它可以是一个属性的值(如 a.b.0 或 [a', 'b', '0'])。 在定义了 validate、resetFields 的方法时，该属性是必填的"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "label",
+            "label": {
+              "text": {
+                "zh_CN": "标签文本"
+              }
+            },
+            "description": {
+              "zh_CN": "标签文本"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "label-width",
+            "label": {
+              "text": {
+                "zh_CN": "标签宽度"
+              }
+            },
+            "description": {
+              "zh_CN": "标签宽度，例如 '50px'。 可以使用 auto"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "required",
+            "label": {
+              "text": {
+                "zh_CN": "必填项"
+              }
+            },
+            "description": {
+              "zh_CN": "是否为必填项，如不设置，则会根据校验规则确认"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "rules",
+            "label": {
+              "text": {
+                "zh_CN": "验证规则"
+              }
+            },
+            "description": {
+              "zh_CN": "表单验证规则, 更多内容可以参考async-validator"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "top",
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {
+                "language": "json"
+              }
+            }
+          },
+          {
+            "property": "error",
+            "label": {
+              "text": {
+                "zh_CN": "错误信息"
+              }
+            },
+            "description": {
+              "zh_CN": "表单域验证错误时的提示信息。设置该值会导致表单验证状态变为 error，并显示该错误信息"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "show-message",
+            "label": {
+              "text": {
+                "zh_CN": "显示错误信息"
+              }
+            },
+            "description": {
+              "zh_CN": "是否显示校验错误信息"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "inline-message",
+            "label": {
+              "text": {
+                "zh_CN": "行内显示错误信息"
+              }
+            },
+            "description": {
+              "zh_CN": "是否在行内显示校验信息"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "size",
+            "label": {
+              "text": {
+                "zh_CN": "尺寸"
+              }
+            },
+            "description": {
+              "zh_CN": "用于控制该表单内组件的尺寸"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "defaultValue": "default",
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "large",
+                    "value": "large"
+                  },
+                  {
+                    "label": "default",
+                    "value": "default"
+                  },
+                  {
+                    "label": "small",
+                    "value": "small"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "property": "for",
+            "label": {
+              "text": {
+                "zh_CN": "for"
+              }
+            },
+            "description": {
+              "zh_CN": "和原生标签相同能力"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "validate-status",
+            "label": {
+              "text": {
+                "zh_CN": "校验状态"
+              }
+            },
+            "description": {
+              "zh_CN": "formItem 校验的状态"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "error",
+                    "value": "error"
+                  },
+                  {
+                    "label": "validating",
+                    "value": "validating"
+                  },
+                  {
+                    "label": "success",
+                    "value": "success"
+                  }
+                ]
+              }
+            }
+          }
+        ],
+        "description": {
+          "zh_CN": ""
+        }
+      }
+    ],
+    "events": {},
+    "slots": {
+      "label": {
+        "label": {
+          "zh_CN": "label"
+        },
+        "description": {
+          "zh_CN": "标签位置显示的内容"
+        }
+      },
+      "error": {
+        "label": {
+          "zh_CN": "error"
+        },
+        "description": {
+          "zh_CN": "验证错误信息的显示内容"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/materials/src/ElementPlus/ElInput.json b/packages/materials/src/ElementPlus/ElInput.json
new file mode 100644
index 0000000000..d21386cfef
--- /dev/null
+++ b/packages/materials/src/ElementPlus/ElInput.json
@@ -0,0 +1,289 @@
+{
+  "id": 1,
+  "version": "2.4.2",
+  "name": {
+    "zh_CN": "输入框"
+  },
+  "component": "ElInput",
+  "icon": "input",
+  "description": "通过鼠标或键盘输入字符",
+  "doc_url": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "dev_mode": "proCode",
+  "npm": {
+    "package": "element-plus",
+    "exportName": "ElInput",
+    "destructuring": true
+  },
+  "group": "表单组件",
+  "category": "element-plus",
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "isPopper": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["type", "size"]
+    },
+    "contextMenu": {
+      "actions": ["copy", "remove", "insert", "updateAttr", "bindEvent", "createBlock"],
+      "disable": []
+    },
+    "invalidity": [""],
+    "clickCapture": true,
+    "framework": "Vue"
+  },
+  "schema": {
+    "properties": [
+      {
+        "name": "0",
+        "label": {
+          "zh_CN": "基础属性"
+        },
+        "content": [
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "绑定值"
+              }
+            },
+            "description": {
+              "zh_CN": "绑定值"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "size",
+            "label": {
+              "text": {
+                "zh_CN": "尺寸"
+              }
+            },
+            "description": {
+              "zh_CN": "尺寸"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "defaultValue": "default",
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "large",
+                    "value": "large"
+                  },
+                  {
+                    "label": "default",
+                    "value": "default"
+                  },
+                  {
+                    "label": "small",
+                    "value": "small"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "property": "type",
+            "label": {
+              "text": {
+                "zh_CN": "类型"
+              }
+            },
+            "description": {
+              "zh_CN": "类型"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "placeholder",
+            "label": {
+              "text": {
+                "zh_CN": "占位文本"
+              }
+            },
+            "description": {
+              "zh_CN": "输入框占位文本"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "I18nConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "maxlength",
+            "label": {
+              "text": {
+                "zh_CN": "最大长度"
+              }
+            },
+            "description": {
+              "zh_CN": "最大输入长度"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "number",
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "是否禁用"
+              }
+            },
+            "description": {
+              "zh_CN": "是否禁用"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "defaultValue": false,
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "device": []
+          }
+        ],
+        "description": {
+          "zh_CN": ""
+        }
+      }
+    ],
+    "events": {
+      "onUpdate:modelValue": {
+        "label": {
+          "zh_CN": "双向绑定值改变时触发"
+        },
+        "description": {
+          "zh_CN": "双向绑定值改变时触发"
+        }
+      },
+      "onBlur": {
+        "label": {
+          "zh_CN": "输入框失去焦点时触发"
+        },
+        "description": {
+          "zh_CN": "输入框失去焦点时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生 event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    },
+    "slots": {
+      "prefix": {
+        "label": {
+          "zh_CN": "头部内容"
+        },
+        "description": {
+          "zh_CN": "输入框头部内容，只对非 type='textarea' 有效"
+        }
+      },
+      "suffix": {
+        "label": {
+          "zh_CN": "尾部内容"
+        },
+        "description": {
+          "zh_CN": "输入框尾部内容，只对非 type='textarea' 有效"
+        }
+      },
+      "prepend": {
+        "label": {
+          "zh_CN": "前置内容"
+        },
+        "description": {
+          "zh_CN": "输入框前置内容，只对非 type='textarea' 有效"
+        }
+      },
+      "append": {
+        "label": {
+          "zh_CN": "后置内容"
+        },
+        "description": {
+          "zh_CN": "输入框后置内容，只对非 type='textarea' 有效"
+        }
+      }
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "输入框"
+      },
+      "icon": "input",
+      "screenshot": "",
+      "snippetName": "ElInput",
+      "schema": {},
+      "category": "element-plus"
+    }
+  ]
+}
diff --git a/packages/materials/src/ElementPlus/ElTable.json b/packages/materials/src/ElementPlus/ElTable.json
new file mode 100644
index 0000000000..0c77634f3f
--- /dev/null
+++ b/packages/materials/src/ElementPlus/ElTable.json
@@ -0,0 +1,1288 @@
+{
+  "id": 1,
+  "version": "2.4.2",
+  "name": {
+    "zh_CN": "表单"
+  },
+  "component": "ElTable",
+  "icon": "table",
+  "description": "用于展示多条结构类似的数据， 可对数据进行排序、筛选、对比或其他自定义操作",
+  "doc_url": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "dev_mode": "proCode",
+  "npm": {
+    "package": "element-plus",
+    "exportName": "ElTable",
+    "destructuring": true
+  },
+  "group": "数据展示",
+  "category": "element-plus",
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "isPopper": false,
+    "nestingRule": {
+      "childWhitelist": ["ElTableColumn"],
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["inline", "label-width"]
+    },
+    "contextMenu": {
+      "actions": ["copy", "remove", "insert", "updateAttr", "bindEvent", "createBlock"],
+      "disable": []
+    },
+    "invalidity": [""],
+    "clickCapture": true,
+    "framework": "Vue"
+  },
+  "schema": {
+    "properties": [
+      {
+        "name": "0",
+        "label": {
+          "zh_CN": "基础属性"
+        },
+        "content": [
+          {
+            "property": "data",
+            "label": {
+              "text": {
+                "zh_CN": "数据"
+              }
+            },
+            "description": {
+              "zh_CN": "显示的数据"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "top",
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {
+                "language": "json"
+              }
+            }
+          },
+          {
+            "property": "columns",
+            "label": {
+              "text": {
+                "zh_CN": "表格列配置"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "properties": [
+              {
+                "label": {
+                  "zh_CN": "默认分组"
+                },
+                "content": [
+                  {
+                    "property": "type",
+                    "type": "string",
+                    "labelPosition": "top",
+                    "label": {
+                      "text": {
+                        "zh_CN": "type"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮"
+                      }
+                    },
+                    "widget": {
+                      "component": "SelectConfigurator",
+                      "props": {
+                        "options": [
+                          {
+                            "label": "selection",
+                            "value": "selection"
+                          },
+                          {
+                            "label": "index",
+                            "value": "index"
+                          },
+                          {
+                            "label": "expand",
+                            "value": "expand"
+                          }
+                        ]
+                      }
+                    }
+                  },
+                  {
+                    "property": "index",
+                    "type": "string",
+                    "labelPosition": "top",
+                    "label": {
+                      "text": {
+                        "zh_CN": "index"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "如果设置了 type=index，可以通过传递 index 属性来自定义索引"
+                      }
+                    },
+                    "widget": {
+                      "component": "CodeConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "label",
+                    "type": "string",
+                    "labelPosition": "top",
+                    "label": {
+                      "text": {
+                        "zh_CN": "label"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "显示的标题"
+                      }
+                    },
+                    "widget": {
+                      "component": "InputConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "column-key",
+                    "type": "string",
+                    "labelPosition": "top",
+                    "label": {
+                      "text": {
+                        "zh_CN": "column-key"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "column 的 key， column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件"
+                      }
+                    },
+                    "widget": {
+                      "component": "InputConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "prop",
+                    "type": "string",
+                    "labelPosition": "top",
+                    "label": {
+                      "text": {
+                        "zh_CN": "prop"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "字段名称 对应列内容的字段名， 也可以使用 property属性"
+                      }
+                    },
+                    "widget": {
+                      "component": "InputConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "width",
+                    "type": "number",
+                    "labelPosition": "top",
+                    "label": {
+                      "text": {
+                        "zh_CN": "width"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "对应列的宽度"
+                      }
+                    },
+                    "widget": {
+                      "component": "NumberConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "min-width",
+                    "type": "number",
+                    "labelPosition": "top",
+                    "label": {
+                      "text": {
+                        "zh_CN": "min-width"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列"
+                      }
+                    },
+                    "widget": {
+                      "component": "NumberConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "fixed",
+                    "type": "string",
+                    "labelPosition": "top",
+                    "label": {
+                      "text": {
+                        "zh_CN": "fixed"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "列是否固定在左侧或者右侧。 true 表示固定在左侧"
+                      }
+                    },
+                    "widget": {
+                      "component": "SelectConfigurator",
+                      "props": {
+                        "options": [
+                          {
+                            "label": "left",
+                            "value": "left"
+                          },
+                          {
+                            "label": "right",
+                            "value": "right"
+                          }
+                        ]
+                      }
+                    }
+                  },
+                  {
+                    "property": "sortable",
+                    "type": "boolean",
+                    "labelPosition": "left",
+                    "label": {
+                      "text": {
+                        "zh_CN": "sortable"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "对应列是否可以排序"
+                      }
+                    },
+                    "widget": {
+                      "component": "CheckBoxConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "sort-method",
+                    "type": "function",
+                    "labelPosition": "top",
+                    "label": {
+                      "text": {
+                        "zh_CN": "sort-method"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "指定数据按照哪个属性进行排序，仅当sortable设置为true的时候有效。 应该如同 Array.sort 那样返回一个 Number"
+                      }
+                    },
+                    "widget": {
+                      "component": "CodeConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "sort-by",
+                    "type": "array",
+                    "labelPosition": "top",
+                    "label": {
+                      "text": {
+                        "zh_CN": "sort-by"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推"
+                      }
+                    },
+                    "widget": {
+                      "component": "CodeConfigurator",
+                      "props": {
+                        "language": "json"
+                      }
+                    }
+                  },
+                  {
+                    "property": "sort-orders",
+                    "type": "array",
+                    "labelPosition": "top",
+                    "label": {
+                      "text": {
+                        "zh_CN": "sort-orders"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。 需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序"
+                      }
+                    },
+                    "widget": {
+                      "component": "CodeConfigurator",
+                      "props": {
+                        "language": "json"
+                      }
+                    }
+                  },
+                  {
+                    "property": "resizable",
+                    "type": "boolean",
+                    "labelPosition": "left",
+                    "defaultValue": true,
+                    "label": {
+                      "text": {
+                        "zh_CN": "resizable"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）"
+                      }
+                    },
+                    "widget": {
+                      "component": "CheckBoxConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "formatter",
+                    "type": "function",
+                    "labelPosition": "top",
+                    "defaultValue": true,
+                    "label": {
+                      "text": {
+                        "zh_CN": "formatter"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "用来格式化内容"
+                      }
+                    },
+                    "widget": {
+                      "component": "CodeConfigurator",
+                      "props": {
+                        "dataType": "JSFunction"
+                      }
+                    }
+                  },
+                  {
+                    "property": "show-overflow-tooltip",
+                    "type": "boolean",
+                    "labelPosition": "left",
+                    "defaultValue": true,
+                    "label": {
+                      "text": {
+                        "zh_CN": "show-overflow-tooltip"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "当内容过长被隐藏时显示 tooltip"
+                      }
+                    },
+                    "widget": {
+                      "component": "CheckBoxConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "align",
+                    "type": "string",
+                    "labelPosition": "top",
+                    "defaultValue": "left",
+                    "label": {
+                      "text": {
+                        "zh_CN": "align"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "对齐方式"
+                      }
+                    },
+                    "widget": {
+                      "component": "SelectConfigurator",
+                      "props": {
+                        "options": [
+                          {
+                            "label": "left",
+                            "value": "left"
+                          },
+                          {
+                            "label": "center",
+                            "value": "center"
+                          },
+                          {
+                            "label": "right",
+                            "value": "right"
+                          }
+                        ]
+                      }
+                    }
+                  },
+                  {
+                    "property": "header-align",
+                    "type": "string",
+                    "labelPosition": "top",
+                    "defaultValue": "left",
+                    "label": {
+                      "text": {
+                        "zh_CN": "header-align"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "表头对齐方式， 若不设置该项，则使用表格的对齐方式"
+                      }
+                    },
+                    "widget": {
+                      "component": "SelectConfigurator",
+                      "props": {
+                        "options": [
+                          {
+                            "label": "left",
+                            "value": "left"
+                          },
+                          {
+                            "label": "center",
+                            "value": "center"
+                          },
+                          {
+                            "label": "right",
+                            "value": "right"
+                          }
+                        ]
+                      }
+                    }
+                  },
+                  {
+                    "property": "class-name",
+                    "type": "string",
+                    "labelPosition": "top",
+                    "defaultValue": "left",
+                    "label": {
+                      "text": {
+                        "zh_CN": "class-name"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "列的 className"
+                      }
+                    },
+                    "widget": {
+                      "component": "InputConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "label-class-name",
+                    "type": "string",
+                    "labelPosition": "top",
+                    "defaultValue": "left",
+                    "label": {
+                      "text": {
+                        "zh_CN": "label-class-name"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "当前列标题的自定义类名"
+                      }
+                    },
+                    "widget": {
+                      "component": "InputConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "selectable",
+                    "type": "function",
+                    "labelPosition": "top",
+                    "defaultValue": true,
+                    "label": {
+                      "text": {
+                        "zh_CN": "selectable"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选"
+                      }
+                    },
+                    "widget": {
+                      "component": "CodeConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "reserve-selection",
+                    "type": "boolean",
+                    "labelPosition": "left",
+                    "defaultValue": true,
+                    "label": {
+                      "text": {
+                        "zh_CN": "reserve-selection"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "数据刷新后是否保留选项，仅对  type=selection 的列有效， 请注意， 需指定 row-key 来让这个功能生效。"
+                      }
+                    },
+                    "widget": {
+                      "component": "CheckBoxConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "filters",
+                    "type": "array",
+                    "labelPosition": "top",
+                    "defaultValue": true,
+                    "label": {
+                      "text": {
+                        "zh_CN": "filters"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "数据刷新后是否保留选项，仅对  type=selection 的列有效， 请注意， 需指定 row-key 来让这个功能生效。"
+                      }
+                    },
+                    "widget": {
+                      "component": "CodeConfigurator",
+                      "props": {
+                        "language": "json"
+                      }
+                    }
+                  },
+                  {
+                    "property": "filter-placement",
+                    "type": "string",
+                    "labelPosition": "top",
+                    "label": {
+                      "text": {
+                        "zh_CN": "filter-placement"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "过滤弹出框的定位"
+                      }
+                    },
+                    "widget": {
+                      "component": "InputConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "filter-multiple",
+                    "type": "string",
+                    "labelPosition": "left",
+                    "defaultValue": true,
+                    "label": {
+                      "text": {
+                        "zh_CN": "filter-multiple"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "数据过滤的选项是否多选"
+                      }
+                    },
+                    "widget": {
+                      "component": "CheckBoxConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "filter-method",
+                    "type": "function",
+                    "labelPosition": "top",
+                    "defaultValue": true,
+                    "label": {
+                      "text": {
+                        "zh_CN": "filter-method"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示"
+                      }
+                    },
+                    "widget": {
+                      "component": "CodeConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "filtered-value",
+                    "type": "array",
+                    "labelPosition": "top",
+                    "defaultValue": true,
+                    "label": {
+                      "text": {
+                        "zh_CN": "filtered-value"
+                      }
+                    },
+                    "description": {
+                      "text": {
+                        "zh_CN": "选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性"
+                      }
+                    },
+                    "widget": {
+                      "component": "CodeConfigurator",
+                      "props": {
+                        "language": "json"
+                      }
+                    }
+                  }
+                ]
+              }
+            ],
+            "widget": {
+              "component": "TableColumnsConfigurator",
+              "props": {
+                "type": "object",
+                "textField": "label",
+                "language": "json",
+                "buttonText": "编辑列配置",
+                "title": "编辑列配置",
+                "expand": true
+              }
+            },
+            "description": {
+              "zh_CN": "表格列的配置信息"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "max-height",
+            "label": {
+              "text": {
+                "zh_CN": "最大高度"
+              }
+            },
+            "description": {
+              "zh_CN": "Table 的最大高度。"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "number",
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "height",
+            "label": {
+              "text": {
+                "zh_CN": "表格高度"
+              }
+            },
+            "description": {
+              "zh_CN": "Table 的高度， 默认为自动高度。 这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "stripe",
+            "label": {
+              "text": {
+                "zh_CN": "斑马纹"
+              }
+            },
+            "description": {
+              "zh_CN": "是否为斑马纹 table"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "defaultValue": false,
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "border",
+            "label": {
+              "text": {
+                "zh_CN": "纵向边框"
+              }
+            },
+            "description": {
+              "zh_CN": "是否带有纵向边框"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "defaultValue": false,
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "size",
+            "label": {
+              "text": {
+                "zh_CN": "表格尺寸"
+              }
+            },
+            "description": {
+              "zh_CN": "Table 的尺寸"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "type": "string",
+            "defaultValue": "default",
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "large",
+                    "value": "large"
+                  },
+                  {
+                    "label": "default",
+                    "value": "default"
+                  },
+                  {
+                    "label": "small",
+                    "value": "small"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "property": "fit",
+            "label": {
+              "text": {
+                "zh_CN": "列宽自撑开"
+              }
+            },
+            "description": {
+              "zh_CN": "列的宽度是否自撑开"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "defaultValue": true,
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "show-header",
+            "label": {
+              "text": {
+                "zh_CN": "显示表头"
+              }
+            },
+            "description": {
+              "zh_CN": "是否显示表头"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "defaultValue": true,
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "highlight-current-row",
+            "label": {
+              "text": {
+                "zh_CN": "高亮当前行"
+              }
+            },
+            "description": {
+              "zh_CN": "是否要高亮当前行"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "defaultValue": false,
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "current-row-key",
+            "label": {
+              "text": {
+                "zh_CN": "当前行的 key"
+              }
+            },
+            "description": {
+              "zh_CN": "当前行的 key，只写属性"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "top",
+            "type": "string",
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "row-class-name",
+            "label": {
+              "text": {
+                "zh_CN": "行的类名"
+              }
+            },
+            "description": {
+              "zh_CN": "行的 className"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "row-key",
+            "label": {
+              "text": {
+                "zh_CN": "行数据的 Key"
+              }
+            },
+            "description": {
+              "zh_CN": "行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "top",
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "empty-text",
+            "label": {
+              "text": {
+                "zh_CN": "空数据文本"
+              }
+            },
+            "description": {
+              "zh_CN": "空数据时显示的文本内容"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "device": []
+          },
+          {
+            "property": "table-layout",
+            "label": {
+              "text": {
+                "zh_CN": "表格布局方式"
+              }
+            },
+            "description": {
+              "zh_CN": "设置表格单元、行和列的布局方式"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "top",
+            "defaultValue": "fixed",
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "fixed",
+                    "value": "fixed"
+                  },
+                  {
+                    "label": "auto",
+                    "value": "auto"
+                  }
+                ]
+              }
+            },
+            "device": []
+          },
+          {
+            "property": "scrollbar-always-on",
+            "label": {
+              "text": {
+                "zh_CN": "显示滚动条"
+              }
+            },
+            "description": {
+              "zh_CN": "总是显示滚动条"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "defaultValue": false,
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            }
+          },
+          {
+            "property": "flexible",
+            "label": {
+              "text": {
+                "zh_CN": "主轴最小尺寸"
+              }
+            },
+            "description": {
+              "zh_CN": "确保主轴的最小尺寸，以便不超过内容"
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "labelPosition": "left",
+            "defaultValue": false,
+            "type": "boolean",
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            }
+          }
+        ],
+        "description": {
+          "zh_CN": ""
+        }
+      }
+    ],
+    "events": {
+      "onSelect": {
+        "label": {
+          "zh_CN": "勾选数据行的 Checkbox 时触发"
+        },
+        "description": {
+          "zh_CN": "当用户手动勾选数据行的 Checkbox 时触发的事件"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "selection",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前选中项"
+              }
+            },
+            {
+              "name": "row",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前行"
+              }
+            }
+          ],
+          "returns": {}
+        }
+      },
+      "onSelectAll": {
+        "label": {
+          "zh_CN": "勾选全选时触发"
+        },
+        "description": {
+          "zh_CN": "当用户手动勾选全选 Checkbox 时触发的事件"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "selection",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前选中项"
+              }
+            }
+          ],
+          "returns": {}
+        }
+      },
+      "onSelectionChange": {
+        "label": {
+          "zh_CN": "选择项发生变化时会触发"
+        },
+        "description": {
+          "zh_CN": "当选择项发生变化时会触发该事件"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "selection",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前选中项"
+              }
+            }
+          ],
+          "returns": {}
+        }
+      },
+      "onCellMouseEnter": {
+        "label": {
+          "zh_CN": "单元格 hover 时会触发"
+        },
+        "description": {
+          "zh_CN": "当单元格 hover 进入时会触发该事件"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "row",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前行"
+              }
+            },
+            {
+              "name": "column",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前列"
+              }
+            },
+            {
+              "name": "cell",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前单元格"
+              }
+            },
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生事件 event"
+              }
+            }
+          ],
+          "returns": {}
+        }
+      },
+      "onCellMouseLeave": {
+        "label": {
+          "zh_CN": "单元格 hover 退出时会触发"
+        },
+        "description": {
+          "zh_CN": "当单元格 hover 退出时会触发该事件"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "row",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前行"
+              }
+            },
+            {
+              "name": "column",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前列"
+              }
+            },
+            {
+              "name": "cell",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前单元格"
+              }
+            },
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生事件 event"
+              }
+            }
+          ],
+          "returns": {}
+        }
+      }
+    },
+    "slots": {
+      "empty": {
+        "label": {
+          "zh_CN": "empty"
+        },
+        "description": {
+          "zh_CN": "当数据为空时自定义的内容"
+        }
+      },
+      "append": {
+        "label": {
+          "zh_CN": "append"
+        },
+        "description": {
+          "zh_CN": "插入至表格最后一行之后的内容， 如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。 若表格有合计行，该 slot 会位于合计行之上。"
+        }
+      }
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "表格"
+      },
+      "icon": "grid",
+      "screenshot": "",
+      "snippetName": "ElTable",
+      "schema": {
+        "props": {
+          "data": [
+            {
+              "date": "2016-05-03",
+              "name": "Tom",
+              "address": "No. 189, Grove St, Los Angeles"
+            },
+            {
+              "date": "2016-05-02",
+              "name": "Tom",
+              "address": "No. 189, Grove St, Los Angeles"
+            },
+            {
+              "date": "2016-05-04",
+              "name": "Tom",
+              "address": "No. 189, Grove St, Los Angeles"
+            },
+            {
+              "date": "2016-05-01",
+              "name": "Tom",
+              "address": "No. 189, Grove St, Los Angeles"
+            }
+          ],
+          "columns": [
+            {
+              "type": "index"
+            },
+            {
+              "label": "Date",
+              "prop": "date"
+            },
+            {
+              "label": "Name",
+              "prop": "name"
+            },
+            {
+              "label": "Address",
+              "prop": "address"
+            }
+          ]
+        }
+      },
+      "category": "element-plus"
+    }
+  ]
+}
diff --git a/packages/materials/src/ElementPlus/ElTableColumn.json b/packages/materials/src/ElementPlus/ElTableColumn.json
new file mode 100644
index 0000000000..a1bc60e2c2
--- /dev/null
+++ b/packages/materials/src/ElementPlus/ElTableColumn.json
@@ -0,0 +1,65 @@
+{
+  "id": 1,
+  "version": "2.4.2",
+  "name": {
+    "zh_CN": "表单"
+  },
+  "component": "ElTableColumn",
+  "icon": "table",
+  "description": "用于展示多条结构类似的数据， 可对数据进行排序、筛选、对比或其他自定义操作",
+  "doc_url": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "dev_mode": "proCode",
+  "npm": {
+    "package": "element-plus",
+    "exportName": "ElTableColumn",
+    "destructuring": true
+  },
+  "group": "表单组件",
+  "category": "element-plus",
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "isPopper": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["inline", "label-width"]
+    },
+    "contextMenu": {
+      "actions": ["copy", "remove", "insert", "updateAttr", "bindEvent", "createBlock"],
+      "disable": []
+    },
+    "invalidity": [""],
+    "clickCapture": true,
+    "framework": "Vue"
+  },
+  "schema": {
+    "properties": [
+      {
+        "name": "0",
+        "label": {
+          "zh_CN": "基础属性"
+        },
+        "content": [],
+        "description": {
+          "zh_CN": ""
+        }
+      }
+    ],
+    "events": {},
+    "slots": {}
+  }
+}
diff --git a/packages/materials/src/ElementPlus/meta.json b/packages/materials/src/ElementPlus/meta.json
new file mode 100644
index 0000000000..cdabd2b7d5
--- /dev/null
+++ b/packages/materials/src/ElementPlus/meta.json
@@ -0,0 +1,17 @@
+{
+  "package": {
+    "name": "element-plus组件库",
+    "package": "element-plus",
+    "version": "2.4.2",
+    "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs",
+    "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css"
+  },
+  "snippets": [
+    {
+      "group": "element-plus",
+      "label": {
+        "zh_CN": "Element Plus组件"
+      }
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyBreadcrumb.json b/packages/materials/src/TinyVue/TinyBreadcrumb.json
new file mode 100644
index 0000000000..170cac9b03
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyBreadcrumb.json
@@ -0,0 +1,167 @@
+{
+  "version": "3.20.0",
+  "icon": "breadcrumb",
+  "name": {
+    "zh_CN": "面包屑"
+  },
+  "component": "TinyBreadcrumb",
+  "description": "告诉访问者他们目前在网站中的位置以及如何返回",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Breadcrumb",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 1,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "separator",
+            "label": {
+              "text": {
+                "zh_CN": "分隔符"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "自定义分隔符"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "options",
+            "label": {
+              "text": {
+                "zh_CN": "配置数据"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {
+                "language": "json"
+              }
+            },
+            "description": {
+              "zh_CN": "单独使用 Breadcrumb，通过 option 配置生成面包屑"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "textField",
+            "label": {
+              "text": {
+                "zh_CN": "键值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "指定面包屑的显示键值，结合 options 使用"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onSelect": {
+        "label": {
+          "zh_CN": "选择 breadcrumb 时触发"
+        },
+        "description": {
+          "zh_CN": "选择 breadcrumb 时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "clickCapture": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": ["TinyBreadcrumbItem"],
+      "parentWhitelist": [],
+      "descendantBlacklist": [],
+      "ancestorWhitelist": []
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["separator"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "面包屑"
+      },
+      "icon": "breadcrumb",
+      "screenshot": "",
+      "snippetName": "TinyBreadcrumb",
+      "schema": {
+        "componentName": "TinyBreadcrumb",
+        "props": {
+          "options": [
+            {
+              "to": "{ path: '/' }",
+              "label": "首页"
+            },
+            {
+              "to": "{ path: '/breadcrumb' }",
+              "label": "产品"
+            },
+            {
+              "replace": "true",
+              "label": "软件"
+            }
+          ]
+        }
+      },
+      "category": "navigation"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyBreadcrumbItem.json b/packages/materials/src/TinyVue/TinyBreadcrumbItem.json
new file mode 100644
index 0000000000..2906b8df26
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyBreadcrumbItem.json
@@ -0,0 +1,87 @@
+{
+  "version": "3.20.0",
+  "icon": "breadcrumb",
+  "name": {
+    "zh_CN": "面包屑项"
+  },
+  "component": "TinyBreadcrumbItem",
+  "description": "",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "BreadcrumbItem",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 1,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "to",
+            "label": {
+              "text": {
+                "zh_CN": "路由跳转"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "路由跳转对象，同 vue-router 的 to"
+            }
+          }
+        ]
+      }
+    ],
+    "slots": {
+      "default": {
+        "label": {
+          "zh_CN": "面包屑项标签"
+        },
+        "description": {
+          "zh_CN": "面包屑项"
+        }
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": ["TinyBreadcrumb"],
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["to"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  }
+}
diff --git a/packages/materials/src/TinyVue/TinyButton.json b/packages/materials/src/TinyVue/TinyButton.json
new file mode 100644
index 0000000000..381aba7018
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyButton.json
@@ -0,0 +1,354 @@
+{
+  "version": "3.20.0",
+  "name": {
+    "zh_CN": "按钮"
+  },
+  "component": "TinyButton",
+  "icon": "button",
+  "description": "常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Button",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 2,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "text",
+            "type": "string",
+            "defaultValue": "按钮文案",
+            "label": {
+              "text": {
+                "zh_CN": "按钮文字"
+              }
+            },
+            "cols": 12,
+            "hidden": false,
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "widget": {
+              "component": "I18nConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "按钮文字"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "size",
+            "type": "select",
+            "label": {
+              "text": {
+                "zh_CN": "大小"
+              }
+            },
+            "cols": 12,
+            "rules": [],
+            "hidden": false,
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "large",
+                    "value": "large"
+                  },
+                  {
+                    "label": "medium",
+                    "value": "medium"
+                  },
+                  {
+                    "label": "small",
+                    "value": "small"
+                  },
+                  {
+                    "label": "mini",
+                    "value": "mini"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "按钮大小"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否被禁用"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "type",
+            "label": {
+              "text": {
+                "zh_CN": "类型"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "primary",
+                    "value": "primary"
+                  },
+                  {
+                    "label": "success",
+                    "value": "success"
+                  },
+                  {
+                    "label": "info",
+                    "value": "info"
+                  },
+                  {
+                    "label": "warning",
+                    "value": "warning"
+                  },
+                  {
+                    "label": "danger",
+                    "value": "danger"
+                  },
+                  {
+                    "label": "text",
+                    "value": "text"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "设置不同的主题样式"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      },
+      {
+        "name": "1",
+        "label": {
+          "zh_CN": "其他"
+        },
+        "content": [
+          {
+            "property": "round",
+            "label": {
+              "text": {
+                "zh_CN": "圆角"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否圆角按钮"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "plain",
+            "label": {
+              "text": {
+                "zh_CN": "朴素按钮"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否为朴素按钮"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "reset-time",
+            "label": {
+              "text": {
+                "zh_CN": "禁用时间"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "设置禁用时间，防止重复提交，单位毫秒"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "circle",
+            "label": {
+              "text": {
+                "zh_CN": "圆形按钮"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否圆形按钮"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "autofocus",
+            "label": {
+              "text": {
+                "zh_CN": "自动聚焦"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否默认聚焦"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "loading",
+            "label": {
+              "text": {
+                "zh_CN": "加载中样式"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否展示位加载中样式"
+            },
+            "labelPosition": "left"
+          }
+        ],
+        "description": {
+          "zh_CN": ""
+        }
+      }
+    ],
+    "events": {
+      "onClick": {
+        "label": {
+          "zh_CN": "点击事件"
+        },
+        "description": {
+          "zh_CN": "按钮被点击时触发的回调函数"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["text", "size"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "按钮"
+      },
+      "icon": "button",
+      "screenshot": "",
+      "snippetName": "TinyButton",
+      "schema": {
+        "componentName": "TinyButton",
+        "props": {
+          "text": "按钮文案"
+        }
+      },
+      "category": "basic"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyButtonGroup.json b/packages/materials/src/TinyVue/TinyButtonGroup.json
new file mode 100644
index 0000000000..27009d4e1d
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyButtonGroup.json
@@ -0,0 +1,187 @@
+{
+  "version": "3.20.0",
+  "name": {
+    "zh_CN": "按钮组"
+  },
+  "component": "TinyButtonGroup",
+  "icon": "buttonGroup",
+  "description": "以按钮组的方式出现，常用于多项类似操作",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "ButtonGroup",
+    "destructuring": true
+  },
+  "group": "component",
+  "category": "general",
+  "priority": 2,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "data",
+            "label": {
+              "text": {
+                "zh_CN": "数据"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {
+                "language": "json"
+              }
+            },
+            "description": {
+              "zh_CN": "配置按钮组数据"
+            }
+          },
+          {
+            "property": "size",
+            "label": {
+              "text": {
+                "zh_CN": "大小"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "mini",
+                    "value": "mini"
+                  },
+                  {
+                    "label": "small",
+                    "value": "small"
+                  },
+                  {
+                    "label": "medium",
+                    "value": "medium"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "组件大小"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "plain",
+            "label": {
+              "text": {
+                "zh_CN": "朴素按钮"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否是朴素按钮"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否禁用"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      }
+    ],
+    "events": {}
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": [],
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["disabled", "size"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "互斥按钮组"
+      },
+      "icon": "MutexButtons",
+      "snippetName": "TinyButtonGroup",
+      "screenshot": "",
+      "schema": {
+        "componentName": "TinyButtonGroup",
+        "props": {
+          "data": [
+            {
+              "text": "Button1",
+              "value": "1"
+            },
+            {
+              "text": "Button2",
+              "value": "2"
+            },
+            {
+              "text": "Button3",
+              "value": "3"
+            }
+          ],
+          "modelValue": "1"
+        }
+      },
+      "category": "basic"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyCarousel.json b/packages/materials/src/TinyVue/TinyCarousel.json
new file mode 100644
index 0000000000..91d08c288e
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyCarousel.json
@@ -0,0 +1,375 @@
+{
+  "version": "3.20.0",
+  "name": {
+    "zh_CN": "走马灯"
+  },
+  "component": "TinyCarousel",
+  "icon": "carousel",
+  "description": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Carousel",
+    "destructuring": true
+  },
+  "group": "component",
+  "category": "容器组件",
+  "priority": 2,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "arrow",
+            "label": {
+              "text": {
+                "zh_CN": "箭头显示时机"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "总是显示",
+                    "value": "always"
+                  },
+                  {
+                    "label": "鼠标悬停时显示",
+                    "value": "hover"
+                  },
+                  {
+                    "label": "从不显示",
+                    "value": "never"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "切换箭头的显示时机"
+            }
+          },
+          {
+            "property": "autoplay",
+            "label": {
+              "text": {
+                "zh_CN": "自动切换"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否自动切换"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "tabs",
+            "label": {
+              "text": {
+                "zh_CN": "选项卡"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "defaultValue": "",
+            "cols": 12,
+            "bindState": false,
+            "widget": {
+              "component": "ContainerConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "tabs 选项卡"
+            },
+            "labelPosition": "none"
+          },
+          {
+            "property": "height",
+            "label": {
+              "text": {
+                "zh_CN": "高度"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "走马灯的高度"
+            }
+          },
+          {
+            "property": "indicator-position",
+            "label": {
+              "text": {
+                "zh_CN": "位置"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "走马灯外部",
+                    "value": "outside"
+                  },
+                  {
+                    "label": "不显示",
+                    "value": "none"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "指示器的位置"
+            }
+          },
+          {
+            "property": "initial-index",
+            "label": {
+              "text": {
+                "zh_CN": "初始索引"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "初始状态激活的幻灯片的索引，从 0 开始 "
+            }
+          },
+          {
+            "property": "interval",
+            "label": {
+              "text": {
+                "zh_CN": "自动切换间隔"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "自动切换的时间间隔，单位为毫秒"
+            }
+          },
+          {
+            "property": "loop",
+            "label": {
+              "text": {
+                "zh_CN": "循环显示"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否循环显示"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "show-title",
+            "label": {
+              "text": {
+                "zh_CN": "显示标题"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否显示标题"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "trigger",
+            "label": {
+              "text": {
+                "zh_CN": "触发方式"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "点击",
+                    "value": "click"
+                  },
+                  {
+                    "label": "悬停",
+                    "value": "hover"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "指示器的触发方式，默认为 hover"
+            }
+          },
+          {
+            "property": "type",
+            "label": {
+              "text": {
+                "zh_CN": "类型"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "水平",
+                    "value": "horizontal"
+                  },
+                  {
+                    "label": "垂直",
+                    "value": "vertical"
+                  },
+                  {
+                    "label": "卡片",
+                    "value": "card"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "走马灯的类型"
+            }
+          }
+        ]
+      }
+    ],
+    "events": {}
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "clickCapture": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": ["TinyCarouselItem"],
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["disabled", "size"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "走马灯"
+      },
+      "screenshot": "",
+      "snippetName": "tiny-carousel",
+      "icon": "carousel",
+      "schema": {
+        "componentName": "TinyCarousel",
+        "props": {
+          "height": "180px"
+        },
+        "children": [
+          {
+            "componentName": "TinyCarouselItem",
+            "props": {
+              "title": "carousel-item-a"
+            },
+            "children": [
+              {
+                "componentName": "div",
+                "props": {
+                  "style": "margin:10px 0 0 30px"
+                }
+              }
+            ]
+          },
+          {
+            "componentName": "TinyCarouselItem",
+            "props": {
+              "title": "carousel-item-b"
+            },
+            "children": [
+              {
+                "componentName": "div",
+                "props": {
+                  "style": "margin:10px 0 0 30px"
+                }
+              }
+            ]
+          }
+        ]
+      },
+      "category": "data-display"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyCarouselItem.json b/packages/materials/src/TinyVue/TinyCarouselItem.json
new file mode 100644
index 0000000000..c2621b7c7b
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyCarouselItem.json
@@ -0,0 +1,131 @@
+{
+  "version": "3.20.0",
+  "name": {
+    "zh_CN": "走马灯子项"
+  },
+  "component": "TinyCarouselItem",
+  "icon": "carouselitem",
+  "description": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "CarouselItem",
+    "destructuring": true
+  },
+  "group": "component",
+  "category": "容器组件",
+  "priority": 2,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "name",
+            "label": {
+              "text": {
+                "zh_CN": "名称"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "幻灯片的名字，可用作 setActiveItem 的参数"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "title",
+            "label": {
+              "text": {
+                "zh_CN": "标题"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "幻灯片的标题"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "indicator-position",
+            "label": {
+              "text": {
+                "zh_CN": "指示器位置"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "ButtonGroupConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "outside",
+                    "value": "outside"
+                  },
+                  {
+                    "label": "none",
+                    "value": "none"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "指示器的位置"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      }
+    ],
+    "events": {}
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": [],
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["disabled", "size"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  }
+}
diff --git a/packages/materials/src/TinyVue/TinyCheckbox.json b/packages/materials/src/TinyVue/TinyCheckbox.json
new file mode 100644
index 0000000000..e5deb9517b
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyCheckbox.json
@@ -0,0 +1,274 @@
+{
+  "version": "3.20.0",
+  "icon": "checkbox",
+  "name": {
+    "zh_CN": "复选框"
+  },
+  "component": "TinyCheckbox",
+  "description": "用于配置不同场景的选项，提供用户可在一组选项中进行多选",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Checkbox",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 4,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "绑定值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "双向绑定值"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否禁用"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "checked",
+            "label": {
+              "text": {
+                "zh_CN": "勾选"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "当前是否勾选"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "text",
+            "label": {
+              "text": {
+                "zh_CN": "文本"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "复选框的文本"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      },
+      {
+        "name": "1",
+        "label": {
+          "zh_CN": "其他"
+        },
+        "content": [
+          {
+            "property": "border",
+            "label": {
+              "text": {
+                "zh_CN": "边框"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否显示边框"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "false-label",
+            "label": {
+              "text": {
+                "zh_CN": "未选中的值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "没有选中时的值"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "true-label",
+            "label": {
+              "text": {
+                "zh_CN": "选择时的值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "选中时的值"
+            },
+            "labelPosition": "left"
+          }
+        ],
+        "description": {
+          "zh_CN": ""
+        }
+      }
+    ],
+    "events": {
+      "onChange": {
+        "label": {
+          "zh_CN": "勾选值改变后将触发"
+        },
+        "description": {
+          "zh_CN": "勾选值改变后将触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "选中项的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onUpdate:modelValue": {
+        "label": {
+          "zh_CN": "双向绑定的值改变时触发"
+        },
+        "description": {
+          "zh_CN": "当前选中的值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "双向绑定的当前选中值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["border", "disabled"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "复选框"
+      },
+      "icon": "checkbox",
+      "screenshot": "",
+      "snippetName": "TinyCheckbox",
+      "schema": {
+        "componentName": "TinyCheckbox",
+        "props": {
+          "text": "复选框文案"
+        }
+      },
+      "category": "form"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyCheckboxButton.json b/packages/materials/src/TinyVue/TinyCheckboxButton.json
new file mode 100644
index 0000000000..f6f9b8d4f8
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyCheckboxButton.json
@@ -0,0 +1,186 @@
+{
+  "version": "3.20.0",
+  "icon": "checkboxbutton",
+  "name": {
+    "zh_CN": "复选按钮"
+  },
+  "component": "TinyCheckboxButton",
+  "description": "用于配置不同场景的选项，提供用户可在一组选项中进行多选",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "CheckboxButton",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 1,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "绑定值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "双向绑定的当前选中值"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否禁用"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "checked",
+            "label": {
+              "text": {
+                "zh_CN": "勾选"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "当前是否勾选"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "text",
+            "label": {
+              "text": {
+                "zh_CN": "文本"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "按钮文本"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onChange": {
+        "label": {
+          "zh_CN": "勾选值改变后将触发"
+        },
+        "description": {
+          "zh_CN": "勾选值改变后将触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "选中项的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onUpdate:modelValue": {
+        "label": {
+          "zh_CN": "双向绑定的值改变时触发"
+        },
+        "description": {
+          "zh_CN": "当前选中的值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "array",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "双向绑定的当前选中值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["text", "size"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  }
+}
diff --git a/packages/materials/src/TinyVue/TinyCheckboxGroup.json b/packages/materials/src/TinyVue/TinyCheckboxGroup.json
new file mode 100644
index 0000000000..49b8cc9088
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyCheckboxGroup.json
@@ -0,0 +1,266 @@
+{
+  "version": "3.20.0",
+  "icon": "checkboxgroup",
+  "name": {
+    "zh_CN": "复选按钮组"
+  },
+  "component": "TinyCheckboxGroup",
+  "description": "用于配置不同场景的选项，提供用户可在一组选项中进行多选",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "CheckboxGroup",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 2,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "绑定值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {
+                "dataType": "Array"
+              }
+            },
+            "description": {
+              "zh_CN": "双向绑定的当前选中值"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否禁用"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "options",
+            "label": {
+              "text": {
+                "zh_CN": "选项列表"
+              }
+            },
+            "defaultValue": [
+              {
+                "label": "标签2"
+              },
+              {
+                "label": "标签2"
+              }
+            ],
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {
+                "language": "json"
+              }
+            },
+            "description": {
+              "zh_CN": "checkbox组件列表"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "type",
+            "label": {
+              "text": {
+                "zh_CN": "类型"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "ButtonGroupConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "button",
+                    "value": "button"
+                  },
+                  {
+                    "label": "checkbox",
+                    "value": "checkbox"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "checkbox组件类型（button/checkbox），该属性的默认值为 checkbox,配合 options 属性一起使用"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onChange": {
+        "label": {
+          "zh_CN": "勾选值改变后将触发"
+        },
+        "description": {
+          "zh_CN": "勾选值改变后将触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "选中项的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onUpdate:modelValue": {
+        "label": {
+          "zh_CN": "双向绑定的值改变时触发"
+        },
+        "description": {
+          "zh_CN": "当前选中的值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "array",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "双向绑定的当前选中值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["disabled", "type"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "复选框组"
+      },
+      "icon": "checkboxs",
+      "screenshot": "",
+      "snippetName": "TinyCheckboxGroup",
+      "schema": {
+        "componentName": "TinyCheckboxGroup",
+        "props": {
+          "modelValue": ["name1", "name2"],
+          "type": "checkbox",
+          "options": [
+            {
+              "text": "复选框1",
+              "label": "name1"
+            },
+            {
+              "text": "复选框2",
+              "label": "name2"
+            },
+            {
+              "text": "复选框3",
+              "label": "name3"
+            }
+          ]
+        }
+      },
+      "category": "form"
+    },
+    {
+      "name": {
+        "zh_CN": "复选框拖拽按钮组"
+      },
+      "icon": "checkboxgroup",
+      "screenshot": "",
+      "snippetName": "TinyCheckboxbuttonGroup",
+      "schema": {
+        "componentName": "TinyCheckboxGroup",
+        "props": {
+          "modelValue": []
+        },
+        "children": [
+          {
+            "componentName": "TinyCheckboxButton",
+            "children": [
+              {
+                "componentName": "div"
+              }
+            ]
+          }
+        ]
+      },
+      "category": "form"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyCol.json b/packages/materials/src/TinyVue/TinyCol.json
new file mode 100644
index 0000000000..112f2865df
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyCol.json
@@ -0,0 +1,276 @@
+{
+  "version": "3.20.0",
+  "icon": "col",
+  "name": {
+    "zh_CN": "col"
+  },
+  "component": "TinyCol",
+  "description": "列配置信息",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Col",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 2,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "span",
+            "label": {
+              "text": {
+                "zh_CN": "栅格列格数"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "整行",
+                    "value": 12
+                  },
+                  {
+                    "label": "6格",
+                    "value": 6
+                  },
+                  {
+                    "label": "4格",
+                    "value": 4
+                  },
+                  {
+                    "label": "3格",
+                    "value": 3
+                  },
+                  {
+                    "label": "1格",
+                    "value": 1
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "当一行分为12格时，一列可占位多少格"
+            }
+          },
+          {
+            "property": "move",
+            "label": {
+              "text": {
+                "zh_CN": "栅格移动格数"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {
+                "min": -12,
+                "max": 12
+              }
+            },
+            "description": {
+              "zh_CN": "栅格左右移动格数（正数向右，负数向左）"
+            }
+          },
+          {
+            "property": "no",
+            "label": {
+              "text": {
+                "zh_CN": "排序编号"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {
+                "max": 12
+              }
+            },
+            "description": {
+              "zh_CN": "排序编号（row中启用order生效）"
+            }
+          },
+          {
+            "property": "offset",
+            "label": {
+              "text": {
+                "zh_CN": "间隔格数"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {
+                "min": 0,
+                "max": 12
+              }
+            },
+            "description": {
+              "zh_CN": "栅格左侧的间隔格数"
+            }
+          },
+          {
+            "property": "xs",
+            "label": {
+              "text": {
+                "zh_CN": "超小屏格数"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {
+                "min": 1,
+                "max": 12
+              }
+            },
+            "description": {
+              "zh_CN": "<768px 响应式栅格数"
+            }
+          },
+          {
+            "property": "sm",
+            "label": {
+              "text": {
+                "zh_CN": "小屏格数"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {
+                "min": 1,
+                "max": 12
+              }
+            },
+            "description": {
+              "zh_CN": "≥768px 响应式栅格数"
+            }
+          },
+          {
+            "property": "md",
+            "label": {
+              "text": {
+                "zh_CN": "中屏格数"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {
+                "min": 1,
+                "max": 12
+              }
+            },
+            "description": {
+              "zh_CN": "≥992px 响应式栅格数"
+            }
+          },
+          {
+            "property": "lg",
+            "label": {
+              "text": {
+                "zh_CN": "大屏格数"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {
+                "min": 1,
+                "max": 12
+              }
+            },
+            "description": {
+              "zh_CN": "≥1200px 响应式栅格数"
+            }
+          },
+          {
+            "property": "xl",
+            "label": {
+              "text": {
+                "zh_CN": "超大屏格数"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {
+                "min": 1,
+                "max": 12
+              }
+            },
+            "description": {
+              "zh_CN": "≥1920px 响应式栅格数"
+            }
+          }
+        ]
+      }
+    ],
+    "events": {}
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["label", "rules"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  }
+}
diff --git a/packages/materials/src/TinyVue/TinyCollapse.json b/packages/materials/src/TinyVue/TinyCollapse.json
new file mode 100644
index 0000000000..ed7e9e2062
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyCollapse.json
@@ -0,0 +1,180 @@
+{
+  "version": "3.20.0",
+  "icon": "collapse",
+  "name": {
+    "zh_CN": "折叠面板"
+  },
+  "component": "TinyCollapse",
+  "description": "内容区可指定动态页面或自定义 html 等，支持展开收起操作",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Collapse",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 3,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "当前激活面板"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "双向绑定当前激活的面板"
+            }
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onChange": {
+        "label": {
+          "zh_CN": "激活面板改变时触发"
+        },
+        "description": {
+          "zh_CN": "当前激活面板改变时触发(如果是手风琴模式，参数 activeNames 类型为string，否则为array)"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "data",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前激活面板的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onUpdate:modelValue": {
+        "label": {
+          "zh_CN": "双向绑定的值改变时触发"
+        },
+        "description": {
+          "zh_CN": "当前激活面板的值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "双向绑定的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["label-width", "disabled"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "折叠面板"
+      },
+      "screenshot": "",
+      "snippetName": "TinyCollapse",
+      "icon": "collapse",
+      "schema": {
+        "componentName": "TinyCollapse",
+        "props": {
+          "modelValue": "collapse1"
+        },
+        "children": [
+          {
+            "componentName": "TinyCollapseItem",
+            "props": {
+              "name": "collapse1",
+              "title": "折叠项1"
+            },
+            "children": [
+              {
+                "componentName": "div"
+              }
+            ]
+          },
+          {
+            "componentName": "TinyCollapseItem",
+            "props": {
+              "name": "collapse2",
+              "title": "折叠项2"
+            },
+            "children": [
+              {
+                "componentName": "div"
+              }
+            ]
+          },
+          {
+            "componentName": "TinyCollapseItem",
+            "props": {
+              "name": "collapse3",
+              "title": "折叠项3"
+            },
+            "children": [
+              {
+                "componentName": "div"
+              }
+            ]
+          }
+        ]
+      },
+      "category": "data-display"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyCollapseItem.json b/packages/materials/src/TinyVue/TinyCollapseItem.json
new file mode 100644
index 0000000000..6204b5b1ea
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyCollapseItem.json
@@ -0,0 +1,109 @@
+{
+  "version": "3.20.0",
+  "icon": "collapseitem",
+  "name": {
+    "zh_CN": "折叠面板项"
+  },
+  "component": "TinyCollapseItem",
+  "description": "内容区可指定动态页面或自定义 html 等，支持展开收起操作",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "CollapseItem",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 2,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "name",
+            "label": {
+              "text": {
+                "zh_CN": "唯一标识符"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "唯一标识符： String | Number"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "title",
+            "label": {
+              "text": {
+                "zh_CN": "标题"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "面板标题"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      }
+    ],
+    "events": {},
+    "slots": {
+      "title": {
+        "label": {
+          "zh_CN": "标题"
+        },
+        "description": {
+          "zh_CN": "自定义标题"
+        }
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["label-width", "disabled"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  }
+}
diff --git a/packages/materials/src/TinyVue/TinyDatePicker.json b/packages/materials/src/TinyVue/TinyDatePicker.json
new file mode 100644
index 0000000000..cb1696d310
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyDatePicker.json
@@ -0,0 +1,431 @@
+{
+  "version": "3.20.0",
+  "name": {
+    "zh_CN": "日期选择"
+  },
+  "component": "TinyDatePicker",
+  "icon": "datepick",
+  "description": "用于输入或选择日期",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "DatePicker",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 1,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "绑定值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "I18nConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "双向绑定值"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "type",
+            "label": {
+              "text": {
+                "zh_CN": "类型"
+              }
+            },
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "日期",
+                    "value": "date"
+                  },
+                  {
+                    "label": "日期时间",
+                    "value": "datetime"
+                  },
+                  {
+                    "label": "周",
+                    "value": "week"
+                  },
+                  {
+                    "label": "月份",
+                    "value": "month"
+                  },
+                  {
+                    "label": "年份",
+                    "value": "year"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "设置日期框的type属性"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "placeholder",
+            "label": {
+              "text": {
+                "zh_CN": "占位文本"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "I18nConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "输入框占位文本"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "clearable",
+            "label": {
+              "text": {
+                "zh_CN": "清除按钮"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否显示清除按钮"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否禁用"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "readonly",
+            "label": {
+              "text": {
+                "zh_CN": "只读"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否只读"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "size",
+            "label": {
+              "text": {
+                "zh_CN": "尺寸"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "medium",
+                    "value": "medium"
+                  },
+                  {
+                    "label": "small",
+                    "value": "small"
+                  },
+                  {
+                    "label": "mini",
+                    "value": "mini"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "日期框尺寸。该属性的可选值为 medium / small / mini"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      },
+      {
+        "name": "1",
+        "label": {
+          "zh_CN": "其他"
+        },
+        "content": [
+          {
+            "property": "maxlength",
+            "label": {
+              "text": {
+                "zh_CN": "输入最大长度"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "设置 input 框的maxLength"
+            }
+          },
+          {
+            "property": "autofocus",
+            "label": {
+              "text": {
+                "zh_CN": "聚焦"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "自动获取焦点"
+            },
+            "labelPosition": "left"
+          }
+        ],
+        "description": {
+          "zh_CN": ""
+        }
+      }
+    ],
+    "events": {
+      "onChange": {
+        "label": {
+          "zh_CN": "值改变时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "输入框改变后的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onInput": {
+        "label": {
+          "zh_CN": "输入值改变时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 输入值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "输入框输入的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onUpdate:modelValue": {
+        "label": {
+          "zh_CN": "双向绑定的值改变时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 输入值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "双向绑定的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onBlur": {
+        "label": {
+          "zh_CN": "失去焦点时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 失去焦点时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生 event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onFocus": {
+        "label": {
+          "zh_CN": "获取焦点时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 获取焦点时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生 event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onClear": {
+        "label": {
+          "zh_CN": "点击清空按钮时触发"
+        },
+        "description": {
+          "zh_CN": "点击清空按钮时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["value", "disabled"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "日期选择"
+      },
+      "icon": "datepick",
+      "screenshot": "",
+      "snippetName": "TinyDatePicker",
+      "schema": {
+        "componentName": "TinyDatePicker",
+        "props": {
+          "placeholder": "请输入",
+          "modelValue": ""
+        }
+      },
+      "category": "form"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyDialogBox.json b/packages/materials/src/TinyVue/TinyDialogBox.json
new file mode 100644
index 0000000000..da45a163c5
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyDialogBox.json
@@ -0,0 +1,300 @@
+{
+  "version": "3.20.0",
+  "icon": "dialogbox",
+  "name": {
+    "zh_CN": "对话框"
+  },
+  "component": "TinyDialogBox",
+  "description": "模态对话框，在浮层中显示，引导用户进行相关操作。",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "DialogBox",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 4,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "title",
+            "label": {
+              "text": {
+                "zh_CN": "标题"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "弹出框标题"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "visible",
+            "label": {
+              "text": {
+                "zh_CN": "显示与隐藏"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "控制弹出框显示与关闭"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "width",
+            "label": {
+              "text": {
+                "zh_CN": "宽度"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "弹出框的宽度"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "draggable",
+            "label": {
+              "text": {
+                "zh_CN": "可拖拽"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否开启弹窗的拖拽功能，默认值为 false 。"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "center",
+            "label": {
+              "text": {
+                "zh_CN": "居中"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "弹出框的头部与底部内容会自动居中"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "dialog-class",
+            "label": {
+              "text": {
+                "zh_CN": "自定义类名"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "自定义配置弹窗类名"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "append-to-body",
+            "label": {
+              "text": {
+                "zh_CN": "插入到Body"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "DialogBox 本身是否插入到 body 上，嵌套的 Dialog 必须指定该属性并赋值为 true"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "show-close",
+            "label": {
+              "text": {
+                "zh_CN": "关闭按钮"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否显示关闭按钮，默认值为 true 。"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      }
+    ],
+    "selector": ".TinyDialogBox",
+    "events": {
+      "onClose": {
+        "label": {
+          "zh_CN": "关闭弹窗时触发"
+        },
+        "description": {
+          "zh_CN": "Dialog 关闭的回调"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onUpdate:visible": {
+        "label": {
+          "zh_CN": "双向绑定的状态改变时触发"
+        },
+        "description": {
+          "zh_CN": "显示或隐藏的状态值，发生改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "boolean",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "双向绑定的显示或隐藏的状态值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    },
+    "slots": {
+      "title": {
+        "label": {
+          "zh_CN": "标题区"
+        },
+        "description": {
+          "zh_CN": "Dialog 标题区的内容"
+        }
+      },
+      "footer": {
+        "label": {
+          "zh_CN": "按钮操作区"
+        },
+        "description": {
+          "zh_CN": "Dialog 按钮操作区的内容"
+        }
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": true,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": ".tiny-dialog-box",
+    "shortcuts": {
+      "properties": ["visible", "width"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "对话框"
+      },
+      "screenshot": "",
+      "snippetName": "TinyDialogBox",
+      "icon": "dialogbox",
+      "schema": {
+        "componentName": "TinyDialogBox",
+        "props": {
+          "visible": true,
+          "show-close": true,
+          "title": "dialogBox title"
+        },
+        "children": [
+          {
+            "componentName": "div"
+          }
+        ]
+      },
+      "category": "data-display"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyForm.json b/packages/materials/src/TinyVue/TinyForm.json
new file mode 100644
index 0000000000..8188540220
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyForm.json
@@ -0,0 +1,426 @@
+{
+  "version": "3.20.0",
+  "icon": "form",
+  "name": {
+    "zh_CN": "表单"
+  },
+  "component": "TinyForm",
+  "description": "由按钮、输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Form",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 5,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否禁用"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "label-width",
+            "label": {
+              "text": {
+                "zh_CN": "标签宽度"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "表单中标签占位宽度，默认为 80px"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "inline",
+            "label": {
+              "text": {
+                "zh_CN": "行内布局"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "行内布局模式，默认为 false"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "label-align",
+            "label": {
+              "text": {
+                "zh_CN": "必填标识占位"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "必填标识 * 是否占位"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "label-suffix",
+            "label": {
+              "text": {
+                "zh_CN": "标签后缀"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "表单中标签后缀"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "label-position",
+            "label": {
+              "text": {
+                "zh_CN": "标签位置"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "right",
+                    "value": "right"
+                  },
+                  {
+                    "label": "left ",
+                    "value": "left "
+                  },
+                  {
+                    "label": "top",
+                    "value": "top"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "表单中标签的布局位置"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      },
+      {
+        "name": "1",
+        "label": {
+          "zh_CN": "校验属性"
+        },
+        "content": [
+          {
+            "property": "model",
+            "label": {
+              "text": {
+                "zh_CN": "数据对象"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "表单数据对象"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "rules",
+            "label": {
+              "text": {
+                "zh_CN": "校验规则"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "表单验证规则"
+            },
+            "labelPosition": "top"
+          }
+        ],
+        "description": {
+          "zh_CN": ""
+        }
+      }
+    ],
+    "events": {
+      "onValidate": {
+        "label": {
+          "zh_CN": "表单项被校验后触发"
+        },
+        "description": {
+          "zh_CN": "表单项被校验后触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "function",
+              "type": "Function",
+              "defaultValue": "(valid) => {}",
+              "description": {
+                "zh_CN": "校验回调函数"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onInput": {
+        "label": {
+          "zh_CN": "输入值改变时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 输入值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "输入框输入的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onBlur": {
+        "label": {
+          "zh_CN": "失去焦点时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 失去焦点时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生 event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onFocus": {
+        "label": {
+          "zh_CN": "获取焦点时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 获取焦点时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生 event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onClear": {
+        "label": {
+          "zh_CN": "点击清空按钮时触发"
+        },
+        "description": {
+          "zh_CN": "点击清空按钮时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": [],
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["label-width", "disabled"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "表单"
+      },
+      "screenshot": "",
+      "snippetName": "tiny-form",
+      "icon": "form",
+      "schema": {
+        "componentName": "TinyForm",
+        "props": {
+          "labelWidth": "80px",
+          "labelPosition": "top"
+        },
+        "children": [
+          {
+            "componentName": "TinyFormItem",
+            "props": {
+              "label": "人员"
+            },
+            "children": [
+              {
+                "componentName": "TinyInput",
+                "props": {
+                  "placeholder": "请输入",
+                  "modelValue": ""
+                }
+              }
+            ]
+          },
+          {
+            "componentName": "TinyFormItem",
+            "props": {
+              "label": "密码"
+            },
+            "children": [
+              {
+                "componentName": "TinyInput",
+                "props": {
+                  "placeholder": "请输入",
+                  "modelValue": "",
+                  "type": "password"
+                }
+              }
+            ]
+          },
+          {
+            "componentName": "TinyFormItem",
+            "props": {
+              "label": ""
+            },
+            "children": [
+              {
+                "componentName": "TinyButton",
+                "props": {
+                  "text": "提交",
+                  "type": "primary",
+                  "style": "margin-right: 10px"
+                }
+              },
+              {
+                "componentName": "TinyButton",
+                "props": {
+                  "text": "重置",
+                  "type": "primary"
+                }
+              }
+            ]
+          }
+        ]
+      },
+      "category": "form"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyFormItem.json b/packages/materials/src/TinyVue/TinyFormItem.json
new file mode 100644
index 0000000000..f8fae34497
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyFormItem.json
@@ -0,0 +1,130 @@
+{
+  "version": "3.20.0",
+  "icon": "formitem",
+  "name": {
+    "zh_CN": "表单项"
+  },
+  "component": "TinyFormItem",
+  "description": "由按钮、输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "FormItem",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 12,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "label",
+            "label": {
+              "text": {
+                "zh_CN": "标签文本"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "defaultValue": "标签",
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "标签文本"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "prop",
+            "label": {
+              "text": {
+                "zh_CN": "校验字段"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "required",
+            "label": {
+              "text": {
+                "zh_CN": "必填"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否必填"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      }
+    ],
+    "events": {},
+    "slots": {
+      "label": {
+        "label": {
+          "zh_CN": "字段名"
+        },
+        "description": {
+          "zh_CN": "自定义显示字段名称"
+        }
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": ["TinyForm"],
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["label", "rules"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  }
+}
diff --git a/packages/materials/src/TinyVue/TinyGrid.json b/packages/materials/src/TinyVue/TinyGrid.json
new file mode 100644
index 0000000000..62c4ef5d8d
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyGrid.json
@@ -0,0 +1,973 @@
+{
+  "version": "3.20.0",
+  "icon": "grid",
+  "name": {
+    "zh_CN": "表格"
+  },
+  "component": "TinyGrid",
+  "description": "提供了非常强大数据表格功能，可以展示数据列表，可以对数据列表进行选择、编辑等",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Grid",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 2,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础属性"
+        },
+        "description": {
+          "zh_CN": "基础属性"
+        },
+        "content": [
+          {
+            "property": "data",
+            "label": {
+              "text": {
+                "zh_CN": "表格数据"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {
+                "language": "json"
+              }
+            },
+            "onChange": "this.delProp('fetchData')",
+            "description": {
+              "zh_CN": "设置表格的数据"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "columns",
+            "label": {
+              "text": {
+                "zh_CN": "表格列"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "properties": [
+              {
+                "label": {
+                  "zh_CN": "默认分组"
+                },
+                "content": [
+                  {
+                    "property": "title",
+                    "type": "string",
+                    "defaultValue": "",
+                    "label": {
+                      "text": {
+                        "zh_CN": "列标题"
+                      }
+                    },
+                    "widget": {
+                      "component": "I18nConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "field",
+                    "type": "string",
+                    "defaultValue": "",
+                    "label": {
+                      "text": {
+                        "zh_CN": "列键值"
+                      }
+                    },
+                    "widget": {
+                      "component": "InputConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "sortable",
+                    "type": "boolean",
+                    "defaultValue": true,
+                    "label": {
+                      "text": {
+                        "zh_CN": "是否排序"
+                      }
+                    },
+                    "widget": {
+                      "component": "CheckBoxConfigurator",
+                      "props": {}
+                    },
+                    "labelPosition": "left"
+                  },
+                  {
+                    "property": "width",
+                    "type": "string",
+                    "defaultValue": "",
+                    "label": {
+                      "text": {
+                        "zh_CN": "列宽"
+                      }
+                    },
+                    "widget": {
+                      "component": "NumberConfigurator",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "property": "formatText",
+                    "type": "string",
+                    "defaultValue": "",
+                    "label": {
+                      "text": {
+                        "zh_CN": "内置渲染器"
+                      }
+                    },
+                    "widget": {
+                      "component": "SelectConfigurator",
+                      "props": {
+                        "options": [
+                          {
+                            "label": "整数",
+                            "value": "integer"
+                          },
+                          {
+                            "label": "小数",
+                            "value": "number"
+                          },
+                          {
+                            "label": "金额",
+                            "value": "money"
+                          },
+                          {
+                            "label": "百分比",
+                            "value": "rate"
+                          },
+                          {
+                            "label": "布尔",
+                            "value": "boole"
+                          },
+                          {
+                            "label": "年月日",
+                            "value": "date"
+                          },
+                          {
+                            "label": "年月日时分",
+                            "value": "dateTime"
+                          },
+                          {
+                            "label": "时间",
+                            "value": "time"
+                          },
+                          {
+                            "label": "省略",
+                            "value": "ellipsis"
+                          }
+                        ]
+                      }
+                    }
+                  },
+                  {
+                    "property": "renderer",
+                    "type": "object",
+                    "defaultValue": "",
+                    "label": {
+                      "text": {
+                        "zh_CN": "渲染函数"
+                      }
+                    },
+                    "widget": {
+                      "component": "CodeConfigurator",
+                      "props": {
+                        "dataType": "JSFunction"
+                      }
+                    }
+                  },
+                  {
+                    "property": "slots",
+                    "type": "object",
+                    "defaultValue": "",
+                    "label": {
+                      "text": {
+                        "zh_CN": "插槽"
+                      }
+                    },
+                    "labelPosition": "none",
+                    "widget": {
+                      "component": "JsSlotConfigurator",
+                      "props": {
+                        "slots": ["header", "default"]
+                      }
+                    }
+                  },
+                  {
+                    "property": "type",
+                    "label": {
+                      "text": {
+                        "zh_CN": "列类型"
+                      }
+                    },
+                    "required": false,
+                    "readOnly": false,
+                    "disabled": false,
+                    "cols": 12,
+                    "widget": {
+                      "component": "SelectConfigurator",
+                      "props": {
+                        "options": [
+                          {
+                            "label": "索引列",
+                            "value": "index"
+                          },
+                          {
+                            "label": "单选列",
+                            "value": "radio"
+                          },
+                          {
+                            "label": "多选列",
+                            "value": "selection"
+                          },
+                          {
+                            "label": "展开列",
+                            "value": "expand"
+                          }
+                        ],
+                        "clearable": true
+                      }
+                    },
+                    "description": {
+                      "zh_CN": "设置内置列的类型，该属性的可选值为 index（序号）/ selection（复选框）/ radio（单选框）/ expand（展开行）"
+                    },
+                    "labelPosition": "left"
+                  },
+                  {
+                    "property": "editor",
+                    "label": {
+                      "text": {
+                        "zh_CN": "编辑配置"
+                      }
+                    },
+                    "required": true,
+                    "readOnly": false,
+                    "disabled": false,
+                    "cols": 12,
+                    "widget": {
+                      "component": "CodeConfigurator",
+                      "props": {
+                        "language": "json"
+                      }
+                    },
+                    "description": {
+                      "zh_CN": "单元格编辑渲染配置项，也可以是函数 Function(h, params)"
+                    }
+                  },
+                  {
+                    "property": "filter",
+                    "label": {
+                      "text": {
+                        "zh_CN": "筛选配置"
+                      }
+                    },
+                    "required": false,
+                    "readOnly": false,
+                    "disabled": false,
+                    "cols": 12,
+                    "widget": {
+                      "component": "CodeConfigurator",
+                      "props": {
+                        "language": "json"
+                      }
+                    },
+                    "description": {
+                      "zh_CN": "设置表格列的筛选配置信息。默认值为 false 不配置筛选信息"
+                    }
+                  },
+                  {
+                    "property": "showOverflow",
+                    "label": {
+                      "text": {
+                        "zh_CN": "内容超出部分省略号配置"
+                      }
+                    },
+                    "required": true,
+                    "readOnly": false,
+                    "disabled": false,
+                    "cols": 12,
+                    "widget": {
+                      "component": "SelectConfigurator",
+                      "props": {
+                        "options": [
+                          {
+                            "label": "只显示省略号",
+                            "value": "ellipsis"
+                          },
+                          {
+                            "label": "显示为原生 title",
+                            "value": "title"
+                          },
+                          {
+                            "label": "显示为 tooltip 提示",
+                            "value": "tooltip"
+                          }
+                        ],
+                        "clearable": true
+                      }
+                    },
+                    "description": {
+                      "zh_CN": "设置内置列的内容超出部分显示省略号配置，该属性的可选值为 ellipsis（只显示省略号）/ title（显示为原生 title）/ tooltip（显示为 tooltip 提示）"
+                    },
+                    "labelPosition": "top"
+                  }
+                ]
+              }
+            ],
+            "widget": {
+              "component": "ArrayItemConfigurator",
+              "props": {
+                "type": "object",
+                "textField": "title",
+                "language": "json",
+                "buttonText": "编辑列配置",
+                "title": "编辑列配置",
+                "expand": true
+              }
+            },
+            "description": {
+              "zh_CN": "表格列的配置信息"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "fetchData",
+            "label": {
+              "text": {
+                "zh_CN": "服务端查询"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "onChange": "function () { this.delProp('data') } ",
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {
+                "name": "fetchData",
+                "dataType": "JSExpression"
+              }
+            },
+            "description": {
+              "zh_CN": "服务端数据查询方法"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "pager",
+            "label": {
+              "text": {
+                "zh_CN": "分页配置"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "defaultValue": {
+              "attrs": {
+                "currentPage": 1
+              }
+            },
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {
+                "name": "pager",
+                "dataType": "JSExpression"
+              }
+            },
+            "description": {
+              "zh_CN": "分页配置，需结合fetchData使用"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "resizable",
+            "label": {
+              "text": {
+                "zh_CN": "调整列宽"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否允许调整列宽"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "row-id",
+            "label": {
+              "text": {
+                "zh_CN": "行数据主键"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {
+                "placeholder": "比如：id"
+              }
+            },
+            "description": {
+              "zh_CN": "自定义行数据唯一主键的字段名（行数据必须要有唯一主键，默认自动生成）"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "select-config",
+            "label": {
+              "text": {
+                "zh_CN": "行复选框配置"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {
+                "dataType": "JSExpression"
+              }
+            },
+            "description": {
+              "zh_CN": "表格行数据复选框配置项"
+            }
+          },
+          {
+            "property": "edit-rules",
+            "label": {
+              "text": {
+                "zh_CN": "校验规则"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "表格校验规则配置项"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "edit-config",
+            "label": {
+              "text": {
+                "zh_CN": "编辑配置项"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "表格编辑配置项"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "expand-config",
+            "label": {
+              "text": {
+                "zh_CN": "展开行配置"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "展开行配置项"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "sortable",
+            "label": {
+              "text": {
+                "zh_CN": "可排序"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否允许列数据排序。默认为 true 可排序"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      },
+      {
+        "label": {
+          "zh_CN": "其他"
+        },
+        "description": {
+          "zh_CN": "其他属性"
+        },
+        "content": [
+          {
+            "property": "auto-resize",
+            "label": {
+              "text": {
+                "zh_CN": "响应式监听"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "表格属性设置 autoResize 属性开启响应式表格宽高的同时，将高度height设置为auto就可以自动跟随父容器高度。"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "border",
+            "label": {
+              "text": {
+                "zh_CN": "边框"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否带有纵向边框"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "seq-serial",
+            "label": {
+              "text": {
+                "zh_CN": "行号连续"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "设置行序号是否连续，开启分页时有效，该属性的默认值为 false"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "highlight-current-row",
+            "label": {
+              "text": {
+                "zh_CN": "高亮当前行"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "高亮当前行"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "highlight-hover-row",
+            "label": {
+              "text": {
+                "zh_CN": "移入行高亮"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "鼠标移到行是否要高亮显示"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "row-class-name",
+            "label": {
+              "text": {
+                "zh_CN": "设置行高亮"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "给行附加 className，也可以是函数 Function({seq, row, rowIndex, $rowIndex})"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "max-height",
+            "label": {
+              "text": {
+                "zh_CN": "内容最大高度"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "设置表格内容区域（不含表格头部，底部）的最大高度。"
+            }
+          },
+          {
+            "property": "row-span",
+            "label": {
+              "text": {
+                "zh_CN": "行合并"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "设置行合并,该属性仅适用于普通表格，不可与 tree-config 同时使用"
+            },
+            "labelPosition": "top"
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onFilterChange": {
+        "label": {
+          "zh_CN": "筛选条件改变时触发改事件"
+        },
+        "description": {
+          "zh_CN": "配置 remote-filter 开启服务端过滤，服务端过滤会调用表格 fetch-data 进行查询，filter-change 服务端过滤后触发的事件"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "table",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "{$table,filters} 包含 table 实例对象和过滤条件的对象"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": "function onClick(e) {}"
+      },
+      "onSortChange": {
+        "label": {
+          "zh_CN": "点击列头，执行数据排序前触发的事件"
+        },
+        "description": {
+          "zh_CN": "配置 remote-filter 开启服务端过滤，服务端过滤会调用表格 fetch-data 进行查询，filter-change 服务端过滤后触发的事件"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "table",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "{$table,filters} 包含 table 实例对象和过滤条件的对象"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": "function onClick(e) {}"
+      },
+      "onSelectAll": {
+        "label": {
+          "zh_CN": "当手动勾选全选时触发的事件"
+        },
+        "description": {
+          "zh_CN": "只对 type=selection 有效，当手动勾选全选时触发的事件"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "table",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": " 包含 table 实例对象"
+              }
+            },
+            {
+              "name": "checked",
+              "type": "boolean",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "勾选状态"
+              }
+            },
+            {
+              "name": "selction",
+              "type": "Array",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "选中的表格数据数组"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": "function onClick(e) {}"
+      },
+      "onSelectChange": {
+        "label": {
+          "zh_CN": "手动勾选并且值发生改变时触发的事件"
+        },
+        "description": {
+          "zh_CN": "只对 type=selection 有效，当手动勾选并且值发生改变时触发的事件"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "table",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": " table 实例对象"
+              }
+            },
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": " 原生 Event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": "function onClick(e) {}"
+      },
+      "onToggleExpandChange": {
+        "label": {
+          "zh_CN": "当行展开或收起时会触发该事件"
+        },
+        "description": {
+          "zh_CN": "当行展开或收起时会触发该事件"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "table",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "{$table,row,rowIndex} 包含 table 实例对象和当前行数据的对象"
+              }
+            },
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": " 原生 Event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": "function onClick(e) {}"
+      },
+      "onCurrentChange": {
+        "label": {
+          "zh_CN": "行点击时触发"
+        },
+        "description": {
+          "zh_CN": "行点击时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    },
+    "shortcuts": {
+      "properties": ["sortable", "columns"]
+    },
+    "contentMenu": {
+      "actions": ["create symbol"]
+    },
+    "onBeforeMount": "console.log('table on load'); this.pager = source.pager; this.fetchData = source.fetchData; this.data = source.data ;this.columns = source.columns"
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["sortable", "columns"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "表格"
+      },
+      "icon": "grid",
+      "screenshot": "",
+      "snippetName": "tinyGrid",
+      "schema": {
+        "componentName": "TinyGrid",
+        "props": {
+          "editConfig": {
+            "trigger": "click",
+            "mode": "cell",
+            "showStatus": true
+          },
+          "columns": [
+            {
+              "type": "index",
+              "width": 60
+            },
+            {
+              "type": "selection",
+              "width": 60
+            },
+            {
+              "field": "employees",
+              "title": "员工数"
+            },
+            {
+              "field": "created_date",
+              "title": "创建日期"
+            },
+            {
+              "field": "city",
+              "title": "城市"
+            }
+          ],
+          "data": [
+            {
+              "id": "1",
+              "name": "GFD科技有限公司",
+              "city": "福州",
+              "employees": 800,
+              "created_date": "2014-04-30 00:56:00",
+              "boole": false
+            },
+            {
+              "id": "2",
+              "name": "WWW科技有限公司",
+              "city": "深圳",
+              "employees": 300,
+              "created_date": "2016-07-08 12:36:22",
+              "boole": true
+            }
+          ]
+        }
+      },
+      "category": "table"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyGridColumn.json b/packages/materials/src/TinyVue/TinyGridColumn.json
new file mode 100644
index 0000000000..5a55adb5fc
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyGridColumn.json
@@ -0,0 +1,50 @@
+{
+  "version": "3.20.0",
+  "icon": "grid",
+  "name": {
+    "zh_CN": "表格行"
+  },
+  "component": "TinyGridColumn",
+  "description": "提供了非常强大数据表格功能，可以展示数据列表，可以对数据列表进行选择、编辑等",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "TinyGridColumn",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 2,
+  "schema": {
+    "properties": [],
+    "events": {},
+    "shortcuts": {},
+    "contentMenu": {
+      "actions": ["create symbol"]
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {},
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  }
+}
diff --git a/packages/materials/src/TinyVue/TinyInput.json b/packages/materials/src/TinyVue/TinyInput.json
new file mode 100644
index 0000000000..14da12fa69
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyInput.json
@@ -0,0 +1,430 @@
+{
+  "version": "3.20.0",
+  "name": {
+    "zh_CN": "输入框"
+  },
+  "component": "TinyInput",
+  "icon": "input",
+  "description": "通过鼠标或键盘输入字符",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Input",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 1,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "绑定值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "I18nConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "双向绑定值"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "type",
+            "label": {
+              "text": {
+                "zh_CN": "类型"
+              }
+            },
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "textarea",
+                    "value": "textarea"
+                  },
+                  {
+                    "label": "text",
+                    "value": "text"
+                  },
+                  {
+                    "label": "password",
+                    "value": "password"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "设置input框的type属性"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "rows",
+            "label": {
+              "text": {
+                "zh_CN": "行数"
+              }
+            },
+            "widget": {
+              "component": "NumberConfigurator"
+            },
+            "description": {
+              "zh_CN": "输入框行数，只对 type='textarea' 有效"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "placeholder",
+            "label": {
+              "text": {
+                "zh_CN": "占位文本"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "I18nConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "输入框占位文本"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "clearable",
+            "label": {
+              "text": {
+                "zh_CN": "清除按钮"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否显示清除按钮"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否禁用"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "size",
+            "label": {
+              "text": {
+                "zh_CN": "尺寸"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "medium",
+                    "value": "medium"
+                  },
+                  {
+                    "label": "small",
+                    "value": "small"
+                  },
+                  {
+                    "label": "mini",
+                    "value": "mini"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "输入框尺寸。该属性的可选值为 medium / small / mini"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      },
+      {
+        "name": "1",
+        "label": {
+          "zh_CN": "其他"
+        },
+        "content": [
+          {
+            "property": "maxlength",
+            "label": {
+              "text": {
+                "zh_CN": "最大输入长度"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "设置 input 框的maxLength"
+            }
+          },
+          {
+            "property": "autofocus",
+            "label": {
+              "text": {
+                "zh_CN": "自动聚焦"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "自动获取焦点"
+            },
+            "labelPosition": "left"
+          }
+        ],
+        "description": {
+          "zh_CN": ""
+        }
+      }
+    ],
+    "events": {
+      "onChange": {
+        "label": {
+          "zh_CN": "值改变时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "输入框改变后的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onInput": {
+        "label": {
+          "zh_CN": "输入值改变时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 输入值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "输入框输入的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onUpdate:modelValue": {
+        "label": {
+          "zh_CN": "双向绑定的值改变时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 输入值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "双向绑定的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onBlur": {
+        "label": {
+          "zh_CN": "失去焦点时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 失去焦点时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生 event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onFocus": {
+        "label": {
+          "zh_CN": "获取焦点时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 获取焦点时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生 event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onClear": {
+        "label": {
+          "zh_CN": "点击清空按钮时触发"
+        },
+        "description": {
+          "zh_CN": "点击清空按钮时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    },
+    "slots": {
+      "prefix": {
+        "label": {
+          "zh_CN": "前置内容"
+        }
+      },
+      "suffix": {
+        "label": {
+          "zh_CN": "后置内容"
+        }
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["value", "disabled"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "输入框"
+      },
+      "icon": "input",
+      "screenshot": "",
+      "snippetName": "TinyInput",
+      "schema": {
+        "componentName": "TinyInput",
+        "props": {
+          "placeholder": "请输入",
+          "modelValue": ""
+        }
+      },
+      "category": "form"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyLayout.json b/packages/materials/src/TinyVue/TinyLayout.json
new file mode 100644
index 0000000000..5fbd428a5a
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyLayout.json
@@ -0,0 +1,187 @@
+{
+  "version": "3.20.0",
+  "icon": "row",
+  "name": {
+    "zh_CN": "row"
+  },
+  "component": "TinyLayout",
+  "description": "定义 Layout 的行配置信息",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Layout",
+    "version": "3.20.0",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 5,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "cols",
+            "label": {
+              "text": {
+                "zh_CN": "总栅格数"
+              }
+            },
+            "cols": 12,
+            "widget": {
+              "component": "ButtonGroupConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "12",
+                    "value": 12
+                  },
+                  {
+                    "label": "24",
+                    "value": 24
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "选择总栅格数"
+            },
+            "labelPosition": "none"
+          },
+          {
+            "property": "tag",
+            "label": {
+              "text": {
+                "zh_CN": "layout渲染的标签"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "定义Layout元素渲染后的标签，默认为 div"
+            }
+          }
+        ]
+      }
+    ]
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": ["TinyRow", "TinyCol"],
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["disabled"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "栅格布局"
+      },
+      "icon": "row",
+      "screenshot": "",
+      "snippetName": "TinyLayout",
+      "schema": {
+        "componentName": "TinyLayout",
+        "props": {},
+        "children": [
+          {
+            "componentName": "TinyRow",
+            "props": {
+              "style": "padding: 10px;"
+            },
+            "children": [
+              {
+                "componentName": "TinyCol",
+                "props": {
+                  "span": 3
+                }
+              },
+              {
+                "componentName": "TinyCol",
+                "props": {
+                  "span": 3
+                }
+              },
+              {
+                "componentName": "TinyCol",
+                "props": {
+                  "span": 3
+                }
+              },
+              {
+                "componentName": "TinyCol",
+                "props": {
+                  "span": 3
+                }
+              }
+            ]
+          },
+          {
+            "componentName": "TinyRow",
+            "props": {
+              "style": "padding: 10px;"
+            },
+            "children": [
+              {
+                "componentName": "TinyCol",
+                "props": {
+                  "span": 3
+                }
+              },
+              {
+                "componentName": "TinyCol",
+                "props": {
+                  "span": 3
+                }
+              },
+              {
+                "componentName": "TinyCol",
+                "props": {
+                  "span": 3
+                }
+              },
+              {
+                "componentName": "TinyCol",
+                "props": {
+                  "span": 3
+                }
+              }
+            ]
+          }
+        ]
+      },
+      "category": "layout"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyNumeric.json b/packages/materials/src/TinyVue/TinyNumeric.json
new file mode 100644
index 0000000000..5708147cd0
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyNumeric.json
@@ -0,0 +1,461 @@
+{
+  "version": "3.20.0",
+  "name": {
+    "zh_CN": "数字输入框"
+  },
+  "component": "TinyNumeric",
+  "icon": "numeric",
+  "description": "通过鼠标或键盘输入字符",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Numeric",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 1,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "绑定值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "widget": {
+              "component": "I18nConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "双向绑定值"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "placeholder",
+            "label": {
+              "text": {
+                "zh_CN": "占位文本"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "I18nConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "输入框占位文本"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "allow-empty",
+            "label": {
+              "text": {
+                "zh_CN": "内容可清空"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否内容可清空"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否禁用"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "size",
+            "label": {
+              "text": {
+                "zh_CN": "尺寸"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "medium",
+                    "value": "medium"
+                  },
+                  {
+                    "label": "small",
+                    "value": "small"
+                  },
+                  {
+                    "label": "mini",
+                    "value": "mini"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "输入框尺寸。该属性的可选值为 medium / small / mini"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "controls",
+            "label": {
+              "text": {
+                "zh_CN": "加减按钮"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否使用加减按钮"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "controls-position",
+            "label": {
+              "text": {
+                "zh_CN": "加减按钮位置"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "左右两侧",
+                    "value": ""
+                  },
+                  {
+                    "label": "只在右侧",
+                    "value": "right"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "加减按钮位置"
+            }
+          },
+          {
+            "property": "precision",
+            "label": {
+              "text": {
+                "zh_CN": "精度"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {
+                "allowEmpty": true
+              }
+            },
+            "description": {
+              "zh_CN": "数值精度"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "step",
+            "label": {
+              "text": {
+                "zh_CN": "步长"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {
+                "allowEmpty": true
+              }
+            },
+            "description": {
+              "zh_CN": "步长"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "max",
+            "label": {
+              "text": {
+                "zh_CN": "最大数值"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {
+                "allowEmpty": true
+              }
+            },
+            "description": {
+              "zh_CN": "可输入的最大数值"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "min",
+            "label": {
+              "text": {
+                "zh_CN": "最小数值"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {
+                "allowEmpty": true
+              }
+            },
+            "description": {
+              "zh_CN": "可输入的最大数值"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onChange": {
+        "label": {
+          "zh_CN": "值改变时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "输入框改变后的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onInput": {
+        "label": {
+          "zh_CN": "输入值改变时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 输入值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "输入框输入的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onUpdate:modelValue": {
+        "label": {
+          "zh_CN": "双向绑定的值改变时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 输入值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "双向绑定的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onBlur": {
+        "label": {
+          "zh_CN": "失去焦点时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 失去焦点时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生 event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onFocus": {
+        "label": {
+          "zh_CN": "获取焦点时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 获取焦点时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生 event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onClear": {
+        "label": {
+          "zh_CN": "点击清空按钮时触发"
+        },
+        "description": {
+          "zh_CN": "点击清空按钮时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["value", "disabled"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "数字输入框"
+      },
+      "icon": "numeric",
+      "screenshot": "",
+      "snippetName": "TinyNumeric",
+      "schema": {
+        "componentName": "TinyNumeric",
+        "props": {
+          "allow-empty": true,
+          "placeholder": "请输入",
+          "controls-position": "right",
+          "step": 1
+        }
+      },
+      "category": "form"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyPager.json b/packages/materials/src/TinyVue/TinyPager.json
new file mode 100644
index 0000000000..a12977cea0
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyPager.json
@@ -0,0 +1,251 @@
+{
+  "version": "3.20.0",
+  "name": {
+    "zh_CN": "分页"
+  },
+  "component": "TinyPager",
+  "icon": "pager",
+  "description": "当数据量过多时，使用分页分解数据，常用于 Grid 和 Repeater 组件",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Pager",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 1,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "currentPage",
+            "label": {
+              "text": {
+                "zh_CN": "当前页数"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "当前页数，支持 .sync 修饰符"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "pageSize",
+            "label": {
+              "text": {
+                "zh_CN": "每页条数"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "每页显示条目个数"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "pageSizes",
+            "label": {
+              "text": {
+                "zh_CN": "可选每页条数"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "设置可选择的每页显示条数"
+            }
+          },
+          {
+            "property": "total",
+            "label": {
+              "text": {
+                "zh_CN": "总条数"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "数据总条数"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "layout",
+            "label": {
+              "text": {
+                "zh_CN": "布局"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "defaultValue": "total,sizes,prev, pager, next",
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {
+                "type": "textarea"
+              }
+            },
+            "description": {
+              "zh_CN": "组件布局，子组件名用逗号分隔"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onCurrentChange ": {
+        "label": {
+          "zh_CN": "切换页码时触发"
+        },
+        "description": {
+          "zh_CN": "切换页码时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前页的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onPrevClick ": {
+        "label": {
+          "zh_CN": "点击上一页按钮时触发"
+        },
+        "description": {
+          "zh_CN": "点击上一页按钮时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "page",
+              "type": "String",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前页的页码值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onNextClick": {
+        "label": {
+          "zh_CN": "点击下一页按钮时触发"
+        },
+        "description": {
+          "zh_CN": "点击上一页按钮时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "page",
+              "type": "String",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前页的页码值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["currentPage", "total"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "分页"
+      },
+      "icon": "pager",
+      "screenshot": "",
+      "snippetName": "TinyPager",
+      "schema": {
+        "componentName": "TinyPager",
+        "props": {
+          "layout": "total, sizes, prev, pager, next",
+          "total": 100,
+          "pageSize": 10,
+          "currentPage": 1
+        }
+      },
+      "category": "table"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyPopeditor.json b/packages/materials/src/TinyVue/TinyPopeditor.json
new file mode 100644
index 0000000000..235218fc1f
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyPopeditor.json
@@ -0,0 +1,462 @@
+{
+  "version": "3.20.0",
+  "name": {
+    "zh_CN": "弹出编辑"
+  },
+  "component": "TinyPopeditor",
+  "icon": "popEditor",
+  "description": "该组件只能在弹出的面板中选择数据，不能手动输入数据；弹出面板中显示为 Tree 组件或者 Grid 组件",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Popeditor",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 6,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "绑定值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "双向绑定值"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "placeholder",
+            "label": {
+              "text": {
+                "zh_CN": "占位文本"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "输入框占位文本"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "show-clear-btn",
+            "label": {
+              "text": {
+                "zh_CN": "清除按钮"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否显示清除按钮"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否禁用"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "auto-lookup",
+            "label": {
+              "text": {
+                "zh_CN": "自动请求数据"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "defaultValue": true,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "初始化时是否自动请求数据,默认 true"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      },
+      {
+        "name": "1",
+        "label": {
+          "zh_CN": "其他"
+        },
+        "content": [
+          {
+            "property": "width",
+            "label": {
+              "text": {
+                "zh_CN": "宽度"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "设置弹出面板的宽度（单位像素）"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "conditions",
+            "label": {
+              "text": {
+                "zh_CN": "过滤条件"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "当弹出面板配置的是表格时，设置弹出面板中的过滤条件"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "grid-op",
+            "label": {
+              "text": {
+                "zh_CN": "面板表格配置"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "设置弹出面板中表格组件的配置信息"
+            }
+          },
+          {
+            "property": "pager-op",
+            "label": {
+              "text": {
+                "zh_CN": "分页配置"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "设置弹出编辑框中分页配置"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "multi",
+            "label": {
+              "text": {
+                "zh_CN": "多选"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "设置弹出面板中的数据是否可多选"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "show-pager",
+            "label": {
+              "text": {
+                "zh_CN": "启用分页"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "当 popseletor 为 grid 时才能生效，配置为 true 后还需配置 pagerOp 属性"
+            },
+            "labelPosition": "left"
+          }
+        ],
+        "description": {
+          "zh_CN": ""
+        }
+      }
+    ],
+    "events": {
+      "onChange": {
+        "label": {
+          "zh_CN": "选中值改变时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前选中项的值"
+              }
+            },
+            {
+              "name": "value",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前选中对象"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onUpdate:modelValue": {
+        "label": {
+          "zh_CN": "双向绑定的值改变时触发"
+        },
+        "description": {
+          "zh_CN": "当前选中的值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "双向绑定的当前选中值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onClose": {
+        "label": {
+          "zh_CN": "弹框关闭时触发的事件"
+        },
+        "description": {
+          "zh_CN": "弹框关闭时触发的事件"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onPageChange": {
+        "label": {
+          "zh_CN": "分页切换事件"
+        },
+        "description": {
+          "zh_CN": "表格模式下分页切换事件"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "String",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前页码数"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["modelValue", "disabled"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "弹出编辑"
+      },
+      "icon": "popeditor",
+      "screenshot": "",
+      "snippetName": "TinyPopeditor",
+      "schema": {
+        "componentName": "TinyPopeditor",
+        "props": {
+          "modelValue": "",
+          "placeholder": "请选择",
+          "grid-op": {
+            "columns": [
+              {
+                "field": "id",
+                "title": "ID",
+                "width": 40
+              },
+              {
+                "field": "name",
+                "title": "名称",
+                "showOverflow": "tooltip"
+              },
+              {
+                "field": "province",
+                "title": "省份",
+                "width": 80
+              },
+              {
+                "field": "city",
+                "title": "城市",
+                "width": 80
+              }
+            ],
+            "data": [
+              {
+                "id": "1",
+                "name": "GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司",
+                "city": "福州",
+                "province": "福建"
+              },
+              {
+                "id": "2",
+                "name": "WWW科技有限公司",
+                "city": "深圳",
+                "province": "广东"
+              },
+              {
+                "id": "3",
+                "name": "RFV有限责任公司",
+                "city": "中山",
+                "province": "广东"
+              },
+              {
+                "id": "4",
+                "name": "TGB科技有限公司",
+                "city": "龙岩",
+                "province": "福建"
+              },
+              {
+                "id": "5",
+                "name": "YHN科技有限公司",
+                "city": "韶关",
+                "province": "广东"
+              },
+              {
+                "id": "6",
+                "name": "WSX科技有限公司",
+                "city": "黄冈",
+                "province": "武汉"
+              }
+            ]
+          }
+        }
+      },
+      "category": "data-display"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyPopover.json b/packages/materials/src/TinyVue/TinyPopover.json
new file mode 100644
index 0000000000..b32b968e23
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyPopover.json
@@ -0,0 +1,543 @@
+{
+  "version": "3.20.0",
+  "icon": "popover",
+  "name": {
+    "zh_CN": "提示框"
+  },
+  "component": "TinyPopover",
+  "description": "Popover可通过对一个触发源操作触发弹出框,支持自定义弹出内容，延迟触发和渐变动画",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Popover",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 7,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "绑定值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "双向绑定，手动控制是否可见的状态值"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "placement",
+            "label": {
+              "text": {
+                "zh_CN": "位置"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "top",
+                    "value": "top"
+                  },
+                  {
+                    "label": "top-start",
+                    "value": "top-start"
+                  },
+                  {
+                    "label": "top-end",
+                    "value": "top-end"
+                  },
+                  {
+                    "label": "bottom",
+                    "value": "bottom"
+                  },
+                  {
+                    "label": "bottom-start",
+                    "value": "bottom-start"
+                  },
+                  {
+                    "label": "bottom-end",
+                    "value": "bottom-end"
+                  },
+                  {
+                    "label": "left",
+                    "value": "left"
+                  },
+                  {
+                    "label": "left-start",
+                    "value": "left-start"
+                  },
+                  {
+                    "label": "left-end",
+                    "value": "left-end"
+                  },
+                  {
+                    "label": "right",
+                    "value": "right"
+                  },
+                  {
+                    "label": "right-start",
+                    "value": "right-start"
+                  },
+                  {
+                    "label": "right-end",
+                    "value": "right-end"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "提示框位置"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "trigger",
+            "label": {
+              "text": {
+                "zh_CN": "触发方式"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "click",
+                    "value": "click"
+                  },
+                  {
+                    "label": "focus",
+                    "value": "focus"
+                  },
+                  {
+                    "label": "hover",
+                    "value": "hover"
+                  },
+                  {
+                    "label": "manual",
+                    "value": "manual"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "触发方式，该属性的可选值为 click / focus / hover / manual，该属性的默认值为 click"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "popper-class",
+            "label": {
+              "text": {
+                "zh_CN": "自定义类"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "为 popper 添加类名"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "visible-arrow",
+            "label": {
+              "text": {
+                "zh_CN": "显示箭头"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否显示 Tooltip 箭头"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "append-to-body",
+            "label": {
+              "text": {
+                "zh_CN": "添加到body上"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "Popover弹窗是否添加到body上"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "arrow-offset",
+            "label": {
+              "text": {
+                "zh_CN": "箭头的位置偏移"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "箭头的位置偏移，该属性的默认值为 0"
+            }
+          },
+          {
+            "property": "close-delay",
+            "label": {
+              "text": {
+                "zh_CN": "延迟隐藏"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "触发方式为 hover 时的隐藏延迟，单位为毫秒"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "content",
+            "label": {
+              "text": {
+                "zh_CN": "显示的内容"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "显示的内容，也可以通过 slot 传入 DOM"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "Popover 是否可用"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "offset",
+            "label": {
+              "text": {
+                "zh_CN": "位置偏移量"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "出现位置的偏移量"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "open-delay",
+            "label": {
+              "text": {
+                "zh_CN": "显示延迟"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "触发方式为 hover 时的显示延迟，单位为毫秒"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "popper-options",
+            "label": {
+              "text": {
+                "zh_CN": "弹出层参数"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "popper.js 的参数"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "title",
+            "label": {
+              "text": {
+                "zh_CN": "标题"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "提示内容标题"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "transform-origin",
+            "label": {
+              "text": {
+                "zh_CN": "旋转中心点"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "组件的旋转中心点,组件的旋转中心点"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "transition",
+            "label": {
+              "text": {
+                "zh_CN": "渐变动画"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "该属性的默认值为 fade-in-linear"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "width",
+            "label": {
+              "text": {
+                "zh_CN": "宽度"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "宽度"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onUpdate:modelValue": {
+        "label": {
+          "zh_CN": "双向绑定的值改变时触发"
+        },
+        "description": {
+          "zh_CN": "手动控制是否可见的状态值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "boolean",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "双向绑定的可见状态值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "isModal": false,
+    "isPopper": true,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["visible", "width"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "提示框"
+      },
+      "icon": "popover",
+      "screenshot": "",
+      "snippetName": "TinyPopover",
+      "schema": {
+        "componentName": "TinyPopover",
+        "props": {
+          "width": 200,
+          "title": "弹框标题",
+          "trigger": "manual",
+          "modelValue": true
+        },
+        "children": [
+          {
+            "componentName": "Template",
+            "props": {
+              "slot": "reference"
+            },
+            "children": [
+              {
+                "componentName": "div",
+                "props": {
+                  "placeholder": "触发源"
+                }
+              }
+            ]
+          },
+          {
+            "componentName": "Template",
+            "props": {
+              "slot": "default"
+            },
+            "children": [
+              {
+                "componentName": "div",
+                "props": {
+                  "placeholder": "提示内容"
+                }
+              }
+            ]
+          }
+        ]
+      },
+      "category": "data-display"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyRadio.json b/packages/materials/src/TinyVue/TinyRadio.json
new file mode 100644
index 0000000000..a95360fd5b
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyRadio.json
@@ -0,0 +1,253 @@
+{
+  "version": "3.20.0",
+  "icon": "radio",
+  "name": {
+    "zh_CN": "单选"
+  },
+  "component": "TinyRadio",
+  "description": "用于配置不同场景的选项，在一组备选项中进行单选",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Radio",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 3,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "text",
+            "label": {
+              "text": {
+                "zh_CN": "文本内容"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "单选框文本内容"
+            }
+          },
+          {
+            "property": "label",
+            "label": {
+              "text": {
+                "zh_CN": "选中值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "radio 选中时的值"
+            }
+          },
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "绑定值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "双向绑定的当前选中值"
+            }
+          },
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否禁用"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      },
+      {
+        "label": {
+          "zh_CN": "其他"
+        },
+        "description": {
+          "zh_CN": ""
+        },
+        "content": [
+          {
+            "property": "border",
+            "label": {
+              "text": {
+                "zh_CN": "显示边框"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否显示边框"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "size",
+            "label": {
+              "text": {
+                "zh_CN": "尺寸"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "单选框的尺寸，仅在 border 为true时有效"
+            }
+          },
+          {
+            "property": "name",
+            "label": {
+              "text": {
+                "zh_CN": "原生name属性"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "原生 name 属性"
+            }
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onChange": {
+        "label": {
+          "zh_CN": "值变化事件"
+        },
+        "description": {
+          "zh_CN": "绑定值变化时触发的事件"
+        }
+      },
+      "onUpdate:modelValue": {
+        "label": {
+          "zh_CN": "双向绑定的值改变时触发"
+        },
+        "description": {
+          "zh_CN": "当前选中的值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "双向绑定的当前选中值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["visible", "width"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "单选"
+      },
+      "icon": "radio",
+      "screenshot": "",
+      "snippetName": "TinyRadio",
+      "schema": {
+        "componentName": "TinyRadio",
+        "props": {
+          "label": "1",
+          "text": "单选文本"
+        }
+      },
+      "category": "form"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyRow.json b/packages/materials/src/TinyVue/TinyRow.json
new file mode 100644
index 0000000000..8cf814e58b
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyRow.json
@@ -0,0 +1,148 @@
+{
+  "version": "3.20.0",
+  "icon": "row",
+  "name": {
+    "zh_CN": "row"
+  },
+  "component": "TinyRow",
+  "description": "定义 Layout 的行配置信息",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Row",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 5,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "layout",
+            "label": {
+              "text": {
+                "zh_CN": "布局"
+              }
+            },
+            "cols": 12,
+            "widget": {
+              "component": "LayoutGridConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "选择布局方式"
+            },
+            "labelPosition": "none"
+          },
+          {
+            "property": "align",
+            "label": {
+              "text": {
+                "zh_CN": "子项对齐方式"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "top",
+                    "value": "top"
+                  },
+                  {
+                    "label": "middle",
+                    "value": "middle"
+                  },
+                  {
+                    "label": "bottom",
+                    "value": "bottom"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "子项的副轴对齐方向，可取值：top, middle, bottom"
+            }
+          },
+          {
+            "property": "flex",
+            "label": {
+              "text": {
+                "zh_CN": "flex容器"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否为flex容器"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "gutter",
+            "label": {
+              "text": {
+                "zh_CN": "子项间隔"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "子项的间隔的像素"
+            }
+          }
+        ]
+      }
+    ]
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": [],
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["label-width", "disabled"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  }
+}
diff --git a/packages/materials/src/TinyVue/TinySearch.json b/packages/materials/src/TinyVue/TinySearch.json
new file mode 100644
index 0000000000..3f1366cccb
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinySearch.json
@@ -0,0 +1,291 @@
+{
+  "version": "3.20.0",
+  "icon": "search",
+  "name": {
+    "zh_CN": "搜索框"
+  },
+  "component": "TinySearch",
+  "description": "指定条件对象进行搜索数据",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Search",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 2,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "默认值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "输入框内的默认搜索值"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否被禁用"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "placeholder",
+            "label": {
+              "text": {
+                "zh_CN": "占位文本"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "输入框内的提示占位文本"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "clearable",
+            "label": {
+              "text": {
+                "zh_CN": "清空按钮"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "设置显示清空图标按钮"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "isEnterSearch",
+            "label": {
+              "text": {
+                "zh_CN": "Enter键触发"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否在按下键盘Enter键的时候触发search事件"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      },
+      {
+        "name": "1",
+        "label": {
+          "zh_CN": "其他"
+        },
+        "content": [
+          {
+            "property": "mini",
+            "label": {
+              "text": {
+                "zh_CN": "迷你尺寸"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "迷你模式，配置为true时，搜索默认显示为一个带图标的圆形按钮，点击后展开"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "transparent",
+            "label": {
+              "text": {
+                "zh_CN": "透明模式"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "配置为true时，边框变为透明且收缩后半透明显示，一般用在带有背景的场景，默认 false"
+            },
+            "labelPosition": "left"
+          }
+        ],
+        "description": {
+          "zh_CN": ""
+        }
+      }
+    ],
+    "events": {
+      "onChange": {
+        "label": {
+          "zh_CN": "输入完成时触发"
+        },
+        "description": {
+          "zh_CN": "在 input 框中输入完成时触发的回调函数"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "type",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "搜索类型,默认值为 {} "
+              }
+            },
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前input框中值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onSearch": {
+        "label": {
+          "zh_CN": "点击搜索按钮时触发"
+        },
+        "description": {
+          "zh_CN": "展开状态点击搜索按钮时触发的回调函数"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "type",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "搜索类型,默认值为 {} "
+              }
+            },
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前input框中值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["clearable", "mini"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "搜索框"
+      },
+      "icon": "search",
+      "screenshot": "",
+      "snippetName": "TinySearch",
+      "schema": {
+        "componentName": "TinySearch",
+        "props": {
+          "modelValue": "",
+          "placeholder": "输入关键词"
+        }
+      },
+      "category": "basic"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinySelect.json b/packages/materials/src/TinyVue/TinySelect.json
new file mode 100644
index 0000000000..358a7b67e2
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinySelect.json
@@ -0,0 +1,431 @@
+{
+  "version": "3.20.0",
+  "icon": "select",
+  "name": {
+    "zh_CN": "下拉框"
+  },
+  "component": "TinySelect",
+  "description": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Select",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 8,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "绑定值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "双向绑定的当前选中值"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "placeholder",
+            "label": {
+              "text": {
+                "zh_CN": "占位文本"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "输入框占位文本"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "clearable",
+            "label": {
+              "text": {
+                "zh_CN": "清除按钮"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否显示清除按钮"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "searchable",
+            "label": {
+              "text": {
+                "zh_CN": "下拉可搜索"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "下拉面板是否可搜索"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否禁用"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "options",
+            "label": {
+              "text": {
+                "zh_CN": "选项数据"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {
+                "language": "json"
+              }
+            },
+            "description": {
+              "zh_CN": "配置 Select 下拉数据项"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "multiple",
+            "label": {
+              "text": {
+                "zh_CN": "多选"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否允许输入框输入或选择多个项"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      },
+      {
+        "name": "1",
+        "label": {
+          "zh_CN": "其他"
+        },
+        "content": [
+          {
+            "property": "multiple-limit",
+            "label": {
+              "text": {
+                "zh_CN": "最大可选值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "多选时用户最多可以选择的项目数，为 0 则不限制"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "popper-class",
+            "label": {
+              "text": {
+                "zh_CN": "下拉框类名"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "设置下拉框自定义的类名"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "collapse-tags",
+            "label": {
+              "text": {
+                "zh_CN": "多选展示"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "多选时是否将选中值按文字的形式展示"
+            },
+            "labelPosition": "left"
+          }
+        ],
+        "description": {
+          "zh_CN": ""
+        }
+      }
+    ],
+    "events": {
+      "onChange": {
+        "label": {
+          "zh_CN": "值改变时触发"
+        },
+        "description": {
+          "zh_CN": "在下拉框值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "下拉框选中项的值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onUpdate:modelValue": {
+        "label": {
+          "zh_CN": "双向绑定的值改变时触发"
+        },
+        "description": {
+          "zh_CN": "当前选中的值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "双向绑定的当前选中值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onBlur": {
+        "label": {
+          "zh_CN": "失去焦点时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 失去焦点时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生 event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onFocus": {
+        "label": {
+          "zh_CN": "获取焦点时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 获取焦点时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生 event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onClear": {
+        "label": {
+          "zh_CN": "点击清空按钮时触发"
+        },
+        "description": {
+          "zh_CN": "点击清空按钮时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onRemoveTag": {
+        "label": {
+          "zh_CN": "多选模式下移除tag时触发"
+        },
+        "description": {
+          "zh_CN": "多选模式下移除tag时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "被移除Tag对应数据项的值字段"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    },
+    "onBeforeMount": "console.log('table on load'); this.options = source.data"
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["multiple", "options"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "下拉框"
+      },
+      "icon": "select",
+      "screenshot": "",
+      "snippetName": "TinySelect",
+      "schema": {
+        "componentName": "TinySelect",
+        "props": {
+          "modelValue": "",
+          "placeholder": "请选择",
+          "options": [
+            {
+              "value": "1",
+              "label": "黄金糕"
+            },
+            {
+              "value": "2",
+              "label": "双皮奶"
+            }
+          ]
+        }
+      },
+      "category": "form"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinySwitch.json b/packages/materials/src/TinyVue/TinySwitch.json
new file mode 100644
index 0000000000..376ddeba9a
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinySwitch.json
@@ -0,0 +1,214 @@
+{
+  "version": "3.20.0",
+  "icon": "switch",
+  "name": {
+    "zh_CN": "开关"
+  },
+  "component": "TinySwitch",
+  "description": "Switch 在两种状态间切换选择",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Switch",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 9,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "disabled",
+            "label": {
+              "text": {
+                "zh_CN": "禁用"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否被禁用"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "绑定值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "绑定默认值"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "true-value",
+            "label": {
+              "text": {
+                "zh_CN": "设置打开值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "设置打开时的值(Boolean / String / Number)"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "false-value",
+            "label": {
+              "text": {
+                "zh_CN": "设置关闭值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "设置关闭时的值(Boolean / String / Number)"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "mini",
+            "label": {
+              "text": {
+                "zh_CN": "迷你尺寸"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否显示为 mini 模式"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onChange": {
+        "label": {
+          "zh_CN": "点击事件"
+        },
+        "description": {
+          "zh_CN": "按钮被点击时触发的回调函数"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onUpdate:modelValue": {
+        "label": {
+          "zh_CN": "双向绑定的值改变时触发"
+        },
+        "description": {
+          "zh_CN": "开关的状态值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "双向绑定的开关状态值"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["disabled", "mini"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "开关"
+      },
+      "icon": "switch",
+      "screenshot": "",
+      "snippetName": "TinySwitch",
+      "schema": {
+        "componentName": "TinySwitch",
+        "props": {
+          "modelValue": ""
+        }
+      },
+      "category": "form"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyTabItem.json b/packages/materials/src/TinyVue/TinyTabItem.json
new file mode 100644
index 0000000000..a90d58fe67
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyTabItem.json
@@ -0,0 +1,107 @@
+{
+  "version": "3.20.0",
+  "icon": "tabitem",
+  "name": {
+    "zh_CN": "tab页签"
+  },
+  "component": "TinyTabItem",
+  "description": "tab 标签页",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "TabItem",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 2,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "name",
+            "label": {
+              "text": {
+                "zh_CN": "唯一标识"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "唯一标识"
+            }
+          },
+          {
+            "property": "title",
+            "label": {
+              "text": {
+                "zh_CN": "标题"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "标题"
+            }
+          }
+        ]
+      }
+    ],
+    "events": {},
+    "slots": {
+      "title": {
+        "label": {
+          "zh_CN": "标题"
+        },
+        "description": {
+          "zh_CN": "自定义标题"
+        }
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": ["TinyTab"],
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["name", "title"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  }
+}
diff --git a/packages/materials/src/TinyVue/TinyTabs.json b/packages/materials/src/TinyVue/TinyTabs.json
new file mode 100644
index 0000000000..d149803b1f
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyTabs.json
@@ -0,0 +1,309 @@
+{
+  "version": "3.20.0",
+  "icon": "tabs",
+  "name": {
+    "zh_CN": "标签页"
+  },
+  "component": "TinyTabs",
+  "description": "分隔内容上有关联但属于不同类别的数据集合",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Tabs",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 10,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "tabs",
+            "label": {
+              "text": {
+                "zh_CN": "选项卡"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "defaultValue": "",
+            "cols": 12,
+            "bindState": false,
+            "widget": {
+              "component": "ContainerConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "tabs 选项卡"
+            },
+            "labelPosition": "none"
+          },
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "绑定值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "绑定值，选中选项卡的 name"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "with-add",
+            "label": {
+              "text": {
+                "zh_CN": "标签新增"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "标签是否可增加"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "with-close",
+            "label": {
+              "text": {
+                "zh_CN": "可关闭"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "标签是否可关闭"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "tab-style",
+            "label": {
+              "text": {
+                "zh_CN": "标签页样式"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "card",
+                    "value": "card"
+                  },
+                  {
+                    "label": "border-card",
+                    "value": "border-card"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "标签页样式"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onClick": {
+        "label": {
+          "zh_CN": "点击页签时触发事件"
+        },
+        "description": {
+          "zh_CN": "在 Input 值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "component",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前点击的页签对象"
+              }
+            },
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生 event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onEdit": {
+        "label": {
+          "zh_CN": "点击新增按钮或关闭按钮或者编辑按钮后触发"
+        },
+        "description": {
+          "zh_CN": "点击新增按钮或关闭按钮或者编辑按钮后触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "tab",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前操作的页签对象"
+              }
+            },
+            {
+              "name": "type",
+              "type": "String",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前操作的类型（remove || add || edit）"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onClose": {
+        "label": {
+          "zh_CN": "关闭页签时触发"
+        },
+        "description": {
+          "zh_CN": "关闭页签时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "name",
+              "type": "String",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "页签名称"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "clickCapture": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": ["TinyTabItem"],
+      "parentWhitelist": [],
+      "descendantBlacklist": [],
+      "ancestorWhitelist": []
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["size", "tab-style"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "标签页"
+      },
+      "icon": "tabs",
+      "screenshot": "",
+      "group": true,
+      "snippetName": "TinyTabs",
+      "schema": {
+        "componentName": "TinyTabs",
+        "props": {
+          "modelValue": "first"
+        },
+        "children": [
+          {
+            "componentName": "TinyTabItem",
+            "props": {
+              "title": "标签页1",
+              "name": "first"
+            },
+            "children": [
+              {
+                "componentName": "div",
+                "props": {
+                  "style": "margin:10px 0 0 30px"
+                }
+              }
+            ]
+          },
+          {
+            "componentName": "TinyTabItem",
+            "props": {
+              "title": "标签页2",
+              "name": "second"
+            },
+            "children": [
+              {
+                "componentName": "div",
+                "props": {
+                  "style": "margin:10px 0 0 30px"
+                }
+              }
+            ]
+          }
+        ]
+      },
+      "category": "navigation"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyTimeLine.json b/packages/materials/src/TinyVue/TinyTimeLine.json
new file mode 100644
index 0000000000..e418ccfd7f
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyTimeLine.json
@@ -0,0 +1,204 @@
+{
+  "version": "3.20.0",
+  "icon": "timeline",
+  "name": {
+    "zh_CN": "时间线"
+  },
+  "component": "TinyTimeLine",
+  "description": "TimeLine 时间线",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "TimeLine",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 3,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "vertical",
+            "type": "Boolean",
+            "defaultValue": {
+              "type": "i18n",
+              "zh_CN": "垂直布局",
+              "en_US": "layout",
+              "key": ""
+            },
+            "label": {
+              "text": {
+                "zh_CN": "垂直布局"
+              }
+            },
+            "cols": 12,
+            "rules": [],
+            "hidden": false,
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "节点和文字垂直布局"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "active",
+            "label": {
+              "text": {
+                "zh_CN": "选中值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "步骤条的选中步骤值"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "data",
+            "label": {
+              "text": {
+                "zh_CN": "步骤条数据"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "defaultValue": [
+              {
+                "name": "配置基本信息",
+                "status": "ready"
+              },
+              {
+                "name": "配置报价",
+                "status": "wait"
+              },
+              {
+                "name": "完成报价",
+                "status": "wait"
+              }
+            ],
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {
+                "language": "json"
+              }
+            },
+            "description": {
+              "zh_CN": "时间线步骤条数据"
+            },
+            "labelPosition": "top"
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onClick": {
+        "label": {
+          "zh_CN": "节点的点击时触发"
+        },
+        "description": {
+          "zh_CN": "节点的点击时触发的回调函数"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "type",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "点击节点的下标"
+              }
+            },
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前节点对象：{ name: 节点名称, time: 时间 }"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["active", "data"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "时间线"
+      },
+      "icon": "timeline",
+      "screenshot": "",
+      "snippetName": "TinyTimeLine",
+      "schema": {
+        "componentName": "TinyTimeLine",
+        "props": {
+          "active": "2",
+          "data": [
+            {
+              "name": "已下单"
+            },
+            {
+              "name": "运输中"
+            },
+            {
+              "name": "已签收"
+            }
+          ]
+        }
+      },
+      "category": "navigation"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyTooltip.json b/packages/materials/src/TinyVue/TinyTooltip.json
new file mode 100644
index 0000000000..0fd899c928
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyTooltip.json
@@ -0,0 +1,269 @@
+{
+  "version": "3.20.0",
+  "icon": "tooltip",
+  "name": {
+    "zh_CN": "文字提示框"
+  },
+  "component": "TinyTooltip",
+  "description": "动态显示提示信息，一般通过鼠标事件进行响应；提供 warning、error、info、success 四种类型显示不同类别的信",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Tooltip",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 11,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "placement",
+            "label": {
+              "text": {
+                "zh_CN": "提示位置"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "top",
+                    "value": "top"
+                  },
+                  {
+                    "label": "top-start",
+                    "value": "top-start"
+                  },
+                  {
+                    "label": "top-end",
+                    "value": "top-end"
+                  },
+                  {
+                    "label": "bottom",
+                    "value": "bottom"
+                  },
+                  {
+                    "label": "bottom-start",
+                    "value": "bottom-start"
+                  },
+                  {
+                    "label": "bottom-end",
+                    "value": "bottom-end"
+                  },
+                  {
+                    "label": "left",
+                    "value": "left"
+                  },
+                  {
+                    "label": "left-start",
+                    "value": "left-start"
+                  },
+                  {
+                    "label": "left-end",
+                    "value": "left-end"
+                  },
+                  {
+                    "label": "right",
+                    "value": "right"
+                  },
+                  {
+                    "label": "right-start",
+                    "value": "right-start"
+                  },
+                  {
+                    "label": "right-end",
+                    "value": "right-end"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "Tooltip 的出现位置"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "content",
+            "label": {
+              "text": {
+                "zh_CN": "内容"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "defaultValue": "提示信息",
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "显示的内容，也可以通过 slot#content 传入 DOM"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "render-content",
+            "label": {
+              "text": {
+                "zh_CN": "渲染函数"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {
+                "disabled": true,
+                "placeholder": "请使用变量绑定来绑定函数"
+              }
+            },
+            "description": {
+              "zh_CN": "自定义渲染函数，返回需要渲染的节点内容"
+            }
+          },
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "是否可见"
+              }
+            },
+            "defaultValue": true,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "状态是否可见"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "manual",
+            "label": {
+              "text": {
+                "zh_CN": "手动控制"
+              }
+            },
+            "defaultValue": true,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      }
+    ],
+    "events": {},
+    "slots": {
+      "content": {
+        "label": {
+          "zh_CN": "提示内容"
+        },
+        "description": {
+          "zh_CN": "自定义提示内容"
+        }
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": true,
+    "isModal": false,
+    "isPopper": true,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["disabled", "content"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "文字提示框"
+      },
+      "icon": "tooltip",
+      "screenshot": "",
+      "snippetName": "TinyTooltip",
+      "schema": {
+        "componentName": "TinyTooltip",
+        "props": {
+          "content": "Top Left 提示文字",
+          "placement": "top-start",
+          "manual": true,
+          "modelValue": true
+        },
+        "children": [
+          {
+            "componentName": "span",
+            "children": [
+              {
+                "componentName": "div",
+                "props": {}
+              }
+            ]
+          },
+          {
+            "componentName": "Template",
+            "props": {
+              "slot": "content"
+            },
+            "children": [
+              {
+                "componentName": "span",
+                "children": [
+                  {
+                    "componentName": "div",
+                    "props": {
+                      "placeholder": "提示内容"
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      "category": "data-display"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyTransfer.json b/packages/materials/src/TinyVue/TinyTransfer.json
new file mode 100644
index 0000000000..26db591c2d
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyTransfer.json
@@ -0,0 +1,305 @@
+{
+  "version": "3.20.0",
+  "name": {
+    "zh_CN": "穿梭框"
+  },
+  "component": "TinyTransfer",
+  "icon": "transfer",
+  "description": "穿梭框，实现左右表格数据的双向交换的组件",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "TinyTransfer",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 1,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "modelValue",
+            "label": {
+              "text": {
+                "zh_CN": "绑定值"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "widget": {
+              "component": "I18nConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "双向绑定值"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "data",
+            "label": {
+              "text": {
+                "zh_CN": "左右列表的全量数据源"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {
+                "language": "json"
+              }
+            },
+            "description": {
+              "zh_CN": "左右列表的全量数据源"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "filterable",
+            "label": {
+              "text": {
+                "zh_CN": "是否启用搜索的功能"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否启用搜索的功能"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "showAllBtn",
+            "label": {
+              "text": {
+                "zh_CN": "是否显示全部移动按钮"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否显示全部移动按钮"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "toLeftDisable",
+            "label": {
+              "text": {
+                "zh_CN": "组件初始化状态下未选中时，默认按钮显示禁用状态"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "组件初始化状态下未选中时，默认按钮显示禁用状态"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "toRightDisable",
+            "label": {
+              "text": {
+                "zh_CN": "组件初始化状态下未选中时，默认按钮显示禁用状态"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "组件初始化状态下未选中时，默认按钮显示禁用状态"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "titles",
+            "label": {
+              "text": {
+                "zh_CN": "自定义列表的标题"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {
+                "language": "json"
+              }
+            },
+            "description": {
+              "zh_CN": "自定义列表的标题；不设置titles时，左右列表的标题默认显示为： 列表 1， 列表 2"
+            },
+            "labelPosition": "left"
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onChange": {
+        "label": {
+          "zh_CN": "右侧列表元素变化时触发"
+        },
+        "description": {
+          "zh_CN": "右侧列表元素变化时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "右侧列表元素变化时触发"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onLeftCheckChange": {
+        "label": {
+          "zh_CN": "左侧列表元素被用户选中 / 取消选中时触发;"
+        },
+        "description": {
+          "zh_CN": "左侧列表元素被用户选中 / 取消选中时触发;"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "左侧列表元素被用户选中 / 取消选中时触发;"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onRightCheckChange": {
+        "label": {
+          "zh_CN": "右侧列表元素被用户选中 / 取消选中时触发"
+        },
+        "description": {
+          "zh_CN": "右侧列表元素被用户选中 / 取消选中时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "右侧列表元素被用户选中 / 取消选中时触发"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["value", "disabled"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "穿梭框"
+      },
+      "icon": "transfer",
+      "screenshot": "",
+      "snippetName": "TinyTransfer",
+      "schema": {
+        "componentName": "TinyTransfer",
+        "props": {
+          "modelValue": [3],
+          "data": [
+            {
+              "key": 1,
+              "label": "备选项1",
+              "disabled": false
+            },
+            {
+              "key": 2,
+              "label": "备选项2",
+              "disabled": false
+            },
+            {
+              "key": 3,
+              "label": "备选项3",
+              "disabled": false
+            },
+            {
+              "key": 4,
+              "label": "备选项4",
+              "disabled": false
+            }
+          ]
+        }
+      },
+      "category": "form"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/TinyTree.json b/packages/materials/src/TinyVue/TinyTree.json
new file mode 100644
index 0000000000..032439b4e8
--- /dev/null
+++ b/packages/materials/src/TinyVue/TinyTree.json
@@ -0,0 +1,385 @@
+{
+  "version": "3.20.0",
+  "icon": "tree",
+  "name": {
+    "zh_CN": "树"
+  },
+  "component": "TinyTree",
+  "description": "可进行展示有父子层级的数据，支持选择，异步加载等功能。但不推荐用它来展示菜单，展示菜单推荐使用树菜单",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@opentiny/vue",
+    "exportName": "Tree",
+    "destructuring": true
+  },
+  "group": "component",
+  "priority": 12,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "show-checkbox",
+            "label": {
+              "text": {
+                "zh_CN": "多选"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "设置接口是否可以多选"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "data",
+            "label": {
+              "text": {
+                "zh_CN": "数据源"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "defaultValue": [
+              {
+                "label": "一级 1",
+                "children": [
+                  {
+                    "label": "二级 1-1"
+                  }
+                ]
+              }
+            ],
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "可配置静态数据源和动态数据源"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "node-key",
+            "label": {
+              "text": {
+                "zh_CN": "唯一标识"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "节点唯一标识属性名称"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "render-content",
+            "label": {
+              "text": {
+                "zh_CN": "渲染函数"
+              }
+            },
+            "required": false,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {
+                "disabled": true,
+                "placeholder": "请使用变量绑定来绑定函数"
+              }
+            },
+            "description": {
+              "zh_CN": "树节点的内容区的渲染函数"
+            }
+          },
+          {
+            "property": "icon-trigger-click-node",
+            "label": {
+              "text": {
+                "zh_CN": "触发NodeClick事件"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "点击图标展开节点时是否触发 node-click 事件"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "expand-icon",
+            "label": {
+              "text": {
+                "zh_CN": "展开图标"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "节点展开图标"
+            },
+            "labelPosition": "top"
+          },
+          {
+            "property": "shrink-icon",
+            "label": {
+              "text": {
+                "zh_CN": "收缩图标"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "节点收缩的图标"
+            },
+            "labelPosition": "top"
+          }
+        ]
+      },
+      {
+        "name": "1",
+        "label": {
+          "zh_CN": "其他"
+        },
+        "content": [
+          {
+            "property": "check-on-click-node",
+            "label": {
+              "text": {
+                "zh_CN": "点击节点选中"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "filter-node-method",
+            "label": {
+              "text": {
+                "zh_CN": "筛选函数"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CodeConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "节点筛选函数"
+            },
+            "labelPosition": "top"
+          }
+        ],
+        "description": {
+          "zh_CN": ""
+        }
+      }
+    ],
+    "events": {
+      "onCheck": {
+        "label": {
+          "zh_CN": "勾选节点后的事件"
+        },
+        "description": {
+          "zh_CN": "勾选节点后的事件"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "data",
+              "type": "object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前选中节点信息"
+              }
+            },
+            {
+              "name": "currentNode",
+              "type": "object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "树组件目前的选中状态信息，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onNodeClick": {
+        "label": {
+          "zh_CN": "点击节点后的事件"
+        },
+        "description": {
+          "zh_CN": "点击节点后的事件"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "data",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "当前选中节点信息"
+              }
+            },
+            {
+              "name": "node",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "树组件目前的选中状态信息，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性"
+              }
+            },
+            {
+              "name": "vm",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "树组件实例"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["data", "show-checkbox"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "树"
+      },
+      "icon": "tree",
+      "screenshot": "",
+      "snippetName": "TinyTree",
+      "schema": {
+        "componentName": "TinyTree",
+        "props": {
+          "data": [
+            {
+              "label": "一级 1",
+              "children": [
+                {
+                  "label": "二级 1-1",
+                  "children": [
+                    {
+                      "label": "三级 1-1-1"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "label": "一级 2",
+              "children": [
+                {
+                  "label": "二级 2-1",
+                  "children": [
+                    {
+                      "label": "三级 2-1-1"
+                    }
+                  ]
+                },
+                {
+                  "label": "二级 2-2",
+                  "children": [
+                    {
+                      "label": "三级 2-2-1"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      },
+      "category": "data-display"
+    }
+  ]
+}
diff --git a/packages/materials/src/TinyVue/meta.json b/packages/materials/src/TinyVue/meta.json
new file mode 100644
index 0000000000..0320022291
--- /dev/null
+++ b/packages/materials/src/TinyVue/meta.json
@@ -0,0 +1,48 @@
+{
+  "package": {
+    "name": "TinyVue组件库",
+    "package": "@opentiny/vue",
+    "version": "3.20.0",
+    "destructuring": true,
+    "script": "https://unpkg.com/@opentiny/vue-runtime@~3.20/dist3/tiny-vue-pc.mjs",
+    "css": "https://unpkg.com/@opentiny/vue-theme@~3.20/index.css"
+  },
+  "snippets": [
+    {
+      "group": "layout",
+      "label": {
+        "zh_CN": "布局与容器"
+      }
+    },
+    {
+      "group": "basic",
+      "label": {
+        "zh_CN": "基础元素"
+      }
+    },
+    {
+      "group": "form",
+      "label": {
+        "zh_CN": "表单类型"
+      }
+    },
+    {
+      "group": "table",
+      "label": {
+        "zh_CN": "表格类型"
+      }
+    },
+    {
+      "group": "data-display",
+      "label": {
+        "zh_CN": "数据展示类"
+      }
+    },
+    {
+      "group": "navigation",
+      "label": {
+        "zh_CN": "导航类型"
+      }
+    }
+  ]
+}
diff --git a/packages/materials/src/html/A.json b/packages/materials/src/html/A.json
new file mode 100644
index 0000000000..63faf986c5
--- /dev/null
+++ b/packages/materials/src/html/A.json
@@ -0,0 +1,160 @@
+{
+  "version": "1.0.0",
+  "icon": "link",
+  "name": {
+    "zh_CN": "提示框"
+  },
+  "component": "a",
+  "description": "链接",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "group": "component",
+  "priority": 7,
+  "npm": {},
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "children",
+            "label": {
+              "text": {
+                "zh_CN": "类型"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "HtmlTextConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "类型"
+            },
+            "labelPosition": "none"
+          },
+          {
+            "property": "href",
+            "label": {
+              "text": {
+                "zh_CN": "链接"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "指定链接的 URL"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "target",
+            "label": {
+              "text": {
+                "zh_CN": "打开方式"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "ButtonGroupConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "当前页面",
+                    "value": "_self"
+                  },
+                  {
+                    "label": "打开新页面",
+                    "value": "_blank"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "指定链接的打开方式，例如在当前窗口中打开或在新窗口中打开。"
+            }
+          },
+          {
+            "property": "attributes3",
+            "label": {
+              "text": {
+                "zh_CN": "原生属性"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "HtmlAttributesConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "原生属性"
+            },
+            "labelPosition": "none"
+          }
+        ]
+      }
+    ]
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "slots": [],
+    "styles": true,
+    "isContainer": true,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": "",
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": []
+    },
+    "contextMenu": {
+      "actions": [],
+      "disable": []
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "链接"
+      },
+      "icon": "link",
+      "screenshot": "",
+      "snippetName": "a",
+      "schema": {
+        "componentName": "a",
+        "children": "链接"
+      },
+      "category": "basic"
+    }
+  ]
+}
diff --git a/packages/materials/src/html/Button.json b/packages/materials/src/html/Button.json
new file mode 100644
index 0000000000..ded79cc351
--- /dev/null
+++ b/packages/materials/src/html/Button.json
@@ -0,0 +1,76 @@
+{
+  "version": "1.0.0",
+  "icon": "button",
+  "name": {
+    "zh_CN": "Button"
+  },
+  "component": "button",
+  "container": false,
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {},
+  "group": "component",
+  "category": "html",
+  "priority": 70,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "attributes3",
+            "label": {
+              "text": {
+                "zh_CN": "原生属性"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "HtmlAttributesConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "原生属性"
+            },
+            "labelPosition": "none"
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onClick": {
+        "label": {
+          "zh_CN": "点击时触发"
+        },
+        "description": {
+          "zh_CN": "点击时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    },
+    "shortcuts": {
+      "properties": []
+    },
+    "contentMenu": {
+      "actions": []
+    }
+  },
+  "configure": {
+    "isContainer": true
+  }
+}
diff --git a/packages/materials/src/html/Form.json b/packages/materials/src/html/Form.json
new file mode 100644
index 0000000000..c204f4dd3c
--- /dev/null
+++ b/packages/materials/src/html/Form.json
@@ -0,0 +1,124 @@
+{
+  "version": "1.0.0",
+  "icon": "form",
+  "name": {
+    "zh_CN": "表单"
+  },
+  "component": "form",
+  "container": false,
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {},
+  "group": "component",
+  "category": "html",
+  "priority": 100,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "name",
+            "label": {
+              "text": {
+                "zh_CN": "名称"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "表单的名称"
+            }
+          },
+          {
+            "property": "action",
+            "label": {
+              "text": {
+                "zh_CN": "提交地址"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "提交表单时向何处发送表单数据"
+            }
+          },
+          {
+            "property": "method",
+            "label": {
+              "text": {
+                "zh_CN": "HTTP方法"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "get",
+                    "value": "get"
+                  },
+                  {
+                    "label": "post",
+                    "value": "post"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "用于发送 form-data 的 HTTP 方法"
+            }
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onClick": {
+        "label": {
+          "zh_CN": "点击时触发"
+        },
+        "description": {
+          "zh_CN": "点击时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    },
+    "shortcuts": {
+      "properties": []
+    },
+    "contentMenu": {
+      "actions": []
+    }
+  },
+  "configure": {
+    "isContainer": true
+  }
+}
diff --git a/packages/materials/src/html/H1.json b/packages/materials/src/html/H1.json
new file mode 100644
index 0000000000..b140ed9e5f
--- /dev/null
+++ b/packages/materials/src/html/H1.json
@@ -0,0 +1,114 @@
+{
+  "version": "1.0.0",
+  "name": {
+    "zh_CN": "标题"
+  },
+  "component": ["h1", "h2", "h3", "h4", "h5", "h6"],
+  "icon": "h16",
+  "description": "标题",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {},
+  "group": "component",
+  "category": "html",
+  "priority": 20,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "children",
+            "label": {
+              "text": {
+                "zh_CN": "类型"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "HtmlTextConfigurator",
+              "props": {
+                "showRadioButton": true
+              }
+            },
+            "description": {
+              "zh_CN": ""
+            },
+            "labelPosition": "none"
+          },
+          {
+            "property": "attributes3",
+            "label": {
+              "text": {
+                "zh_CN": "原生属性"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "HtmlAttributesConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": ""
+            },
+            "labelPosition": "none"
+          }
+        ]
+      }
+    ],
+    "events": {}
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": [],
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["disabled", "size"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "标题"
+      },
+      "icon": "h16",
+      "screenshot": "",
+      "snippetName": "h1",
+      "schema": {
+        "componentName": "h1",
+        "props": {},
+        "children": "Heading"
+      },
+      "category": "basic"
+    }
+  ]
+}
diff --git a/packages/materials/src/html/Img.json b/packages/materials/src/html/Img.json
new file mode 100644
index 0000000000..c7236dcce9
--- /dev/null
+++ b/packages/materials/src/html/Img.json
@@ -0,0 +1,78 @@
+{
+  "version": "1.0.0",
+  "icon": "Image",
+  "name": {
+    "zh_CN": "Img"
+  },
+  "component": "Img",
+  "container": false,
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {},
+  "group": "component",
+  "category": "html",
+  "priority": 60,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "src",
+            "type": "string",
+            "defaultValue": "",
+            "bindState": true,
+            "label": {
+              "text": {
+                "zh_CN": "资源"
+              }
+            },
+            "cols": 12,
+            "rules": [],
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "src路径"
+            }
+          },
+          {
+            "property": "attributes3",
+            "label": {
+              "text": {
+                "zh_CN": "原生属性"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "HtmlAttributesConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "原生属性"
+            },
+            "labelPosition": "none"
+          }
+        ]
+      }
+    ],
+    "events": {},
+    "shortcuts": {
+      "properties": ["src"]
+    },
+    "contentMenu": {
+      "actions": []
+    }
+  }
+}
diff --git a/packages/materials/src/html/Input.json b/packages/materials/src/html/Input.json
new file mode 100644
index 0000000000..5f0e2e7275
--- /dev/null
+++ b/packages/materials/src/html/Input.json
@@ -0,0 +1,267 @@
+{
+  "version": "1.0.0",
+  "name": {
+    "zh_CN": "输入框"
+  },
+  "component": "input",
+  "icon": "input",
+  "description": "输入框",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {},
+  "group": "component",
+  "category": "html",
+  "priority": 40,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "type",
+            "label": {
+              "text": {
+                "zh_CN": "类型"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "SelectConfigurator",
+              "props": {
+                "options": [
+                  {
+                    "label": "checkbox",
+                    "value": "checkbox"
+                  },
+                  {
+                    "label": "color",
+                    "value": "color"
+                  },
+                  {
+                    "label": "date",
+                    "value": "date"
+                  },
+                  {
+                    "label": "button",
+                    "value": "button"
+                  },
+                  {
+                    "label": "email",
+                    "value": "email"
+                  },
+                  {
+                    "label": "file",
+                    "value": "file"
+                  },
+                  {
+                    "label": "hidden",
+                    "value": "hidden"
+                  },
+                  {
+                    "label": "image",
+                    "value": "image"
+                  },
+                  {
+                    "label": "month",
+                    "value": "month"
+                  },
+                  {
+                    "label": "number",
+                    "value": "number"
+                  },
+                  {
+                    "label": "password",
+                    "value": "password"
+                  },
+                  {
+                    "label": "radio",
+                    "value": "radio"
+                  },
+                  {
+                    "label": "range",
+                    "value": "range"
+                  },
+                  {
+                    "label": "reset",
+                    "value": "reset"
+                  },
+                  {
+                    "label": "search",
+                    "value": "search"
+                  },
+                  {
+                    "label": "submit",
+                    "value": "submit"
+                  },
+                  {
+                    "label": "text",
+                    "value": "text"
+                  },
+                  {
+                    "label": "time",
+                    "value": "time"
+                  },
+                  {
+                    "label": "week",
+                    "value": "week"
+                  },
+                  {
+                    "label": "url",
+                    "value": "url"
+                  }
+                ]
+              }
+            },
+            "description": {
+              "zh_CN": "类型"
+            }
+          },
+          {
+            "property": "placeholder",
+            "label": {
+              "text": {
+                "zh_CN": "占位符"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "占位符"
+            }
+          },
+          {
+            "property": "attributes3",
+            "label": {
+              "text": {
+                "zh_CN": "原生属性"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "HtmlAttributesConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "原生属性"
+            },
+            "labelPosition": "none"
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onBlur": {
+        "label": {
+          "zh_CN": "失去焦点时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 失去焦点时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生 event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onFocus": {
+        "label": {
+          "zh_CN": "获取焦点时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 获取焦点时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生 event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      },
+      "onChange": {
+        "label": {
+          "zh_CN": "输入值改变时触发"
+        },
+        "description": {
+          "zh_CN": "在 Input 输入值改变时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [
+            {
+              "name": "event",
+              "type": "Object",
+              "defaultValue": "",
+              "description": {
+                "zh_CN": "原生 event"
+              }
+            }
+          ],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    }
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": [],
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": ["disabled", "size"]
+    },
+    "contextMenu": {
+      "actions": ["create symbol"],
+      "disable": ["copy", "remove"]
+    }
+  }
+}
diff --git a/packages/materials/src/html/Label.json b/packages/materials/src/html/Label.json
new file mode 100644
index 0000000000..101a1f6eab
--- /dev/null
+++ b/packages/materials/src/html/Label.json
@@ -0,0 +1,76 @@
+{
+  "version": "1.0.0",
+  "icon": "label",
+  "name": {
+    "zh_CN": "表单标签"
+  },
+  "component": "label",
+  "container": false,
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {},
+  "group": "component",
+  "category": "html",
+  "priority": 110,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "for",
+            "label": {
+              "text": {
+                "zh_CN": "label绑定表单元素"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "label 绑定到哪个表单元素"
+            }
+          },
+          {
+            "property": "form",
+            "label": {
+              "text": {
+                "zh_CN": "label字段所属表单"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "label 字段所属的一个或多个表单"
+            }
+          }
+        ]
+      }
+    ],
+    "events": {},
+    "shortcuts": {
+      "properties": []
+    },
+    "contentMenu": {
+      "actions": []
+    }
+  }
+}
diff --git a/packages/materials/src/html/P.json b/packages/materials/src/html/P.json
new file mode 100644
index 0000000000..dcc5b92690
--- /dev/null
+++ b/packages/materials/src/html/P.json
@@ -0,0 +1,111 @@
+{
+  "version": "1.0.0",
+  "name": {
+    "zh_CN": "段落"
+  },
+  "component": "p",
+  "icon": "paragraph",
+  "description": "段落",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {},
+  "group": "component",
+  "category": "html",
+  "priority": 30,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "children",
+            "label": {
+              "text": {
+                "zh_CN": "类型"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "HtmlTextConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "类型"
+            },
+            "labelPosition": "none"
+          },
+          {
+            "property": "attributes3",
+            "label": {
+              "text": {
+                "zh_CN": "原生属性"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "HtmlAttributesConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "原生属性"
+            },
+            "labelPosition": "none"
+          }
+        ]
+      }
+    ],
+    "events": {}
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": [],
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": []
+    },
+    "contextMenu": {
+      "actions": [],
+      "disable": []
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "段落"
+      },
+      "icon": "paragraph",
+      "screenshot": "",
+      "snippetName": "p",
+      "schema": {
+        "componentName": "p",
+        "children": "TinyEngine 前端可视化设计器致力于通过友好的用户交互提升业务应用的开发效率。"
+      },
+      "category": "basic"
+    }
+  ]
+}
diff --git a/packages/materials/src/html/Table.json b/packages/materials/src/html/Table.json
new file mode 100644
index 0000000000..61545ecf9e
--- /dev/null
+++ b/packages/materials/src/html/Table.json
@@ -0,0 +1,111 @@
+{
+  "version": "1.0.0",
+  "icon": "table",
+  "name": {
+    "zh_CN": "表格"
+  },
+  "component": "table",
+  "container": false,
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {},
+  "group": "component",
+  "category": "html",
+  "priority": 80,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "width",
+            "label": {
+              "text": {
+                "zh_CN": "宽度"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "表格的宽度"
+            }
+          },
+          {
+            "property": "border",
+            "label": {
+              "text": {
+                "zh_CN": "边框宽度"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "表格边框的宽度"
+            }
+          },
+          {
+            "property": "attributes3",
+            "label": {
+              "text": {
+                "zh_CN": "原生属性"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "HtmlAttributesConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "原生属性"
+            },
+            "labelPosition": "none"
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onClick": {
+        "label": {
+          "zh_CN": "点击时触发"
+        },
+        "description": {
+          "zh_CN": "点击时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    },
+    "shortcuts": {
+      "properties": []
+    },
+    "contentMenu": {
+      "actions": []
+    }
+  }
+}
diff --git a/packages/materials/src/html/Td.json b/packages/materials/src/html/Td.json
new file mode 100644
index 0000000000..b0722e568a
--- /dev/null
+++ b/packages/materials/src/html/Td.json
@@ -0,0 +1,111 @@
+{
+  "version": "1.0.0",
+  "icon": "td",
+  "name": {
+    "zh_CN": "表格单元格"
+  },
+  "component": "td",
+  "container": false,
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {},
+  "group": "component",
+  "category": "html",
+  "priority": 90,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "colspan",
+            "label": {
+              "text": {
+                "zh_CN": "合并列"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "单元格可横跨的列数"
+            }
+          },
+          {
+            "property": "rowspan",
+            "label": {
+              "text": {
+                "zh_CN": "合并行"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "NumberConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "单元格可横跨的行数"
+            }
+          },
+          {
+            "property": "attributes3",
+            "label": {
+              "text": {
+                "zh_CN": "原生属性"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "HtmlAttributesConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "原生属性"
+            },
+            "labelPosition": "none"
+          }
+        ]
+      }
+    ],
+    "events": {
+      "onClick": {
+        "label": {
+          "zh_CN": "点击时触发"
+        },
+        "description": {
+          "zh_CN": "点击时触发"
+        },
+        "type": "event",
+        "functionInfo": {
+          "params": [],
+          "returns": {}
+        },
+        "defaultValue": ""
+      }
+    },
+    "shortcuts": {
+      "properties": []
+    },
+    "contentMenu": {
+      "actions": []
+    }
+  }
+}
diff --git a/packages/materials/src/html/Video.json b/packages/materials/src/html/Video.json
new file mode 100644
index 0000000000..d01661d4e4
--- /dev/null
+++ b/packages/materials/src/html/Video.json
@@ -0,0 +1,193 @@
+{
+  "version": "1.0.0",
+  "name": {
+    "zh_CN": "视频"
+  },
+  "component": "video",
+  "icon": "video",
+  "description": "视频",
+  "docUrl": "",
+  "screenshot": "",
+  "tags": "",
+  "keywords": "",
+  "devMode": "proCode",
+  "npm": {},
+  "group": "component",
+  "category": "html",
+  "priority": 50,
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "content": [
+          {
+            "property": "src",
+            "label": {
+              "text": {
+                "zh_CN": "资源"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "视频的 URL"
+            }
+          },
+          {
+            "property": "width",
+            "label": {
+              "text": {
+                "zh_CN": "播放器宽度"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "视频播放器的宽度"
+            }
+          },
+          {
+            "property": "height",
+            "label": {
+              "text": {
+                "zh_CN": "播放器高度"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "InputConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "视频播放器的高度"
+            }
+          },
+          {
+            "property": "controls",
+            "label": {
+              "text": {
+                "zh_CN": "显示控件"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否显示控件"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "autoplay",
+            "label": {
+              "text": {
+                "zh_CN": "马上播放"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "CheckBoxConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "是否马上播放"
+            },
+            "labelPosition": "left"
+          },
+          {
+            "property": "attributes3",
+            "label": {
+              "text": {
+                "zh_CN": "原生属性"
+              }
+            },
+            "required": true,
+            "readOnly": false,
+            "disabled": false,
+            "cols": 12,
+            "widget": {
+              "component": "HtmlAttributesConfigurator",
+              "props": {}
+            },
+            "description": {
+              "zh_CN": "原生属性"
+            },
+            "labelPosition": "none"
+          }
+        ]
+      }
+    ],
+    "events": {}
+  },
+  "configure": {
+    "loop": true,
+    "condition": true,
+    "styles": true,
+    "isContainer": false,
+    "isModal": false,
+    "nestingRule": {
+      "childWhitelist": [],
+      "parentWhitelist": "",
+      "descendantBlacklist": "",
+      "ancestorWhitelist": ""
+    },
+    "isNullNode": false,
+    "isLayout": false,
+    "rootSelector": "",
+    "shortcuts": {
+      "properties": []
+    },
+    "contextMenu": {
+      "actions": [],
+      "disable": []
+    }
+  },
+  "snippets": [
+    {
+      "name": {
+        "zh_CN": "视频"
+      },
+      "icon": "video",
+      "screenshot": "",
+      "snippetName": "video",
+      "schema": {
+        "componentName": "video",
+        "props": {
+          "src": "https://tinyengine-assets.obs.myhuaweicloud.com/files/in-action.mp4#t=1.5",
+          "width": "200",
+          "height": "100",
+          "style": "border:1px solid #ccc"
+        }
+      },
+      "category": "basic"
+    }
+  ]
+}
diff --git a/packages/materials/src/html/meta.json b/packages/materials/src/html/meta.json
new file mode 100644
index 0000000000..c0f7876640
--- /dev/null
+++ b/packages/materials/src/html/meta.json
@@ -0,0 +1,10 @@
+{
+  "snippets": [
+    {
+      "group": "basic",
+      "label": {
+        "zh_CN": "基础元素"
+      }
+    }
+  ]
+}