From 43b6361515f95cf69e18a15be83562010807bd28 Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Sat, 12 Jun 2021 22:19:59 +0800
Subject: [PATCH] feat: add animate components

---
 README.zh-CN.md => README.EN.md               | 102 ++--
 README.md                                     | 102 ++--
 package.json                                  |  15 +-
 preview/main.ts                               |   2 +
 preview/views/slot-item.vue                   |  32 +-
 src/hooks/useAnimate.ts                       |  44 ++
 src/main.ts                                   |   1 +
 src/packages/base-widgets/image/index.tsx     |  15 +-
 src/packages/base-widgets/process/index.tsx   |   2 +-
 src/packages/base-widgets/text/index.tsx      |  24 +-
 src/style/common.scss                         |   7 +
 .../common/monaco-editor/MonacoEditor.tsx     |   2 +-
 .../components/common/simulator.vue           |  26 +-
 .../components/base-widgets/index.tsx         |  13 +-
 .../components/container-component/index.tsx  |  13 +-
 .../components/animate/Animate.tsx            | 188 +++++++
 .../components/animate/animate.module.scss    |  67 +++
 .../components/animate/animateConfig.ts       | 469 ++++++++++++++++++
 .../{ => attr-editor}/AttrEditor.tsx          |   2 +-
 .../right-attribute-panel/components/index.ts |   3 +-
 .../right-attribute-panel/index.module.scss   |  51 +-
 .../right-attribute-panel/index.tsx           |  13 +-
 .../draggable-transition-group.vue            |   9 +-
 .../components/simulator-editor/func.scss     |  22 +
 .../simulator-editor/simulator-editor.vue     |  30 +-
 .../components/simulator-editor/slot-item.vue |  22 +-
 src/visual-editor/visual-editor.utils.ts      |  12 +-
 stylelint.config.js                           |   2 +-
 tsconfig.json                                 |   2 +-
 yarn.lock                                     | 268 ++++------
 30 files changed, 1205 insertions(+), 355 deletions(-)
 rename README.zh-CN.md => README.EN.md (63%)
 create mode 100644 src/hooks/useAnimate.ts
 create mode 100644 src/visual-editor/components/right-attribute-panel/components/animate/Animate.tsx
 create mode 100644 src/visual-editor/components/right-attribute-panel/components/animate/animate.module.scss
 create mode 100644 src/visual-editor/components/right-attribute-panel/components/animate/animateConfig.ts
 rename src/visual-editor/components/right-attribute-panel/components/{ => attr-editor}/AttrEditor.tsx (99%)
 create mode 100644 src/visual-editor/components/simulator-editor/func.scss

