refactor: make it public

2025-04-04 06:02:45 +08:00 · 2022-02-17 14:47:39 +08:00 · 2022-02-17 14:47:39 +08:00 · bc8b9f5225
commit bc8b9f5225
360 changed files with 52539 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,7 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,8 @@
+dist
+coverage
+node_modules
+dest
+
+comp-entry.ts
+config-entry.ts
+value-entry.ts
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,63 @@
+module.exports = {
+  env: {
+    node: true,
+    browser: true,
+    es2021: true,
+  },
+  globals: {
+    describe: true,
+    it: true,
+    expect: true,
+    jest: true,
+    beforeEach: true,
+  },
+  extends: [
+    'eslint-config-tencent',
+    'eslint-config-tencent/ts',
+    'plugin:vue/vue3-essential',
+    'eslint-config-tencent/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',
+    'no-param-reassign': 'off',
+    '@typescript-eslint/no-require-imports': 'off',
+    '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)(/.*|$)"],
+          // Side effect imports.
+          ["^\\u0000"],
+          // Parent imports. Put `..` last.
+          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+          // Other relative imports. Put same-folder imports and `.` last.
+          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+          // Style imports.
+          ["^.+\\.s?css$"],
+        ],
+      }
+    ]
+  },
+};
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+coverage
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit $1
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
--- a/.husky/pre-push
+++ b/.husky/pre-push
@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm test
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -0,0 +1,136 @@
+## Issue 提交
+
+#### 对于贡献者
+
+在提 issue 前请确保满足一下条件：
+
+- 必须是一个 bug 或者功能新增。
+- 已经在 issue 中搜索过，并且没有找到相似的 issue 或者解决方案。
+
+##  Pull request
+
+我们除了希望听到您的反馈和建议外，我们也希望您接受代码形式的直接帮助，对我们的 GitHub 发出 pull request 请求。
+
+以下是具体步骤：
+
+#### Fork仓库
+
+点击 `Fork` 按钮，将需要参与的项目仓库 fork 到自己的 Github 中。
+
+#### Clone 已 fork 项目
+
+在自己的 github 中，找到 fork 下来的项目，git clone 到本地。
+
+```bash
+$ git clone git@github.com:<yourname>/tmagic-editor.git
+```
+
+#### 添加 tmagic-editor 仓库
+
+将 fork 源仓库连接到本地仓库：
+
+```bash
+$ git remote add <name> <url>
+# 例如：
+$ git remote add wepy git@github.com:Tencent/tmagic-editor.git
+```
+
+#### 保持与 tmagic-editor 仓库的同步
+
+更新上游仓库：
+
+```bash
+$ git pull --rebase <name> <branch>
+# 等同于以下两条命令
+$ git fetch <name> <branch>
+$ git rebase <name>/<branch>
+```
+
+## Commit
+
+对于如何提交 git commit message，我们有非常精确的规则。我们希望所有的 commit message 更具可读性，这样在查看项目历史记录会变得容易，同时我们使用 commit message 生成 Changelog.
+
+本项目使用了 `@commitlint` 作为 commit lint 工具，并使用 [`@commitlint/config-angular`](https://www.npmjs.com/package/@commitlint/config-angular)作为基础规则，请使用下面任意一种方式提交你的 commit.
+
+- 全局安装 `npm install -g commitizen`，然后使用 `cz` 提交
+- 使用 `git commit -a` 提交，请注意 message 符合我们的要求
+
+### 提交格式
+
+每个 commit message 包括 **header**, **body** 和 **footer**.
+
+header 具有特殊的格式，包括 **type**, **scope** 和 **subject**, type 和 subject 是必须的，scope 是可选的。
+
+```vim
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+<BLANK LINE>
+<footer>
+```
+
+提交 message 的任何行不能超过 100 个字符！确保 message 在 GitHub 以及各种 git 工具中更易于阅读。
+
+注脚应该包含 [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) 如果有的话.
+
+示例: 
+```vim
+docs(changelog): update change log to beta.5
+```
+
+```vim
+fix(editor): resize error
+
+Component doesn't refresh when resize it.
+
+fix #123
+```
+
+### Type
+
+必须是以下选项之一:
+
+- **feat**: 一个新特性
+- **fix**: 一次 bug 修复
+- **docs**: 只是对文档进行修改
+- **style**: 不影响代码本身含义的代码风格修改
+- **refactor**: 既不属于新特性又不是 bug 修改的代码修改
+- **perf**: 性能优化
+- **test**: 添加或修改测试用例
+- **build**: 修改构建工具
+- **ci**: 修改自动化脚本
+- **revert**: 回滚提交
+
+### Scope
+
+Scope 应该是本次修改所影响模块的名称（文件夹名称或其他有意义的单词）。
+
+```vim
+<prefix:name>
+<prefix:name1,name2>
+```
+
+其他情况可以忽略 scope:
+
+- 使用 `docs`, `build` 或 `ci` 等全局修改(例如:`docs: add missing type`).
+
+### Subject
+
+Subject 是本次修改的简洁描述:
+
+- 使用祈使句、现在时，例如：使用 "change" 而不是 "changed"、"changes"
+- 不大写第一个字母
+- 不以小数点(.)结尾
+
+### Body
+
+Body 应包含修改的动机，并对比这与以前的行为，是本次修改的详细描述：
+
+- 使用祈使句、现在时，例如：使用 "change" 而不是 "changed"、"changes"
+
+### Footer
+
+Footer 应包含 **Breaking Changes** 和关闭或关联的 **Issues**
+
+- **Breaking Changes** 应该以 `BREAKING CHANGE:` 开头
+- 关闭或关联的 **Issues** 使用 `fix #123` 或者 `re #123`
--- a/5432
+++ b/5432
--- a/README.md
+++ b/README.md
@ -0,0 +1,74 @@
+# TMagic
+TMagic 可视化搭建平台。
+
+* 💪 Vue 3.0 Composition API
+* 🔥 Written in TypeScript
+
+# 文档
+
+文档请移步 
+
+目前文档仍在逐步完善中，如有疑问欢迎给我们提 issue。
+
+## 环境准备
+
+node.js > 14
+
+先安装lerna
+
+```bash
+$ npm install -g lerna
+```
+
+然后安装依赖
+
+```bash
+$ npm run bootstrap
+```
+
+## 运行项目
+
+执行命令
+
+```bash
+$ npm run playground
+```
+
+最后再浏览器中打开
+
+http://localhost:8098/
+
+即可得到一个魔方编辑器示例项目
+
+## 项目介绍
+在本项目中，我们核心内容，是包含在 `packages/editor` 中的编辑器，以及 `runtime` 和 `packages/ui` 提供的各个前端框架相关的 runtime 和 ui。
+
+- `packages` 目录中提供的内容，我们都以 npm 包形式输出，开发者可以通过安装对应的包来使用。
+- `runtime` 是我们提供的编辑器活动页和编辑器模拟器运行的页面项目示例。可以直接使用，也可以参考并自行实现。
+- `playground` 是一个简单的编辑器项目示例。即使用了 `packages` 和 `runtime` 内容的集成项目。开发者可以参考 playground，使用魔方提供的能力实现一个满足业务方需求的编辑器。
+
+### 编辑器
+通过安装和使用 @tmagic/editor，可以快速搭建起一个魔方编辑器。
+
+<img src="https://image.video.qpic.cn/oa_88b7d-32_509802977_1635842258505918" alt="魔方demo图">
+
+### 页面渲染
+runtime 是魔方提供的页面渲染环境。通过加载在编辑器中产出的 uiconfig，即可得到魔方编辑器希望拥有的最终产物，一个活动页面。我们提供了 vue2/vue3/react 几个版本的 runtime。
+
+通过魔方编辑器和 runtime 渲染，以及通过自定义的复杂组件开发，可以在魔方项目上，搭建出复杂而精美的页面。
+
+<img src="https://image.video.qpic.cn/oa_7cf5e6-5_466783002_1637935497991411" width="375">
+
+### 表单渲染
+魔方的表单配置项，使用了我们开发的基于 element-ui 的 @tmagic/form，magic-form 也可以在其他地方单独使用。支持渲染 JS Schema 提供的表单描述。
+
+<img src="https://image.video.qpic.cn/oa_28dbde-2_1333081854_1637935825410557" >
+
+### 使用
+playground 的示例项目，就是为开发者提供的基础应用示例。开发者可以基于此或者参考自行实现，搭建一个基于魔方的可视化搭建平台。
+
+### 参与贡献
+
+如果你有好的意见或建议，欢迎给我们提 Issues 或 Pull Requests，为提升魔方可视化编辑器开发体验贡献力量。<br>详见：[CONTRIBUTING.md](./CONTRIBUTING.md)
+
+[腾讯开源激励计划](https://opensource.tencent.com/contribution) 鼓励开发者的参与和贡献，期待你的加入。
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset'],
+};
--- a/commitlint.config.js
+++ b/commitlint.config.js
@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };
--- a/jest.config.js
+++ b/jest.config.js
@ -0,0 +1,15 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+  },
+  transformIgnorePatterns: ['/node_modules/(?!lodash-es|vue)'],
+  collectCoverage: true,
+  moduleNameMapper: {
+    '^@tmagic/(.*)$': '<rootDir>/packages/$1/src/index.ts',
+    '^@editor/(.*)$': '<rootDir>/packages/editor/src/$1',
+    '^lodash-es$': 'lodash',
+  },
+  moduleFileExtensions: ['js', 'jsx', 'json', 'vue', 'ts', 'tsx'],
+  testPathIgnorePatterns: ['/magic-admin/'],
+};
--- a/lerna.json
+++ b/lerna.json
@ -0,0 +1,24 @@
+{
+  "version": "1.0.0-beta.1",
+  "npmClient": "npm",
+  "packages": [
+    "packages/*",
+    "playground",
+    "runtime/*"
+  ],
+  "command": {
+    "bootstrap": {
+      "hoist": true,
+      "strict": true,
+      "nohoist": [
+        "vue",
+        "react",
+        "react-dom",
+        "@vue/test-utils",
+        "element-plus",
+        "@element-plus/icons",
+        "@testing-library/vue"
+      ]
+    }
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,71 @@
+{
+  "version": "1.0.0-beta.1",
+  "name": "tmagic",
+  "private": true,
+  "scripts": {
+    "bootstrap": "lerna bootstrap && npm run prepare",
+    "clean:lock": "npx shx rm -rf package-lock.json **/package-lock.json **/**/package-lock.json",
+    "clean:top": "npx rm -rf */**/dist */dist coverage dwt*",
+    "clean:all": "npm run clean:top && npx shx rm -rf node_modules **/node_modules **/**/node_modules",
+    "lint": "eslint . --ext .js,.vue,.ts,.tsx",
+    "lint-fix": "eslint . --fix --ext .vue,.js,.ts,.tsx",
+    "playground": "npx lerna run dev --scope tmagic-playground --scope runtime-vue3 --parallel",
+    "build": "npx lerna run build --parallel",
+    "postbuild": "npx mkdir playground/dist/runtime && npx cp -r runtime/vue2/dist ./playground/dist/runtime/vue2 && npx cp -r runtime/vue3/dist ./playground/dist/runtime/vue3 && npx cp -r runtime/react/dist ./playground/dist/runtime/react",
+    "docs": "cd docs && npm run doc:dev",
+    "page": "cd page && vite",
+    "page-vue2": "cd page-vue2 && vite",
+    "page-react": "cd page-react && vite",
+    "reinstall": "npm run clean:all && npm run bootstrap",
+    "test": "jest --maxWorkers=8",
+    "test:coverage": "jest --maxWorkers=16 --coverage",
+    "prepare": "husky install"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "workspaces": [
+    "packages/code-editor",
+    "packages/editor",
+    "packages/form",
+    "packages/stage",
+    "packages/utils"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.14.2",
+    "@commitlint/cli": "^12.1.4",
+    "@commitlint/config-conventional": "^12.1.4",
+    "@types/jest": "^26.0.23",
+    "@typescript-eslint/eslint-plugin": "^4.28.0",
+    "@typescript-eslint/parser": "^4.28.0",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-plugin-unit-jest": "^4.5.13",
+    "babel-eslint": "^10.1.0",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^7.29.0",
+    "eslint-config-tencent": "^1.0.1",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "eslint-plugin-vue": "^7.11.1",
+    "husky": "^7.0.0",
+    "lerna": "^4.0.0",
+    "lint-staged": "^11.0.1",
+    "prettier": "^2.3.1",
+    "typescript": "^4.3.4",
+    "vue-jest": "^5.0.0-alpha.10"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "lint-staged": {
+    "*.{js,ts,vue}": "eslint --fix",
+    "*.scss": "prettier --write"
+  }
+}
--- a/packages/core/package.json
+++ b/packages/core/package.json
@ -0,0 +1,38 @@
+{
+  "version": "1.0.0-beta.1",
+  "name": "@tmagic/core",
+  "main": "dist/magic-core.umd.js",
+  "module": "dist/magic-core.es.js",
+  "types": "dist/types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/magic-core.es.js",
+      "require": "./dist/magic-core.umd.js"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "dependencies": {
+    "@tmagic/schema": "^1.0.0-beta.1",
+    "events": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/events": "^3.0.0",
+    "@types/node": "^15.12.4",
+    "typescript": "^4.3.4",
+    "vite": "^2.3.7",
+    "vite-plugin-dts": "^0.9.6"
+  }
+}
--- a/packages/core/src/App.ts
+++ b/packages/core/src/App.ts
@ -0,0 +1,208 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { EventEmitter } from 'events';
+
+import { Id, MApp } from '@tmagic/schema';
+
+import Env from './Env';
+import {
+  bindCommonEventListener,
+  DEFAULT_EVENTS,
+  getCommonEventName,
+  isCommonMethod,
+  triggerCommonMethod,
+} from './events';
+import Page from './Page';
+import { fillBackgroundImage, style2Obj } from './utils';
+
+interface AppOptionsConfig {
+  ua?: string;
+  config?: MApp;
+  platform?: 'editor' | 'mobile' | 'tv' | 'pc';
+  jsEngine?: 'browser' | 'hippy';
+  curPage?: Id;
+  transformStyle?: (style: Record<string, any>) => Record<string, any>;
+}
+
+class App extends EventEmitter {
+  env;
+
+  pages = new Map<Id, Page>();
+
+  page: Page | undefined;
+
+  platform = 'mobile';
+  jsEngine = 'browser';
+
+  components = new Map();
+
+  constructor(options: AppOptionsConfig) {
+    super();
+
+    this.env = new Env(options.ua);
+    options.platform && (this.platform = options.platform);
+    options.jsEngine && (this.jsEngine = options.jsEngine);
+
+    // 根据屏幕大小计算出跟节点的font-size，用于rem样式的适配
+    if (this.platform === 'mobile' || this.platform === 'editor') {
+      const calcFontsize = () => {
+        let { width } = document.documentElement.getBoundingClientRect();
+        width = Math.min(800, width);
+        const fontSize = width / 3.75;
+        document.documentElement.style.fontSize = `${fontSize}px`;
+      };
+
+      calcFontsize();
+
+      document.body.style.fontSize = '14px';
+
+      globalThis.addEventListener('resize', calcFontsize);
+    }
+
+    if (options.transformStyle) {
+      this.transformStyle = options.transformStyle;
+    }
+
+    options.config && this.setConfig(options.config, options.curPage);
+
+    bindCommonEventListener(this);
+  }
+
+  /**
+   * 将dsl中的style配置转换成css，主要是将数子转成rem为单位的样式值，例如100将被转换成1rem
+   * @param style Object
+   * @returns Object
+   */
+  transformStyle(style: Record<string, any> | string) {
+    if (!style) {
+      return {};
+    }
+
+    let styleObj: Record<string, any> = {};
+    const results: Record<string, any> = {};
+
+    if (typeof style === 'string') {
+      styleObj = style2Obj(style);
+    } else {
+      styleObj = { ...style };
+    }
+
+    const whiteList = ['zIndex', 'opacity', 'fontWeight'];
+    Object.entries(styleObj).forEach(([key, value]) => {
+      if (key === 'backgroundImage') {
+        value && (results[key] = fillBackgroundImage(value));
+      } else if (!whiteList.includes(key) && value && /^[-]?[0-9]*[.]?[0-9]*$/.test(value)) {
+        results[key] = `${value / 100}rem`;
+      } else {
+        results[key] = value;
+      }
+    });
+
+    return results;
+  }
+
+  /**
+   * 设置dsl
+   * @param config dsl跟节点
+   * @param curPage 当前页面id
+   */
+  setConfig(config: MApp, curPage?: Id) {
+    this.pages = new Map();
+
+    config.items?.forEach((page) => {
+      this.pages.set(
+        page.id,
+        new Page({
+          config: page,
+        }),
+      );
+    });
+
+    this.setPage(curPage || this.page?.data?.id);
+  }
+
+  setPage(id?: Id) {
+    let page;
+
+    if (id) {
+      page = this.pages.get(id);
+    }
+
+    if (!page) {
+      page = this.pages.get(this.pages.keys().next().value);
+    }
+
+    this.page = page;
+
+    if (this.platform !== 'magic') {
+      this.bindEvents();
+    }
+  }
+
+  registerComponent(type: string, Component: any) {
+    this.components.set(type, Component);
+  }
+
+  unregisterComponent(type: string) {
+    this.components.delete(type);
+  }
+
+  resolveComponent(type: string) {
+    return this.components.get(type);
+  }
+
+  bindEvents() {
+    if (!this.page) return;
+
+    this.removeAllListeners();
+
+    for (const [, value] of this.page.nodes) {
+      value.events?.forEach((event) => {
+        let { name: eventName } = event;
+        if (DEFAULT_EVENTS.findIndex((defaultEvent) => defaultEvent.value === eventName) > -1) {
+          // common 事件名通过 node id 避免重复触发
+          eventName = getCommonEventName(eventName, `${value.data.id}`);
+        }
+
+        this.on(eventName, (fromCpt, ...args) => {
+          if (!this.page) throw new Error('当前没有页面');
+
+          const toNode = this.page.getNode(event.to);
+          if (!toNode) throw `ID为${event.to}的组件不存在`;
+
+          const { method: methodName } = event;
+          if (isCommonMethod(methodName)) {
+            return triggerCommonMethod(methodName, toNode);
+          }
+
+          if (typeof toNode.instance?.[methodName] === 'function') {
+            toNode.instance[methodName](fromCpt, ...args);
+          }
+        });
+      });
+    }
+  }
+
+  destroy() {
+    this.removeAllListeners();
+    this.pages.clear();
+  }
+}
+
+export default App;
--- a/packages/core/src/Env.ts
+++ b/packages/core/src/Env.ts
@ -0,0 +1,58 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+class Env {
+  isIos = false;
+  isIphone = false;
+  isIpad = false;
+  isAndroid = false;
+  isAnroidPad = false;
+  isMac = false;
+  isWin = false;
+  isMqq = false;
+  isWechat = false;
+  isWeb = false;
+
+  constructor(ua = globalThis.navigator.userAgent, options: Record<string, boolean | string> = {}) {
+    this.isIphone = ua.indexOf('iPhone') >= 0;
+
+    this.isIpad = /(iPad).*OS\s([\d_]+)/.test(ua);
+
+    this.isIos = this.isIphone || this.isIpad;
+
+    this.isAndroid = ua.indexOf('Android') >= 0;
+
+    this.isAnroidPad = this.isAndroid && ua.indexOf('Mobile') < 0;
+
+    this.isMac = ua.indexOf('Macintosh') >= 0;
+
+    this.isWin = ua.indexOf('Windows') >= 0;
+
+    this.isMqq = /QQ\/([\d.]+)/.test(ua);
+
+    this.isWechat = ua.indexOf('MicroMessenger') >= 0 && ua.indexOf('wxwork') < 0;
+
+    this.isWeb = !this.isIos && !this.isAndroid && !/(WebOS|BlackBerry)/.test(ua);
+
+    Object.entries(options).forEach(([key, value]) => {
+      (this as any)[key] = value;
+    });
+  }
+}
+
+export default Env;
--- a/packages/core/src/Node.ts
+++ b/packages/core/src/Node.ts
@ -0,0 +1,67 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { EventEmitter } from 'events';
+
+import { EventItemConfig, MComponent, MContainer, MPage } from '@tmagic/schema';
+
+class Node extends EventEmitter {
+  data: MComponent | MContainer | MPage;
+  style?: {
+    [key: string]: any;
+  };
+  events?: EventItemConfig[];
+  instance?: any;
+
+  constructor(config: MComponent | MContainer) {
+    super();
+
+    const { events } = config;
+    this.data = config;
+    this.events = events;
+
+    this.listenLifeSafe();
+
+    this.once('destroy', () => {
+      this.instance = null;
+      if (typeof this.data.destroy === 'function') {
+        this.data.destroy(this);
+      }
+
+      this.listenLifeSafe();
+    });
+  }
+
+  listenLifeSafe() {
+    this.once('created', (instance: any) => {
+      this.instance = instance;
+      if (typeof this.data.created === 'function') {
+        this.data.created(this);
+      }
+    });
+
+    this.once('mounted', (instance: any) => {
+      this.instance = instance;
+      if (typeof this.data.mounted === 'function') {
+        this.data.mounted(this);
+      }
+    });
+  }
+}
+
+export default Node;
--- a/packages/core/src/Page.ts
+++ b/packages/core/src/Page.ts
@ -0,0 +1,57 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Id, MComponent, MContainer, MPage } from '@tmagic/schema';
+
+import Node from './Node';
+interface ConfigOptions {
+  config: MPage;
+}
+
+class Page extends Node {
+  nodes = new Map<Id, Node>();
+
+  constructor(options: ConfigOptions) {
+    super(options.config);
+
+    this.setNode(options.config.id, this);
+    this.initNode(options.config);
+  }
+
+  initNode(config: MComponent | MContainer) {
+    this.setNode(config.id, new Node(config));
+
+    config.items?.forEach((element: MComponent | MContainer) => {
+      this.initNode(element);
+    });
+  }
+
+  getNode(id: Id) {
+    return this.nodes.get(id);
+  }
+
+  setNode(id: Id, node: Node) {
+    this.nodes.set(id, node);
+  }
+
+  deleteNode(id: Id) {
+    this.nodes.delete(id);
+  }
+}
+
+export default Page;
--- a/packages/core/src/events.ts
+++ b/packages/core/src/events.ts
@ -0,0 +1,123 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * 通用的事件处理
+ */
+
+import App from './App';
+import Node from './Node';
+
+export interface EventOption {
+  label: string;
+  value: string;
+}
+
+const COMMON_EVENT_PREFIX = 'magic:common:events:';
+const COMMON_METHOD_PREFIX = 'magic:common:actions:';
+const CommonMethod = {
+  SHOW: 'show',
+  HIDE: 'hide',
+  SCROLL_TO_VIEW: 'scrollIntoView',
+  SCROLL_TO_TOP: 'scrollToTop',
+};
+
+export const DEFAULT_EVENTS: EventOption[] = [{ label: '点击', value: `${COMMON_EVENT_PREFIX}click` }];
+
+export const DEFAULT_METHODS: EventOption[] = [
+  { label: '显示', value: `${COMMON_METHOD_PREFIX}${CommonMethod.SHOW}` },
+  { label: '隐藏', value: `${COMMON_METHOD_PREFIX}${CommonMethod.HIDE}` },
+  { label: '滚动到该组件', value: `${COMMON_METHOD_PREFIX}${CommonMethod.SCROLL_TO_VIEW}` },
+  { label: '回到顶部', value: `${COMMON_METHOD_PREFIX}${CommonMethod.SCROLL_TO_TOP}` },
+];
+
+export const getCommonEventName = (commonEventName: string, nodeId: string | number) => {
+  const returnName = `${commonEventName}:${nodeId}`;
+
+  if (commonEventName.startsWith(COMMON_EVENT_PREFIX)) return returnName;
+
+  return `${COMMON_EVENT_PREFIX}${returnName}`;
+};
+
+export const isCommonMethod = (methodName: string) => methodName.startsWith(COMMON_METHOD_PREFIX);
+
+// 点击在组件内的某个元素上，需要向上寻找到当前组件
+const getDirectComponent = (element: HTMLElement | null, app: App): Node | Boolean => {
+  if (!element) {
+    return false;
+  }
+
+  if (!element.id) {
+    return getDirectComponent(element.parentElement, app);
+  }
+
+  const node = app.page?.getNode(element.id);
+  if (!node) {
+    return false;
+  }
+
+  return node;
+};
+
+const commonClickEventHandler = (app: App, eventName: string, e: any) => {
+  const node = getDirectComponent(e.target, app);
+
+  if (node) {
+    const { instance, data } = node as Node;
+    app.emit(getCommonEventName(eventName, data.id), instance);
+  }
+};
+
+export const bindCommonEventListener = (app: App) => {
+  window.document.body.addEventListener('click', (e: any) => {
+    commonClickEventHandler(app, 'click', e);
+  });
+
+  window.document.body.addEventListener(
+    'click',
+    (e: any) => {
+      commonClickEventHandler(app, 'click:capture', e);
+    },
+    true,
+  );
+};
+
+export const triggerCommonMethod = (methodName: string, node: Node) => {
+  const { instance } = node;
+
+  switch (methodName.replace(COMMON_METHOD_PREFIX, '')) {
+    case CommonMethod.SHOW:
+      instance.show();
+      break;
+
+    case CommonMethod.HIDE:
+      instance.hide();
+      break;
+
+    case CommonMethod.SCROLL_TO_VIEW:
+      instance.$el.scrollIntoView({ behavior: 'smooth' });
+      break;
+
+    case CommonMethod.SCROLL_TO_TOP:
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+      break;
+
+    default:
+      break;
+  }
+};
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@ -0,0 +1,25 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import App from './App';
+
+import './resetcss.css';
+
+export * from './events';
+
+export default App;
--- a/packages/core/src/resetcss.css
+++ b/packages/core/src/resetcss.css
@ -0,0 +1,446 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0-modified | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* make sure to set some focus styles for accessibility */
+:focus {
+  outline: 0;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+input[type='search'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+  resize: vertical;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+audio,
+canvas,
+video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+  max-width: 100%;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+
+[hidden] {
+  display: none;
+}
+
+/**
+ * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
+ *    `em` units.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-size: 100%; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+  outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/**
+ * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improve image quality when scaled in IE 7.
+ */
+
+img {
+  border: 0; /* 1 */
+  -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/**
+ * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+
+figure {
+  margin: 0;
+}
+
+/**
+ * Correct margin displayed oddly in IE 6/7.
+ */
+
+form {
+  margin: 0;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct color not being inherited in IE 6/7/8/9.
+ * 2. Correct text not wrapping in Firefox 3.
+ * 3. Correct alignment displayed oddly in IE 6/7.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0;
+  white-space: normal; /* 2 */
+  *margin-left: -7px; /* 3 */
+}
+
+/**
+ * 1. Correct font size not being inherited in all browsers.
+ * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *    and Chrome.
+ * 3. Improve appearance and consistency in all browsers.
+ */
+
+button,
+input,
+select,
+textarea {
+  font-size: 100%; /* 1 */
+  margin: 0; /* 2 */
+  vertical-align: baseline; /* 3 */
+  *vertical-align: middle; /* 3 */
+}
+
+/**
+ * Address Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+  line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
+ *    Known issue: inner spacing remains in IE 6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+  *overflow: visible; /* 4 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to content-box in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ * 3. Remove excess padding in IE 7.
+ *    Known issue: excess padding remains in IE 6.
+ */
+
+input[type='checkbox'],
+input[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+  *height: 13px; /* 3 */
+  *width: 13px; /* 3 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 3+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+  overflow: auto; /* 1 */
+  vertical-align: top; /* 2 */
+}
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+html,
+button,
+input,
+select,
+textarea {
+  color: #222;
+}
+
+::-moz-selection {
+  background: #b3d4fc;
+  text-shadow: none;
+}
+
+::selection {
+  background: #b3d4fc;
+  text-shadow: none;
+}
+
+img {
+  vertical-align: middle;
+}
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+textarea {
+  resize: vertical;
+}
+
+.chromeframe {
+  margin: 0.2em 0;
+  background: #ccc;
+  color: #000;
+  padding: 0.2em 0;
+}
--- a/packages/core/src/utils.ts
+++ b/packages/core/src/utils.ts
@ -0,0 +1,55 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const style2Obj = (style: string) => {
+  if (typeof style !== 'string') {
+    return style;
+  }
+
+  const obj: Record<string, any> = {};
+  style.split(';').forEach((element) => {
+    if (!element) {
+      return;
+    }
+
+    const items = element.split(':');
+
+    let key = items.shift();
+    let value = items.join(':');
+
+    if (!key) return;
+
+    key = key.replace(/^\s*/, '').replace(/\s*$/, '');
+    value = value.replace(/^\s*/, '').replace(/\s*$/, '');
+
+    key = key
+      .split('-')
+      .map((v, i) => (i > 0 ? `${v[0].toUpperCase()}${v.substr(1)}` : v))
+      .join('');
+
+    obj[key] = value;
+  });
+  return obj;
+};
+
+export const fillBackgroundImage = (value: string) => {
+  if (value && !/^url/.test(value) && !/^linear-gradient/.test(value)) {
+    return `url(${value})`;
+  }
+  return value;
+};
--- a/packages/core/src/vite-env.d.ts
+++ b/packages/core/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/packages/core/tsconfig.json
+++ b/packages/core/tsconfig.json
@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "../..",
+  },
+  "exclude": [
+    "**/dist/**/*"
+  ],
+}
--- a/packages/core/vite.config.ts
+++ b/packages/core/vite.config.ts
@ -0,0 +1,27 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineConfig } from 'vite';
+
+import { getBaseConfig } from '../vite-config';
+
+import pkg from './package.json';
+
+const deps = Object.keys(pkg.dependencies);
+
+export default defineConfig(getBaseConfig(deps, 'TMagicCore'));
--- a/packages/editor/.npmignore
+++ b/packages/editor/.npmignore
@ -0,0 +1,28 @@
+.babelrc
+.eslintrc
+.editorconfig
+node_modules
+.DS_Store
+examples
+tests
+.code.yml
+reports
+jest.config.js
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/packages/editor/package-lock.json
+++ b/packages/editor/package-lock.json
@ -0,0 +1,282 @@
+{
+	"name": "@tmagic/editor",
+	"version": "1.0.0-beta.1",
+	"lockfileVersion": 1,
+	"requires": true,
+	"dependencies": {
+		"@element-plus/icons": {
+			"version": "0.0.11",
+			"resolved": "https://registry.npmjs.org/@element-plus/icons/-/icons-0.0.11.tgz",
+			"integrity": "sha512-iKQXSxXu131Ai+I9Ymtcof9WId7kaXvB1+WRfAfpQCW7UiAMYgdNDqb/u0hgTo2Yq3MwC4MWJnNuTBEpG8r7+A=="
+		},
+		"@vue/test-utils": {
+			"version": "2.0.0-rc.17",
+			"resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.0.0-rc.17.tgz",
+			"integrity": "sha512-7LHZKsFRV/HqDoMVY+cJamFzgHgsrmQFalROHC5FMWrzPzd+utG5e11krj1tVsnxYufGA2ABShX4nlcHXED+zQ==",
+			"dev": true
+		},
+		"element-plus": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.0.2.tgz",
+			"integrity": "sha512-URjC0HwwiqtlLxqTmHXQ31WXrdAq4ChWyyn52OcQs3PRsnMPfahGVq2AWnfzzlzlhVeI5lY3HQiuB1zDathS+g==",
+			"requires": {
+				"@ctrl/tinycolor": "^3.4.0",
+				"@element-plus/icons-vue": "^0.2.6",
+				"@popperjs/core": "^2.11.2",
+				"@vueuse/core": "^7.6.0",
+				"async-validator": "^4.0.7",
+				"dayjs": "^1.10.7",
+				"lodash": "^4.17.21",
+				"lodash-es": "^4.17.21",
+				"lodash-unified": "^1.0.1",
+				"memoize-one": "^6.0.0",
+				"normalize-wheel-es": "^1.1.1"
+			},
+			"dependencies": {
+				"@ctrl/tinycolor": {
+					"version": "3.4.0",
+					"resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
+					"integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ=="
+				},
+				"@element-plus/icons-vue": {
+					"version": "0.2.7",
+					"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.7.tgz",
+					"integrity": "sha512-S8kDbfVaWkQvbUYQE1ui448tzaHfUvyESCep9J6uPRlViyQPXjdIfwLBhV6AmQSOfFS8rL+xehJGhvzPXLrSBg=="
+				},
+				"@popperjs/core": {
+					"version": "2.11.2",
+					"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+					"integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
+				},
+				"@vueuse/core": {
+					"version": "7.6.2",
+					"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-7.6.2.tgz",
+					"integrity": "sha512-bjAbXJVJO6aElMaZtDz2B70C0L6jFk/jGVqJxWZS5huffxA6dW5DN6tQQJwzOnx9B9rDhePHJIFKsix0qZIH2Q==",
+					"requires": {
+						"@vueuse/shared": "7.6.2",
+						"vue-demi": "*"
+					}
+				},
+				"@vueuse/shared": {
+					"version": "7.6.2",
+					"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-7.6.2.tgz",
+					"integrity": "sha512-ThDld4Mx501tahRuHV6qJGkwCr17GknZrOzlD02Na9qJcH7Pq0quNTLx5cNDou7b1CKNvE3BXi2w/hz9KuPNTQ==",
+					"requires": {
+						"vue-demi": "*"
+					}
+				},
+				"async-validator": {
+					"version": "4.0.7",
+					"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz",
+					"integrity": "sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ=="
+				},
+				"dayjs": {
+					"version": "1.10.7",
+					"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
+					"integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
+				},
+				"lodash": {
+					"version": "4.17.21",
+					"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+					"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+				},
+				"lodash-es": {
+					"version": "4.17.21",
+					"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+					"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+				},
+				"lodash-unified": {
+					"version": "1.0.1",
+					"resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.1.tgz",
+					"integrity": "sha512-Py+twfpWn+2dFQWCuGcp21WiQRwZwnm1cyE3piSt/VtBVKVyxlR58WgOVRzXtmdmDRGJKH8F8GPaA29WK/yK8g=="
+				},
+				"memoize-one": {
+					"version": "6.0.0",
+					"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+					"integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+				},
+				"normalize-wheel-es": {
+					"version": "1.1.1",
+					"resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.1.1.tgz",
+					"integrity": "sha512-157VNH4CngrcsvF8xOVOe22cwniIR3nxSltdctvQeHZj8JttEeOXffK28jucWfWBXs0QNetAumjc1GiInnwX4w=="
+				},
+				"vue-demi": {
+					"version": "0.12.1",
+					"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
+					"integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw=="
+				}
+			}
+		},
+		"vue": {
+			"version": "3.2.31",
+			"resolved": "https://registry.npmjs.org/vue/-/vue-3.2.31.tgz",
+			"integrity": "sha512-odT3W2tcffTiQCy57nOT93INw1auq5lYLLYtWpPYQQYQOOdHiqFct9Xhna6GJ+pJQaF67yZABraH47oywkJgFw==",
+			"requires": {
+				"@vue/compiler-dom": "3.2.31",
+				"@vue/compiler-sfc": "3.2.31",
+				"@vue/runtime-dom": "3.2.31",
+				"@vue/server-renderer": "3.2.31",
+				"@vue/shared": "3.2.31"
+			},
+			"dependencies": {
+				"@babel/parser": {
+					"version": "7.17.3",
+					"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.3.tgz",
+					"integrity": "sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA=="
+				},
+				"@vue/compiler-core": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.31.tgz",
+					"integrity": "sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==",
+					"requires": {
+						"@babel/parser": "^7.16.4",
+						"@vue/shared": "3.2.31",
+						"estree-walker": "^2.0.2",
+						"source-map": "^0.6.1"
+					}
+				},
+				"@vue/compiler-dom": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.31.tgz",
+					"integrity": "sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg==",
+					"requires": {
+						"@vue/compiler-core": "3.2.31",
+						"@vue/shared": "3.2.31"
+					}
+				},
+				"@vue/compiler-sfc": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.31.tgz",
+					"integrity": "sha512-748adc9msSPGzXgibHiO6T7RWgfnDcVQD+VVwYgSsyyY8Ans64tALHZANrKtOzvkwznV/F4H7OAod/jIlp/dkQ==",
+					"requires": {
+						"@babel/parser": "^7.16.4",
+						"@vue/compiler-core": "3.2.31",
+						"@vue/compiler-dom": "3.2.31",
+						"@vue/compiler-ssr": "3.2.31",
+						"@vue/reactivity-transform": "3.2.31",
+						"@vue/shared": "3.2.31",
+						"estree-walker": "^2.0.2",
+						"magic-string": "^0.25.7",
+						"postcss": "^8.1.10",
+						"source-map": "^0.6.1"
+					}
+				},
+				"@vue/compiler-ssr": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.31.tgz",
+					"integrity": "sha512-mjN0rqig+A8TVDnsGPYJM5dpbjlXeHUm2oZHZwGyMYiGT/F4fhJf/cXy8QpjnLQK4Y9Et4GWzHn9PS8AHUnSkw==",
+					"requires": {
+						"@vue/compiler-dom": "3.2.31",
+						"@vue/shared": "3.2.31"
+					}
+				},
+				"@vue/reactivity": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.31.tgz",
+					"integrity": "sha512-HVr0l211gbhpEKYr2hYe7hRsV91uIVGFYNHj73njbARVGHQvIojkImKMaZNDdoDZOIkMsBc9a1sMqR+WZwfSCw==",
+					"requires": {
+						"@vue/shared": "3.2.31"
+					}
+				},
+				"@vue/reactivity-transform": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.31.tgz",
+					"integrity": "sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA==",
+					"requires": {
+						"@babel/parser": "^7.16.4",
+						"@vue/compiler-core": "3.2.31",
+						"@vue/shared": "3.2.31",
+						"estree-walker": "^2.0.2",
+						"magic-string": "^0.25.7"
+					}
+				},
+				"@vue/runtime-core": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.31.tgz",
+					"integrity": "sha512-Kcog5XmSY7VHFEMuk4+Gap8gUssYMZ2+w+cmGI6OpZWYOEIcbE0TPzzPHi+8XTzAgx1w/ZxDFcXhZeXN5eKWsA==",
+					"requires": {
+						"@vue/reactivity": "3.2.31",
+						"@vue/shared": "3.2.31"
+					}
+				},
+				"@vue/runtime-dom": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.31.tgz",
+					"integrity": "sha512-N+o0sICVLScUjfLG7u9u5XCjvmsexAiPt17GNnaWHJUfsKed5e85/A3SWgKxzlxx2SW/Hw7RQxzxbXez9PtY3g==",
+					"requires": {
+						"@vue/runtime-core": "3.2.31",
+						"@vue/shared": "3.2.31",
+						"csstype": "^2.6.8"
+					}
+				},
+				"@vue/server-renderer": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.31.tgz",
+					"integrity": "sha512-8CN3Zj2HyR2LQQBHZ61HexF5NReqngLT3oahyiVRfSSvak+oAvVmu8iNLSu6XR77Ili2AOpnAt1y8ywjjqtmkg==",
+					"requires": {
+						"@vue/compiler-ssr": "3.2.31",
+						"@vue/shared": "3.2.31"
+					}
+				},
+				"@vue/shared": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz",
+					"integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
+				},
+				"csstype": {
+					"version": "2.6.19",
+					"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
+					"integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ=="
+				},
+				"estree-walker": {
+					"version": "2.0.2",
+					"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+					"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+				},
+				"magic-string": {
+					"version": "0.25.7",
+					"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+					"integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+					"requires": {
+						"sourcemap-codec": "^1.4.4"
+					}
+				},
+				"nanoid": {
+					"version": "3.3.0",
+					"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.0.tgz",
+					"integrity": "sha512-JzxqqT5u/x+/KOFSd7JP15DOo9nOoHpx6DYatqIHUW2+flybkm+mdcraotSQR5WcnZr+qhGVh8Ted0KdfSMxlg=="
+				},
+				"picocolors": {
+					"version": "1.0.0",
+					"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+					"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+				},
+				"postcss": {
+					"version": "8.4.6",
+					"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.6.tgz",
+					"integrity": "sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==",
+					"requires": {
+						"nanoid": "^3.2.0",
+						"picocolors": "^1.0.0",
+						"source-map-js": "^1.0.2"
+					}
+				},
+				"source-map": {
+					"version": "0.6.1",
+					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+				},
+				"source-map-js": {
+					"version": "1.0.2",
+					"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+					"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+				},
+				"sourcemap-codec": {
+					"version": "1.4.8",
+					"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+					"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+				}
+			}
+		}
+	}
+}
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@ -0,0 +1,57 @@
+{
+  "version": "1.0.0-beta.1",
+  "name": "@tmagic/editor",
+  "main": "dist/magic-editor.umd.js",
+  "module": "dist/magic-editor.es.js",
+  "style": "dist/style.css",
+  "types": "dist/types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/magic-editor.es.js",
+      "require": "./dist/magic-editor.umd.js"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "dependencies": {
+    "@element-plus/icons": "0.0.11",
+    "@tmagic/core": "^1.0.0-beta.1",
+    "@tmagic/form": "^1.0.0-beta.1",
+    "@tmagic/schema": "^1.0.0-beta.1",
+    "@tmagic/stage": "^1.0.0-beta.1",
+    "@tmagic/utils": "^1.0.0-beta.1",
+    "color": "^3.1.3",
+    "element-plus": "^2.0.2",
+    "events": "^3.3.0",
+    "lodash-es": "^4.17.21",
+    "serialize-javascript": "^6.0.0",
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+    "@types/events": "^3.0.0",
+    "@types/lodash-es": "^4.17.4",
+    "@types/node": "^15.12.4",
+    "@types/serialize-javascript": "^5.0.1",
+    "@vitejs/plugin-vue": "^1.2.3",
+    "@vitejs/plugin-vue-jsx": "^1.1.6",
+    "@vue/compiler-sfc": "^3.2.0",
+    "@vue/test-utils": "^2.0.0-rc.12",
+    "sass": "^1.35.1",
+    "typescript": "^4.3.4",
+    "vite": "^2.3.7",
+    "vite-plugin-dts": "^0.9.6",
+    "vue-tsc": "^0.0.24"
+  }
+}
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@ -0,0 +1,234 @@
+<template>
+  <framework>
+    <template #nav>
+      <slot name="nav" :editorService="editorService"><nav-menu :data="menu"></nav-menu></slot>
+    </template>
+
+    <template #sidebar>
+      <slot name="sidebar" :editorService="editorService">
+        <sidebar :data="sidebar"></sidebar>
+      </slot>
+    </template>
+
+    <template #workspace :editorService="editorService">
+      <slot name="workspace">
+        <workspace
+          :runtime-url="runtimeUrl"
+          :render="render"
+          :moveable-options="moveableOptions"
+          :can-select="canSelect"
+        >
+          <template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template>
+          <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
+          <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
+        </workspace>
+      </slot>
+    </template>
+
+    <template #propsPanel>
+      <slot name="propsPanel">
+        <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)"></props-panel>
+      </slot>
+    </template>
+
+    <template #empty><slot name="empty" :editorService="editorService"></slot></template>
+  </framework>
+</template>
+
+<script lang="ts">
+import { defineComponent, onUnmounted, PropType, provide, toRaw, watch } from 'vue';
+
+import { EventOption } from '@tmagic/core';
+import type { FormConfig } from '@tmagic/form';
+import type { MApp, MNode } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
+import type { MoveableOptions } from '@tmagic/stage';
+
+import Framework from '@editor/layouts/Framework.vue';
+import NavMenu from '@editor/layouts/NavMenu.vue';
+import PropsPanel from '@editor/layouts/PropsPanel.vue';
+import Sidebar from '@editor/layouts/sidebar/Sidebar.vue';
+import Workspace from '@editor/layouts/workspace/Workspace.vue';
+import componentListService from '@editor/services/componentList';
+import editorService from '@editor/services/editor';
+import eventsService from '@editor/services/events';
+import historyService from '@editor/services/history';
+import propsService from '@editor/services/props';
+import uiService from '@editor/services/ui';
+import type { ComponentGroup, MenuBarData, Services, SideBarData } from '@editor/type';
+
+export default defineComponent({
+  name: 'm-editor',
+
+  components: {
+    NavMenu,
+    Sidebar,
+    Workspace,
+    PropsPanel,
+    Framework,
+  },
+
+  props: {
+    /** 页面初始值 */
+    modelValue: {
+      type: Object as PropType<MApp>,
+      default: () => ({}),
+      require: true,
+    },
+
+    /** 左侧面板中的组件列表 */
+    componentGroupList: {
+      type: Array as PropType<ComponentGroup[]>,
+      default: () => [],
+    },
+
+    /** 左侧面板配置 */
+    sidebar: {
+      type: Object as PropType<SideBarData>,
+    },
+
+    /** 顶部工具栏配置 */
+    menu: {
+      type: Object as PropType<MenuBarData>,
+      default: () => ({ left: [], right: [] }),
+    },
+
+    /** 中间工作区域中画布渲染的内容 */
+    render: {
+      type: Function as PropType<() => HTMLDivElement>,
+    },
+
+    /** 中间工作区域中画布通过iframe渲染时的页面url */
+    runtimeUrl: String,
+
+    /** 组件的属性配置表单的dsl */
+    propsConfigs: {
+      type: Object as PropType<Record<string, FormConfig>>,
+      default: () => ({}),
+    },
+
+    /** 添加组件时的默认值 */
+    propsValues: {
+      type: Object as PropType<Record<string, MNode>>,
+      default: () => ({}),
+    },
+
+    /** 组件联动事件选项列表 */
+    eventMethodList: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    /** 画布中组件选中框的移动范围 */
+    moveableOptions: {
+      type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
+    },
+
+    /** 编辑器初始化时默认选中的组件ID */
+    defaultSelected: {
+      type: [Number, String],
+    },
+
+    canSelect: {
+      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
+    },
+
+    stageStyle: {
+      type: [String, Object] as PropType<Record<string, string | number>>,
+    },
+  },
+
+  emits: ['props-panel-mounted', 'update:modelValue'],
+
+  setup(props, { emit }) {
+    editorService.on('root-change', () => {
+      const node = editorService.get<MNode | null>('node') || props.defaultSelected;
+      node && editorService.select(node);
+      emit('update:modelValue', toRaw(editorService.get('root')));
+    });
+
+    // 初始值变化，重新设置节点信息
+    watch(
+      () => props.modelValue,
+      (modelValue) => editorService.set('root', modelValue),
+      {
+        immediate: true,
+      },
+    );
+
+    watch(
+      () => props.componentGroupList,
+      (componentGroupList) => componentListService.setList(componentGroupList),
+      {
+        immediate: true,
+      },
+    );
+
+    watch(
+      () => props.propsConfigs,
+      (configs) => propsService.setPropsConfigs(configs),
+      {
+        immediate: true,
+      },
+    );
+
+    watch(
+      () => props.propsValues,
+      (values) => propsService.setPropsValues(values),
+      {
+        immediate: true,
+      },
+    );
+
+    watch(
+      () => props.eventMethodList,
+      (eventMethodList) => {
+        const eventsList: Record<string, EventOption[]> = {};
+        const methodsList: Record<string, EventOption[]> = {};
+
+        Object.keys(eventMethodList).forEach((type: string) => {
+          eventsList[type] = eventMethodList[type].events;
+          methodsList[type] = eventMethodList[type].methods;
+        });
+
+        eventsService.setEvents(eventsList);
+        eventsService.setMethods(methodsList);
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    watch(
+      () => props.defaultSelected,
+      (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
+      {
+        immediate: true,
+      },
+    );
+
+    watch(
+      () => props.stageStyle,
+      (stageStyle) => uiService.set('stageStyle', stageStyle),
+      {
+        immediate: true,
+      },
+    );
+
+    onUnmounted(() => editorService.destroy());
+
+    const services: Services = {
+      componentListService,
+      eventsService,
+      historyService,
+      propsService,
+      editorService,
+      uiService,
+    };
+
+    provide('services', services);
+
+    return services;
+  },
+});
+</script>
--- a/packages/editor/src/components/Icon.vue
+++ b/packages/editor/src/components/Icon.vue
@ -0,0 +1,29 @@
+<template>
+  <el-icon v-if="!icon"><edit></edit></el-icon>
+  <img v-else-if="typeof icon === 'string' && icon.startsWith('http')" :src="icon" />
+  <i v-else-if="typeof icon === 'string'" :class="icon"></i>
+  <el-icon v-else><component :is="toRaw(icon)"></component></el-icon>
+</template>
+
+<script lang="ts">
+import { Component, defineComponent, PropType, toRaw } from 'vue';
+import { Edit } from '@element-plus/icons';
+
+export default defineComponent({
+  name: 'm-icon',
+
+  components: { Edit },
+
+  props: {
+    icon: {
+      type: [String, Object] as PropType<string | Component>,
+    },
+  },
+
+  setup() {
+    return {
+      toRaw,
+    };
+  },
+});
+</script>
--- a/packages/editor/src/components/ToolButton.vue
+++ b/packages/editor/src/components/ToolButton.vue
@ -0,0 +1,188 @@
+<template>
+  <div v-if="display" class="menu-item">
+    <el-divider v-if="item.type === 'divider'" direction="vertical"></el-divider>
+    <div v-else-if="item.type === 'text'" class="menu-item-text">{{ item.text }}</div>
+
+    <template v-else-if="item.type === 'zoom'">
+      <m-icon :icon="ZoomIn" @click="zoomInHandler"></m-icon>
+      <span class="menu-item-text" style="margin: 0 5px">{{ parseInt(`${zoom * 100}`, 10) }}%</span>
+      <m-icon :icon="ZoomOut" @click="zoomOutHandler"></m-icon>
+    </template>
+
+    <el-tooltip
+      v-else-if="item.type === 'button'"
+      effect="dark"
+      placement="bottom-start"
+      :content="item.tooltip || item.text"
+    >
+      <el-button size="small" type="text" :disabled="disabled" @click="buttonHandler(item)"
+        ><m-icon :icon="item.icon"></m-icon><span>{{ item.text }}</span></el-button
+      >
+    </el-tooltip>
+
+    <el-dropdown v-else-if="item.type === 'dropdown'" trigger="click" :disabled="disabled" @command="dropdownHandler">
+      <span class="el-dropdown-link menubar-menu-button">
+        {{ item.text }}<el-icon class="el-icon--right"><arrow-down></arrow-down></el-icon>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu v-if="item.items && item.items.length">
+          <el-dropdown-item v-for="(subItem, index) in item.items" :key="index" :command="{ item, subItem }">{{
+            subItem.text
+          }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+
+    <component v-else-if="item.type === 'component'" v-bind="item.props || {}" :is="item.component"></component>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, PropType } from 'vue';
+import { ArrowDown, Back, Delete, Grid, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons';
+
+import MIcon from '@editor/components/Icon.vue';
+import type { MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';
+
+export default defineComponent({
+  components: { MIcon, ArrowDown },
+
+  props: {
+    data: {
+      type: [Object, String] as PropType<MenuItem | string>,
+      require: true,
+      default: () => ({
+        type: 'text',
+        display: false,
+      }),
+    },
+  },
+
+  setup(props) {
+    const services = inject<Services>('services');
+    const uiService = services?.uiService;
+
+    const zoomInHandler = () => uiService?.set('zoom', zoom.value + 0.1);
+    const zoomOutHandler = () => uiService?.set('zoom', zoom.value - 0.1);
+
+    const zoom = computed((): number => uiService?.get<number>('zoom') ?? 1);
+    const showGuides = computed((): boolean => uiService?.get<boolean>('showGuides') ?? true);
+    const showRule = computed((): boolean => uiService?.get<boolean>('showRule') ?? true);
+
+    const item = computed((): MenuButton | MenuComponent => {
+      if (typeof props.data !== 'string') {
+        return props.data;
+      }
+      switch (props.data) {
+        case '/':
+          return {
+            type: 'divider',
+          };
+        case 'zoom':
+          return {
+            type: 'zoom',
+          };
+        case 'delete':
+          return {
+            type: 'button',
+            icon: Delete,
+            tooltip: '刪除',
+            disabled: () => services?.editorService.get('node')?.type === 'page',
+            handler: () => services?.editorService.remove(services?.editorService.get('node')),
+          };
+        case 'undo':
+          return {
+            type: 'button',
+            icon: Back,
+            tooltip: '后退',
+            disabled: () => !services?.historyService.state.canUndo,
+            handler: () => services?.editorService.undo(),
+          };
+        case 'redo':
+          return {
+            type: 'button',
+            icon: Right,
+            tooltip: '前进',
+            disabled: () => !services?.historyService.state.canRedo,
+            handler: () => services?.editorService.redo(),
+          };
+        case 'zoom-in':
+          return {
+            type: 'button',
+            icon: ZoomIn,
+            tooltip: '放大',
+            handler: zoomInHandler,
+          };
+        case 'zoom-out':
+          return {
+            type: 'button',
+            icon: ZoomOut,
+            tooltip: '縮小',
+            handler: zoomOutHandler,
+          };
+        case 'rule':
+          return {
+            type: 'button',
+            icon: ScaleToOriginal,
+            tooltip: showRule.value ? '隐藏标尺' : '显示标尺',
+            handler: () => uiService?.set('showRule', !showRule.value),
+          };
+        case 'guides':
+          return {
+            type: 'button',
+            icon: Grid,
+            tooltip: showGuides.value ? '隐藏参考线' : '显示参考线',
+            handler: () => uiService?.set('showGuides', !showGuides.value),
+          };
+        default:
+          return {
+            type: 'text',
+            text: props.data,
+          };
+      }
+    });
+
+    const disabled = computed(() => {
+      if (typeof item.value === 'string') return false;
+      if (item.value.type === 'component') return false;
+      if (typeof item.value.disabled === 'function') {
+        return item.value.disabled(services);
+      }
+      return item.value.disabled;
+    });
+
+    return {
+      ZoomIn,
+      ZoomOut,
+
+      item,
+      zoom,
+      disabled,
+      display: computed(() => {
+        if (!item.value) return false;
+        if (typeof item.value === 'string') return true;
+        if (typeof item.value.display === 'function') {
+          return item.value.display(services);
+        }
+        return item.value.display ?? true;
+      }),
+
+      zoomInHandler,
+      zoomOutHandler,
+
+      dropdownHandler(command: any) {
+        if (command.item.handler) {
+          command.item.handler(services);
+        }
+      },
+
+      buttonHandler(item: MenuButton | MenuComponent) {
+        if (disabled.value) return;
+        if (typeof (item as MenuButton).handler === 'function') {
+          (item as MenuButton).handler?.(services);
+        }
+      },
+    };
+  },
+});
+</script>
--- a/packages/editor/src/fields/Code.vue
+++ b/packages/editor/src/fields/Code.vue
@ -0,0 +1,35 @@
+<template>
+  <magic-code-editor
+    :style="`height: ${height}`"
+    :init-values="model[name]"
+    :language="language"
+    @save="save"
+  ></magic-code-editor>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'm-fields-vs-code',
+
+  props: ['model', 'name', 'config', 'prop'],
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    const language = computed(() => props.config.language || 'javascript');
+    const height = computed(() => `${document.body.clientHeight - 168}px`);
+
+    return {
+      height,
+      language,
+
+      save(v: string) {
+        props.model[props.name] = v;
+        emit('change', v);
+      },
+    };
+  },
+});
+</script>
--- a/packages/editor/src/fields/CodeLink.vue
+++ b/packages/editor/src/fields/CodeLink.vue
@ -0,0 +1,81 @@
+<template>
+  <m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, watchEffect } from 'vue';
+import serialize from 'serialize-javascript';
+
+interface CodeLinkConfig {
+  type: 'code-link';
+  name: string;
+  text?: string;
+  formTitle?: string;
+}
+
+export default defineComponent({
+  name: 'm-fields-code-link',
+
+  props: {
+    config: {
+      type: Object as PropType<CodeLinkConfig>,
+    },
+
+    model: {
+      type: Object,
+    },
+
+    name: {
+      type: String,
+    },
+
+    prop: {
+      type: String,
+    },
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    const modelValue = ref<{ form: Record<string, any> }>({
+      form: {},
+    });
+
+    watchEffect(() => {
+      if (!props.model || !props.name) return;
+      modelValue.value.form[props.name] = serialize(props.model[props.name], {
+        space: 2,
+        unsafe: true,
+      }).replace(/"(\w+)":\s/g, '$1: ');
+    });
+
+    return {
+      modelValue,
+
+      formConfig: computed(() => ({
+        ...props.config,
+        text: '',
+        type: 'link',
+        form: [
+          {
+            name: props.name,
+            type: 'vs-code',
+          },
+        ],
+      })),
+
+      changeHandler(v: Record<string, any>) {
+        if (!props.name || !props.model) return;
+
+        try {
+          // eslint-disable-next-line no-eval
+          props.model[props.name] = eval(`${v[props.name]}`);
+          emit('change', props.model[props.name]);
+        } catch (e) {
+          console.error(e);
+        }
+      },
+    };
+  },
+});
+</script>
--- a/packages/editor/src/fields/UISelect.vue
+++ b/packages/editor/src/fields/UISelect.vue
@ -0,0 +1,100 @@
+<template>
+  <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
+    <i class="el-icon-delete" style="color: rgb(221, 75, 57)">取消</i>
+  </div>
+  <div class="m-fields-ui-select" v-else @click="startSelect">
+    <i class="el-icon-thumb"></i>
+    <span>{{ val ? toName + '_' + val : '点击此处选择' }}</span>
+    <i class="el-icon-delete" @click.stop="deleteHandler" v-if="val"></i>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, ref } from 'vue';
+
+import { FormState } from '@tmagic/form';
+
+import { Services } from '@editor/type';
+
+export default defineComponent({
+  name: 'm-fields-ui-select',
+
+  props: {
+    labelWidth: String,
+    config: Object,
+    model: Object,
+    prop: {
+      type: String,
+      default() {
+        return '';
+      },
+    },
+    name: String,
+  },
+
+  emits: ['change'],
+
+  setup(props: any, { emit }) {
+    const services = inject<Services>('services');
+    const mForm = inject<FormState>('mForm');
+    const val = computed(() => props.model[props.name]);
+    const uiSelectMode = ref(false);
+
+    const cancelHandler = () => {
+      if (!services?.uiService) return;
+      services.uiService.set<boolean>('uiSelectMode', false);
+      uiSelectMode.value = false;
+      globalThis.document.removeEventListener('ui-select', clickHandler as EventListener);
+    };
+
+    const clickHandler = ({ detail }: Event & { detail: any }) => {
+      if (detail.id) {
+        props.model[props.name] = detail.id;
+        emit('change', detail.id);
+        mForm?.$emit('field-change', props.prop, detail.id);
+      }
+
+      if (cancelHandler) {
+        cancelHandler();
+      }
+    };
+
+    return {
+      val,
+      uiSelectMode,
+      toName: computed(() => {
+        const config = services?.editorService.getNodeById(val.value);
+        return config?.name || '';
+      }),
+
+      startSelect() {
+        if (!services?.uiService) return;
+        services.uiService.set<boolean>('uiSelectMode', true);
+        uiSelectMode.value = true;
+        globalThis.document.addEventListener('ui-select', clickHandler as EventListener);
+      },
+
+      cancelHandler,
+
+      deleteHandler() {
+        if (props.model) {
+          props.model[props.name] = '';
+          emit('change', '');
+          mForm?.$emit('field-change', props.prop, '');
+        }
+      },
+    };
+  },
+});
+</script>
+<style lang="scss">
+.m-fields-ui-select {
+  cursor: pointer;
+  i {
+    margin-right: 3px;
+  }
+  span {
+    color: #2882e0;
+  }
+}
+</style>
--- a/packages/editor/src/index.ts
+++ b/packages/editor/src/index.ts
@ -0,0 +1,63 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { App } from 'vue';
+
+import Code from './fields/Code.vue';
+import CodeLink from './fields/CodeLink.vue';
+import uiSelect from './fields/UISelect.vue';
+import CodeEditor from './layouts/CodeEditor.vue';
+import { setConfig } from './utils/config';
+import Editor from './Editor.vue';
+import type { InstallOptions } from './type';
+
+import './theme/index.scss';
+
+export type { MoveableOptions } from '@tmagic/stage';
+export * from './type';
+export * from './utils';
+export { default as TMagicEditor } from './Editor.vue';
+export { default as TMagicCodeEditor } from './layouts/CodeEditor.vue';
+export { default as editorService } from './services/editor';
+export { default as propsService } from './services/props';
+export { default as historyService } from './services/history';
+export { default as eventsService } from './services/events';
+export { default as uiService } from './services/ui';
+export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
+export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
+export { default as PropsPanel } from './layouts/PropsPanel.vue';
+
+const defaultInstallOpt: InstallOptions = {
+  // @todo, 自定义图片上传方法等编辑器依赖的外部选项
+};
+
+export default {
+  install: (app: App, opt?: InstallOptions): void => {
+    const option = Object.assign(defaultInstallOpt, opt || {});
+
+    // eslint-disable-next-line no-param-reassign
+    app.config.globalProperties.$TMAGIC_EDITOR = option;
+    setConfig(option);
+
+    app.component(Editor.name, Editor);
+    app.component(uiSelect.name, uiSelect);
+    app.component(CodeLink.name, CodeLink);
+    app.component(Code.name, Code);
+    app.component(CodeEditor.name, CodeEditor);
+  },
+};
--- a/packages/editor/src/layouts/AddPageBox.vue
+++ b/packages/editor/src/layouts/AddPageBox.vue
@ -0,0 +1,41 @@
+<template>
+  <div class="m-editor-empty-panel">
+    <div class="m-editor-empty-content">
+      <div class="m-editor-empty-button" @click="clickHandler">
+        <div>
+          <el-icon><plus /></el-icon>
+        </div>
+        <p>新增页面</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, toRaw } from 'vue';
+import { Plus } from '@element-plus/icons';
+
+import { Services } from '@editor/type';
+import { generatePageNameByApp } from '@editor/utils';
+
+export default defineComponent({
+  components: { Plus },
+
+  setup() {
+    const services = inject<Services>('services');
+
+    return {
+      clickHandler() {
+        const { editorService } = services || {};
+
+        if (!editorService) return;
+
+        editorService.add({
+          type: 'page',
+          name: generatePageNameByApp(toRaw(editorService.get('root'))),
+        });
+      },
+    };
+  },
+});
+</script>
--- a/packages/editor/src/layouts/CodeEditor.vue
+++ b/packages/editor/src/layouts/CodeEditor.vue
@ -0,0 +1,188 @@
+<template>
+  <div ref="codeEditor" class="magic-code-editor"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+import serialize from 'serialize-javascript';
+
+import { asyncLoadJs } from '@tmagic/utils';
+
+const initEditor = () => {
+  if ((globalThis as any).monaco) {
+    Promise.resolve((globalThis as any).monaco);
+  }
+
+  return asyncLoadJs(`https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js`).then(() => {
+    (globalThis as any).require.config({
+      paths: { vs: `https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs` },
+    });
+    return new Promise((resolve) => {
+      (globalThis as any).require(['vs/editor/editor.main'], () => {
+        resolve((globalThis as any).monaco);
+      });
+    });
+  });
+};
+
+const toString = (v: any, language: string): string => {
+  let value = '';
+  if (typeof v !== 'string') {
+    value = serialize(v, {
+      space: 2,
+      unsafe: true,
+    }).replace(/"(\w+)":\s/g, '$1: ');
+  } else {
+    value = v;
+  }
+  if (language === 'javascript' && value.startsWith('{') && value.endsWith('}')) {
+    value = `(${value})`;
+  }
+  return value;
+};
+
+export default defineComponent({
+  name: 'magic-code-editor',
+
+  props: {
+    initValues: {
+      type: [String, Object],
+    },
+
+    modifiedValues: {
+      type: [String, Object],
+    },
+
+    type: {
+      type: [String],
+      default: () => '',
+    },
+
+    language: {
+      type: [String],
+      default: () => 'javascript',
+    },
+  },
+
+  emits: ['inited', 'save'],
+
+  setup(props, { emit }) {
+    let vsEditor: any = null;
+    const values = ref('');
+    const loading = ref(false);
+    const codeEditor = ref<HTMLDivElement>();
+
+    const setEditorValue = (v: any, m: any) => {
+      values.value = toString(v, props.language);
+
+      if (props.type === 'diff') {
+        const originalModel = (globalThis as any).monaco.editor.createModel(values.value, 'text/javascript');
+        const modifiedModel = (globalThis as any).monaco.editor.createModel(
+          toString(m, props.language),
+          'text/javascript',
+        );
+
+        return vsEditor.setModel({
+          original: originalModel,
+          modified: modifiedModel,
+        });
+      }
+
+      return vsEditor.setValue?.(values.value);
+    };
+
+    const resizeHandler = () => {
+      vsEditor?.layout();
+    };
+
+    const getEditorValue = () => vsEditor.getValue?.() || '';
+
+    const init = async () => {
+      if (!codeEditor.value) return;
+
+      vsEditor = (globalThis as any).monaco.editor[props.type === 'diff' ? 'createDiffEditor' : 'create'](
+        codeEditor.value,
+        {
+          value: values.value,
+          language: props.language,
+          tabSize: 2,
+          theme: 'vs-dark',
+          fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
+          fontSize: 15,
+          formatOnPaste: true,
+        },
+      );
+
+      setEditorValue(props.initValues, props.modifiedValues);
+
+      loading.value = false;
+
+      emit('inited', vsEditor);
+
+      codeEditor.value.addEventListener('keydown', (e) => {
+        if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
+          e.preventDefault();
+          emit('save', getEditorValue());
+        }
+      });
+
+      if (props.type !== 'diff') {
+        vsEditor.onDidBlurEditorWidget(() => {
+          emit('save', getEditorValue());
+        });
+      }
+
+      globalThis.addEventListener('resize', resizeHandler);
+    };
+
+    watch(
+      () => props.initValues,
+      (v, preV) => {
+        if (vsEditor && v !== preV) {
+          setEditorValue(props.initValues, props.modifiedValues);
+        }
+      },
+      {
+        deep: true,
+        immediate: true,
+      },
+    );
+
+    onMounted(async () => {
+      loading.value = true;
+
+      await initEditor();
+      if (!(globalThis as any).monaco) {
+        const interval = setInterval(() => {
+          if ((globalThis as any).monaco) {
+            clearInterval(interval);
+            init();
+          }
+        }, 300);
+      } else {
+        init();
+      }
+    });
+
+    onUnmounted(() => {
+      globalThis.removeEventListener('resize', resizeHandler);
+    });
+
+    return {
+      values,
+      loading,
+      codeEditor,
+
+      getEditor() {
+        return vsEditor;
+      },
+
+      setEditorValue,
+
+      focus() {
+        vsEditor.focus();
+      },
+    };
+  },
+});
+</script>
--- a/packages/editor/src/layouts/Framework.vue
+++ b/packages/editor/src/layouts/Framework.vue
@ -0,0 +1,73 @@
+<template>
+  <div class="m-editor">
+    <slot name="nav" class="m-editor-nav-menu"></slot>
+
+    <magic-code-editor v-if="showSrc" class="m-editor-content" :init-values="root" @save="saveCode"></magic-code-editor>
+
+    <div class="m-editor-content" v-else>
+      <div class="m-editor-framework-left" :style="`width: ${columnWidth?.left}px`">
+        <slot name="sidebar"></slot>
+      </div>
+
+      <resizer type="left"></resizer>
+
+      <template v-if="pageLength > 0">
+        <div class="m-editor-framework-center" :style="`width: ${columnWidth?.center}px`">
+          <slot name="workspace"></slot>
+        </div>
+
+        <resizer type="right"></resizer>
+
+        <div class="m-editor-framework-right" :style="`width: ${columnWidth?.right}px`">
+          <el-scrollbar>
+            <slot name="propsPanel"></slot>
+          </el-scrollbar>
+        </div>
+      </template>
+
+      <slot v-else name="empty">
+        <add-page-box></add-page-box>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject } from 'vue';
+
+import type { MApp } from '@tmagic/schema';
+
+import { GetColumnWidth, Services } from '@editor/type';
+
+import AddPageBox from './AddPageBox.vue';
+import Resizer from './Resizer.vue';
+
+export default defineComponent({
+  components: {
+    AddPageBox,
+    Resizer,
+  },
+
+  setup() {
+    const services = inject<Services>('services');
+
+    const root = computed(() => services?.editorService.get<MApp>('root'));
+
+    return {
+      root,
+      pageLength: computed(() => root.value?.items?.length || 0),
+      showSrc: computed(() => services?.uiService.get<boolean>('showSrc')),
+      columnWidth: computed(() => services?.uiService.get<GetColumnWidth>('columnWidth')),
+
+      saveCode(value: string) {
+        try {
+          // eslint-disable-next-line no-eval
+          services?.editorService.set('root', eval(value));
+        } catch (e: any) {
+          console.error(e);
+        }
+      },
+    };
+  },
+});
+</script>
--- a/packages/editor/src/layouts/NavMenu.vue
+++ b/packages/editor/src/layouts/NavMenu.vue
@ -0,0 +1,37 @@
+<template>
+  <div class="m-editor-nav-menu" :style="{ height: `${height}px` }">
+    <div v-for="key in keys" :class="`menu-${key}`" :key="key">
+      <tool-button :data="item" v-for="(item, index) in data[key]" :key="index"></tool-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+
+import ToolButton from '@editor/components/ToolButton.vue';
+import { MenuBarData } from '@editor/type';
+
+export default defineComponent({
+  name: 'nav-menu',
+
+  components: { ToolButton },
+
+  props: {
+    data: {
+      type: Object as PropType<MenuBarData>,
+      default: () => ({}),
+    },
+
+    height: {
+      type: Number,
+    },
+  },
+
+  setup(props) {
+    return {
+      keys: computed(() => Object.keys(props.data) as Array<keyof MenuBarData>),
+    };
+  },
+});
+</script>
--- a/packages/editor/src/layouts/PropsPanel.vue
+++ b/packages/editor/src/layouts/PropsPanel.vue
@ -0,0 +1,81 @@
+<template>
+  <m-form
+    class="m-editor-props-panel"
+    ref="configForm"
+    size="small"
+    :init-values="values"
+    :config="curFormConfig"
+    @change="submit"
+  ></m-form>
+</template>
+
+<script lang="ts">
+import { defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
+import { ElMessage } from 'element-plus';
+
+import type { FormValue, MForm } from '@tmagic/form';
+import type { MNode } from '@tmagic/schema';
+
+import type { Services } from '@editor/type';
+
+export default defineComponent({
+  name: 'm-editor-props-panel',
+
+  emits: ['mounted'],
+
+  setup(props, { emit }) {
+    const internalInstance = getCurrentInstance();
+    const values = ref<FormValue>({});
+    const configForm = ref<InstanceType<typeof MForm>>();
+    // ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
+    const curFormConfig = ref<any>([]);
+    const services = inject<Services>('services');
+
+    const init = async () => {
+      const node = services?.editorService.get<MNode | null>('node');
+
+      if (!node) {
+        curFormConfig.value = [];
+        return;
+      }
+
+      if (node.devconfig && node.style && !isNaN(+node.style.height) && !isNaN(+node.style.width)) {
+        node.devconfig.ratio = node.style.height / node.style.width || 1;
+      }
+
+      values.value = node;
+      const type = node.type || (node.items ? 'container' : 'text');
+      curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
+    };
+
+    watchEffect(init);
+    services?.propsService.on('props-configs-change', init);
+
+    onMounted(() => {
+      emit('mounted', internalInstance);
+    });
+
+    return {
+      values,
+      configForm,
+      curFormConfig,
+
+      async submit() {
+        try {
+          const values = await configForm.value?.submitForm();
+          services?.editorService.update(values);
+        } catch (e: any) {
+          console.error(e);
+          ElMessage.closeAll();
+          ElMessage.error({
+            duration: 10000,
+            showClose: true,
+            message: e.message,
+            dangerouslyUseHTMLString: true,
+          });
+        }
+      },
+    };
+  },
+});
+</script>
--- a/packages/editor/src/layouts/Resizer.vue
+++ b/packages/editor/src/layouts/Resizer.vue
@ -0,0 +1,61 @@
+<template>
+  <span ref="target" class="m-editor-resizer">
+    <slot></slot>
+  </span>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, onMounted, onUnmounted, ref, toRaw } from 'vue';
+import Gesto from 'gesto';
+
+import { Services } from '@editor/type';
+
+export default defineComponent({
+  name: 'm-editor-resize',
+
+  props: {
+    type: {
+      type: String,
+    },
+  },
+
+  setup(props) {
+    const services = inject<Services>('services');
+
+    const target = ref<HTMLSpanElement>();
+
+    let getso: Gesto;
+
+    onMounted(() => {
+      if (!target.value) return;
+      getso = new Gesto(target.value, {
+        container: window,
+        pinchOutside: true,
+      }).on('drag', (e) => {
+        if (!target.value || !services) return;
+
+        let { left, right } = {
+          ...toRaw(services.uiService.get('columnWidth')),
+        };
+        if (props.type === 'left') {
+          left += e.deltaX;
+        } else if (props.type === 'right') {
+          right -= e.deltaX;
+        }
+        services.uiService.set('columnWidth', {
+          left,
+          right,
+        });
+      });
+    });
+
+    onUnmounted(() => {
+      getso?.unset();
+    });
+
+    return {
+      target,
+    };
+  },
+});
+</script>
--- a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
@ -0,0 +1,69 @@
+<template>
+  <el-scrollbar>
+    <el-collapse class="ui-component-panel" :model-value="collapseValue">
+      <el-input
+        prefix-icon="el-icon-search"
+        placeholder="输入关键字进行过滤"
+        class="search-input"
+        size="small"
+        clearable
+        v-model="searchText"
+      />
+      <template v-for="(group, index) in list">
+        <el-collapse-item v-if="group.items && group.items.length" :key="index" :name="index">
+          <template #title><i class="el-icon-s-grid"></i>{{ group.title }}</template>
+          <div class="component-item" v-for="item in group.items" :key="item.type" @click="appendComponent(item)">
+            <m-icon :icon="item.icon"></m-icon>
+
+            <el-tooltip effect="dark" placement="bottom" :content="item.text">
+              <span>{{ item.text }}</span>
+            </el-tooltip>
+          </div>
+        </el-collapse-item>
+      </template>
+    </el-collapse>
+  </el-scrollbar>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, ref } from 'vue';
+
+import MIcon from '@editor/components/Icon.vue';
+import type { ComponentGroup, ComponentItem, Services } from '@editor/type';
+
+export default defineComponent({
+  name: 'ui-component-panel',
+
+  components: { MIcon },
+
+  setup() {
+    const searchText = ref('');
+    const services = inject<Services>('services');
+    const list = computed(() =>
+      services?.componentListService.getList().map((group: ComponentGroup) => ({
+        ...group,
+        items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
+      })),
+    );
+    const collapseValue = computed(() =>
+      Array(list.value?.length)
+        .fill(1)
+        .map((x, i) => i),
+    );
+
+    return {
+      searchText,
+      collapseValue,
+      list,
+
+      appendComponent({ text, type, ...config }: ComponentItem): void {
+        services?.editorService.add({
+          name: text,
+          type,
+          ...config,
+        });
+      },
+    };
+  },
+});
+</script>
--- a/packages/editor/src/layouts/sidebar/LayerMenu.vue
+++ b/packages/editor/src/layouts/sidebar/LayerMenu.vue
@ -0,0 +1,117 @@
+<template>
+  <div v-if="node" class="magic-editor-content-menu">
+    <div
+      v-if="node.items"
+      class="magic-editor-content-menu-item"
+      @mouseenter="setSubVisiable(true)"
+      @mouseleave="setSubVisiable(false)"
+    >
+      新增
+    </div>
+    <div v-if="node.type !== 'app'" class="magic-editor-content-menu-item" @click="() => copy(node)">复制</div>
+    <div
+      v-if="node.type !== 'app' && node.type !== 'page'"
+      class="magic-editor-content-menu-item"
+      @click="() => remove()"
+    >
+      删除
+    </div>
+    <div class="subMenu" v-show="subVisible" @mouseenter="setSubVisiable(true)" @mouseleave="setSubVisiable(false)">
+      <el-scrollbar>
+        <template v-if="node.type === 'tabs'">
+          <div
+            class="magic-editor-content-menu-item"
+            @click="
+              () =>
+                append({
+                  type: 'tab-pane',
+                })
+            "
+          >
+            标签
+          </div>
+        </template>
+
+        <template v-else-if="node.type === 'app'">
+          <div
+            class="magic-editor-content-menu-item"
+            v-for="item in menu.app"
+            :key="item.type"
+            @click="() => append(item)"
+          >
+            {{ item.text }}
+          </div>
+        </template>
+
+        <template v-else-if="node.items">
+          <div v-for="list in menu.component" :key="list.title">
+            <template v-for="item in list.items">
+              <div class="magic-editor-content-menu-item" v-if="item" :key="item.type" @click="() => append(item)">
+                {{ item.text }}
+              </div>
+            </template>
+            <div class="separation"></div>
+          </div>
+        </template>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, PropType, ref } from 'vue';
+
+import type { ComponentGroup, Services } from '@editor/type';
+
+export default defineComponent({
+  name: 'magic-editor-content-menu',
+
+  props: {
+    componentGroupList: {
+      type: Array as PropType<ComponentGroup[]>,
+      default: () => [],
+    },
+  },
+
+  setup(props) {
+    const services = inject<Services>('services');
+    const subVisible = ref(false);
+    const node = computed(() => services?.editorService.get('node'));
+
+    return {
+      subVisible,
+
+      node,
+
+      menu: computed(() => ({
+        app: [
+          {
+            type: 'page',
+            text: '页面',
+          },
+        ],
+        component: props.componentGroupList,
+      })),
+
+      append(config: any) {
+        services?.editorService.add({
+          name: config.text,
+          type: config.type,
+        });
+      },
+
+      remove() {
+        node.value && services?.editorService.remove(node.value);
+      },
+
+      copy(node: any) {
+        services?.editorService.copy(node);
+      },
+
+      setSubVisiable(v: any) {
+        subVisible.value = v;
+      },
+    };
+  },
+});
+</script>
--- a/packages/editor/src/layouts/sidebar/LayerPanel.vue
+++ b/packages/editor/src/layouts/sidebar/LayerPanel.vue
@ -0,0 +1,209 @@
+<template>
+  <el-scrollbar class="magic-editor-layer-panel">
+    <el-input
+      class="filterInput"
+      size="small"
+      placeholder="输入关键字进行过滤"
+      clearable
+      v-model="filterText"
+      @change="filterTextChangeHandler"
+    ></el-input>
+
+    <el-tree
+      v-if="values.length"
+      ref="tree"
+      node-key="id"
+      draggable
+      :load="loadItems"
+      :data="values"
+      :expand-on-click-node="false"
+      :highlight-current="true"
+      :props="{
+        children: 'items',
+      }"
+      :filter-node-method="filterNode"
+      :allow-drop="allowDrop"
+      @node-click="clickHandler"
+      @node-contextmenu="contextmenu"
+      @node-drag-end="handleDragEnd"
+      empty-text="页面空荡荡的"
+    >
+      <template #default="{ node, data }">
+        <slot name="layer-node-content" :node="node" :data="data">
+          <span>
+            {{ `${data.name} (${data.id})` }}
+          </span>
+        </slot>
+      </template>
+    </el-tree>
+
+    <teleport to="body">
+      <layer-menu :style="menuStyle"></layer-menu>
+    </teleport>
+  </el-scrollbar>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, onMounted, Ref, ref, watchEffect } from 'vue';
+import type { ElTree } from 'element-plus';
+
+import type { MNode, MPage } from '@tmagic/schema';
+
+import type { EditorService } from '@editor/services/editor';
+import type { Services } from '@editor/type';
+
+import LayerMenu from './LayerMenu.vue';
+
+const select = (data: MNode, editorService?: EditorService) => {
+  if (!data.id) {
+    throw new Error('没有id');
+  }
+
+  editorService?.select(data);
+};
+
+const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorService?: EditorService) => ({
+  allowDrop: (draggingNode: any, dropNode: any, type: string): boolean => {
+    const { data } = dropNode || {};
+    const { data: ingData } = draggingNode;
+
+    const { type: ingType } = ingData;
+
+    if (ingType !== 'page' && data.type === 'page') return false;
+    if (ingType === 'page' && data.type !== 'page') return false;
+    if (!data || !data.type) return false;
+    if (['prev', 'next'].includes(type)) return true;
+    if (data.items || data.type === 'container') return true;
+
+    return false;
+  },
+
+  handleDragEnd() {
+    if (!tree.value) return;
+    const { data } = tree.value;
+    const [page] = data as [MPage];
+    editorService?.update(page);
+  },
+});
+
+const useStatus = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorService?: EditorService) => {
+  const page = computed(() => editorService?.get('page'));
+
+  watchEffect(() => {
+    if (!tree.value) return;
+
+    const node = editorService?.get('node');
+    node && tree.value.setCurrentKey(node.id, true);
+
+    const parent = editorService?.get('parent');
+    if (!parent?.id) return;
+
+    const treeNode = tree.value.getNode(parent.id);
+    treeNode?.updateChildren();
+  });
+
+  return {
+    values: computed(() => (page.value ? [page.value] : [])),
+
+    loadItems: (node: any, resolve: Function) => {
+      if (Array.isArray(node.data)) {
+        return resolve(node.data);
+      }
+      if (Array.isArray(node.data?.items)) {
+        return resolve(node.data?.items);
+      }
+      resolve([]);
+    },
+  };
+};
+
+const useFilter = (tree: Ref<InstanceType<typeof ElTree> | undefined>) => ({
+  filterText: ref(''),
+
+  filterNode: (value: string, data: MNode): boolean => {
+    if (!value) {
+      return true;
+    }
+    let name = '';
+    if (data.name) {
+      name = data.name;
+    } else if (data.type) {
+      name = data.type;
+    } else if (data.items) {
+      name = 'container';
+    }
+    return name.indexOf(value) !== -1;
+  },
+
+  filterTextChangeHandler(val: string) {
+    tree.value?.filter(val);
+  },
+});
+
+const useContentMenu = (editorService?: EditorService) => {
+  const menuStyle = ref({
+    position: 'absolute',
+    left: '0',
+    top: '0',
+    display: 'none',
+  });
+
+  onMounted(() => {
+    document.addEventListener(
+      'click',
+      () => {
+        menuStyle.value.display = 'none';
+      },
+      true,
+    );
+  });
+
+  return {
+    menuStyle,
+
+    contextmenu(event: MouseEvent, data: MNode) {
+      const bodyHeight = globalThis.document.body.clientHeight;
+
+      const left = `${event.clientX + 20}px`;
+      let top = `${event.clientY - 10}px`;
+
+      if (event.clientY + 300 > bodyHeight) {
+        top = `${bodyHeight - 300}px`;
+      }
+
+      menuStyle.value.left = left;
+      menuStyle.value.top = top;
+      menuStyle.value.display = '';
+
+      select(data, editorService);
+    },
+  };
+};
+
+export default defineComponent({
+  name: 'magic-editor-layer-panel',
+
+  components: { LayerMenu },
+
+  setup() {
+    const services = inject<Services>('services');
+    const tree = ref<InstanceType<typeof ElTree>>();
+    const editorService = services?.editorService;
+    return {
+      tree,
+      ...useDrop(tree, editorService),
+      ...useStatus(tree, editorService),
+      ...useFilter(tree),
+      ...useContentMenu(editorService),
+
+      clickHandler(data: MNode): void {
+        if (services?.uiService.get<boolean>('uiSelectMode')) {
+          document.dispatchEvent(new CustomEvent('ui-select', { detail: data }));
+          return;
+        }
+        select(data, editorService);
+      },
+    };
+  },
+});
+</script>
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/packages/editor/src/layouts/sidebar/Sidebar.vue
@ -0,0 +1,86 @@
+<template>
+  <el-tabs v-if="data.type === 'tabs'" class="m-editor-sidebar" v-model="activeTabName" type="card" tab-position="left">
+    <el-tab-pane v-for="item in items" :key="item.text" :name="item.text">
+      <template #label>
+        <span>
+          <m-icon v-if="item.icon" :icon="item.icon"></m-icon>
+          <div v-if="item.text" class="magic-editor-tab-panel-title">{{ item.text }}</div>
+        </span>
+      </template>
+
+      <component :is="item.component" v-bind="item.props || {}" v-on="item.listeners || {}">
+        <template #layer-node-content="{ data, node }" v-if="item.slots?.layerNodeContent">
+          <component :is="item.slots.layerNodeContent" :data="data" :node="node" />
+        </template>
+      </component>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, watch } from 'vue';
+import { Coin, Files } from '@element-plus/icons';
+
+import MIcon from '@editor/components/Icon.vue';
+import { SideBarData, SideComponent } from '@editor/type';
+
+import ComponentListPanel from './ComponentListPanel.vue';
+import LayerPanel from './LayerPanel.vue';
+
+export default defineComponent({
+  name: 'm-sidebar',
+
+  components: { MIcon },
+
+  props: {
+    data: {
+      type: Object as PropType<SideBarData>,
+      default: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer'] }),
+    },
+  },
+
+  setup(props) {
+    const activeTabName = ref(props.data?.status);
+
+    watch(
+      () => props.data?.status,
+      (status) => {
+        activeTabName.value = status || '0';
+      },
+    );
+
+    return {
+      activeTabName,
+
+      items: computed<SideComponent[] | Record<string, any>[]>(() =>
+        props.data?.items.map((item) => {
+          if (typeof item !== 'string') {
+            return item;
+          }
+
+          switch (item) {
+            case 'component-list':
+              return {
+                type: 'component',
+                icon: Coin,
+                text: '组件',
+                component: ComponentListPanel,
+                slots: {},
+              };
+            case 'layer':
+              return {
+                type: 'component',
+                icon: Files,
+                text: '已选组件',
+                component: LayerPanel,
+                slots: {},
+              };
+            default:
+              return {};
+          }
+        }),
+      ),
+    };
+  },
+});
+</script>
--- a/packages/editor/src/layouts/workspace/PageBar.vue
+++ b/packages/editor/src/layouts/workspace/PageBar.vue
@ -0,0 +1,83 @@
+<template>
+  <div class="m-editor-page-bar">
+    <div class="m-editor-page-bar-item" @click="addPage">
+      <el-icon class="m-editor-page-bar-menu-add-icon"><plus></plus></el-icon>
+    </div>
+    <template v-if="root">
+      <div
+        v-for="item in root.items"
+        :key="item.key"
+        class="m-editor-page-bar-item"
+        :class="{ active: page?.id === item.id }"
+        @click="switchPage(item)"
+      >
+        <slot name="page-bar-title" :page="item">
+          <span>{{ item.name }}</span>
+        </slot>
+
+        <el-popover placement="top" :width="160" trigger="hover">
+          <div>
+            <slot name="page-bar-popover" :page="item">
+              <div class="magic-editor-content-menu-item" @click="() => copy(item)">复制</div>
+              <div class="magic-editor-content-menu-item" @click="() => remove(item)">删除</div>
+            </slot>
+          </div>
+          <template #reference>
+            <el-icon class="m-editor-page-bar-menu-icon">
+              <caret-bottom></caret-bottom>
+            </el-icon>
+          </template>
+        </el-popover>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, toRaw } from 'vue';
+import { CaretBottom, Plus } from '@element-plus/icons';
+
+import type { MPage } from '@tmagic/schema';
+
+import type { Services } from '@editor/type';
+import { generatePageNameByApp } from '@editor/utils/editor';
+
+export default defineComponent({
+  components: { CaretBottom, Plus },
+
+  setup() {
+    const services = inject<Services>('services');
+    const editorService = services?.editorService;
+
+    return {
+      root: computed(() => editorService?.get('root')),
+      page: computed(() => editorService?.get('page')),
+
+      switchPage(page: MPage) {
+        editorService?.select(page);
+      },
+
+      addPage() {
+        if (!editorService) return;
+        const pageConfig = {
+          type: 'page',
+          name: generatePageNameByApp(toRaw(editorService.get('root'))),
+        };
+        editorService.add(pageConfig);
+      },
+
+      copy(node: MPage) {
+        node && editorService?.copy(node);
+        editorService?.paste({
+          left: 0,
+          top: 0,
+        });
+      },
+
+      remove(node: MPage) {
+        editorService?.remove(node);
+      },
+    };
+  },
+});
+</script>
--- a/packages/editor/src/layouts/workspace/Stage.vue
+++ b/packages/editor/src/layouts/workspace/Stage.vue
@ -0,0 +1,221 @@
+<template>
+  <div class="m-editor-stage">
+    <div
+      class="m-editor-stage-container"
+      ref="stageContainer"
+      :style="stageStyle"
+      @contextmenu="contextmenuHandler"
+    ></div>
+    <teleport to="body">
+      <viewer-menu ref="menu" :style="menuStyle"></viewer-menu>
+    </teleport>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  inject,
+  onMounted,
+  onUnmounted,
+  PropType,
+  ref,
+  toRaw,
+  watch,
+  watchEffect,
+} from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import type { MApp, MNode, MPage } from '@tmagic/schema';
+import type { MoveableOptions, Runtime, SortEventData, UpdateEventData } from '@tmagic/stage';
+import StageCore from '@tmagic/stage';
+
+import type { Services } from '@editor/type';
+
+import ViewerMenu from './ViewerMenu.vue';
+
+const useMenu = () => {
+  const menu = ref<InstanceType<typeof ViewerMenu>>();
+  const menuStyle = ref({
+    display: 'none',
+    left: '0',
+    top: '0',
+  });
+
+  onMounted(() => {
+    document.addEventListener(
+      'click',
+      () => {
+        menuStyle.value.display = 'none';
+      },
+      true,
+    );
+  });
+
+  return {
+    menu,
+    menuStyle,
+
+    contextmenuHandler(e: MouseEvent) {
+      e.preventDefault();
+
+      const menuHeight = menu.value?.$el.clientHeight;
+      let top = e.clientY;
+      if (menuHeight + e.clientY > document.body.clientHeight) {
+        top = document.body.clientHeight - menuHeight;
+      }
+      menuStyle.value = {
+        display: 'block',
+        top: `${top}px`,
+        left: `${e.clientX}px`,
+      };
+    },
+  };
+};
+
+export default defineComponent({
+  name: 'magic-stage',
+
+  components: {
+    ViewerMenu,
+  },
+
+  props: {
+    render: {
+      type: Function as PropType<() => HTMLDivElement>,
+    },
+
+    runtimeUrl: String,
+
+    root: {
+      type: Object as PropType<MApp>,
+    },
+
+    page: {
+      type: Object as PropType<MPage>,
+    },
+
+    node: {
+      type: Object as PropType<MNode>,
+    },
+
+    uiSelectMode: {
+      type: Boolean,
+    },
+
+    zoom: {
+      type: Number,
+    },
+
+    canSelect: {
+      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
+      default: (el: HTMLElement) => Boolean(el.id),
+    },
+
+    moveableOptions: {
+      type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
+      default: () => (core?: StageCore) => ({
+        container: core?.renderer?.contentWindow?.document.getElementById('app'),
+      }),
+    },
+  },
+
+  emits: ['select', 'update', 'sort'],
+
+  setup(props, { emit }) {
+    const services = inject<Services>('services');
+    const stageContainer = ref<HTMLDivElement>();
+
+    const stageStyle = computed(() => ({
+      ...services?.uiService.get<Record<string, string | number>>('stageStyle'),
+      transform: `scale(${props.zoom}) translate3d(0, -50%, 0)`,
+    }));
+
+    let stage: StageCore | null = null;
+    let runtime: Runtime | null = null;
+
+    watchEffect(() => {
+      if (stage) return;
+
+      if (!stageContainer.value) return;
+      if (!(props.runtimeUrl || props.render) || !props.root) return;
+
+      stage = new StageCore({
+        render: props.render,
+        runtimeUrl: props.runtimeUrl,
+        zoom: props.zoom,
+        canSelect: (el, stop) => {
+          const elCanSelect = props.canSelect(el);
+          // 在组件联动过程中不能再往下选择，返回并触发 ui-select
+          if (props.uiSelectMode && elCanSelect) {
+            document.dispatchEvent(new CustomEvent('ui-select', { detail: el }));
+            return stop();
+          }
+
+          return elCanSelect;
+        },
+        moveableOptions: props.moveableOptions,
+      });
+
+      services?.editorService.set('stage', stage);
+
+      stage?.mount(stageContainer.value);
+
+      stage?.on('select', (el: HTMLElement) => emit('select', el));
+
+      stage?.on('update', (ev: UpdateEventData) => {
+        emit('update', { id: ev.el.id, style: ev.style });
+      });
+
+      stage?.on('sort', (ev: SortEventData) => {
+        emit('sort', ev);
+      });
+
+      stage?.on('changeGuides', () => {
+        services?.uiService.set('showGuides', true);
+      });
+
+      if (!props.node?.id) return;
+      stage?.on('runtime-ready', (rt) => {
+        runtime = rt;
+        // toRaw返回的值是一个引用而非快照，需要cloneDeep
+        props.root && runtime?.updateRootConfig(cloneDeep(toRaw(props.root)));
+        props.page?.id && runtime?.updatePageId?.(props.page.id);
+        setTimeout(() => {
+          props.node && stage?.select(toRaw(props.node.id));
+        });
+      });
+    });
+
+    watch(
+      () => props.zoom,
+      (zoom) => {
+        if (!stage || !zoom) return;
+        stage?.setZoom(zoom);
+      },
+    );
+
+    watch(
+      () => props.root,
+      (root) => {
+        if (runtime && root) {
+          runtime.updateRootConfig(cloneDeep(toRaw(root)));
+        }
+      },
+    );
+
+    onUnmounted(() => {
+      stage?.destroy();
+      services?.editorService.set('stage', null);
+    });
+
+    return {
+      stageStyle,
+      ...useMenu(),
+
+      stageContainer,
+    };
+  },
+});
+</script>
--- a/packages/editor/src/layouts/workspace/ViewerMenu.vue
+++ b/packages/editor/src/layouts/workspace/ViewerMenu.vue
@ -0,0 +1,110 @@
+<template>
+  <div class="magic-editor-content-menu" ref="menu">
+    <div>
+      <div class="magic-editor-content-menu-item" @click="() => center()" v-if="canCenter">水平居中</div>
+      <div class="magic-editor-content-menu-item" @click="() => copy()">复制</div>
+      <div class="magic-editor-content-menu-item" @click="paste" v-if="canPaste">粘贴</div>
+      <template v-if="canMoveZPos">
+        <div class="separation"></div>
+        <div class="magic-editor-content-menu-item" @click="topItem">上移一层</div>
+        <div class="magic-editor-content-menu-item" @click="bottomItem">下移一层</div>
+        <div class="magic-editor-content-menu-item" @click="top">置顶</div>
+        <div class="magic-editor-content-menu-item" @click="bottom">置底</div>
+      </template>
+      <template v-if="canDelete">
+        <div class="separation"></div>
+        <div class="magic-editor-content-menu-item" @click="() => remove()">删除</div>
+      </template>
+      <div class="separation"></div>
+      <div class="magic-editor-content-menu-item" @click="clearGuides">清空参考线</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, onMounted, ref, watch } from 'vue';
+
+import type StageCore from '@tmagic/stage';
+
+import { LayerOffset, Layout, Services } from '@editor/type';
+import { COPY_STORAGE_KEY } from '@editor/utils/editor';
+
+export default defineComponent({
+  name: 'magic-editor-ui-viewer-menu',
+
+  setup() {
+    const services = inject<Services>('services');
+    const editorService = services?.editorService;
+    const menu = ref<HTMLDivElement>();
+    const canPaste = ref(false);
+    const canCenter = ref(false);
+
+    const node = computed(() => editorService?.get('node'));
+    const parent = computed(() => editorService?.get('parent'));
+
+    onMounted(() => {
+      const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
+      canPaste.value = data !== 'undefined' && !!data;
+    });
+
+    watch(
+      parent,
+      async () => {
+        if (!parent.value || !editorService) return (canCenter.value = false);
+        const layout = await editorService.getLayout(parent.value);
+        canCenter.value =
+          [Layout.ABSOLUTE, Layout.FIXED].includes(layout) && !['app', 'page', 'pop'].includes(`${node.value?.type}`);
+      },
+      { immediate: true },
+    );
+
+    return {
+      menu,
+      canPaste,
+
+      canDelete: computed(() => node.value?.type !== 'page'),
+      canMoveZPos: computed(() => node.value?.type !== 'page'),
+      canCenter,
+
+      center() {
+        node.value && editorService?.alignCenter(node.value);
+      },
+
+      copy() {
+        node.value && editorService?.copy(node.value);
+        canPaste.value = true;
+      },
+
+      paste() {
+        const top = menu.value?.offsetTop || 0;
+        const left = menu.value?.offsetLeft || 0;
+        editorService?.paste({ left, top });
+      },
+
+      remove() {
+        node.value && editorService?.remove(node.value);
+      },
+
+      top() {
+        editorService?.moveLayer(LayerOffset.TOP);
+      },
+
+      bottom() {
+        editorService?.moveLayer(LayerOffset.BOTTOM);
+      },
+
+      topItem() {
+        editorService?.moveLayer(1);
+      },
+
+      bottomItem() {
+        editorService?.moveLayer(-1);
+      },
+
+      clearGuides() {
+        editorService?.get<StageCore>('stage').clearGuides();
+      },
+    };
+  },
+});
+</script>
--- a/packages/editor/src/layouts/workspace/Workspace.vue
+++ b/packages/editor/src/layouts/workspace/Workspace.vue
@ -0,0 +1,98 @@
+<template>
+  <div class="m-editor-workspace">
+    <magic-stage
+      :key="page?.id"
+      :runtime-url="runtimeUrl"
+      :render="render"
+      :ui-select-mode="uiSelectMode"
+      :root="root"
+      :page="page"
+      :node="node"
+      :zoom="zoom"
+      :moveable-options="moveableOptions"
+      :can-select="canSelect"
+      @select="selectHandler"
+      @update="updateNodeHandler"
+      @sort="sortNodeHandler"
+    ></magic-stage>
+
+    <slot name="workspace-content"></slot>
+
+    <page-bar>
+      <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
+      <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
+    </page-bar>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, nextTick, PropType, watch } from 'vue';
+
+import type { MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { MoveableOptions, SortEventData } from '@tmagic/stage';
+import StageCore from '@tmagic/stage';
+
+import type { Services } from '@editor/type';
+
+import PageBar from './PageBar.vue';
+import MagicStage from './Stage.vue';
+
+export default defineComponent({
+  name: 'm-editor-workspace',
+
+  components: {
+    PageBar,
+    MagicStage,
+  },
+
+  props: {
+    runtimeUrl: String,
+
+    render: {
+      type: Function as PropType<() => HTMLDivElement>,
+    },
+
+    moveableOptions: {
+      type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
+    },
+
+    canSelect: {
+      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
+    },
+  },
+
+  setup() {
+    const services = inject<Services>('services');
+    const node = computed(() => services?.editorService.get<MNode>('node'));
+    const stage = computed(() => services?.editorService.get<StageCore>('stage'));
+
+    watch([() => node.value?.id, stage], ([id, stage]) => {
+      nextTick(() => {
+        // 等待相关dom变更完成后，再select，适用大多数场景
+        id && stage?.select(id);
+      });
+    });
+
+    return {
+      uiSelectMode: computed(() => services?.uiService.get<boolean>('uiSelectMode')),
+      root: computed(() => services?.editorService.get<MApp>('root')),
+      page: computed(() => services?.editorService.get<MPage>('page')),
+      zoom: computed(() => services?.uiService.get<number>('zoom')),
+
+      node,
+
+      selectHandler(el: HTMLElement) {
+        services?.editorService.select(el.id);
+      },
+
+      updateNodeHandler(node: MComponent | MContainer | MPage) {
+        services?.editorService.update(node);
+      },
+
+      sortNodeHandler(ev: SortEventData) {
+        services?.editorService.sort(ev.src, ev.dist);
+      },
+    };
+  },
+});
+</script>
--- a/packages/editor/src/services/BaseService.ts
+++ b/packages/editor/src/services/BaseService.ts
@ -0,0 +1,138 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { EventEmitter } from 'events';
+
+import { compose } from '@editor/utils/compose';
+
+const methodName = (prefix: string, name: string) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
+
+const isError = (error: any): boolean => Object.prototype.toString.call(error) === '[object Error]';
+
+/**
+ * 提供两种方式对Class进行扩展
+ * 方法1：
+ * 给Class中的每个方法都添加before after两个钩子
+ * 给Class添加一个usePlugin方法，use方法可以传入一个包含before或者after方法的对象
+ *
+ * 例如：
+ *   Class EditorService extends BaseService {
+ *     constructor() {
+ *       super(['add']);
+ *     }
+ *     add(value) { return result; }
+ *   };
+ *
+ *   const editorService = new EditorService();
+ *
+ *   editorService.usePlugin({
+ *     beforeAdd(value) { return [value] },
+ *     afterAdd(value, result) {},
+ *   });
+ *
+ *   editorService.add(); 最终会变成  () => {
+ *    editorService.beforeAdd();
+ *    editorService.add();
+ *    editorService.afterAdd();
+ *   }
+ *
+ * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after最后一个参数则是原方法的return值;
+ * 如需终止后续方法调用可以return new Error();
+ *
+ * 方法2：
+ * 给Class中的每个方法都添加中间件
+ * 给Class添加一个use方法，use方法可以传入一个包含源对象方法名作为key值的对象
+ *
+ * 例如：
+ *   Class EditorService extends BaseService {
+ *     constructor() {
+ *       super(['add']);
+ *     }
+ *     add(value) { return result; }
+ *   };
+ *
+ *  const editorService = new EditorService();
+ *  editorService.use({
+ *    add(value, next) { console.log(value); next() },
+ *  });
+ */
+export default class extends EventEmitter {
+  private pluginOptionsList: Record<string, Function[]> = {};
+  private middleware: Record<string, Function[]> = {};
+
+  constructor(methods: string[]) {
+    super();
+
+    methods.forEach((propertyName: string) => {
+      const scope = this as any;
+
+      const sourceMethod = scope[propertyName];
+
+      const beforeMethodName = methodName('before', propertyName);
+      const afterMethodName = methodName('after', propertyName);
+
+      this.pluginOptionsList[beforeMethodName] = [];
+      this.pluginOptionsList[afterMethodName] = [];
+      this.middleware[propertyName] = [];
+
+      const fn = compose(this.middleware[propertyName]);
+      Object.defineProperty(scope, propertyName, {
+        value: async (...args: any[]) => {
+          let beforeArgs = args;
+
+          for (const beforeMethod of this.pluginOptionsList[beforeMethodName]) {
+            let beforeReturnValue = (await beforeMethod(...beforeArgs)) || [];
+
+            if (isError(beforeReturnValue)) throw beforeReturnValue;
+
+            if (!Array.isArray(beforeReturnValue)) {
+              beforeReturnValue = [beforeReturnValue];
+            }
+
+            beforeArgs = beforeArgs.map((v: any, index: number) => {
+              if (typeof beforeReturnValue[index] === 'undefined') return v;
+              return beforeReturnValue[index];
+            });
+          }
+
+          let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
+
+          for (const afterMethod of this.pluginOptionsList[afterMethodName]) {
+            returnValue = await afterMethod(...beforeArgs, returnValue);
+
+            if (isError(returnValue)) throw returnValue;
+          }
+
+          return returnValue;
+        },
+      });
+    });
+  }
+
+  public use(options: Record<string, Function>) {
+    Object.entries(options).forEach(([methodName, method]: [string, Function]) => {
+      if (typeof method === 'function') this.middleware[methodName].push(method);
+    });
+  }
+
+  public usePlugin(options: Record<string, Function>) {
+    Object.entries(options).forEach(([methodName, method]: [string, Function]) => {
+      if (typeof method === 'function') this.pluginOptionsList[methodName].push(method);
+    });
+  }
+}
--- a/packages/editor/src/services/componentList.ts
+++ b/packages/editor/src/services/componentList.ts
@ -0,0 +1,48 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { reactive } from 'vue';
+
+import type { ComponentGroup, ComponentGroupState } from '@editor/type';
+
+import BaseService from './BaseService';
+
+class ComponentList extends BaseService {
+  private state = reactive<ComponentGroupState>({
+    list: [],
+  });
+
+  constructor() {
+    super([]);
+  }
+
+  /**
+   * @param componentGroupList 组件列表配置
+   */
+  public setList(componentGroupList: ComponentGroup[]) {
+    this.state.list = componentGroupList;
+  }
+
+  public getList() {
+    return this.state.list;
+  }
+}
+
+export type ComponentListService = ComponentList;
+
+export default new ComponentList();
--- a/packages/editor/src/services/editor.ts
+++ b/packages/editor/src/services/editor.ts
@ -0,0 +1,521 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { reactive, toRaw } from 'vue';
+import { cloneDeep } from 'lodash-es';
+import serialize from 'serialize-javascript';
+
+import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
+import { getNodePath, isPop } from '@tmagic/utils';
+
+import historyService, { StepValue } from '@editor/services/history';
+import propsService from '@editor/services/props';
+import type { AddMNode, EditorNodeInfo, StoreState } from '@editor/type';
+import { LayerOffset, Layout } from '@editor/type';
+import {
+  change2Fixed,
+  COPY_STORAGE_KEY,
+  defaults,
+  Fixed2Other,
+  getNodeIndex,
+  initPosition,
+  isFixed,
+  setLayout,
+  setNewItemId,
+} from '@editor/utils/editor';
+import { log } from '@editor/utils/logger';
+
+import BaseService from './BaseService';
+
+class Editor extends BaseService {
+  private isHistoryStateChange = false;
+
+  private state = reactive<StoreState>({
+    root: null,
+    page: null,
+    parent: null,
+    node: null,
+    stage: null,
+    modifiedNodeIds: new Map(),
+  });
+
+  constructor() {
+    super([
+      'getLayout',
+      'select',
+      'add',
+      'remove',
+      'update',
+      'sort',
+      'copy',
+      'paste',
+      'alignCenter',
+      'moveLayer',
+      'undo',
+      'redo',
+    ]);
+  }
+
+  /**
+   * 设置当前指点节点配置
+   * @param name 'root' | 'page' | 'parent' | 'node'
+   * @param value MNode
+   * @returns MNode
+   */
+  public set<T = MNode>(name: keyof StoreState, value: T) {
+    this.state[name] = value as any;
+    log('store set ', name, ' ', value);
+
+    if (name === 'root') {
+      this.emit('root-change', value);
+    }
+  }
+
+  /**
+   * 获取当前指点节点配置
+   * @param name  'root' | 'page' | 'parent' | 'node'
+   * @returns MNode
+   */
+  public get<T = MNode>(name: keyof StoreState): T {
+    return (this.state as any)[name];
+  }
+
+  /**
+   * 根据id获取组件、组件的父组件以及组件所属的页面节点
+   * @param {number | string} id 组件id
+   * @returns {EditorNodeInfo}
+   */
+  public getNodeInfo(id: Id): EditorNodeInfo {
+    const root = this.get<MApp | null>('root');
+    if (!root) return {};
+
+    if (id === root.id) {
+      return { node: root };
+    }
+
+    const path = getNodePath(id, root.items);
+
+    if (!path.length) return {};
+
+    path.unshift(root);
+    const info: EditorNodeInfo = {};
+
+    info.node = path[path.length - 1] as MComponent;
+    info.parent = path[path.length - 2] as MContainer;
+
+    path.forEach((item) => {
+      if (item.type === 'page') {
+        info.page = item as MPage;
+        return;
+      }
+    });
+
+    return info;
+  }
+
+  /**
+   * 根据ID获取指点节点配置
+   * @param id 组件ID
+   * @returns 组件节点配置
+   */
+  public getNodeById(id: Id): MNode | undefined {
+    const { node } = this.getNodeInfo(id);
+    return node;
+  }
+
+  /**
+   * 根据ID获取指点节点的父节点配置
+   * @param id 组件ID
+   * @returns 指点组件的父节点配置
+   */
+  public getParentById(id: Id): MContainer | undefined {
+    if (!this.get<MApp | null>('root')) return;
+    const { parent } = this.getNodeInfo(id);
+    return parent;
+  }
+
+  /**
+   * 只有容器拥有布局
+   */
+  public async getLayout(node: MNode): Promise<Layout> {
+    if (node.layout) {
+      return node.layout;
+    }
+
+    // 如果该节点没有设置position，则认为是流式布局，例如获取root的布局时
+    if (!node.style?.position) {
+      return Layout.RELATIVE;
+    }
+
+    return Layout.ABSOLUTE;
+  }
+
+  /**
+   * 选中指点节点（将指点节点设置成当前选中状态）
+   * @param config 指点节点配置或者ID
+   * @returns 当前选中的节点配置
+   */
+  public async select(config: MNode | Id): Promise<MNode> {
+    let id: Id;
+    if (typeof config === 'string' || typeof config === 'number') {
+      id = config;
+    } else {
+      id = config.id;
+    }
+    if (!id) {
+      throw new Error('没有ID，无法选中');
+    }
+
+    const { node, parent, page } = this.getNodeInfo(id);
+    if (!node) throw new Error('获取不到组件信息');
+
+    this.set('node', node);
+    this.set('page', page || null);
+    this.set('parent', parent || null);
+
+    if (page) {
+      historyService.changePage(toRaw(page));
+    } else {
+      historyService.empty();
+    }
+
+    return node;
+  }
+
+  /**
+   * 向指点容器添加组件节点
+   * @param addConfig 将要添加的组件节点配置
+   * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
+   * @returns 添加后的节点
+   */
+  public async add({ type, ...config }: AddMNode, parent?: MContainer | null): Promise<MNode> {
+    const curNode = this.get<MContainer>('node');
+
+    let parentNode: MNode | undefined;
+
+    if (type === 'page') {
+      parentNode = this.get<MApp>('root');
+      // 由于支持中间件扩展，在parent参数为undefined时，parent会变成next函数
+    } else if (parent && typeof parent !== 'function') {
+      parentNode = parent;
+    } else if (curNode.items) {
+      parentNode = curNode;
+    } else {
+      parentNode = this.getParentById(curNode.id);
+    }
+
+    if (!parentNode) throw new Error('未找到父元素');
+
+    const layout = await this.getLayout(parentNode);
+    const newNode = initPosition({ ...toRaw(await propsService.getPropsValue(type)), ...config }, layout);
+
+    if ((parentNode?.type === 'app' || curNode.type === 'app') && newNode.type !== 'page') {
+      throw new Error('app下不能添加组件');
+    }
+
+    parentNode?.items?.push(newNode);
+
+    await this.get<StageCore>('stage')?.add({ config: cloneDeep(newNode), root: cloneDeep(this.get('root')) });
+
+    await this.select(newNode);
+
+    this.addModifiedNodeId(newNode.id);
+    this.pushHistoryState();
+
+    return newNode;
+  }
+
+  /**
+   * 删除组件
+   * @param {Object} node
+   * @return {Object} 删除的组件配置
+   */
+  public async remove(node: MNode): Promise<MNode | void> {
+    if (!node?.id) return;
+
+    const root = this.get<MApp | null>('root');
+
+    if (!root) throw new Error('没有root');
+
+    const { parent, node: curNode } = this.getNodeInfo(node.id);
+
+    if (!parent || !curNode) throw new Error('找不要删除的节点');
+
+    const index = getNodeIndex(curNode, parent);
+
+    if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点');
+
+    parent.items?.splice(index, 1);
+    this.get<StageCore>('stage')?.remove({ id: node.id, root: this.get('root') });
+
+    if (node.type === 'page') {
+      await this.select(root.items[0] || root);
+    } else {
+      await this.select(parent);
+    }
+
+    this.addModifiedNodeId(parent.id);
+    this.pushHistoryState();
+
+    return node;
+  }
+
+  /**
+   * 更新节点
+   * @param config 新的节点配置，配置中需要有id信息
+   * @returns 更新后的节点配置
+   */
+  public async update(config: MNode): Promise<MNode> {
+    if (!config?.id) throw new Error('没有配置或者配置缺少id值');
+
+    const info = this.getNodeInfo(config.id);
+
+    if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
+
+    const node = cloneDeep(toRaw(info.node));
+    const { parent } = info;
+    if (!parent) throw new Error('获取不到父级节点');
+
+    let newConfig = await this.toggleFixedPosition(toRaw(config), node, this.get<MApp>('root'));
+
+    defaults(newConfig, node);
+
+    if (!newConfig.type) throw new Error('配置缺少type值');
+
+    if (newConfig.type === 'app') {
+      this.set('root', newConfig);
+      return newConfig;
+    }
+
+    const parentNodeItems = parent.items;
+    const index = getNodeIndex(newConfig, parent);
+
+    if (!parentNodeItems || typeof index === 'undefined' || index === -1) throw new Error('更新的节点未找到');
+
+    const newLayout = await this.getLayout(newConfig);
+    const layout = await this.getLayout(node);
+    if (newLayout !== layout) {
+      newConfig = setLayout(newConfig, newLayout);
+    }
+
+    parentNodeItems[index] = newConfig;
+
+    if (newConfig.id === this.get('node').id) {
+      this.set('node', newConfig);
+    }
+
+    this.get<StageCore>('stage')?.update({ config: cloneDeep(newConfig), root: this.get('root') });
+
+    if (newConfig.type === 'page') {
+      this.set('page', newConfig);
+    }
+
+    this.addModifiedNodeId(newConfig.id);
+    this.pushHistoryState();
+
+    return newConfig;
+  }
+
+  /**
+   * 将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
+   * @param id1 组件ID
+   * @param id2 组件ID
+   * @returns void
+   */
+  public async sort(id1: Id, id2: Id): Promise<void> {
+    const node = this.get<MNode>('node');
+    const parent = cloneDeep(toRaw(this.get<MContainer>('parent')));
+    const index2 = parent.items.findIndex((node: MNode) => `${node.id}` === `${id2}`);
+    // 在 id1 的兄弟组件中若无 id2 则直接 return
+    if (index2 < 0) return;
+    const index1 = parent.items.findIndex((node: MNode) => `${node.id}` === `${id1}`);
+
+    parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
+
+    await this.update(parent);
+    await this.select(node);
+
+    this.addModifiedNodeId(parent.id);
+    this.pushHistoryState();
+  }
+
+  /**
+   * 将组将节点配置转化成string，然后存储到localStorage中
+   * @param config 组件节点配置
+   * @returns 组件节点配置
+   */
+  public async copy(config: MNode): Promise<void> {
+    globalThis.localStorage.setItem(COPY_STORAGE_KEY, serialize(config));
+  }
+
+  /**
+   * 从localStorage中获取节点，然后添加到当前容器中
+   * @param position 如果设置，指定组件位置
+   * @returns 添加后的组件节点配置
+   */
+  public async paste(position: { left?: number; top?: number } = {}): Promise<MNode | void> {
+    const configStr = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
+    // eslint-disable-next-line prefer-const
+    let config: any = {};
+    if (!configStr) {
+      return;
+    }
+
+    try {
+      // eslint-disable-next-line no-eval
+      eval(`config = ${configStr}`);
+    } catch (e) {
+      console.error(e);
+      return;
+    }
+
+    setNewItemId(config, this.get('root'));
+    if (config.style) {
+      config.style = {
+        ...config.style,
+        ...position,
+      };
+    }
+
+    return await this.add(config);
+  }
+
+  /**
+   * 将指点节点设置居中
+   * @param config 组件节点配置
+   * @returns 当前组件节点配置
+   */
+  public async alignCenter(config: MNode): Promise<MNode | void> {
+    const parent = this.get<MContainer>('parent');
+    const node = this.get<MNode>('node');
+    const layout = await this.getLayout(parent);
+    if (layout === Layout.RELATIVE) {
+      return;
+    }
+
+    if (parent.style?.width && node.style?.width) {
+      node.style.left = (parent.style.width - node.style.width) / 2;
+    }
+
+    await this.update(node);
+    this.get<StageCore>('stage')?.update({ config: cloneDeep(toRaw(node)), root: this.get('root') });
+    this.addModifiedNodeId(config.id);
+    this.pushHistoryState();
+
+    return config;
+  }
+
+  /**
+   * 移动当前选中节点位置
+   * @param offset 偏移量
+   */
+  public async moveLayer(offset: number | LayerOffset): Promise<void> {
+    const parent = this.get<MContainer>('parent');
+    const node = this.get('node');
+    const brothers: MNode[] = parent?.items || [];
+    const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
+
+    if (offset === LayerOffset.BOTTOM) {
+      brothers.splice(brothers.length - 1, 0, brothers.splice(index, 1)[0]);
+    } else if (offset === LayerOffset.TOP) {
+      brothers.splice(0, 0, brothers.splice(index, 1)[0]);
+    } else {
+      brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
+    }
+
+    this.get<StageCore>('stage')?.update({ config: cloneDeep(toRaw(parent)), root: this.get('root') });
+  }
+
+  /**
+   * 撤销当前操作
+   * @returns 上一次数据
+   */
+  public async undo(): Promise<StepValue | null> {
+    const value = historyService.undo();
+    await this.changeHistoryState(value);
+    return value;
+  }
+
+  /**
+   * 恢复到下一步
+   * @returns 下一步数据
+   */
+  public async redo(): Promise<StepValue | null> {
+    const value = historyService.redo();
+    await this.changeHistoryState(value);
+    return value;
+  }
+
+  public destroy() {
+    this.removeAllListeners();
+    this.set('root', null);
+    this.set('node', null);
+    this.set('page', null);
+    this.set('parent', null);
+  }
+
+  public resetModifiedNodeId() {
+    this.get<Map<Id, Id>>('modifiedNodeIds').clear();
+  }
+
+  private addModifiedNodeId(id: Id) {
+    if (!this.isHistoryStateChange) {
+      this.get<Map<Id, Id>>('modifiedNodeIds').set(id, id);
+    }
+  }
+
+  private pushHistoryState() {
+    const curNode = cloneDeep(toRaw(this.get('node')));
+    if (!this.isHistoryStateChange) {
+      historyService.push({
+        data: cloneDeep(toRaw(this.get('page'))),
+        modifiedNodeIds: this.get<Map<Id, Id>>('modifiedNodeIds'),
+        nodeId: curNode.id,
+      });
+    }
+    this.isHistoryStateChange = false;
+  }
+
+  private async changeHistoryState(value: StepValue | null) {
+    if (!value) return;
+
+    this.isHistoryStateChange = true;
+    await this.update(value.data);
+    this.set('modifiedNodeIds', value.modifiedNodeIds);
+    setTimeout(() => value.nodeId && this.select(value.nodeId), 0);
+  }
+
+  private async toggleFixedPosition(dist: MNode, src: MNode, root: MApp) {
+    let newConfig = cloneDeep(dist);
+
+    if (!isPop(src) && newConfig.style?.position) {
+      if (isFixed(newConfig) && !isFixed(src)) {
+        newConfig = change2Fixed(newConfig, root);
+      } else if (!isFixed(newConfig) && isFixed(src)) {
+        newConfig = await Fixed2Other(newConfig, root, this.getLayout);
+      }
+    }
+
+    return newConfig;
+  }
+}
+
+export type EditorService = Editor;
+
+export default new Editor();
--- a/packages/editor/src/services/events.ts
+++ b/packages/editor/src/services/events.ts
@ -0,0 +1,82 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { reactive } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import { DEFAULT_EVENTS, DEFAULT_METHODS, EventOption } from '@tmagic/core';
+import { toLine } from '@tmagic/utils';
+
+import type { ComponentGroup } from '@editor/type';
+
+import BaseService from './BaseService';
+
+const eventMap: Record<string, EventOption[]> = reactive({});
+const methodMap: Record<string, EventOption[]> = reactive({});
+
+class Events extends BaseService {
+  constructor() {
+    super([]);
+  }
+
+  public init(componentGroupList: ComponentGroup[]) {
+    componentGroupList.forEach((group) => {
+      group.items.forEach((element) => {
+        const type = toLine(element.type);
+        if (!this.getEvent(type)) {
+          this.setEvent(type, DEFAULT_EVENTS);
+        }
+        if (!this.getMethod(type)) {
+          this.setMethod(type, DEFAULT_METHODS);
+        }
+      });
+    });
+  }
+
+  public setEvents(events: Record<string, EventOption[]>) {
+    Object.keys(events).forEach((type: string) => {
+      this.setEvent(toLine(type), events[type] || []);
+    });
+  }
+
+  public setEvent(type: string, events: EventOption[]) {
+    eventMap[type] = [...DEFAULT_EVENTS, ...events];
+  }
+
+  public getEvent(type: string): EventOption[] {
+    return cloneDeep(eventMap[type] || DEFAULT_EVENTS);
+  }
+
+  public setMethods(methods: Record<string, EventOption[]>) {
+    Object.keys(methods).forEach((type: string) => {
+      this.setMethod(toLine(type), methods[type] || []);
+    });
+  }
+
+  public setMethod(type: string, method: EventOption[]) {
+    methodMap[type] = [...DEFAULT_METHODS, ...method];
+  }
+
+  public getMethod(type: string) {
+    return cloneDeep(methodMap[type] || DEFAULT_METHODS);
+  }
+}
+
+export type EventsService = Events;
+
+export default new Events();
--- a/packages/editor/src/services/history.ts
+++ b/packages/editor/src/services/history.ts
@ -0,0 +1,124 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { reactive } from 'vue';
+
+import { Id, MPage } from '@tmagic/schema';
+
+import { UndoRedo } from '@editor/utils/undo-redo';
+
+import BaseService from './BaseService';
+
+export interface StepValue {
+  data: MPage;
+  modifiedNodeIds: Map<Id, Id>;
+  nodeId: Id;
+}
+
+export interface HistoryState {
+  pageId?: Id;
+  pageSteps: Record<Id, UndoRedo<StepValue>>;
+  canRedo: boolean;
+  canUndo: boolean;
+}
+
+class History extends BaseService {
+  public state = reactive<HistoryState>({
+    pageSteps: {},
+    pageId: undefined,
+    canRedo: false,
+    canUndo: false,
+  });
+
+  constructor() {
+    super([]);
+
+    this.on('change', this.setCanUndoRedo);
+  }
+
+  public changePage(page: MPage): void {
+    if (!page) return;
+
+    this.state.pageId = page.id;
+
+    if (!this.state.pageSteps[this.state.pageId]) {
+      const undoRedo = new UndoRedo<StepValue>();
+
+      undoRedo.pushElement({
+        data: page,
+        modifiedNodeIds: new Map(),
+        nodeId: page.id,
+      });
+
+      this.state.pageSteps[this.state.pageId] = undoRedo;
+    }
+
+    this.setCanUndoRedo();
+  }
+
+  public empty(): void {
+    this.state.pageId = undefined;
+    this.state.pageSteps = {};
+    this.state.canRedo = false;
+    this.state.canUndo = false;
+  }
+
+  public push(state: StepValue): StepValue | null {
+    const undoRedo = this.getUndoRedo();
+    if (!undoRedo) return null;
+    undoRedo.pushElement(state);
+    this.emit('change', state);
+    return state;
+  }
+
+  public undo(): StepValue | null {
+    const undoRedo = this.getUndoRedo();
+    if (!undoRedo) return null;
+    const state = undoRedo.undo();
+    this.emit('change', state);
+    return state;
+  }
+
+  public redo(): StepValue | null {
+    const undoRedo = this.getUndoRedo();
+    if (!undoRedo) return null;
+    const state = undoRedo.redo();
+    this.emit('change', state);
+    return state;
+  }
+
+  public destroy(): void {
+    this.empty();
+    this.removeAllListeners();
+  }
+
+  private getUndoRedo() {
+    if (!this.state.pageId) return null;
+    return this.state.pageSteps[this.state.pageId];
+  }
+
+  private setCanUndoRedo(): void {
+    const undoRedo = this.getUndoRedo();
+    this.state.canRedo = undoRedo?.canRedo() || false;
+    this.state.canUndo = undoRedo?.canUndo() || false;
+  }
+}
+
+export type HistoryService = History;
+
+export default new History();
--- a/packages/editor/src/services/props.ts
+++ b/packages/editor/src/services/props.ts
@ -0,0 +1,110 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { reactive } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import type { FormConfig } from '@tmagic/form';
+import type { MComponent, MNode } from '@tmagic/schema';
+import { toLine } from '@tmagic/utils';
+
+import type { PropsState } from '@editor/type';
+import { DEFAULT_CONFIG, fillConfig, getDefaultPropsValue } from '@editor/utils/props';
+
+import BaseService from './BaseService';
+
+class Props extends BaseService {
+  private state = reactive<PropsState>({
+    propsConfigMap: {},
+    propsValueMap: {},
+  });
+
+  constructor() {
+    super(['setPropsConfig', 'getPropsConfig', 'setPropsValue', 'getPropsValue']);
+  }
+
+  public setPropsConfigs(configs: Record<string, FormConfig>) {
+    Object.keys(configs).forEach((type: string) => {
+      this.setPropsConfig(toLine(type), configs[type]);
+    });
+    this.emit('props-configs-change');
+  }
+
+  /**
+   * 为指定类型组件设置组件属性表单配置
+   * @param type 组件类型
+   * @param config 组件属性表单配置
+   */
+  public setPropsConfig(type: string, config: FormConfig) {
+    this.state.propsConfigMap[type] = fillConfig(Array.isArray(config) ? config : [config]);
+  }
+
+  /**
+   * 获取指点类型的组件属性表单配置
+   * @param type 组件类型
+   * @returns 组件属性表单配置
+   */
+  public async getPropsConfig(type: string): Promise<FormConfig> {
+    if (type === 'area') {
+      return await this.getPropsConfig('button');
+    }
+
+    return cloneDeep(this.state.propsConfigMap[type] || DEFAULT_CONFIG);
+  }
+
+  public setPropsValues(values: Record<string, MNode>) {
+    Object.keys(values).forEach((type: string) => {
+      this.setPropsValue(toLine(type), values[type]);
+    });
+  }
+
+  /**
+   * 为指点类型组件设置组件初始值
+   * @param type 组件类型
+   * @param value 组件初始值
+   */
+  public setPropsValue(type: string, value: MNode) {
+    this.state.propsValueMap[type] = value;
+  }
+
+  /**
+   * 获取指定类型的组件初始值
+   * @param type 组件类型
+   * @returns 组件初始值
+   */
+  public async getPropsValue(type: string) {
+    if (type === 'area') {
+      const value = (await this.getPropsValue('button')) as MComponent;
+      value.className = 'action-area';
+      value.text = '';
+      if (value.style) {
+        value.style.backgroundColor = 'rgba(255, 255, 255, 0)';
+      }
+      return value;
+    }
+
+    return cloneDeep({
+      ...getDefaultPropsValue(type),
+      ...(this.state.propsValueMap[type] || {}),
+    });
+  }
+}
+
+export type PropsService = Props;
+
+export default new Props();
--- a/packages/editor/src/services/ui.ts
+++ b/packages/editor/src/services/ui.ts
@ -0,0 +1,101 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { reactive, toRaw } from 'vue';
+
+import type StageCore from '@tmagic/stage';
+
+import editorService from '@editor/services/editor';
+import { GetColumnWidth, SetColumnWidth, UiState } from '@editor/type';
+
+import BaseService from './BaseService';
+
+const state = reactive<UiState>({
+  uiSelectMode: false,
+  showSrc: false,
+  zoom: 1,
+  stageStyle: {},
+  columnWidth: {
+    left: 310,
+    center: globalThis.document.body.clientWidth - 310 - 400,
+    right: 400,
+  },
+  showGuides: true,
+  showRule: true,
+});
+
+class Ui extends BaseService {
+  constructor() {
+    super([]);
+    globalThis.addEventListener('resize', () => {
+      this.setColumnWidth({
+        center: 'auto',
+      });
+    });
+  }
+
+  public set<T = any>(name: keyof UiState, value: T) {
+    const mask = editorService.get<StageCore>('stage')?.mask;
+
+    if (name === 'columnWidth') {
+      this.setColumnWidth(value as unknown as SetColumnWidth);
+      return;
+    }
+
+    if (name === 'showGuides') {
+      mask?.showGuides(value as unknown as boolean);
+    }
+
+    if (name === 'showRule') {
+      mask?.showRule(value as unknown as boolean);
+    }
+
+    (state as any)[name] = value;
+  }
+
+  public get<T>(name: keyof typeof state): T {
+    return (state as any)[name];
+  }
+
+  private setColumnWidth({ left, center, right }: SetColumnWidth) {
+    const columnWidth = {
+      ...toRaw(this.get<GetColumnWidth>('columnWidth')),
+    };
+
+    if (left) {
+      columnWidth.left = left;
+    }
+
+    if (right) {
+      columnWidth.right = right;
+    }
+
+    if (!center || center === 'auto') {
+      const bodyWidth = globalThis.document.body.clientWidth;
+      columnWidth.center = bodyWidth - (columnWidth?.left || 0) - (columnWidth?.right || 0);
+    } else {
+      columnWidth.center = center;
+    }
+
+    state.columnWidth = columnWidth;
+  }
+}
+
+export type UiService = Ui;
+
+export default new Ui();
--- a/packages/editor/src/shims-vue.d.ts
+++ b/packages/editor/src/shims-vue.d.ts
@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
--- a/packages/editor/src/theme/code-editor.scss
+++ b/packages/editor/src/theme/code-editor.scss
@ -0,0 +1,7 @@
+.magic-code-editor {
+  width: 100%;
+
+  .margin {
+    margin: 0;
+  }
+}
--- a/packages/editor/src/theme/common/var.scss
+++ b/packages/editor/src/theme/common/var.scss
@ -0,0 +1,13 @@
+$--theme-color: #2882e0;
+
+$--font-color: #070303;
+$--border-color: #d9dbdd;
+
+$--nav-height: 35px;
+$--nav-color: #070303;
+$--nav--background-color: #f8fbff;
+
+$--sidebar-heder-background-color: $--theme-color;
+$--sidebar-content-background-color: #f8fbff;
+
+$--page-bar-height: 32px;
--- a/packages/editor/src/theme/component-list-panel.scss
+++ b/packages/editor/src/theme/component-list-panel.scss
@ -0,0 +1,102 @@
+.ui-component-panel {
+  height: 100%;
+  border-top: 0 !important;
+  margin-top: 50px;
+  background-color: $--sidebar-content-background-color;
+
+  .search-input {
+    background: #f8fbff;
+    color: #bbbbbb;
+    padding: 10px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+
+    .el-input__prefix {
+      padding: 10px;
+    }
+
+    .el-input__suffix {
+      padding: 10px 5px;
+    }
+  }
+
+  .el-collapse-item {
+    > div:first-of-type {
+      border-bottom: 1px solid $--border-color;
+      margin-bottom: 10px;
+    }
+  }
+
+  .el-collapse-item__header {
+    background: $--sidebar-content-background-color;
+    color: $--font-color;
+    height: 25px;
+    line-height: 25px;
+    padding-left: 10px;
+    font-size: 12px;
+
+    i {
+      margin-right: 5px;
+      font-size: 14px;
+    }
+  }
+
+  .el-collapse-item__wrap {
+    background: $--sidebar-content-background-color;
+    border-bottom: 0;
+
+    .el-collapse-item__content {
+      padding: 10px;
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .component-item {
+      display: flex;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 5px 10px;
+      box-sizing: border-box;
+      color: $--font-color;
+      flex-direction: column;
+      width: 42px;
+
+      i {
+        font-size: 20px;
+        background: #fff;
+        height: 40px;
+        width: 40px;
+        line-height: 40px;
+        border-radius: 5px;
+        color: #909090;
+        border: 1px solid $--border-color;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        margin-bottom: 5px;
+
+        &:hover {
+          background: #2882e0;
+          color: #fff;
+          border-color: #4e8be1;
+        }
+      }
+
+      span {
+        font-size: 12px;
+        text-align: center;
+      }
+
+      .el-tooltip {
+        width: 50px;
+        height: 30px;
+        line-height: 15px;
+        display: block;
+        white-space: normal;
+        margin: 0;
+      }
+    }
+  }
+}
--- a/packages/editor/src/theme/content-menu.scss
+++ b/packages/editor/src/theme/content-menu.scss
@ -0,0 +1,39 @@
+.magic-editor-content-menu {
+  position: fixed;
+  font-size: 12px;
+  background: #fff;
+  color: #333;
+  box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
+  z-index: 9999;
+  transform-origin: 0% 0%;
+  font-weight: 600;
+  padding: 4px 0px;
+
+  .separation {
+    width: 100%;
+    height: 0;
+    border-color: rgba(155, 155, 155, 0.1);
+  }
+
+  .subMenu {
+    position: absolute;
+    right: 0;
+    transform: translate(100%, 0);
+    background-color: #fff;
+    color: #333;
+    box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
+    top: 0;
+    height: 223px;
+  }
+}
+
+.magic-editor-content-menu-item {
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  cursor: pointer;
+  min-width: 140px;
+  transition: all 0.2s ease 0s;
+  padding: 10px 14px;
+  border-left: 2px solid transparent;
+}
--- a/packages/editor/src/theme/framework.scss
+++ b/packages/editor/src/theme/framework.scss
@ -0,0 +1,72 @@
+.m-editor {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &-content {
+    width: 100%;
+    height: calc(100% - #{$--nav-height});
+    display: flex;
+    justify-self: space-between;
+  }
+
+  &-framework-center {
+    position: relative;
+    transform: translateZ(0);
+    flex: 1;
+  }
+
+  &-framework-left {
+    background-color: $--sidebar-content-background-color;
+  }
+
+  &-framework-center .el-scrollbar__view {
+    height: 100%;
+    min-height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &-empty {
+    &-panel {
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      height: calc(100% - $--page-bar-height);
+    }
+
+    &-content {
+      display: flex;
+      justify-content: space-evenly;
+      flex-direction: row;
+      width: 100%;
+    }
+
+    &-button {
+      border: 3px solid rgba(0, 0, 0, 0.2);
+      padding: 10px 40px;
+      color: rgba(0, 0, 0, 0.6);
+      cursor: pointer;
+
+      i {
+        height: 180px;
+        line-height: 180px;
+        font-size: 100px;
+      }
+
+      p {
+        text-align: center;
+        font-size: 20px;
+        margin-top: 5px;
+      }
+
+      &:hover {
+        border-color: $--theme-color;
+        color: $--theme-color;
+      }
+    }
+  }
+}
--- a/packages/editor/src/theme/index.scss
+++ b/packages/editor/src/theme/index.scss
@ -0,0 +1,13 @@
+@import "./common/var.scss";
+@import "./nav-menu.scss";
+@import "./framework.scss";
+@import "./sidebar.scss";
+@import "./layer-panel.scss";
+@import "./component-list-panel.scss";
+@import "./resizer.scss";
+@import "./workspace.scss";
+@import "./page-bar.scss";
+@import "./props-panel.scss";
+@import "./content-menu.scss";
+@import "./stage.scss";
+@import "./code-editor.scss";
--- a/packages/editor/src/theme/layer-panel.scss
+++ b/packages/editor/src/theme/layer-panel.scss
@ -0,0 +1,68 @@
+.magic-editor-layer-panel {
+  background: $--sidebar-content-background-color;
+
+  .search-input {
+    background: $--sidebar-content-background-color;
+    color: #bbbbbb;
+    padding: 10px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+
+    .el-input__suffix {
+      padding: 10px 5px;
+    }
+  }
+  .node-content {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    > div {
+      width: 8px;
+    }
+    > span {
+      width: calc(100% - 68px);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    > i {
+      margin-right: 10px;
+      font-size: 20px;
+      &.lock {
+        color: #bbb;
+      }
+    }
+  }
+}
+.magic-editor-layer-panel,
+.magic-editor-layer-panel .el-tree {
+  background-color: $--sidebar-content-background-color;
+  color: #313a40;
+}
+
+.magic-editor-layer-panel
+  .el-tree--highlight-current
+  .el-tree-node.is-current
+  > .el-tree-node__content {
+  background-color: $--sidebar-heder-background-color;
+  color: #fff;
+}
+
+.magic-editor-layer-panel .el-tree-node:focus > .el-tree-node__content {
+  background-color: $--sidebar-heder-background-color;
+  color: #fff;
+}
+.ui-tree-tip {
+  width: 100%;
+  height: 25px;
+  margin-left: 10px;
+  background: $--sidebar-content-background-color;
+  font-style: italic;
+  color: #555554;
+  position: absolute;
+  top: 40px;
+  left: 0;
+  z-index: 1;
+}
--- a/packages/editor/src/theme/nav-menu.scss
+++ b/packages/editor/src/theme/nav-menu.scss
@ -0,0 +1,69 @@
+.m-editor-nav-menu {
+  display: flex;
+  z-index: 5;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: center;
+  align-items: center;
+  background-color: $--nav--background-color;
+  font-size: 19.2px;
+  color: $--nav-color;
+  font-weight: 400;
+  box-sizing: border-box;
+  margin: 0px;
+  flex: 0 0 $--nav-height;
+  border-bottom: 1px solid #d8dee8;
+
+  > div {
+    display: flex;
+    height: 100%;
+    z-index: 1;
+    align-items: center;
+  }
+
+  .menu-left {
+    padding-left: 16px;
+  }
+
+  .menu-right {
+    padding-right: 16px;
+  }
+
+  .menu-item {
+    flex-direction: row;
+    -webkit-box-align: center;
+    align-items: center;
+    vertical-align: middle;
+    font-size: 14px;
+    line-height: 1;
+    height: 100%;
+    color: rgba(255, 255, 255, 0.7);
+    box-sizing: inherit;
+    z-index: 1;
+    display: flex !important;
+    transition: all 0.3s ease 0s;
+    border-bottom: 2px solid transparent;
+    margin: 0 5px;
+
+    .is-disabled {
+      opacity: 0.5;
+    }
+
+    .el-button--text,
+    i {
+      color: $--font-color;
+    }
+
+    .icon {
+      display: flex;
+      -webkit-box-align: center;
+      align-items: center;
+      height: 100%;
+      padding: 0px 8px;
+    }
+
+    .menu-item-text {
+      color: $--nav-color;
+    }
+  }
+}
--- a/packages/editor/src/theme/page-bar.scss
+++ b/packages/editor/src/theme/page-bar.scss
@ -0,0 +1,31 @@
+.m-editor-page-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: $--page-bar-height;
+  line-height: $--page-bar-height;
+  background-color: #f3f3f3;
+  color: $--font-color;
+  border-top: 1px solid $--border-color;
+  z-index: 2;
+
+  .m-editor-page-bar-item {
+    padding: 0 10px;
+    cursor: pointer;
+    border-right: 1px solid $--border-color;
+    display: flex;
+    justify-items: center;
+    align-items: center;
+
+    &.active {
+      background-color: #fff;
+      cursor: text;
+
+      .m-editor-page-bar-menu-icon {
+        cursor: pointer;
+      }
+    }
+  }
+}
--- a/packages/editor/src/theme/props-panel.scss
+++ b/packages/editor/src/theme/props-panel.scss
@ -0,0 +1,17 @@
+.m-editor-props-panel {
+  padding: 0 10px;
+
+  .el-form-item__label {
+    font-size: 12px;
+  }
+
+  .m-fieldset {
+    legend {
+      font-size: 12px;
+    }
+  }
+
+  .el-tabs__item {
+    font-size: 12px;
+  }
+}
--- a/packages/editor/src/theme/resizer.scss
+++ b/packages/editor/src/theme/resizer.scss
@ -0,0 +1,51 @@
+.m-editor-resizer {
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  width: 8px;
+  margin: 0 -5px;
+  height: 100%;
+  opacity: 0.9;
+  background: padding-box #d8dee8;
+  box-sizing: border-box;
+  cursor: col-resize;
+  z-index: 1;
+
+  &:hover {
+    border-color: #d8dee8;
+  }
+
+  .icon-container {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.4s;
+    width: 20px;
+    height: 120px;
+    line-height: 120px;
+    text-align: center;
+    background: #d8dee8;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    &.position-left {
+      transform: translate(calc(-100% - 4px), -50%);
+    }
+    &.position-right {
+      transform: translate(calc(100% + 4px), -50%);
+    }
+  }
+  .icon {
+    color: #fff;
+    font-size: 18px;
+  }
+}
+
+.magic-editor-resizer:hover {
+  .icon-container {
+    visibility: visible;
+    opacity: 1;
+  }
+  // border-left: 5px solid rgba(0,0,0,.5);
+  // border-right: 5px solid rgba(0,0,0,.5);
+}
--- a/packages/editor/src/theme/ruler.scss
+++ b/packages/editor/src/theme/ruler.scss
@ -0,0 +1,38 @@
+#ruler-container {
+  width: calc(100% + 40px);
+  position: absolute;
+  top: -40px;
+  left: -40px;
+  height: 40px;
+  z-index: 100000;
+
+  .moveable-line {
+    display: none;
+  }
+
+  .moveable-control.moveable-origin {
+    display: none;
+  }
+}
+
+#ruler-container::after {
+  content: "";
+  position: absolute;
+  left: 100%;
+  top: 0;
+  width: calc(2000px - 100%);
+  height: 100%;
+  background-color: white;
+}
+
+#horizontal {
+  width: 2000px;
+  max-width: fit-content;
+}
+
+#vertical {
+  position: absolute;
+  height: 1000px;
+  top: 0;
+  left: 0;
+}
--- a/packages/editor/src/theme/sidebar.scss
+++ b/packages/editor/src/theme/sidebar.scss
@ -0,0 +1,97 @@
+.m-editor-sidebar {
+  height: 100%;
+
+  &.el-tabs--left .el-tabs__header {
+    background: $--sidebar-heder-background-color;
+    border: 0;
+
+    &.is-left {
+      width: 40px;
+      margin-right: 0;
+    }
+
+    .el-tabs__nav-wrap {
+      margin: 0;
+    }
+
+    .el-tabs__nav {
+      border: 0;
+      border-radius: 0;
+    }
+
+    .tab-label {
+      margin-left: 2px;
+    }
+
+    .el-tabs__item.is-left {
+      line-height: 15px;
+      border: 0;
+      height: auto;
+      padding: 8px;
+      color: rgb(255, 255, 255);
+      box-sizing: border-box;
+
+      &.is-left {
+        &.is-active {
+          background: $--sidebar-content-background-color;
+          border: 0;
+
+          i {
+            color: #353140;
+          }
+
+          .magic-editor-tab-panel-title {
+            color: #353140;
+          }
+        }
+
+        &:first-child {
+          border-right: 0;
+        }
+      }
+    }
+
+    i {
+      font-size: 25px;
+      color: rgba(255, 255, 255, 0.6);
+
+      &:hover {
+        color: rgb(255, 255, 255);
+      }
+    }
+
+    .magic-editor-tab-panel-title {
+      font-size: 12px;
+      white-space: normal;
+    }
+  }
+
+  .el-scrollbar {
+    height: 100%;
+  }
+
+  .el-tree {
+    min-height: 100%;
+  }
+
+  .fold-icon {
+    position: absolute;
+    bottom: 8px;
+    left: 0px;
+    width: 45px;
+    padding-left: 8px;
+    color: #fff;
+    font-size: 32px;
+    opacity: 0.8;
+    cursor: pointer;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .el-tabs__content,
+  .el-tab-pane {
+    height: 100%;
+  }
+}
--- a/packages/editor/src/theme/stage.scss
+++ b/packages/editor/src/theme/stage.scss
@ -0,0 +1,22 @@
+.m-editor-stage {
+  position: relative;
+  width: 100%;
+  height: calc(100% - $--page-bar-height);
+  overflow: auto;
+}
+
+.m-editor-stage-container {
+  transition: transform 0.3s;
+  transform-origin: center -50%;
+  z-index: 0;
+  top: 50%;
+  margin: 0 auto;
+  position: relative;
+  width: 375px;
+  height: 80%;
+  border: 1px solid $--border-color;
+
+  &::-webkit-scrollbar {
+    width: 0 !important;
+  }
+}
--- a/packages/editor/src/theme/workspace.scss
+++ b/packages/editor/src/theme/workspace.scss
@ -0,0 +1,5 @@
+.m-editor-workspace {
+  height: 100%;
+  width: 100%;
+  user-select: none;
+}
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@ -0,0 +1,236 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from 'vue';
+
+import { FormConfig } from '@tmagic/form';
+import { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import StageCore from '@tmagic/stage';
+
+import type { ComponentListService } from '@editor/services/componentList';
+import type { EditorService } from '@editor/services/editor';
+import type { EventsService } from '@editor/services/events';
+import type { HistoryService } from '@editor/services/history';
+import type { PropsService } from '@editor/services/props';
+import type { UiService } from '@editor/services/ui';
+
+export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
+export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
+
+export interface InstallOptions {
+  [key: string]: any;
+}
+
+export interface Services {
+  editorService: EditorService;
+  historyService: HistoryService;
+  eventsService: EventsService;
+  propsService: PropsService;
+  componentListService: ComponentListService;
+  uiService: UiService;
+}
+
+export interface StoreState {
+  root: MApp | null;
+  page: MPage | null;
+  parent: MContainer | null;
+  node: MNode | null;
+  stage: StageCore | null;
+  modifiedNodeIds: Map<Id, Id>;
+}
+
+export interface PropsState {
+  propsConfigMap: Record<string, FormConfig>;
+  propsValueMap: Record<string, MNode>;
+}
+
+export interface ComponentGroupState {
+  list: ComponentGroup[];
+}
+
+export interface SetColumnWidth {
+  left?: number;
+  center?: number | 'auto';
+  right?: number;
+}
+
+export interface GetColumnWidth {
+  left: number;
+  center: number;
+  right: number;
+}
+
+export interface UiState {
+  /** 当前点击画布是否触发选中，true: 不触发，false: 触发，默认为false */
+  uiSelectMode: boolean;
+  /** 是否显示整个配置源码， true: 显示， false: 不显示，默认为false */
+  showSrc: boolean;
+  /** 画布显示放大倍数，默认为 1 */
+  zoom: number;
+  /** 画布顶层div的样式，可用于改变画布的大小 */
+  stageStyle: Record<string, string | number>;
+  /** 编辑器列布局每一列的宽度，分为左中右三列 */
+  columnWidth: GetColumnWidth;
+  /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */
+  showGuides: boolean;
+  /** 是否显示标尺，true: 显示，false: 不显示，默认为true */
+  showRule: boolean;
+}
+
+export interface EditorNodeInfo {
+  node?: MNode;
+  parent?: MContainer;
+  page?: MPage;
+}
+
+export interface AddMNode {
+  type: string;
+  name?: string;
+  [key: string]: any;
+}
+
+/**
+ * 菜单按钮
+ */
+export interface MenuButton {
+  /**
+   * 按钮类型
+   * button: 只有文字不带边框的按钮
+   * text: 纯文本
+   * dropdown: 下拉菜单
+   * divider: 分隔线
+   * zoom: 放大缩小
+   */
+  type: 'button' | 'dropdown' | 'text' | 'divider' | 'zoom';
+  /** 展示的文案 */
+  text?: string;
+  /** 鼠标悬浮是显示的气泡中的文案 */
+  tooltip?: string;
+  /** element-plus icon class */
+  icon?: string | Component<{}, {}, any>;
+  /** 是否置灰，默认为false */
+  disabled?: boolean | ((data?: Services) => boolean);
+  /** 是否显示，默认为true */
+  display?: boolean | ((data?: Services) => boolean);
+  /** type为button/dropdown时点击运行的方法 */
+  handler?: (data?: Services) => Promise<any> | any;
+  /** type为dropdown时，下拉的菜单列表 */
+  items?: {
+    /** 展示的文案 */
+    text: string;
+    /** 点击运行的方法 */
+    handler(data: Services): any;
+  }[];
+}
+
+export interface MenuComponent {
+  type: 'component';
+  /** Vue3组件 */
+  component: any;
+  /** 传入组件的props对象 */
+  props?: Record<string, any>;
+  /** 组件监听的事件对象，如：{ click: () => { console.log('click'); } } */
+  listeners?: Record<string, Function>;
+  slots?: Record<string, any>;
+  /** 是否显示，默认为true */
+  display?: boolean | ((data?: Services) => Promise<boolean> | boolean);
+}
+
+/**
+ * '/': 分隔符
+ * 'delete': 删除按钮
+ * 'undo': 撤销按钮
+ * 'redo': 恢复按钮
+ * 'zoom-in': 放大按钮
+ * 'zoom-out': 缩小按钮
+ */
+export type MenuItem =
+  | '/'
+  | 'delete'
+  | 'undo'
+  | 'redo'
+  | 'zoom'
+  | 'zoom-in'
+  | 'zoom-out'
+  | 'guides'
+  | 'rule'
+  | MenuButton
+  | MenuComponent;
+
+/** 工具栏 */
+export interface MenuBarData {
+  /** 顶部工具栏左边项 */
+  left?: MenuItem[];
+  /** 顶部工具栏中间项 */
+  center?: MenuItem[];
+  /** 顶部工具栏右边项 */
+  right?: MenuItem[];
+}
+
+export interface SideComponent extends MenuComponent {
+  /** 显示文案 */
+  text: string;
+  /** element-plus icon class */
+  icon: Component<{}, {}, any>;
+}
+
+/**
+ * component-list: 组件列表
+ * layer: 已选组件树
+ */
+export type SideItem = 'component-list' | 'layer' | SideComponent;
+
+/** 工具栏 */
+export interface SideBarData {
+  /** 容器类型 */
+  type: 'tabs';
+  /** 默认激活的内容 */
+  status: string;
+  /** panel列表 */
+  items: SideItem[];
+}
+
+export interface ComponentItem {
+  /** 显示文案 */
+  text: string;
+  /** 组件类型 */
+  type: string;
+  /** element-plus icon class */
+  icon?: string | Component;
+  [key: string]: any;
+}
+
+export interface ComponentGroup {
+  /** 显示文案 */
+  title: string;
+  /** 组内列表 */
+  items: ComponentItem[];
+}
+
+export enum LayerOffset {
+  TOP = 'top',
+  BOTTOM = 'bottom',
+}
+
+/** 容器布局 */
+export enum Layout {
+  FLEX = 'flex',
+  FIXED = 'fixed',
+  RELATIVE = 'relative',
+  ABSOLUTE = 'absolute',
+}
--- a/packages/editor/src/utils/compose.ts
+++ b/packages/editor/src/utils/compose.ts
@ -0,0 +1,33 @@
+/**
+ * @param {Array} middleware
+ * @return {Function}
+ */
+export const compose = (middleware: Function[]) => {
+  if (!Array.isArray(middleware)) throw new TypeError('Middleware 必须是一个数组!');
+  for (const fn of middleware) {
+    if (typeof fn !== 'function') throw new TypeError('Middleware 必须由函数组成!');
+  }
+
+  /**
+   * @param {Object} args
+   * @return {Promise}
+   * @api public
+   */
+  return (args: any[], next?: Function) => {
+    // last called middleware #
+    let index = -1;
+    return dispatch(0);
+    function dispatch(i: number): Promise<void> {
+      if (i <= index) return Promise.reject(new Error('next() 被多次调用'));
+      index = i;
+      let fn = middleware[i];
+      if (i === middleware.length && next) fn = next;
+      if (!fn) return Promise.resolve();
+      try {
+        return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
+      } catch (err) {
+        return Promise.reject(err);
+      }
+    }
+  };
+};
--- a/packages/editor/src/utils/config.ts
+++ b/packages/editor/src/utils/config.ts
@ -0,0 +1,29 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { InstallOptions } from '@editor/type';
+
+let $TMAGIC_EDITOR: InstallOptions = {} as any;
+
+const setConfig = (option: InstallOptions): void => {
+  $TMAGIC_EDITOR = option;
+};
+
+const getConfig = (key: keyof InstallOptions): unknown => $TMAGIC_EDITOR[key];
+
+export { getConfig, setConfig };
--- a/packages/editor/src/utils/editor.ts
+++ b/packages/editor/src/utils/editor.ts
@ -0,0 +1,244 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { cloneDeep, random } from 'lodash-es';
+
+import { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import { getNodePath, isPop } from '@tmagic/utils';
+
+import { Layout } from '@editor/type';
+
+export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
+
+export const generateId = (type: string | number): string => `${type}_${random(10000, false)}`;
+
+/**
+ * 获取所有页面配置
+ * @param app DSL跟节点
+ * @returns 所有页面配置
+ */
+export const getPageList = (app: MApp): MPage[] => {
+  if (app.items && Array.isArray(app.items)) {
+    return app.items.filter((item: MPage) => item.type === 'page');
+  }
+  return [];
+};
+
+/**
+ * 获取所有页面名称
+ * @param pages 所有页面配置
+ * @returns 所有页面名称
+ */
+export const getPageNameList = (pages: MPage[]): string[] => pages.map((page: MPage) => page.name || 'index');
+
+/**
+ * 新增页面时，生成页面名称
+ * @param {Object} pageNameList 所有页面名称
+ * @returns {string}
+ */
+export const generatePageName = (pageNameList: string[]): string => {
+  let pageLength = pageNameList.length;
+
+  if (!pageLength) return 'index';
+
+  let pageName = `page_${pageLength}`;
+  while (pageNameList.includes(pageName)) {
+    pageLength += 1;
+    pageName = `page_${pageLength}`;
+  }
+
+  return pageName;
+};
+
+/**
+ * 新增页面时，生成页面名称
+ * @param {Object} app 所有页面配置
+ * @returns {string}
+ */
+export const generatePageNameByApp = (app: MApp): string => generatePageName(getPageNameList(getPageList(app)));
+
+/**
+ * 复制页面时，需要把组件下关联的弹窗id换测复制出来的弹窗的id
+ * @param {number} oldId 复制的源弹窗id
+ * @param {number} popId 新的弹窗id
+ * @param {Object} pageConfig 页面配置
+ */
+const updatePopId = (oldId: Id, popId: Id, pageConfig: MPage) => {
+  pageConfig.items?.forEach((config) => {
+    if (config.pop === oldId) {
+      config.pop = popId;
+      return;
+    }
+
+    if (config.popId === oldId) {
+      config.popId = popId;
+      return;
+    }
+
+    if (Array.isArray(config.items)) {
+      updatePopId(oldId, popId, config as MPage);
+    }
+  });
+};
+
+/**
+ * 将组件与组件的子元素配置中的id都设置成一个新的ID
+ * @param {Object} config 组件配置
+ */
+/* eslint no-param-reassign: ["error", { "props": false }] */
+export const setNewItemId = (config: MNode, parent?: MPage) => {
+  const oldId = config.id;
+
+  config.id = generateId(config.type);
+  config.name = `${config.name?.replace(/_(\d+)$/, '')}_${config.id}`;
+
+  // 只有弹窗在页面下的一级子元素才有效
+  if (isPop(config) && parent?.type === 'page') {
+    updatePopId(oldId, config.id, parent);
+  }
+
+  if (config.items && Array.isArray(config.items)) {
+    config.items.forEach((item) => setNewItemId(item, config as MPage));
+  }
+};
+
+/**
+ * @param {Object} node
+ * @returns {boolean}
+ */
+export const isFixed = (node: MNode): boolean => node.style?.position === 'fixed';
+
+export const getNodeIndex = (node: MNode, parent: MContainer): number => {
+  const items = parent?.items || [];
+  return items.findIndex((item: MNode) => `${item.id}` === `${node.id}`);
+};
+
+export const toRelative = (node: MNode) => {
+  node.style = {
+    ...(node.style || {}),
+    position: 'relative',
+    top: 0,
+    left: 0,
+  };
+  return node;
+};
+
+export const initPosition = (node: MNode, layout: Layout) => {
+  if (layout === Layout.ABSOLUTE) {
+    node.style = {
+      position: 'absolute',
+      ...(node.style || {}),
+    };
+    return node;
+  }
+
+  if (layout === Layout.RELATIVE) {
+    return toRelative(node);
+  }
+
+  return node;
+};
+
+export const setLayout = (node: MNode, layout: Layout) => {
+  node.items?.forEach((child: MNode) => {
+    if (isPop(child)) return;
+
+    child.style = child.style || {};
+
+    // 是 fixed 不做处理
+    if (child.style.position === 'fixed') return;
+
+    if (layout !== Layout.RELATIVE) {
+      child.style.position = 'absolute';
+    } else {
+      toRelative(child);
+      child.style.right = 'auto';
+      child.style.bottom = 'auto';
+    }
+  });
+  return node;
+};
+
+export const change2Fixed = (node: MNode, root: MApp) => {
+  const path = getNodePath(node.id, root.items);
+  const offset = {
+    left: 0,
+    top: 0,
+  };
+
+  path.forEach((value) => {
+    offset.left = offset.left + globalThis.parseFloat(value.style?.left || 0);
+    offset.top = offset.top + globalThis.parseFloat(value.style?.top || 0);
+  });
+
+  node.style = {
+    ...(node.style || {}),
+    ...offset,
+  };
+  return node;
+};
+
+export const Fixed2Other = async (node: MNode, root: MApp, getLayout: (node: MNode) => Promise<Layout>) => {
+  const path = getNodePath(node.id, root.items);
+  const cur = path.pop();
+  const offset = {
+    left: cur?.style?.left || 0,
+    top: cur?.style?.top || 0,
+  };
+
+  path.forEach((value) => {
+    offset.left = offset.left - globalThis.parseFloat(value.style?.left || 0);
+    offset.top = offset.top - globalThis.parseFloat(value.style?.top || 0);
+  });
+
+  const parent = path.pop();
+  if (!parent) {
+    return toRelative(node);
+  }
+
+  const layout = await getLayout(parent);
+  if (layout !== Layout.RELATIVE) {
+    node.style = {
+      ...(node.style || {}),
+      ...offset,
+      position: 'absolute',
+    };
+    return node;
+  }
+
+  return toRelative(node);
+};
+
+export const defaults = (object: any, source: any) => {
+  let o = source;
+  if (Array.isArray(object)) {
+    o = object;
+  }
+
+  Object.entries(o).forEach(([key, value]: [string, any]) => {
+    if (typeof object[key] === 'undefined') {
+      object[key] = value;
+      return;
+    }
+
+    if (value && typeof value !== 'string' && Object.keys(value).length) {
+      object[key] = defaults(cloneDeep(object[key]), value);
+    }
+  });
+  return object;
+};
--- a/packages/editor/src/utils/index.ts
+++ b/packages/editor/src/utils/index.ts
@ -0,0 +1,22 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './config';
+export * from './props';
+export * from './logger';
+export * from './editor';
--- a/packages/editor/src/utils/logger.ts
+++ b/packages/editor/src/utils/logger.ts
@ -0,0 +1,47 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const log = (...args: any[]) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.log('magic editor: ', ...args);
+  }
+};
+
+export const info = (...args: any[]) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.info('magic editor: ', ...args);
+  }
+};
+
+export const warn = (...args: any[]) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.warn('magic editor: ', ...args);
+  }
+};
+
+export const debug = (...args: any[]) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.debug('magic editor: ', ...args);
+  }
+};
+
+export const error = (...args: any[]) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.error('magic editor: ', ...args);
+  }
+};
--- a/packages/editor/src/utils/props.ts
+++ b/packages/editor/src/utils/props.ts
@ -0,0 +1,218 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FormConfig, FormState } from '@tmagic/form';
+
+import editorService from '@editor/services/editor';
+import eventsService from '@editor/services/events';
+import { generateId } from '@editor/utils/editor';
+
+/**
+ * 统一为组件属性表单加上事件、高级、样式配置
+ * @param config 组件属性配置
+ * @returns Object
+ */
+export const fillConfig = (config: FormConfig = []) => [
+  {
+    type: 'tab',
+    items: [
+      {
+        title: '属性',
+        labelWidth: '80px',
+        items: [
+          // 组件类型，必须要有
+          {
+            text: 'type',
+            name: 'type',
+            type: 'hidden',
+          },
+          // 组件id，必须要有
+          {
+            name: 'id',
+            type: 'display',
+            text: 'id',
+          },
+          {
+            name: 'name',
+            text: '组件名称',
+          },
+          ...config,
+        ],
+      },
+      {
+        title: '样式',
+        labelWidth: '80px',
+        items: [
+          {
+            name: 'style',
+            items: [
+              {
+                type: 'fieldset',
+                legend: '位置',
+                items: [
+                  {
+                    name: 'position',
+                    type: 'checkbox',
+                    activeValue: 'fixed',
+                    inactiveValue: 'absolute',
+                    defaultValue: 'absolute',
+                    text: '固定定位',
+                  },
+                  {
+                    name: 'left',
+                    text: 'left',
+                  },
+                  {
+                    name: 'top',
+                    text: 'top',
+                    disabled: (vm: FormState, { model }: any) =>
+                      model.position === 'fixed' && model._magic_position === 'fixedBottom',
+                  },
+                  {
+                    name: 'right',
+                    text: 'right',
+                  },
+                  {
+                    name: 'bottom',
+                    text: 'bottom',
+                    disabled: (vm: FormState, { model }: any) =>
+                      model.position === 'fixed' && model._magic_position === 'fixedTop',
+                  },
+                ],
+              },
+              {
+                type: 'fieldset',
+                legend: '盒子',
+                items: [
+                  {
+                    name: 'width',
+                    text: '宽度',
+                  },
+                  {
+                    name: 'height',
+                    text: '高度',
+                  },
+                ],
+              },
+              {
+                type: 'fieldset',
+                legend: '背景',
+                items: [
+                  {
+                    name: 'backgroundImage',
+                    text: '背景图',
+                  },
+                  {
+                    name: 'backgroundColor',
+                    text: '背景颜色',
+                    type: 'colorPicker',
+                  },
+                  {
+                    name: 'backgroundRepeat',
+                    text: '背景图重复',
+                    type: 'select',
+                    defaultValue: 'no-repeat',
+                    options: [
+                      { text: 'repeat', value: 'repeat' },
+                      { text: 'repeat-x', value: 'repeat-x' },
+                      { text: 'repeat-y', value: 'repeat-y' },
+                      { text: 'no-repeat', value: 'no-repeat' },
+                      { text: 'inherit', value: 'inherit' },
+                    ],
+                  },
+                  {
+                    name: 'backgroundSize',
+                    text: '背景图大小',
+                    defaultValue: '100% 100%',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        title: '事件',
+        items: [
+          {
+            type: 'table',
+            name: 'events',
+            items: [
+              {
+                name: 'name',
+                label: '事件名',
+                type: 'select',
+                options: (mForm: FormState, { formValue }: any) =>
+                  eventsService.getEvent(formValue.type).map((option) => ({
+                    text: option.label,
+                    value: option.value,
+                  })),
+              },
+              {
+                name: 'to',
+                label: '联动组件',
+                type: 'ui-select',
+              },
+              {
+                name: 'method',
+                label: '动作',
+                type: 'select',
+                options: (mForm: FormState, { model }: any) => {
+                  const node = editorService.getNodeById(model.to);
+                  if (!node) return [];
+
+                  return eventsService.getMethod(node.type).map((option) => ({
+                    text: option.label,
+                    value: option.value,
+                  }));
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        title: '高级',
+        labelWidth: '80px',
+        items: [
+          {
+            type: 'code-link',
+            name: 'created',
+            text: 'created',
+            formTitle: 'created',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+// 默认组件属性表单配置
+export const DEFAULT_CONFIG: FormConfig = fillConfig([]);
+
+/**
+ * 获取默认属性配置
+ * @param type 组件类型
+ * @returns Object
+ */
+export const getDefaultPropsValue = (type: string) => ({
+  type,
+  id: generateId(type),
+  style: {},
+  name: type,
+});
--- a/packages/editor/src/utils/undo-redo.ts
+++ b/packages/editor/src/utils/undo-redo.ts
@ -0,0 +1,76 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { cloneDeep } from 'lodash-es';
+
+export class UndoRedo<T = any> {
+  private elementList: T[];
+  private listCursor: number;
+  private listMaxSize: number;
+
+  constructor(listMaxSize = 200) {
+    const minListMaxSize = 2;
+    this.elementList = [];
+    this.listCursor = 0;
+    this.listMaxSize = listMaxSize > minListMaxSize ? listMaxSize : minListMaxSize;
+  }
+
+  public pushElement(element: T): void {
+    // 新元素进来时，把游标之外的元素全部丢弃，并把新元素放进来
+    this.elementList.splice(this.listCursor, this.elementList.length - this.listCursor, cloneDeep(element));
+    this.listCursor += 1;
+    // 如果list中的元素超过maxSize，则移除第一个元素
+    if (this.elementList.length > this.listMaxSize) {
+      this.elementList.shift();
+      this.listCursor -= 1;
+    }
+  }
+
+  public canUndo(): boolean {
+    return this.listCursor > 1;
+  }
+
+  // 返回undo后的当前元素
+  public undo(): T | null {
+    if (!this.canUndo()) {
+      return null;
+    }
+    this.listCursor -= 1;
+    return this.getCurrentElement();
+  }
+
+  public canRedo() {
+    return this.elementList.length > this.listCursor;
+  }
+
+  // 返回redo后的当前元素
+  public redo(): T | null {
+    if (!this.canRedo()) {
+      return null;
+    }
+    this.listCursor += 1;
+    return this.getCurrentElement();
+  }
+
+  public getCurrentElement(): T | null {
+    if (this.listCursor < 1) {
+      return null;
+    }
+    return cloneDeep(this.elementList[this.listCursor - 1]);
+  }
+}
--- a/packages/editor/src/vite-env.d.ts
+++ b/packages/editor/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/packages/editor/tests/unit/Editor.spec.ts
+++ b/packages/editor/tests/unit/Editor.spec.ts
@ -0,0 +1,67 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { mount } from '@vue/test-utils';
+import ElementPlus from 'element-plus';
+
+import MagicForm from '@tmagic/form';
+
+import Editor from '@editor/Editor.vue';
+
+jest.mock('@editor/utils/logger', () => ({
+  log: jest.fn(),
+  info: jest.fn(),
+  warn: jest.fn(),
+  debug: jest.fn(),
+  error: jest.fn(),
+}));
+
+globalThis.ResizeObserver =
+  globalThis.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+  }));
+
+describe('编辑器', () => {
+  it('初始化', () => {
+    const wrapper = mount(Editor as any, {
+      global: {
+        plugins: [ElementPlus as any, MagicForm as any],
+      },
+      props: {
+        modelValue: {
+          type: 'app',
+          id: 1,
+          name: 'app',
+          items: [
+            {
+              type: 'page',
+              id: 2,
+              name: 'page',
+              items: [],
+            },
+          ],
+        },
+        runtimeUrl: 'https://m.film.qq.com/magic-ui/production/1/1625056093304/magic/magic-ui.umd.min.js',
+      },
+    });
+    expect(wrapper.exists()).toBe(true);
+  });
+});
--- a/packages/editor/tests/unit/components/ToolButton.spec.ts
+++ b/packages/editor/tests/unit/components/ToolButton.spec.ts
@ -0,0 +1,208 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { mount } from '@vue/test-utils';
+import ElementPlus, { ElDropdown } from 'element-plus';
+
+import ToolButton from '@editor/components/ToolButton.vue';
+
+// ResizeObserver mock
+globalThis.ResizeObserver =
+  globalThis.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+  }));
+
+const editorState: Record<string, any> = {
+  node: 'node',
+};
+
+// mock
+const editorService = {
+  get: jest.fn((key: string) => editorState[key]),
+  remove: jest.fn(),
+  redo: jest.fn(),
+  undo: jest.fn(),
+};
+
+// mock
+const historyService = {
+  state: {
+    canUndo: true,
+    canRedo: true,
+  },
+};
+
+// mock
+const uiService = {
+  set: jest.fn(),
+  get: jest.fn(() => 0.5),
+};
+
+const getWrapper = (
+  props: any = {
+    data: 'delete',
+  },
+) =>
+  mount(ToolButton as any, {
+    props,
+    global: {
+      plugins: [ElementPlus as any],
+      provide: {
+        services: {
+          editorService,
+          historyService,
+          uiService,
+        },
+      },
+    },
+  });
+
+describe('ToolButton', () => {
+  it('删除', (done) => {
+    const wrapper = getWrapper();
+
+    setTimeout(async () => {
+      const icon = wrapper.find('.el-button');
+      await icon.trigger('click');
+      expect(editorService.remove.mock.calls[0][0]).toBe('node');
+      done();
+    }, 0);
+  });
+
+  it('后退', (done) => {
+    const wrapper = getWrapper({ data: 'undo' });
+
+    setTimeout(async () => {
+      const icon = wrapper.find('.el-button');
+      await icon.trigger('click');
+      expect(editorService.undo).toBeCalled();
+      done();
+    }, 0);
+  });
+
+  it('前进', (done) => {
+    const wrapper = getWrapper({ data: 'redo' });
+
+    setTimeout(async () => {
+      const icon = wrapper.find('.el-button');
+      await icon.trigger('click');
+      expect(editorService.redo).toBeCalled();
+      done();
+    }, 0);
+  });
+
+  it('放大', (done) => {
+    const wrapper = getWrapper({ data: 'zoom-in' });
+
+    setTimeout(async () => {
+      const icon = wrapper.find('.el-button');
+      await icon.trigger('click');
+      expect(uiService.get).toBeCalled();
+      expect(uiService.set.mock.calls[0]).toEqual(['zoom', 0.6]);
+      done();
+    }, 0);
+  });
+
+  it('缩小', (done) => {
+    const wrapper = getWrapper({ data: 'zoom-out' });
+
+    setTimeout(async () => {
+      const icon = wrapper.find('.el-button');
+      await icon.trigger('click');
+      expect(uiService.set.mock.calls[1]).toEqual(['zoom', 0.4]);
+      done();
+    }, 0);
+  });
+
+  it('data无匹配值', () => {
+    getWrapper({ data: 'default' });
+  });
+
+  it('自定义display', () => {
+    const display = jest.fn();
+    getWrapper({
+      data: { display },
+    });
+    expect(display).toBeCalled();
+  });
+
+  it('点击下拉菜单项', (done) => {
+    const wrapper = getWrapper({
+      data: {
+        type: 'dropdown',
+      },
+    });
+
+    setTimeout(async () => {
+      const dropDown = wrapper.findComponent(ElDropdown);
+      const handler = jest.fn();
+      dropDown.vm.$emit('command', {
+        item: { handler },
+      });
+      expect(handler).toBeCalled();
+      done();
+    }, 0);
+  });
+
+  it('按钮不可用', (done) => {
+    const wrapper = getWrapper({
+      data: {
+        icon: 'disabled-icon',
+        type: 'button',
+        disabled: true,
+      },
+    });
+
+    setTimeout(async () => {
+      // disabled 后会有 is-disabled class
+      const iconBtn = wrapper.find('.el-button.el-button--text.is-disabled');
+      await iconBtn.trigger('click');
+      done();
+    }, 0);
+  });
+
+  it('菜单项handler未定义', () => {
+    const wrapper = getWrapper({
+      data: {
+        type: 'dropdown',
+      },
+    });
+
+    const dropDown = wrapper.findComponent(ElDropdown);
+    dropDown.vm.$emit('command', {
+      item: {},
+    });
+  });
+
+  it('参数data为undefined', () => {
+    const wrapper = getWrapper({ data: undefined });
+    expect(wrapper.find('div[class="menu-item"]').exists()).toBe(false);
+  });
+
+  it('自定义display', () => {
+    const wrapper = getWrapper({
+      data: {
+        display: false,
+      },
+    });
+    expect(wrapper.find('div[class="menu-item"]').exists()).toBe(false);
+  });
+});
--- a/packages/editor/tests/unit/layouts/codeEditor/App.spec.ts
+++ b/packages/editor/tests/unit/layouts/codeEditor/App.spec.ts
@ -0,0 +1,49 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { mount } from '@vue/test-utils';
+
+import Editor from '@editor/layouts/CodeEditor.vue';
+
+/**
+ * @jest-environment jsdom
+ */
+describe('编辑器', () => {
+  it('初始化', () => {
+    const wrapper = mount(Editor, {
+      props: {
+        initValues: [
+          {
+            type: 'app',
+            id: 1,
+            name: 'app',
+            items: [
+              {
+                type: 'page',
+                id: 2,
+                name: 'page',
+                items: [],
+              },
+            ],
+          },
+        ],
+      },
+    });
+    expect(wrapper.exists()).toBe(true);
+  });
+});
--- a/packages/editor/tests/unit/layouts/layerPanel/LayerMenu.spec.ts
+++ b/packages/editor/tests/unit/layouts/layerPanel/LayerMenu.spec.ts
@ -0,0 +1,123 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { mount } from '@vue/test-utils';
+import ElementPlus from 'element-plus';
+
+import LayerMenu from '@editor/layouts/sidebar/LayerMenu.vue';
+
+globalThis.ResizeObserver =
+  globalThis.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+  }));
+
+const storeState: any = {
+  node: {
+    items: [],
+    type: 'tabs',
+    value: 'test',
+  },
+};
+
+const editorService = {
+  get: jest.fn((key: string) => storeState[key]),
+  add: jest.fn(),
+  remove: jest.fn(),
+  copy: jest.fn(),
+};
+
+const getWrapper = () =>
+  mount(LayerMenu as any, {
+    global: {
+      plugins: [ElementPlus as any],
+      provide: {
+        services: {
+          editorService,
+        },
+      },
+    },
+  });
+
+describe('LayerMenu', () => {
+  it('触发subMenu显示', (done) => {
+    const wrapper = getWrapper();
+
+    setTimeout(async () => {
+      const addDiv = wrapper
+        .findAll('div[class="magic-editor-content-menu-item"]')
+        .find((dom) => dom.text() === '新增');
+      await addDiv?.trigger('mouseenter');
+
+      expect((wrapper.vm as InstanceType<typeof LayerMenu>).subVisible).toBe(true);
+      done();
+    }, 0);
+  });
+
+  it('新增-tab', (done) => {
+    const wrapper = getWrapper();
+    setTimeout(async () => {
+      const tabDiv = wrapper
+        .findAll('div[class="magic-editor-content-menu-item"]')
+        .find((dom) => dom.text() === '标签');
+      await tabDiv?.trigger('click');
+
+      expect(editorService.add.mock.calls[0][0]).toEqual({
+        name: undefined,
+        type: 'tab-pane',
+      });
+      done();
+    }, 0);
+  });
+
+  it('复制', (done) => {
+    const wrapper = getWrapper();
+    setTimeout(async () => {
+      const copyDiv = wrapper
+        .findAll('div[class="magic-editor-content-menu-item"]')
+        .find((dom) => dom.text() === '复制');
+      await copyDiv?.trigger('click');
+
+      expect(editorService.copy.mock.calls[0][0]).toEqual({
+        items: [],
+        type: 'tabs',
+        value: 'test',
+      });
+      done();
+    }, 0);
+  });
+
+  it('删除', (done) => {
+    const wrapper = getWrapper();
+    setTimeout(async () => {
+      const removeDiv = wrapper
+        .findAll('div[class="magic-editor-content-menu-item"]')
+        .find((dom) => dom.text() === '删除');
+      await removeDiv?.trigger('click');
+
+      expect(editorService.remove.mock.calls[0][0]).toEqual({
+        items: [],
+        type: 'tabs',
+        value: 'test',
+      });
+      done();
+    }, 0);
+  });
+});
--- a/packages/editor/tests/unit/layouts/wordspace/PageBar.spec.ts
+++ b/packages/editor/tests/unit/layouts/wordspace/PageBar.spec.ts
@ -0,0 +1,73 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { mount } from '@vue/test-utils';
+import ElementPlus from 'element-plus';
+
+import PageBar from '@editor/layouts/workspace/PageBar.vue';
+
+const editorState: Record<string, any> = {
+  root: {
+    items: [{ key: 0, id: 1, name: 'testName', type: 'page' }],
+  },
+  page: { id: 1, type: 'page' },
+};
+
+const editorService = {
+  get: jest.fn((key: string) => editorState[key]),
+  add: jest.fn(),
+  set: jest.fn(),
+  select: jest.fn(),
+};
+
+const getWrapper = () =>
+  mount(PageBar as any, {
+    global: {
+      plugins: [ElementPlus as any],
+      provide: {
+        services: {
+          editorService,
+        },
+      },
+    },
+  });
+
+describe('PageBar', () => {
+  it('新增page', (done) => {
+    const wrapper = getWrapper();
+    setTimeout(async () => {
+      await wrapper.find('i[class="el-icon m-editor-page-bar-menu-add-icon"]').trigger('click');
+
+      expect(editorService.add.mock.calls[0][0]).toEqual({
+        type: 'page',
+        name: 'page_1',
+      });
+      done();
+    }, 0);
+  });
+
+  it('切换page', (done) => {
+    const wrapper = getWrapper();
+    setTimeout(async () => {
+      await wrapper.find('div[class="m-editor-page-bar-item active"]').trigger('click');
+
+      expect(editorService.set.mock.calls).toEqual([]);
+      done();
+    }, 0);
+  });
+});
--- a/packages/editor/tests/unit/layouts/wordspace/Stage.spec.ts
+++ b/packages/editor/tests/unit/layouts/wordspace/Stage.spec.ts
@ -0,0 +1,64 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { mount } from '@vue/test-utils';
+
+import Stage from '@editor/layouts/workspace/Stage.vue';
+
+describe('Stage.vue', () => {
+  (global as any).fetch = jest.fn(() =>
+    Promise.resolve({
+      text: () => `<!DOCTYPE html>
+          <html lang="en" style="font-size: 100px">
+            <head></head>
+            <body></body>
+          </html>`,
+    }),
+  );
+
+  const page = {
+    type: 'page',
+    id: '2',
+    items: [
+      {
+        type: 'text',
+        id: '3',
+      },
+    ],
+  };
+
+  const wrapper = mount(Stage as any, {
+    props: {
+      runtimeUrl: '',
+      root: {
+        id: '1',
+        type: 'app',
+        items: [page],
+      },
+
+      page,
+      node: page,
+      uiSelectMode: false,
+    },
+  });
+
+  it('基础', () => {
+    const stage = wrapper.findComponent(Stage);
+    expect(stage.exists()).toBe(true);
+  });
+});
--- a/packages/editor/tests/unit/services/editor.spec.ts
+++ b/packages/editor/tests/unit/services/editor.spec.ts
@ -0,0 +1,449 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { cloneDeep } from 'lodash-es';
+
+import { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+
+import editorService from '@editor/services/editor';
+import { COPY_STORAGE_KEY } from '@editor/utils';
+
+// mock window.localStage
+class LocalStorageMock {
+  public length = 0;
+
+  private store: Record<string, string> = {};
+
+  clear() {
+    this.store = {};
+    this.length = 0;
+  }
+
+  getItem(key: string) {
+    return this.store[key] || null;
+  }
+
+  setItem(key: string, value: string) {
+    this.store[key] = String(value);
+    this.length += 1;
+  }
+
+  removeItem(key: string) {
+    delete this.store[key];
+    this.length -= 1;
+  }
+
+  // 这里用不到这个方法，只是为了mock完整localStorage
+  key(key: number) {
+    return Object.keys(this.store)[key];
+  }
+}
+
+globalThis.localStorage = new LocalStorageMock();
+
+enum NodeId {
+  // 跟节点
+  ROOT_ID = 1,
+  // 页面节点
+  PAGE_ID = 2,
+  // 普通节点
+  NODE_ID = 3,
+  // 普通节点
+  NODE_ID2 = 4,
+  // 不存在的节点
+  ERROR_NODE_ID = 5,
+}
+
+// mock 页面数据，包含一个页面，两个组件
+const root: MNode = {
+  id: NodeId.ROOT_ID,
+  type: 'app',
+  items: [
+    {
+      id: NodeId.PAGE_ID,
+      layout: 'absolute',
+      type: 'page',
+      style: {
+        width: 375,
+      },
+      items: [
+        {
+          id: NodeId.NODE_ID,
+          type: 'text',
+          style: {
+            width: 270,
+          },
+        },
+        {
+          id: NodeId.NODE_ID2,
+          type: 'text',
+          style: {},
+        },
+      ],
+    },
+  ],
+};
+
+describe('get', () => {
+  // 同一个设置页面数据
+  beforeAll(() => editorService.set('root', cloneDeep(root)));
+
+  it('get', () => {
+    const root = editorService.get('root');
+    expect(root.id).toBe(NodeId.ROOT_ID);
+  });
+
+  it('get undefined', () => {
+    // state中不存在的key
+    const root = editorService.get('a' as 'root');
+    expect(root).toBeUndefined();
+  });
+});
+
+describe('getNodeInfo', () => {
+  beforeAll(() => editorService.set('root', cloneDeep(root)));
+
+  it('正常', () => {
+    const info = editorService.getNodeInfo(NodeId.NODE_ID);
+    expect(info?.node?.id).toBe(NodeId.NODE_ID);
+    expect(info?.parent?.id).toBe(NodeId.PAGE_ID);
+    expect(info?.page?.id).toBe(NodeId.PAGE_ID);
+  });
+
+  it('异常', () => {
+    const info = editorService.getNodeInfo(NodeId.ERROR_NODE_ID);
+    expect(info?.node).toBeUndefined();
+    expect(info?.parent?.id).toBeUndefined();
+    expect(info?.page).toBeUndefined();
+  });
+});
+
+describe('getNodeById', () => {
+  beforeAll(() => editorService.set('root', cloneDeep(root)));
+
+  it('正常', () => {
+    const node = editorService.getNodeById(NodeId.NODE_ID);
+    expect(node?.id).toBe(NodeId.NODE_ID);
+  });
+
+  it('异常', () => {
+    const node = editorService.getNodeById(NodeId.ERROR_NODE_ID);
+    expect(node).toBeUndefined();
+  });
+});
+
+describe('getParentById', () => {
+  beforeAll(() => editorService.set('root', cloneDeep(root)));
+
+  it('正常', () => {
+    const node = editorService.getParentById(NodeId.NODE_ID);
+    expect(node?.id).toBe(NodeId.PAGE_ID);
+  });
+
+  it('异常', () => {
+    const node = editorService.getParentById(NodeId.ERROR_NODE_ID);
+    expect(node?.id).toBeUndefined();
+  });
+});
+
+describe('select', () => {
+  beforeAll(() => editorService.set('root', cloneDeep(root)));
+
+  it('参数是id 正常', async () => {
+    // 选中一个节点，会对应更新parent, page
+    await editorService.select(NodeId.NODE_ID);
+    const node = editorService.get('node');
+    const parent = editorService.get('parent');
+    const page = editorService.get('page');
+    expect(node?.id).toBe(NodeId.NODE_ID);
+    expect(parent?.id).toBe(NodeId.PAGE_ID);
+    expect(page?.id).toBe(NodeId.PAGE_ID);
+  });
+
+  it('参数是config 正常', async () => {
+    await editorService.select({ id: NodeId.NODE_ID, type: 'text' });
+    const node = editorService.get('node');
+    const parent = editorService.get('parent');
+    const page = editorService.get('page');
+    expect(node?.id).toBe(NodeId.NODE_ID);
+    expect(parent?.id).toBe(NodeId.PAGE_ID);
+    expect(page?.id).toBe(NodeId.PAGE_ID);
+  });
+
+  it('参数是id undefined', () => {
+    try {
+      editorService.select(NodeId.ERROR_NODE_ID);
+    } catch (e: InstanceType<Error>) {
+      expect(e.message).toBe('获取不到组件信息');
+    }
+  });
+
+  it('参数是config 没有id', () => {
+    try {
+      editorService.select({ id: '', type: 'text' });
+    } catch (e: InstanceType<Error>) {
+      expect(e.message).toBe('没有ID，无法选中');
+    }
+  });
+});
+
+describe('add', () => {
+  it('正常', async () => {
+    editorService.set('root', cloneDeep(root));
+    // 先选中容器
+    await editorService.select(NodeId.PAGE_ID);
+    const newNode = await editorService.add({
+      type: 'text',
+    });
+    // 添加后会选中这个节点
+    const node = editorService.get('node');
+    const parent = editorService.get('parent');
+    expect(node.id).toBe(newNode.id);
+    expect(parent.items).toHaveLength(3);
+  });
+
+  it('正常， 当前不是容器', async () => {
+    editorService.set('root', cloneDeep(root));
+    // 选中不是容器的节点
+    await editorService.select(NodeId.NODE_ID2);
+    // 会加到选中节点的父节点下
+    const newNode = await editorService.add({
+      type: 'text',
+    });
+    const node = editorService.get('node');
+    const parent = editorService.get('parent');
+    expect(node.id).toBe(newNode.id);
+    expect(parent.items).toHaveLength(3);
+  });
+
+  it('往root下添加page', async () => {
+    editorService.set('root', cloneDeep(root));
+    await editorService.select(NodeId.PAGE_ID);
+    const rootNode = editorService.get<MApp>('root');
+    const newNode = await editorService.add(
+      {
+        type: 'page',
+      },
+      rootNode,
+    );
+    const node = editorService.get('node');
+    expect(node.id).toBe(newNode.id);
+    expect(rootNode.items.length).toBe(2);
+  });
+
+  it('往root下添加普通节点', async () => {
+    editorService.set('root', cloneDeep(root));
+    // 根节点下只能加页面
+    const rootNode = editorService.get<MApp>('root');
+    try {
+      await editorService.add(
+        {
+          type: 'text',
+        },
+        rootNode,
+      );
+    } catch (e: InstanceType<Error>) {
+      expect(e.message).toBe('app下不能添加组件');
+    }
+  });
+});
+
+describe('remove', () => {
+  beforeAll(() => editorService.set('root', cloneDeep(root)));
+
+  it('正常', async () => {
+    editorService.remove({ id: NodeId.NODE_ID, type: 'text' });
+    const node = editorService.getNodeById(NodeId.NODE_ID);
+    expect(node).toBeUndefined();
+  });
+
+  it('remove page', async () => {
+    editorService.set('root', cloneDeep(root));
+    editorService.select(NodeId.PAGE_ID);
+    const rootNode = editorService.get<MApp>('root');
+    // 先加一个页面
+    const newPage = await editorService.add(
+      {
+        type: 'page',
+      },
+      rootNode,
+    );
+    expect(rootNode.items.length).toBe(2);
+    await editorService.remove(newPage);
+    expect(rootNode.items.length).toBe(1);
+  });
+
+  it('undefine', async () => {
+    try {
+      editorService.remove({ id: NodeId.ERROR_NODE_ID, type: 'text' });
+    } catch (e: InstanceType<Error>) {
+      expect(e.message).toBe('找不要删除的节点');
+    }
+  });
+});
+
+describe('update', () => {
+  beforeAll(() => editorService.set('root', cloneDeep(root)));
+
+  it('正常', async () => {
+    await editorService.select(NodeId.PAGE_ID);
+    await editorService.update({ id: NodeId.NODE_ID, type: 'text', text: 'text' });
+    const node = editorService.getNodeById(NodeId.NODE_ID);
+    expect(node?.text).toBe('text');
+  });
+
+  it('没有id', async () => {
+    try {
+      await editorService.update({ type: 'text', text: 'text', id: '' });
+    } catch (e: InstanceType<Error>) {
+      expect(e.message).toBe('没有配置或者配置缺少id值');
+    }
+  });
+
+  it('没有type', async () => {
+    // 一般可能出现在外边扩展功能
+    try {
+      await editorService.update({ type: '', text: 'text', id: NodeId.NODE_ID });
+    } catch (e: InstanceType<Error>) {
+      expect(e.message).toBe('配置缺少type值');
+    }
+  });
+
+  it('id对应节点不存在', async () => {
+    try {
+      // 设置当前编辑的页面
+      await editorService.select(NodeId.PAGE_ID);
+      await editorService.update({ type: 'text', text: 'text', id: NodeId.ERROR_NODE_ID });
+    } catch (e: InstanceType<Error>) {
+      expect(e.message).toBe(`获取不到id为${NodeId.ERROR_NODE_ID}的节点`);
+    }
+  });
+
+  it('fixed与absolute切换', async () => {
+    // 设置当前编辑的页面
+    await editorService.select(NodeId.PAGE_ID);
+    await editorService.update({ id: NodeId.NODE_ID, type: 'text', style: { position: 'fixed' } });
+    const node = editorService.getNodeById(NodeId.NODE_ID);
+    expect(node?.style?.position).toBe('fixed');
+    await editorService.update({ id: NodeId.NODE_ID, type: 'text', style: { position: 'absolute' } });
+    const node2 = editorService.getNodeById(NodeId.NODE_ID);
+    expect(node2?.style?.position).toBe('absolute');
+  });
+});
+
+describe('sort', () => {
+  beforeAll(() => editorService.set('root', cloneDeep(root)));
+
+  it('正常', async () => {
+    await editorService.select(NodeId.NODE_ID2);
+    let parent = editorService.get<MContainer>('parent');
+    expect(parent.items[0].id).toBe(NodeId.NODE_ID);
+    await editorService.sort(NodeId.NODE_ID2, NodeId.NODE_ID);
+    parent = editorService.get<MContainer>('parent');
+    expect(parent.items[0].id).toBe(NodeId.NODE_ID2);
+  });
+});
+
+describe('copy', () => {
+  beforeAll(() => editorService.set('root', cloneDeep(root)));
+  it('正常', async () => {
+    const node = editorService.getNodeById(NodeId.NODE_ID2);
+    await editorService.copy(node!);
+    const str = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
+    expect(str).toBe(JSON.stringify(node));
+  });
+});
+
+describe('paste', () => {
+  beforeAll(() => editorService.set('root', cloneDeep(root)));
+  it('正常', async () => {
+    editorService.set('root', cloneDeep(root));
+    // 设置当前编辑的页面
+    await editorService.select(NodeId.PAGE_ID);
+    const page = editorService.get<MPage>('page');
+    expect(page.items).toHaveLength(2);
+    const newNode = await editorService.paste({ left: 0, top: 0 });
+    expect(newNode?.id === NodeId.NODE_ID2).toBeFalsy();
+    expect(page.items).toHaveLength(3);
+  });
+
+  it('空', async () => {
+    globalThis.localStorage.clear();
+    const newNode = await editorService.paste({ left: 0, top: 0 });
+    expect(newNode).toBeUndefined();
+  });
+});
+
+describe('alignCenter', () => {
+  beforeAll(() => editorService.set('root', cloneDeep(root)));
+
+  it('正常', async () => {
+    // 设置当前编辑的页面
+    await editorService.select(NodeId.PAGE_ID);
+    await editorService.update({ id: NodeId.PAGE_ID, isAbsoluteLayout: true, type: 'page' });
+    await editorService.select(NodeId.NODE_ID);
+    const node = editorService.get<MNode>('node');
+    await editorService.alignCenter(node);
+    expect(node.style?.left).toBeGreaterThan(0);
+  });
+});
+
+describe('moveLayer', () => {
+  beforeAll(() => editorService.set('root', cloneDeep(root)));
+
+  it('正常', async () => {
+    // 设置当前编辑的组件
+    await editorService.select(NodeId.NODE_ID);
+    const parent = editorService.get<MContainer>('parent');
+    await editorService.moveLayer(1);
+    expect(parent.items[0].id).toBe(NodeId.NODE_ID2);
+  });
+});
+
+describe('undo redo', () => {
+  beforeAll(() => editorService.set('root', cloneDeep(root)));
+
+  it('正常', async () => {
+    // 设置当前编辑的组件
+    await editorService.select(NodeId.NODE_ID);
+    const node = editorService.get('node');
+    await editorService.remove(node);
+    const removedNode = editorService.getNodeById(NodeId.NODE_ID);
+    expect(removedNode).toBeUndefined();
+    await editorService.undo();
+    const undoNode = editorService.getNodeById(NodeId.NODE_ID);
+    expect(undoNode?.id).toBe(NodeId.NODE_ID);
+    await editorService.redo();
+    const redoNode = editorService.getNodeById(NodeId.NODE_ID);
+    expect(redoNode?.id).toBeUndefined();
+  });
+});
+
+describe('use', () => {
+  beforeAll(() => editorService.set('root', cloneDeep(root)));
+
+  it('before', () => {
+    editorService.usePlugin({
+      beforeRemove: () => new Error('不能删除'),
+    });
+
+    editorService.remove({ id: NodeId.NODE_ID, type: 'text' });
+    const node = editorService.getNodeById(NodeId.NODE_ID);
+    expect(node?.id).toBe(NodeId.NODE_ID);
+  });
+});
--- a/packages/editor/tests/unit/services/events.spec.ts
+++ b/packages/editor/tests/unit/services/events.spec.ts
@ -0,0 +1,61 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
+
+import events from '@editor/services/events';
+
+describe('events', () => {
+  it('init', () => {
+    events.init([
+      {
+        title: '容器',
+        items: [
+          {
+            icon: 'el-icon-folder-opened',
+            id: 0,
+            reportType: 'module',
+            text: '组',
+            type: 'container',
+          },
+          {
+            icon: 'el-icon-files',
+            id: 0,
+            reportType: 'module',
+            text: '标签页(tab)',
+            type: 'tabs',
+          },
+        ],
+      },
+    ]);
+    expect(events.getEvent('container')).toHaveLength(DEFAULT_EVENTS.length);
+    expect(events.getMethod('container')).toHaveLength(DEFAULT_METHODS.length);
+  });
+
+  it('setEvent', () => {
+    const event = [{ label: '点击', value: 'magic:common:events:click' }];
+    events.setEvent('button', event);
+    expect(events.getEvent('button')).toHaveLength(DEFAULT_EVENTS.length + 1);
+  });
+
+  it('setMethod', () => {
+    const method = [{ label: '点击', value: 'magic:common:events:click' }];
+    events.setMethod('button', method);
+    expect(events.getMethod('button')).toHaveLength(DEFAULT_METHODS.length + 1);
+  });
+});
--- a/packages/editor/tests/unit/services/ui.spec.ts
+++ b/packages/editor/tests/unit/services/ui.spec.ts
@ -0,0 +1,27 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ui from '@editor/services/ui';
+
+describe('events', () => {
+  it('init', () => {
+    ui.set('uiSelectMode', true);
+    expect(ui.get('uiSelectMode')).toBeTruthy();
+    expect(ui.get('showSrc')).toBeFalsy();
+  });
+});
--- a/packages/editor/tests/unit/utils/editor.spec.ts
+++ b/packages/editor/tests/unit/utils/editor.spec.ts
@ -0,0 +1,210 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { MNode } from '@tmagic/schema';
+
+import * as editor from '@editor/utils/editor';
+
+describe('util form', () => {
+  it('generateId', () => {
+    const id = editor.generateId('text');
+
+    expect(id.startsWith('text')).toBeTruthy();
+  });
+
+  it('getPageList', () => {
+    const pageList = editor.getPageList({
+      id: 'app_1',
+      type: 'app',
+      items: [
+        {
+          id: 'page_1',
+          name: 'index',
+          type: 'page',
+          items: [],
+        },
+      ],
+    });
+
+    expect(pageList[0].name).toBe('index');
+  });
+
+  it('getPageNameList', () => {
+    const pageList = editor.getPageNameList([
+      {
+        id: 'page_1',
+        name: 'index',
+        type: 'page',
+        items: [],
+      },
+    ]);
+
+    expect(pageList[0]).toBe('index');
+  });
+
+  it('generatePageName', () => {
+    // 已有一个页面了，再生成出来的name格式为page_${index}
+    const name = editor.generatePageName(['index', 'page_2']);
+    // 第二个页面
+    expect(name).toBe('page_3');
+  });
+});
+
+describe('setNewItemId', () => {
+  it('普通', () => {
+    const config = {
+      id: 1,
+      type: 'text',
+    };
+    // 将组件与组件的子元素配置中的id都设置成一个新的ID
+    editor.setNewItemId(config);
+    expect(config.id === 1).toBeFalsy();
+  });
+
+  it('items', () => {
+    const config = {
+      id: 1,
+      type: 'page',
+      items: [
+        {
+          type: 'text',
+          id: 2,
+        },
+      ],
+    };
+    editor.setNewItemId(config);
+    expect(config.id === 1).toBeFalsy();
+    expect(config.items[0].id === 2).toBeFalsy();
+  });
+
+  it('pop', () => {
+    const config = {
+      id: 1,
+      type: 'page',
+      items: [
+        {
+          type: 'button',
+          id: 2,
+          pop: 3,
+        },
+        {
+          type: 'pop',
+          id: 3,
+        },
+      ],
+    };
+    editor.setNewItemId(config);
+    expect(config.items[0].pop === 3).toBeFalsy();
+    expect(config.items[1].id === 3).toBeFalsy();
+    expect(config.items[1].id === config.items[0].pop).toBeTruthy();
+  });
+});
+
+describe('isFixed', () => {
+  it('true', () => {
+    expect(
+      editor.isFixed({
+        type: 'text',
+        id: 1,
+        style: {
+          position: 'fixed',
+        },
+      }),
+    ).toBeTruthy();
+  });
+
+  it('false', () => {
+    expect(
+      editor.isFixed({
+        type: 'text',
+        id: 1,
+        style: {
+          absulote: 'absulote',
+        },
+      }),
+    ).toBeFalsy();
+
+    expect(
+      editor.isFixed({
+        type: 'text',
+        id: 1,
+        style: {},
+      }),
+    ).toBeFalsy();
+  });
+});
+
+describe('getNodeIndex', () => {
+  it('能获取到', () => {
+    const index = editor.getNodeIndex(
+      {
+        type: 'text',
+        id: 1,
+      },
+      {
+        id: 2,
+        type: 'page',
+        items: [
+          {
+            type: 'text',
+            id: 1,
+          },
+        ],
+      },
+    );
+    expect(index).toBe(0);
+  });
+
+  it('不能能获取到', () => {
+    // id为1不在查找数据中
+    const index = editor.getNodeIndex(
+      {
+        type: 'text',
+        id: 1,
+      },
+      {
+        id: 2,
+        type: 'page',
+        items: [
+          {
+            type: 'text',
+            id: 3,
+          },
+        ],
+      },
+    );
+    expect(index).toBe(-1);
+  });
+});
+
+describe('toRelative', () => {
+  it('正常', () => {
+    const config: MNode = {
+      type: 'text',
+      id: 1,
+      style: {
+        color: 'red',
+      },
+    };
+    editor.toRelative(config);
+    expect(config.style?.position).toBe('relative');
+    expect(config.style?.top).toBe(0);
+    expect(config.style?.left).toBe(0);
+    expect(config.style?.color).toBe('red');
+  });
+});
--- a/packages/editor/tests/unit/utils/form.spec.ts
+++ b/packages/editor/tests/unit/utils/form.spec.ts
@ -0,0 +1,48 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as props from '@editor/utils/props';
+
+jest.mock('@editor/utils/logger', () => ({
+  log: jest.fn(),
+  info: jest.fn(),
+  warn: jest.fn(),
+  debug: jest.fn(),
+  error: jest.fn(),
+}));
+
+describe('util form', () => {
+  it('fillConfig', () => {
+    const defaultConfig = props.fillConfig();
+
+    const config = props.fillConfig([
+      {
+        text: 'text',
+        name: 'text',
+        type: 'text',
+      },
+    ]);
+
+    expect(config[0].items[0].items.length - defaultConfig[0].items[0].items.length).toBe(1);
+  });
+
+  it('getDefaultValue', () => {
+    const value = props.getDefaultPropsValue('text');
+    expect(value.id.startsWith('text')).toBeTruthy();
+  });
+});
--- a/packages/editor/tests/unit/utils/undo-redo.spec.ts
+++ b/packages/editor/tests/unit/utils/undo-redo.spec.ts
@ -0,0 +1,154 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { UndoRedo } from '@editor/utils/undo-redo';
+
+describe('undo', () => {
+  let undoRedo: UndoRedo;
+  const element = { a: 1 };
+
+  beforeEach(() => {
+    undoRedo = new UndoRedo();
+    undoRedo.pushElement(element);
+  });
+
+  it('can no undo: empty list', () => {
+    expect(undoRedo.canUndo()).toBe(false);
+    expect(undoRedo.undo()).toEqual(null);
+  });
+
+  it('can undo', () => {
+    undoRedo.pushElement({ a: 2 });
+    expect(undoRedo.canUndo()).toBe(true);
+    expect(undoRedo.undo()).toEqual(element);
+  });
+});
+
+describe('redo', () => {
+  let undoRedo: UndoRedo;
+  const element = { a: 1 };
+
+  beforeEach(() => {
+    undoRedo = new UndoRedo();
+    undoRedo.pushElement(element);
+  });
+
+  it('can no redo: empty list', () => {
+    expect(undoRedo.canRedo()).toBe(false);
+    expect(undoRedo.redo()).toBe(null);
+  });
+
+  it('can no redo: no undo', () => {
+    for (let i = 0; i < 5; i++) {
+      undoRedo.pushElement(element);
+      expect(undoRedo.canRedo()).toBe(false);
+      expect(undoRedo.redo()).toBe(null);
+    }
+  });
+
+  it('can no redo: undo and push', () => {
+    undoRedo.pushElement(element);
+    undoRedo.undo();
+    undoRedo.pushElement(element);
+    expect(undoRedo.canRedo()).toBe(false);
+    expect(undoRedo.redo()).toEqual(null);
+  });
+
+  it('can no redo: redo end', () => {
+    const element1 = { a: 1 };
+    const element2 = { a: 2 };
+    undoRedo.pushElement(element1);
+    undoRedo.pushElement(element2);
+    undoRedo.undo();
+    undoRedo.undo();
+    undoRedo.redo();
+    undoRedo.redo();
+
+    expect(undoRedo.canRedo()).toBe(false);
+    expect(undoRedo.redo()).toEqual(null);
+  });
+
+  it('can redo', () => {
+    const element1 = { a: 1 };
+    const element2 = { a: 2 };
+    undoRedo.pushElement(element1);
+    undoRedo.pushElement(element2);
+    undoRedo.undo();
+    undoRedo.undo();
+
+    expect(undoRedo.canRedo()).toBe(true);
+    expect(undoRedo.redo()).toEqual(element1);
+    expect(undoRedo.canRedo()).toBe(true);
+    expect(undoRedo.redo()).toEqual(element2);
+  });
+});
+
+describe('get current element', () => {
+  let undoRedo: UndoRedo;
+  const element = { a: 1 };
+
+  beforeEach(() => {
+    undoRedo = new UndoRedo();
+  });
+
+  it('no element', () => {
+    expect(undoRedo.getCurrentElement()).toEqual(null);
+  });
+
+  it('has element', () => {
+    undoRedo.pushElement(element);
+    expect(undoRedo.getCurrentElement()).toEqual(element);
+  });
+});
+
+describe('list max size', () => {
+  let undoRedo: UndoRedo;
+  const listMaxSize = 100;
+  const element = { a: 1 };
+
+  beforeEach(() => {
+    undoRedo = new UndoRedo(listMaxSize);
+    undoRedo.pushElement(element);
+  });
+
+  it('reach max size', () => {
+    for (let i = 0; i < listMaxSize; i++) {
+      undoRedo.pushElement({ a: i });
+    }
+    undoRedo.pushElement({ a: listMaxSize }); // 这个元素使得list达到maxSize，触发数据删除
+
+    expect(undoRedo.getCurrentElement()).toEqual({ a: listMaxSize });
+    expect(undoRedo.canRedo()).toBe(false);
+    expect(undoRedo.canUndo()).toBe(true);
+  });
+
+  it('reach max size, then undo', () => {
+    for (let i = 0; i < listMaxSize + 1; i++) {
+      undoRedo.pushElement({ a: i });
+    }
+    for (let i = 0; i < listMaxSize - 1; i++) {
+      undoRedo.undo();
+    }
+    const ele = undoRedo.getCurrentElement();
+    undoRedo.undo();
+
+    expect(ele?.a).toBe(1); // 经过超过maxSize被删元素之后，原本a值为0的第一个元素已经被删除，现在第一个元素a值为1
+    expect(undoRedo.canUndo()).toBe(false);
+    expect(undoRedo.getCurrentElement()).toEqual(element);
+  });
+});
--- a/packages/editor/tsconfig.json
+++ b/packages/editor/tsconfig.json
@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "../..",
+  },
+  "exclude": [
+    "**/dist/**/*"
+  ],
+}
--- a/packages/editor/vite.config.ts
+++ b/packages/editor/vite.config.ts
@ -0,0 +1,30 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import path from 'path';
+
+import { defineConfig } from 'vite';
+
+import { getBaseConfig } from '../vite-config';
+
+import pkg from './package.json';
+
+const deps = Object.keys(pkg.dependencies);
+const alias = [{ find: /@editor/, replacement: path.join(__dirname, './src') }];
+
+export default defineConfig(getBaseConfig(deps, 'TMagicEditor', alias));
--- a/packages/form/.npmignore
+++ b/packages/form/.npmignore
@ -0,0 +1,28 @@
+.babelrc
+.eslintrc
+.editorconfig
+node_modules
+.DS_Store
+examples
+tests
+.code.yml
+reports
+jest.config.js
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`module.exports = { extends: ['@commitlint/config-conventional'] };`