feat(cli): packages配置不做去重处理,因为组件type与数据源type可能相同

fix #664

.eslintignore

@@ -1,14 +0,0 @@
-dist
-coverage
-node_modules
-dest
-types
-public/entry
-public/runtime
-
-comp-entry.ts
-config-entry.ts
-value-entry.ts
-
-magic-admin/web/public/runtime
-magic-admin/server/static

.eslintrc.js

@@ -1,69 +0,0 @@
-module.exports = {
-  env: {
-    node: true,
-    browser: true,
-    es2021: true,
-  },
-  globals: {
-    describe: true,
-    it: true,
-    expect: true,
-    beforeEach: true,
-  },
-  extends: [
-    'eslint-config-tencent',
-    'eslint-config-tencent/ts',
-    'plugin:vue/vue3-essential',
-    './prettier',
-  ],
-  parser: 'vue-eslint-parser',
-  parserOptions: {
-    ecmaVersion: 12,
-    parser: '@typescript-eslint/parser',
-    extraFileExtensions: ['.vue'],
-    sourceType: 'module',
-  },
-  plugins: [
-    'vue',
-    '@typescript-eslint',
-    'simple-import-sort'
-  ],
-  ignorePatterns: ['.eslintrc.js'],
-  rules: {
-    'vue/no-mutating-props': 'off',
-    'vue/multi-word-component-names': 'off',
-    'no-param-reassign': 'off',
-    '@typescript-eslint/no-require-imports': 'off',
-    "@typescript-eslint/no-misused-promises": [
-      "error",
-      {
-        "checksVoidReturn": false
-      }
-    ],
-    'simple-import-sort/imports': [
-      "error", {
-        groups: [
-          ['./polyfills'],
-          // Node.js builtins. You could also generate this regex if you use a `.js` config.
-          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
-          [
-            "^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)",
-          ],
-          // Packages. `react|vue` related packages come first.
-          ["^(react|vue|vite)", "^@?\\w"],
-          ["^(@tmagic)(/.*|$)"],
-          // Internal packages.
-          ["^(@|@editor|@data-source)(/.*|$)"],
-          // Side effect imports.
-          ["^\\u0000"],
-          // Parent imports. Put `..` last.
-          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
-          // Other relative imports. Put same-folder imports and `.` last.
-          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
-          // Style imports.
-          ["^.+\\.s?css$"],
-        ],
-      }
-    ]
-  },
-};

.github/workflows/pages.yml

@@ -2,7 +2,7 @@ name: pages
 
 on:
   push:
-    branches: [master]
+    branches: [dev]
   workflow_dispatch:
 
 jobs:
@@ -10,17 +10,18 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
+          ref: dev
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
 
-      - name: Set node version to 16
+      - name: Set node version to 22
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 22
           cache: 'pnpm'
 
       - run: pnpm bootstrap

.gitignore

@@ -5,6 +5,7 @@ types
 
 .temp
 .cache
+temp
 
 # local env files
 .env.local
@@ -30,3 +31,6 @@ coverage
 auto-imports.d.ts
 components.d.ts
 docs/.vitepress/cache
+
+.eslintcache
+.npmrc

.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
+npx --no-install commitlint --edit $1
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no-install commitlint --edit $1

.husky/pre-commit

@@ -1,5 +1 @@
-#!/bin/sh
+npx lint-staged && npm run check:type
-. "$(dirname "$0")/_/husky.sh"
-
-npx lint-staged
-pnpm --filter "@tmagic/*" build:type

.husky/pre-push

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npm test

LICENSE

@@ -1,6 +1,6 @@
 Tencent is pleased to support the open source community by making TMagicEditor available. 
 
-Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved. 
+Copyright (C) 2025 Tencent.  All rights reserved. 
 
 TMagicEditor is licensed under the Apache License Version 2.0 except for the third-party components listed below.
 

README.md

@@ -16,9 +16,9 @@ https://tencent.github.io/tmagic-editor/playground/index.html
 
 ## 环境准备
 
-node.js >= 16
+node.js >= 18
 
-pnpm >= 8
+pnpm >= 9
 
 先安装 pnpm
 
@@ -83,6 +83,13 @@ tmagic-editor主要定位是搭建生成移动端H5页面，如果有搭建PC端
 
 如果你有好的意见或建议，欢迎给我们提 Issues 或 Pull Requests，为提升魔方可视化编辑器开发体验贡献力量。<br>详见：[CONTRIBUTING.md](./CONTRIBUTING.md)
 
+## 贡献者
+
+<a href="https://github.com/Tencent/tmagic-editor/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=Tencent/tmagic-editor" />
+</a>
+
+
 ### 欢迎入群交流
 
 <img src="https://vfiles.gtimg.cn/vupload/20220412/b85d331649748582992.jpg" width=375>

babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset'],
-};

commitlint.config.js

@@ -1 +1 @@
-module.exports = { extends: ['@commitlint/config-conventional'] };
+export default { extends: ['@commitlint/config-conventional'] };

docs/.vitepress/config.ts