diff --git a/README.zh-CN.md b/README.EN.md
similarity index 63%
rename from README.zh-CN.md
rename to README.EN.md
index b559e57..aefc5d1 100644
--- a/README.zh-CN.md
+++ b/README.EN.md
@@ -1,10 +1,10 @@
-# 基于 Vite2.x + Vue3.x + TypeScript H5 低代码平台
+# base on Vite2.x + Vue3.x + TypeScript H5 Low code platform
 
 [![license](https://img.shields.io/github/license/buqiyuan/vite-vue3-lowcode.svg)](LICENSE)
 
-**中文** | [English](./README.md)
+**English** | [中文](./README.md)
 
-## 克隆主分支，忽略 git-pages 等无关分支
+## Clone the main branch and ignore irrelevant branches such as git-pages
 
 ```shell
 git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git
@@ -12,39 +12,34 @@ git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git
 git clone --single-branch https://gitee.com/buqiyuan/vite-vue3-lowcode.git
 ```
 
-## 技术栈
-
-- 编程语言：[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/)
-- 构建工具：[Vite 2.x](https://cn.vitejs.dev/)
-- 前端框架：[Vue 3.x](https://v3.cn.vuejs.org/)
-- 路由工具：[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)
-- 状态管理：[Vuex 4.x](https://next.vuex.vuejs.org/)
-- PC 端 UI 框架：[Element Plus](https://element-plus.org/#/zh-CN)
-- H5 端 UI 框架：[vant](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/)
-- CSS 预编译：[Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/)
-- HTTP 工具：[Axios](https://axios-http.com/)
+## technology stack
+
+- Programming Language：[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/)
+- Build Tools：[Vite 2.x](https://cn.vitejs.dev/)
+- Front End Frame：[Vue 3.x](https://v3.cn.vuejs.org/)
+- Subnet Calculator：[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)
+- State Management：[Vuex 4.x](https://next.vuex.vuejs.org/)
+- PC UI Frame：[Element Plus](https://element-plus.org/#/zh-CN)
+- H5 UI Frame：[vant](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/)
+- CSS Pre：[Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/)
+- HTTP Tool：[Axios](https://axios-http.com/)
 - Git Hook 工具：[husky](https://typicode.github.io/husky/#/) + [lint-staged](https://github.com/okonet/lint-staged)
-- 代码规范：[EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#translation)
-- 提交规范：[Commitizen](http://commitizen.github.io/cz-cli/) + [Commitlint](https://commitlint.js.org/#/)
-- 单元测试：[vue-test-utils](https://next.vue-test-utils.vuejs.org/) + [jest](https://jestjs.io/) + [vue-jest](https://github.com/vuejs/vue-jest) + [ts-jest](https://kulshekhar.github.io/ts-jest/)
-- 自动部署：[GitHub Actions](https://docs.github.com/cn/actions/learn-github-actions)
+- Coding Standards：[EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#translation)
+- Submit Specifications：[Commitizen](http://commitizen.github.io/cz-cli/) + [Commitlint](https://commitlint.js.org/#/)
+- Unit Testing：[vue-test-utils](https://next.vue-test-utils.vuejs.org/) + [jest](https://jestjs.io/) + [vue-jest](https://github.com/vuejs/vue-jest) + [ts-jest](https://kulshekhar.github.io/ts-jest/)
+- Auto Deploy：[GitHub Actions](https://docs.github.com/cn/actions/learn-github-actions)
 
-### 功能清单
+### Function List
 
-- [x] 动态添加页面
-- [x] 拖拽式生成组件
-- [ ] service worker + indexeddb 实现无服务端的前端交互
-- [ ] 数据源管理
-- [ ] 提供预置函数
-- [ ] 更多组件的封装
-- [ ] 其他...
+- [x] Add pages dynamically
+- [x] Drag and drop components
+- [ ] service worker + indexeddb Implement server-free front-end interaction
+- [ ] DataSource Admin Console
+- [ ] Provide preset functions
+- [ ] More component encapsulation
+- [ ] Others...
 
-### 简易说明
-
-目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内，
-然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值
-
-### 快速生成组件属性
+### Generate component properties quickly
 
 ```javascript
 // 在vant文档中 chrome控制台输入以下代码，快速生成组件属性
@@ -65,36 +60,35 @@ $$('#props + table tr').reduce((prev, curr) => {
 }, {})
 ```
 
-## 浏览器支持
+## Browser support
 
-本地开发推荐使用`Chrome 80+` 浏览器
+The `Chrome 80+` browser is recommended for local development
 
-支持现代浏览器, 不支持 IE
+Support modern browsers, not IE
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
 | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
 |                                                                                             not support                                                                                              |                                                                                            last 2 versions                                                                                             |                                                                                                  last 2 versions                                                                                                  |                                                                                                last 2 versions                                                                                                |                                                                                                last 2 versions                                                                                                |
 
-### 提交规范
+### Git Contribution submission specification
 
-- `feat` 增加新功能
-- `fix` 修复问题/BUG
-- `style` 代码风格相关无影响运行结果的
-- `perf` 优化/性能提升
-- `refactor` 重构
-- `revert` 撤销修改
-- `test` 测试相关
-- `docs` 文档/注释
-- `build` 对构建系统或者外部依赖项进行了修改
-- `chore` 依赖更新/脚手架配置修改等
-- `workflow` 工作流改进
-- `ci` 持续集成
-- `types` 类型定义文件更改
-- `wip` 开发中
+- `feat` Add new features
+- `fix` Fix the problem/BUG
+- `style` The code style is related and does not affect the running result
+- `perf` Optimization/performance improvement
+- `refactor` Refactor
+- `revert` Undo edit
+- `test` Test related
+- `docs` Documentation/notes
+- `chore` Dependency update/scaffolding configuration modification etc.
+- `workflow` Workflow improvements
+- `ci` Continuous integration
+- `types` Type definition file changes
+- `wip` In development
 
-## 快速开始
+## QUICK START
 
-### 安装依赖
+### Install and use
 
 ```sh
 npm install
@@ -102,13 +96,13 @@ npm install
 yarn add
 ```
 
-### 启动项目
+### run
 
 ```sh
 npm run dev
 ```
 
-### 项目打包
+### build
 
 ```sh
 npm run build
diff --git a/README.md b/README.md
index 61d89d3..1d1d01c 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,10 @@
-# base on Vite2.x + Vue3.x + TypeScript H5 Low code platform
+# 基于 Vite2.x + Vue3.x + TypeScript H5 低代码平台
 
 [![license](https://img.shields.io/github/license/buqiyuan/vite-vue3-lowcode.svg)](LICENSE)
 
-**English** | [中文](./README.zh-CN.md)
+**中文** | [English](./README.EN.md)
 
-## Clone the main branch and ignore irrelevant branches such as git-pages
+## 克隆主分支，忽略 git-pages 等无关分支
 
 ```shell
 git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git
@@ -12,34 +12,39 @@ git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git
 git clone --single-branch https://gitee.com/buqiyuan/vite-vue3-lowcode.git
 ```
 
-## technology stack
-
-- Programming Language：[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/)
-- Build Tools：[Vite 2.x](https://cn.vitejs.dev/)
-- Front End Frame：[Vue 3.x](https://v3.cn.vuejs.org/)
-- Subnet Calculator：[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)
-- State Management：[Vuex 4.x](https://next.vuex.vuejs.org/)
-- PC UI Frame：[Element Plus](https://element-plus.org/#/zh-CN)
-- H5 UI Frame：[vant](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/)
-- CSS Pre：[Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/)
-- HTTP Tool：[Axios](https://axios-http.com/)
+## 技术栈
+
+- 编程语言：[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/)
+- 构建工具：[Vite 2.x](https://cn.vitejs.dev/)
+- 前端框架：[Vue 3.x](https://v3.cn.vuejs.org/)
+- 路由工具：[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)
+- 状态管理：[Vuex 4.x](https://next.vuex.vuejs.org/)
+- PC 端 UI 框架：[Element Plus](https://element-plus.org/#/zh-CN)
+- H5 端 UI 框架：[vant](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/)
+- CSS 预编译：[Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/)
+- HTTP 工具：[Axios](https://axios-http.com/)
 - Git Hook 工具：[husky](https://typicode.github.io/husky/#/) + [lint-staged](https://github.com/okonet/lint-staged)
-- Coding Standards：[EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#translation)
-- Submit Specifications：[Commitizen](http://commitizen.github.io/cz-cli/) + [Commitlint](https://commitlint.js.org/#/)
-- Unit Testing：[vue-test-utils](https://next.vue-test-utils.vuejs.org/) + [jest](https://jestjs.io/) + [vue-jest](https://github.com/vuejs/vue-jest) + [ts-jest](https://kulshekhar.github.io/ts-jest/)
-- Auto Deploy：[GitHub Actions](https://docs.github.com/cn/actions/learn-github-actions)
+- 代码规范：[EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#translation)
+- 提交规范：[Commitizen](http://commitizen.github.io/cz-cli/) + [Commitlint](https://commitlint.js.org/#/)
+- 单元测试：[vue-test-utils](https://next.vue-test-utils.vuejs.org/) + [jest](https://jestjs.io/) + [vue-jest](https://github.com/vuejs/vue-jest) + [ts-jest](https://kulshekhar.github.io/ts-jest/)
+- 自动部署：[GitHub Actions](https://docs.github.com/cn/actions/learn-github-actions)
 
-### Function List
+### 功能清单
 
-- [x] Add pages dynamically
-- [x] Drag and drop components
-- [ ] service worker + indexeddb Implement server-free front-end interaction
-- [ ] DataSource Admin Console
-- [ ] Provide preset functions
-- [ ] More component encapsulation
-- [ ] Others...
+- [x] 动态添加页面
+- [x] 拖拽式生成组件
+- [ ] service worker + indexeddb 实现无服务端的前端交互
+- [ ] 数据源管理
+- [ ] 提供预置函数
+- [ ] 更多组件的封装
+- [ ] 其他...
 
-### Generate component properties quickly
+### 简易说明
+
+目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内，
+然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值
+
+### 快速生成组件属性
 
 ```javascript
 // 在vant文档中 chrome控制台输入以下代码，快速生成组件属性
@@ -60,35 +65,36 @@ $$('#props + table tr').reduce((prev, curr) => {
 }, {})
 ```
 
-## Browser support
+## 浏览器支持
 
-The `Chrome 80+` browser is recommended for local development
+本地开发推荐使用`Chrome 80+` 浏览器
 
-Support modern browsers, not IE
+支持现代浏览器, 不支持 IE
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
 | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
 |                                                                                             not support                                                                                              |                                                                                            last 2 versions                                                                                             |                                                                                                  last 2 versions                                                                                                  |                                                                                                last 2 versions                                                                                                |                                                                                                last 2 versions                                                                                                |
 
-### Git Contribution submission specification
+### 提交规范
 
-- `feat` Add new features
-- `fix` Fix the problem/BUG
-- `style` The code style is related and does not affect the running result
-- `perf` Optimization/performance improvement
-- `refactor` Refactor
-- `revert` Undo edit
-- `test` Test related
-- `docs` Documentation/notes
-- `chore` Dependency update/scaffolding configuration modification etc.
-- `workflow` Workflow improvements
-- `ci` Continuous integration
-- `types` Type definition file changes
-- `wip` In development
+- `feat` 增加新功能
+- `fix` 修复问题/BUG
+- `style` 代码风格相关无影响运行结果的
+- `perf` 优化/性能提升
+- `refactor` 重构
+- `revert` 撤销修改
+- `test` 测试相关
+- `docs` 文档/注释
+- `build` 对构建系统或者外部依赖项进行了修改
+- `chore` 依赖更新/脚手架配置修改等
+- `workflow` 工作流改进
+- `ci` 持续集成
+- `types` 类型定义文件更改
+- `wip` 开发中
 
-## QUICK START
+## 快速开始
 
-### Install and use
+### 安装依赖
 
 ```sh
 npm install
@@ -96,13 +102,13 @@ npm install
 yarn add
 ```
 
-### run
+### 启动项目
 
 ```sh
 npm run dev
 ```
 
-### build
+### 项目打包
 
 ```sh
 npm run build
diff --git a/package.json b/package.json
index 7c8bbea..49adfc1 100644
--- a/package.json
+++ b/package.json
@@ -23,19 +23,20 @@
     "@vant/touch-emulator": "^1.3.0",
     "@vueuse/core": "^5.0.2",
     "@vueuse/integrations": "^5.0.2",
+    "animate.css": "^4.1.1",
     "axios": "^0.21.1",
     "dayjs": "^1.10.5",
     "dexie": "^3.0.3",
-    "element-plus": "^1.0.2-beta.46",
+    "element-plus": "^1.0.2-beta.48",
     "lodash": "^4.17.21",
-    "monaco-editor": "^0.24.0",
+    "monaco-editor": "^0.25.0",
     "normalize.css": "^8.0.1",
     "nprogress": "^1.0.0-1",
     "qrcode": "^1.4.4",
     "vant": "^3.0.18",
-    "vue": "3.0.11",
+    "vue": "3.1.1",
     "vue-router": "^4.0.8",
-    "vuedraggable": "^4.0.1",
+    "vuedraggable": "^4.0.3",
     "vuex": "^4.0.1"
   },
   "devDependencies": {
@@ -47,7 +48,7 @@
     "@vitejs/plugin-legacy": "^1.4.1",
     "@vitejs/plugin-vue": "^1.2.3",
     "@vitejs/plugin-vue-jsx": "^1.1.5",
-    "@vue/compiler-sfc": "3.0.11",
+    "@vue/compiler-sfc": "3.1.1",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^6.3.0",
@@ -55,7 +56,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "^7.10.0",
+    "eslint-plugin-vue": "^7.11.0",
     "gh-pages": "^3.2.0",
     "husky": "^6.0.0",
     "lint-staged": "^11.0.0",
@@ -68,7 +69,7 @@
     "stylelint-order": "^4.1.0",
     "typescript": "^4.3.2",
     "vite": "2.3.7",
-    "vite-plugin-components": "^0.10.4",
+    "vite-plugin-components": "^0.11.1",
     "vite-plugin-style-import": "^0.10.1",
     "vite-plugin-windicss": "^1.0.3",
     "vue-eslint-parser": "^7.6.0",
diff --git a/preview/main.ts b/preview/main.ts
index 9a8f776..28e8912 100644
--- a/preview/main.ts
+++ b/preview/main.ts
@@ -5,6 +5,8 @@ import router from './router'
 
 import { setupVant } from '@/plugins/vant'
 
+import 'animate.css'
+
 const app = createApp(App)
 
 // 安装vant插件
diff --git a/preview/views/slot-item.vue b/preview/views/slot-item.vue
index 69d0ad3..ca49ae4 100644
--- a/preview/views/slot-item.vue
+++ b/preview/views/slot-item.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="__slot-item">
     <comp-render :element="element" :config="config">
       <template v-for="(value, key) in element.props?.slots" :key="key" #[key]>
         <template v-for="item in value?.children" :key="item._vid">
@@ -14,27 +14,47 @@
 /**
  * @name: slot-item
  * @author:卜启缘
- * @date: 2021/5/3 4:18
+ * @date: 2021/5/3 13:18
  * @description：slot-item
  * @update: 2021/5/3 14:18
  */
-
+import { defineComponent, onMounted, PropType } from 'vue'
 import CompRender from './comp-render'
+import { useAnimate } from '@/hooks/useAnimate'
+import { VisualEditorBlockData } from '@/visual-editor/visual-editor.utils'
 
-export default {
+export default defineComponent({
   name: 'SlotItem',
   components: { CompRender },
   props: {
     element: {
-      type: [Object, Array],
+      type: [Object] as PropType<VisualEditorBlockData>,
       default: () => ({})
     },
     config: {
       type: Object,
       default: () => ({})
     }
+  },
+  setup(props) {
+    onMounted(() => {
+      const animations = props.element.animations
+      if (animations?.length) {
+        let animateEl =
+          (window.$$refs[props.element._vid]?.$el as HTMLElement) ??
+          (window.$$refs[props.element._vid] as HTMLElement)
+
+        animateEl = animateEl?.closest('.__slot-item')?.firstChild as HTMLElement
+
+        if (animateEl) {
+          useAnimate(animateEl, animations)
+        }
+      }
+    })
+
+    return {}
   }
-}
+})
 </script>
 
 <style scoped></style>
diff --git a/src/hooks/useAnimate.ts b/src/hooks/useAnimate.ts
new file mode 100644
index 0000000..1c9352d
--- /dev/null
+++ b/src/hooks/useAnimate.ts
@@ -0,0 +1,44 @@
+/*
+ * @Author: 卜启缘
+ * @Date: 2021-06-12 21:29:32
+ * @LastEditTime: 2021-06-12 22:03:43
+ * @LastEditors: 卜启缘
+ * @Description: 执行组件动画
+ * @FilePath: \vite-vue3-lowcode\src\hooks\useAnimate.ts
+ */
+
+import { Animation } from '@/visual-editor/visual-editor.utils'
+
+export const useAnimate = async (animateEl: HTMLElement, animations: Animation | Animation[]) => {
+  animations = Array.isArray(animations) ? animations : [animations]
+
+  const play = (animate: Animation) =>
+    new Promise((resolve) => {
+      if (animateEl) {
+        const animationName = `animate__${animate.value}`
+        animateEl.style.setProperty('--animate-duration', `${animate.duration}s`)
+        animateEl.style.setProperty('--animate-delay', `${animate.delay}s`)
+        animateEl.style.setProperty(
+          'animation-iteration-count',
+          `${animate.infinite ? 'infinite' : animate.count}`
+        )
+
+        // 动画结束时，删除类名
+        const handleAnimationEnd = (event?: AnimationEvent) => {
+          event?.stopPropagation()
+          animateEl.classList.remove(`animate__animated`, animationName)
+          animateEl.removeEventListener('animationend', handleAnimationEnd)
+          resolve('animation end')
+        }
+
+        animateEl?.classList.add(`animate__animated`, animationName)
+        animateEl?.addEventListener('animationend', handleAnimationEnd, { once: true })
+      } else {
+        resolve('动画执行失败！执行动画元素不存在！')
+      }
+    })
+
+  for (const item of animations) {
+    await play(item)
+  }
+}
diff --git a/src/main.ts b/src/main.ts
index 2ea2c2b..e1a4f60 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,7 @@ import { setupVant } from './plugins/vant'
 import 'normalize.css'
 import 'virtual:windi.css'
 import 'virtual:windi-devtools'
+import 'animate.css'
 
 import router from './router/'
 import store from './store/'
diff --git a/src/packages/base-widgets/image/index.tsx b/src/packages/base-widgets/image/index.tsx
index c08fee1..69f3f60 100644
--- a/src/packages/base-widgets/image/index.tsx
+++ b/src/packages/base-widgets/image/index.tsx
@@ -1,3 +1,11 @@
+/*
+ * @Author: 卜启缘
+ * @Date: 2021-06-01 09:45:21
+ * @LastEditTime: 2021-06-12 09:55:10
+ * @LastEditors: 卜启缘
+ * @Description: 图片组件
+ * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\image\index.tsx
+ */
 import { Image } from 'vant'
 import {
   createEditorInputProp,
@@ -5,6 +13,7 @@ import {
   createEditorSwitchProp
 } from '@/visual-editor/visual-editor.props'
 import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils'
+import { useGlobalProperties } from '@/hooks/useGlobalProperties'
 
 export default {
   key: 'image',
@@ -21,8 +30,10 @@ export default {
       </div>
     </div>
   ),
-  render: ({ props }) => {
-    return <Image {...props} />
+  render: ({ props, block }) => {
+    const { registerRef } = useGlobalProperties()
+    const ImageComp = () => <Image ref={(el) => registerRef(el, block._vid)} {...props} />
+    return <ImageComp></ImageComp>
   },
   props: {
     src: createEditorInputProp({
diff --git a/src/packages/base-widgets/process/index.tsx b/src/packages/base-widgets/process/index.tsx
index ba8f6fd..b000fa8 100644
--- a/src/packages/base-widgets/process/index.tsx
+++ b/src/packages/base-widgets/process/index.tsx
@@ -8,7 +8,7 @@ import {
 import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils'
 
 export default {
-  key: 'divider',
+  key: 'process',
   moduleName: 'baseWidgets',
   label: '进度条',
   preview: () => <Progress style="width:190px" percentage={0} />,
diff --git a/src/packages/base-widgets/text/index.tsx b/src/packages/base-widgets/text/index.tsx
index 478f445..d3346bf 100644
--- a/src/packages/base-widgets/text/index.tsx
+++ b/src/packages/base-widgets/text/index.tsx
@@ -1,3 +1,12 @@
+/*
+ * @Author: 卜启缘
+ * @Date: 2021-06-01 09:45:21
+ * @LastEditTime: 2021-06-12 10:06:33
+ * @LastEditors: 卜启缘
+ * @Description:
+ * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\text\index.tsx
+ */
+import { useGlobalProperties } from '@/hooks/useGlobalProperties'
 import {
   createEditorColorProp,
   createEditorInputProp,
@@ -10,9 +19,18 @@ export default {
   moduleName: 'baseWidgets',
   label: '文本',
   preview: () => <span>预览文本</span>,
-  render: ({ props }) => (
-    <span style={{ color: props.color, fontSize: props.size }}>{props.text || '默认文本'}</span>
-  ),
+  render: ({ props, block }) => {
+    const { registerRef } = useGlobalProperties()
+    const Text = () => (
+      <div
+        ref={(el) => registerRef(el, block._vid)}
+        style={{ color: props.color, fontSize: props.size }}
+      >
+        {props.text || '默认文本'}
+      </div>
+    )
+    return <Text></Text>
+  },
   props: {
     text: createEditorInputProp({ label: '显示文本' }),
     color: createEditorColorProp('字体颜色'),
diff --git a/src/style/common.scss b/src/style/common.scss
index be7e9e2..10ec70e 100644
--- a/src/style/common.scss
+++ b/src/style/common.scss
@@ -1,14 +1,21 @@
 body {
   overflow: hidden;
 }
+
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
+
 ::-webkit-scrollbar-thumb {
   background: #bfbfbf;
   border-radius: 10px;
 }
+
 .placeholder {
   color: #c8c9cc;
 }
+
+img {
+  image-rendering: pixelated;
+}
diff --git a/src/visual-editor/components/common/monaco-editor/MonacoEditor.tsx b/src/visual-editor/components/common/monaco-editor/MonacoEditor.tsx
index 17679e5..0c59be3 100644
--- a/src/visual-editor/components/common/monaco-editor/MonacoEditor.tsx
+++ b/src/visual-editor/components/common/monaco-editor/MonacoEditor.tsx
@@ -128,7 +128,7 @@ export default defineComponent({
       }
     }
 
-    watch(() => props.vid, refreshEditor)
+    watch(() => props.vid, refreshEditor, { immediate: true })
 
     return () => {
       return (
diff --git a/src/visual-editor/components/common/simulator.vue b/src/visual-editor/components/common/simulator.vue
index 0bcb82f..770909c 100644
--- a/src/visual-editor/components/common/simulator.vue
+++ b/src/visual-editor/components/common/simulator.vue
@@ -1,7 +1,17 @@
+<!--
+ * @Author: 卜启缘
+ * @Date: 2021-06-01 13:30:22
+ * @LastEditTime: 2021-06-12 18:29:28
+ * @LastEditors: 卜启缘
+ * @Description: 手机模拟器
+ * @FilePath: \vite-vue3-lowcode\src\visual-editor\components\common\simulator.vue
+-->
 <template>
   <div class="simulator-container">
     <div class="simulator-editor">
-      <slot></slot>
+      <div class="simulator-editor-content">
+        <slot></slot>
+      </div>
     </div>
   </div>
 </template>
@@ -28,17 +38,25 @@ export default defineComponent({
 }
 
 .simulator-editor {
-  width: 360px;
+  width: 560px;
   height: 640px;
-  min-width: 360px;
+  min-width: 560px;
+  padding: 10px 100px;
+  overflow: hidden auto;
   background: #fafafa;
   border-radius: 5px;
   transform: translate(0);
-  box-shadow: 0 8px 12px #ebedf0;
   box-sizing: border-box;
+  background-clip: content-box;
+  contain: layout;
 
   &::-webkit-scrollbar {
     width: 0;
   }
+
+  &-content {
+    min-height: 100%;
+    box-shadow: 0 8px 12px #ebedf0;
+  }
 }
 </style>
diff --git a/src/visual-editor/components/left-aside/components/base-widgets/index.tsx b/src/visual-editor/components/left-aside/components/base-widgets/index.tsx
index ece950f..f8dd8a2 100644
--- a/src/visual-editor/components/left-aside/components/base-widgets/index.tsx
+++ b/src/visual-editor/components/left-aside/components/base-widgets/index.tsx
@@ -1,8 +1,15 @@
+/*
+ * @Author: 卜启缘
+ * @Date: 2021-06-01 13:22:14
+ * @LastEditTime: 2021-06-12 14:39:38
+ * @LastEditors: 卜启缘
+ * @Description:
+ * @FilePath: \vite-vue3-lowcode\src\visual-editor\components\left-aside\components\base-widgets\index.tsx
+ */
 import { defineComponent } from 'vue'
 import { cloneDeep } from 'lodash'
 import { visualConfig } from '@/visual.config'
-// @ts-ignore 暂时方案 待官方修复
-import Draggable from 'vuedraggable/src/vuedraggable'
+import Draggable from 'vuedraggable'
 import styles from './index.module.scss'
 import { createNewBlock } from '@/visual-editor/visual-editor.utils'
 
@@ -29,7 +36,7 @@ export default defineComponent({
           list={visualConfig.componentModules.baseWidgets}
           group={{ name: 'components', pull: 'clone', put: false }}
           clone={cloneDog}
-          item-key="key"
+          item-key="_vid"
           onChange={log}
         >
           {{
diff --git a/src/visual-editor/components/left-aside/components/container-component/index.tsx b/src/visual-editor/components/left-aside/components/container-component/index.tsx
index f9bb3e2..d085003 100644
--- a/src/visual-editor/components/left-aside/components/container-component/index.tsx
+++ b/src/visual-editor/components/left-aside/components/container-component/index.tsx
@@ -1,8 +1,15 @@
+/*
+ * @Author: 卜启缘
+ * @Date: 2021-06-01 13:22:14
+ * @LastEditTime: 2021-06-12 14:38:09
+ * @LastEditors: 卜启缘
+ * @Description:
+ * @FilePath: \vite-vue3-lowcode\src\visual-editor\components\left-aside\components\container-component\index.tsx
+ */
 import { defineComponent } from 'vue'
 import { cloneDeep } from 'lodash'
 import { visualConfig } from '@/visual.config'
-// @ts-ignore 暂时方案 待官方修复
-import Draggable from 'vuedraggable/src/vuedraggable'
+import Draggable from 'vuedraggable'
 import styles from './index.module.scss'
 import { createNewBlock } from '@/visual-editor/visual-editor.utils'
 
@@ -29,7 +36,7 @@ export default defineComponent({
           list={visualConfig.componentModules.containerComponents}
           group={{ name: 'components', pull: 'clone', put: false }}
           clone={cloneDog}
-          item-key="key"
+          item-key="_vid"
           onChange={log}
         >
           {{
diff --git a/src/visual-editor/components/right-attribute-panel/components/animate/Animate.tsx b/src/visual-editor/components/right-attribute-panel/components/animate/Animate.tsx
new file mode 100644
index 0000000..5c91ead
--- /dev/null
+++ b/src/visual-editor/components/right-attribute-panel/components/animate/Animate.tsx
@@ -0,0 +1,188 @@
+/*
+ * @Author: 卜启缘
+ * @Date: 2021-06-11 18:08:01
+ * @LastEditTime: 2021-06-12 22:07:05
+ * @LastEditors: 卜启缘
+ * @Description: 动画组件
+ * @FilePath: \vite-vue3-lowcode\src\visual-editor\components\right-attribute-panel\components\animate\Animate.tsx
+ */
+import { defineComponent, reactive, ref, watchEffect } from 'vue'
+import { ElTabs, ElTabPane, ElRow, ElCol, ElButton, ElSwitch, ElAlert } from 'element-plus'
+import { animationTabs } from './animateConfig'
+import styles from './animate.module.scss'
+import { onClickOutside } from '@vueuse/core'
+import { useVisualData } from '@/visual-editor/hooks/useVisualData'
+import { Animation } from '@/visual-editor/visual-editor.utils'
+import { useAnimate } from '@/hooks/useAnimate'
+
+export const Animate = defineComponent({
+  setup() {
+    const { currentBlock } = useVisualData()
+    const target = ref(null)
+
+    const state = reactive({
+      activeName: '',
+      isAddAnimates: false, // 是否显示添加动画集
+      changeTargetIndex: -1 // 要修改的动画的索引
+    })
+
+    onClickOutside(target, () => (state.isAddAnimates = false))
+
+    watchEffect((onInvalidate) => {
+      if (state.isAddAnimates) {
+        state.activeName = 'in'
+      } else {
+        state.changeTargetIndex = -1
+      }
+      onInvalidate(() => {
+        console.log('onInvalidate')
+      })
+    })
+
+    /**
+     * @description 运行动画
+     */
+    const runAnimation = (animation: Animation | Animation[] = []) => {
+      let animateEl =
+        (window.$$refs[currentBlock.value._vid]?.$el as HTMLElement) ??
+        (window.$$refs[currentBlock.value._vid] as HTMLElement)
+
+      animateEl = animateEl?.closest('.list-group-item')?.firstChild as HTMLElement
+
+      if (animateEl) {
+        useAnimate(animateEl, animation)
+      }
+    }
+
+    /**
+     * @description 点击要修改的动画名称
+     */
+    const clickAnimateName = (index) => {
+      state.changeTargetIndex = index
+      state.isAddAnimates = true
+    }
+
+    /**
+     * @description 删除动画
+     * @param index 要删除的动画的索引
+     * @returns
+     */
+    const delAnimate = (index: number) => currentBlock.value.animations?.splice(index, 1)
+
+    /**
+     * @description 添加/修改 动画
+     */
+    const addOrChangeAnimate = (animateItem: Animation) => {
+      const animation: Animation = {
+        ...animateItem
+      }
+      if (state.changeTargetIndex == -1) {
+        currentBlock.value.animations?.push(animation)
+      } else {
+        // 修改动画
+        currentBlock.value.animations![state.changeTargetIndex] = animation
+        state.changeTargetIndex = -1
+      }
+      state.isAddAnimates = false
+      console.log(currentBlock.value.animations, '当前组件的动画')
+    }
+
+    // 已添加的动画列表组件
+    const AddedAnimateList = () => (
+      <>
+        {currentBlock.value.animations?.map((item, index) => (
+          <ElAlert
+            onClose={() => delAnimate(index)}
+            type={'info'}
+            style={{ marginTop: '12px' }}
+            key={item.value}
+          >
+            {{
+              title: () => (
+                <div>
+                  <span class={'title'}>{`动画${index + 1}`}</span>
+                  <span onClick={() => clickAnimateName(index)} class={'label'}>
+                    {item.label}
+                  </span>
+                  <span
+                    onClick={() => runAnimation(item)}
+                    class={'el-icon-caret-right play'}
+                    title={'播放'}
+                  ></span>
+                </div>
+              ),
+              default: () => (
+                <>
+                  <ElRow gutter={6}>
+                    <ElCol span={8}>
+                      时间：
+                      <input v-model={item.duration} type="number" step={0.1} min={0} />
+                    </ElCol>
+                    <ElCol span={8}>
+                      延迟：
+                      <input v-model={item.delay} type="number" step={0.1} min={0} />
+                    </ElCol>
+                    <ElCol span={8}>
+                      次数：
+                      <input v-model={item.count} type="number" min={0} />
+                    </ElCol>
+                  </ElRow>
+                  <ElSwitch v-model={item.infinite}></ElSwitch> 循环播放
+                </>
+              )
+            }}
+          </ElAlert>
+        ))}
+      </>
+    )
+
+    // 可添加的动画列表组件
+    const AnimateList = () => (
+      <ElTabs v-model={state.activeName} stretch>
+        {Object.keys(animationTabs).map((tabKey) => (
+          <ElTabPane label={animationTabs[tabKey].label} name={tabKey} key={tabKey}>
+            <ElRow gutter={10}>
+              {animationTabs[tabKey].value.map((animateItem: Animation) => (
+                <ElCol span={8} key={animateItem.value}>
+                  <div
+                    class={'animate-item'}
+                    onClick={() => addOrChangeAnimate(animateItem)}
+                    onMouseenter={() => runAnimation(animateItem)}
+                  >
+                    {animateItem.label}
+                  </div>
+                </ElCol>
+              ))}
+            </ElRow>
+          </ElTabPane>
+        ))}
+      </ElTabs>
+    )
+
+    return () => (
+      <div ref={target} class={styles.animate}>
+        <div v-show={!state.isAddAnimates}>
+          <ElButton
+            type={'primary'}
+            onClick={() => (state.isAddAnimates = true)}
+            plain
+            icon={'el-icon-plus'}
+          >
+            添加动画
+          </ElButton>
+          <ElButton
+            type={'primary'}
+            disabled={!currentBlock.value.animations?.length}
+            plain
+            icon={'el-icon-caret-right'}
+            onClick={() => runAnimation(currentBlock.value.animations)}
+          >
+            播放动画
+          </ElButton>
+          <AddedAnimateList />
+        </div>
+        <AnimateList v-show={state.isAddAnimates} />
+      </div>
+    )
+  }
+})
diff --git a/src/visual-editor/components/right-attribute-panel/components/animate/animate.module.scss b/src/visual-editor/components/right-attribute-panel/components/animate/animate.module.scss
new file mode 100644
index 0000000..972681b
--- /dev/null
+++ b/src/visual-editor/components/right-attribute-panel/components/animate/animate.module.scss
@@ -0,0 +1,67 @@
+.animate {
+  :global {
+    .el-col {
+      margin: 10px 0;
+    }
+
+    .animate-item {
+      @apply flex items-center justify-center;
+
+      height: 50px;
+      padding: 6px;
+      font-size: 12px;
+      background-color: #eee;
+      border-radius: 3px;
+      transition: background-color 0.2s, color 0.2s;
+
+      &:hover {
+        color: white;
+        cursor: pointer;
+        background-color: #1593ff;
+      }
+    }
+
+    .el-alert {
+      padding: 10px 8px;
+      font-size: 14px;
+
+      .title {
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-size: 14px;
+        font-weight: 600;
+        color: #333;
+      }
+
+      .label {
+        padding: 4px 10px;
+        cursor: pointer;
+        background-color: #e6e9ec;
+        border-radius: 12px;
+      }
+
+      .play {
+        font-size: 16px;
+        cursor: pointer;
+      }
+
+      span {
+        margin-right: 10px;
+      }
+
+      .el-alert__description {
+        font-size: inherit;
+
+        input[type='number'] {
+          display: inline-block;
+          height: 36px;
+          max-width: 48px;
+          padding: 6px;
+          color: #333;
+          background: #fff;
+          border: 1px solid #ccd5db;
+          border-radius: 3px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/visual-editor/components/right-attribute-panel/components/animate/animateConfig.ts b/src/visual-editor/components/right-attribute-panel/components/animate/animateConfig.ts
new file mode 100644
index 0000000..3233621
--- /dev/null
+++ b/src/visual-editor/components/right-attribute-panel/components/animate/animateConfig.ts
@@ -0,0 +1,469 @@
+import { Animation } from '@/visual-editor/visual-editor.utils'
+
+export interface animationBoxTs {
+  label: string
+  value: Animation[]
+}
+// 动画类型
+export interface animationTabsTs {
+  in: animationBoxTs
+  out: animationBoxTs
+  other: animationBoxTs
+}
+
+export const animationTabs: animationTabsTs = {
+  in: {
+    label: '进入',
+    value: []
+  },
+  out: {
+    label: '退出',
+    value: []
+  },
+  other: {
+    label: '其他',
+    value: []
+  }
+}
+
+const opt = [
+  {
+    label: '强调',
+    value: 'Attention Seekers',
+    children: [
+      {
+        label: '弹跳',
+        value: 'bounce'
+      },
+      {
+        label: '闪烁',
+        value: 'flash'
+      },
+      {
+        label: '跳动',
+        value: 'pulse'
+      },
+      {
+        label: '抖动',
+        value: 'headShake'
+      },
+      {
+        label: '摇摆',
+        value: 'swing'
+      },
+      {
+        label: '橡皮圈',
+        value: 'rubberBand'
+      },
+      {
+        label: '果冻',
+        value: 'jello'
+      },
+      {
+        label: '晃动',
+        value: 'tada'
+      },
+      {
+        label: '抖动',
+        value: 'wobble'
+      }
+    ]
+  },
+
+  {
+    label: '弹跳进入',
+    value: 'Bouncing Entrances',
+    children: [
+      {
+        label: '弹跳进入',
+        value: 'bounceIn'
+      },
+      {
+        label: '向下弹跳进入',
+        value: 'bounceInDown'
+      },
+      {
+        label: '向右弹跳进入',
+        value: 'bounceInLeft'
+      },
+      {
+        label: '向左弹跳进入',
+        value: 'bounceInRight'
+      },
+      {
+        label: '向上弹跳进入',
+        value: 'bounceInUp'
+      }
+    ]
+  },
+
+  {
+    label: '弹跳退出',
+    value: 'Bouncing Exits',
+    children: [
+      {
+        label: '弹跳退出',
+        value: 'bounceOut'
+      },
+      {
+        label: '向下弹跳退出',
+        value: 'bounceOutDown'
+      },
+      {
+        label: '向左弹跳退出',
+        value: 'bounceOutLeft'
+      },
+      {
+        label: '向右弹跳退出',
+        value: 'bounceOutRight'
+      },
+      {
+        label: '向上弹跳退出',
+        value: 'bounceOutUp'
+      }
+    ]
+  },
+
+  {
+    label: '渐显进入',
+    value: 'Fading Entrances',
+    children: [
+      {
+        label: '渐显进入',
+        value: 'fadeIn'
+      },
+      {
+        label: '向下渐显进入',
+        value: 'fadeInDown'
+      },
+      {
+        label: '由屏幕外向下渐显进入',
+        value: 'fadeInDownBig'
+      },
+      {
+        label: '向右显进入',
+        value: 'fadeInLeft'
+      },
+      {
+        label: '由屏幕外向右渐显进入',
+        value: 'fadeInLeftBig'
+      },
+      {
+        label: '向左渐显进入',
+        value: 'fadeInRight'
+      },
+      {
+        label: '由屏幕外向左渐显进入',
+        value: 'fadeInRightBig'
+      },
+      {
+        label: '向上渐显进入',
+        value: 'fadeInUp'
+      },
+      {
+        label: '由屏幕外向上渐显进入',
+        value: 'fadeInUpBig'
+      }
+    ]
+  },
+
+  {
+    label: '渐隐退出',
+    value: 'Fading Exits',
+    children: [
+      {
+        label: '渐隐退出',
+        value: 'fadeOut'
+      },
+      {
+        label: '向下渐隐退出',
+        value: 'fadeOutDown'
+      },
+      {
+        label: '向下渐隐退出屏幕外',
+        value: 'fadeOutDownBig'
+      },
+      {
+        label: '向左渐隐退出',
+        value: 'fadeOutLeft'
+      },
+      {
+        label: '向左渐隐退出屏幕外',
+        value: 'fadeOutLeftBig'
+      },
+      {
+        label: '向右渐隐退出',
+        value: 'fadeOutRight'
+      },
+      {
+        label: '向右渐隐退出屏幕外',
+        value: 'fadeOutRightBig'
+      },
+      {
+        label: '向上渐隐退出',
+        value: 'fadeOutUp'
+      },
+      {
+        label: '向上渐隐退出屏幕外',
+        value: 'fadeOutUpBig'
+      }
+    ]
+  },
+
+  {
+    label: '翻动',
+    value: 'Flippers',
+    children: [
+      {
+        label: '翻动',
+        value: 'flip'
+      },
+      {
+        label: '纵向翻动',
+        value: 'flipInX'
+      },
+      {
+        label: '横向翻动',
+        value: 'flipInY'
+      },
+      {
+        label: '立体纵向翻动',
+        value: 'flipOutX'
+      },
+      {
+        label: '立体横向翻动',
+        value: 'flipOutY'
+      }
+    ]
+  },
+
+  {
+    label: '加速进出',
+    value: 'Lightspeed',
+    children: [
+      {
+        label: '向左加速进入',
+        value: 'lightSpeedInRight'
+      },
+      {
+        label: '向右加速进入',
+        value: 'lightSpeedInLeft'
+      },
+      {
+        label: '向右加速退出',
+        value: 'lightSpeedOutRight'
+      },
+      {
+        label: '向左加速退出',
+        value: 'lightSpeedOutLeft'
+      }
+    ]
+  },
+
+  {
+    label: '旋转渐显',
+    value: 'Rotating Entrances',
+    children: [
+      {
+        label: '旋转渐显',
+        value: 'rotateIn'
+      },
+      {
+        label: '左下角旋转渐显',
+        value: 'rotateInDownLeft'
+      },
+      {
+        label: '右下角旋转渐显',
+        value: 'rotateInDownRight'
+      },
+      {
+        label: '左上角旋转渐显',
+        value: 'rotateInUpLeft'
+      },
+      {
+        label: '右上角旋转渐显',
+        value: 'rotateInUpRight'
+      }
+    ]
+  },
+
+  {
+    label: '旋转渐隐',
+    value: 'Rotating Exits',
+    children: [
+      {
+        label: '旋转渐隐',
+        value: 'rotateOut'
+      },
+      {
+        label: '左下角旋转渐隐',
+        value: 'rotateOutDownLeft'
+      },
+      {
+        label: '左下角旋转渐隐',
+        value: 'rotateOutDownRight'
+      },
+      {
+        label: '左上角旋转渐隐',
+        value: 'rotateOutUpLeft'
+      },
+      {
+        label: '右上角旋转渐隐',
+        value: 'rotateOutUpRight'
+      }
+    ]
+  },
+
+  {
+    label: '平移进入',
+    value: 'Sliding Entrances',
+    children: [
+      {
+        label: '向上平移进入',
+        value: 'slideInUp'
+      },
+      {
+        label: '向下平移进入',
+        value: 'slideInDown'
+      },
+      {
+        label: '向右平移进入',
+        value: 'slideInLeft'
+      },
+      {
+        label: '向左平移进入',
+        value: 'slideInRight'
+      }
+    ]
+  },
+  {
+    label: '平移退出',
+    value: 'Sliding Exits',
+    children: [
+      {
+        label: '向上平移退出',
+        value: 'slideOutUp'
+      },
+      {
+        label: '向下平移退出',
+        value: 'slideOutDown'
+      },
+      {
+        label: '向左平移退出',
+        value: 'slideOutLeft'
+      },
+      {
+        label: '向右平移退出',
+        value: 'slideOutRight'
+      }
+    ]
+  },
+
+  {
+    label: '放大进入',
+    value: 'Zoom Entrances',
+    children: [
+      {
+        label: '放大进入',
+        value: 'zoomIn'
+      },
+      {
+        label: '向下放大进入',
+        value: 'zoomInDown'
+      },
+      {
+        label: '向右放大进入',
+        value: 'zoomInLeft'
+      },
+      {
+        label: '向左放大进入',
+        value: 'zoomInRight'
+      },
+      {
+        label: '向上放大进入',
+        value: 'zoomInUp'
+      }
+    ]
+  },
+
+  {
+    label: '缩小退出',
+    value: 'Zoom Exits',
+    children: [
+      {
+        label: '缩小退出',
+        value: 'zoomOut'
+      },
+      {
+        label: '向下缩小退出',
+        value: 'zoomOutDown'
+      },
+      {
+        label: '向左缩小退出',
+        value: 'zoomOutLeft'
+      },
+      {
+        label: '向右缩小退出',
+        value: 'zoomOutRight'
+      },
+      {
+        label: '向上缩小退出',
+        value: 'zoomOutUp'
+      }
+    ]
+  },
+
+  {
+    label: '特殊效果',
+    value: 'Specials',
+    children: [
+      {
+        label: '悬挂',
+        value: 'hinge'
+      },
+      {
+        label: '滚动进入',
+        value: 'rollIn'
+      },
+      {
+        label: '滚动退出',
+        value: 'rollOut'
+      }
+    ]
+  }
+]
+
+/**
+ * @return {Object} { animationValue: animatonLabel }
+ */
+const inReg = /进|渐显/
+const outReg = /退|渐隐/
+const defaultOption = {
+  delay: 0,
+  count: 1,
+  duration: 1,
+  infinite: false
+}
+for (let index = 0; index < opt.length; index++) {
+  const items = opt[index].children
+  items.forEach((item) => {
+    if (inReg.test(item.label)) {
+      animationTabs.in.value.push({
+        ...item,
+        ...defaultOption
+      })
+    } else if (outReg.test(item.label)) {
+      animationTabs.out.value.push({
+        ...item,
+        ...defaultOption
+      })
+    } else {
+      animationTabs.other.value.push({
+        ...item,
+        ...defaultOption
+      })
+    }
+  })
+}
+
+export default animationTabs
diff --git a/src/visual-editor/components/right-attribute-panel/components/AttrEditor.tsx b/src/visual-editor/components/right-attribute-panel/components/attr-editor/AttrEditor.tsx
similarity index 99%
rename from src/visual-editor/components/right-attribute-panel/components/AttrEditor.tsx
rename to src/visual-editor/components/right-attribute-panel/components/attr-editor/AttrEditor.tsx
index 93def2d..ca68422 100644
--- a/src/visual-editor/components/right-attribute-panel/components/AttrEditor.tsx
+++ b/src/visual-editor/components/right-attribute-panel/components/attr-editor/AttrEditor.tsx
@@ -19,7 +19,7 @@ import {
   ElPopover
 } from 'element-plus'
 import { VisualEditorProps, VisualEditorPropsType } from '@/visual-editor/visual-editor.props'
-import { TablePropEditor } from './'
+import { TablePropEditor } from '../'
 import { useDotProp } from '@/visual-editor/hooks/useDotProp'
 import { useVisualData } from '@/visual-editor/hooks/useVisualData'
 
diff --git a/src/visual-editor/components/right-attribute-panel/components/index.ts b/src/visual-editor/components/right-attribute-panel/components/index.ts
index a593a11..48b9734 100644
--- a/src/visual-editor/components/right-attribute-panel/components/index.ts
+++ b/src/visual-editor/components/right-attribute-panel/components/index.ts
@@ -6,4 +6,5 @@
  * @update: 2021/5/30 10:57
  */
 export { TablePropEditor } from './table-prop-editor/table-prop-editor'
-export { AttrEditor } from './AttrEditor'
+export { AttrEditor } from './attr-editor/AttrEditor'
+export { Animate } from './animate/Animate'
diff --git a/src/visual-editor/components/right-attribute-panel/index.module.scss b/src/visual-editor/components/right-attribute-panel/index.module.scss
index b6f4123..d1e3c0d 100644
--- a/src/visual-editor/components/right-attribute-panel/index.module.scss
+++ b/src/visual-editor/components/right-attribute-panel/index.module.scss
@@ -9,53 +9,64 @@ $boxShadow: -2px 0 4px 0 rgb(0 0 0 / 10%);
 
 .drawer {
   position: absolute;
-  right: 0;
   top: 0;
+  right: 0;
   bottom: 0;
-  width: 320px;
+  z-index: 20;
+  width: 350px;
   background-color: white;
   transform: translateX(100%);
-  transition: transform 0.5s ease-in-out;
   box-shadow: $boxShadow;
-  z-index: 20;
+  transition: transform 0.5s ease-in-out;
+  contain: layout;
+
   &.is-open {
     transform: translateX(0);
-    /*.floating-action-btn {
+
+    /* .floating-action-btn {
       transform: translateX(0);
-    }*/
+    } */
   }
-  /*&:hover {
+
+  /* &:hover {
     .floating-action-btn {
       transform: translateX(-20px);
     }
-  }*/
-}
-
-.drawer.is-open {
-  transform: translateX(0);
+  } */
 }
 
 .floating-action-btn {
   position: absolute;
+  top: 50%;
+  left: 0;
+  display: flex;
   width: 20px;
   height: 80px;
+  cursor: pointer;
   background: #fff;
+  transform: translateX(-20px);
   box-shadow: $boxShadow;
-  display: flex;
+  transition: transform 0.5s ease-in-out;
   justify-content: center;
   align-items: center;
-  transform: translateX(-20px);
-  transition: transform 0.5s ease-in-out;
-  left: 0;
-  top: 50%;
-  cursor: pointer;
 }
 
 .attrs {
   position: absolute;
-  padding: 12px;
   width: 100%;
   height: 100%;
+  overflow-y: hidden;
   background-color: white;
-  overflow: auto;
+
+  .tabs {
+    height: 100%;
+
+    :global {
+      .el-tabs__content {
+        height: 100%;
+        padding-bottom: 50px;
+        overflow-y: auto;
+      }
+    }
+  }
 }
diff --git a/src/visual-editor/components/right-attribute-panel/index.tsx b/src/visual-editor/components/right-attribute-panel/index.tsx
index 5df85f8..2647fad 100644
--- a/src/visual-editor/components/right-attribute-panel/index.tsx
+++ b/src/visual-editor/components/right-attribute-panel/index.tsx
@@ -1,7 +1,7 @@
 /*
  * @Author: 卜启缘
  * @Date: 2021-06-01 13:22:14
- * @LastEditTime: 2021-06-10 16:33:02
+ * @LastEditTime: 2021-06-12 19:25:26
  * @LastEditors: 卜启缘
  * @Description: 属性编辑器
  * @FilePath: \vite-vue3-lowcode\src\visual-editor\components\right-attribute-panel\index.tsx
@@ -13,9 +13,11 @@ import styles from './index.module.scss'
 import './index.common.scss'
 import { ElTabPane, ElTabs } from 'element-plus'
 
+console.log(styles, 'styles')
+
 import MonacoEditor from '../common/monaco-editor/MonacoEditor'
 import { useVisualData } from '@/visual-editor/hooks/useVisualData'
-import { AttrEditor } from './components'
+import { AttrEditor, Animate } from './components'
 
 export default defineComponent({
   name: 'RightAttributePanel',
@@ -43,14 +45,17 @@ export default defineComponent({
             <i class={`el-icon-d-arrow-${state.isOpen ? 'right' : 'left'}`}></i>
           </div>
           <div class={styles.attrs}>
-            <ElTabs v-model={state.activeName}>
+            <ElTabs v-model={state.activeName} type="border-card" class={styles.tabs}>
               <ElTabPane label="属性面板" name="attr">
                 <AttrEditor />
               </ElTabPane>
+              <ElTabPane label="动画" name="animate" lazy>
+                <Animate />
+              </ElTabPane>
               <ElTabPane label="JSON" name="json" lazy>
                 <MonacoEditor
                   code={JSON.stringify(currentBlock.value)}
-                  layout={{ width: 300, height: 800 }}
+                  layout={{ width: 320, height: 800 }}
                   vid={state.activeName == 'json' ? currentBlock.value._vid : -1}
                   onChange={handleSchemaChange}
                   title=""
diff --git a/src/visual-editor/components/simulator-editor/draggable-transition-group.vue b/src/visual-editor/components/simulator-editor/draggable-transition-group.vue
index 0704337..0f59116 100644
--- a/src/visual-editor/components/simulator-editor/draggable-transition-group.vue
+++ b/src/visual-editor/components/simulator-editor/draggable-transition-group.vue
@@ -32,8 +32,7 @@
  * @update: 2021/5/1 23:15
  */
 import { computed, defineComponent, reactive, toRefs, SetupContext } from 'vue'
-// @ts-ignore 暂时方案 待官方修复
-import draggable from 'vuedraggable/src/vuedraggable'
+import draggable from 'vuedraggable'
 import { useVModel } from '@vueuse/core'
 
 export default defineComponent({
@@ -76,6 +75,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import './func.scss';
+
 .flip-list-move {
   transition: transform 0.5s;
 }
@@ -96,5 +97,9 @@ export default defineComponent({
   &.isDrag div[data-draggable='true'] {
     padding: 8px 0;
   }
+
+  &.isDrag:not(.no-child) :deep(.list-group-item.has-slot) {
+    @include showContainerBorder;
+  }
 }
 </style>
diff --git a/src/visual-editor/components/simulator-editor/func.scss b/src/visual-editor/components/simulator-editor/func.scss
new file mode 100644
index 0000000..c0aeb48
--- /dev/null
+++ b/src/visual-editor/components/simulator-editor/func.scss
@@ -0,0 +1,22 @@
+/**
+* 显示容器边界
+*/
+
+@mixin showContainerBorder {
+  outline: 2px dashed #b0c1d7;
+  outline-offset: -2px;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: -3px;
+    padding: 3px;
+    font-size: 12px;
+    font-weight: 700;
+    color: white;
+    background-color: #006eff;
+    border-radius: 3px;
+    content: attr(data-label);
+    transform: translate(-100%, 0);
+  }
+}
diff --git a/src/visual-editor/components/simulator-editor/simulator-editor.vue b/src/visual-editor/components/simulator-editor/simulator-editor.vue
index 74ab89b..9f6c7b4 100644
--- a/src/visual-editor/components/simulator-editor/simulator-editor.vue
+++ b/src/visual-editor/components/simulator-editor/simulator-editor.vue
@@ -1,5 +1,5 @@
 <template>
-  <draggable-transition-group v-model:drag="drag" v-model="currentPage.blocks">
+  <DraggableTransitionGroup v-model:drag="drag" v-model="currentPage.blocks">
     <template #item="{ element: outElement }">
       <div
         class="list-group-item"
@@ -8,7 +8,7 @@
           focus: outElement.focus,
           focusWithChild: outElement.focusWithChild,
           drag,
-          ['no-child']: !Object.keys(outElement.props.slots || {}).length
+          ['has-slot']: !!Object.keys(outElement.props.slots || {}).length
         }"
         @contextmenu.stop.prevent="onContextmenuBlock($event, outElement)"
         @mousedown="selectComp(outElement)"
@@ -21,8 +21,9 @@
           }"
         >
           <template v-for="(value, slotKey) in outElement.props?.slots" :key="slotKey" #[slotKey]>
-            <slot-item
+            <SlotItem
               v-model:children="value.children"
+              v-model:drag="drag"
               :slot-key="slotKey"
               :config="visualConfig"
               :on-contextmenu-block="onContextmenuBlock"
@@ -32,7 +33,7 @@
         </comp-render>
       </div>
     </template>
-  </draggable-transition-group>
+  </DraggableTransitionGroup>
 </template>
 
 <script lang="tsx">
@@ -185,6 +186,8 @@ export default defineComponent({
 })
 </script>
 <style lang="scss" scoped>
+@import './func.scss';
+
 .list-group-item {
   position: relative;
   padding: 3px;
@@ -201,27 +204,12 @@ export default defineComponent({
     display: none;
   }
 
-  &.no-child {
+  &:not(.has-slot) {
     content: '';
   }
 
   &.focusWithChild {
-    outline: 2px dashed #b0c1d7;
-    outline-offset: -2px;
-  }
-
-  &.focusWithChild::before {
-    position: absolute;
-    top: 0;
-    left: -3px;
-    padding: 3px;
-    font-size: 12px;
-    font-weight: 700;
-    color: white;
-    background-color: #006eff;
-    border-radius: 3px;
-    content: attr(data-label);
-    transform: translate(-100%, 0);
+    @include showContainerBorder;
   }
 
   i {
diff --git a/src/visual-editor/components/simulator-editor/slot-item.vue b/src/visual-editor/components/simulator-editor/slot-item.vue
index 5c2c33a..85e1174 100644
--- a/src/visual-editor/components/simulator-editor/slot-item.vue
+++ b/src/visual-editor/components/simulator-editor/slot-item.vue
@@ -1,10 +1,11 @@
 <template>
   <draggable-transition-group
+    :key="slotKey"
     v-model="slotChildren"
-    v-model:drag="drag"
+    v-model:drag="isDrag"
     class="inner-draggable"
     :class="{ slot: !slotChildren?.length }"
-    :data-slot="`插槽（${slotKey}）\n 拖拽组件到此处`"
+    :data-slot="`插槽（${slotKey}）\n 拖拽组件到此处${drag}`"
   >
     <template #item="{ element: innerElement }">
       <div
@@ -21,10 +22,11 @@
             pointerEvents: Object.keys(innerElement.props?.slots || {}).length ? 'auto' : 'none'
           }"
         >
-          <template v-for="(value, slotKey) in innerElement.props?.slots" :key="slotKey" #[slotKey]>
+          <template v-for="(value, key) in innerElement.props?.slots" :key="key" #[key]>
             <SlotItem
               v-model:children="value.children"
-              :slot-key="slotKey"
+              v-model:drag="isDrag"
+              :slot-key="key"
               :config="config"
               :on-contextmenu-block="onContextmenuBlock"
               :select-comp="selectComp"
@@ -45,7 +47,7 @@
  * @update: 2021/5/2 22:36
  */
 
-import { defineComponent, ref } from 'vue'
+import { defineComponent } from 'vue'
 import { useVModel } from '@vueuse/core'
 import DraggableTransitionGroup from './draggable-transition-group.vue'
 import CompRender from './comp-render'
@@ -59,6 +61,10 @@ export default defineComponent({
       type: Object,
       default: () => ({})
     },
+    drag: {
+      type: Boolean,
+      default: false
+    },
     children: {
       type: Array,
       default: () => []
@@ -72,12 +78,10 @@ export default defineComponent({
       required: true
     }
   },
-  emits: ['update:children', 'on-selected'],
+  emits: ['update:children', 'on-selected', 'update:drag'],
   setup(props, { emit }) {
-    const drag = ref(false)
-
     return {
-      drag,
+      isDrag: useVModel(props, 'drag', emit),
       slotChildren: useVModel(props, 'children', emit)
     }
   }
diff --git a/src/visual-editor/visual-editor.utils.ts b/src/visual-editor/visual-editor.utils.ts
index dd94d46..94799c2 100644
--- a/src/visual-editor/visual-editor.utils.ts
+++ b/src/visual-editor/visual-editor.utils.ts
@@ -18,6 +18,7 @@ export interface VisualEditorBlockData {
   props: Record<string, any> // 组件的设计属性
   model: Record<string, string> // 绑定的字段
   slotName?: string // 组件唯一标识
+  animations?: Animation[] // 动画集
   [prop: string]: any
 }
 
@@ -41,6 +42,14 @@ export interface VisualEditorModelValue {
   pages: VisualEditorPages
 }
 
+export interface Animation {
+  label: string // 动画名称
+  value: string // 动画类名
+  duration: number // 动画持续时间
+  delay: number // 动画延迟多久执行
+  count: number // 动画执行次数
+  infinite: boolean // 是否无限循环动画
+}
 export interface VisualEditorComponent {
   key: string // 组件名称
   moduleName: keyof ComponentModules // 模块名称
@@ -55,7 +64,7 @@ export interface VisualEditorComponent {
     custom: Record<string, any>
   }) => JSX.Element
   props?: Record<string, VisualEditorProps>
-  model?: Record<string, string>
+  animations?: Animation[] // 动画集
   resize?: { width?: boolean; height?: boolean }
 }
 
@@ -95,6 +104,7 @@ export function createNewBlock({
       }
       return prev
     }, {}),
+    animations: [], // 动画集
     model: {}
   }
 }
diff --git a/stylelint.config.js b/stylelint.config.js
index 37bd976..d3b66aa 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -6,7 +6,7 @@ module.exports = {
     'selector-pseudo-class-no-unknown': [
       true,
       {
-        ignorePseudoClasses: ['global']
+        ignorePseudoClasses: ['global', 'deep']
       }
     ],
     'selector-pseudo-element-no-unknown': [
diff --git a/tsconfig.json b/tsconfig.json
index b448416..1315780 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -26,6 +26,6 @@
     },
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "preview/**/*.vue"],
   "exclude": ["dist", "node_modules"]
 }
diff --git a/yarn.lock b/yarn.lock
index 57babe2..4344815 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -821,13 +821,13 @@
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.2.3.tgz#2e8e008b1cc3a6ad1dfbec75743c7ffd9b4872a6"
   integrity sha512-LlnLpObkGKZ+b7dcpL4T24l13nPSHLjo+6Oc7MbZiKz5PMAUzADfNJ3EKfYIQ0l0969nxf2jp/9vsfnuJ7h6fw==
 
-"@volar/code-gen@^0.25.21":
-  version "0.25.21"
-  resolved "https://registry.yarnpkg.com/@volar/code-gen/-/code-gen-0.25.21.tgz#9bc5e6c1599d750f6eca26267278832038ac9ead"
-  integrity sha512-PkBI6puXOjVnP88moD1IrZtpOqoTtqkmMlq9C4vqRVhrHBkTHnFRCvFSgBz52utciMMRAF/wOUP837AI6lt7dA==
+"@volar/code-gen@^0.25.22":
+  version "0.25.22"
+  resolved "https://registry.yarnpkg.com/@volar/code-gen/-/code-gen-0.25.22.tgz#405035eb7e19573f630070677fa91553d79a47bc"
+  integrity sha512-CStz1TMxJtEQgXosaOLIVykxQBg5VFvxsvlcrCUum1ZCzpRsXPldS/3OdPOCgkdyE/i9kVzKOvt8DYChKTCPqw==
   dependencies:
-    "@volar/shared" "^0.25.21"
-    "@volar/source-map" "^0.25.21"
+    "@volar/shared" "^0.25.22"
+    "@volar/source-map" "^0.25.22"
 
 "@volar/html2pug@^0.25.4":
   version "0.25.4"
@@ -839,27 +839,27 @@
     htmlparser2 "^6.1.0"
     pug "^3.0.2"
 
-"@volar/shared@^0.25.21":
-  version "0.25.21"
-  resolved "https://registry.yarnpkg.com/@volar/shared/-/shared-0.25.21.tgz#654dd817b9a07ef67065929e96f97bcee8dcf118"
-  integrity sha512-XiMLr5MQ443RmgQ9Hziaw2NYQpluGMfZehY9mFWy6CE0T49foPJ65VISIRufthG+yrtiOUc+5XLnw6v449nEcw==
+"@volar/shared@^0.25.22":
+  version "0.25.22"
+  resolved "https://registry.yarnpkg.com/@volar/shared/-/shared-0.25.22.tgz#0dbf7fcf201b3a0beacc6fd82d407a748729a978"
+  integrity sha512-hZQ4dDy0/MgjVONFhs7P2ECDamajwmpSErFYLaLwFClh7DNn6gXYEsawr5kS5zHYs/HaSfSwNQ4sx5Y2MInCZw==
   dependencies:
     upath "^2.0.1"
     vscode-languageserver "^7.1.0-next.4"
 
-"@volar/source-map@^0.25.21":
-  version "0.25.21"
-  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-0.25.21.tgz#ce10f21149cb39abcaff9fc822a2b9441be1bc8b"
-  integrity sha512-NVJMK/2YgN4T4wx02dPFVvn7zTvhiqLH6yIr9hAtFgBetF+gpJWFEVW1rIcbF7WiTnTvVt7PgtHUBat6AXvOUw==
+"@volar/source-map@^0.25.22":
+  version "0.25.22"
+  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-0.25.22.tgz#5150401e1950dd35fb11720f79e59799d3885741"
+  integrity sha512-J6xntLQ8I6BMqPBaQZN3JROJPfcFexo/5KecMxGqHkdLC/M/DtVOAp9zkwAXu7XuXA/nF6iGxmL3TYELFRryzw==
   dependencies:
-    "@volar/shared" "^0.25.21"
+    "@volar/shared" "^0.25.22"
 
-"@volar/transforms@^0.25.21":
-  version "0.25.21"
-  resolved "https://registry.yarnpkg.com/@volar/transforms/-/transforms-0.25.21.tgz#6051b61b630c2c512f81fc06d7311017d8c2f313"
-  integrity sha512-hBq/fDLVsD8bkauFM2vBEbZY1W4yOidd2n6c6Y2uQ4VLfTLjb5DlBTVkNXJppsGsXqA1evXnEZbzIaF/Ad6DXQ==
+"@volar/transforms@^0.25.22":
+  version "0.25.22"
+  resolved "https://registry.yarnpkg.com/@volar/transforms/-/transforms-0.25.22.tgz#7f4c10d63f221f3892e951c857bf828de139a29a"
+  integrity sha512-WcQU2MzAsVILITxbt3urNPUbPlOvsdGuChwCNc9OXV1OgBOTJtJ9sQV63pYr+tb7Yl3Ie2S8Q7lNMy8gS1jvLQ==
   dependencies:
-    "@volar/shared" "^0.25.21"
+    "@volar/shared" "^0.25.22"
 
 "@vue/babel-helper-vue-transform-on@^1.0.2":
   version "1.0.2"
@@ -881,17 +881,6 @@
     html-tags "^3.1.0"
     svg-tags "^1.0.0"
 
-"@vue/compiler-core@3.0.11":
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.11.tgz#5ef579e46d7b336b8735228758d1c2c505aae69a"
-  integrity sha512-6sFj6TBac1y2cWCvYCA8YzHJEbsVkX7zdRs/3yK/n1ilvRqcn983XvpBbnN3v4mZ1UiQycTvOiajJmOgN9EVgw==
-  dependencies:
-    "@babel/parser" "^7.12.0"
-    "@babel/types" "^7.12.0"
-    "@vue/shared" "3.0.11"
-    estree-walker "^2.0.1"
-    source-map "^0.6.1"
-
 "@vue/compiler-core@3.1.1":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.1.1.tgz#4f2c5d70eabd454675714cc8bd2b97f6a8efb196"
@@ -903,14 +892,6 @@
     estree-walker "^2.0.1"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@3.0.11":
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.11.tgz#b15fc1c909371fd671746020ba55b5dab4a730ee"
-  integrity sha512-+3xB50uGeY5Fv9eMKVJs2WSRULfgwaTJsy23OIltKgMrynnIj8hTYY2UL97HCoz78aDw1VDXdrBQ4qepWjnQcw==
-  dependencies:
-    "@vue/compiler-core" "3.0.11"
-    "@vue/shared" "3.0.11"
-
 "@vue/compiler-dom@3.1.1", "@vue/compiler-dom@^3.0.11":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.1.1.tgz#ef60d856ac2ede5b2ad5c72a7a68122895e3d652"
@@ -919,29 +900,7 @@
     "@vue/compiler-core" "3.1.1"
     "@vue/shared" "3.1.1"
 
-"@vue/compiler-sfc@3.0.11":
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.11.tgz#cd8ca2154b88967b521f5ad3b10f5f8b6b665679"
-  integrity sha512-7fNiZuCecRleiyVGUWNa6pn8fB2fnuJU+3AGjbjl7r1P5wBivfl02H4pG+2aJP5gh2u+0wXov1W38tfWOphsXw==
-  dependencies:
-    "@babel/parser" "^7.13.9"
-    "@babel/types" "^7.13.0"
-    "@vue/compiler-core" "3.0.11"
-    "@vue/compiler-dom" "3.0.11"
-    "@vue/compiler-ssr" "3.0.11"
-    "@vue/shared" "3.0.11"
-    consolidate "^0.16.0"
-    estree-walker "^2.0.1"
-    hash-sum "^2.0.0"
-    lru-cache "^5.1.1"
-    magic-string "^0.25.7"
-    merge-source-map "^1.1.0"
-    postcss "^8.1.10"
-    postcss-modules "^4.0.0"
-    postcss-selector-parser "^6.0.4"
-    source-map "^0.6.1"
-
-"@vue/compiler-sfc@^3.0.11":
+"@vue/compiler-sfc@3.1.1", "@vue/compiler-sfc@^3.0.11":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.1.1.tgz#d4e4507c013d0b219f0b106b317ec5bb1cde3398"
   integrity sha512-lSgMsZaYHF+bAgryq5aUqpvyfhu52GJI2/4LoiJCE5uaxc6FCZfxfgqgw/d9ltiZghv+HiISFtmQVAVvlsk+/w==
@@ -963,14 +922,6 @@
     postcss-selector-parser "^6.0.4"
     source-map "^0.6.1"
 
-"@vue/compiler-ssr@3.0.11":
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.11.tgz#ac5a05fd1257412fa66079c823d8203b6a889a13"
-  integrity sha512-66yUGI8SGOpNvOcrQybRIhl2M03PJ+OrDPm78i7tvVln86MHTKhM3ERbALK26F7tXl0RkjX4sZpucCpiKs3MnA==
-  dependencies:
-    "@vue/compiler-dom" "3.0.11"
-    "@vue/shared" "3.0.11"
-
 "@vue/compiler-ssr@3.1.1":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.1.1.tgz#1d08b98601397258ed059b75966e0e94a385d770"
@@ -984,42 +935,30 @@
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.14.tgz#6ed2d6f8d66a9256c9ad04bfff08309ba87b9723"
   integrity sha512-44fPrrN1cqcs6bFkT0C+yxTM6PZXLbR+ESh1U1j8UD22yO04gXvxH62HApMjLbS3WqJO/iCNC+CYT+evPQh2EQ==
 
-"@vue/reactivity@3.0.11":
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.11.tgz#07b588349fd05626b17f3500cbef7d4bdb4dbd0b"
-  integrity sha512-SKM3YKxtXHBPMf7yufXeBhCZ4XZDKP9/iXeQSC8bBO3ivBuzAi4aZi0bNoeE2IF2iGfP/AHEt1OU4ARj4ao/Xw==
-  dependencies:
-    "@vue/shared" "3.0.11"
-
-"@vue/reactivity@^3.0.11":
+"@vue/reactivity@3.1.1", "@vue/reactivity@^3.0.11":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.1.1.tgz#9c02fd146a6c3b03e7d658b7cf76f4b69b0f98c8"
   integrity sha512-DsH5woNVCcPK1M0RRYVgJEU1GJDU2ASOKpAqW3ppHk+XjoFLCbqc/26RTCgTpJYd9z8VN+79Q1u7/QqgQPbuLQ==
   dependencies:
     "@vue/shared" "3.1.1"
 
-"@vue/runtime-core@3.0.11":
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.11.tgz#c52dfc6acf3215493623552c1c2919080c562e44"
-  integrity sha512-87XPNwHfz9JkmOlayBeCCfMh9PT2NBnv795DSbi//C/RaAnc/bGZgECjmkD7oXJ526BZbgk9QZBPdFT8KMxkAg==
+"@vue/runtime-core@3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.1.1.tgz#542110c09a643d7d80646a2f071aff6b324c4158"
+  integrity sha512-GboqR02txOtkd9F3Ysd8ltPL68vTCqIx2p/J52/gFtpgb5FG9hvOAPEwFUqxeEJRu7ResvQnmdOHiEycGPCLhQ==
   dependencies:
-    "@vue/reactivity" "3.0.11"
-    "@vue/shared" "3.0.11"
+    "@vue/reactivity" "3.1.1"
+    "@vue/shared" "3.1.1"
 
-"@vue/runtime-dom@3.0.11":
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.11.tgz#7a552df21907942721feb6961c418e222a699337"
-  integrity sha512-jm3FVQESY3y2hKZ2wlkcmFDDyqaPyU3p1IdAX92zTNeCH7I8zZ37PtlE1b9NlCtzV53WjB4TZAYh9yDCMIEumA==
+"@vue/runtime-dom@3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.1.1.tgz#5539bbce132d29f6445b4964cb7b4164a89a5ce6"
+  integrity sha512-o57n/199e/BBAmLRMSXmD2r12Old/h/gf6BgL0RON1NT2pwm6MWaMY4Ul55eyq+FsDILz4jR/UgoPQ9vYB8xcw==
   dependencies:
-    "@vue/runtime-core" "3.0.11"
-    "@vue/shared" "3.0.11"
+    "@vue/runtime-core" "3.1.1"
+    "@vue/shared" "3.1.1"
     csstype "^2.6.8"
 
-"@vue/shared@3.0.11":
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.11.tgz#20d22dd0da7d358bb21c17f9bde8628152642c77"
-  integrity sha512-b+zB8A2so8eCE0JsxjL24J7vdGl8rzPQ09hZNhystm+KqSbKcAej1A+Hbva1rCMmTTqA+hFnUSDc5kouEo0JzA==
-
 "@vue/shared@3.1.1", "@vue/shared@^3.0.11":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.1.tgz#2287cfc3dc20e5b20aeb65c2c3a56533bdca801c"
@@ -1121,6 +1060,11 @@ ajv@^8.0.1:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 ansi-align@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"
@@ -1494,9 +1438,9 @@ camelcase@^6.0.0:
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
 caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219:
-  version "1.0.30001236"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001236.tgz#0a80de4cdf62e1770bb46a30d884fc8d633e3958"
-  integrity sha512-o0PRQSrSCGJKCPZcgMzl5fUaj5xHe8qA2m4QRvnyY4e1lITqoNkr7q/Oh1NcpGSy0Th97UZ35yoKcINPoq7YOQ==
+  version "1.0.30001237"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001237.tgz#4b7783661515b8e7151fc6376cfd97f0e427b9e5"
+  integrity sha512-pDHgRndit6p1NR2GhzMbQ6CkRrp4VKuSsqbcLeOQppYPKOYkKT/6ZvZDvKJUqcmtyWIAHuZq3SVS2vc1egCZzw==
 
 capital-case@^1.0.4:
   version "1.0.4"
@@ -2190,10 +2134,10 @@ electron-to-chromium@^1.3.723:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz#0728587f1b9b970ec9ffad932496429aef750d09"
   integrity sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==
 
-element-plus@^1.0.2-beta.46:
-  version "1.0.2-beta.46"
-  resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-1.0.2-beta.46.tgz#2423dcc56ce4285d7f2365ebd5622b8b3c7d053b"
-  integrity sha512-GevU3xNiIp+p9ZGnGRtFaJPnofsMXKwqV+cTXC266vUWw08Hbt1ronTsss/eJJ1OIHLoaFq4febv1MMTBSSjlQ==
+element-plus@^1.0.2-beta.48:
+  version "1.0.2-beta.48"
+  resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-1.0.2-beta.48.tgz#8da99decd397b9975cd894d389096d2ed58c699e"
+  integrity sha512-BKLjkZqZCJIYxUgwEj4ojaU0iEXHf6LPma100rMQPXZ/AUEVx3yjuo3fmTV54CTsIG+V2W1VCEnD7jF2iw+qrQ==
   dependencies:
     "@popperjs/core" "^2.4.4"
     "@types/lodash" "^4.14.161"
@@ -2380,10 +2324,10 @@ eslint-plugin-prettier@^3.4.0:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-eslint-plugin-vue@^7.10.0:
-  version "7.10.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-7.10.0.tgz#251749aa99e089e085275f011042c6e74189f89a"
-  integrity sha512-xdr6e4t/L2moRAeEQ9HKgge/hFq+w9v5Dj+BA54nTAzSFdUyKLiSOdZaRQjCHMY0Pk2WaQBFH9QiWG60xiC+6A==
+eslint-plugin-vue@^7.11.0:
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-7.11.0.tgz#c19b098899b7e3cd692beffbbe73611064ef1ea6"
+  integrity sha512-Qwo8wilqnOXnG9B5auEiTstyaHefyhHd5lEhhxemwXoWsAxIW2yppzuVudowC5n+qn1nMLNV9TANkTthBK7Waw==
   dependencies:
     eslint-utils "^2.1.0"
     natural-compare "^1.4.0"
@@ -4196,10 +4140,10 @@ mkdirp@^0.5.1:
   dependencies:
     minimist "^1.2.5"
 
-monaco-editor@^0.24.0:
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.24.0.tgz#990b55096bcc95d08d8d28e55264c6eb17707269"
-  integrity sha512-o1f0Lz6ABFNTtnEqqqvlY9qzNx24rQZx1RgYNQ8SkWkE+Ka63keHH/RqxQ4QhN4fs/UYOnvAtEUZsPrzccH++A==
+monaco-editor@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.25.0.tgz#4cbbe25adb4661a1673e4893cdc13dfa406b665e"
+  integrity sha512-Lzk9CGIvFXly1J0s5t8SXk1+UleahGqcoHnSoPe2OBSrKhWLbR7Nvk2QQwaEzJQi4Wtbu5gou2qat1CAbvB82A==
 
 mri@^1.1.5:
   version "1.1.6"
@@ -4809,18 +4753,18 @@ postcss-value-parser@^4.1.0:
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
 postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.6:
-  version "7.0.35"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
-  integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
+  version "7.0.36"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb"
+  integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==
   dependencies:
     chalk "^2.4.2"
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
 postcss@^8.1.10, postcss@^8.3.0:
-  version "8.3.1"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.1.tgz#71f380151c227f83b898294a46481f689f86b70a"
-  integrity sha512-9qH0MGjsSm+fjxOi3GnwViL1otfi7qkj+l/WX5gcRGmZNGsIcqc+A5fBkE6PUobEQK4APqYVaES+B3Uti98TCw==
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.2.tgz#ed3ec489f5428af5740cd6effcc216b4d455ee64"
+  integrity sha512-y1FK/AWdZlBF5lusS5j5l4/vF67+vQZt1SXPVJ32y1kRGDQyrs1zk32hG1cInRTu14P0V+orPz+ifwW/7rR4bg==
   dependencies:
     colorette "^1.2.2"
     nanoid "^3.1.23"
@@ -5323,9 +5267,9 @@ rimraf@~2.6.2:
     glob "^7.1.3"
 
 rollup@^2.38.5:
-  version "2.51.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.51.1.tgz#87bcd4095fe79b14c9bec0edc7ffa44e4827f793"
-  integrity sha512-8xfDbAtBleXotb6qKEHWuo/jkn94a9dVqGc7Rwl3sqspCVlnCfbRek7ldhCARSi7h32H0xR4QThm1t9zHN+3uw==
+  version "2.51.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.51.2.tgz#6de71e28c833089a0bd745a09671a3e2b92af6b7"
+  integrity sha512-ReV2eGEadA7hmXSzjxdDKs10neqH2QURf2RxJ6ayAlq93ugy6qIvXMmbc5cWMGCDh1h5T4thuWO1e2VNbMq8FA==
   optionalDependencies:
     fsevents "~2.3.1"
 
@@ -5994,9 +5938,9 @@ tslib@^1.8.1, tslib@^1.9.0:
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
 tslib@^2.0.3:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
-  integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
 
 tsutils@^3.21.0:
   version "3.21.0"
@@ -6397,10 +6341,10 @@ vfile@^4.0.0, vfile@^4.0.1:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
-vite-plugin-components@^0.10.4:
-  version "0.10.4"
-  resolved "https://registry.yarnpkg.com/vite-plugin-components/-/vite-plugin-components-0.10.4.tgz#55a2757433833a9481765319d76d69653ba9ba57"
-  integrity sha512-QOGd+7IE4EonPGMlxmudj0HadVxKzCdvaZmZcRgap4gE8F55sAIztuAQN4IHACEKuappWsB6XpMAY1iVrJUqog==
+vite-plugin-components@^0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/vite-plugin-components/-/vite-plugin-components-0.11.1.tgz#fc1f38c4087ef8551767a1fa92cbff3edd191f3b"
+  integrity sha512-rApT5gc8hLgIgO4+8xtlt81UD76mUvsTtx44UZViJJGYFr8ofEALlgRn5Fwai1MHbOlWWdOfPMvMa3ooC52COQ==
   dependencies:
     chokidar "^3.5.1"
     debug "^4.3.2"
@@ -6469,9 +6413,9 @@ vscode-emmet-helper@^2.6.4:
     vscode-uri "^2.1.2"
 
 vscode-html-languageservice@^4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/vscode-html-languageservice/-/vscode-html-languageservice-4.0.4.tgz#f171f663e83037c8a5c5f4552a6b4771c1a9f017"
-  integrity sha512-WHXpLfj5NlCAgppDa6n5gQjW1YTTt72MVs0lkkuGQwTb5Sfdq8UhMjLDT82MuzqwV0QvmSBWlUbreGodzXleLg==
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/vscode-html-languageservice/-/vscode-html-languageservice-4.0.5.tgz#4f3657200a0613f2b83d47542c80ca0328868885"
+  integrity sha512-9ZKp7nfR6ObUA+K65GfgDPdOmXaPH8MOWxE2RwWF3tVnVMq2w+COKjDNHMvv+uNxtmaRT7/skls7CD/HzrW99w==
   dependencies:
     vscode-languageserver-textdocument "^1.0.1"
     vscode-languageserver-types "^3.16.0"
@@ -6535,26 +6479,26 @@ vscode-nls@^5.0.0:
   resolved "https://registry.yarnpkg.com/vscode-nls/-/vscode-nls-5.0.0.tgz#99f0da0bd9ea7cda44e565a74c54b1f2bc257840"
   integrity sha512-u0Lw+IYlgbEJFF6/qAqG2d1jQmJl0eyAGJHoAJqr2HT4M2BNuQYSEiSE75f52pXHSJm8AlTjnLLbBFPrdz2hpA==
 
-vscode-pug-languageservice@^0.25.21:
-  version "0.25.21"
-  resolved "https://registry.yarnpkg.com/vscode-pug-languageservice/-/vscode-pug-languageservice-0.25.21.tgz#ee2e6b63351e73065f6126fb9dee94ac4f80c2d3"
-  integrity sha512-ssO/PM/oCUOwFQ2cjP3YerzuyimTO4VSaSHlOPjlMoneZWwjI4kjA/s59Pg4vrngnsBJjopbzkgfnUsxnVf5mg==
+vscode-pug-languageservice@^0.25.22:
+  version "0.25.22"
+  resolved "https://registry.yarnpkg.com/vscode-pug-languageservice/-/vscode-pug-languageservice-0.25.22.tgz#4920f26a395e835e10e99861dd3b9481161e8194"
+  integrity sha512-1v1ljcqMuyaITCbby3eMsMiAVJXtVxGu+oMwJ8STOeDsMgkOTv3IrfoZjwsps96Qj3pf0d8XJPzSZkGoTrBiOA==
   dependencies:
-    "@volar/code-gen" "^0.25.21"
-    "@volar/shared" "^0.25.21"
-    "@volar/source-map" "^0.25.21"
-    "@volar/transforms" "^0.25.21"
+    "@volar/code-gen" "^0.25.22"
+    "@volar/shared" "^0.25.22"
+    "@volar/source-map" "^0.25.22"
+    "@volar/transforms" "^0.25.22"
     pug-beautify "^0.1.1"
     pug-lexer "^5.0.1"
     pug-parser "^6.0.0"
     vscode-languageserver "^7.1.0-next.4"
 
-vscode-typescript-languageservice@^0.25.21:
-  version "0.25.21"
-  resolved "https://registry.yarnpkg.com/vscode-typescript-languageservice/-/vscode-typescript-languageservice-0.25.21.tgz#6b3d8c7cee16f57da4cb8846124d60bbf1e6cd4b"
-  integrity sha512-MxgTLgpYwfXPjSZuNt1YzhkWOdJMSSoHndWLc5J8JntDoKmHME2Y1Dx+9HT4PxcquQ3KySwxxHLOll+U4UqbpA==
+vscode-typescript-languageservice@^0.25.22:
+  version "0.25.22"
+  resolved "https://registry.yarnpkg.com/vscode-typescript-languageservice/-/vscode-typescript-languageservice-0.25.22.tgz#ac642a96e71fbbe8ddef27965b56fc15dd8eac14"
+  integrity sha512-Fb6i9RsAOTZUqtkQiOv6THkBofWedPtxXiXGGkoIEkkgEoP16wQtw9ctYGsazOO127kjgYLRN8TdsudvqcFtEw==
   dependencies:
-    "@volar/shared" "^0.25.21"
+    "@volar/shared" "^0.25.22"
     typescript-vscode-sh-plugin "^0.6.14"
     upath "^2.0.1"
     vscode-languageserver "^7.1.0-next.4"
@@ -6571,16 +6515,16 @@ vscode-uri@^3.0.2:
   integrity sha512-jkjy6pjU1fxUvI51P+gCsxg1u2n8LSt0W6KrCNQceaziKzff74GoWmjVG46KieVzybO1sttPQmYfrwSHey7GUA==
 
 vscode-vue-languageservice@^0.25.17:
-  version "0.25.21"
-  resolved "https://registry.yarnpkg.com/vscode-vue-languageservice/-/vscode-vue-languageservice-0.25.21.tgz#3c29fd46edcf2bb5d5ed063f1b3e6b824dfcebfa"
-  integrity sha512-guemXbGMdZwje8yGJZ9mKn2WNhTDtvx52L82mPLDK3Cy4LvG7Bg89fVQlSlHvTSI2srZmFImAYEoudmX5u6qyQ==
+  version "0.25.22"
+  resolved "https://registry.yarnpkg.com/vscode-vue-languageservice/-/vscode-vue-languageservice-0.25.22.tgz#e7ac55bbf8dc2d4529c0603e833a59afaa1ad49b"
+  integrity sha512-g9AipU1T7AON/rAJ5+pyYmWZD/V+0CTSqRSPMaK/eRaYxLNfrXXLgankoNhqP5XyHFQsYbxMJ6mAg3d0Vy3WZw==
   dependencies:
     "@starptech/prettyhtml" "^0.10.0"
-    "@volar/code-gen" "^0.25.21"
+    "@volar/code-gen" "^0.25.22"
     "@volar/html2pug" "^0.25.4"
-    "@volar/shared" "^0.25.21"
-    "@volar/source-map" "^0.25.21"
-    "@volar/transforms" "^0.25.21"
+    "@volar/shared" "^0.25.22"
+    "@volar/source-map" "^0.25.22"
+    "@volar/transforms" "^0.25.22"
     "@vue/compiler-dom" "^3.0.11"
     "@vue/compiler-sfc" "^3.0.11"
     "@vue/reactivity" "^3.0.11"
@@ -6595,8 +6539,8 @@ vscode-vue-languageservice@^0.25.17:
     vscode-json-languageservice "^4.1.4"
     vscode-languageserver "^7.1.0-next.4"
     vscode-languageserver-textdocument "^1.0.1"
-    vscode-pug-languageservice "^0.25.21"
-    vscode-typescript-languageservice "^0.25.21"
+    vscode-pug-languageservice "^0.25.22"
+    vscode-typescript-languageservice "^0.25.22"
 
 vue-demi@*:
   version "0.9.1"
@@ -6629,19 +6573,19 @@ vue-tsc@^0.1.7:
   dependencies:
     vscode-vue-languageservice "^0.25.17"
 
-vue@3.0.11:
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.11.tgz#c82f9594cbf4dcc869241d4c8dd3e08d9a8f4b5f"
-  integrity sha512-3/eUi4InQz8MPzruHYSTQPxtM3LdZ1/S/BvaU021zBnZi0laRUyH6pfuE4wtUeLvI8wmUNwj5wrZFvbHUXL9dw==
+vue@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.1.1.tgz#9ad655758a0fa6c0dee5b3d2431d3912a9b381aa"
+  integrity sha512-j9fj3PNPMxo2eqOKYjMuss9XBS8ZtmczLY3kPvjcp9d3DbhyNqLYbaMQH18+1pDIzzVvQCQBvIf774LsjjqSKA==
   dependencies:
-    "@vue/compiler-dom" "3.0.11"
-    "@vue/runtime-dom" "3.0.11"
-    "@vue/shared" "3.0.11"
+    "@vue/compiler-dom" "3.1.1"
+    "@vue/runtime-dom" "3.1.1"
+    "@vue/shared" "3.1.1"
 
-vuedraggable@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-4.0.1.tgz#3bcaab0808b7944030b7d9a29f9a63d59dfa12c5"
-  integrity sha512-7qN5jhB1SLfx5P+HCm3JUW+pvgA1bSLgYLSVOeLWBDH9z+zbaEH0OlyZBVMLOxFR+JUHJjwDD0oy7T4r9TEgDA==
+vuedraggable@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-4.0.3.tgz#98832a3562d44c73bbe4e205cc2dafce07b6ca14"
+  integrity sha512-NkJYk+UyxgEoSQcgvVZtqY6dYpdXkBHS8aq6CqoJAfXVM9ZRYT0WPdlBbTttG4nCwllU2M5JGGgo9Drt/L0a7w==
   dependencies:
     sortablejs "1.10.2"