feat: add animate components

2021-06-12 22:19:59 +08:00 · 2021-06-12 22:19:59 +08:00 · 43b6361515
parent 9f77b496ac
commit 43b6361515
30 changed files with 1203 additions and 353 deletions
--- a/README.zh-CN.md
+++ b/README.zh-CN.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
 ```

-## 技术栈
+## technology stack

- 编程语言：[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/)
+- 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
--- 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
--- 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",
--- 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插件
--- 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>
--- a/src/hooks/useAnimate.ts
+++ 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)
+  }
+}
--- 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/'
--- 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({
--- 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} />,
--- 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('字体颜色'),
--- 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;
+}
--- 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 (
--- 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>
--- 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}
        >
          {{
--- 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}
        >
          {{
--- a/src/visual-editor/components/right-attribute-panel/components/animate/Animate.tsx
+++ 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>
+    )
+  }
+})
--- 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
@ -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;
+        }
+      }
+    }
+  }
+}
--- a/src/visual-editor/components/right-attribute-panel/components/animate/animateConfig.ts
+++ 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
--- a/src/visual-editor/components/right-attribute-panel/components/attr-editor/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'

--- 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'
--- 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;
+      }
+    }
+  }
 }
--- 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=""
--- 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>
--- a/src/visual-editor/components/simulator-editor/func.scss
+++ 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);
+  }
+}
--- 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 {
--- 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)
    }
  }
--- 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: {}
  }
 }
--- 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': [
--- 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"]
 }
--- 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"