@@ -24,12 +24,13 @@ export default defineConfig({
 
     footer: {
       message: 'Powered by 腾讯视频会员平台技术中心',
-      copyright: 'Copyright (C) 2023 THL A29 Limited, a Tencent company.'
+      copyright: 'Copyright (C) 2025 Tencent.'
     },
 
     nav: [
       { text: '文档', link: '/guide/', activeMatch: '/guide/' },
-      { text: 'API', link: '/api/editor/props', activeMatch: '/api/' },
+      { text: 'Editor API', link: '/api/editor/props', activeMatch: '/api/' },
+      { text: 'Runtime API', link: '/runtime-api/core/app', activeMatch: '/runtime-api/' },
       { text: '表单配置', link: '/form-config/fields/text', activeMatch: '/form-config/' },
       { text: '更新日志', link: 'https://github.com/Tencent/tmagic-editor/releases' },
       { text: 'Playground', link: 'https://tencent.github.io/tmagic-editor/playground/index.html' },
@@ -48,14 +49,6 @@ export default defineConfig({
               text: '快速开始',
               link: '/guide/'
             },
-            {
-              text: '基础概念',
-              link: '/guide/conception.md',
-            },
-            {
-              text: '页面发布',
-              link: '/guide/publish.md'
-            },
             {
               text: 'RUNTIME',
               link: '/guide/runtime.md'
@@ -64,10 +57,22 @@ export default defineConfig({
               text: '组件开发',
               link: '/guide/component.md'
             },
+            {
+              text: '基础概念',
+              link: '/guide/conception.md',
+            },
+            {
+              text: '页面发布',
+              link: '/guide/publish.md'
+            },
             {
               text: '编辑器扩展',
               link: '/guide/editor-expand.md'
             },
+            {
+              text: '升级到1.5.x',
+              link: '/guide/migration.md'
+            },
           ]
         },
         {
@@ -93,6 +98,10 @@ export default defineConfig({
               text: '代码块',
               link: '/guide/advanced/code-block.md',
             },
+            {
+              text: '数据源',
+              link: '/guide/advanced/data-source.md'
+            },
             {
               text: '@tmagic/ui',
               link: '/guide/advanced/tmagic-ui.md',
@@ -303,6 +312,10 @@ export default defineConfig({
               text: 'InputNumber计数器',
               link: '/form-config/fields/number.md'
             },
+            {
+              text: 'NumberRange数字范围',
+              link: '/form-config/fields/number-range.md'
+            },
             {
               text: 'Display只读文本',
               link: '/form-config/fields/display.md'
@@ -343,6 +356,10 @@ export default defineConfig({
               text: 'DatePick日期选择器',
               link: '/form-config/fields/date-picker.md'
             },
+            {
+              text: 'DateRangePick日期范围选择器',
+              link: '/form-config/fields/daterange-picker.md'
+            },
             {
               text: 'DatetimePick日期时间选择器',
               link: '/form-config/fields/datetime-picker.md'
@@ -350,9 +367,90 @@ export default defineConfig({
             {
               text: 'TimePick时间选择器',
               link: '/form-config/fields/time-picker.md'
+            },
+            {
+              text: 'TimeRangePick时间范围选择器',
+              link: '/form-config/fields/timerange-picker.md'
+            },
+            {
+              text: 'DynamicField动态表单',
+              link: '/form-config/fields/dynamic-field.md'
             }
           ]
         },
+        {
+          text: '编辑器中可用配置',
+          items: [
+            {
+              text: 'Code代码编辑器',
+              link: '/form-config/editor-fields/code.md'
+            },
+            {
+              text: 'CodeLink代码链接',
+              link: '/form-config/editor-fields/code-link.md'
+            },
+            {
+              text: 'CodeSelect代码块选择器',
+              link: '/form-config/editor-fields/code-select.md'
+            },
+            {
+              text: 'CodeSelectCol代码块选择列',
+              link: '/form-config/editor-fields/code-select-col.md'
+            },
+            {
+              text: 'DataSourceSelect数据源选择器',
+              link: '/form-config/editor-fields/data-source-select.md'
+            },
+            {
+              text: 'DataSourceFieldSelect数据源字段选择器',
+              link: '/form-config/editor-fields/data-source-field-select.md'
+            },
+            {
+              text: 'DataSourceMethodSelect数据源方法选择器',
+              link: '/form-config/editor-fields/data-source-method-select.md'
+            },
+            {
+              text: 'DataSourceFields数据源字段配置',
+              link: '/form-config/editor-fields/data-source-fields.md'
+            },
+            {
+              text: 'DataSourceInput数据源输入框',
+              link: '/form-config/editor-fields/data-source-input.md'
+            },
+            {
+              text: 'DataSourceMethods数据源方法配置',
+              link: '/form-config/editor-fields/data-source-methods.md'
+            },
+            {
+              text: 'DataSourceMocks数据源Mock配置',
+              link: '/form-config/editor-fields/data-source-mocks.md'
+            },
+            {
+              text: 'UISelect组件选择器',
+              link: '/form-config/editor-fields/ui-select.md'
+            },
+            {
+              text: 'KeyValue键值对',
+              link: '/form-config/editor-fields/key-value.md'
+            },
+            {
+              text: 'PageFragmentSelect页面片选择器',
+              link: '/form-config/editor-fields/page-fragment-select.md'
+            },
+            {
+              text: 'EventSelect事件选择器',
+              link: '/form-config/editor-fields/event-select.md'
+            },
+            {
+              text: 'DisplayConds显示条件配置',
+              link: '/form-config/editor-fields/display-conds.md'
+            },
+            {
+              text: 'CondOpSelect条件操作选择器',
+              link: '/form-config/editor-fields/cond-op-select.md'
+            }
+          ],
+        },
         {
           text: '布局配置',
           items: [
@@ -380,6 +478,74 @@ export default defineConfig({
             }
           ]
         }
+      ],
+      '/runtime-api/': [
+        {
+          text: '@tmagic/core',
+          items: [
+            {
+              text: 'App',
+              link: '/runtime-api/core/app',
+            },
+            {
+              text: 'Node',
+              link: '/runtime-api/core/node',
+            },
+            {
+              text: 'Page',
+              link: '/runtime-api/core/page',
+            },
+            {
+              text: 'EventHelper',
+              link: '/runtime-api/core/eventHelper',
+            },
+            {
+              text: 'Env',
+              link: '/runtime-api/core/env',
+            },
+            {
+              text: 'IteratorContainer',
+              link: '/runtime-api/core/iteratorContainer',
+            },
+            {
+              text: 'FlowState',
+              link: '/runtime-api/core/flowState',
+            },
+            {
+              text: 'DevtoolApi',
+              link: '/runtime-api/core/devtoolApi',
+            },
+            {
+              text: '工具函数',
+              link: '/runtime-api/core/utils',
+            },
+          ],
+        },
+        {
+          text: '@tmagic/data-source',
+          items: [
+            {
+              text: 'DataSourceManager',
+              link: '/runtime-api/data-source/dataSourceManager',
+            },
+            {
+              text: 'DataSource',
+              link: '/runtime-api/data-source/dataSource',
+            },
+            {
+              text: 'HttpDataSource',
+              link: '/runtime-api/data-source/httpDataSource',
+            },
+            {
+              text: '观察者数据类',
+              link: '/runtime-api/data-source/observedData',
+            },
+            {
+              text: '工具函数',
+              link: '/runtime-api/data-source/utils',
+            },
+          ],
+        },
       ]
     },
   },
@@ -394,6 +560,7 @@ export default defineConfig({
     },
     resolve: {
       alias:[
+        { find: /^@tmagic\/form-schema/, replacement: path.join(__dirname, '../../packages/form-schema/src/index.ts') },
         { find: /^@tmagic\/form/, replacement: path.join(__dirname, '../../packages/form/src/index.ts') },
         { find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
         { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },

docs/.vitepress/theme/components/demo-block.vue

@@ -17,11 +17,7 @@
         <slot name="highlight"></slot>
       </div>
     </div>
-    <div
+    <div class="demo-block-control" ref="control" @click="isExpanded = !isExpanded">
-      class="demo-block-control"
-      ref="control"
-      @click="isExpanded = !isExpanded"
-    >
       <transition name="arrow-slide">
         <i :class="[iconClass, hovering]"></i>
       </transition>
@@ -30,23 +26,14 @@
       </transition>
       <el-tooltip effect="dark" :content="'前往 codepen.io 运行此示例'" placement="right">
         <transition name="text-slide">
-          <el-button
+          <el-button size="small" type="primary" text class="control-button" @click.stop="goCodepen">
-            size="small"
+            {{ type === 'form' ? '查看结果' : '在线运行' }}
-            type="primary"
-            text
-            class="control-button"
-            @click.stop="goCodepen"
-          >
-            {{type === 'form' ? '查看结果' : '在线运行'}}
           </el-button>
         </transition>
       </el-tooltip>
     </div>
 
-    <el-dialog
+    <el-dialog v-model="resultVisible" title="result">
-      v-model="resultVisible"
-      title="result"
-    >
       <pre><code class="language-javascript hljs" v-html="result"></code></pre>
     </el-dialog>
   </div>
@@ -60,7 +47,9 @@
   transition: 0.2s;
 
   &.hover {
-    box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);
+    box-shadow:
+      0 0 8px 0 rgba(232, 237, 250, 0.6),
+      0 2px 4px 0 rgba(232, 237, 250, 0.5);
   }
 
   code {
@@ -219,9 +208,7 @@ export function stripTemplate(content) {
 }
 
 export default {
-  props: [
+  props: ['type', 'config'],
-    'type', 'config'
-  ],
 
   data() {
     return {
@@ -293,12 +280,15 @@ export default {
     },
 
     text() {
-      return this.isStringConfig ?
+      return this.isStringConfig
-        hljs.highlight('js', this.config).value :
+        ? hljs.highlight('js', this.config).value
-        hljs.highlight('js', serialize(this.config, {
+        : hljs.highlight(
-          space: 2,
+            'js',
-          unsafe: true,
+            serialize(this.config, {
-        }).replace(/"(\w+)":\s/g, '$1: ')).value;
+              space: 2,
+              unsafe: true,
+            }).replace(/"(\w+)":\s/g, '$1: '),
+          ).value;
     },
 
     formConfig() {
@@ -307,7 +297,7 @@ export default {
 
     isStringConfig() {
       return typeof this.config === 'string';
-    }
+    },
   },
 
   watch: {
@@ -356,7 +346,7 @@ export default {
     });
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.removeScrollHandler();
   },
 };

docs/api/editor/componentListServiceMethods.md

@@ -4,34 +4,101 @@
 
 - **参数：**
 
-  - 
+  - {[ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L355)[]} componentGroupList 组件列表配置
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  设置左侧面板的组件列表配置
+
+  :::tip
+  该方法通常由编辑器内部调用，开发者可以通过 [m-editor 的 componentGroupList prop](./props.md#componentgrouplist) 来配置组件列表
+  :::
+
+- **示例：**
+
+```js
+import { componentListService } from '@tmagic/editor';
+
+componentListService.setList([
+  {
+    title: '基础组件',
+    items: [
+      {
+        icon: 'text-icon',
+        text: '文本',
+        type: 'text',
+      },
+      {
+        icon: 'button-icon',
+        text: '按钮',
+        type: 'button',
+      },
+    ],
+  },
+]);
+```
+
 ## getList
 
-- **参数：**
+- **参数：** 无
-
-  - 
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - {[ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L355)[]} 组件列表配置
 
 - **详情：**
 
+  获取当前的组件列表配置
+
+- **示例：**
+
+```js
+import { componentListService } from '@tmagic/editor';
+
+const list = componentListService.getList();
+console.log(list);
+```
+
+## resetState
+
+- **参数：** 无
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  重置组件列表状态，清空所有配置
+
+- **示例：**
+
+```js
+import { componentListService } from '@tmagic/editor';
+
+componentListService.resetState();
+```
+
 ## destroy
 
-- **参数：**
+- **参数：** 无
-
-  - 
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
+
+  销毁 componentListService，清空状态并移除所有事件监听和插件
+
+- **示例：**
+
+```js
+import { componentListService } from '@tmagic/editor';
+
+componentListService.destroy();
+```

docs/api/editor/dataSourceServiceMethods.md

@@ -0,0 +1,541 @@
+# dataSourceService方法
+
+## get
+
+- **参数：**
+
+  - `{StateKey}` name 状态键名
+
+- **返回：**
+
+  - `{any}` 对应的状态值
+
+- **详情：**
+
+  获取数据源服务的内部状态
+
+  可用的状态键：
+  - `datasourceTypeList`: 数据源类型列表
+  - `dataSources`: 当前数据源列表
+  - `editable`: 是否可编辑
+  - `configs`: 数据源表单配置
+  - `values`: 数据源默认值
+  - `events`: 数据源事件列表
+  - `methods`: 数据源方法列表
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const dataSources = dataSourceService.get('dataSources');
+console.log(dataSources);
+```
+
+## set
+
+- **参数：**
+
+  - `{StateKey}` name 状态键名
+  - `{any}` value 状态值
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  设置数据源服务的内部状态
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.set('editable', false);
+```
+
+## getFormConfig
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 数据源类型，默认为 'base'
+
+- **返回：**
+
+  - {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} 表单配置
+
+- **详情：**
+
+  获取指定类型数据源的表单配置
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const config = dataSourceService.getFormConfig('http');
+console.log(config);
+```
+
+## setFormConfig
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 数据源类型
+  - {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} config 表单配置
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  设置指定类型数据源的表单配置
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.setFormConfig('http', [
+  {
+    name: 'url',
+    text: '请求地址',
+    type: 'text',
+  },
+  {
+    name: 'method',
+    text: '请求方法',
+    type: 'select',
+    options: [
+      { text: 'GET', value: 'GET' },
+      { text: 'POST', value: 'POST' },
+    ],
+  },
+]);
+```
+
+## getFormValue
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 数据源类型，默认为 'base'
+
+- **返回：**
+
+  - {Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>} 数据源默认值
+
+- **详情：**
+
+  获取指定类型数据源的默认值
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const defaultValue = dataSourceService.getFormValue('http');
+console.log(defaultValue);
+```
+
+## setFormValue
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 数据源类型
+  - {Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>} value 数据源默认值
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  设置指定类型数据源的默认值
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.setFormValue('http', {
+  type: 'http',
+  method: 'GET',
+  url: '',
+});
+```
+
+## getFormEvent
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 数据源类型，默认为 'base'
+
+- **返回：**
+
+  - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 事件列表
+
+- **详情：**
+
+  获取指定类型数据源的事件列表
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const events = dataSourceService.getFormEvent('http');
+console.log(events);
+```
+
+## setFormEvent
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 数据源类型
+  - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} value 事件列表
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  设置指定类型数据源的事件列表
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.setFormEvent('http', [
+  { label: '请求成功', value: 'success' },
+  { label: '请求失败', value: 'error' },
+]);
+```
+
+## getFormMethod
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 数据源类型，默认为 'base'
+
+- **返回：**
+
+  - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 方法列表
+
+- **详情：**
+
+  获取指定类型数据源的方法列表
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const methods = dataSourceService.getFormMethod('http');
+console.log(methods);
+```
+
+## setFormMethod
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` type 数据源类型
+  - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} value 方法列表
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  设置指定类型数据源的方法列表
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.setFormMethod('http', [
+  { label: '发起请求', value: 'request' },
+  { label: '重试', value: 'retry' },
+]);
+```
+
+## add
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} config 数据源配置
+
+- **返回：**
+
+  - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} 添加后的数据源配置
+
+- **详情：**
+
+  添加一个数据源，如果配置中没有id或id已存在，会自动生成新的id
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const newDs = dataSourceService.add({
+  type: 'http',
+  title: '用户信息',
+  url: '/api/user',
+  method: 'GET',
+});
+
+console.log(newDs.id); // 自动生成的id
+```
+
+## update
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} config 数据源配置
+  - `{Object}` options 可选配置
+    - {[ChangeRecord](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L27-L39)[]} changeRecords 变更记录
+
+- **返回：**
+
+  - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} 更新后的数据源配置
+
+- **详情：**
+
+  更新数据源
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const updatedDs = dataSourceService.update({
+  id: 'ds_123',
+  type: 'http',
+  title: '用户详情',
+  url: '/api/user/detail',
+});
+
+console.log(updatedDs);
+```
+
+## remove
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：**
+
+  - `{string}` id 数据源id
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  删除指定id的数据源
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.remove('ds_123');
+```
+
+## createId
+
+- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
+
+- **参数：** 无
+
+- **返回：**
+
+  - `{string}` 生成的唯一id
+
+- **详情：**
+
+  生成一个唯一的数据源id，格式为 `ds_` + guid
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const id = dataSourceService.createId();
+console.log(id); // 'ds_xxx-xxx-xxx'
+```
+
+## getDataSourceById
+
+- **参数：**
+
+  - `{string}` id 数据源id
+
+- **返回：**
+
+  - {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221) | undefined} 数据源配置
+
+- **详情：**
+
+  根据id获取数据源配置
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+const ds = dataSourceService.getDataSourceById('ds_123');
+console.log(ds);
+```
+
+## copyWithRelated
+
+- **参数：**
+
+  - {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]} config 组件节点配置
+  - `{TargetOptions}` collectorOptions 可选的收集器配置
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  复制组件时会带上组件关联的数据源，将关联的数据源存储到 localStorage
+
+- **示例：**
+
+```js
+import { dataSourceService, editorService } from '@tmagic/editor';
+
+const node = editorService.get('node');
+dataSourceService.copyWithRelated(node);
+```
+
+## paste
+
+- **参数：** 无
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  粘贴数据源，从 localStorage 中读取复制的数据源并添加到当前页面
+  
+  如果数据源id已存在，则不会覆盖
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.paste();
+```
+
+## resetState
+
+- **参数：** 无
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  重置数据源服务状态，清空所有数据源
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.resetState();
+```
+
+## destroy
+
+- **参数：** 无
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  销毁 dataSourceService，移除所有事件监听并重置状态
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.destroy();
+```
+
+## usePlugin
+
+- **详情：**
+
+相对于[use](#use), usePlugin支持更加灵活更加细致的扩展， 上述方法中标记有`扩展支持： 是`的方法都支持使用usePlugin扩展
+
+每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.usePlugin({
+  beforeAdd(config) {
+    console.log('添加前:', config);
+    return [config];
+  },
+  
+  afterAdd(result, config) {
+    console.log('添加后:', result);
+    return result;
+  },
+});
+```
+
+## removeAllPlugins
+
+- **详情：**
+
+删掉当前设置的所有扩展
+
+- **示例：**
+
+```js
+import { dataSourceService } from '@tmagic/editor';
+
+dataSourceService.removeAllPlugins();
+```

docs/api/editor/eventsServiceMethods.md

@@ -1,97 +1,244 @@
-# eventService方法
+# eventsService方法
 
 ## init
 
 - **参数：**
 
-  - 
+  - {Record<string, { events: [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]; methods: [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[] }>} eventMethodList 事件方法列表配置
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  初始化事件服务，设置所有组件的事件和方法列表
+
+  :::tip
+  该方法通常由编辑器内部调用，开发者可以通过 [m-editor 的 eventMethodList prop](./props.md#eventmethodlist) 来配置
+  :::
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+eventsService.init({
+  page: {
+    events: [
+      { label: '页面加载', value: 'load' },
+      { label: '页面卸载', value: 'unload' },
+    ],
+    methods: [
+      { label: '刷新', value: 'refresh' },
+      { label: '返回', value: 'back' },
+    ],
+  },
+  button: {
+    events: [
+      { label: '点击', value: 'click' },
+    ],
+    methods: [],
+  },
+});
+```
+
 ## setEvents
 
 - **参数：**
 
-  - 
+  - {Record<string, [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]>} events 事件配置对象
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  批量设置多个组件类型的事件列表
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+eventsService.setEvents({
+  page: [
+    { label: '页面加载', value: 'load' },
+    { label: '页面显示', value: 'show' },
+  ],
+  text: [
+    { label: '点击', value: 'click' },
+  ],
+});
+```
+
 ## setEvent
 
 - **参数：**
 
-  - 
+  - `{string}` type 组件类型
+  - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} events 事件列表
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  设置指定组件类型的事件列表
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+eventsService.setEvent('button', [
+  { label: '点击', value: 'click' },
+  { label: '长按', value: 'longpress' },
+]);
+```
+
 ## getEvent
 
 - **参数：**
 
-  - 
+  - `{string}` type 组件类型
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 事件列表
 
 - **详情：**
 
+  获取指定组件类型的事件列表
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+const events = eventsService.getEvent('button');
+console.log(events); // [{ label: '点击', value: 'click' }, ...]
+```
+
 ## setMethods
 
 - **参数：**
 
-  - 
+  - {Record<string, [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]>} methods 方法配置对象
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  批量设置多个组件类型的方法列表
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+eventsService.setMethods({
+  page: [
+    { label: '刷新', value: 'refresh' },
+    { label: '滚动到顶部', value: 'scrollToTop' },
+  ],
+  video: [
+    { label: '播放', value: 'play' },
+    { label: '暂停', value: 'pause' },
+  ],
+});
+```
+
 ## setMethod
 
 - **参数：**
 
-  - 
+  - `{string}` type 组件类型
+  - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} methods 方法列表
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  设置指定组件类型的方法列表
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+eventsService.setMethod('video', [
+  { label: '播放', value: 'play' },
+  { label: '暂停', value: 'pause' },
+  { label: '停止', value: 'stop' },
+]);
+```
+
 ## getMethod
 
 - **参数：**
 
-  - 
+  - `{string}` type 组件类型
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 方法列表
 
 - **详情：**
 
+  获取指定组件类型的方法列表
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+const methods = eventsService.getMethod('video');
+console.log(methods); // [{ label: '播放', value: 'play' }, ...]
+```
+
+## resetState
+
+- **参数：** 无
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  重置事件服务状态，清空所有事件和方法配置
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+eventsService.resetState();
+```
+
 ## destroy
 
-- **参数：**
+- **参数：** 无
-
-  - 
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
+
+  销毁 eventsService，重置状态并移除所有事件监听和插件
+
+- **示例：**
+
+```js
+import { eventsService } from '@tmagic/editor';
+
+eventsService.destroy();
+```

docs/api/editor/props.md

@@ -49,7 +49,7 @@ const dsl = ref({
 
 - **默认值：** `[]`
 
-- **类型：** [ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L279-L284)
+- **类型：** [ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L355)
 
 ::: tip
 icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/icon.html)
@@ -60,6 +60,19 @@ icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/ico
   icon: 'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png'
 }
 ```
+url支持相对路径或者绝对路径，例如
+```js
+{
+  icon: './icon.png'
+}
+{
+  icon: '/icon.png'
+}
+```
+:::
+
+:::warning
+请注意如果只是文件名的话是不行的，会被认为是css class
 :::
 
 - **示例：**
@@ -107,6 +120,39 @@ const componentGroupList = ref([
 此配置仅在[sidebar](#sidebar)中配置了'component-list'时有效
 :::
 
+## datasourceList
+
+- **详情：**
+  
+  左侧数据源面板中可新增的自定义数据源列表
+
+- **默认值：**  `[]`
+
+- **类型：** [DatasourceTypeOption](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L589)
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :datasource-list="datasourceTypeList"></m-editor>
+</template>
+
+<script setup>
+import { ref } from 'Vue';
+
+const datasourceTypeList = ref([
+  {
+    type: 'http',
+    text: 'Http数据源'
+  }
+])
+</script>
+```
+
+:::tip
+系统默认已提供了base,http两种基础数据源，此处配置的使用者新增的数据源
+:::
+
 ## sidebar
 
 - **详情：**
@@ -149,6 +195,7 @@ const sidebar = ref({
       component: markRaw(ModListPanel),
       text: '模块',
     },
+  ],
 });
 </script>
 
@@ -328,7 +375,7 @@ const stageContentMenu = ref([
 ```html
 <template>
   <m-editor
-    runtime-url="https://tencent.github.io/tmagic-editor/playground/runtime/vue3/playground/index.html"
+    runtime-url="https://tencent.github.io/tmagic-editor/playground/runtime/vue/playground/index.html"
   ></m-editor>
 </template>
 ```
@@ -368,6 +415,26 @@ const renderFunction = async (stage) => {
 </script>
 ```
 
+## renderType
+
+- **详情：**
+  
+  是用iframe渲染还是直接渲染
+
+- **默认值：** `iframe`
+
+- **类型：** `string`
+  
+  'iframe' | 'native'
+
+- **示例：**
+
+```html
+<template>
+  <m-editor render-type="native"></m-editor>
+</template>
+```
+
 ## autoScrollIntoView
 
 - **详情：**
@@ -514,6 +581,92 @@ const eventMethodList = {
 </script>
 ```
 
+## datasourceValues
+
+- **详情：**
+  
+  与 `propsValues` 类似，新增数据源时的默认值
+
+  :::tip
+  该属性最终会设置到[dataSourceService](./dataSourceServiceMethods.md)中，所以也可直接调用[dataSourceService.setFormValue()](./dataSourceServiceMethods.md#setFormValue)方法来配置
+  :::
+
+- **默认值：** `{}`
+
+- **类型：** Record<string, Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>>
+  
+- **示例：**
+
+```html
+<template>
+  <m-editor :datasource-values="datasourceValues"></m-editor>
+</template>
+
+<script setup>
+const datasourceValues = {
+  'user-info': {
+    type: 'user-info',
+    title: '用户信息',
+    description: '用户信息',
+    fields: [
+      {
+        type: 'string',
+        name: 'nick',
+        title: '昵称',
+        defaultValue: '请登录',
+        enable: true,
+      },
+    ]
+  },
+};
+</script>
+```
+
+## datasourceConfigs
+
+- **详情：**
+  
+  与 `propsConfigs` 类似，数据源的属性配置[表单的dsl](../../form-config/fields/text.md)
+
+  :::tip
+  该属性最终会设置到[dataSourceService](./dataSourceServiceMethods.md)中，所以也可直接调用[dataSourceService.setFormConfig()](./dataSourceServiceMethods.md#setFormConfig)方法来配置
+  :::
+
+- **默认值：** `{}`
+
+- **类型：** Record<string, [FormConfig](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L706)>
+  
+- **示例：**
+
+```html
+<template>
+  <m-editor  :datasource-configs="datasourceConfigs"></m-editor>
+</template>
+
+<script setup>
+const datasourceConfigs = {
+  'user-info': [
+    {
+      type: 'select',
+      name: 'type',
+      text: '类型'，
+      options: [
+        { text: 'qq', value: 'qq'}
+      ]
+    }
+  ],
+};
+</script>
+```
+
+## datasourceEventMethodList
+
+- **详情：**
+  
+  组件属性配置中事件tab中的事件名与动作的下拉选项列表
+
+- **默认值：** `{}`
+
 ## moveableOptions
 
 - **详情：**
@@ -522,7 +675,7 @@ const eventMethodList = {
 
 - **默认值：** `{}`
 
-- **类型：** ((config?: [CustomizeMoveableOptionsCallbackConfig](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/stage/src/types.ts#L97-L109)) => MoveableOptions) | [MoveableOptions](https://daybrush.com/moveable/release/latest/doc/)
+- **类型：** ((config: [CustomizeMoveableOptionsCallbackConfig](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/stage/src/types.ts#L97-L109)) => MoveableOptions) | [MoveableOptions](https://daybrush.com/moveable/release/latest/doc/)
 
 - **示例：**
 
@@ -791,4 +944,339 @@ const updateDragEl = (el, target) => {
   <m-editor :disabled-drag-start="true"></m-editor>
 </template>
 ```
-  
+  
+## disabledMultiSelect
+
+- **详情：**
+  
+禁止多选
+
+- **类型：** `boolean`
+  
+- **默认值：** `false`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :disabled-multi-select="true"></m-editor>
+</template>
+```
+  
+## guidesOptions
+
+- **详情：**
+  
+  画布标尺和参考线的配置选项
+
+- **默认值：** `undefined`
+
+- **类型：** `Partial<GuidesOptions>`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :guides-options="guidesOptions"></m-editor>
+</template>
+
+<script setup>
+const guidesOptions = {
+  // 标尺刻度单位
+  unit: 1,
+  // 标尺背景色
+  backgroundColor: '#f0f0f0',
+  // 标尺文字颜色
+  textColor: '#333',
+  // 参考线颜色
+  lineColor: '#ff0000',
+};
+</script>
+```
+
+## disabledPageFragment
+
+- **详情：**
+  
+  禁用页面片功能
+
+  页面片是可以在多个页面中复用的组件集合
+
+- **默认值：** `false`
+
+- **类型：** `boolean`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :disabled-page-fragment="true"></m-editor>
+</template>
+```
+
+## disabledStageOverlay
+
+- **详情：**
+  
+  禁用双击在浮层中单独编辑选中组件的功能
+
+  启用时，双击组件可以在浮层中单独编辑，避免其他组件干扰
+
+- **默认值：** `false`
+
+- **类型：** `boolean`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :disabled-stage-overlay="true"></m-editor>
+</template>
+```
+
+## disabledShowSrc
+
+- **详情：**
+  
+  禁用属性配置面板右下角"显示源码"的按钮
+
+  该按钮可以查看和编辑组件的 JSON 配置
+
+- **默认值：** `false`
+
+- **类型：** `boolean`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :disabled-show-src="true"></m-editor>
+</template>
+```
+
+## disabledDataSource
+
+- **详情：**
+  
+  禁用数据源功能
+
+  禁用后，左侧面板将不显示数据源选项卡
+
+- **默认值：** `false`
+
+- **类型：** `boolean`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :disabled-data-source="true"></m-editor>
+</template>
+```
+
+## disabledCodeBlock
+
+- **详情：**
+  
+  禁用代码块功能
+
+  禁用后，左侧面板将不显示代码块选项卡
+
+- **默认值：** `false`
+
+- **类型：** `boolean`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :disabled-code-block="true"></m-editor>
+</template>
+```
+
+## treeIndent
+
+- **详情：**
+  
+  组件树、代码块列表、数据源列表的缩进配置（单位：px）
+
+- **默认值：** `undefined`
+
+- **类型：** `number`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :tree-indent="20"></m-editor>
+</template>
+```
+
+## treeNextLevelIndentIncrement
+
+- **详情：**
+  
+  组件树、代码块列表、数据源列表子节点缩进增量配置（单位：px）
+
+  每一级子节点会在父节点缩进基础上增加该值
+
+- **默认值：** `undefined`
+
+- **类型：** `number`
+
+- **示例：**
+
+```html
+<template>
+  <!-- 第一级缩进20px，第二级缩进35px，第三级缩进50px -->
+  <m-editor :tree-indent="20" :tree-next-level-indent-increment="15"></m-editor>
+</template>
+```
+
+## customContentMenu
+
+- **详情：**
+  
+  用于自定义组件树与画布的右键菜单
+
+  该函数会在显示右键菜单前被调用，接收默认菜单项作为参数，返回最终显示的菜单项
+
+- **默认值：** `(menus) => menus`
+
+- **类型：** `(menus: (MenuButton | MenuComponent)[], data: { node?: MNode; page?: MPage; parent?: MContainer; stage?: StageCore }) => (MenuButton | MenuComponent)[]`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :custom-content-menu="customContentMenu"></m-editor>
+</template>
+
+<script setup>
+const customContentMenu = (menus, { node }) => {
+  // 为特定类型的组件添加自定义菜单
+  if (node?.type === 'container') {
+    menus.push({
+      type: 'button',
+      text: '清空容器',
+      handler: () => {
+        // 清空容器的逻辑
+      },
+    });
+  }
+  
+  // 可以过滤掉某些菜单项
+  return menus.filter(menu => menu.text !== '删除');
+};
+</script>
+```
+
+## extendFormState
+
+- **详情：**
+  
+  扩展表单状态
+
+  用于在属性表单中注入自定义的状态数据，这些数据可以在表单配置的各个字段为函数时的第一个参数中获取
+
+- **默认值：** `undefined`
+
+- **类型：** `(state: FormState) => Record<string, any> | Promise<Record<string, any>>`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :extend-form-state="extendFormState"></m-editor>
+</template>
+
+<script setup>
+const extendFormState = async (state) => {
+  // 返回自定义的状态数据
+  return {
+    // 可以是同步数据
+    currentUser: {
+      name: 'Admin',
+      role: 'admin',
+    },
+    // 也可以是异步获取的数据
+    projectConfig: await fetchProjectConfig(),
+  };
+};
+</script>
+```
+
+:::tip
+扩展的状态可以在表单配置中通过 `state` 访问，例如：
+
+```js
+{
+  name: 'title',
+  text: '标题',
+  // 根据扩展的状态动态设置
+  disabled: (state) => state.currentUser.role !== 'admin',
+}
+```
+:::
+
+## pageBarSortOptions
+
+- **详情：**
+  
+  页面标签栏的拖拽排序配置参数
+
+  用于配置页面标签的拖拽排序行为
+
+- **默认值：** `undefined`
+
+- **类型：** [PageBarSortOptions](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :page-bar-sort-options="sortOptions"></m-editor>
+</template>
+
+<script setup>
+const sortOptions = {
+  // 是否启用拖拽排序
+  animation: 150,
+  // 拖拽手柄的class
+  handle: '.page-bar-item',
+  // 其他 sortablejs 配置
+};
+</script>
+```
+
+## pageFilterFunction
+
+- **详情：**
+  
+  页面搜索/过滤函数
+
+  用于自定义页面的搜索逻辑，在页面列表中输入关键词时会调用该函数进行过滤
+
+- **默认值：** `undefined`
+
+- **类型：** `(page: MPage | MPageFragment, keyword: string) => boolean`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :page-filter-function="pageFilterFunction"></m-editor>
+</template>
+
+<script setup>
+const pageFilterFunction = (page, keyword) => {
+  // 自定义搜索逻辑
+  // 不仅搜索页面名称，还搜索页面的其他属性
+  return (
+    page.name?.includes(keyword) ||
+    page.title?.includes(keyword) ||
+    page.id?.includes(keyword)
+  );
+};
+</script>
+```

docs/api/editor/slots.md

@@ -1,29 +1,111 @@
 # Editor组件 slots
 
+## header
+
+- **详情：** 编辑器最顶部区域
+
+- **默认：** 无
+
+- **示例：**
+
+```html
+<template>
+  <m-editor>
+    <template #header>
+      <div class="custom-header">自定义头部内容</div>
+    </template>
+  </m-editor>
+</template>
+```
+
 ## nav
 
 - **详情：** 编辑器顶部菜单栏
 
 - **默认：** [NavMenu.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/NavMenu.vue)
 
+- **插槽 Props：**
+  - `editorService`: editorService 实例
+
 :::warning
 属性配置[menu](./props.md#menu)由默认组件接收，如设置该slot，[menu](./props.md#menu)配置将失效
 :::
 
+- **示例：**
+
+```html
+<template>
+  <m-editor>
+    <template #nav="{ editorService }">
+      <div class="custom-nav">
+        <button @click="save">保存</button>
+      </div>
+    </template>
+  </m-editor>
+</template>
+```
+
+## content-before
+
+- **详情：** 编辑器主要内容区域之前
+
+- **默认：** 无
+
+## src-code
+
+- **详情：** 源码查看区域
+
+- **默认：** 默认的代码编辑器
+
+- **插槽 Props：**
+  - `editorService`: editorService 实例
+
 ## sidebar
 
 - **详情：** 左边栏
 
 - **默认：** [Sidebar.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/sidebar/Sidebar.vue)
 
+- **插槽 Props：**
+  - `editorService`: editorService 实例
+
 :::warning
 属性配置[sidebar](./props.md#sidebar)由默认组件接收，如设置该slot，[sidebar](./props.md#sidebar)配置将失效
 :::
 
+- **示例：**
+
+```html
+<template>
+  <m-editor>
+    <template #sidebar="{ editorService }">
+      <div class="custom-sidebar">
+        <!-- 自定义侧边栏内容 -->
+      </div>
+    </template>
+  </m-editor>
+</template>
+```
+
+## component-list
+
+- **详情：** 左边栏中的组件列表
+
+- **默认：** 默认的组件列表
+
+- **插槽 Props：**
+  - `componentGroupList`: 组件分组列表
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
 ## component-list-panel-header
 
 - **详情：** 左边栏中的组件列表内上方位置
 
+- **默认：** 无
+
 :::warning
 如设置了[sidebar](#sidebar)插槽，此插槽将失效
 :::
@@ -34,24 +116,84 @@
 
 - **默认：** 图片加文案
 
+- **插槽 Props：**
+  - `component`: 组件配置对象
+
 :::warning
 如设置了[sidebar](#sidebar)插槽，此插槽将失效
 :::
 
+- **示例：**
+
+```html
+<template>
+  <m-editor>
+    <template #component-list-item="{ component }">
+      <div class="custom-item">
+        <span>{{ component.text }}</span>
+      </div>
+    </template>
+  </m-editor>
+</template>
+```
+
 ## layer-panel-header
 
 - **详情：** 左边栏中的已选组件（组件树）内顶部位置
 
+- **默认：** 无
+
 :::warning
 如设置了[sidebar](#sidebar)插槽，此插槽将失效
 :::
 
 ## layer-node-content
 
-- **详情：** 左边栏中的已选组件（组件树）节点
+- **详情：** 左边栏中的已选组件（组件树）节点完整内容
+
+- **默认：** 组件名称加id和工具按钮
+
+- **插槽 Props：**
+  - `data`: 节点数据
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
+## layer-node-label
+
+- **详情：** 左边栏中的已选组件（组件树）节点标签部分
 
 - **默认：** 组件名称加id
 
+- **插槽 Props：**
+  - `data`: 节点数据
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
+- **示例：**
+
+```html
+<template>
+  <m-editor>
+    <template #layer-node-label="{ data }">
+      <span>{{ data.type }} - {{ data.name }}</span>
+    </template>
+  </m-editor>
+</template>
+```
+
+## layer-node-tool
+
+- **详情：** 左边栏中的已选组件（组件树）节点右侧工具区域
+
+- **默认：** 无
+
+- **插槽 Props：**
+  - `data`: 节点数据
+
 :::warning
 如设置了[sidebar](#sidebar)插槽，此插槽将失效
 :::
@@ -60,6 +202,8 @@
 
 - **详情：** 左边栏中的代码块列表内顶部位置
 
+- **默认：** 无
+
 :::warning
 如设置了[sidebar](#sidebar)插槽，此插槽将失效
 :::
@@ -68,13 +212,44 @@
 
 - **详情：** 左边栏中的代码块列表中代码块右侧位置
 
+- **默认：** 无
+
+- **插槽 Props：**
+  - `id`: 代码块id
+  - `data`: 代码块数据
+
 :::warning
 如设置了[sidebar](#sidebar)插槽，此插槽将失效
 :::
 
-## code-block-edit-panel-header
+## code-block-panel-search
 
-- **详情：** 代码块弹窗编辑器中弹窗顶部区域
+- **详情：** 左边栏中的代码块列表搜索框位置
+
+- **默认：** 无
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
+## data-source-panel-tool
+
+- **详情：** 左边栏中的数据源列表中数据源右侧位置
+
+- **默认：** 无
+
+- **插槽 Props：**
+  - `data`: 数据源数据
+
+:::warning
+如设置了[sidebar](#sidebar)插槽，此插槽将失效
+:::
+
+## data-source-panel-search
+
+- **详情：** 左边栏中的数据源列表搜索框位置
+
+- **默认：** 无
 
 :::warning
 如设置了[sidebar](#sidebar)插槽，此插槽将失效
@@ -86,6 +261,9 @@
 
 - **默认：** [Workspace.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/workspace/Workspace.vue)
 
+- **插槽 Props：**
+  - `editorService`: editorService 实例
+
 ## stage
 
 - **详情：** 画布
@@ -94,15 +272,63 @@
 
 ## workspace-content
 
-- **详情：** 编辑器中间区域内
+- **详情：** 编辑器中间区域内，画布上方位置
+
+- **默认：** 无
+
+- **插槽 Props：**
+  - `editorService`: editorService 实例
+
+## page-bar
+
+- **详情：** 编辑器中间区域底部页面标签栏
+
+- **默认：** 默认的页面标签栏
+
+## page-bar-add-button
+
+- **详情：** 页面标签栏中的"添加页面"按钮
+
+- **默认：** 默认的添加按钮
 
 ## page-bar-title
 
 - **详情：** 编辑器中间区域底部页面标题
 
+- **默认：** 页面名称
+
+- **插槽 Props：**
+  - `page`: 页面配置对象
+
+- **示例：**
+
+```html
+<template>
+  <m-editor>
+    <template #page-bar-title="{ page }">
+      <span>{{ page.name }} - {{ page.id }}</span>
+    </template>
+  </m-editor>
+</template>
+```
+
 ## page-bar-popover
 
-- **详情：** 编辑器中间区域底部页面标题悬浮框
+- **详情：** 编辑器中间区域底部页面标题悬浮框内容
+
+- **默认：** 页面详细信息
+
+- **插槽 Props：**
+  - `page`: 页面配置对象
+
+## page-list-popover
+
+- **详情：** 页面列表弹出框内容
+
+- **默认：** 页面列表
+
+- **插槽 Props：**
+  - `list`: 页面列表
 
 ## props-panel
 
@@ -114,8 +340,40 @@
 
 - **详情：** 编辑器右侧属性配置内顶部区域
 
+- **默认：** 无
+
+## content-after
+
+- **详情：** 编辑器主要内容区域之后
+
+- **默认：** 无
+
+## footer
+
+- **详情：** 编辑器底部区域
+
+- **默认：** 无
+
 ## empty
 
 - **详情：** 当前没有页面时，编辑器中间区域
 
 - **默认：** [AddPageBox.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/AddPageBox.vue)
+
+- **插槽 Props：**
+  - `editorService`: editorService 实例
+
+- **示例：**
+
+```html
+<template>
+  <m-editor>
+    <template #empty="{ editorService }">
+      <div class="custom-empty">
+        <p>暂无页面</p>
+        <button @click="createFirstPage">创建第一个页面</button>
+      </div>
+    </template>
+  </m-editor>
+</template>
+```

docs/api/editor/storageServiceMethods.md

@@ -4,114 +4,250 @@
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
 
-- **参数：**
+- **参数：** 无
-
-  - 
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{Storage}` Storage 对象
 
 - **详情：**
 
+  获取数据存储对象，默认返回 localStorage
+  
+  可以通过插件机制替换为其他存储对象（如 sessionStorage）
+
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+const storage = storageService.getStorage();
+console.log(storage); // localStorage
+
+// 通过插件替换为 sessionStorage
+storageService.usePlugin({
+  afterGetStorage() {
+    return window.sessionStorage;
+  },
+});
+```
+
 ## getNamespace
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
 
-- **参数：**
+- **参数：** 无
-
-  - 
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{string}` 命名空间字符串
 
 - **详情：**
 
+  获取存储项的命名空间，默认为 'tmagic'
+  
+  命名空间用于区分不同应用的存储数据
+
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+const namespace = storageService.getNamespace();
+console.log(namespace); // 'tmagic'
+```
+
 ## clear
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
 
-- **参数：**
+- **参数：** 无
-
-  - 
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  清空当前存储对象中的所有数据
+
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+storageService.clear();
+```
+
 ## getItem
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
 
 - **参数：**
 
-  - 
+  - `{string}` key 存储项的键名
+  - `{Options}` options 可选配置
+    - `namespace?: string` 自定义命名空间
+    - `protocol?: Protocol` 数据协议类型
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{any}` 存储的值，如果不存在返回 null
 
 - **详情：**
 
+  获取存储项，支持多种数据类型的自动解析
+  
+  支持的协议类型：
+  - `Protocol.OBJECT`: JavaScript 对象
+  - `Protocol.JSON`: JSON 格式
+  - `Protocol.NUMBER`: 数字类型
+  - `Protocol.BOOLEAN`: 布尔类型
+  - `Protocol.STRING`: 字符串类型
+
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+// 获取字符串
+const str = storageService.getItem('myKey');
+
+// 使用自定义命名空间
+const value = storageService.getItem('key', { namespace: 'custom' });
+
+// 指定协议类型
+const num = storageService.getItem('count', { protocol: Protocol.NUMBER });
+```
+
 ## key
 
 - **参数：**
 
-  - 
+  - `{number}` index 索引位置
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{string | null}` 指定位置的键名，不存在返回 null
 
 - **详情：**
 
+  获取存储对象中指定索引位置的键名
+
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+const firstKey = storageService.key(0);
+console.log(firstKey);
+```
+
 ## removeItem
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
 
 - **参数：**
 
-  - 
+  - `{string}` key 存储项的键名
+  - `{Options}` options 可选配置
+    - `namespace?: string` 自定义命名空间
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  移除指定的存储项
+
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+// 移除默认命名空间下的存储项
+storageService.removeItem('myKey');
+
+// 移除自定义命名空间下的存储项
+storageService.removeItem('key', { namespace: 'custom' });
+```
+
 ## setItem
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
 
 - **参数：**
 
-  - 
+  - `{string}` key 存储项的键名
+  - `{any}` value 要存储的值
+  - `{Options}` options 可选配置
+    - `namespace?: string` 自定义命名空间
+    - `protocol?: Protocol` 数据协议类型
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  设置存储项，自动序列化复杂数据类型
+
+- **示例：**
+
+```js
+import { storageService, Protocol } from '@tmagic/editor';
+
+// 存储字符串
+storageService.setItem('name', 'tmagic');
+
+// 存储对象
+storageService.setItem('config', { a: 1, b: 2 }, { protocol: Protocol.OBJECT });
+
+// 存储数字
+storageService.setItem('count', 100, { protocol: Protocol.NUMBER });
+
+// 使用自定义命名空间
+storageService.setItem('key', 'value', { namespace: 'custom' });
+```
+
 ## destroy
 
-- **参数：**
+- **参数：** 无
-
-  - 
 
 - **返回：**
 
-  - `{Promise<void>}`
+  - `{void}`
 
 - **详情：**
 
+  销毁 storageService，移除所有事件监听和插件
+
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+storageService.destroy();
+```
+
 ## use
 
 使用中间件的方式扩展方法，上述方法中标记有`扩展支持： 是`的方法都支持使用use扩展
 
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+storageService.use({
+  getItem(key, options, next) {
+    console.log('获取存储项:', key);
+    return next();
+  },
+});
+```
+
 ## usePlugin
 
 - **详情：**
@@ -120,9 +256,35 @@
 
 每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值
 
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+storageService.usePlugin({
+  beforeSetItem(key, value, options) {
+    console.log('设置前:', key, value);
+    return [key, value, options];
+  },
+  
+  afterGetItem(result, key, options) {
+    console.log('获取后:', result);
+    return result;
+  },
+});
+```
+
 ## removeAllPlugins
 
 - **详情：**
 
 删掉当前设置的所有扩展
 
+- **示例：**
+
+```js
+import { storageService } from '@tmagic/editor';
+
+storageService.removeAllPlugins();
+```
+

docs/api/editor/uiServiceMethods.md

@@ -1,12 +1,89 @@
 # uiService方法
 
+## set
+
+- **参数：**
+
+  - `{keyof UiState}` name 状态键名
+  - `{any}` value 状态值
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  设置UI服务的状态
+  
+  可用的状态键：
+  - `uiSelectMode`: UI选择模式
+  - `showSrc`: 是否显示源码
+  - `showStylePanel`: 是否显示样式面板
+  - `zoom`: 缩放比例
+  - `stageContainerRect`: 画布容器尺寸
+  - `stageRect`: 画布尺寸
+  - `columnWidth`: 列宽度配置
+  - `showGuides`: 是否显示参考线
+  - `showRule`: 是否显示标尺
+  - `propsPanelSize`: 属性面板尺寸
+  - `showAddPageButton`: 是否显示添加页面按钮
+  - `showPageListButton`: 是否显示页面列表按钮
+  - `hideSlideBar`: 是否隐藏侧边栏
+  - `sideBarItems`: 侧边栏项目
+  - `navMenuRect`: 导航菜单尺寸
+  - `frameworkRect`: 框架尺寸
+
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+// 设置缩放比例
+uiService.set('zoom', 1.5);
+
+// 设置画布尺寸
+uiService.set('stageRect', { width: 375, height: 667 });
+
+// 显示/隐藏参考线
+uiService.set('showGuides', true);
+
+// 显示/隐藏标尺
+uiService.set('showRule', true);
+```
+
+## get
+
+- **参数：**
+
+  - `{keyof UiState}` name 状态键名
+
+- **返回：**
+
+  - `{any}` 对应的状态值
+
+- **详情：**
+
+  获取UI服务的状态值
+
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+const zoom = uiService.get('zoom');
+console.log('当前缩放:', zoom);
+
+const stageRect = uiService.get('stageRect');
+console.log('画布尺寸:', stageRect);
+```
+
 ## zoom
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
 
 - **参数：**
 
-  - `{number}` zoom 缩放倍数
+  - `{number}` zoom 缩放增量（可以为负数）
 
 - **返回：**
 
@@ -14,24 +91,111 @@
 
 - **详情：**
 
-设置缩放倍数，最小为0.1
+  调整缩放倍数，最小为0.1
+  
+  传入的值会被累加到当前缩放倍数上
+
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+// 放大0.1倍
+await uiService.zoom(0.1);
+
+// 缩小0.1倍
+await uiService.zoom(-0.1);
+
+// 当前缩放如果是1.0，执行zoom(0.5)后变为1.5
+await uiService.zoom(0.5);
+```
 
 ## calcZoom
 
 - **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
 
+- **参数：** 无
+
 - **返回：**
 
-  - `{Promise<number>}`
+  - `{Promise<number>}` 计算出的缩放倍数
 
 - **详情：**
 
-计算出缩放以适应的倍数
+  计算"缩放以适应"的倍数
+  
+  根据画布容器的尺寸和画布尺寸自动计算出合适的缩放比例，使画布完全显示在容器内
+
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+const fitZoom = await uiService.calcZoom();
+console.log('适应缩放:', fitZoom);
+
+// 应用缩放以适应
+uiService.set('zoom', fitZoom);
+```
+
+## resetState
+
+- **参数：** 无
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  重置UI服务状态到初始值
+
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+uiService.resetState();
+```
+
+## destroy
+
+- **参数：** 无
+
+- **返回：**
+
+  - `{void}`
+
+- **详情：**
+
+  销毁 uiService，重置状态并移除所有事件监听和插件
+
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+uiService.destroy();
+```
 
 ## use
 
 使用中间件的方式扩展方法，上述方法中标记有`扩展支持： 是`的方法都支持使用use扩展
 
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+uiService.use({
+  async zoom(value, next) {
+    console.log('缩放前:', uiService.get('zoom'));
+    await next();
+    console.log('缩放后:', uiService.get('zoom'));
+  },
+});
+```
+
 ## usePlugin
 
 - **详情：**
@@ -40,9 +204,36 @@
 
 每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值
 
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+uiService.usePlugin({
+  beforeZoom(value) {
+    console.log('缩放增量:', value);
+    return [value];
+  },
+  
+  afterCalcZoom(result) {
+    console.log('计算的缩放:', result);
+    // 可以修改返回值
+    return result;
+  },
+});
+```
+
 ## removeAllPlugins
 
 - **详情：**
 
 删掉当前设置的所有扩展
 
+- **示例：**
+
+```js
+import { uiService } from '@tmagic/editor';
+
+uiService.removeAllPlugins();
+```
+

docs/api/table/events.md

@@ -2,14 +2,109 @@
 
 ## sort-change
 
+- **参数：**
+  - `{ column, prop, order }` - 排序信息对象
+    - `column: Object` - 排序的列配置
+    - `prop: string` - 排序的列属性名
+    - `order: 'ascending' | 'descending' | null` - 排序方式
+
+- **说明：** 当表格的排序条件发生变化时触发
+
+- **示例：**
+  ```js
+  const handleSortChange = ({ column, prop, order }) => {
+    console.log('排序变化:', prop, order);
+  };
+  ```
+
 ## after-action
 
+- **参数：**
+  - `action: string` - 操作类型
+  - `data: any` - 操作相关数据
+
+- **说明：** 表格操作完成后触发
+
+- **示例：**
+  ```js
+  const handleAfterAction = (action, data) => {
+    console.log('操作完成:', action, data);
+  };
+  ```
+
 ## select
 
+- **参数：**
+  - `selection: Array<any>` - 当前选中的行数据数组
+  - `row: any` - 刚刚被选中的行数据
+
+- **说明：** 当用户手动勾选某一行时触发
+
+- **示例：**
+  ```js
+  const handleSelect = (selection, row) => {
+    console.log('选中行:', row);
+    console.log('当前选中:', selection);
+  };
+  ```
+
 ## select-all
 
+- **参数：**
+  - `selection: Array<any>` - 当前选中的行数据数组
+
+- **说明：** 当用户手动勾选全选 Checkbox 时触发
+
+- **示例：**
+  ```js
+  const handleSelectAll = (selection) => {
+    console.log('全选/取消全选:', selection.length);
+  };
+  ```
+
 ## selection-change
 
+- **参数：**
+  - `selection: Array<any>` - 当前选中的行数据数组
+
+- **说明：** 当选择项发生变化时触发
+
+- **示例：**
+  ```js
+  const handleSelectionChange = (selection) => {
+    console.log('选中项变化:', selection);
+  };
+  ```
+
 ## expand-change
 
+- **参数：**
+  - `row: any` - 被展开/收起的行数据
+  - `expandedRows: Array<any>` - 当前所有展开的行数据数组
+
+- **说明：** 当用户展开或收起某一行时触发（用于可展开表格）
+
+- **示例：**
+  ```js
+  const handleExpandChange = (row, expandedRows) => {
+    console.log('展开状态变化:', row);
+    console.log('当前展开行:', expandedRows);
+  };
+  ```
+
 ## cell-click
+
+- **参数：**
+  - `row: any` - 行数据
+  - `column: Object` - 列配置
+  - `cell: HTMLElement` - 单元格 DOM 元素
+  - `event: Event` - 原生事件对象
+
+- **说明：** 当某个单元格被点击时触发
+
+- **示例：**
+  ```js
+  const handleCellClick = (row, column, cell, event) => {
+    console.log('单元格点击:', row, column.property);
+  };
+  ```

docs/api/table/methods.md

@@ -2,6 +2,40 @@
 
 ## toggleRowSelection
 
+- **参数：**
+  - `row: any` - 要切换选中状态的行数据
+  - `selected?: boolean` - 是否选中，不传则切换当前状态
+
+- **说明：** 切换某一行的选中状态
+
+- **示例：**
+  ```js
+  tableRef.value.toggleRowSelection(row, true); // 选中
+  tableRef.value.toggleRowSelection(row, false); // 取消选中
+  tableRef.value.toggleRowSelection(row); // 切换状态
+  ```
+
 ## toggleRowExpansion
 
+- **参数：**
+  - `row: any` - 要展开/收起的行数据
+  - `expanded?: boolean` - 是否展开，不传则切换当前状态
+
+- **说明：** 切换某一行的展开状态（用于可展开表格）
+
+- **示例：**
+  ```js
+  tableRef.value.toggleRowExpansion(row, true); // 展开
+  tableRef.value.toggleRowExpansion(row, false); // 收起
+  ```
+
 ## clearSelection
+
+- **参数：** 无
+
+- **说明：** 清空所有选中的行
+
+- **示例：**
+  ```js
+  tableRef.value.clearSelection();
+  ```

docs/api/table/props.md

@@ -2,123 +2,122 @@
 
 ## data
 
-- **详情：**
+- **详情：** 表格数据，数组格式
-  
   
+- **默认值：** `[]`
 
-- **默认值：** 
+- **类型：** `Array<any>`
-
-
-
-- **类型：** 
 
+- **示例：**
+  ```js
+  [
+    { id: 1, name: '张三', age: 20 },
+    { id: 2, name: '李四', age: 25 }
+  ]
+  ```
 
 ## columns
 
-- **详情：**
+- **详情：** 表格列配置
-  
   
+- **默认值：** `[]`
 
-- **默认值：** 
+- **类型：** `Array<ColumnConfig>`
-
-
-
-- **类型：** 
 
+- **示例：**
+  ```js
+  [
+    { prop: 'name', label: '姓名', width: 120 },
+    { prop: 'age', label: '年龄', width: 80 }
+  ]
+  ```
 
 ## spanMethod
 
 - **详情：** 合并行或列的计算方法
   
+- **默认值：** `undefined`
+
+- **类型：** `Function`
+
+- **参数：**
+  - `{ row, column, rowIndex, columnIndex }`
   
+- **返回值：** `[rowspan, colspan]` 或 `{ rowspan, colspan }`
 
-- **默认值：** 
+- **示例：**
-
+  ```js
-
+  ({ rowIndex, columnIndex }) => {
-
+    if (rowIndex % 2 === 0) {
-- **类型：** 
+      if (columnIndex === 0) {
+        return [1, 2];
+      } else if (columnIndex === 1) {
+        return [0, 0];
+      }
+    }
+  }
+  ```
 
 ## loading
 
-- **详情：**
+- **详情：** 是否显示加载状态
-  
   
+- **默认值：** `false`
 
-- **默认值：** 
+- **类型：** `boolean`
-
-
-
-- **类型：** 
-
 
 ## showHeader
 
 - **详情：** 是否显示表头
   
+- **默认值：** `true`
 
-- **默认值：** 
+- **类型：** `boolean`
-
-
-
-- **类型：** 
 
 ## bodyHeight
 
-- **详情：** Table的最大高度。合法的值为数字或者单位为 px 的高度
+- **详情：** Table 的最大高度。合法的值为数字或者单位为 px 的高度
   
-- **默认值：** 
+- **默认值：** `undefined`
 
+- **类型：** `string | number`
 
-
+- **示例：**
-- **类型：** 
+  ```js
+  bodyHeight: 400
+  bodyHeight: '400px'
+  ```
 
 ## emptyText
 
 - **详情：** 空数据时显示的文本内容
   
-- **默认值：** 
+- **默认值：** `'暂无数据'`
-
-
-
-- **类型：** 
-
-
 
+- **类型：** `string`
 
 ## defaultExpandAll
 
-- **详情：** 是否默认展开所有行，当Table包含展开行存在或者为树形表格时有效
+- **详情：** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
   
-- **默认值：** 
+- **默认值：** `false`
-
-
-- **类型：** 
-
-
 
+- **类型：** `boolean`
 
 ## rowkeyName
 
-- **详情：**
+- **详情：** 行数据的 Key，用来优化 Table 的渲染
-  
   
+- **默认值：** `'id'`
 
-- **默认值：** 
+- **类型：** `string`
-
-
-
-- **类型：** 
 
+- **说明：** 在使用 reserve-selection 功能与显示树形数据时，该属性是必填的
 
 ## border
 
-- **详情：**
+- **详情：** 是否显示边框
-  
   
+- **默认值：** `false`
 
-- **默认值：** 
+- **类型：** `boolean`
-
-
-
-- **类型：** 
-

docs/form-config/editor-fields/code-link.md

@@ -0,0 +1,38 @@
+# CodeLink 代码链接
+
+通过弹窗链接的方式编辑代码内容。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'code-link',
+  name: 'codeLink',
+  text: '代码配置'
+}
+```
+
+## 自定义弹窗标题
+
+```js
+{
+  type: 'code-link',
+  name: 'codeLink',
+  text: '代码配置',
+  formTitle: '编辑代码'
+}
+```
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| formTitle  | 弹窗标题    | string   | — | —   |
+| codeOptions  | 代码编辑器配置项    | object   | — | —   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |

docs/form-config/editor-fields/code-select-col.md

@@ -0,0 +1,37 @@
+# CodeSelectCol 代码块选择列
+
+代码块选择器的列组件，支持选择代码块并配置参数。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'code-select-col',
+  name: 'codeId',
+  text: '代码块'
+}
+```
+
+## 禁止编辑
+
+```js
+{
+  type: 'code-select-col',
+  name: 'codeId',
+  text: '代码块',
+  notEditable: true
+}
+```
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| notEditable  | 是否不可编辑代码块（disable控制是否可选择）    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |

docs/form-config/editor-fields/code-select.md

@@ -0,0 +1,33 @@
+# CodeSelect 代码块选择器
+
+用于选择代码块并配置参数的组件。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'code-select',
+  name: 'codeSelect',
+  text: '代码块'
+}
+```
+
+## 功能说明
+
+CodeSelect 组件支持：
+- 选择代码块
+- 选择数据源方法
+- 配置代码块参数
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| className  | 自定义类名    | string   | — | —   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |

docs/form-config/editor-fields/code.md

@@ -0,0 +1,61 @@
+# Code 代码编辑器
+
+代码编辑器字段，用于编辑代码内容。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'code',
+  name: 'code',
+  text: '代码'
+}
+```
+
+## 指定语言
+
+```js
+{
+  type: 'code',
+  name: 'code',
+  text: '代码',
+  language: 'javascript'
+}
+```
+
+## 自动调整大小
+
+```js
+{
+  type: 'code',
+  name: 'code',
+  text: '代码',
+  autosize: {
+    minRows: 3,
+    maxRows: 10
+  }
+}
+```
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| language  | 代码语言    | string   | javascript/typescript/json等 | —   |
+| height  | 编辑器高度    | string   | — | —   |
+| parse  | 是否解析代码    | boolean   | — | false   |
+| options  | 编辑器配置项    | object   | — | —   |
+| autosize  | 自动调整大小配置    | object   | — | —   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |
+
+## autosize Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| minRows | 最小行数 | number | — | — |
+| maxRows | 最大行数 | number | — | — |

docs/form-config/editor-fields/cond-op-select.md

@@ -0,0 +1,37 @@
+# CondOpSelect 条件操作选择器
+
+用于选择条件操作符的选择器。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'cond-op',
+  name: 'op',
+  text: '操作符'
+}
+```
+
+## 指定父级字段
+
+```js
+{
+  type: 'cond-op',
+  name: 'op',
+  text: '操作符',
+  parentFields: ['field1', 'field2']
+}
+```
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| parentFields  | 父级字段    | string[]   | — | —   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |

docs/form-config/editor-fields/data-source-field-select.md

@@ -0,0 +1,67 @@
+# DataSourceFieldSelect 数据源字段选择器
+
+用于选择数据源字段的级联选择器。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'data-source-field-select',
+  name: 'field',
+  text: '数据源字段'
+}
+```
+
+## 返回字段key
+
+```js
+{
+  type: 'data-source-field-select',
+  name: 'field',
+  text: '数据源字段',
+  value: 'key'
+}
+```
+
+## 限制字段类型
+
+```js
+{
+  type: 'data-source-field-select',
+  name: 'field',
+  text: '数据源字段',
+  dataSourceFieldType: ['string', 'number']
+}
+```
+
+## 父子节点不关联
+
+```js
+{
+  type: 'data-source-field-select',
+  name: 'field',
+  text: '数据源字段',
+  checkStrictly: true
+}
+```
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| value  | 返回值类型    | string   | key/value | —   |
+| checkStrictly  | 是否严格遵守父子节点不互相关联    | boolean / Function   | — | —   |
+| dataSourceFieldType  | 允许选择的字段类型    | DataSourceFieldType[]   | — | —   |
+| fieldConfig  | 自定义字段配置    | ChildConfig   | — | —   |
+| notEditable  | 是否不可编辑数据源（disable控制是否可选择）    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |
+
+## value说明
+- `key`: 不编译，返回数据源id和字段name
+- `value`: 编译后返回数据源data[field]

docs/form-config/editor-fields/data-source-fields.md

@@ -0,0 +1,25 @@
+# DataSourceFields 数据源字段配置
+
+用于配置数据源字段的表单组件。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'data-source-fields',
+  name: 'fields',
+  text: '字段配置'
+}
+```
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |

docs/form-config/editor-fields/data-source-input.md

@@ -0,0 +1,25 @@
+# DataSourceInput 数据源输入框
+
+支持绑定数据源的输入框组件。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'data-source-input',
+  name: 'input',
+  text: '输入框'
+}
+```
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |

docs/form-config/editor-fields/data-source-method-select.md

@@ -0,0 +1,37 @@
+# DataSourceMethodSelect 数据源方法选择器
+
+用于选择数据源方法的选择器。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'data-source-method-select',
+  name: 'method',
+  text: '数据源方法'
+}
+```
+
+## 禁止编辑
+
+```js
+{
+  type: 'data-source-method-select',
+  name: 'method',
+  text: '数据源方法',
+  notEditable: true
+}
+```
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| notEditable  | 是否不可编辑数据源（disable控制是否可选择）    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |

docs/form-config/editor-fields/data-source-methods.md

@@ -0,0 +1,25 @@
+# DataSourceMethods 数据源方法配置
+
+用于配置数据源方法的表单组件。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'data-source-methods',
+  name: 'methods',
+  text: '方法配置'
+}
+```
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |

docs/form-config/editor-fields/data-source-mocks.md

@@ -0,0 +1,25 @@
+# DataSourceMocks 数据源Mock配置
+
+用于配置数据源Mock数据的表单组件。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'data-source-mocks',
+  name: 'mocks',
+  text: 'Mock配置'
+}
+```
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |

docs/form-config/editor-fields/data-source-select.md

@@ -0,0 +1,55 @@
+# DataSourceSelect 数据源选择器
+
+用于选择数据源的下拉选择器。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'data-source-select',
+  name: 'dataSource',
+  text: '数据源'
+}
+```
+
+## 过滤数据源类型
+
+```js
+{
+  type: 'data-source-select',
+  name: 'dataSource',
+  text: '数据源',
+  dataSourceType: 'http'
+}
+```
+
+## 返回数据源ID
+
+```js
+{
+  type: 'data-source-select',
+  name: 'dataSource',
+  text: '数据源',
+  value: 'id'
+}
+```
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| placeholder  | 输入框占位文本   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| dataSourceType  | 数据源类型过滤    | string   | base/http等 | —   |
+| value  | 返回值类型    | string   | id/value | —   |
+| notEditable  | 是否不可编辑数据源（disable控制是否可选择）    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |
+
+## value说明
+- `id`: 不编译，返回数据源id
+- `value`: 编译后返回数据源data

docs/form-config/editor-fields/display-conds.md

@@ -0,0 +1,38 @@
+# DisplayConds 显示条件配置
+
+用于配置组件显示条件的表单组件。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'display-conds',
+  name: 'displayConds',
+  text: '显示条件'
+}
+```
+
+## 带标题前缀
+
+```js
+{
+  type: 'display-conds',
+  name: 'displayConds',
+  text: '显示条件',
+  titlePrefix: '条件'
+}
+```
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| titlePrefix  | 标题前缀    | string   | — | —   |
+| parentFields  | 父级字段    | string[] / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | —   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |

docs/form-config/editor-fields/event-select.md

@@ -0,0 +1,49 @@
+# EventSelect 事件选择器
+
+用于配置组件或数据源事件的选择器。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'event-select',
+  name: 'events',
+  text: '事件配置',
+  src: 'component'
+}
+```
+
+## 数据源事件
+
+```js
+{
+  type: 'event-select',
+  name: 'events',
+  text: '事件配置',
+  src: 'datasource'
+}
+```
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| src  | 事件来源    | string   | datasource/component | —   |
+| labelWidth  | 标签宽度    | string   | — | —   |
+| eventNameConfig  | 事件名称表单配置    | FormItem   | — | —   |
+| actionTypeConfig  | 动作类型配置    | FormItem   | — | —   |
+| targetCompConfig  | 联动组件配置    | FormItem   | — | —   |
+| compActionConfig  | 联动组件动作配置    | FormItem   | — | —   |
+| codeActionConfig  | 联动代码配置    | FormItem   | — | —   |
+| dataSourceActionConfig  | 联动数据源配置    | FormItem   | — | —   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |
+
+## src说明
+- `component`: 组件事件
+- `datasource`: 数据源事件

docs/form-config/editor-fields/key-value.md

@@ -0,0 +1,39 @@
+# KeyValue 键值对
+
+用于配置键值对数据的表单组件。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'key-value',
+  name: 'params',
+  text: '参数'
+}
+```
+
+## 高级模式
+
+设置 `advanced` 为 `true`，可切换到代码编辑模式。
+
+```js
+{
+  type: 'key-value',
+  name: 'params',
+  text: '参数',
+  advanced: true
+}
+```
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| advanced  | 是否支持高级模式（代码编辑）    | boolean   | — | false   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |

docs/form-config/editor-fields/page-fragment-select.md

@@ -0,0 +1,30 @@
+# PageFragmentSelect 页面片选择器
+
+用于选择页面片的下拉选择器。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'page-fragment-select',
+  name: 'pageFragment',
+  text: '页面片'
+}
+```
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |
+
+## 使用说明
+
+1. 下拉框会自动列出当前项目中所有的页面片
+2. 选中页面片后，点击编辑图标可跳转到对应页面片进行编辑

docs/form-config/editor-fields/ui-select.md

@@ -0,0 +1,33 @@
+# UISelect 组件选择器
+
+用于在画布中选择组件的选择器。
+
+::: warning 注意
+此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
+:::
+
+## 基础用法
+
+```js
+{
+  type: 'ui-select',
+  name: 'targetId',
+  text: '目标组件'
+}
+```
+
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| name | 绑定值 | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |
+
+## 使用说明
+
+1. 点击"点击此处选择"按钮进入选择模式
+2. 在画布中点击目标组件完成选择
+3. 选择后会显示组件名称和ID
+4. 可通过清除按钮清空选择
+5. 点击组件名称可跳转到对应组件

docs/form-config/fields/cascader.md

@@ -214,3 +214,241 @@
     </p>
   </template>
 </demo-block>
+
+## 任意一级可选
+
+在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。
+
+可通过 `checkStrictly = true` 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。
+
+<demo-block type="form" :config="[{
+  type: 'cascader',
+  name: 'cascader',
+  text: '选项',
+  placeholder: '请选择',
+  checkStrictly: true,
+  options: [
+    { 
+      value: 'zhinan',
+      label: '指南',
+      children: [{
+        value: 'shejiyuanze',
+        label: '设计原则',
+        children: [{
+          value: 'yizhi',
+          label: '一致'
+        }, {
+          value: 'fankui',
+          label: '反馈'
+        }]
+      }]
+    },
+    { 
+      value: 'zujian',
+      label: '组件',
+      children: [{
+        value: 'basic',
+        label: 'Basic',
+        children: [{
+          value: 'layout',
+          label: 'Layout 布局'
+        }, {
+          value: 'color',
+          label: 'Color 色彩'
+        }]
+      }]
+    }
+  ]
+}]">
+  <template #source>
+    <p>
+      配置 checkStrictly 为 true，可选择任意一级选项
+    </p>
+  </template>
+</demo-block>
+
+## 仅返回选中节点的值
+
+在选中节点改变时，默认返回由该节点所在的各级菜单的值所组成的数组。可通过 `emitPath = false` 设置仅返回该节点的值。
+
+<demo-block type="form" :config="[{
+  type: 'cascader',
+  name: 'cascader',
+  text: '选项',
+  placeholder: '请选择',
+  emitPath: false,
+  checkStrictly: true,
+  options: [
+    { 
+      value: 'zhinan',
+      label: '指南',
+      children: [{
+        value: 'shejiyuanze',
+        label: '设计原则',
+        children: [{
+          value: 'yizhi',
+          label: '一致'
+        }, {
+          value: 'fankui',
+          label: '反馈'
+        }]
+      }]
+    },
+    { 
+      value: 'zujian',
+      label: '组件',
+      children: [{
+        value: 'basic',
+        label: 'Basic',
+        children: [{
+          value: 'layout',
+          label: 'Layout 布局'
+        }, {
+          value: 'color',
+          label: 'Color 色彩'
+        }]
+      }]
+    }
+  ]
+}]">
+  <template #source>
+    <p>
+      配置 emitPath 为 false，仅返回选中节点的值，而非完整路径数组
+    </p>
+  </template>
+</demo-block>
+
+## 值分隔符
+
+当需要将选中值以字符串形式存储时，可通过 `valueSeparator` 指定分隔符，组件会自动将数组转换为字符串存储，读取时也会自动还原。
+
+<demo-block type="form" :config="[{
+  type: 'cascader',
+  name: 'cascader',
+  text: '选项',
+  placeholder: '请选择',
+  valueSeparator: '/',
+  options: [
+    { 
+      value: 'zhinan',
+      label: '指南',
+      children: [{
+        value: 'shejiyuanze',
+        label: '设计原则',
+        children: [{
+          value: 'yizhi',
+          label: '一致'
+        }]
+      }]
+    },
+    { 
+      value: 'zujian',
+      label: '组件',
+      children: [{
+        value: 'basic',
+        label: 'Basic',
+        children: [{
+          value: 'layout',
+          label: 'Layout 布局'
+        }]
+      }]
+    }
+  ]
+}]">
+  <template #source>
+    <p>
+      配置 valueSeparator 为 '/'，选中值将以 'zhinan/shejiyuanze/yizhi' 的字符串形式存储
+    </p>
+  </template>
+</demo-block>
+
+## 远程选项
+
+通过接口请求获取选项列表
+
+<demo-block type="form" :config="[{
+  type: 'cascader',
+  name: 'cascader',
+  text: '选项',
+  placeholder: '请选择',
+  remote: true,
+  option: {
+    url: 'cascader/remote',
+    root: 'data',
+    cache: true,
+    timeout: 5000,
+    body: { query: '' },
+    item: (data) => data
+  }
+}]">
+  <template #source>
+    <p>
+      配置 remote 为 true，然后配置 option 对象，而不是 options 数组
+    </p>
+  </template>
+</demo-block>
+
+同时在 `src/main.ts` 中需要自定义实现请求：
+
+```typescript 
+app.use(MagicForm, {
+  request: async (options: any) => {
+    // 自定义请求实现
+  },
+});
+```
+
+## 动态选项
+
+options 支持传入函数，可根据表单其他字段动态生成选项列表
+
+```typescript
+{
+  type: 'cascader',
+  name: 'cascader',
+  text: '选项',
+  options: (mForm, { model, formValue }) => {
+    // 根据表单值动态返回选项
+    return [
+      { value: 'a', label: '选项A', children: [] }
+    ];
+  }
+}
+```
+
+## Cascader Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
+| name | 绑定值 | string | — | — |
+| text | 表单标签 | string | — | — |
+| placeholder | 输入框占位文本 | string | — | — |
+| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | false |
+| multiple | 是否多选 | boolean | — | false |
+| emitPath | 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值 | boolean | — | true |
+| checkStrictly | 是否严格的遵守父子节点不互相关联 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | false |
+| valueSeparator | 合并成字符串时的分隔符 | string / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
+| popperClass | 弹出内容的自定义类名 | string | — | — |
+| remote | 是否为远程搜索 | boolean | — | false |
+| options | 选项数据源 | Array / Function | — | — |
+| option | 远程选项配置 | Object | — | — |
+| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
+
+## options item
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
+| value | 选项的值 | any | — | — |
+| label | 选项的标签 | string | — | — |
+| children | 子选项 | Array | — | — |
+
+## option（远程配置）
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
+| url | 请求地址 | string | — | — |
+| root | 响应数据的根路径 | string | — | — |
+| cache | 是否缓存请求结果 | boolean | — | false |
+| timeout | 请求超时时间（毫秒） | number | — | — |
+| body | 请求体 | Object / Function | — | — |
+| item | 数据转换函数，将响应数据转换为选项格式 | Function | — | — |

docs/form-config/fields/checkbox.md

@@ -1,4 +1,5 @@
 # Checkbox 多选框
+
 一组备选项中进行多选
 
 ## 基础用法
@@ -12,7 +13,7 @@
 }]">
   <template #source>
     <p>
-      要使用 Checkbox 组件，只需要配置type: 'checkbox'，选中意味着变量的值为true。默认绑定变量的值会是 Boolean ，选中为 true 。
+      要使用 Checkbox 组件，只需要配置 type: 'checkbox'，选中意味着变量的值为 true。默认绑定变量的值会是 Boolean，选中为 true。
     </p>
   </template>
 </demo-block>
@@ -29,7 +30,59 @@
 }]">
   <template #source>
     <p>
-     设置 disabled 属性即可，它接受一个 Boolean ， true 为禁用，也可以接受一个返回 Boolean 的函数。
+     设置 disabled 属性即可，它接受一个 Boolean，true 为禁用，也可以接受一个返回 Boolean 的函数。
+    </p>
+  </template>
+</demo-block>
+
+## 自定义选中值
+
+通过 `activeValue` 和 `inactiveValue` 自定义选中和未选中时的值。
+
+<demo-block type="form" :config="[{
+  type: 'checkbox',
+  name: 'checkbox',
+  text: '选项',
+  activeValue: 'yes',
+  inactiveValue: 'no'
+}]">
+  <template #source>
+    <p>
+      设置 activeValue 为选中时的值，inactiveValue 为未选中时的值。
+    </p>
+  </template>
+</demo-block>
+
+## 数值类型
+
+当需要绑定数值类型时，可以使用 `filter: 'number'` 配合默认的 activeValue/inactiveValue。
+
+<demo-block type="form" :config="[{
+  type: 'checkbox',
+  name: 'checkbox',
+  text: '选项',
+  filter: 'number'
+}]">
+  <template #source>
+    <p>
+      配置 filter 为 'number' 时，默认 activeValue 为 1，inactiveValue 为 0。
+    </p>
+  </template>
+</demo-block>
+
+## 使用 Label 显示
+
+通过 `useLabel` 属性控制是否使用 label 作为显示内容。
+
+<demo-block type="form" :config="[{
+  type: 'checkbox',
+  name: 'checkbox',
+  text: '选项',
+  useLabel: true
+}]">
+  <template #source>
+    <p>
+      设置 useLabel 为 true 时，不显示 text 内容，由外部 label 控制显示。
     </p>
   </template>
 </demo-block>
@@ -44,32 +97,84 @@
   text: '选项',
   options: [
     { text: '选项1', value: 1 },
-    { text: '选项2', value: 2 }
+    { text: '选项2', value: 2 },
+    { text: '选项3', value: 3 }
   ]
 }]">
   <template #source>
     <p>
-      checkbox-group 元素能把多个 checkbox 管理为一组。
+      checkbox-group 元素能把多个 checkbox 管理为一组，绑定值为数组类型。
     </p>
   </template>
 </demo-block>
 
+## 多选框组禁用选项
+
+在选项中设置 `disabled` 可禁用单个选项。
+
+<demo-block type="form" :config="[{
+  type: 'checkbox-group',
+  name: 'checkbox',
+  text: '选项',
+  options: [
+    { text: '选项1', value: 1 },
+    { text: '选项2', value: 2, disabled: true },
+    { text: '选项3', value: 3 }
+  ]
+}]">
+  <template #source>
+    <p>
+      在 options 中设置 disabled: true 可禁用该选项。
+    </p>
+  </template>
+</demo-block>
+
+## 动态选项
+
+options 支持函数形式，可根据表单状态动态生成选项。
+
+```typescript
+{
+  type: 'checkbox-group',
+  name: 'checkbox',
+  text: '选项',
+  options: (mForm, { model, formValue }) => {
+    // 根据表单值动态返回选项
+    return [
+      { text: '选项A', value: 'a' },
+      { text: '选项B', value: 'b' }
+    ];
+  }
+}
+```
 
 ## Checkbox Attributes
-| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+
-|---------- |-------- |---------- |-------------  |-------- |
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
 | name | 绑定值 | string | — | — |
-| text     | 表单标签   | string |       —        |      —   |
+| text | 表单标签 | string | — | — |
-| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)    | — | false   |
+| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | false |
-| activeValue  | 选中时的值	    | string / number / Function   | — | 1   |
+| activeValue | 选中时的值 | string / number | — | true（filter 为 'number' 时默认 1） |
-| inactiveValue  | 没有选中时的值  | string / number / Function   | — | 0   |
+| inactiveValue | 未选中时的值 | string / number | — | false（filter 为 'number' 时默认 0） |
-| onChange  | 值变化时触发的函数  | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |
+| useLabel | 是否使用外部 label 显示 | boolean | — | false |
+| filter | 值过滤器 | 'number' / Function | — | — |
+| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
 
 ## CheckboxGroup Attributes
-| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+
-|---------- |-------- |---------- |-------------  |-------- |
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
 | name | 绑定值 | string | — | — |
-| text     | 表单标签   | string |       —        |      —   |
+| text | 表单标签 | string | — | — |
-| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | false |
-| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |
+| options | 选项列表 | Array / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
-| options  | 选项  | Array   | — | -   |
+| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
+
+## options item
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
+| value | 选项的值 | any | — | — |
+| text | 选项的标签 | string | — | — |
+| disabled | 是否禁用该选项 | boolean | — | false |

docs/form-config/fields/color-picker.md

@@ -1,17 +1,86 @@
 # ColorPicker 颜色选择器
 
-用于颜色选择，支持多种格式。
+用于颜色选择，支持多种颜色格式，包括透明度设置。
 
 ## 基础用法
 
 <demo-block type="form" :config="[{
   text: '颜色选择器',
   type: 'colorPicker',
-  name: 'color',
+  name: 'color'
 }]">
   <template #source>
     <p>
-      在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
+      type 为 'colorPicker'，默认支持透明度选择（showAlpha: true）。
     </p>
   </template>
 </demo-block>
+
+## 禁用状态
+
+<demo-block type="form" :config="[{
+  text: '颜色选择器',
+  type: 'colorPicker',
+  name: 'color',
+  disabled: true
+}]">
+  <template #source>
+    <p>
+      设置 disabled 属性可禁用颜色选择器。
+    </p>
+  </template>
+</demo-block>
+
+## 设置默认值
+
+<demo-block type="form" :config="[{
+  text: '颜色选择器',
+  type: 'colorPicker',
+  name: 'color',
+  defaultValue: '#409EFF'
+}]">
+  <template #source>
+    <p>
+      通过 defaultValue 设置默认颜色值。
+    </p>
+  </template>
+</demo-block>
+
+## 带透明度的颜色
+
+颜色选择器默认开启透明度选择，返回值为 rgba 格式。
+
+<demo-block type="form" :config="[{
+  text: '颜色选择器',
+  type: 'colorPicker',
+  name: 'color',
+  defaultValue: 'rgba(64, 158, 255, 0.5)'
+}]">
+  <template #source>
+    <p>
+      支持 rgba 格式的颜色值，可以设置透明度。
+    </p>
+  </template>
+</demo-block>
+
+## ColorPicker Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
+| name | 绑定值 | string | — | — |
+| text | 表单标签 | string | — | — |
+| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | false |
+| defaultValue | 默认颜色值 | string | — | — |
+| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
+
+## 颜色格式说明
+
+支持以下颜色格式：
+
+| 格式 | 示例 | 说明 |
+|------|------|------|
+| HEX | #409EFF | 十六进制颜色值 |
+| RGB | rgb(64, 158, 255) | RGB 颜色值 |
+| RGBA | rgba(64, 158, 255, 0.5) | 带透明度的 RGBA 颜色值 |
+| HSL | hsl(210, 100%, 63%) | HSL 颜色值 |
+| HSLA | hsla(210, 100%, 63%, 0.5) | 带透明度的 HSLA 颜色值 |

docs/form-config/fields/date-picker.md

@@ -11,7 +11,7 @@
 }]">
   <template #source>
     <p>
-      在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
+      以日期为基本单位，基础的日期选择控件
     </p>
   </template>
 </demo-block>
@@ -26,15 +26,31 @@
 }]">
   <template #source>
     <p>
-      在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
+      通过 <code>disabled</code> 属性禁用日期选择器
     </p>
   </template>
 </demo-block>
-##  日期格式
+
+## 占位符
+
+<demo-block type="form" :config="[{
+  type: 'date',
+  name: 'date',
+  text: '日期选择器',
+  placeholder: '请选择日期'
+}]">
+  <template #source>
+    <p>
+      通过 <code>placeholder</code> 属性设置输入框占位文本
+    </p>
+  </template>
+</demo-block>
+
+## 日期格式
 
 使用`format`指定输入框的格式；使用`valueFormat`指定绑定值的格式。
 
-默认情况下，组件接受并返回`Date`对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
+默认情况下，组件的 `format` 默认值为 `YYYY/MM/DD`，`valueFormat` 默认值为 `YYYY/MM/DD`。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
 
 :::warning
 请注意大小写
@@ -42,13 +58,11 @@
 
 | 格式 | 含义 | 备注 | 举例 |
 |------|------|------|------|
-| `yyyy` | 年 | | 2017 |
+| `YYYY` | 年 | | 2017 |
 | `M`  | 月 | 不补0 | 1 |
 | `MM` | 月 | | 01 |
-| `W`  | 周 | 仅周选择器的 `format` 可用；不补0 | 1 |
+| `D`  | 日 | 不补0 | 2 |
-| `WW` | 周 | 仅周选择器的 `format` 可用 | 01 |
+| `DD` | 日 | | 02 |
-| `d`  | 日 | 不补0 | 2 |
-| `dd` | 日 | | 02 |
 | `H`  | 小时 | 24小时制；不补0 | 3 |
 | `HH` | 小时 | 24小时制 | 03 |
 | `h`  | 小时 | 12小时制，须和 `A` 或 `a` 使用；不补0 | 3 |
@@ -57,30 +71,42 @@
 | `mm` | 分钟 | | 04 |
 | `s`  | 秒 | 不补0 | 5 |
 | `ss` | 秒 | | 05 |
-| `timestamp` | JS时间戳 | 组件绑定值为`number`类型 | 1483326245000 |
+| `x` | JS时间戳 | 组件绑定值为`number`类型 | 1483326245000 |
 | `[MM]` | 不需要格式化字符 | 使用方括号标识不需要格式化的字符 (如  [A] [MM])  | MM |
 
 <demo-block type="form" :config="[{
   type: 'date',
   name: 'date',
   text: '日期选择器',
-  valueFormat: 'timestamp'
+  format: 'YYYY-MM-DD',
+  valueFormat: 'x'
 }]">
   <template #source>
     <p>
-      在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
+      设置 <code>valueFormat</code> 为 <code>timestamp</code>，绑定值将返回时间戳格式
     </p>
   </template>
 </demo-block>
 
 ## Attributes
+
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| name | 绑定值 | string | — | — |
+| name | 绑定值的字段名 | string | — | — |
-| text     | 表单标签   | string |       —        |      —   |
+| text | 表单标签 | string | — | — |
-| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)    | — | false   |
+| placeholder | 输入框占位文本 | string | — | — |
-| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
+| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
-| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |
+| format | 显示在输入框中的格式 | string | 见[日期格式](#日期格式) | YYYY/MM/DD |
+| valueFormat | 绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#日期格式) | YYYY/MM/DD |
+| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | — |
 
+## TypeScript 定义
 
+```typescript
+interface DateConfig extends FormItem, Input {
+  type: 'date';
+  format?: 'YYYY-MM-dd HH:mm:ss' | string;
+  valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
+}
+```
 

docs/form-config/fields/daterange-picker.md

@@ -0,0 +1,46 @@
+# DateRangePicker 日期范围选择器
+
+用于选择或输入日期范围
+
+## 基础用法
+
+<demo-block type="form" :config="[{
+  type: 'daterange',
+  name: 'daterange',
+  text: '日期范围'
+}]">
+  <template #source>
+    <p>
+      type为'daterange'
+    </p>
+  </template>
+</demo-block>
+
+## 绑定多个字段
+
+可以通过配置 `names` 来将日期范围绑定到两个不同的字段上。
+
+<demo-block type="form" :config="[{
+  type: 'daterange',
+  names: ['startTime', 'endTime'],
+  text: '日期范围'
+}]">
+  <template #source>
+    <p>
+      配置 names 属性，将开始时间和结束时间分别绑定到 startTime 和 endTime 字段。
+    </p>
+  </template>
+</demo-block>
+
+## Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| name | 绑定值（数组形式） | string | — | — |
+| names | 绑定值（拆分为两个字段） | string[] | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| dateFormat | 日期格式 | string | — | YYYY/MM/DD |
+| timeFormat | 时间格式 | string | — | HH:mm:ss |
+| valueFormat | 绑定值的格式 | string | — | YYYY/MM/DD HH:mm:ss |
+| defaultTime | 默认时间 | Date[] | — | — |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |

docs/form-config/fields/datetime-picker.md

@@ -11,7 +11,22 @@
 }]">
   <template #source>
     <p>
-      在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
+      通过设置 <code>type: 'datetime'</code> 使用日期时间选择器，可以同时选择日期和时间。
+    </p>
+  </template>
+</demo-block>
+
+## 带占位符
+
+<demo-block type="form" :config="[{
+  type: 'datetime',
+  name: 'dateTime',
+  text: '日期时间选择器',
+  placeholder: '请选择日期时间'
+}]">
+  <template #source>
+    <p>
+      通过 <code>placeholder</code> 属性设置输入框的占位文本。
     </p>
   </template>
 </demo-block>
@@ -26,16 +41,16 @@
 }]">
   <template #source>
     <p>
-      在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
+      通过 <code>disabled</code> 属性禁用日期时间选择器，支持布尔值或函数。
     </p>
   </template>
 </demo-block>
 
-##  日期格式
+## 日期格式
 
-使用`format`指定输入框的格式；使用`valueFormat`指定绑定值的格式。
+使用 `format` 指定输入框的格式；使用 `valueFormat` 指定绑定值的格式。
 
-默认情况下，组件接受并返回`Date`对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
+默认情况下，组件接受并返回格式化后的字符串。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
 
 :::warning
 请注意大小写
@@ -43,13 +58,11 @@
 
 | 格式 | 含义 | 备注 | 举例 |
 |------|------|------|------|
-| `yyyy` | 年 | | 2017 |
+| `YYYY` | 年 | | 2017 |
 | `M`  | 月 | 不补0 | 1 |
 | `MM` | 月 | | 01 |
-| `W`  | 周 | 仅周选择器的 `format` 可用；不补0 | 1 |
+| `D`  | 日 | 不补0 | 2 |
-| `WW` | 周 | 仅周选择器的 `format` 可用 | 01 |
+| `DD` | 日 | | 02 |
-| `d`  | 日 | 不补0 | 2 |
-| `dd` | 日 | | 02 |
 | `H`  | 小时 | 24小时制；不补0 | 3 |
 | `HH` | 小时 | 24小时制 | 03 |
 | `h`  | 小时 | 12小时制，须和 `A` 或 `a` 使用；不补0 | 3 |
@@ -60,29 +73,32 @@
 | `ss` | 秒 | | 05 |
 | `A`  | AM/PM | 仅 `format` 可用，大写 | AM |
 | `a`  | am/pm | 仅 `format` 可用，小写 | am |
-| `timestamp` | JS时间戳 | 仅 `valueFormat` 可用；组件绑定值为`number`类型 | 1483326245000 |
+| `x`  | JS时间戳（毫秒） | 仅 `valueFormat` 可用 | 1483326245000 |
-| `[MM]` | 不需要格式化字符 | 使用方括号标识不需要格式化的字符 (如  [A] [MM])  | MM |
+| `X`  | Unix时间戳（秒） | 仅 `valueFormat` 可用 | 1483326245 |
 
 <demo-block type="form" :config="[{
   type: 'datetime',
   name: 'dateTime',
   text: '日期时间选择器',
-  format: 'yyyy-MM-dd',
+  format: 'YYYY-MM-DD HH:mm',
-  valueFormat: 'timestamp'
+  valueFormat: 'x'
 }]">
   <template #source>
     <p>
-      在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
+      自定义格式化：显示格式为 <code>YYYY-MM-DD HH:mm</code>，绑定值格式为时间戳。
     </p>
   </template>
 </demo-block>
 
 ## Attributes
+
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| name | 绑定值 | string | — | — |
+| name | 绑定值的字段名 | string | — | — |
-| text     | 表单标签   | string |       —        |      —   |
+| text | 表单标签 | string | — | — |
-| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)    | — | false   |
+| placeholder | 输入框占位文本 | string | — | — |
-| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd HH:mm:ss |
+| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
-| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
+| format | 显示在输入框中的格式 | string | 见[日期格式](#日期格式) | YYYY/MM/DD HH:mm:ss |
-| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |
+| valueFormat | 绑定值的格式 | string | 见[日期格式](#日期格式) | YYYY/MM/DD HH:mm:ss |
+| defaultTime | 选择日期后的默认时间值 | Date | — | — |
+| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | — |

docs/form-config/fields/dynamic-field.md

@@ -0,0 +1,52 @@
+# DynamicField 动态表单
+
+根据模型中某个字段的值，动态生成一组表单字段。
+
+## 基础用法
+
+<demo-block type="form" :config="[{
+  type: 'select',
+  name: 'type',
+  text: '类型',
+  options: [
+    { label: '类型A', value: 'a' },
+    { label: '类型B', value: 'b' }
+  ]
+}, {
+  type: 'dynamic-field',
+  text: '动态字段',
+  dynamicKey: 'type',
+  returnFields: async (config, model, request) => {
+    if (model.type === 'a') {
+      return [{ name: 'fieldA', label: '字段A', defaultValue: 'valueA' }];
+    } else if (model.type === 'b') {
+      return [{ name: 'fieldB', label: '字段B', defaultValue: 'valueB' }];
+    }
+    return [];
+  }
+}]">
+  <template #source>
+    <p>
+      当“类型”发生变化时，“动态字段”会根据 `returnFields` 返回的配置生成不同的输入框。
+    </p>
+  </template>
+</demo-block>
+
+:::warning
+特别注意：`dynamic-field` 的上一级配置必须设置 `extensible: true`，才能保存未在 schema 中声明的动态字段。
+:::
+
+## Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| type | 组件类型 | string | dynamic-field | — |
+| text     | 表单标签   | string |       —        |      —   |
+| dynamicKey | 监听的字段名。当该字段值变化时，触发 `returnFields` 重新计算 | string | — | — |
+| returnFields | 返回字段列表的函数 | (config, model, request) => Promise<Field[]> | — | — |
+
+### Field 对象结构
+| 参数      | 说明          | 类型      | 默认值  |
+|---------- |-------------- |---------- |-------- |
+| name | 字段名 | string | — |
+| label | 标签名 | string | — |
+| defaultValue | 默认值 | any | — |

docs/form-config/fields/number-range.md

@@ -0,0 +1,26 @@
+# NumberRange 数字范围输入框
+
+用于输入数字范围
+
+## 基础用法
+
+<demo-block type="form" :config="[{
+  type: 'number-range',
+  name: 'numberRange',
+  text: '数字范围'
+}]">
+  <template #source>
+    <p>
+      type为'number-range'
+    </p>
+  </template>
+</demo-block>
+
+## Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| name | 绑定值（数组形式 [min, max]） | string | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| clearable | 是否可清空 | boolean | — | true |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |

docs/form-config/fields/number.md

@@ -53,10 +53,11 @@
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |----------|-------------- |----------|--------------------------------  |-------- |
 | name | 绑定值 | string | — | — |
-| placeholder  | 输入框占位文本   | string |       —        |      —   |
 | text     | 表单标签   | string |       —        |      —   |
+| placeholder  | 输入框占位文本   | string |       —        |      —   |
 | disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
 | min      | 设置计数器允许的最小值 | number | — | -Infinity |
 | max      | 设置计数器允许的最大值 | number | — | Infinity |
 | step     | 计数器步长           | number   | — | 1 |
+| tooltip  | 输入框提示信息 | string | — | — |
 | onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |

docs/form-config/fields/radio.md

@@ -5,8 +5,8 @@
 ## TS 定义
 
 ```typescript
-interface RedioGroup extends FormItem {
+interface RadioGroup extends FormItem {
-  type: 'redioGroup';
+  type: 'radio-group';
   options: {
     value: any;
     text: string;

docs/form-config/fields/select.md

@@ -162,6 +162,15 @@
   </template>
 </demo-block>
 
+同时在 `src/main.ts` 中需要自定义实现请求
+```typescript 
+app.use(MagicForm, {
+      request: async (options: any) =>  {
+           // 自定义请求实现
+      },
+});
+```
+
 :::tip
 如果 Select 的绑定值为对象类型，请务必指定 valueKey 作为它的唯一性标识。
 :::

docs/form-config/fields/text.md

@@ -110,15 +110,16 @@
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | name | 绑定值 | string | — | — |
-| placeholder  | 输入框占位文本   | string |       —        |      —   |
 | text     | 表单标签   | string |       —        |      —   |
+| placeholder  | 输入框占位文本   | string |       —        |      —   |
 | disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
-| tooltip  | 输入时显示内容    | boolean   | — | false   |
+| clearable  | 是否可清空    | boolean   | — | true   |
-| placeholder   | 输入框占位文本   | string          | — | — |
+| tooltip  | 输入时显示内容    | string   | — | —   |
 | trim  | 是否去掉首尾空格  | boolean   | — | false  |
 | filter  | 过滤值  | string / Function   | number | -  |
-| onChange  | 值变化时触发的函数  | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |
+| prepend  | 前置内容  | string   | — | -   |
 | append  | 后置内容  | string / Object   | — | -   |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |
 
 ## append Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |

docs/form-config/fields/timerange-picker.md

@@ -0,0 +1,45 @@
+# TimeRangePicker 时间范围选择器
+
+用于选择或输入时间范围
+
+## 基础用法
+
+<demo-block type="form" :config="[{
+  type: 'timerange',
+  name: 'timerange',
+  text: '时间范围'
+}]">
+  <template #source>
+    <p>
+      type为'timerange'
+    </p>
+  </template>
+</demo-block>
+
+## 绑定多个字段
+
+可以通过配置 `names` 来将时间范围绑定到两个不同的字段上。
+
+<demo-block type="form" :config="[{
+  type: 'timerange',
+  names: ['startTime', 'endTime'],
+  text: '时间范围'
+}]">
+  <template #source>
+    <p>
+      配置 names 属性，将开始时间和结束时间分别绑定到 startTime 和 endTime 字段。
+    </p>
+  </template>
+</demo-block>
+
+## Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| name | 绑定值（数组形式） | string | — | — |
+| names | 绑定值（拆分为两个字段） | string[] | — | — |
+| text     | 表单标签   | string |       —        |      —   |
+| disabled  | 是否禁用    | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | false   |
+| format | 显示格式 | string | — | HH:mm:ss |
+| valueFormat | 绑定值的格式 | string | — | HH:mm:ss |
+| defaultTime | 默认时间 | Date[] | — | — |
+| onChange  | 值变化时触发的函数  | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)   | — | -   |

docs/form-config/layout.md

@@ -178,3 +178,38 @@
     label: '配置1',
   }]
 }]"></demo-block>
+
+### step
+
+<demo-block type="form" :config="[{
+  type: 'step',
+  items: [{
+    title: '步骤1',
+    items: [{
+      name: 'text',
+      text: '配置1',
+    }]
+  }, {
+    title: '步骤2',
+    items: [{
+      name: 'text2',
+      text: '配置2',
+    }]
+  }]
+}]"></demo-block>
+
+### flex-layout
+
+<demo-block type="form" :config="[{
+  type: 'flex-layout',
+  gap: '20px',
+  items: [{
+    name: 'text',
+    text: '配置1',
+    span: 12
+  }, {
+    name: 'text2',
+    text: '配置2',
+    span: 12
+  }]
+}]"></demo-block>

docs/guide/advanced/code-block.md

@@ -3,10 +3,10 @@
 
 ## 能力展示
 代码块支持的能力有
-1、在线编辑
+- 1、在线编辑
-2、参数定义，包括：参数类型定义
+- 2、参数定义，包括：参数类型定义
-3、自动保存草稿
+- 3、自动保存草稿
-4、参数注释
+- 4、参数注释
 下面将主要介绍代码块的实现原理，包含dsl结构定义，以及代码块挂载执行时机等
 ## 协议描述
 我们将在线编写的代码内容保存在[DSL](../advanced/js-schema.md)中，与app同一层级，这样的好处是代码块可以在同一活动，不同页面中实现灵活编排。
@@ -38,7 +38,7 @@
 
 在页面中创建代码块也就是会将新的代码内容添加到DSL中的codeBlocks数组并保存下来，这里涉及的逻辑可以参见CodeBlock类中的[setCodeDslById](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/services/codeBlock.ts#L107)方法。
 并且可以在编辑器左侧的“代码块”tab下看到当前活动的代码块列表
-<img src="https://vip.image.video.qpic.cn/vupload/20230228/4d17861677585336888.png" alt="代码块列表">
+<img src="/code-block.png" alt="代码块列表">
 
 ## 组件绑定
 代码块的初衷是为了实现对组件逻辑的在线干预（代码执行的时机平台提供了组件created, mounted两个钩子），因此我们需要将创建的代码与组件进行关联。
@@ -78,7 +78,7 @@
 
 ## 代码块界面展示
 侧边栏的代码块列表可以查看当前创建的代码块，以及每个代码块绑定的组件，点击代码块下方展示的组件icon可以在画布中选中该组件
-<img src="https://vip.image.video.qpic.cn/vupload/20230228/92dcfe1677636899649.png" alt="代码块列表">
+<img src="/code-block-list.png" alt="代码块列表">
 
 代码块编辑面板，可以在这里编写代码内容，申明参数
 <img src="https://vip.image.video.qpic.cn/vupload/20230228/1fd2e11677637006239.png" alt="代码块编辑面板">

docs/guide/advanced/coupling.md

@@ -56,7 +56,7 @@ export default {
 };
 
 ```
-其中，events 的 value 是个事件名，是 `string` 类型，未了避免和其他组件事件名重复，应该添加上一些前缀。
+其中，events 的 value 是个事件名，是 `string` 类型，为了避免和其他组件事件名重复，应该添加上一些前缀。
 
 而 methods 中的 value 则是一个挂载在组件上的可执行函数。我们会在事件触发时，分发到对应组件上，并执行对应组件实例上的方法。
 
@@ -83,30 +83,29 @@ export default {
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, inject } from 'vue';
+import { type ComponentProps, registerNodeHooks, useApp } from '@tmagic/vue-runtime-help';
 
-const props = defineProps({
+const props = defineProps<ComponentProps>()
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-})
 
-const app: Core | undefined = inject('app');
+const { app, node } = useApp(props);
-
-const node = app?.page?.getNode(props.config.id);
 
 const onClick = () => {
   // app.emit 第一个参数为事件名，其余参数为你要传给接受事件组件的参数
-  app?.emit("yourComponent:finishSomething", node, /*可以传参给接收方*/);
+  app.emit("yourComponent:finishSomething", node, /*可以传参给接收方*/);
 };
 
+// 此处实现事件动作
+const toast = () => {
+  toast('测试 vue3')
+};
+
+// 实际触发时是调用node上的方法，所以需要将改方法暴露到node上
+registerNodeHooks(node, {
+  toast,
+});
+
 defineExpose({
-  // 此处实现事件动作
+  toast,
-  // 实际触发时是调用vue实例上的方法，所以需要将改方法暴露到实例上
-  toast: (/*触发组件node*/, /*接收触发事件组件传进来的参数*/) => {
-    toast('测试 vue3')
-  }
 });
 </script>
 ```
@@ -151,10 +150,3 @@ function Test({ config }) {
 
 export default Test;
 ```
-
-按照上述实现触发事件和事件动作，就可以完成组件的联动事件分发响应。
-
-:::tip
-组件事件的联动是借助了@tmagic/core，需要在组件实例化的时候将需要暴露的方法提供给@tmagic/core，在上述例子中useApp方法的调用就是完成这个操作，useApp返回的app对象就是@tmagic/core的实例。在vue的实现中useApp是将整个vue实例都提供给了app，所以需要defineExpose来定义vue instance上的方法，react则是将需要暴露的方法作为useApp的参数传入
-:::
-

docs/guide/advanced/data-source.md

@@ -0,0 +1,105 @@
+# 数据源
+
+## 使用数据源
+
+### 添加数据源
+
+在编辑器左侧边栏中选中数据源，在数据源面板右上角添加中选择对应的数据源类型（默认提供了两种基础的数据源）
+
+[![alt 数据源列表](/data-source.png "数据源列表")](/data-source.png){target="_blank"}
+
+### 配置属性字段
+
+[![alt 新增数据源](/create-data-source.png "新增数据源")](/create-data-source.png){target="_blank"}
+
+#### 基础数据源
+
+静态数据，不会自动更新，可以通过配置方法，在方法中更新数据源
+
+```js
+({ dataSource, app }) => {
+  dataSource.setData({
+    // 数据
+  });
+}
+```
+
+然后再组件的事件联动中关联此方法，来触发数据源更新
+
+#### HTTP数据源
+
+通过配置HTTP相关参数(url, query, body, header等)通过网络api获取数据，该数据源拥有request方法，可通过此方法来刷新数据源
+
+```js
+({ dataSource, app }) => {
+  dataSource.request();
+}
+```
+
+
+### 在组件中使用
+
+
+#### 数据源模板输入框（data-source-input）
+
+formConfig.js
+```js
+[
+  {
+    type: 'data-source-input'
+  }
+]
+```
+
+[![alt 数据源模版](/data-source-input.png "数据源模版")](/data-source-input.png){target="_blank"}
+
+#### 数据源字段选择器输入框（data-source-field-select)
+
+formConfig.js
+```js
+[
+  {
+    type: 'data-source-filed-select'
+  }
+]
+```
+
+#### 数据源选择器（data-source-select)
+
+
+formConfig.js
+```js
+[
+  {
+    type: 'data-source-select'
+  }
+]
+```
+#### 数据源方法选择器（data-source-method-select)
+
+formConfig.js
+```js
+[
+  {
+    type: 'data-source-method-select'
+  }
+]
+```
+
+#### 显示条件
+
+当配置的条件成立时显示，反之隐藏
+
+[![alt 显示条件](/display-cond.png "显示条件")](/display-cond.png){target="_blank"}
+
+## 数据源开发
+
+### 数据源规范
+
+数据源的基础形式，需要有四个文件
+- index 入口文件，引入下面几个文件
+- formConfig 表单配置描述
+- initValue 表单初始值
+- event 定义联动事件，具体可以参考[组件联动](./coupling.html#组件联动)
+- dataSource 数据源逻辑代码
+

docs/guide/advanced/page.md

@@ -60,6 +60,5 @@ export default defineComponent({
 
 ## 渲染器示例
 在tmagic-editor的示例项目中，我们提供了三个版本的 @tmagic/ui。可以参考对应前端框架的渲染器实现。
-- [vue3 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui/src/container/src/Container.vue)
+- [vue 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/vue-components/container/src/Container.vue)
-- [vue2 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-vue2/src/container/Container.vue)
+- [react 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/react-components/container/src/Container.tsx)
-- [react 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-react/src/container/Container.tsx)

docs/guide/advanced/tmagic-ui.md

@@ -5,15 +5,13 @@ tmagic-editor的设计是希望发布的页面支持多个前端框架，即各
 
 所以tmagic-editor的设计中，针对每个前端框架，都需要有一个对应的 @tmagic/ui 来承担渲染器职责。同时，也需要一个使用和 @tmagic/ui 相同前端框架的 runtime 来 @tmagic/ui 和业务组件的，具体 runtime 概念，可以参考[页面发布](../publish)。
 
-@tmagic/ui 在tmagic-editor设计中，承担的是业务逻辑无关的，基础组件渲染的功能。一切和业务相关的逻辑，都应该在 [runtime](../runtime.html) 中实现。这样 @tmagic/ui 就能保持其通用性。
+我们以项目代码中提供的 vue 版本的 [vue-components](https://tencent.github.io/tmagic-editor/vue-components) 作为示例介绍其中包含的内容。
-
-我们以项目代码中提供的 vue3 版本的 @tmagic/ui 作为示例介绍其中包含的内容。
 
 ## 渲染器
-在 vue3 中，实现渲染器的具体形式参考[页面渲染](../advanced/page)中描述的[容器渲染](../advanced/page.html#容器渲染)和[组件渲染](../advanced/page.html#容器渲染)。
+在 vue 中，实现渲染器的具体形式参考[页面渲染](../advanced/page)中描述的[容器渲染](../advanced/page.html#容器渲染)和[组件渲染](../advanced/page.html#容器渲染)。
 
 ## 基础组件
-在 @tmagic/ui vue3 中，我们提供了几个基础组件，可以在项目源码中找到对应内容。
+在 [vue-components](https://tencent.github.io/tmagic-editor/vue-components) 中，我们提供了几个基础组件，可以在项目源码中找到对应内容。
 
 - page tmagic-editor的页面基础
 - container tmagic-editor的容器渲染器
@@ -23,8 +21,3 @@ tmagic-editor的设计是希望发布的页面支持多个前端框架，即各
 其中 page/container/Component 是 UI 的基础，是每个框架的 UI 都应该实现的。
 
 button/text 其实就是一个组件开发的示例，具体组件开发相关规范可以参考[组件开发](../component)。
-
-## @tmagic/ui 示例
-- [vue3 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui)
-- [vue2 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-vue2)
-- [react 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-react)

docs/guide/component.md

@@ -1,28 +1,48 @@
 # 如何开发一个组件
 tmagic-editor支持业务方进行自定义组件开发。在tmagic-editor中，组件是以 npm 包形式存在的，组件和插件只要按照规范开发，就可以在tmagic-editor的 runtime 中被加入并正确渲染组件。
 
-## 组件开发
-以 vue3 的组件开发为例。运行项目中的 playground 示例，会自动加载 vue3 的 runtime。runtime会加载[@tmagic/ui](https://github.com/Tencent/tmagic-editor/tree/master/packages/ui)
-
-## 组件注册
-在 [playground](https://tencent.github.io/tmagic-editor/playground/index.html#/) 中，我们可以尝试点击添加一个组件，在模拟器区域里，就会出现这个组件。其中就涉及到组件注册。
-
-这一步需要开发者基于tmagic-editor搭建了平台后，实现组件列表的注册、获取机制，tmagic-editor组件注册其实就是保存好组件 `type` 的映射关系。`type` 可以参考[组件介绍](../guide/conception.html#组件)。
-
-可以参考 vue3 版本的 @tmagic/ui 中，[组件渲染](../guide/advanced/page.html#组件渲染)逻辑里，type 会作为组件名进入渲染。所以在 vue3 的组件开发中，我们也需要在为 vue 组件声明 name 字段时，和 type 值对应起来，才能正确渲染组件。
-
 ### 组件规范
 组件的基础形式，需要有四个文件
 - index 入口文件，引入下面几个文件
-- formConfig 表单配置描述
+- form-config 表单配置描述
-- initValue 表单初始值
+- init-value 表单初始值
 - event 定义联动事件，具体可以参考[组件联动](../guide/advanced/coupling.html#组件联动)
 - component.{vue,jsx} 组件样式、逻辑代码
 
-@tmagic/ui 中的 button/text 就是基础的组件示例。我们要求声明 index 入口，因为我们希望在后续的配套打包工具实现上，可以有一个统一规范入口。
-
 ### 1. 创建组件
-在项目中，如 runtime vue3 目录中，创建一个名为 test-component 的组件目录，其中包含上面四个规范文件。
+
+可以使用`npm create tmagic` 选择 `components:组件库(组件/插件/数据源)` 来快速创建一个组件库。
+
+然后继续使用`npm create tmagic` 选择 `component:组件` 来快速创建一个组件。
+
+:::tip
+
+组件库并不是必须，组件如何管理可以根据具体情况来选择。直接放到 runtime 目录中也是一个不错的选择，如果选择放到runtime中可以在runtime中的package.json添加
+```json
+{
+  "createTmagic": {
+    "componentsPath": "./components",
+    "pluginsPath": "./plugins",
+    "dataSourcesPath": "./dataSources"
+  }
+}
+```
+来指定组件库的路径。这样在使用`npm create tmagic` 来创建组件时，会自动将组件添加到组件库中。
+:::
+
+:::tip
+如需为组件添加npm scope name，可以在runtime中的package.json中添加
+```json
+{
+  "createTmagic": {
+     "npmScopeName": "@tmagic"
+  }
+}
+```
+:::
+
+
+手动创建组件，可以在项目中，如 runtime  目录中，创建一个名为 test-component 的组件目录，其中包含上面四个规范文件。
 ```javascript
 // index.js
 // vue
@@ -30,14 +50,18 @@ import Test from './Test.vue';
 // react 
 import Test from './Test.tsx';
 
-export { default as config } from './formConfig';
+export { default as config } from './form-config';
-export { default as value } from './initValue';
+export { default as value } from './init-value';
 
 export default Test;
 ```
 
+:::tip
+如果在runtime中使用了@tmagic/cli，则必须保持此规范；不使用则可以自由书写。 
+:::
+
 ```javascript
-// formConfig.js
+// form-config.js
 export default [
   {
     type: 'select',
@@ -61,15 +85,40 @@ export default [
 ];
 ```
 
+:::tip
+配置内容必须是一个数组，每个元素是一个对象，包含 type、text、name 等属性，每个对象代表一个表单项。
+
+type 是表单项的类型
+
+text 是表单项的文本
+
+name 是表单项值的key。
+
+上述实例对应生成的值为
+```json
+{
+  "color": "red",
+  "text": "一段文字",
+}
+```
+
+type 在@tmagic/form 和 @tmagic/editor 中默认提供了一些，@tmagic/form提供的可以前往[表单配置](/form-config/fields/text.html)查看。
+:::
+
+
 ```javascript
-// initValue.js
+// init-value.js
 export default {
   color: 'red',
   text: '一段文字',
 };
 ```
 
-vue3 版本的组件代码示例
+:::tip
+在编辑器中添加组件时使用，作为初始值。
+:::
+
+Vue版本的组件代码示例
 ```vue
 <!-- Test.vue -->
 <template>
@@ -79,22 +128,24 @@ vue3 版本的组件代码示例
   </div>
 </template>
 
-<script>
+<script setup>
-export default {
+defineOptions({
   name: 'magic-ui-test',
+});
 
-  props: {
+defineProps({
-    config: {
+  config: {
-      type: Object,
+    type: Object,
-      default: () => ({}),
+    default: () => ({}),
-    },
   },
-
+}):
-  setup() {},
-};
 </script>
 ```
 
+:::tip
+编辑器中配置的 config 对象，会作为 props 传入组件中。
+:::
+
 react 版本组件代码示例
 ```javascript
 // Test.tsx
@@ -118,83 +169,52 @@ export default Test;
 
 ```
 
-### 2. 使用tmagic-cli
+## 插件开发
-在 runtime vue3 中，我们已经提供好一份示例。在 tmagic.config.ts 文件中。只需要在 packages 加入你创建的组件的路径（如果是个 npm 包，则将路径替换为包名即可），打包工具就会自动识别到你的组件。
+插件开发和组件开发形式类似，但是插件开发不需要有组件的规范。
+
+我们只需要在插件中提供一个入口文件。插件需要提供一个 install 方法。
 
-### 3. 启动 playground
-在上面的步骤完成后，在 playground/src/configs/componentGroupList 中。找到组件栏的基础组件列表，在其中加入你的开发组件
 ```javascript
-{
+// 在Vue的runtime中
-  title: '基础组件',
+export default {
-  items: [
+  install(vueApp, { app: tmagicApp }) {}
+}
+```
+
+```javascript
+// 在React的runtime中
+export default {
+  install({ app: tmagicApp }) {}
+}
+```
+
+在插件中开发者可以自由实现需要的业务逻辑。
+
+## 集成到runtime中
+
+### 使用@tmagic/cli
+
+在使用`npm create tmagic` 创建的runtime中，自动集成了@tmagic/cli，将组件集成到此runtime中只需要在`tmagic.config.ts`中的packages字段中添加
+```javascript
+import { defineConfig } from '@tmagic/cli';
+
+export default defineConfig({
+  // other config
+  packages: [
     {
-      text: '文本',
+      '组件type': '组件目录或者npm包名',
-      type: 'text',
-    },
-    {
-      text: '按钮',
-      type: 'button',
-    },
-    // 加入这个测试组件
-    {
-      text: '测试',
-      type: 'test',
     },
   ],
-}
+});
-```
-
-然后，在 magic 项目根目录中，运行
 
-```
-npm run playground
 ```
 
-至此，我们打开 playground 后，就能添加开发的中的组件，并且得到这个开发中的组件**在编辑器中的表现**了。
+:::tip
+组件type需要与[componentGroupList](../api/editor/props.html#componentgrouplist)中的type对应。
+:::
 
-<img src="https://image.video.qpic.cn/oa_fd3c9c-3_548108267_1636719045199471">
 
-### 4. 启动 runtime
+配置到packages字段中后，执行`npm run tmagic`来创建组件库的入口文件。
-在完成开发中组件在编辑器中的实现后，我们将编辑器中的 DSL 源码📄 打开，复制 DSL。并在 runtime/vue3/src/page 下。创建一个 page-config.js 文件。将 DSL 作为配置导出。
 
-```javascript
+然后使用`npm run build:libs`命令来构建用于编辑器中的组件配置、组件初始值、组件事件联动的资源文件。
-window.magicDSL = [
-  // DSL
-]
-```
 
-在 page/main.ts 中，将这份配置读入
-```javascript
-import './page-config.js';
-```
-
-然后执行在 runtime/vue3 目录下执行
-```
-npm run start
-```
-
-至此，我们就可以得到这个开发中组件在编辑器中进行了配置并保存后，在真实页面中应该有的样子。
-
-<img src="https://image.video.qpic.cn/oa_fd3c9c-3_1731965034_1636719708671597?imageView2/q/70" width="50%">
-
-## 插件开发
-插件开发和组件开发形式类似，但是插件开发不需要有组件的规范。在以 vue 为基础的 ui 和 runtime 中，插件其实就是一个 vue 插件。
-
-我们只需要在插件中提供一个入口文件，其中包含 vue 的 install 方法即可。
-
-```javascript
-export default {
-  install() {}
-}
-```
-
-在插件中开发者可以自由实现需要的业务逻辑。插件和组件一样，只需要在 units.js 中，加入导出的 units 对象里即可。
-
-## 业务定制
-上述的步骤，如
-1. 组件/插件初始化
-2. 编辑器中的组件调试
-3. 真实页面的组件调试
-4. 编辑器中的 DSL 同步至本地调试页面
-
-等许多步骤，都可以交由业务方进行定制，开发业务自定义的脚手架工具，或者如示例中一样，使用打包脚本来处理。

docs/guide/conception.md

@@ -1,6 +1,8 @@
 # 基础概念
 我们通过讲述tmagic-editor的一些基础概念。帮助开发者可以了解tmagic-editor是如何运行以及如何在基础项目之上开发、使用它。
 
+[![alt 原理](/flow.png "原理")](/flow.png){target="_blank"}
+
 ## 编辑器
 编辑器基础布局上分为：左面板、工作区、右面板、工具栏，如下图。
 - **左面板**，包含了组件库的展示，以及工作区中已添加组件的组件树展示。
@@ -58,11 +60,6 @@ DSL 是编辑器搭建页面的最终产物（描述文件），其中包含了
 ### runtime
 我们把页面统一称为 runtime，更具体的 runtime 概念可以查看[页面发布](./publish.html#runtime)。**runtime 是承载tmagic-editor项目页面的运行环境**。编辑器的工作区是 runtime 的一个具体实例，另一个就是我们发布上线后，用户访问的真实项目页面。
 
-### @tmagic/ui
-@tmagic/ui 包含了tmagic-editor的基础组件库，提供了容器、文本、按钮这样的基础组件。我们提供了不同语言框架的 @tmagic/ui，如 vue2 和 vue3。
-
-@tmagic/ui 和 runtime 是配套出现的，runtime 必须基于 @tmagic/ui 才可以实现渲染。因为 @tmagic/ui 需要提供 runtime 所需要的渲染器。
-
 ## 联动
 页面搭建过程中，会涉及到两种联动形式
 - 在编辑器中，组件的表单配置项之间需要联动。
@@ -73,4 +70,4 @@ DSL 是编辑器搭建页面的最终产物（描述文件），其中包含了
 
 ### 组件联动
 组件 A 在完成点击事件后，希望组件 B 可以展示一个弹窗，就是组件联动的一个示例。tmagic-editor通过事件绑定方式，可以为组件 A 和 B 配置事件关联，实现上述的组件联动。
-<img src="https://image.video.qpic.cn/oa_88b7d-37_723692309_1636032154483681" alt="组件联动">
+<img src="https://vip.image.video.qpic.cn/vupload/20231027/3e02d31698914788006.png" alt="组件联动">

docs/guide/editor-expand.md

@@ -1,5 +1,220 @@
 # 编辑器扩展
 
+编辑器布局组成部分名称如下图，后续将直接使用图中名称指代其部分
+
+<img src="/layout.png" width="100%">
+
 ## UI扩展
 
+### 一、顶部菜单栏定制
+
+通常使用 `m-editor` 组件的 [menu](/api/editor/props.html#menu) `prop` 来对齐进行设置；
+
+顶部菜单栏分为`左` `中` `右`三个部分组成，所以 [menu](/api/editor/props.html#menu) `prop`的数据格式如下：
+
+```js
+{ left: [], center: [], right: [] }
+```
+
+数组的内容可以有三种种形式：`内部定义好的字符串`、`其他字符串`、`MenuButton 或者 MenuComponent 对象`
+
+#### 1. 内部定义好的字符串:
+```ts
+'/' | 'delete' | 'undo' | 'redo' | 'zoom' | 'zoom-in' | 'zoom-out' | 'guides' | 'rule' | 'scale-to-original' | 'scale-to-fit'
+```
+
+是组件内部定义的可直接使用的内置功能，具体含义可以查看 [menu](/api/editor/props.html#menu)
+
+#### 2. 其他字符串
+
+除去[内部定好的字符串](#内部定义好的字符串)的其他字符串，则会被当成普通文本直接显示
+
+
+#### 3. `MenuButton` 或者 `MenuComponent` 对象
+
+MenuButton 的[定义](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L168)
+
+用于自定义一个按钮，例如定义一个返回按钮可以由如下配置实现
+
+```js
+{
+  type: 'buuton',
+  text: '返回',
+  handler: () => window.history.back(),
+}
+```
+
+如果需要更复杂的功能则可以使用 `MenuComponent`, 可以用于实现渲染任意一个Vue组件
+
+ `MenuComponent` 的[定义](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L197C18-L197C32)
+
+:::tip
+如果对内置的顶部菜单栏实现不满意还可以使用自定义的实现完全替换掉
+
+```html
+<m-editor>
+  <template #nav>
+    <your-nav></your-nav>
+  </template>
+</m-editor>
+```
+:::
+
+### 二、左侧菜单栏
+
+左侧菜单栏主要展示组件列表、组件树、代码块、数据源等内容。可以通过 `m-editor` 组件的 [sidebar](/api/editor/props.html#sidebar) `prop` 来进行配置。
+
+#### 1. 自定义左侧面板
+
+可以使用 `sidebar` slot 来完全自定义左侧面板：
+
+```html
+<m-editor>
+  <template #sidebar>
+    <your-sidebar></your-sidebar>
+  </template>
+</m-editor>
+```
+
+#### 2. 扩展组件列表
+
+通过 [componentGroupList](/api/editor/props.html#componentgrouplist) prop 配置组件分组和列表：
+
+```js
+const componentGroupList = [
+  {
+    title: '基础组件',
+    items: [
+      {
+        text: '文本',
+        type: 'text',
+        icon: 'text-icon'
+      },
+      {
+        text: '按钮',
+        type: 'button',
+        icon: 'button-icon'
+      }
+    ]
+  },
+  {
+    title: '业务组件',
+    items: [
+      // 自定义业务组件
+    ]
+  }
+]
+```
+
+#### 3. 组件树扩展
+
+组件树会自动根据页面配置生成，可以通过 `editorService` 监听组件树相关事件：
+
+```js
+editorService.on('select', (node) => {
+  console.log('选中组件:', node);
+});
+```
+
+### 三、右侧属性配置栏
+
+默认的属性配置栏会分为属性、样式、事件、高级4个tab分页，其中只有属性是在组件中的`formConfig`文件中定义，其他三个分页都是自动生成的，所有组件都是一样的。
+
+默认的属性读取流程如下：
+
+组件中定义`formConfig` -> 通过`tamgic-cli`构建成 `runtime` 中 `/config/index.umd.cjs` -> `m-editor`中加载然后配置到[propsConfig](/api/editor/props.html#propsconfigs) prop中 -> `m-editor`保存到`propsService`中 -> 选中组件时`editorService`会去`propsService`调用`getPropsConfig`中读取
+
+`propsService.getPropsConfig`会调取`propsService.fillConfig`添加样式、事件、高级3个tab分页
+
+#### 1. 定制属性配置栏中顶部的属性、样式、事件、高级 tab分页
+
+可以通过干预`propsService.fillConfig`来实现自定义。例如：
+
+实现去掉样式、事件、高级3个tab分页，直接显示组件内定义好的配置
+```js
+propsService.usePlugin({
+  /**
+   * result为生成好的默认配置
+   * config为组件中定义好的配置
+   */
+  afterFillConfig(result, config) {
+    return config
+  }
+});
+```
+
+#### 2. 定制属性配置栏中配置的来源
+
+如果觉得上述属性读取流程不满足需要，可以通过干预`propsService.getPropsConfig`来实现自定义的流程
+
+```js
+propsService.usePlugin({
+  /**
+   * result为生成好的默认配置
+   * config为组件中定义好的配置
+   */
+  afterGetPropsConfig(result, type) {
+    // 返回配置DSL即可
+    return []
+  }
+});
+```
+#### 3. 自定义属性配置栏
+
+默认属性配置栏是是使用`@tmagic/form`来实现的，如果需要使用其他组件来实现可以使用`props-panel`slot来将其替换掉
+
+```html
+<m-editor>
+  <template #props-panel>
+    <your-props-panel></your-props-panel>
+  </template>
+</m-editor>
+```
+
 ## 行为扩展
+
+### 二、服务扩展
+
+可以通过监听事件和使用插件来扩展 EditorService：
+
+```js
+// 监听编辑器事件
+editorService.on('add', (node) => {
+  console.log('添加组件:', node);
+});
+
+// 使用插件扩展
+editorService.usePlugin({
+  beforeAdd(node) {
+    // 在添加组件前执行
+    return node;
+  },
+  afterAdd(node) {
+    // 在添加组件后执行
+    return node;
+  }
+});
+```
+
+#### 2. PropsService 扩展
+
+自定义属性配置的处理逻辑：
+
+```js
+propsService.usePlugin({
+  // 修改属性配置
+  beforeGetPropsConfig(type) {
+    console.log('获取配置前:', type);
+  },
+  
+  afterGetPropsConfig(config, type) {
+    // 添加自定义配置
+    return config;
+  },
+  
+  // 自定义配置填充逻辑
+  afterFillConfig(config, type) {
+    return config;
+  }
+});
+```

docs/guide/index.md

@@ -1,23 +1,49 @@
 # 快速开始
 
-tmagic-editor的编辑器我们已经封装成一个 npm 包，可以直接安装使用。编辑器是使用 vue3 开发的，但使用编辑器的业务可以不限框架，可以用 vue2、react 等开发业务组件。
+tmagic-editor的编辑器我们已经封装成一个 npm 包，可以直接安装使用。编辑器是使用 vue3 开发的(仅支持vue3)，但使用编辑器的业务(runtime)可以不限框架，可以用 vue2、react 等开发业务组件。
 
-## 安装
+::: code-group
 
-node.js > 14
+```bash [npm]
+$ npm create tmagic@latest
+```
+
+```bash [pnpm]
+$ pnpm create tmagic
+```
+:::
+
+按照提示操作可以创建`6`中项目：
+
+* runtime:运行时（DSL渲染）
+* admin-client:管理端（编辑器）
+* components:组件库(组件/插件/数据源)
+* component:组件
+* data-source:数据源
+* plugin:插件
+
+至少需要一个runtime与admin-client后，就可以运行起一个最简单的项目了。
+
+后续还需要新增组件、插件、数据源等，可以继续添加后面几种类型的项目。
+
+新增好一个组件/插件/数据源后可以到runtime/tmagic.config.ts中配置到packages中
+
+## 手动安装
+
+node.js >= 18
 
 可以通过[Vite](https://cn.vitejs.dev/) 或 [Vue CLI](https://cli.vuejs.org/zh/)快速创建项目。
 
 > 使用Vue CLI生成的项目需要在vue.config.js中加上配置：transpileDependencies: [/@tmagic/]
 
 ```bash
-$ npm install @tmagic/editor @tmagic/form -S
+$ npm install @tmagic/editor -S
 ```
 
 由于在实际应用中项目常常会用到例如[element-plus](https://element-plus.org/)、[tdesign-vue-next](https://tdesign.tencent.com/vue-next/overview)等UI组件库。为了能让使用者能够选择不同UI库，[@tmagic/editor](https://github.com/Tencent/tmagic-editor/tree/master/packages/editor)将其中使用到的UI组件封装到[@tmagic/design](https://github.com/Tencent/tmagic-editor/tree/master/packages/design)中，然后通过不同的adapter来指定使用具体的对应的UI库，我们提供了[@tmagic/element-plus-adapter](https://github.com/Tencent/tmagic-editor/tree/master/packages/element-plus-adapter)来支持[element-plus](https://element-plus.org/)，所以还需要安装相关的依赖。
 
 ```bash
-$ npm install @tmagic/element-plus-adapter @tmagic/design element-plus -S
+$ npm install @tmagic/element-plus-adapter element-plus -S
 ```
 
 editor 中还包含了[monaco-editor](https://microsoft.github.io/monaco-editor/)，所以还需安装monaco-editor，可以参考 monaco-editor 的[配置指引](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md)。
@@ -37,25 +63,21 @@ import { createApp } from 'vue';
 import ElementPlus from 'element-plus';
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
 
-import TMagicDesign from '@tmagic/design';
+import editorPlugin from '@tmagic/editor';
-import MagicEditor from '@tmagic/editor';
 import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';
-import MagicForm from '@tmagic/form';
 
 import App from './App.vue';
 
 import 'element-plus/dist/index.css';
 import '@tmagic/editor/dist/style.css';
-import '@tmagic/form/dist/style.css';
 
 const app = createApp(App);
 app.use(ElementPlus, {
   locale: zhCn,
 });
-app.use(TMagicDesign, MagicElementPlusAdapter);
+app.use(router);
-app.use(MagicEditor);
+app.use(editorPlugin, MagicElementPlusAdapter);
-app.use(MagicForm);
+app.mount('#app');
-app.mount("#app");
 ```
 
 以上代码便完成了 @tmagic/editor 的引入。需要注意的是，样式文件需要单独引入。
@@ -103,7 +125,7 @@ app.mount("#app");
           // 初始化页面数据
         }),
 
-        runtimeUrl: "/runtime/vue3/playground/index.html",
+        runtimeUrl: "/runtime/vue/playground/index.html",
 
         propsConfigs: [
           // 组件属性列表
@@ -173,9 +195,8 @@ npm install sass -D
 ## runtimeUrl
 
 该配置涉及到 [runtime 概念](runtime.md)，tmagic-editor编辑器中心的模拟器画布，是一个 iframe（这里的 `runtimeUrl` 配置的，就是你提供的 iframe 的 url），其中渲染了一个 runtime，用来响应编辑器中的组件增删改等操作。
-
+:::tip
-::: tip 如何快速得到一个 runtime
+可以使用`npm create tmagic` 来快速创建一个runtime项目。
-如果要快速启动，可以使用[tmagic-editor项目源码](https://github.com/Tencent/tmagic-editor)中的 runtime，在提供的三个框架 vue2/vue3/react runtime 目录中选择一个，执行 `npm run build:admin` 得到产物，并将产物放到你的项目中，此处的 runtimeUrl 指向你放置 runtime/playground/index.html 的路径。
 :::
 
 ## componentGroupList
@@ -190,10 +211,10 @@ npm install sass -D
 
 ```javascript
 setup() {
-  asyncLoadJs(`/runtime/vue3/assets/config.js`).then(() => {
+  asyncLoadJs(`/runtime/vue/assets/config.js`).then(() => {
     propsConfigs.value = window.magicPresetConfigs;
   });
-  asyncLoadJs(`/runtime/vue3/assets/value.js`).then(() => {
+  asyncLoadJs(`/runtime/vue/assets/value.js`).then(() => {
     propsValues.value = window.magicPresetValues;
   });
 }

docs/guide/introduction.md

@@ -2,7 +2,7 @@
 
 tmagic-editor可视化开源项目是从魔方平台演化而来的开源项目，意在提供一个供开发者快速搭建可视化搭建平台的解决方案。
 
-<img src="https://image.video.qpic.cn/oa_88b7d-32_509802977_1635842258505918" alt="魔方demo图">
+<img src="/tmagic.png" alt="魔方demo图">
 
 ## 特性
 
@@ -22,20 +22,20 @@ tmagic-editor可视化开源项目是从魔方平台演化而来的开源项目
 - **模拟器**，居中位置渲染了当前页面配置的组件内容，模拟真实页面的展示内容。
 - **组件库**，左侧展示当前业务下的相关组件内容，包含tmagic-editor提供的基础组件和业务自定义组件。
 - **组件树**，左侧展示当前页面添加的组件内容，以树状结构展示。
+- **[代码块](./advanced/code-block.md)**，左侧展示添加的函数，可供组件事件中联动所用，或者组件声明周期中调用。
+- **[数据源](./advanced/data-source.md)**，左侧展示添加的数据源，用于组件中的各项配置。
 - **表单配置**，右侧表单项目，展示由组件内提供的配置描述，提供修改组件行为的配置项。
 - **DSL 源码**，右上角的 📄 图标可以展示当前页面，各个组件配置，页面基础配置组合而成的配置源码。
 
-通过编辑器，可以创建、编辑、保存一个项目页面。同时，tmagic-editor开源项目提供了一个页面搭建管理平台的示例：magic-admin，可以用于快速构建一个完整的页面可视化搭建系统。
+通过编辑器，可以创建、编辑、保存一个项目页面。
 
 ## 核心库
 
 - **@tmagic/editor** 实现一个可视化编辑器。
 - **@tmagic/form** 实现组件在编辑器中自定义表单配置。
 - **@tmagic/core** 实现对组件进行跨框架管理与一些通用复杂逻辑的实现。
+- **@tmagic/data-source** 实现数据源的管理与编译。
 - **@tmagic/stage** 实现在编辑器中对组件的位置拖动与大小拖拉。
-- **@tmagic/ui** 提供一些vue3基础组件。
-- **@tmagic/ui-vue2** 提供一些vue2基础组件。
-- **@tmagic/ui-react** 提供一些react基础组件。
 - **runtime** 实现在编辑器中对使用不同框架的组件的渲染。
 
 可以查阅 tmagic 的[源代码](https://github.com/Tencent/tmagic-editor)，与文档描述内容可以逐一对应上，希望文档内容可以为开发者带来比较好的开发体验。
@@ -44,3 +44,5 @@ tmagic-editor可视化开源项目是从魔方平台演化而来的开源项目
 
 - 腾讯视频：视频会员，体育会员，WETV 国际版，TV，doki 商城，小企鹅，小说，漫画
 - 腾讯会议
+- 腾讯新闻
+- 58同城本地生活服务

docs/guide/migration.md

@@ -0,0 +1,89 @@
+# 升级到1.5.x
+
+## ui npm包的变化
+
+ui中包含的组件被移除，这些组件由单独的npm包提供。1.5.0以后ui包将变得不重要，只是为了兼容而保留，后续将变废弃。
+
+建议将runtime中的tmagic.config中的packages配置的ui包改成：
+
+```js
+{
+  packages: [
+    { button: '@tmagic/vue-button',
+    { container: '@tmagic/vue-container' },
+    { img: '@tmagic/vue-img' },
+    { 'iterator-container': '@tmagic/vue-iterator-container' },
+    { page: '@tmagic/vue-page' },
+    { 'page-fragment': '@tmagic/vue-page-fragment' },
+    { 'page-fragment-container': '@tmagic/vue-page-fragment-container' },
+    { text: '@tmagic/vue-text' },
+    { overlay: '@tmagic/vue-overlay' },
+    { qrcode: '@tmagic/vue-qrcode' },
+  ],
+}
+```
+:::tip
+react的也是类似上面的修改
+:::
+
+:::tip
+上述这些组件中只有container是最重要的，不可缺少的，其他都可以换成自己实现的版本。
+iterator-container/page/page-fragment/page-fragment-container这几个组件编辑中是有做特殊识别的，所以如果希望有完整的功能，也尽量保留
+:::
+
+## 对编辑画布中组件的识别
+
+1.5.0之前是通过识别dom中是否拥有id属性是判断该dom是不是组件的根节点，之后默认会变成识别是否拥有data-tmagic-id
+
+:::tip
+此变化是通过container组件来实现的，之前vue是`@tmagic/ui`或者`tmagic/ui-vue2`中的Component组件来实现，`tmagic/ui-react`则是各个组件自己实现，之后vue是由`@tmagic/vue-container`实现，react依然由各个组件自己实现。
+:::
+
+如果希望依然保留对id属性的识别，我们也提供方法
+
+```ts
+import { setDslDomRelateConfig } from '@tmagic/editor';
+
+setDslDomRelateConfig('getIdFromEl', (el?: HTMLElement | SVGElement | null) => el?.id);
+setDslDomRelateConfig(
+  'getElById',
+  (doc?: Document, id?: string | number) => doc?.querySelector(`[id="${id}"]`) as HTMLElement,
+);
+setDslDomRelateConfig('setIdToEl', (el: HTMLElement | SVGElement, id: string | number) => {
+  el.id = `${id}`;
+});
+```
+
+:::tip
+与此相关的`m-editor`组件的[canSelect](/api/editor/props.html#canselect)/[isContainer](/api/editor/props.html#iscontainer)这里配置
+:::
+
+## 组件对迭代器容器的支持
+
+迭代器容器是通过绑定一个数据源的数组字段，然后会去迭代这个数组来渲染容器中的内容，这个是同一个配置的组件将会被渲染多次，这个时候组件配置的事件或者代码块中将无法准确获取中组件，所以需要将迭代的信息提供出来。
+
+已vue组件为例，需要添加iteratorIndex和iteratorContainerId两个prop
+
+```ts
+{
+  props: {
+    // other props
+    iteratorIndex: Array as PropType<number[]>,
+    iteratorContainerId: Array as PropType<Id[]>,
+  }
+}
+```
+
+然后传个useApp
+
+```ts
+useApp({
+  // other args
+  iteratorContainerId: props.iteratorContainerId,
+  iteratorIndex: props.iteratorIndex,
+})
+```
+
+:::tip
+如果对迭代器容器没有需求的，可以不用
+:::

docs/guide/publish.md

@@ -13,7 +13,7 @@ runtime 的概念，是理解tmagic-editor项目页运行的重要概念，runti
 
 所以更深入描述，runtime 是tmagic-editor页面的渲染环境，提供不同场景下的能力封装。如果理解了tmagic-editor的设计，阅读了tmagic-editor的源码，可以发现，runtime 只是对tmagic-editor的渲染器做了一层包装，在不同 runtime 中，tmagic-editor的渲染逻辑和组件代码都是相同的。
 
-并且，由于tmagic-editor在编辑器中的模拟器是通过 iframe 渲染的，和tmagic-editor平台本身可以做到框架解耦，所以 runtime 也可以用不同框架开发。目前tmagic-editor提供了 vue2/vue3 和 react 的 runtime 示例。
+并且，由于tmagic-editor在编辑器中的模拟器是通过 iframe 渲染的，和tmagic-editor平台本身可以做到框架解耦，所以 runtime 也可以用不同框架开发。目前tmagic-editor提供了 vue 和 react 的 runtime 示例。
 
 各个 runtime 的作用除了作为不同场景下的渲染环境，同时也是不同环境的打包构建载体。tmagic-editor示例代码中的打包就是基于 runtime 进行的。
 
@@ -21,8 +21,7 @@ runtime 的概念，是理解tmagic-editor项目页运行的重要概念，runti
 由于 runtime 是页面渲染的承载环境，其中会加载 @tmagic/ui 以及各个业务组件，业务发布项目页也是基于 runtime，所以在 runtime 中实现业务方的自定义逻辑是最合适的。runtime 可以提供一些全局 API，供业务组件调用。我们可以把下面的模拟器中的 runtime 视为一个业务方runtime。
 
 tmagic-editor提供了三个版本的 runtime 示例，可以参考：
-- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3)
+- [vue runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue)
-- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2)
 - [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react)
 
 ### 真实页面渲染（Page）

docs/guide/runtime.md

@@ -1,72 +1,29 @@
 # RUNTIME
 本章详细介绍如何深入理解tmagic-editor的打包，以及如何根据需求定制，修改tmagic-editor的页面打包发布方案。页面发布、打包相关的定制化开发，需要使用tmagic-editor的业务方，搭建好基于开源tmagic-editor的管理平台、存储服务等配套设施。
 
+## runtime 是什么
+
+runtime是用来解析DSL的执行环境，用于渲染 DSL 呈现页面。
+
+编辑器生成出来的DSL需要通过 runtime 来渲染。
+
 ## 实现一个 runtime
-在 [@tmagic/ui](./advanced/tmagic-ui.html) 部分，我们已经说过，runtime 和 UI 是配套实现的。每个版本的 runtime 都需要一个对应的 UI 来作为渲染器，实现渲染 DSL 呈现页面的功能。
 
-### UI
+:::tip
-一个 UI 应该至少包含一个渲染器，来实现[页面渲染](./advanced/page.html)。同时可以提供一些基础组件。具体实现可以参考[@tmagic/ui](./advanced/tmagic-ui.html)。
+可以使用`npm create tmagic` 来快速创建一个runtime项目。
+:::
 
-### page
+创建出来的项目会包含page、playground两个目录。
-runtime 的 `page` 部分，就是真实项目页面的渲染环境。发布出去的项目页都需要基于该部分来实现渲染功能。而 `page` 的主要逻辑，就是需要加载 UI，同时实现业务方需要的业务逻辑，比如：
+```bash
-- 提供页面需要的全局 api
+.
-- 业务需要的特殊实现逻辑
+├── page
-- 加载第三方全局组件/插件等
+├── playground
-
-具体的 page 实现示例，可以参考
-- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3/page)
-- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2/page)
-- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react/page)
-
-### playground
-runtime 的 `playground` 部分，和 `page` 做的事情几乎一致，业务方可以包含上述 `page` 所拥有的全部能力。但是，因为 playground 需要被编辑器加载，作为编辑器中页面模拟器的渲染容器，和编辑器通信，接受编辑器中组件的增删改查。所以，除了保持和 `page` 一样的渲染逻辑之外，`playground` 还要额外实现一套既定通信内容和 api，才能实现和编辑器的通信功能。
-
-#### onRuntimeReady
-**在 playground 页面渲染后**，需要调用接口通知编辑器完成加载。该调用需要传入一个参数 API，即挂载了增删改查功能的对象示例，提供给编辑器。
-```javascript
-window.magic?.onRuntimeReady(API)
 ```
 
-#### onPageElUpdate
+page用于生产环境
-**playground 在每次更新了页面配置后**，调用一次 onPageElUpdate 并传入一个 DOM 节点，该方法作用是传入一个页面渲染组件的根节点，用来告知编辑器的模拟器遮罩如何作出反应。
-```javascript
-window.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
-```
 
-#### 提供 API
+playground用于编辑器中
-| API      | 说明    | 参数      | 
-|---------- |-------- |---------- |
-|updateRootConfig| 根节点更新 | `root: MApp`  |
-|updatePageId| 更新当前页面 id | `id: string` |
-|select| 选中组件 | `id: string`|
-|add| 增加组件 | { `config` , `root` }: `UpdateData` |
-|update| 更新组件 | { `config` , `root` }: `UpdateData`  |
-|remove| 删除组件 | { `config` , `root` }: `UpdateData`  |
-|sortNode| 组件在容器间排序 |{ `src` , `dist`, `root` }: `SortEventData`  |
 
-runtime 的实现示例，可以参考tmagic-editor提供的：
+:::tip
-- [vue3 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue3)
+想要了解DSL的解析以及runtime与编辑器的通信，可以前往[教程](/guide/tutorial/index.md)
-- [vue2 runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue2)
+:::
-- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react)
-
-### 页面发布
-如介绍中提到的，tmagic-editor页面发布方案，是对构建产物 `page/index.html` 进行项目信息注入。项目信息就是搭建平台存储的页面配置。发布时，将注入项目信息的 `page/index.html` 发布出去即可。
-
-## 版本管理
-基于上一步提到的打包原理，每次构建后，得到的产物都可以进行归档编号，存为版本。涉及到的组件改动和新增修改，体现在各个版本中。
-
-<img src="https://image.video.qpic.cn/oa_88b7d-32_1233288257_1633783105283986" width="40%" alt="版本选择">
-
-版本管理具体如何实现，这取决于使用tmagic-editor的业务方。版本管理具有如下优点：
-1. 对于已经配置好发布的项目，使用固定版本，不会被新版本的特性影响，保证项目线上稳定运行
-2. 发布的新版本如果出现问题，可以及时回退选择使用旧版本
-
-## 结合业务定制
-tmagic-editor的静态资源构建，项目配置保存，页面发布，在tmagic-editor的提供的示例方案中，流程是：
-1. 触发构建，执行流水线，基于 runtime 执行 build 
-2. 将构建产物归档推送至 cdn，存为一个ui版本
-3. 项目配保存后，项目发布时，将项目配置发布至 CDN 存储为 DSL.js，同时根据当前项目使用的ui版本，获取到 page/index.html，将 DSL.js 引用方式以 script 标签形式写入。
-4. 将注入信息的 page/index.html 发布为项目静态资源 act.html
-5. 线上可加载 act.html 访问项目
-
-其中各个步骤的定制，可以交由业务方根据tmagic-editor提供的示例进行自定义修改。

docs/guide/tutorial/hello-world.md

@@ -51,7 +51,7 @@ cd hello-world
 ## 添加依赖
 
 ```bash
-npm install --save @tmagic/editor @tmagic/form @tmagic/stage @tmagic/design @tmagic/element-plus-adapter element-plus
+npm install --save @tmagic/editor @tmagic/element-plus-adapter element-plus
 ```
 
 ## 注册组件
@@ -61,25 +61,19 @@ npm install --save @tmagic/editor @tmagic/form @tmagic/stage @tmagic/design @tma
 ```ts
 import 'element-plus/dist/index.css';
 import '@tmagic/editor/dist/style.css';
-import '@tmagic/form/dist/style.css';
 
 import { createApp } from 'vue';
 import ElementPlus from 'element-plus';
 
-import TMagicDesign from '@tmagic/design';
 import TMagicEditor from '@tmagic/editor';
 import TMagicElementPlusAdapter from '@tmagic/element-plus-adapter';
-import TMagicForm from '@tmagic/form';
 
 import App from './App.vue';
 
 createApp(App)
   .use(ElementPlus)
-  .use(TMagicDesign, TMagicElementPlusAdapter)
+  .use(TMagicEditor, TMagicElementPlusAdapter)
-  .use(TMagicEditor)
-  .use(TMagicForm)
   .mount('#app');
-
 ```
 
 ## 渲染编辑器
@@ -185,7 +179,7 @@ const render = () => {
 
   createApp(
     {
-      template: '<p v-for="node in config.items" :key="node.id" :id="node.id">hello world</p>',
+      template: '<p v-for="node in config.items" :key="node.id" :data-tmagic-id="node.id">hello world</p>',
       props: ['config'],
     },
     {
@@ -249,7 +243,7 @@ const render = async ({ renderer }: StageCore) => {
 
   createApp(
     {
-      template: '<div v-for="node in config.items" :key="node.id" :id="node.id">hello world</div>',
+      template: '<div v-for="node in config.items" :key="node.id" :data-tmagic-id="node.id">hello world</div>',
       props: ['config'],
     },
     {

docs/guide/tutorial/render.md

@@ -1,14 +1,12 @@
 # 3.[DSL](../conception.md#dsl) 解析渲染
 
-tmagic 提供了 vue3/vue2/react 三个版本的解析渲染组件，可以直接使用
+tmagic 提供了 vue/react 两个个版本的解析渲染组件，可以直接使用
 
 [@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
 
-[@tmagic/ui-vue2](https://www.npmjs.com/package/@tmagic/ui-vue2)
-
 [@tmagic/ui-react](https://www.npmjs.com/package/@tmagic/ui-react)
 
-接下来是以vue3为基础，来讲述如何实现一个[@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
+接下来是以vue为基础，来讲述如何实现一个[@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
 
 ## 准备工作
 
@@ -71,7 +69,7 @@ app.component('hello-world', HelloWorld);
 
 ```vue
 <template>
-  <component v-if="config" :is="type" :id="`${id}`" :style="style" :config="config"></component>
+  <component v-if="config" :is="type" :tmagic-data-id="`${id}`" :style="style" :config="config"></component>
 </template>
 
 <script lang=ts setup>

docs/guide/tutorial/runtime.md

@@ -22,7 +22,7 @@ cd editor-runtime
 按钮需要用的ts types依赖
 
 ```bash
-npm install --save @tmagic/schema @tmagic/stage
+npm install --save @tmagic/core @tmagic/stage
 ```
 
 ## 实现runtime
@@ -33,8 +33,8 @@ npm install --save @tmagic/schema @tmagic/stage
 
 ```vue
 <template>
-  <div v-if="config" :id="config.id" :style="style">
+  <div v-if="config" :data-tmagic-id="config.id" :style="style">
-    <div v-for="node in config.items" :key="node.id" :id="node.id">hello world</div>
+    <div v-for="node in config.items" :key="node.id" :data-tmagic-id="node.id">hello world</div>
   </div>
 </template>
 
@@ -179,8 +179,8 @@ declare global {
 ```
 
 ```ts
+import type { Id, MApp, MNode } from '@tmagic/core';
 import type { RemoveData, UpdateData } from '@tmagic/stage';
-import type { Id, MApp, MNode } from '@tmagic/schema';
 
 const root = ref<MApp>();
 

docs/runtime-api/core/app.md

@@ -0,0 +1,321 @@
+# App
+
+`App` 是 `@tmagic/core` 的核心类，继承自 `EventEmitter`，用于管理整个应用的状态和配置。
+
+## 构造函数
+
+```typescript
+new App(options: AppOptionsConfig)
+```
+
+### AppOptionsConfig
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `ua` | `string` | User Agent 字符串 |
+| `env` | `Env` | 环境信息实例 |
+| `config` | `MApp` | DSL 配置 |
+| `platform` | `'editor' \| 'mobile' \| 'tv' \| 'pc'` | 平台类型 |
+| `jsEngine` | `JsEngine` | JS 引擎类型 |
+| `designWidth` | `number` | 设计稿宽度 |
+| `curPage` | `Id` | 当前页面 ID |
+| `useMock` | `boolean` | 是否使用 Mock 数据 |
+| `disabledFlexible` | `boolean` | 是否禁用 flexible |
+| `pageFragmentContainerType` | `string \| string[]` | 页面片段容器类型 |
+| `iteratorContainerType` | `string \| string[]` | 迭代器容器类型 |
+| `transformStyle` | `(style: Record<string, any>) => Record<string, any>` | 样式转换函数 |
+| `request` | `RequestFunction` | 请求函数 |
+| `dataSourceManagerInitialData` | `DataSourceManagerData` | 数据源管理器初始数据 |
+| `nodeStoreInitialData` | `() => any` | 节点存储初始数据工厂函数 |
+| `errorHandler` | `ErrorHandler` | 错误处理器 |
+| `beforeEventHandler` | `BeforeEventHandler` | 事件处理前钩子 |
+| `afterEventHandler` | `AfterEventHandler` | 事件处理后钩子 |
+
+## 属性
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `env` | `Env` | 环境信息实例 |
+| `dsl` | `MApp` | DSL 配置 |
+| `codeDsl` | `CodeBlockDSL` | 代码块配置 |
+| `dataSourceManager` | `DataSourceManager \| undefined` | 数据源管理器 |
+| `page` | `Page \| undefined` | 当前页面 |
+| `pageFragments` | `Map<Id, Page>` | 页面片段集合 |
+| `platform` | `string` | 平台类型 |
+| `jsEngine` | `JsEngine` | JS 引擎类型 |
+| `components` | `Map<string, any>` | 已注册的组件 |
+| `eventHelper` | `EventHelper` | 事件助手实例 |
+
+## 静态方法
+
+### registerNode
+
+- **参数：**
+  - `{string} type` 节点类型
+  - `{typeof Node} NodeClass` 节点类
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  注册自定义节点类型，用于扩展节点功能。
+
+- **示例：**
+
+```typescript
+import App from '@tmagic/core';
+
+class CustomNode extends Node {
+  // 自定义实现
+}
+
+App.registerNode('custom', CustomNode);
+```
+
+## 实例方法
+
+### setEnv
+
+- **参数：**
+  - `{string} ua` User Agent 字符串
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  设置环境信息，会根据 UA 字符串更新 `env` 属性。
+
+- **示例：**
+
+```typescript
+import App from '@tmagic/core';
+
+const app = new App({});
+app.setEnv(navigator.userAgent);
+```
+
+### setDesignWidth
+
+- **参数：**
+  - `{number} width` 设计稿宽度
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  设置设计稿宽度，用于响应式布局计算。
+
+- **示例：**
+
+```typescript
+app.setDesignWidth(375);
+```
+
+### setConfig
+
+- **参数：**
+  - `{MApp} config` DSL 配置
+  - `{Id} curPage` 当前页面 ID（可选）
+  - `{DataSourceManagerData} initialData` 初始数据（可选）
+
+- **返回：**
+  - `void`
+
+- **详情：**
+
+  设置 DSL 配置，会初始化数据源管理器和当前页面。
+
+- **示例：**
+
+```typescript
+app.setConfig({
+  id: 'app_1',
+  type: 'app',
+  items: [
+    {
+      id: 'page_1',
+      type: 'page',
+      items: []
+    }
+  ]
+});
+```
+
+### setPage
+
+- **参数：**
+  - `{Id} id` 页面 ID
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  切换当前页面。
+
+- **示例：**
+
+```typescript
+app.setPage('page_2');
+```
+
+### deletePage
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  删除当前页面。
+
+### getPage
+
+- **参数：**
+  - `{Id} id` 页面 ID（可选）
+
+- **返回：**
+  - `{Page | undefined}`
+
+- **详情：**
+
+  获取指定 ID 的页面，不传 ID 则返回当前页面。
+
+- **示例：**
+
+```typescript
+const page = app.getPage('page_1');
+```
+
+### getNode
+
+- **参数：**
+  - `{Id} id` 节点 ID
+  - `{GetNodeOptions} options` 获取选项（可选）
+
+- **返回：**
+  - `{Node | undefined}`
+
+- **详情：**
+
+  获取指定 ID 的节点。
+
+- **GetNodeOptions：**
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `iteratorContainerId` | `Id[]` | 迭代器容器 ID 数组 |
+| `iteratorIndex` | `number[]` | 迭代器索引数组 |
+| `pageFragmentContainerId` | `Id` | 页面片段容器 ID |
+| `strict` | `boolean` | 是否严格模式 |
+
+- **示例：**
+
+```typescript
+const node = app.getNode('button_1');
+```
+
+### registerComponent
+
+- **参数：**
+  - `{string} type` 组件类型
+  - `{any} Component` 组件
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  注册组件。
+
+- **示例：**
+
+```typescript
+app.registerComponent('my-button', MyButton);
+```
+
+### unregisterComponent
+
+- **参数：**
+  - `{string} type` 组件类型
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  取消注册组件。
+
+### resolveComponent
+
+- **参数：**
+  - `{string} type` 组件类型
+
+- **返回：**
+  - `{any}`
+
+- **详情：**
+
+  解析组件，返回已注册的组件。
+
+### runCode
+
+- **参数：**
+  - `{Id} codeId` 代码块 ID
+  - `{object} params` 参数
+  - `{any[]} args` 额外参数
+  - `{FlowState} flowState` 流程状态（可选）
+  - `{Node} node` 节点（可选）
+
+- **返回：**
+  - `{any}`
+
+- **详情：**
+
+  执行代码块。
+
+- **示例：**
+
+```typescript
+const result = await app.runCode('code_1', { key: 'value' });
+```
+
+### runDataSourceMethod
+
+- **参数：**
+  - `{Id} dsId` 数据源 ID
+  - `{string} methodName` 方法名
+  - `{object} params` 参数
+  - `{any[]} args` 额外参数
+  - `{FlowState} flowState` 流程状态（可选）
+  - `{Node} node` 节点（可选）
+
+- **返回：**
+  - `{any}`
+
+- **详情：**
+
+  执行数据源方法。
+
+- **示例：**
+
+```typescript
+const result = await app.runDataSourceMethod('ds_1', 'fetchData', { id: 123 });
+```
+
+### destroy
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  销毁应用实例，清理所有资源。
+
+- **示例：**
+
+```typescript
+app.destroy();
+```

docs/runtime-api/core/devtoolApi.md

@@ -0,0 +1,191 @@
+# DevtoolApi
+
+`DevtoolApi` 是 `@tmagic/core` 提供给开发工具使用的 API 接口类。
+
+## 构造函数
+
+```typescript
+new DevtoolApi(options: DevtoolApiOptions)
+```
+
+### DevtoolApiOptions
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `app` | `App` | 应用实例 |
+
+## 实例方法
+
+### openPop
+
+- **参数：**
+  - `{Id} popId` 弹窗组件 ID
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  打开指定的弹窗组件。
+
+- **示例：**
+
+```typescript
+devtoolApi.openPop('dialog_1');
+```
+
+### setDataSourceData
+
+- **参数：**
+  - `{Id} dsId` 数据源 ID
+  - `{any} data` 数据
+  - `{string} path` 数据路径（可选）
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  设置数据源的数据。
+
+- **示例：**
+
+```typescript
+// 设置整个数据源数据
+devtoolApi.setDataSourceData('ds_1', { name: 'test' });
+
+// 设置数据源的某个字段
+devtoolApi.setDataSourceData('ds_1', 'newValue', 'user.name');
+```
+
+### requestDataSource
+
+- **参数：**
+  - `{Id} dsId` 数据源 ID
+
+- **返回：**
+  - `{Promise<void>}`
+
+- **详情：**
+
+  触发 HTTP 数据源的请求。
+
+- **示例：**
+
+```typescript
+await devtoolApi.requestDataSource('http_ds_1');
+```
+
+### getDisplayCondRealValue
+
+- **参数：**
+  - `{Id} nodeId` 节点 ID
+  - `{CondItem} condItem` 条件项
+
+- **返回：**
+  - `{any}`
+
+- **详情：**
+
+  获取显示条件的实际计算值。
+
+### callHook
+
+- **参数：**
+  - `{Id} nodeId` 节点 ID
+  - `{string} hookName` 钩子名称
+  - `{any} hookData` 钩子数据
+
+- **返回：**
+  - `{Promise<any>}`
+
+- **详情：**
+
+  调用节点的钩子函数。
+
+- **示例：**
+
+```typescript
+await devtoolApi.callHook('button_1', 'mounted', { data: 'test' });
+```
+
+### trigger
+
+- **参数：**
+  - `{Id} nodeId` 节点 ID
+  - `{EventConfig[]} events` 事件配置数组
+
+- **返回：**
+  - `{Promise<void>}`
+
+- **详情：**
+
+  触发节点的事件。
+
+- **示例：**
+
+```typescript
+await devtoolApi.trigger('button_1', [
+  {
+    name: 'click',
+    actions: [{ actionType: 'code', codeId: 'code_1' }]
+  }
+]);
+```
+
+### isValueIncludeDataSource
+
+- **参数：**
+  - `{any} value` 要检查的值
+
+- **返回：**
+  - `{boolean}`
+
+- **详情：**
+
+  检查值是否包含数据源引用。
+
+- **示例：**
+
+```typescript
+const hasDs = devtoolApi.isValueIncludeDataSource('${ds_1.field}');
+console.log(hasDs); // true
+```
+
+### compileDataSourceValue
+
+- **参数：**
+  - `{any} value` 包含数据源引用的值
+
+- **返回：**
+  - `{any}`
+
+- **详情：**
+
+  编译数据源值，将数据源引用替换为实际值。
+
+- **示例：**
+
+```typescript
+const compiled = devtoolApi.compileDataSourceValue('用户名：${ds_1.user.name}');
+```
+
+### updateCode
+
+- **参数：**
+  - `{Id} codeId` 代码块 ID
+  - `{any} value` 新值
+  - `{string} path` 路径（可选）
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  更新代码块的内容。
+
+- **示例：**
+
+```typescript
+devtoolApi.updateCode('code_1', 'return data.value * 2;', 'content');
+```

docs/runtime-api/core/env.md

@@ -0,0 +1,69 @@
+# Env
+
+`Env` 是 `@tmagic/core` 的环境检测类，用于检测当前运行环境的设备和系统信息。
+
+## 构造函数
+
+```typescript
+new Env(ua?: string)
+```
+
+### 参数
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `ua` | `string` | User Agent 字符串（可选，默认使用 `navigator.userAgent`） |
+
+## 属性
+
+所有属性均为只读布尔值：
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `isIos` | `boolean` | 是否为 iOS 系统 |
+| `isIphone` | `boolean` | 是否为 iPhone 设备 |
+| `isIpad` | `boolean` | 是否为 iPad 设备 |
+| `isAndroid` | `boolean` | 是否为 Android 系统 |
+| `isAndroidPad` | `boolean` | 是否为 Android 平板 |
+| `isMac` | `boolean` | 是否为 Mac 系统 |
+| `isWin` | `boolean` | 是否为 Windows 系统 |
+| `isMqq` | `boolean` | 是否在手机 QQ 中 |
+| `isWechat` | `boolean` | 是否在微信中 |
+| `isWeb` | `boolean` | 是否为 Web 环境 |
+| `isOpenHarmony` | `boolean` | 是否为鸿蒙系统 |
+
+## 使用示例
+
+```typescript
+import { Env } from '@tmagic/core';
+
+// 使用当前浏览器的 UA
+const env = new Env();
+
+if (env.isIos) {
+  console.log('当前是 iOS 设备');
+}
+
+if (env.isWechat) {
+  console.log('在微信中打开');
+}
+
+// 使用自定义 UA
+const customEnv = new Env('Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)');
+console.log(customEnv.isIphone); // true
+```
+
+## 在 App 中使用
+
+```typescript
+import App from '@tmagic/core';
+
+const app = new App({
+  ua: navigator.userAgent
+});
+
+// 通过 app.env 访问环境信息
+if (app.env.isAndroid) {
+  // Android 特定逻辑
+}
+```

docs/runtime-api/core/eventHelper.md

@@ -0,0 +1,150 @@
+# EventHelper
+
+`EventHelper` 是 `@tmagic/core` 的事件助手类，继承自 `EventEmitter`，用于管理组件间的事件联动。
+
+## 构造函数
+
+```typescript
+new EventHelper(options: EventHelperOptions)
+```
+
+### EventHelperOptions
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `app` | `App` | 应用实例 |
+
+## 属性
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `app` | `App` | 应用实例 |
+
+## 实例方法
+
+### initEvents
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  初始化所有节点的事件。通常在页面加载时调用。
+
+- **示例：**
+
+```typescript
+eventHelper.initEvents();
+```
+
+### bindNodeEvents
+
+- **参数：**
+  - `{Node} node` 节点实例
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  为单个节点绑定事件处理。
+
+- **示例：**
+
+```typescript
+eventHelper.bindNodeEvents(node);
+```
+
+### removeNodeEvents
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  移除所有节点的事件绑定。
+
+### bindDataSourceEvents
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  绑定数据源事件，监听数据源变化并触发相应的组件更新。
+
+### removeDataSourceEvents
+
+- **参数：**
+  - `{DataSourceSchema[]} dataSourceList` 数据源列表（可选）
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  移除数据源事件绑定。
+
+### getEventQueue
+
+- **返回：**
+  - `{EventConfig[]}`
+
+- **详情：**
+
+  获取当前事件队列。
+
+### addEventToQueue
+
+- **参数：**
+  - `{EventConfig} event` 事件配置
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  将事件添加到队列中等待处理。
+
+### destroy
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  销毁事件助手，清理所有事件绑定。
+
+## 支持的动作类型
+
+EventHelper 支持以下动作类型（ActionType）：
+
+| 类型 | 说明 |
+|------|------|
+| `ActionType.COMP` | 组件动作，调用目标组件的方法 |
+| `ActionType.CODE` | 代码块执行 |
+| `ActionType.DATA_SOURCE` | 数据源方法调用 |
+
+### 事件配置示例
+
+```typescript
+const eventConfig = {
+  name: 'click',
+  actions: [
+    {
+      actionType: 'comp',
+      to: 'button_2',
+      method: 'show'
+    },
+    {
+      actionType: 'code',
+      codeId: 'code_1'
+    },
+    {
+      actionType: 'dataSource',
+      dataSourceId: 'ds_1',
+      methodName: 'fetchData'
+    }
+  ]
+};
+```

docs/runtime-api/core/flowState.md

@@ -0,0 +1,82 @@
+# FlowState
+
+`FlowState` 是 `@tmagic/core` 的流程状态类，用于控制事件动作流程的执行。
+
+## 构造函数
+
+```typescript
+new FlowState()
+```
+
+## 属性
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `isAbort` | `boolean` | 当前流程是否已中止 |
+
+## 实例方法
+
+### abort
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  中止当前流程。调用后 `isAbort` 变为 `true`，后续的事件动作将不再执行。
+
+- **示例：**
+
+```typescript
+import { FlowState } from '@tmagic/core';
+
+const flowState = new FlowState();
+
+// 在某个条件下中止流程
+if (shouldStop) {
+  flowState.abort();
+}
+
+// 检查是否已中止
+if (flowState.isAbort) {
+  console.log('流程已中止');
+}
+```
+
+### reset
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  重置流程状态，将 `isAbort` 恢复为 `false`。
+
+- **示例：**
+
+```typescript
+flowState.reset();
+console.log(flowState.isAbort); // false
+```
+
+## 使用场景
+
+FlowState 常用于控制事件动作链的执行流程：
+
+```typescript
+import App, { FlowState } from '@tmagic/core';
+
+const app = new App({ /* options */ });
+
+// 创建流程状态
+const flowState = new FlowState();
+
+// 执行代码块时传入流程状态
+await app.runCode('validateCode', {}, [], flowState);
+
+// 如果验证失败，代码块内部可以调用 flowState.abort()
+// 后续的动作将不会执行
+if (!flowState.isAbort) {
+  await app.runCode('submitCode', {}, [], flowState);
+}
+```

docs/runtime-api/core/iteratorContainer.md

@@ -0,0 +1,142 @@
+# IteratorContainer
+
+`IteratorContainer` 是 `@tmagic/core` 的迭代容器类，继承自 `Node`，用于循环渲染的容器组件。
+
+## 构造函数
+
+```typescript
+new IteratorContainer(options: NodeOptions)
+```
+
+参数与 [Node](./node.md) 构造函数相同。
+
+## 属性
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `nodes` | `Map<Id, Node>[]` | 每个迭代项的节点映射数组 |
+
+继承自 Node 的属性请参见 [Node 属性](./node.md#属性)。
+
+## 实例方法
+
+### setData
+
+- **参数：**
+  - `{MNode} data` 节点数据
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  设置数据，会重置所有迭代项的节点。
+
+- **示例：**
+
+```typescript
+iteratorContainer.setData({
+  id: 'iterator_1',
+  type: 'iterator-container',
+  iteratorData: [{ name: 'item1' }, { name: 'item2' }],
+  items: [/* 子节点配置 */]
+});
+```
+
+### resetNodes
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  重置所有迭代项的节点，会清空并重新初始化。
+
+### initNode
+
+- **参数：**
+  - `{MNode} config` 节点配置
+  - `{Node} parent` 父节点
+  - `{Map<Id, Node>} map` 节点映射表
+
+- **返回：**
+  - `{Node}`
+
+- **详情：**
+
+  在指定的节点映射表中初始化节点。
+
+### setNodes
+
+- **参数：**
+  - `{Map<Id, Node>} nodes` 节点映射表
+  - `{number} index` 迭代索引
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  设置指定索引的节点映射表。
+
+- **示例：**
+
+```typescript
+iteratorContainer.setNodes(nodesMap, 0);
+```
+
+### getNode
+
+- **参数：**
+  - `{Id} id` 节点 ID
+  - `{number} index` 迭代索引（可选，默认为 0）
+
+- **返回：**
+  - `{Node | undefined}`
+
+- **详情：**
+
+  获取指定迭代索引中的节点。
+
+- **示例：**
+
+```typescript
+// 获取第一个迭代项中的节点
+const node = iteratorContainer.getNode('button_1', 0);
+
+// 获取第二个迭代项中的节点
+const node2 = iteratorContainer.getNode('button_1', 1);
+```
+
+### destroy
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  销毁迭代容器及其所有迭代项的节点。
+
+## 使用场景
+
+IteratorContainer 常用于列表渲染场景，例如：
+
+```typescript
+// DSL 配置示例
+const iteratorConfig = {
+  id: 'iterator_1',
+  type: 'iterator-container',
+  iteratorData: [
+    { id: 1, title: '项目1' },
+    { id: 2, title: '项目2' },
+    { id: 3, title: '项目3' }
+  ],
+  items: [
+    {
+      id: 'text_tpl',
+      type: 'text',
+      text: '${item.title}'
+    }
+  ]
+};
+```

docs/runtime-api/core/node.md

@@ -0,0 +1,139 @@
+# Node
+
+`Node` 是 `@tmagic/core` 的节点基类，继承自 `EventEmitter`，表示 DSL 中的一个节点。
+
+## 构造函数
+
+```typescript
+new Node(options: NodeOptions)
+```
+
+### NodeOptions
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `config` | `MNode` | 节点配置 |
+| `parent` | `Node` | 父节点（可选） |
+| `page` | `Page` | 所属页面 |
+| `app` | `App` | 应用实例 |
+
+## 属性
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `data` | `MNode` | 节点配置数据 |
+| `style` | `object` | 节点样式 |
+| `events` | `EventConfig[]` | 事件配置 |
+| `instance` | `any` | 组件实例 |
+| `page` | `Page` | 所属页面 |
+| `parent` | `Node \| undefined` | 父节点 |
+| `app` | `App` | 应用实例 |
+| `store` | `Store` | 节点存储 |
+| `eventKeys` | `Map<string, symbol>` | 事件键映射 |
+
+## 实例方法
+
+### setData
+
+- **参数：**
+  - `{MNode} data` 节点数据
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  设置节点数据，会更新 `data`、`style` 和 `events` 属性。
+
+- **示例：**
+
+```typescript
+node.setData({
+  id: 'button_1',
+  type: 'button',
+  style: { width: 100 },
+  events: []
+});
+```
+
+### addEventToQueue
+
+- **参数：**
+  - `{EventConfig} event` 事件配置
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  将事件添加到事件队列，等待绑定到组件实例。
+
+### setInstance
+
+- **参数：**
+  - `{any} instance` 组件实例
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  设置组件实例，并绑定队列中的事件。
+
+- **示例：**
+
+```typescript
+// 通常在组件挂载时调用
+node.setInstance(componentInstance);
+```
+
+### runHookCode
+
+- **参数：**
+  - `{'created' | 'mounted'} hook` 钩子名称
+  - `{object} params` 参数
+
+- **返回：**
+  - `{Promise<any>}`
+
+- **详情：**
+
+  执行节点的钩子代码。
+
+- **示例：**
+
+```typescript
+await node.runHookCode('mounted', { data: someData });
+```
+
+### destroy
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  销毁节点，清理事件监听和组件实例。
+
+## 生命周期事件
+
+Node 实例会触发以下生命周期事件：
+
+| 事件名 | 说明 |
+|--------|------|
+| `created` | 组件创建完成时触发 |
+| `mounted` | 组件挂载完成时触发 |
+| `destroy` | 组件销毁时触发 |
+| `update-data` | 数据更新时触发 |
+
+### 监听示例
+
+```typescript
+node.on('mounted', () => {
+  console.log('组件已挂载');
+});
+
+node.on('update-data', (newData) => {
+  console.log('数据已更新', newData);
+});
+```

docs/runtime-api/core/page.md

@@ -0,0 +1,126 @@
+# Page
+
+`Page` 是 `@tmagic/core` 的页面类，继承自 `Node`，用于管理页面及其子节点。
+
+## 构造函数
+
+```typescript
+new Page(options: PageOptions)
+```
+
+### PageOptions
+
+继承自 NodeOptions，参见 [Node](./node.md) 构造函数。
+
+## 属性
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `nodes` | `Map<Id, Node>` | 页面内所有节点的映射表 |
+
+继承自 Node 的属性请参见 [Node 属性](./node.md#属性)。
+
+## 实例方法
+
+### initNode
+
+- **参数：**
+  - `{MNode} config` 节点配置
+  - `{Node} parent` 父节点（可选）
+
+- **返回：**
+  - `{Node}`
+
+- **详情：**
+
+  初始化节点，根据配置创建节点实例并添加到页面。会递归初始化子节点。
+
+- **示例：**
+
+```typescript
+const node = page.initNode({
+  id: 'button_1',
+  type: 'button',
+  style: { width: 100 }
+});
+```
+
+### getNode
+
+- **参数：**
+  - `{Id} id` 节点 ID
+  - `{GetNodeOptions} options` 获取选项（可选）
+
+- **返回：**
+  - `{Node | undefined}`
+
+- **详情：**
+
+  获取页面中指定 ID 的节点。支持从迭代器容器和页面片段中获取节点。
+
+- **GetNodeOptions：**
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `iteratorContainerId` | `Id[]` | 迭代器容器 ID 数组 |
+| `iteratorIndex` | `number[]` | 迭代器索引数组 |
+| `pageFragmentContainerId` | `Id` | 页面片段容器 ID |
+| `strict` | `boolean` | 是否严格模式 |
+
+- **示例：**
+
+```typescript
+const node = page.getNode('button_1');
+
+// 从迭代器中获取
+const iteratorNode = page.getNode('item_1', {
+  iteratorContainerId: ['iterator_1'],
+  iteratorIndex: [0]
+});
+```
+
+### setNode
+
+- **参数：**
+  - `{Id} id` 节点 ID
+  - `{Node} node` 节点实例
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  设置页面中的节点。
+
+### deleteNode
+
+- **参数：**
+  - `{Id} id` 节点 ID
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  删除页面中指定 ID 的节点。
+
+- **示例：**
+
+```typescript
+page.deleteNode('button_1');
+```
+
+### destroy
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  销毁页面及其所有子节点。
+
+- **示例：**
+
+```typescript
+page.destroy();
+```

docs/runtime-api/core/utils.md

@@ -0,0 +1,107 @@
+# 工具函数
+
+`@tmagic/core` 导出的工具函数。
+
+## style2Obj
+
+- **参数：**
+  - `{string} style` CSS 样式字符串
+
+- **返回：**
+  - `{object}` 样式对象
+
+- **详情：**
+
+  将 CSS 样式字符串转换为对象格式。
+
+- **示例：**
+
+```typescript
+import { style2Obj } from '@tmagic/core';
+
+const styleObj = style2Obj('width: 100px; height: 200px;');
+console.log(styleObj); // { width: '100px', height: '200px' }
+```
+
+## fillBackgroundImage
+
+- **参数：**
+  - `{string} value` 背景图片 URL
+
+- **返回：**
+  - `{string}` 完整的 CSS 背景图片值
+
+- **详情：**
+
+  填充背景图片 URL 为完整的 CSS 格式。
+
+- **示例：**
+
+```typescript
+import { fillBackgroundImage } from '@tmagic/core';
+
+const bg = fillBackgroundImage('https://example.com/image.png');
+console.log(bg); // 'url(https://example.com/image.png)'
+```
+
+## getTransform
+
+- **参数：**
+  - `{object} value` transform 配置
+  - `{JsEngine} jsEngine` JS 引擎类型
+
+- **返回：**
+  - `{string}` CSS transform 字符串
+
+- **详情：**
+
+  根据配置生成 CSS transform 字符串，会根据 JS 引擎类型进行适配。
+
+## transformStyle
+
+- **参数：**
+  - `{object} style` 样式对象
+  - `{JsEngine} jsEngine` JS 引擎类型
+
+- **返回：**
+  - `{object}` 转换后的样式对象
+
+- **详情：**
+
+  转换样式对象，将数值转换为 rem 单位（移动端适配）。
+
+- **示例：**
+
+```typescript
+import { transformStyle } from '@tmagic/core';
+
+const style = transformStyle({ width: 100, height: 200 }, 'browser');
+console.log(style); // { width: '1rem', height: '2rem' }
+```
+
+## 常量
+
+### COMMON_EVENT_PREFIX
+
+- **值：** `'magic:common:events:'`
+
+- **详情：**
+
+  通用事件前缀。
+
+### COMMON_METHOD_PREFIX
+
+- **值：** `'magic:common:actions:'`
+
+- **详情：**
+
+  通用方法前缀。
+
+- **示例：**
+
+```typescript
+import { COMMON_EVENT_PREFIX, COMMON_METHOD_PREFIX } from '@tmagic/core';
+
+const eventKey = `${COMMON_EVENT_PREFIX}click`;
+const methodKey = `${COMMON_METHOD_PREFIX}show`;
+```

docs/runtime-api/data-source/dataSource.md

@@ -0,0 +1,198 @@
+# DataSource（基础数据源）
+
+`DataSource` 是 `@tmagic/data-source` 的基础数据源类，用于静态数据管理。
+
+## 构造函数
+
+```typescript
+new DataSource(options: DataSourceOptions)
+```
+
+### DataSourceOptions
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `schema` | `DataSourceSchema` | 数据源配置 |
+| `app` | `TMagicApp` | 应用实例 |
+| `initialData` | `Record<string, any>` | 初始数据（可选） |
+| `useMock` | `boolean` | 使用 Mock 数据（可选） |
+| `request` | `RequestFunction` | 请求函数（可选） |
+| `ObservedDataClass` | `ObservedDataClass` | 观察者数据类（可选） |
+
+### DataSourceSchema
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `id` | `string` | 数据源 ID |
+| `type` | `'base'` | 数据源类型 |
+| `title` | `string` | 数据源标题（可选） |
+| `description` | `string` | 数据源描述（可选） |
+| `fields` | `DataSchema[]` | 字段配置 |
+| `methods` | `CodeBlockContent[]` | 自定义方法配置（可选） |
+| `mocks` | `MockSchema` | Mock 数据配置（可选） |
+| `events` | `EventConfig[]` | 事件配置（可选） |
+
+## 属性
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `id` | `string` | 数据源 ID（只读） |
+| `type` | `string` | 数据源类型，值为 `'base'` |
+| `schema` | `DataSourceSchema` | 配置 schema |
+| `fields` | `DataSchema[]` | 字段配置 |
+| `methods` | `CodeBlockContent[]` | 自定义方法配置 |
+| `data` | `any` | 当前数据 |
+| `isInit` | `boolean` | 是否已初始化 |
+
+## 实例方法
+
+### setData
+
+- **参数：**
+  - `{any} data` 数据
+  - `{string} path` 数据路径（可选）
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  设置数据源数据。如果指定路径，则只更新该路径的数据。
+
+- **示例：**
+
+```typescript
+// 设置整个数据
+ds.setData({ name: 'test', count: 10 });
+
+// 设置特定路径的数据
+ds.setData('newValue', 'user.name');
+```
+
+### setValue
+
+- **参数：**
+  - `{string} path` 数据路径
+  - `{any} data` 数据
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  按路径设置数据，等同于 `setData(data, path)`。
+
+- **示例：**
+
+```typescript
+ds.setValue('user.age', 25);
+```
+
+### onDataChange
+
+- **参数：**
+  - `{string} path` 数据路径
+  - `{Function} callback` 回调函数
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  监听指定路径的数据变化。
+
+- **示例：**
+
+```typescript
+ds.onDataChange('user.name', (newVal) => {
+  console.log('用户名变更:', newVal);
+});
+```
+
+### offDataChange
+
+- **参数：**
+  - `{string} path` 数据路径
+  - `{Function} callback` 回调函数
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  取消监听数据变化。
+
+### getDefaultData
+
+- **返回：**
+  - `{any}` 默认数据
+
+- **详情：**
+
+  根据字段配置获取默认数据。
+
+### init
+
+- **返回：**
+  - `{Promise<void>}`
+
+- **详情：**
+
+  初始化数据源。
+
+### destroy
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  销毁数据源，清理资源。
+
+## 事件
+
+DataSource 继承自 EventEmitter，支持以下事件：
+
+| 事件名 | 说明 |
+|--------|------|
+| `change` | 数据变化时触发 |
+
+### 示例
+
+```typescript
+ds.on('change', () => {
+  console.log('数据已变化', ds.data);
+});
+```
+
+## 字段配置 (DataSchema)
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `name` | `string` | 字段名 |
+| `type` | `string` | 字段类型 |
+| `title` | `string` | 字段标题（可选） |
+| `description` | `string` | 字段描述（可选） |
+| `defaultValue` | `any` | 默认值（可选） |
+| `fields` | `DataSchema[]` | 子字段（对象类型时）（可选） |
+
+### 字段配置示例
+
+```typescript
+const schema = {
+  id: 'user_ds',
+  type: 'base',
+  fields: [
+    { name: 'id', type: 'number', defaultValue: 0 },
+    { name: 'name', type: 'string', defaultValue: '' },
+    {
+      name: 'profile',
+      type: 'object',
+      fields: [
+        { name: 'avatar', type: 'string' },
+        { name: 'bio', type: 'string' }
+      ]
+    }
+  ]
+};
+```

docs/runtime-api/data-source/dataSourceManager.md

@@ -0,0 +1,335 @@
+# DataSourceManager
+
+`DataSourceManager` 是 `@tmagic/data-source` 的核心类，用于管理所有数据源的生命周期、数据编译和事件分发。
+
+## 构造函数
+
+```typescript
+new DataSourceManager(options: DataSourceManagerOptions)
+```
+
+### DataSourceManagerOptions
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `app` | `TMagicApp` | 应用实例 |
+| `initialData` | `DataSourceManagerData` | 初始数据（可选，用于 SSR） |
+| `useMock` | `boolean` | 是否使用 Mock 数据（可选） |
+
+## 属性
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `app` | `TMagicApp` | 应用实例 |
+| `dataSourceMap` | `Map<string, DataSource>` | 数据源映射表 |
+| `data` | `DataSourceManagerData` | 所有数据源的数据 |
+| `initialData` | `DataSourceManagerData` | 初始化数据 |
+| `useMock` | `boolean` | 是否使用 Mock 数据 |
+
+## 静态方法
+
+### register
+
+- **参数：**
+  - `{string} type` 数据源类型
+  - `{typeof DataSource} dataSourceClass` 数据源类
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  注册自定义数据源类型。
+
+- **示例：**
+
+```typescript
+import { DataSourceManager } from '@tmagic/data-source';
+
+class CustomDataSource extends DataSource {
+  // 自定义实现
+}
+
+DataSourceManager.register('custom', CustomDataSource);
+```
+
+### getDataSourceClass
+
+- **参数：**
+  - `{string} type` 数据源类型
+
+- **返回：**
+  - `{typeof DataSource | undefined}`
+
+- **详情：**
+
+  获取已注册的数据源类。
+
+### clearDataSourceClass
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  清除所有已注册的数据源类（保留 `base` 和 `http`）。
+
+### registerObservedData
+
+- **参数：**
+  - `{ObservedDataClass} observedDataClass` 观察者数据类
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  注册自定义的观察者数据类。
+
+## 实例方法
+
+### init
+
+- **参数：**
+  - `{DataSourceSchema[]} ds` 数据源配置数组
+
+- **返回：**
+  - `{Promise<void>}`
+
+- **详情：**
+
+  初始化数据源，会创建所有配置的数据源实例并初始化。
+
+- **示例：**
+
+```typescript
+await dataSourceManager.init([
+  {
+    id: 'ds_1',
+    type: 'base',
+    fields: [{ name: 'count', defaultValue: 0 }]
+  },
+  {
+    id: 'http_1',
+    type: 'http',
+    options: { url: '/api/data' }
+  }
+]);
+```
+
+### get
+
+- **参数：**
+  - `{string} id` 数据源 ID
+
+- **返回：**
+  - `{DataSource | undefined}`
+
+- **详情：**
+
+  获取指定 ID 的数据源实例。
+
+- **示例：**
+
+```typescript
+const ds = dataSourceManager.get('ds_1');
+```
+
+### addDataSource
+
+- **参数：**
+  - `{DataSourceSchema} config` 数据源配置
+
+- **返回：**
+  - `{DataSource}`
+
+- **详情：**
+
+  添加新的数据源。
+
+- **示例：**
+
+```typescript
+const ds = dataSourceManager.addDataSource({
+  id: 'new_ds',
+  type: 'base',
+  fields: []
+});
+```
+
+### removeDataSource
+
+- **参数：**
+  - `{string} id` 数据源 ID
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  移除指定的数据源。
+
+### setData
+
+- **参数：**
+  - `{DataSourceSchema} ds` 数据源配置
+  - `{ChangeEvent} changeEvent` 变化事件（可选）
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  设置数据源数据。
+
+### updateSchema
+
+- **参数：**
+  - `{DataSourceSchema[]} schemas` 数据源配置数组
+
+- **返回：**
+  - `{Promise<void>}`
+
+- **详情：**
+
+  更新数据源 DSL 配置，会自动处理新增、更新和删除。
+
+### compiledNode
+
+- **参数：**
+  - `{MNode} node` 节点配置
+  - `{string} sourceId` 数据源 ID（可选）
+  - `{boolean} deep` 是否深度编译（可选）
+
+- **返回：**
+  - `{MNode}`
+
+- **详情：**
+
+  编译节点 DSL 中的数据源配置，将数据源引用替换为实际值。
+
+- **示例：**
+
+```typescript
+const compiledNode = dataSourceManager.compiledNode({
+  id: 'text_1',
+  type: 'text',
+  text: '${ds_1.username}'
+});
+// compiledNode.text 会被替换为实际的用户名
+```
+
+### compliedConds
+
+- **参数：**
+  - `{MNode} node` 节点配置
+  - `{object} data` 数据上下文（可选）
+
+- **返回：**
+  - `{boolean}`
+
+- **详情：**
+
+  编译显示条件，返回节点是否应该显示。
+
+- **示例：**
+
+```typescript
+const shouldShow = dataSourceManager.compliedConds(node);
+```
+
+### compliedIteratorItemConds
+
+- **参数：**
+  - `{object} itemData` 迭代项数据
+  - `{MNode} node` 节点配置
+  - `{string} field` 条件字段名
+
+- **返回：**
+  - `{boolean}`
+
+- **详情：**
+
+  编译迭代器项的显示条件。
+
+### compliedIteratorItems
+
+- **参数：**
+  - `{object} itemData` 迭代项数据
+  - `{MNode[]} nodes` 节点配置数组
+  - `{string} field` 字段名
+
+- **返回：**
+  - `{MNode[]}`
+
+- **详情：**
+
+  编译迭代器项的节点配置。
+
+### onDataChange
+
+- **参数：**
+  - `{string} id` 数据源 ID
+  - `{string} path` 数据路径
+  - `{Function} callback` 回调函数
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  监听数据源数据变化。
+
+- **示例：**
+
+```typescript
+dataSourceManager.onDataChange('ds_1', 'user.name', (newVal) => {
+  console.log('用户名变更:', newVal);
+});
+```
+
+### offDataChange
+
+- **参数：**
+  - `{string} id` 数据源 ID
+  - `{string} path` 数据路径
+  - `{Function} callback` 回调函数
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  取消监听数据源数据变化。
+
+### destroy
+
+- **返回：**
+  - `{void}`
+
+- **详情：**
+
+  销毁数据源管理器，清理所有数据源。
+
+## 事件
+
+DataSourceManager 继承自 EventEmitter，支持以下事件：
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| `change` | 数据源数据变化 | `(dsId, path, newVal)` |
+| `init` | 所有数据源初始化完成 | 无 |
+| `registered-all` | 所有数据源注册完成 | 无 |
+| `update-data` | 更新节点数据 | `(node, sourceId)` |
+
+### 事件监听示例
+
+```typescript
+dataSourceManager.on('change', (dsId, path, newVal) => {
+  console.log(`数据源 ${dsId} 的 ${path} 变更为:`, newVal);
+});
+
+dataSourceManager.on('init', () => {
+  console.log('所有数据源初始化完成');
+});
+```

docs/runtime-api/data-source/httpDataSource.md

@@ -0,0 +1,221 @@
+# HttpDataSource（HTTP 数据源）
+
+`HttpDataSource` 是 `@tmagic/data-source` 的 HTTP 数据源类，继承自 `DataSource`，用于通过 HTTP 请求获取数据。
+
+## 构造函数
+
+```typescript
+new HttpDataSource(options: DataSourceOptions<HttpDataSourceSchema>)
+```
+
+参数参见 [DataSource](./dataSource.md) 构造函数。
+
+### HttpDataSourceSchema
+
+继承自 DataSourceSchema，额外包含：
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `type` | `'http'` | 数据源类型 |
+| `options` | `HttpOptionsSchema` | HTTP 请求配置 |
+| `responseOptions` | `{ dataPath?: string }` | 响应数据配置（可选） |
+| `autoFetch` | `boolean` | 是否自动请求（可选） |
+| `beforeRequest` | `Function \| string` | 请求前钩子（可选） |
+| `afterResponse` | `Function \| string` | 响应后钩子（可选） |
+
+### HttpOptionsSchema
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `url` | `string \| Function` | 请求链接 |
+| `method` | `'GET' \| 'POST'` | 请求方法（可选，默认 GET） |
+| `params` | `object \| Function` | Query 参数（可选） |
+| `data` | `object \| Function` | Body 数据（可选） |
+| `headers` | `object \| Function` | 请求头（可选） |
+
+## 属性
+
+继承自 DataSource 的属性，额外包含：
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `isLoading` | `boolean` | 是否正在请求 |
+| `error` | `{ msg?: string, code?: string }` | 错误信息 |
+| `httpOptions` | `HttpOptionsSchema` | 请求配置 |
+
+## 实例方法
+
+### request
+
+- **参数：**
+  - `{HttpOptionsSchema} options` 请求选项（可选）
+
+- **返回：**
+  - `{Promise<any>}` 响应数据
+
+- **详情：**
+
+  发起 HTTP 请求。可以传入选项覆盖默认配置。
+
+- **示例：**
+
+```typescript
+// 使用默认配置请求
+const data = await httpDs.request();
+
+// 覆盖部分配置
+const data = await httpDs.request({
+  params: { page: 1, size: 10 }
+});
+```
+
+### get
+
+- **参数：**
+  - `{HttpOptionsSchema} options` 请求选项
+
+- **返回：**
+  - `{Promise<any>}` 响应数据
+
+- **详情：**
+
+  发起 GET 请求。
+
+- **示例：**
+
+```typescript
+const data = await httpDs.get({
+  url: '/api/users',
+  params: { id: 1 }
+});
+```
+
+### post
+
+- **参数：**
+  - `{HttpOptionsSchema} options` 请求选项
+
+- **返回：**
+  - `{Promise<any>}` 响应数据
+
+- **详情：**
+
+  发起 POST 请求。
+
+- **示例：**
+
+```typescript
+const data = await httpDs.post({
+  url: '/api/users',
+  data: { name: 'test' }
+});
+```
+
+## 配置示例
+
+### 基础配置
+
+```typescript
+const httpDsSchema = {
+  id: 'user_api',
+  type: 'http',
+  title: '用户接口',
+  options: {
+    url: '/api/user',
+    method: 'GET',
+    params: { id: 1 }
+  },
+  autoFetch: true,
+  fields: [
+    { name: 'id', type: 'number' },
+    { name: 'name', type: 'string' }
+  ]
+};
+```
+
+### 动态参数配置
+
+```typescript
+const httpDsSchema = {
+  id: 'dynamic_api',
+  type: 'http',
+  options: {
+    url: (app) => `/api/users/${app.page.data.userId}`,
+    params: (app) => ({ token: app.getToken() })
+  }
+};
+```
+
+### 请求钩子配置
+
+```typescript
+const httpDsSchema = {
+  id: 'hooked_api',
+  type: 'http',
+  options: {
+    url: '/api/data',
+    method: 'POST'
+  },
+  // 请求前处理
+  beforeRequest: (options, app) => {
+    options.headers = {
+      ...options.headers,
+      Authorization: `Bearer ${app.token}`
+    };
+    return options;
+  },
+  // 响应后处理
+  afterResponse: (response, app) => {
+    if (response.code !== 0) {
+      throw new Error(response.message);
+    }
+    return response.data;
+  },
+  // 响应数据路径
+  responseOptions: {
+    dataPath: 'data.list'
+  }
+};
+```
+
+### 使用代码块作为钩子
+
+```typescript
+const httpDsSchema = {
+  id: 'code_hook_api',
+  type: 'http',
+  options: {
+    url: '/api/data'
+  },
+  // 引用代码块 ID
+  beforeRequest: 'code_before_request',
+  afterResponse: 'code_after_response'
+};
+```
+
+## 自动请求
+
+当 `autoFetch` 设置为 `true` 时，数据源在初始化时会自动发起请求：
+
+```typescript
+const httpDsSchema = {
+  id: 'auto_api',
+  type: 'http',
+  options: {
+    url: '/api/init-data'
+  },
+  autoFetch: true  // 初始化时自动请求
+};
+```
+
+## 错误处理
+
+```typescript
+httpDs.on('change', () => {
+  if (httpDs.error) {
+    console.error('请求失败:', httpDs.error.msg);
+  } else {
+    console.log('数据:', httpDs.data);
+  }
+});
+```

docs/runtime-api/data-source/observedData.md

@@ -0,0 +1,148 @@
+# 观察者数据类
+
+`@tmagic/data-source` 提供了三种观察者数据类，用于实现数据的响应式监听。
+
+## ObservedData（抽象类）
+
+所有观察者数据类的抽象基类，定义了统一的接口。
+
+### 抽象方法
+
+| 方法 | 参数 | 返回值 | 说明 |
+|------|------|--------|------|
+| `update` | `(data: any, path?: string)` | `void` | 更新数据 |
+| `on` | `(path: string, callback: Function, options?: { immediate?: boolean })` | `void` | 监听数据变化 |
+| `off` | `(path: string, callback: Function)` | `void` | 取消监听 |
+| `getData` | `(path: string)` | `any` | 获取指定路径的数据 |
+| `destroy` | `()` | `void` | 销毁 |
+
+## SimpleObservedData
+
+基于 EventEmitter 的简单观察者实现，只支持单层路径监听。
+
+### 使用示例
+
+```typescript
+import { SimpleObservedData } from '@tmagic/data-source';
+
+const observed = new SimpleObservedData({ name: 'test' });
+
+// 监听数据变化
+observed.on('name', (newVal) => {
+  console.log('name 变更为:', newVal);
+});
+
+// 更新数据
+observed.update({ name: 'new name' });
+
+// 更新特定路径
+observed.update('another name', 'name');
+
+// 获取数据
+const name = observed.getData('name');
+
+// 取消监听
+observed.off('name', callback);
+
+// 销毁
+observed.destroy();
+```
+
+### 特点
+
+- 轻量级实现
+- 只支持单层路径监听（如 `'name'`，不支持 `'user.name'`）
+- 适用于简单数据结构
+
+## DeepObservedData
+
+基于 `deep-state-observer` 的深度观察者实现，支持深层路径监听。
+
+### 使用示例
+
+```typescript
+import { DeepObservedData } from '@tmagic/data-source';
+
+const observed = new DeepObservedData({
+  user: {
+    name: 'test',
+    profile: {
+      avatar: 'url'
+    }
+  }
+});
+
+// 监听深层路径
+observed.on('user.profile.avatar', (newVal) => {
+  console.log('头像变更为:', newVal);
+});
+
+// 监听整个对象
+observed.on('user', (newVal) => {
+  console.log('user 对象变更:', newVal);
+});
+
+// 立即执行回调
+observed.on('user.name', callback, { immediate: true });
+
+// 更新深层数据
+observed.update('new avatar', 'user.profile.avatar');
+
+// 获取深层数据
+const avatar = observed.getData('user.profile.avatar');
+```
+
+### 特点
+
+- 支持深层路径监听（如 `'user.profile.avatar'`）
+- 支持 `immediate` 选项立即执行回调
+- 适用于复杂嵌套数据结构
+- 性能更优，只在相关路径变化时触发回调
+
+## 在 DataSourceManager 中注册
+
+可以通过静态方法注册自定义的观察者数据类：
+
+```typescript
+import { DataSourceManager, DeepObservedData } from '@tmagic/data-source';
+
+// 注册深度观察者类
+DataSourceManager.registerObservedData(DeepObservedData);
+```
+
+## 自定义观察者类
+
+可以继承 `ObservedData` 实现自定义的观察者类：
+
+```typescript
+import { ObservedData } from '@tmagic/data-source';
+
+class CustomObservedData extends ObservedData {
+  private data: any;
+  
+  constructor(data: any) {
+    super();
+    this.data = data;
+  }
+  
+  update(data: any, path?: string): void {
+    // 自定义更新逻辑
+  }
+  
+  on(path: string, callback: Function, options?: { immediate?: boolean }): void {
+    // 自定义监听逻辑
+  }
+  
+  off(path: string, callback: Function): void {
+    // 自定义取消监听逻辑
+  }
+  
+  getData(path: string): any {
+    // 自定义获取数据逻辑
+  }
+  
+  destroy(): void {
+    // 自定义销毁逻辑
+  }
+}
+```

docs/runtime-api/data-source/utils.md

@@ -0,0 +1,200 @@
+# 工具函数
+
+`@tmagic/data-source` 导出的工具函数。
+
+## createDataSourceManager
+
+- **参数：**
+  - `{TMagicApp} app` 应用实例
+  - `{boolean} useMock` 是否使用 Mock 数据（可选）
+  - `{DataSourceManagerData} initialData` 初始数据（可选）
+
+- **返回：**
+  - `{DataSourceManager}` 数据源管理器实例
+
+- **详情：**
+
+  创建数据源管理器的工厂函数，会自动设置数据变化监听。
+
+- **示例：**
+
+```typescript
+import { createDataSourceManager } from '@tmagic/data-source';
+
+const dsManager = createDataSourceManager(app, false, initialData);
+```
+
+## compiledCondition
+
+- **参数：**
+  - `{CondItem} cond` 条件项
+  - `{object} data` 数据上下文
+
+- **返回：**
+  - `{boolean}` 条件是否满足
+
+- **详情：**
+
+  编译单个显示条件。
+
+- **示例：**
+
+```typescript
+import { compiledCondition } from '@tmagic/data-source';
+
+const result = compiledCondition(
+  { field: 'user.age', op: '>', value: 18 },
+  { user: { age: 20 } }
+);
+console.log(result); // true
+```
+
+## compliedConditions
+
+- **参数：**
+  - `{MNode} node` 节点配置
+  - `{object} data` 数据上下文（可选）
+
+- **返回：**
+  - `{boolean}` 节点是否应该显示
+
+- **详情：**
+
+  编译条件组，支持 AND/OR 逻辑。
+
+## compiledNodeField
+
+- **参数：**
+  - `{any} value` 字段值
+  - `{object} data` 数据上下文
+
+- **返回：**
+  - `{any}` 编译后的值
+
+- **详情：**
+
+  编译节点字段中的数据源配置。
+
+- **示例：**
+
+```typescript
+import { compiledNodeField } from '@tmagic/data-source';
+
+const compiled = compiledNodeField(
+  { isBindDataSource: true, dataSourceId: 'ds_1', template: '${name}' },
+  { ds_1: { name: 'test' } }
+);
+```
+
+## compliedDataSourceField
+
+- **参数：**
+  - `{any} value` 字段值
+  - `{object} data` 数据上下文
+
+- **返回：**
+  - `{any}` 编译后的值
+
+- **详情：**
+
+  编译数据源字段选择器的值。
+
+## template
+
+- **参数：**
+  - `{string} value` 模板字符串
+  - `{object} data` 数据上下文
+
+- **返回：**
+  - `{string}` 替换后的字符串
+
+- **详情：**
+
+  模板字符串替换，支持 `${id.field}` 格式。
+
+- **示例：**
+
+```typescript
+import { template } from '@tmagic/data-source';
+
+const result = template(
+  '用户名：${ds_1.user.name}，年龄：${ds_1.user.age}',
+  { ds_1: { user: { name: '张三', age: 20 } } }
+);
+console.log(result); // '用户名：张三，年龄：20'
+```
+
+## createIteratorContentData
+
+- **参数：**
+  - `{object} itemData` 迭代项数据
+  - `{string} dsId` 数据源 ID
+  - `{DataSchema[]} fields` 字段配置
+  - `{object} dsData` 数据源数据
+
+- **返回：**
+  - `{object}` 迭代器数据上下文
+
+- **详情：**
+
+  创建迭代器的数据上下文。
+
+## compliedIteratorItem
+
+- **参数：**
+  - `{object} options` 编译选项
+
+- **返回：**
+  - `{MNode}` 编译后的节点
+
+- **详情：**
+
+  编译迭代器项。
+
+## updateNode
+
+- **参数：**
+  - `{MNode} node` 节点配置
+  - `{MApp} dsl` DSL 配置
+
+- **返回：**
+  - `{MApp}` 更新后的 DSL
+
+- **详情：**
+
+  更新 DSL 中的指定节点。
+
+- **示例：**
+
+```typescript
+import { updateNode } from '@tmagic/data-source';
+
+const newDsl = updateNode(
+  { id: 'button_1', type: 'button', text: '新文本' },
+  dsl
+);
+```
+
+## registerDataSourceOnDemand
+
+- **参数：**
+  - `{MApp} dsl` DSL 配置
+  - `{Record<string, () => Promise<any>>} modules` 数据源模块映射
+
+- **返回：**
+  - `{Promise<void>}`
+
+- **详情：**
+
+  按需加载数据源模块。根据 DSL 中使用的数据源类型动态加载对应模块。
+
+- **示例：**
+
+```typescript
+import { registerDataSourceOnDemand } from '@tmagic/data-source';
+
+await registerDataSourceOnDemand(dsl, {
+  custom: () => import('./CustomDataSource'),
+  socket: () => import('./SocketDataSource')
+});
+```

eslint-config/flat/base.mjs

@@ -0,0 +1,566 @@
+export default {
+  rules: {
+    /**
+     * 不要在中括号中添加空格
+     */
+    'array-bracket-spacing': ['error', 'never'],
+    /**
+     * 数组的方法除了 forEach 之外，回调函数必须有返回值
+     */
+    'array-callback-return': 'warn',
+    /**
+     * 要求箭头函数体使用大括号
+     */
+    'arrow-body-style': ['warn', 'as-needed'],
+    /**
+     * 要求箭头函数的参数使用圆括号
+     */
+    'arrow-parens': [
+      'warn',
+      'as-needed',
+      {
+        requireForBlockBody: true,
+      },
+    ],
+    /**
+     * 强制箭头函数的箭头前后使用一致的空格
+     */
+    'arrow-spacing': 'warn',
+    /**
+     * 要求打开的块标志和同一行上的标志拥有一致的间距。此规则还会在同一行关闭的块标记和前边的标记强制实施一致的间距。
+     */
+    'block-spacing': 'error',
+    /**
+     * 强制在代码块中使用一致的大括号风格
+     */
+    'brace-style': 'error',
+    /**
+     * 使用驼峰命名法（camelCase）命名对象、函数和实例。
+     */
+    camelcase: [
+      'error',
+      {
+        ignoreDestructuring: true,
+        properties: 'never',
+      },
+    ],
+    /**
+     * 添加尾随逗号
+     */
+    'comma-dangle': ['warn', 'always-multiline'],
+    /**
+     * 强制在逗号前后使用一致的空格
+     */
+    'comma-spacing': [
+      'error',
+      {
+        before: false,
+        after: true,
+      },
+    ],
+    /**
+     * 强制使用一致的逗号风格
+     */
+    'comma-style': ['error', 'last'],
+    /**
+     * 强制在计算的属性的方括号中使用一致的空格
+     */
+    'computed-property-spacing': ['warn', 'never'],
+    /**
+     * 禁止使用 foo['bar']，必须写成 foo.bar
+     */
+    'dot-notation': 'warn',
+    /**
+     * 要求或禁止文件末尾存在空行
+     */
+    'eol-last': ['error', 'always'],
+    /**
+     * 必须使用 === 或 !==，禁止使用 == 或 !=
+     */
+    eqeqeq: ['warn', 'always'],
+    /**
+     * 要求或禁止在函数标识符和其调用之间有空格
+     */
+    'func-call-spacing': ['error', 'never'],
+    /**
+     * 必须只使用函数声明或只使用函数表达式
+     */
+    'func-style': ['off', 'expression'],
+    /**
+     * 强制在函数括号内使用一致的换行
+     */
+    'function-paren-newline': ['warn', 'multiline'],
+    /**
+     * 强制 generator 函数中 * 号周围使用一致的空格
+     */
+    'generator-star-spacing': [
+      'warn',
+      {
+        before: false,
+        after: true,
+      },
+    ],
+    /**
+     * 限制变量名长度
+     */
+    'id-length': 'off',
+    /**
+     * 强制隐式返回的箭头函数体的位置
+     */
+    'implicit-arrow-linebreak': ['warn', 'beside'],
+    /**
+     * 使用 2 个空格缩进
+     */
+    indent: [
+      'warn',
+      2,
+      {
+        SwitchCase: 1,
+        VariableDeclarator: 1,
+        outerIIFEBody: 1,
+        FunctionDeclaration: {
+          parameters: 1,
+          body: 1,
+        },
+        FunctionExpression: {
+          parameters: 1,
+          body: 1,
+        },
+        CallExpression: {
+          arguments: 1,
+        },
+        ArrayExpression: 1,
+        ObjectExpression: 1,
+        ImportDeclaration: 1,
+        flatTernaryExpressions: false,
+        ignoredNodes: [
+          'JSXElement',
+          'JSXElement > *',
+          'JSXAttribute',
+          'JSXIdentifier',
+          'JSXNamespacedName',
+          'JSXMemberExpression',
+          'JSXSpreadAttribute',
+          'JSXExpressionContainer',
+          'JSXOpeningElement',
+          'JSXClosingElement',
+          'JSXFragment',
+          'JSXOpeningFragment',
+          'JSXClosingFragment',
+          'JSXText',
+          'JSXEmptyExpression',
+          'JSXSpreadChild',
+        ],
+        ignoreComments: false,
+      },
+    ],
+    /**
+     * 强制在对象字面量的属性中键和值之间使用一致的间距
+     */
+    'key-spacing': 'error',
+    /**
+     * 强制在关键字前后使用一致的空格
+     */
+    'keyword-spacing': [
+      'error',
+      {
+        overrides: {
+          if: {
+            after: true,
+          },
+          for: {
+            after: true,
+          },
+          while: {
+            after: true,
+          },
+          else: {
+            after: true,
+          },
+        },
+      },
+    ],
+    /**
+     * 只允许使用 unix 的 LF 作为换行符，Windows 的 CRLF 不可以使用
+     */
+    'linebreak-style': ['warn', 'unix'],
+    /**
+     * 强制一行的最大长度，限制单行不能超过100个字符，字符串和正则表达式除外。
+     */
+    'max-len': [
+      'off',
+      {
+        code: 120,
+        ignoreStrings: true,
+        ignoreUrls: true,
+        ignoreRegExpLiterals: true,
+        ignoreTemplateLiterals: true,
+      },
+    ],
+    /**
+     * 只有在命名构造器或者类的时候，才用帕斯卡拼命名法（PascalCase），即首字母大写。
+     */
+    'new-cap': [
+      'error',
+      {
+        newIsCap: true,
+        newIsCapExceptions: [],
+        capIsNew: false,
+        capIsNewExceptions: ['Immutable.Map', 'Immutable.Set', 'Immutable.List'],
+        properties: false,
+      },
+    ],
+    /**
+     * 在编写多个方法链式调用(超过两个方法链式调用)时。 使用前导点，强调这行是一个方法调用，而不是一个语句。
+     */
+    'newline-per-chained-call': [
+      'warn',
+      {
+        ignoreChainWithDepth: 2,
+      },
+    ],
+    /**
+     * 使用字面量语法创建数组。
+     */
+    'no-array-constructor': ['error'],
+    /**
+     * 在 case 和 default 的子句中，如果存在声明 (例如. let, const, function, 和 class)，使用大括号来创建块级作用域。
+     */
+    'no-case-declarations': 'error',
+    /**
+     * 避免搞混箭头函数符号 (=>) 和比较运算符 (<=, >=)。
+     */
+    'no-confusing-arrow': 'warn',
+    /**
+     * 禁止对使用 const 定义的常量重新赋值
+     */
+    'no-const-assign': 'error',
+    /**
+     * 禁止重复定义类的成员
+     */
+    'no-dupe-class-members': 'error',
+    /**
+     * 禁止在 else 内使用 return，必须改为提前结束
+     */
+    'no-else-return': [
+      'warn',
+      {
+        allowElseIf: false,
+      },
+    ],
+    /**
+     * 禁止使用 eval
+     */
+    'no-eval': 'error',
+    /**
+     * 不要使用迭代器。
+     * @reason 推荐使用 JavaScript 的高阶函数代替 for-in。
+     */
+    'no-iterator': 'warn',
+    /**
+     * 禁止在循环内的函数内部出现循环体条件语句中定义的变量
+     */
+    'no-loop-func': 'error',
+    /**
+     * 禁止混合使用不同的操作符:
+     * - 禁止 `%`, `**` 之间混用
+     * - 禁止 `%` 与其它运算符之间混用
+     * - 禁止乘除运算符之间混用
+     * - 禁止位运算符之间的任何混用
+     * - 禁止比较运算符之间混用
+     * - 禁止 `&&`, `||` 之间混用
+     */
+    'no-mixed-operators': [
+      'error',
+      {
+        groups: [
+          ['%', '**'],
+          ['%', '+'],
+          ['%', '-'],
+          ['%', '*'],
+          ['%', '/'],
+          ['&', '|', '<<', '>>', '>>>'],
+          ['==', '!=', '===', '!=='],
+          ['&&', '||'],
+        ],
+        allowSamePrecedence: false,
+      },
+    ],
+    /**
+     * 禁止连续赋值，比如 foo = bar = 1
+     */
+    'no-multi-assign': 'error',
+    /**
+     * 不要使用多个空行填充代码。
+     */
+    'no-multiple-empty-lines': 'error',
+    /**
+     * 禁止使用嵌套的三元表达式，比如 a ? b : c ? d : e
+     */
+    'no-nested-ternary': 'warn',
+    /**
+     * 禁止使用 new Function
+     * @reason 这和 eval 是等价的
+     */
+    'no-new-func': 'error',
+    /**
+     * 禁止直接 new Object
+     */
+    'no-new-object': 'error',
+    /**
+     * 禁止使用 new 来生成 String, Number 或 Boolean
+     */
+    'no-new-wrappers': 'warn',
+    /**
+     * 禁止对函数的参数重新赋值
+     */
+    'no-param-reassign': [
+      'warn',
+      {
+        props: true,
+        ignorePropertyModificationsFor: [
+          'acc',
+          'accumulator',
+          'e',
+          'ctx',
+          'req',
+          'request',
+          'res',
+          'response',
+          '$scope',
+          'staticContext',
+          'state',
+        ],
+      },
+    ],
+    /**
+     * 禁止使用 ++ 或 --
+     */
+    'no-plusplus': [
+      'error',
+      {
+        allowForLoopAfterthoughts: true,
+      },
+    ],
+    /**
+     * 禁止使用 hasOwnProperty, isPrototypeOf 或 propertyIsEnumerable
+     */
+    'no-prototype-builtins': 'error',
+    /**
+     * 计算指数时，可以使用 ** 运算符。
+     */
+    'no-restricted-properties': [
+      'warn',
+      {
+        object: 'Math',
+        property: 'pow',
+        message: 'Please use ** instand',
+      },
+    ],
+    /**
+     * 推荐使用 JavaScript 的高阶函数代替 for-in
+     */
+    'no-restricted-syntax': [
+      'warn',
+      {
+        selector: 'ForInStatement',
+        message:
+          'for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.',
+      },
+      {
+        selector: 'LabeledStatement',
+        message: 'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.',
+      },
+      {
+        selector: 'WithStatement',
+        message: '`with` is disallowed in strict mode because it makes code impossible to predict and optimize.',
+      },
+    ],
+    /**
+     * 避免在行尾添加空格。
+     */
+    'no-trailing-spaces': 'error',
+    /**
+     * 变量应先声明再使用，禁止引用任何未声明的变量，除非你明确知道引用的变量存在于当前作用域链上。
+     */
+    'no-undef': ['error'],
+    /**
+     * 禁止变量名出现下划线
+     */
+    'no-underscore-dangle': 'warn',
+    /**
+     * 必须使用 !a 替代 a ? false : true
+     */
+    'no-unneeded-ternary': 'warn',
+    /**
+     * 已定义的变量必须使用
+     * 但不检查最后一个使用的参数之前的参数
+     * 也不检查 rest 属性的兄弟属性
+     */
+    'no-unused-vars': [
+      'error',
+      {
+        args: 'after-used',
+        ignoreRestSiblings: true,
+        argsIgnorePattern: '^_.+',
+        varsIgnorePattern: '^_.+',
+      },
+    ],
+    /**
+     * 禁止出现没必要的 constructor
+     */
+    'no-useless-constructor': 'warn',
+    /**
+     * 禁止出现没必要的转义
+     */
+    'no-useless-escape': 'error',
+    /**
+     * 禁止使用 var
+     */
+    'no-var': 'error',
+    /**
+     * 禁止属性前有空白
+     */
+    'no-whitespace-before-property': 'warn',
+    /**
+     * 强制单个语句的位置
+     */
+    'nonblock-statement-body-position': ['error', 'beside'],
+    /**
+     * 强制在大括号中使用一致的空格
+     */
+    'object-curly-spacing': ['warn', 'always'],
+    /**
+     * 将对象方法、属性简写，且间歇属性放在前面。
+     */
+    'object-shorthand': 'warn',
+    /**
+     * 禁止变量申明时用逗号一次申明多个
+     */
+    'one-var': ['warn', 'never'],
+    /**
+     * 避免在赋值语句 = 前后换行。如果你的代码单行长度超过了 max-len 定义的长度而不得不换行，那么使用括号包裹。
+     */
+    'operator-linebreak': [
+      'error',
+      'before',
+      {
+        overrides: {
+          '=': 'none',
+        },
+      },
+    ],
+    /**
+     * 要求或禁止块内填充
+     */
+    'padded-blocks': ['error', 'never'],
+    /**
+     * 要求回调函数使用箭头函数
+     */
+    'prefer-arrow-callback': 'warn',
+    /**
+     * 申明后不再被修改的变量必须使用 const 来申明
+     */
+    'prefer-const': [
+      'error',
+      {
+        destructuring: 'any',
+        ignoreReadBeforeAssign: false,
+      },
+    ],
+    /**
+     * 优先使用解构赋值
+     */
+    'prefer-destructuring': [
+      'warn',
+      {
+        VariableDeclarator: {
+          array: false,
+          object: true,
+        },
+        AssignmentExpression: {
+          array: true,
+          object: false,
+        },
+      },
+      {
+        enforceForRenamedProperties: false,
+      },
+    ],
+    /**
+     * 必须使用 ...args 而不是 arguments
+     */
+    'prefer-rest-params': 'warn',
+    /**
+     * 必须使用 ... 而不是 apply，比如 foo(...args)
+     */
+    'prefer-spread': 'warn',
+    /**
+     * 必须使用模版字符串而不是字符串连接
+     */
+    'prefer-template': 'error',
+    /**
+     * 要求对象字面量属性名称用引号括起来
+     */
+    'quote-props': [
+      'error',
+      'as-needed',
+      {
+        keywords: false,
+      },
+    ],
+    /**
+     * 使用单引号 '' 定义字符串
+     */
+    quotes: [
+      'warn',
+      'single',
+      {
+        allowTemplateLiterals: false,
+      },
+    ],
+    /**
+     * parseInt 必须传入第二个参数
+     */
+    radix: 'warn',
+    /**
+     * 要加分号
+     */
+    semi: ['error', 'always'],
+    /**
+     * 强制在块之前使用一致的空格
+     */
+    'space-before-blocks': 'error',
+    /**
+     * 强制在 function 的左括号之前使用一致的空格
+     */
+    'space-before-function-paren': [
+      'error',
+      {
+        anonymous: 'always',
+        named: 'never',
+        asyncArrow: 'always',
+      },
+    ],
+    /**
+     * 强制在圆括号内使用一致的空格
+     */
+    'space-in-parens': ['error', 'never'],
+    /**
+     * 要求操作符周围有空格
+     */
+    'space-infix-ops': 'error',
+    /**
+     * 注释的斜线或 * 后必须有空格
+     */
+    'spaced-comment': ['error', 'always'],
+    /**
+     * 要求或禁止模板字符串中的嵌入表达式周围空格的使用
+     */
+    'template-curly-spacing': ['error', 'never'],
+    /**
+     * 要求立即执行的函数使用括号括起来
+     */
+    'wrap-iife': ['error', 'outside'],
+  },
+};

eslint-config/flat/import-sort.mjs

@@ -0,0 +1,38 @@
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
+
+export default {
+  files: ['**/*.{js,mjs,cjs,ts,vue}'],
+  plugins: {
+    'simple-import-sort': simpleImportSort,
+  },
+  rules: {
+    'simple-import-sort/imports': [
+      'error',
+      {
+        groups: [
+          ['./polyfills'],
+          ['^(node)(:.*|$)'],
+          // Node.js builtins. You could also generate this regex if you use a `.js` config.
+          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
+          [
+            '^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)',
+          ],
+          // Packages. `react|vue` related packages come first.
+          ['^(react|vue|vite|vitest)', '^@?\\w'],
+          ['^(@tencent)(/.*|$)'],
+          ['^(@tmagic)(/.*|$)'],
+          // Internal packages.
+          ['^(@|src|editor-page|@editor|@data-source)(/.*|$)'],
+          // Side effect imports.
+          ['^\\u0000'],
+          // Parent imports. Put `..` last.
+          ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+          // Other relative imports. Put same-folder imports and `.` last.
+          ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+          // Style imports.
+          ['^.+\\.s?css$'],
+        ],
+      },
+    ],
+  },
+};

eslint-config/flat/import.mjs

@@ -0,0 +1,37 @@
+import { rules } from 'eslint-plugin-import';
+
+export default {
+  plugins: {
+    import: {
+      meta: { name: 'eslint-plugin-import' },
+      rules,
+    },
+  },
+  files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
+  languageOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  rules: {
+    /**
+     * 导入语句前不允许有任何非导入语句
+     */
+    'import/first': 'error',
+    /**
+     * 禁止重复导入模块
+     */
+    'import/no-duplicates': 'error',
+    /**
+     * 禁止使用 let 导出
+     */
+    'import/no-mutable-exports': 'warn',
+    /**
+     * 禁用导入的模块时使用 webpack 特有的语法（感叹号）
+     */
+    'import/no-webpack-loader-syntax': 'warn',
+    /**
+     * 当只有一个导出时，必须使用 export default 来导出
+     */
+    'import/prefer-default-export': 'off',
+  },
+};

eslint-config/flat/prettier.mjs

@@ -1,5 +1,4 @@
-module.exports = {
+export default {
-  plugins: ['prettier'],
   rules: {
     'wrap-iife': 'off',
     'template-curly-spacing': 'off',

eslint-config/flat/ts.mjs

@@ -0,0 +1,376 @@
+export default {
+  files: ['**/*.ts', '**/*.tsx'],
+  rules: {
+    'brace-style': 'off',
+    'no-empty-function': 'off',
+    // https://github.com/typescript-eslint/typescript-eslint/issues/491
+    'no-invalid-this': 'off',
+    'no-magic-numbers': 'off',
+    'react/sort-comp': 'off',
+    'func-call-spacing': 'off',
+    'comma-spacing': 'off',
+    'dot-notation': 'off',
+    indent: 'off',
+    'keyword-spacing': 'off',
+    camelcase: 'off',
+    'no-underscore-dangle': 'off',
+    'no-array-constructor': 'off',
+    'no-dupe-class-members': 'off',
+    'no-undef': 'off',
+    'no-unused-vars': 'off',
+    'no-useless-constructor': 'off',
+    quotes: 'off',
+    semi: 'off',
+    'space-before-function-paren': 'off',
+    // https://github.com/typescript-eslint/typescript-eslint/issues/600
+    'spaced-comment': ['error', 'always', { markers: ['/'] }],
+    /**
+     * 重载的函数必须写在一起
+     * @reason 增加可读性
+     */
+    '@typescript-eslint/adjacent-overload-signatures': 'error',
+    /** 同 JS 规则的 TS 版本 */
+    '@stylistic/ts/brace-style': 'error',
+    /** 同 JS 规则的 TS 版本 */
+    '@stylistic/comma-spacing': [
+      'error',
+      {
+        before: false,
+        after: true,
+      },
+    ],
+    /**
+     * 类型断言必须使用 as Type，禁止使用 <Type>，禁止对对象字面量进行类型断言（断言成 any 是允许的）
+     * @reason <Type> 容易被理解为 jsx
+     */
+    '@typescript-eslint/consistent-type-assertions': [
+      'error',
+      {
+        assertionStyle: 'as',
+        objectLiteralTypeAssertions: 'never',
+      },
+    ],
+    /**
+     * 优先使用 interface 而不是 type
+     */
+    '@typescript-eslint/consistent-type-definitions': 'off',
+    /** 同 JS 规则的 TS 版本 */
+    '@typescript-eslint/dot-notation': 'warn',
+    /**
+     * 必须设置类的成员的可访问性
+     * @reason 将不需要公开的成员设为私有的，可以增强代码的可理解性，对文档输出也很友好
+     */
+    '@typescript-eslint/explicit-member-accessibility': 'off',
+    /**
+     * 要求或禁止在函数标识符和其调用之间有空格
+     */
+    '@stylistic/ts/func-call-spacing': ['error', 'never'],
+    /** 同 JS 规则的 TS 版本 */
+    '@stylistic/ts/indent': [
+      'warn',
+      2,
+      {
+        SwitchCase: 1,
+        VariableDeclarator: 1,
+        outerIIFEBody: 1,
+        FunctionDeclaration: {
+          parameters: 1,
+          body: 1,
+        },
+        FunctionExpression: {
+          parameters: 1,
+          body: 1,
+        },
+        CallExpression: {
+          arguments: 1,
+        },
+        ArrayExpression: 1,
+        ObjectExpression: 1,
+        ImportDeclaration: 1,
+        flatTernaryExpressions: false,
+        ignoredNodes: [
+          'JSXElement',
+          'JSXElement > *',
+          'JSXAttribute',
+          'JSXIdentifier',
+          'JSXNamespacedName',
+          'JSXMemberExpression',
+          'JSXSpreadAttribute',
+          'JSXExpressionContainer',
+          'JSXOpeningElement',
+          'JSXClosingElement',
+          'JSXFragment',
+          'JSXOpeningFragment',
+          'JSXClosingFragment',
+          'JSXText',
+          'JSXEmptyExpression',
+          'JSXSpreadChild',
+        ],
+        ignoreComments: false,
+      },
+    ],
+    /** 同 JS 规则的 TS 版本 */
+    '@stylistic/ts/keyword-spacing': [
+      'error',
+      {
+        overrides: {
+          if: {
+            after: true,
+          },
+          for: {
+            after: true,
+          },
+          while: {
+            after: true,
+          },
+          else: {
+            after: true,
+          },
+        },
+        before: true,
+        after: true,
+      },
+    ],
+    /**
+     * 指定类成员的排序规则
+     * @reason 优先级：
+     * 1. static > instance
+     * 2. field > constructor > method
+     * 3. public > protected > private
+     */
+    '@typescript-eslint/member-ordering': [
+      'error',
+      {
+        default: [
+          'public-static-field',
+          'protected-static-field',
+          'private-static-field',
+          'static-field',
+          'public-static-method',
+          'protected-static-method',
+          'private-static-method',
+          'static-method',
+          'public-instance-field',
+          'protected-instance-field',
+          'private-instance-field',
+          'public-field',
+          'protected-field',
+          'private-field',
+          'instance-field',
+          'field',
+          'constructor',
+          'public-instance-method',
+          'protected-instance-method',
+          'private-instance-method',
+          'public-method',
+          'protected-method',
+          'private-method',
+          'instance-method',
+          'method',
+        ],
+      },
+    ],
+    /**
+     * 接口中的方法必须用属性的方式定义
+     */
+    '@typescript-eslint/method-signature-style': 'off',
+    /** 代替 JS 规则 camelCase 的 TS 规则 */
+    '@typescript-eslint/naming-convention': [
+      'warn',
+      {
+        selector: 'function',
+        format: ['camelCase', 'PascalCase'],
+      },
+      {
+        selector: 'variable',
+        format: ['camelCase', 'UPPER_CASE'],
+      },
+      {
+        selector: 'variable',
+        modifiers: ['global'],
+        format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
+      },
+      {
+        selector: 'variable',
+        format: ['camelCase', 'PascalCase'],
+        types: ['function'],
+      },
+      {
+        selector: 'variable',
+        modifiers: ['exported'],
+        format: ['UPPER_CASE'],
+        types: ['boolean', 'string', 'number', 'array'],
+      },
+      {
+        selector: 'variable',
+        modifiers: ['exported'],
+        format: ['camelCase', 'PascalCase'],
+        types: ['function'],
+      },
+      {
+        selector: ['class', 'typeLike'],
+        format: ['PascalCase'],
+      },
+      {
+        selector: ['classMethod', 'classProperty'],
+        leadingUnderscore: 'forbid',
+        trailingUnderscore: 'forbid',
+        format: ['camelCase'],
+      },
+    ],
+    /** 同 JS 规则的 TS 版本 */
+    '@typescript-eslint/no-array-constructor': 'error',
+    /** 同 JS 规则的 TS 版本 */
+    '@typescript-eslint/no-dupe-class-members': 'error',
+    /**
+     * 禁止定义空的接口
+     */
+    '@typescript-eslint/no-empty-interface': 'error',
+    /**
+     * 禁止给一个初始化时直接赋值为 number, string 的变量显式的声明类型
+     * @reason 可以简化代码
+     */
+    '@typescript-eslint/no-inferrable-types': 'warn',
+    /**
+     * 禁止对 promise 的误用，详见示例
+     */
+    '@typescript-eslint/no-misused-promises': [
+      'error',
+      {
+        checksConditionals: true,
+      },
+    ],
+    /**
+     * 禁止使用 namespace 来定义命名空间
+     * @reason 使用 es6 引入模块，才是更标准的方式。
+     * 但是允许使用 declare namespace ... {} 来定义外部命名空间
+     */
+    '@typescript-eslint/no-namespace': [
+      'error',
+      {
+        allowDeclarations: true,
+        allowDefinitionFiles: true,
+      },
+    ],
+    /**
+     * 禁止在 optional chaining 之后使用 non-null 断言（感叹号）
+     * @reason optional chaining 后面的属性一定是非空的
+     */
+    '@typescript-eslint/no-non-null-asserted-optional-chain': 'error',
+    /**
+     * 禁止给类的构造函数的参数添加修饰符
+     */
+    '@typescript-eslint/no-parameter-properties': 'off',
+    /**
+     * 禁止使用 require
+     * @reason 统一使用 import 来引入模块，特殊情况使用单行注释允许 require 引入
+     */
+    '@typescript-eslint/no-require-imports': 'error',
+    /**
+     * 禁止将 this 赋值给其他变量，除非是解构赋值
+     */
+    '@typescript-eslint/no-this-alias': [
+      'error',
+      {
+        allowDestructuring: true,
+      },
+    ],
+    /**
+     * 禁止无用的表达式
+     */
+    '@typescript-eslint/no-unused-expressions': [
+      'error',
+      {
+        allowShortCircuit: true,
+        allowTernary: true,
+        allowTaggedTemplates: true,
+      },
+    ],
+    /** 同 JS 规则的 TS 版本 */
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        args: 'after-used',
+        ignoreRestSiblings: true,
+        argsIgnorePattern: '^_.+',
+        varsIgnorePattern: '^_.+',
+      },
+    ],
+    /**
+     * 禁止出现没必要的 constructor
+     */
+    '@typescript-eslint/no-useless-constructor': 'warn',
+    /**
+     * 使用 for 循环遍历数组时，如果索引仅用于获取成员，则必须使用 for of 循环替代 for 循环
+     * @reason for of 循环更加易读
+     */
+    '@typescript-eslint/prefer-for-of': 'warn',
+    /**
+     * 使用函数类型别名替代包含函数调用声明的接口
+     */
+    '@typescript-eslint/prefer-function-type': 'warn',
+    /**
+     * 禁止使用 module 来定义命名空间
+     * @reason module 已成为 js 的关键字
+     */
+    '@typescript-eslint/prefer-namespace-keyword': 'error',
+    /**
+     * 使用 optional chaining 替代 &&
+     */
+    '@typescript-eslint/prefer-optional-chain': 'error',
+    /** 同 JS 规则的 TS 版本 */
+    '@stylistic/ts/quotes': [
+      'warn',
+      'single',
+      {
+        allowTemplateLiterals: false,
+      },
+    ],
+    /** 同 JS 规则的 TS 版本 */
+    '@stylistic/ts/semi': ['error', 'always'],
+    /** 同 JS 规则的 TS 版本 */
+    '@stylistic/ts/space-before-function-paren': [
+      'error',
+      {
+        anonymous: 'always',
+        named: 'never',
+        asyncArrow: 'always',
+      },
+    ],
+    /**
+     * 禁止使用三斜杠导入文件
+     * @reason 三斜杠是已废弃的语法，但在类型声明文件中还是可以使用的
+     */
+    '@typescript-eslint/triple-slash-reference': [
+      'error',
+      {
+        path: 'never',
+        types: 'always',
+        lib: 'always',
+      },
+    ],
+    /**
+     * 在类型注释周围需要一致的间距
+     */
+    '@stylistic/ts/type-annotation-spacing': 'error',
+    /**
+     * interface 和 type 定义时必须声明成员的类型
+     */
+    '@typescript-eslint/typedef': [
+      'error',
+      {
+        arrayDestructuring: false,
+        arrowParameter: false,
+        memberVariableDeclaration: false,
+        objectDestructuring: false,
+        parameter: false,
+        propertyDeclaration: true,
+        variableDeclaration: false,
+      },
+    ],
+    /**
+     * 函数重载时，若能通过联合类型将两个函数的类型声明合为一个，则使用联合类型而不是两个函数声明
+     */
+    '@typescript-eslint/unified-signatures': 'error',
+  },
+};

eslint-config/index.mjs

@@ -0,0 +1,37 @@
+import js from '@eslint/js';
+import stylistic from '@stylistic/eslint-plugin';
+import parserTs from '@typescript-eslint/parser';
+import { defineConfig } from 'eslint/config';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import pluginVue from 'eslint-plugin-vue';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+import tencentEslintBaseConfig from './flat/base.mjs';
+import tencentEslintImportexport from './flat/import.mjs';
+import ImportSortConfig from './flat/import-sort.mjs';
+import tencentEslintPrettierConfig from './flat/prettier.mjs';
+import tencentEslintTsConfig from './flat/ts.mjs';
+
+export default (tsconfigRootDir) =>
+  defineConfig([
+    { files: ['**/*.{js,mjs,cjs}'], plugins: { js }, extends: ['js/recommended'] },
+    { files: ['**/*.{js,mjs,cjs,ts,vue}'], languageOptions: { globals: { ...globals.browser, ...globals.node } } },
+    ...tseslint.config(tencentEslintBaseConfig, tencentEslintImportexport, tseslint.configs.base, {
+      plugins: {
+        '@stylistic': stylistic,
+      },
+      languageOptions: {
+        parser: parserTs,
+        parserOptions: {
+          project: tsconfigRootDir,
+        },
+      },
+      ...tencentEslintTsConfig,
+    }),
+    pluginVue.configs['flat/essential'],
+    { files: ['**/*.vue'], languageOptions: { parserOptions: { parser: tseslint.parser } } },
+    eslintPluginPrettierRecommended,
+    tencentEslintPrettierConfig,
+    ImportSortConfig,
+  ]);