支持 Vue 3.2.x 语法升级为，script setup

CHANGELOG.md

@@ -1,5 +1,22 @@
 # CHANGELOG
 
+## 1.5.5 (2021-08-14)
+
+### 🐛 Bug Fixes
+- 修复路由只存在一个子路由，图标不显示问题
+- UI样式美化
+
+- ### ✨ Features
+- 支持 Vue 3.2.x 
+- 代码全部按 `script setup` 语法重写（完成80%）  
+- 新增 `回到顶部` 功能  
+- 新增 `拖拽` 示例页面
+- 新增 `富文本` 组件
+- 新增 `路由切换动画` 可在项目设置切换  
+- 依赖升级
+
+# CHANGELOG
+
 ## 1.5.4 (2021-08-10)
 
 ### 🐛 Bug Fixes

README.md

@@ -117,3 +117,7 @@ yarn build
 
 - QQ 群 `328347666`
 
+## 赞助
+#### 如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 🍹。
+
+![donate](https://jekip.github.io/docs/images/sponsor.png)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui-admin",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "author": {
     "name": "Ahjung",
     "email": "735878602@qq.com",
@@ -27,6 +27,7 @@
   "dependencies": {
     "@vicons/antd": "^0.10.0",
     "@vicons/ionicons5": "^0.10.0",
+    "@vueup/vue-quill": "^1.0.0-beta.7",
     "@vueuse/core": "^5.0.3",
     "axios": "^0.21.1",
     "blueimp-md5": "^2.18.0",
@@ -39,11 +40,11 @@
     "mitt": "^2.1.0",
     "mockjs": "^1.1.0",
     "naive-ui": "^2.16.2",
-    "pinia": "^2.0.0-beta.3",
+    "pinia": "^2.0.0-rc.4",
     "qs": "^6.10.1",
     "vfonts": "^0.1.0",
-    "vue": "^3.1.2",
-    "vue-router": "^4.0.10",
+    "vue": "^3.2.2",
+    "vue-router": "^4.0.11",
     "vue-types": "^4.0.0",
     "vuedraggable": "^4.0.3",
     "vuex": "^4.0.2"
@@ -53,17 +54,17 @@
     "@commitlint/config-conventional": "^12.1.4",
     "@types/lodash": "^4.14.170",
     "@types/node": "^15.12.2",
-    "@typescript-eslint/eslint-plugin": "^4.26.1",
-    "@typescript-eslint/parser": "^4.26.1",
+    "@typescript-eslint/eslint-plugin": "^4.29.1",
+    "@typescript-eslint/parser": "^4.29.1",
     "@vitejs/plugin-vue": "^1.2.3",
     "@vitejs/plugin-vue-jsx": "^1.1.5",
-    "@vue/compiler-sfc": "3.1.1",
+    "@vue/compiler-sfc": "^3.2.2",
     "@vue/eslint-config-typescript": "^7.0.0",
     "autoprefixer": "^10.3.1",
     "commitizen": "^4.2.4",
     "core-js": "^3.14.0",
     "dotenv": "^10.0.0",
-    "eslint": "^7.28.0",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-define-config": "^1.0.9",
     "eslint-plugin-jest": "^24.4.0",

src/App.vue

@@ -16,8 +16,8 @@
   </transition>
 </template>
 
-<script lang="ts">
-  import { defineComponent, computed, onMounted, onUnmounted } from 'vue';
+<script lang="ts" setup>
+  import { computed, onMounted, onUnmounted } from 'vue';
   import { zhCN, dateZhCN, createTheme, inputDark, datePickerDark, darkTheme } from 'naive-ui';
   import { LockScreen } from '@/components/Lockscreen';
   import { AppProvider } from '@/components/Application';
@@ -26,86 +26,61 @@
   import { useDesignSettingStore } from '@/store/modules/designSetting';
   import { lighten } from '@/utils/index';
 
-  export default defineComponent({
-    name: 'App',
-    components: { LockScreen, AppProvider },
-    setup() {
-      const route = useRoute();
-      const useLockscreen = useLockscreenStore();
-      const designStore = useDesignSettingStore();
-      const isLock = computed(() => useLockscreen.isLock);
-      const lockTime = computed(() => useLockscreen.lockTime);
+  const route = useRoute();
+  const useLockscreen = useLockscreenStore();
+  const designStore = useDesignSettingStore();
+  const isLock = computed(() => useLockscreen.isLock);
+  const lockTime = computed(() => useLockscreen.lockTime);
 
-      /**
-       * @type import('naive-ui').GlobalThemeOverrides
-       */
-      const getThemeOverrides = computed(() => {
-        const appTheme = designStore.appTheme;
-        const lightenStr = lighten(designStore.appTheme, 6);
-        return {
-          common: {
-            primaryColor: appTheme,
-            primaryColorHover: lightenStr,
-            primaryColorPressed: lightenStr,
-          },
-          LoadingBar: {
-            colorLoading: appTheme,
-          },
-        };
-      });
+  /**
+   * @type import('naive-ui').GlobalThemeOverrides
+   */
+  const getThemeOverrides = computed(() => {
+    const appTheme = designStore.appTheme;
+    const lightenStr = lighten(designStore.appTheme, 6);
+    return {
+      common: {
+        primaryColor: appTheme,
+        primaryColorHover: lightenStr,
+        primaryColorPressed: lightenStr,
+      },
+      LoadingBar: {
+        colorLoading: appTheme,
+      },
+    };
+  });
 
-      const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));
+  const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));
 
-      let timer;
+  let timer;
 
-      const timekeeping = () => {
-        clearInterval(timer);
-        if (route.name == 'login' || isLock.value) return;
-        // 设置不锁屏
-        useLockscreen.setLock(false);
-        // 重置锁屏时间
-        useLockscreen.setLockTime();
-        timer = setInterval(() => {
-          // 锁屏倒计时递减
-          useLockscreen.setLockTime(lockTime.value - 1);
-          if (lockTime.value <= 0) {
-            // 设置锁屏
-            useLockscreen.setLock(true);
-            return clearInterval(timer);
-          }
-        }, 1000);
-      };
+  const timekeeping = () => {
+    clearInterval(timer);
+    if (route.name == 'login' || isLock.value) return;
+    // 设置不锁屏
+    useLockscreen.setLock(false);
+    // 重置锁屏时间
+    useLockscreen.setLockTime();
+    timer = setInterval(() => {
+      // 锁屏倒计时递减
+      useLockscreen.setLockTime(lockTime.value - 1);
+      if (lockTime.value <= 0) {
+        // 设置锁屏
+        useLockscreen.setLock(true);
+        return clearInterval(timer);
+      }
+    }, 1000);
+  };
 
-      onMounted(() => {
-        document.addEventListener('mousedown', timekeeping);
-      });
+  onMounted(() => {
+    document.addEventListener('mousedown', timekeeping);
+  });
 
-      onUnmounted(() => {
-        document.removeEventListener('mousedown', timekeeping);
-      });
-
-      return {
-        darkTheme: createTheme([inputDark, datePickerDark]),
-        getDarkTheme,
-        zhCN,
-        dateZhCN,
-        isLock,
-        getThemeOverrides,
-      };
-    },
+  onUnmounted(() => {
+    document.removeEventListener('mousedown', timekeeping);
   });
 </script>
 
 <style lang="less">
-  @import 'styles/common.less';
-
-  .slide-up-enter-active,
-  .slide-up-leave-active {
-    transition: transform 0.35s ease-in;
-  }
-
-  .slide-up-enter-form,
-  .slide-up-leave-to {
-    transform: translateY(-100%);
-  }
+  @import 'styles/index.less';
 </style>

src/api/system/role.ts

@@ -3,7 +3,7 @@ import http from '@/utils/http/axios';
 /**
  * @description: 角色列表
  */
-export function getRoleList() {
+export function getRoleList(params) {
   return http.request({
     url: '/role/list',
     method: 'GET',

src/components/Form/src/BasicForm.vue

@@ -102,7 +102,7 @@
             type="primary"
             text
             icon-placement="right"
-            v-if="overflow && isInline && getProps.showAdvancedButton"
+            v-if="isInline && getProps.showAdvancedButton"
             @click="unfoldToggle"
           >
             <template #icon>

src/components/Modal/src/basicModal.vue

@@ -20,104 +20,88 @@
   </n-modal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
-    defineComponent,
     getCurrentInstance,
     ref,
     nextTick,
     unref,
-    toRefs,
-    reactive,
     computed,
+    useAttrs,
+    defineEmits,
+    defineProps,
   } from 'vue';
   import { basicProps } from './props';
   import startDrag from '@/utils/Drag';
   import { deepMerge } from '@/utils';
   import { FormProps } from '@/components/Form';
-  export default defineComponent({
-    name: 'BasicModal',
-    components: {},
-    props: {
-      ...basicProps,
-    },
-    emits: ['on-close', 'on-ok', 'register'],
-    setup(props, { emit, attrs }) {
-      const propsRef = ref<Partial>({});
+  import { ModalProps, ModalMethods } from './type';
 
-      const state = reactive({
-        isModal: false,
-        subLoading: false,
-      });
+  const attrs = useAttrs();
+  const props = defineProps({ ...basicProps });
+  const emit = defineEmits(['on-close', 'on-ok', 'register']);
 
-      const getProps = computed((): FormProps => {
-        const modalProps = { ...props, ...unref(propsRef) };
-        return { ...modalProps };
-      });
+  const propsRef = ref(<Partial<ModalProps> | null>null);
 
-      async function setProps(modalProps: Partial): Promise<void> {
-        propsRef.value = deepMerge(unref(propsRef) || {}, modalProps);
-      }
+  const isModal = ref(false);
+  const subLoading = ref(false);
 
-      const getBindValue = computed(() => {
-        return {
-          ...attrs,
-          ...unref(getProps),
-        };
-      });
-
-      function setSubLoading(status: boolean) {
-        state.subLoading = status;
-      }
-
-      function openModal() {
-        state.isModal = true;
-        nextTick(() => {
-          const oBox = document.getElementById('basic-modal');
-          const oBar = document.getElementById('basic-modal-bar');
-          startDrag(oBar, oBox);
-        });
-      }
-
-      function closeModal() {
-        state.isModal = false;
-        state.subLoading = false;
-        emit('on-close');
-      }
-
-      function onCloseModal() {
-        state.isModal = false;
-        emit('on-close');
-      }
-
-      function handleSubmit() {
-        state.subLoading = true;
-        emit('on-ok');
-      }
-
-      const modalMethods: ModalMethods = {
-        setProps,
-        openModal,
-        closeModal,
-        setSubLoading,
-      };
-
-      const instance = getCurrentInstance();
-      if (instance) {
-        emit('register', modalMethods);
-      }
-
-      return {
-        ...toRefs(state),
-        getBindValue,
-        openModal,
-        closeModal,
-        onCloseModal,
-        handleSubmit,
-        setProps,
-      };
-    },
+  const getProps = computed((): FormProps => {
+    return { ...props, ...(unref(propsRef) as any) };
   });
+
+  async function setProps(modalProps: Partial<ModalProps>): Promise<void> {
+    propsRef.value = deepMerge(unref(propsRef) || ({} as any), modalProps);
+  }
+
+  const getBindValue = computed(() => {
+    return {
+      ...attrs,
+      ...unref(getProps),
+    };
+  });
+
+  function setSubLoading(status: boolean) {
+    subLoading.value = status;
+  }
+
+  function openModal() {
+    isModal.value = true;
+    nextTick(() => {
+      const oBox = document.getElementById('basic-modal');
+      const oBar = document.getElementById('basic-modal-bar');
+      startDrag(oBar, oBox);
+    });
+  }
+
+  function closeModal() {
+    isModal.value = false;
+    subLoading.value = false;
+    emit('on-close');
+  }
+
+  function onCloseModal() {
+    isModal.value = false;
+    emit('on-close');
+  }
+
+  function handleSubmit() {
+    subLoading.value = true;
+    emit('on-ok');
+  }
+
+  const modalMethods: ModalMethods = {
+    setProps,
+    openModal,
+    closeModal,
+    setSubLoading,
+  };
+
+  const instance = getCurrentInstance();
+  if (instance) {
+    emit('register', modalMethods);
+  }
+
 </script>
 
 <style lang="less">

src/components/Modal/src/hooks/useModal.ts

@@ -1,46 +1,42 @@
-import { ref, onUnmounted, unref, getCurrentInstance, watch } from 'vue';
+import { ref, onUnmounted, unref, getCurrentInstance, watch, nextTick } from 'vue';
 import { isProdMode } from '@/utils/env';
-import { ReturnMethods } from '../type';
+import { ModalMethods, UseModalReturnType } from '../type';
 import { getDynamicProps } from '@/utils';
-export function useModal(props): (((modalMethod: ReturnMethods) => any) | ReturnMethods)[] {
-  const modal = ref<Nullable<ReturnMethods>>(null);
-  const loaded = ref<Nullable<boolean>>(false);
+import { tryOnUnmounted } from '@vueuse/core';
+export function useModal(props): UseModalReturnType {
 
-  function register(modalMethod: ReturnMethods) {
-    if (!getCurrentInstance()) {
-      throw new Error('useModal() can only be used inside setup() or functional components!');
-    }
-    isProdMode() &&
-      onUnmounted(() => {
-        modal.value = null;
-        loaded.value = false;
-      });
-    if (unref(loaded) && isProdMode() && modalMethod === unref(modal)) return;
-    modal.value = modalMethod;
-
-    watch(
-      () => props,
-      () => {
-        // @ts-ignore
-        const { setProps } = modal.value;
-        props && setProps(getDynamicProps(props));
-      },
-      {
-        immediate: true,
-        deep: true,
-      }
-    );
-  }
+  const modalRef = ref<Nullable<ModalMethods>>(null);
+  const currentInstance = getCurrentInstance();
 
   const getInstance = () => {
-    const instance = unref(modal);
+    const instance = unref(modalRef.value);
     if (!instance) {
       console.error('useModal instance is undefined!');
     }
     return instance;
   };
 
-  const methods: ReturnMethods = {
+  const register = (modalInstance: ModalMethods) => {
+    isProdMode() &&
+      tryOnUnmounted(() => {
+        modalRef.value = null;
+      });
+    modalRef.value = modalInstance;
+    currentInstance?.emit('register', modalInstance);
+
+    watch(
+      () => props,
+      () => {
+        props && modalInstance.setProps(getDynamicProps(props));
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
+  };
+
+  const methods: ModalMethods = {
     setProps: (props): void => {
       getInstance()?.setProps(props);
     },
@@ -54,5 +50,6 @@ export function useModal(props): (((modalMethod: ReturnMethods) => any) | Return
       getInstance()?.setSubLoading(status);
     },
   };
+
   return [register, methods];
 }

src/components/Modal/src/type/index.ts

@@ -1,9 +1,19 @@
+import type { DialogOptions } from 'naive-ui/lib/dialog';
 /**
  * @description: 弹窗对外暴露的方法
  */
-export interface ReturnMethods {
+export interface ModalMethods {
   setProps: (props) => void;
   openModal: () => void;
   closeModal: () => void;
   setSubLoading: (status) => void;
 }
+
+/**
+ * 支持修改，DialogOptions 參數
+ */
+export interface ModalProps extends DialogOptions { }
+
+export type RegisterFn = (ModalInstance: ModalMethods) => void;
+
+export type UseModalReturnType = [RegisterFn, ModalMethods];

src/components/Table/src/components/editable/EditableCell.vue

@@ -7,23 +7,25 @@
       </n-icon>
     </div>
     <div class="flex editable-cell-content" v-show="isEdit" v-click-outside="onClickOutside">
-      <CellComponent
-        v-bind="getComponentProps"
-        :component="getComponent"
-        :style="getWrapperStyle"
-        :popoverVisible="getRuleVisible"
-        :ruleMessage="ruleMessage"
-        :rule="getRule"
-        :class="getWrapperClass"
-        ref="elRef"
-        @options-change="handleOptionsChange"
-        @pressEnter="handleEnter"
-      />
+      <div class="editable-cell-content-comp">
+        <CellComponent
+          v-bind="getComponentProps"
+          :component="getComponent"
+          :style="getWrapperStyle"
+          :popoverVisible="getRuleVisible"
+          :ruleMessage="ruleMessage"
+          :rule="getRule"
+          :class="getWrapperClass"
+          ref="elRef"
+          @options-change="handleOptionsChange"
+          @pressEnter="handleEnter"
+        />
+      </div>
       <div class="editable-cell-action" v-if="!getRowEditable">
-        <n-icon class="cursor-pointer mx-2">
+        <n-icon class="mx-2 cursor-pointer">
           <CheckOutlined @click="handleSubmit" />
         </n-icon>
-        <n-icon class="cursor-pointer mx-2">
+        <n-icon class="mx-2 cursor-pointer">
           <CloseOutlined @click="handleCancel" />
         </n-icon>
       </div>
@@ -49,7 +51,7 @@
   import { set, omit } from 'lodash-es';
   import { EventEnum } from '@/components/Table/src/componentMap';
 
-  import { milliseconds } from 'date-fns';
+  import { milliseconds, format } from 'date-fns';
 
   export default defineComponent({
     name: 'EditableCell',
@@ -196,12 +198,9 @@
           currentValueRef.value = e;
         }
 
-        //TODO 这里组件参数格式，和dayjs格式不一致
+        //TODO 根据组件格式化值
         // if (component === 'NDatePicker') {
-        //   let format = (props.column.editComponentProps?.format)
-        //     .replace(/yyyy/g, 'YYYY')
-        //     .replace(/dd/g, 'DD');
-        //   currentValueRef.value = dayjs(currentValueRef.value).format(format);
+        //   currentValueRef.value = format(currentValueRef.value,'yyyy-MM-dd HH:mm:ss');
         // }
 
         const onChange = props.column?.editComponentProps?.onChange;
@@ -377,6 +376,10 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 
+  &-comp{
+    flex: 1;
+  }
+
   .edit-icon {
    font-size: 14px;
    //position: absolute;

src/hooks/setting/useProjectSetting.ts

@@ -20,6 +20,10 @@ export function useProjectSetting() {
 
   const getShowFooter = computed(() => projectStore.showFooter);
 
+  const getIsPageAnimate = computed(() => projectStore.isPageAnimate);
+
+  const getPageAnimateType = computed(() => projectStore.pageAnimateType);
+
   return {
     getNavMode,
     getNavTheme,
@@ -29,5 +33,7 @@ export function useProjectSetting() {
     getCrumbsSetting,
     getPermissionMode,
     getShowFooter,
+    getIsPageAnimate,
+    getPageAnimateType,
   };
 }

src/layout/components/Header/ProjectSetting.vue

@@ -140,7 +140,7 @@
           <div class="drawer-setting-item-title"> 分割菜单 </div>
           <div class="drawer-setting-item-action">
             <n-switch
-              :disabled="settingStore.navMode === 'horizontal-mix' ? false : true"
+              :disabled="settingStore.navMode !== 'horizontal-mix'"
               v-model:value="settingStore.menuSetting.mixMenu"
             />
           </div>
@@ -206,6 +206,22 @@
         <!--          </div>-->
         <!--        </div>-->
 
+        <n-divider title-placement="center">动画</n-divider>
+
+        <div class="drawer-setting-item">
+          <div class="drawer-setting-item-title"> 禁用动画 </div>
+          <div class="drawer-setting-item-action">
+            <n-switch v-model:value="settingStore.isPageAnimate" />
+          </div>
+        </div>
+
+        <div class="drawer-setting-item">
+          <div class="drawer-setting-item-title"> 动画类型 </div>
+          <div class="drawer-setting-item-select">
+            <n-select v-model:value="settingStore.pageAnimateType" :options="animateOptions" />
+          </div>
+        </div>
+
         <div class="drawer-setting-item">
           <n-alert type="warning" :showIcon="false">
             <p>{{ alertText }}</p>
@@ -217,12 +233,13 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, toRefs, watch } from 'vue';
+  import { defineComponent, reactive, toRefs, unref, watch, computed } from 'vue';
   import { useProjectSettingStore } from '@/store/modules/projectSetting';
   import { useDesignSettingStore } from '@/store/modules/designSetting';
   import { CheckOutlined } from '@vicons/antd';
   import { Moon, SunnySharp } from '@vicons/ionicons5';
   import { darkTheme } from 'naive-ui';
+  import { animates as animateOptions } from '@/settings/animateSetting';
 
   export default defineComponent({
     name: 'ProjectSetting',
@@ -257,6 +274,10 @@
         }
       );
 
+      const directionsOptions = computed(() => {
+        return animateOptions.find((item) => item.value == unref(settingStore.pageAnimateType));
+      });
+
       function openDrawer() {
         state.isDrawer = true;
       }
@@ -291,6 +312,8 @@
         darkTheme,
         openDrawer,
         closeDrawer,
+        animateOptions,
+        directionsOptions,
       };
     },
   });
@@ -325,6 +348,10 @@
         flex: 0 0 auto;
       }
 
+      &-select {
+        flex: 1;
+      }
+
       .theme-item {
         width: 20px;
         min-width: 20px;

src/layout/components/Logo/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="logo">
-    <img src="~@/assets/images/logo.png" alt="" />
+    <img src="~@/assets/images/logo.png" alt="" :class="{ 'mr-2': !collapsed }" />
     <h2 v-show="!collapsed" class="title">NaiveUiAdmin</h2>
   </div>
 </template>
@@ -29,7 +29,6 @@
     img {
       width: auto;
       height: 32px;
-      margin-right: 10px;
     }
 
     .title {

src/layout/components/Main/index.vue

@@ -1,7 +1,7 @@
 <template>
   <RouterView>
     <template #default="{ Component, route }">
-      <transition name="zoom-fade" mode="out-in" appear>
+      <transition :name="getTransitionName" mode="out-in" appear>
         <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
           <component :is="Component" :key="route.fullPath" />
         </keep-alive>
@@ -12,8 +12,9 @@
 </template>
 
 <script>
-  import { defineComponent, computed } from 'vue';
+  import { defineComponent, computed, unref } from 'vue';
   import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
 
   export default defineComponent({
     name: 'MainView',
@@ -29,11 +30,18 @@
       },
     },
     setup() {
+      const { getIsPageAnimate, getPageAnimateType } = useProjectSetting();
       const asyncRouteStore = useAsyncRouteStore();
       // 需要缓存的路由组件
       const keepAliveComponents = computed(() => asyncRouteStore.keepAliveComponents);
+
+      const getTransitionName = computed(() => {
+        return unref(getIsPageAnimate) ? unref(getPageAnimateType) : '';
+      });
+
       return {
         keepAliveComponents,
+        getTransitionName,
       };
     },
   });

src/layout/components/TagsView/index.vue

@@ -102,8 +102,7 @@
   import { RouteItem } from '@/store/modules/tabsView';
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import { useMessage } from 'naive-ui';
-  // @ts-ignore
-  import Draggable from 'vuedraggable/src/vuedraggable';
+  import Draggable from 'vuedraggable';
   import { PageEnum } from '@/enums/pageEnum';
   import {
     DownOutlined,
@@ -643,11 +642,11 @@
   .tabs-view-default-background {
     background: #f5f7f9;
   }
-  
+
   .tabs-view-dark-background {
     background: #101014;
   }
-  
+
   .tabs-view-fix {
     position: fixed;
     z-index: 5;

src/layout/index.vue

@@ -51,12 +51,13 @@
         <!--          <PageFooter />-->
         <!--        </NLayoutFooter>-->
       </NLayoutContent>
+      <n-back-top :right="100" />
     </NLayout>
   </NLayout>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref, unref, computed, onMounted } from 'vue';
+<script lang="ts" setup>
+  import { ref, unref, computed, onMounted } from 'vue';
   import { Logo } from './components/Logo';
   import { TabsView } from './components/TagsView';
   import { MainView } from './components/Main';
@@ -68,117 +69,89 @@
   import { useRoute } from 'vue-router';
   import { useProjectSettingStore } from '@/store/modules/projectSetting';
 
-  export default defineComponent({
-    name: 'Layout',
-    components: {
-      TabsView,
-      MainView,
-      PageHeader,
-      AsideMenu,
-      Logo,
-    },
-    setup() {
-      const { getDarkTheme } = useDesignSetting();
-      const {
-        getShowFooter,
-        getNavMode,
-        getNavTheme,
-        getHeaderSetting,
-        getMenuSetting,
-        getMultiTabsSetting,
-      } = useProjectSetting();
+  const { getDarkTheme } = useDesignSetting();
+  const {
+    getShowFooter,
+    getNavMode,
+    getNavTheme,
+    getHeaderSetting,
+    getMenuSetting,
+    getMultiTabsSetting,
+  } = useProjectSetting();
 
-      const settingStore = useProjectSettingStore();
+  const settingStore = useProjectSettingStore();
 
-      const navMode = getNavMode;
+  const navMode = getNavMode;
 
-      const collapsed = ref<boolean>(false);
+  const collapsed = ref<boolean>(false);
 
-      const fixedHeader = computed(() => {
-        const { fixed } = unref(getHeaderSetting);
-        return fixed ? 'absolute' : 'static';
-      });
-
-      const isMixMenuNoneSub = computed(() => {
-        const mixMenu = settingStore.menuSetting.mixMenu;
-        const currentRoute = useRoute();
-        if (unref(navMode) != 'horizontal-mix') return true;
-        if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
-          return false;
-        }
-        return true;
-      });
-
-      const fixedMenu = computed(() => {
-        const { fixed } = unref(getHeaderSetting);
-        return fixed ? 'absolute' : 'static';
-      });
-
-      const isMultiTabs = computed(() => {
-        return unref(getMultiTabsSetting).show;
-      });
-
-      const fixedMulti = computed(() => {
-        return unref(getMultiTabsSetting).fixed;
-      });
-
-      const inverted = computed(() => {
-        return ['dark', 'header-dark'].includes(unref(getNavTheme));
-      });
-
-      const getHeaderInverted = computed(() => {
-        const navTheme = unref(getNavTheme);
-        return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
-      });
-
-      const leftMenuWidth = computed(() => {
-        const { minMenuWidth, menuWidth } = unref(getMenuSetting);
-        return collapsed.value ? minMenuWidth : menuWidth;
-      });
-
-      const getChangeStyle = computed(() => {
-        const { minMenuWidth, menuWidth } = unref(getMenuSetting);
-        return {
-          'padding-left': collapsed.value ? `${minMenuWidth}px` : `${menuWidth}px`,
-        };
-      });
-
-      const getMenuLocation = computed(() => {
-        return 'left';
-      });
-
-      function watchWidth() {
-        const Width = document.body.clientWidth;
-        if (Width <= 950) {
-          collapsed.value = true;
-        } else collapsed.value = false;
-      }
-
-      onMounted(() => {
-        window.addEventListener('resize', watchWidth);
-        //挂载在 window 方便与在js中使用
-        window['$loading'] = useLoadingBar();
-        window['$loading'].finish();
-      });
-
-      return {
-        fixedMenu,
-        fixedMulti,
-        fixedHeader,
-        collapsed,
-        inverted,
-        isMultiTabs,
-        leftMenuWidth,
-        getChangeStyle,
-        navMode,
-        getShowFooter,
-        getDarkTheme,
-        getHeaderInverted,
-        getMenuLocation,
-        isMixMenuNoneSub,
-      };
-    },
+  const fixedHeader = computed(() => {
+    const { fixed } = unref(getHeaderSetting);
+    return fixed ? 'absolute' : 'static';
   });
+
+  const isMixMenuNoneSub = computed(() => {
+    const mixMenu = settingStore.menuSetting.mixMenu;
+    const currentRoute = useRoute();
+    if (unref(navMode) != 'horizontal-mix') return true;
+    if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
+      return false;
+    }
+    return true;
+  });
+
+  const fixedMenu = computed(() => {
+    const { fixed } = unref(getHeaderSetting);
+    return fixed ? 'absolute' : 'static';
+  });
+
+  const isMultiTabs = computed(() => {
+    return unref(getMultiTabsSetting).show;
+  });
+
+  const fixedMulti = computed(() => {
+    return unref(getMultiTabsSetting).fixed;
+  });
+
+  const inverted = computed(() => {
+    return ['dark', 'header-dark'].includes(unref(getNavTheme));
+  });
+
+  const getHeaderInverted = computed(() => {
+    const navTheme = unref(getNavTheme);
+    return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
+  });
+
+  const leftMenuWidth = computed(() => {
+    const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+    return collapsed.value ? minMenuWidth : menuWidth;
+  });
+
+  const getChangeStyle = computed(() => {
+    const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+    return {
+      'padding-left': collapsed.value ? `${minMenuWidth}px` : `${menuWidth}px`,
+    };
+  });
+
+  const getMenuLocation = computed(() => {
+    return 'left';
+  });
+
+  const watchWidth = () => {
+    const Width = document.body.clientWidth;
+    if (Width <= 950) {
+      collapsed.value = true;
+    } else collapsed.value = false;
+  }
+
+  onMounted(() => {
+    window.addEventListener('resize', watchWidth);
+    //挂载在 window 方便与在js中使用
+    window['$loading'] = useLoadingBar();
+    window['$loading'].finish();
+  });
+
 </script>
 
 <style lang="less" scoped>

src/plugins/naive.ts

@@ -65,6 +65,7 @@ import {
   NSpin,
   NTimePicker,
   NBackTop,
+  NSkeleton,
 } from 'naive-ui';
 
 const naive = create({
@@ -133,6 +134,7 @@ const naive = create({
     NSpin,
     NTimePicker,
     NBackTop,
+    NSkeleton,
   ],
 });
 

src/router/modules/about.ts

@@ -12,6 +12,7 @@ const routes: Array<RouteRecordRaw> = [
       sort: 10,
       isRoot: true,
       activeMenu: 'about_index',
+      icon: renderIcon(ProjectOutlined),
     },
     children: [
       {
@@ -19,7 +20,6 @@ const routes: Array<RouteRecordRaw> = [
         name: `about_index`,
         meta: {
           title: '关于',
-          icon: renderIcon(ProjectOutlined),
           extra: renderNew(),
           activeMenu: 'about_index',
         },

src/router/modules/comp.ts

@@ -1,7 +1,7 @@
 import { RouteRecordRaw } from 'vue-router';
 import { Layout, ParentLayout } from '@/router/constant';
 import { WalletOutlined } from '@vicons/antd';
-import { renderIcon } from '@/utils/index';
+import { renderIcon, renderNew } from '@/utils';
 
 const routeName = 'comp';
 
@@ -106,6 +106,24 @@ const routes: Array<RouteRecordRaw> = [
         },
         component: () => import('@/views/comp/modal/index.vue'),
       },
+      {
+        path: 'richtext',
+        name: `richtext`,
+        meta: {
+          title: '富文本',
+          extra: renderNew(),
+        },
+        component: () => import('@/views/comp/richtext/vue-quill.vue'),
+      },
+      {
+        path: 'drag',
+        name: `Drag`,
+        meta: {
+          title: '拖拽',
+          extra: renderNew(),
+        },
+        component: () => import('@/views/comp/drag/index.vue'),
+      },
     ],
   },
 ];

src/router/modules/list.ts

@@ -1,7 +1,7 @@
 import { RouteRecordRaw } from 'vue-router';
 import { Layout } from '@/router/constant';
 import { TableOutlined } from '@vicons/antd';
-import { renderIcon, renderNew } from '@/utils/index';
+import { renderIcon } from '@/utils/index';
 
 /**
  * @param name 路由名称, 必须设置,且不能重名
@@ -31,7 +31,6 @@ const routes: Array<RouteRecordRaw> = [
         name: 'basic-list',
         meta: {
           title: '基础列表',
-          extra: renderNew(),
         },
         component: () => import('@/views/list/basicList/index.vue'),
       },

src/settings/animateSetting.ts

@@ -0,0 +1,8 @@
+export const animates = [
+  { value: 'zoom-fade', label: '渐变' },
+  { value: 'zoom-out', label: '闪现' },
+  { value: 'fade-slide', label: '滑动' },
+  { value: 'fade', label: '消退' },
+  { value: 'fade-bottom', label: '底部消退' },
+  { value: 'fade-scale', label: '缩放消退' },
+];

src/settings/projectSetting.ts

@@ -43,5 +43,9 @@ const setting = {
   },
   //菜单权限模式 FIXED 前端固定路由  BACK 动态获取
   permissionMode: 'FIXED',
+  //是否开启路由动画
+  isPageAnimate: true,
+  //路由动画类型
+  pageAnimateType: 'zoom-fade',
 };
 export default setting;

src/store/modules/projectSetting.ts

@@ -12,6 +12,8 @@ const {
   multiTabsSetting,
   crumbsSetting,
   permissionMode,
+  isPageAnimate,
+  pageAnimateType,
 } = projectSetting;
 
 interface ProjectSettingState {
@@ -23,6 +25,8 @@ interface ProjectSettingState {
   multiTabsSetting: ImultiTabsSetting; //多标签
   crumbsSetting: IcrumbsSetting; //面包屑
   permissionMode: string; //权限模式
+  isPageAnimate: boolean; //是否开启路由动画
+  pageAnimateType: string; //路由动画类型
 }
 
 export const useProjectSettingStore = defineStore({
@@ -36,6 +40,8 @@ export const useProjectSettingStore = defineStore({
     multiTabsSetting,
     crumbsSetting,
     permissionMode,
+    isPageAnimate,
+    pageAnimateType,
   }),
   getters: {
     getNavMode(): string {
@@ -62,6 +68,12 @@ export const useProjectSettingStore = defineStore({
     getPermissionMode(): string {
       return this.permissionMode;
     },
+    getIsPageAnimate(): boolean {
+      return this.isPageAnimate;
+    },
+    getPageAnimateType(): string {
+      return this.pageAnimateType;
+    },
   },
   actions: {
     setNavTheme(value: string): void {

src/styles/common.less

@@ -45,7 +45,7 @@ a:active, a:hover {
   text-decoration: none;
 }
 
-/*滚动条凹槽的颜色，还可以设置边框属性 */
+/* 滚动条凹槽的颜色，还可以设置边框属性 */
 *::-webkit-scrollbar-track-piece {
   background-color: #f8f8f8;
   -webkit-border-radius: 2em;
@@ -53,22 +53,22 @@ a:active, a:hover {
   border-radius: 2em;
 }
 
-/*滚动条的宽度*/
+/* 滚动条的宽度 */
 *::-webkit-scrollbar {
   width: 9px;
   height: 9px;
 }
 
-/*滚动条的设置*/
+/* 滚动条的设置 */
 *::-webkit-scrollbar-thumb {
-  background-color: #dddddd;
+  background-color: #ddd;
   background-clip: padding-box;
   -webkit-border-radius: 2em;
   -moz-border-radius: 2em;
   border-radius: 2em;
 }
 
-/*滚动条鼠标移上去*/
+/* 滚动条鼠标移上去 */
 *::-webkit-scrollbar-thumb:hover {
   background-color: #bbb;
 }

src/styles/index.less

@@ -0,0 +1,3 @@
+@import 'transition/index.less';
+@import './var.less';
+@import './common.less';

src/styles/transition/base.less

@@ -0,0 +1,18 @@
+.transition-default() {
+  &-enter-active,
+  &-leave-active {
+    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
+  }
+
+  &-move {
+    transition: transform 0.4s;
+  }
+}
+
+.expand-transition {
+  .transition-default();
+}
+
+.expand-x-transition {
+  .transition-default();
+}

src/styles/transition/fade.less

@@ -0,0 +1,81 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* fade-slide */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+// ///////////////////////////////////////////////
+// Fade Bottom
+// ///////////////////////////////////////////////
+
+// Speed: 1x
+.fade-bottom-enter-active,
+.fade-bottom-leave-active {
+  transition: opacity 0.25s, transform 0.3s;
+}
+
+.fade-bottom-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+.fade-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+// fade-scale
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+  transition: all 0.28s;
+}
+
+.fade-scale-enter-from {
+  opacity: 0;
+  transform: scale(1.2);
+}
+
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+// ///////////////////////////////////////////////
+// Fade Top
+// ///////////////////////////////////////////////
+
+// Speed: 1x
+.fade-top-enter-active,
+.fade-top-leave-active {
+  transition: opacity 0.2s, transform 0.25s;
+}
+
+.fade-top-enter-from {
+  opacity: 0;
+  transform: translateY(8%);
+}
+
+.fade-top-leave-to {
+  opacity: 0;
+  transform: translateY(-8%);
+}

src/styles/transition/index.less

@@ -0,0 +1,10 @@
+@import './base.less';
+@import './fade.less';
+@import './scale.less';
+@import './slide.less';
+@import './scroll.less';
+@import './zoom.less';
+
+.collapse-transition {
+  transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out, 0.2s padding-bottom ease-in-out;
+}

src/styles/transition/scale.less

@@ -0,0 +1,21 @@
+.scale-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave,
+  &-leave-to {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
+.scale-rotate-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave,
+  &-leave-to {
+    opacity: 0;
+    transform: scale(0) rotate(-45deg);
+  }
+}

src/styles/transition/scroll.less

@@ -0,0 +1,67 @@
+.scroll-y-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateY(-15px);
+  }
+
+  &-leave-to {
+    transform: translateY(15px);
+  }
+}
+
+.scroll-y-reverse-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateY(15px);
+  }
+
+  &-leave-to {
+    transform: translateY(-15px);
+  }
+}
+
+.scroll-x-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateX(-15px);
+  }
+
+  &-leave-to {
+    transform: translateX(15px);
+  }
+}
+
+.scroll-x-reverse-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateX(15px);
+  }
+
+  &-leave-to {
+    transform: translateX(-15px);
+  }
+}

src/styles/transition/slide.less

@@ -0,0 +1,39 @@
+.slide-y-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+}
+
+.slide-y-reverse-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+}
+
+.slide-x-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateX(-15px);
+  }
+}
+
+.slide-x-reverse-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateX(15px);
+  }
+}

src/styles/transition/zoom.less

@@ -0,0 +1,27 @@
+// zoom-out
+.zoom-out-enter-active,
+.zoom-out-leave-active {
+  transition: opacity 0.1 ease-in-out, transform 0.15s ease-out;
+}
+
+.zoom-out-enter-from,
+.zoom-out-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+// zoom-fade
+.zoom-fade-enter-active,
+.zoom-fade-leave-active {
+  transition: transform 0.2s, opacity 0.3s ease-out;
+}
+
+.zoom-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+.zoom-fade-leave-to {
+  opacity: 0;
+  transform: scale(1.06);
+}

src/utils/Drag.ts

@@ -14,7 +14,7 @@ const params = {
   flag: false,
 };
 
-const startDrag = function (bar, target, callback) {
+const startDrag = function (bar, target, callback?) {
   const screenWidth = document.body.clientWidth; // body当前宽度
   const screenHeight = document.documentElement.clientHeight; // 可见区域高度
 

src/utils/http/axios/index.ts

@@ -29,6 +29,7 @@ const transform: AxiosTransform = {
    * @description: 处理请求数据
    */
   transformRequestData: (res: AxiosResponse<Result>, options: RequestOptions) => {
+    // @ts-ignore
     const { $message: Message, $dialog: Modal } = window;
     const {
       isShowMessage = true,
@@ -186,6 +187,7 @@ const transform: AxiosTransform = {
    * @description: 响应错误处理
    */
   responseInterceptorsCatch: (error: any) => {
+    // @ts-ignore
     const { $message: Message, $dialog: Modal } = window;
     const { response, code, message } = error || {};
     // TODO 此处要根据后端接口返回格式修改

src/utils/http/axios/types.ts

@@ -12,8 +12,6 @@ export interface RequestOptions {
   joinParamsToUrl?: boolean;
   // 格式化请求参数时间
   formatDate?: boolean;
-  //  是否处理请求结果
-  isTransformResponse?: boolean;
   // 是否显示提示信息
   isShowMessage?: boolean;
   // 是否解析成JSON

src/utils/index.ts

@@ -41,6 +41,7 @@ export function generatorMenu(routerMap: Array<any>) {
       ...info.meta,
       label: info.meta?.title,
       key: info.name,
+      icon: isRoot ? item.meta?.icon : info.meta?.icon,
     };
     // 是否有子菜单，并递归处理
     if (info.children && info.children.length > 0) {

src/views/about/index.vue

@@ -9,7 +9,7 @@
     <n-card
       :bordered="false"
       title="项目信息"
-      class="proCard mt-4"
+      class="mt-4 proCard"
       size="small"
       :segmented="{ content: 'hard' }"
     >
@@ -54,7 +54,7 @@
     <n-card
       :bordered="false"
       title="开发环境依赖"
-      class="proCard mt-4"
+      class="mt-4 proCard"
       size="small"
       :segmented="{ content: 'hard' }"
     >
@@ -68,7 +68,7 @@
     <n-card
       :bordered="false"
       title="生产环境依赖"
-      class="proCard mt-4"
+      class="mt-4 proCard"
       size="small"
       :segmented="{ content: 'hard' }"
     >
@@ -81,40 +81,24 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
+<script lang="ts" setup>
   export interface schemaItem {
     field: string;
     label: string;
   }
 
-  export default defineComponent({
-    setup() {
-      const { pkg, lastBuildTime } = __APP_INFO__;
-      const { dependencies, devDependencies, name, version } = pkg;
+  const { pkg, lastBuildTime } = __APP_INFO__;
+  const { dependencies, devDependencies, name, version } = pkg;
 
-      const schema: schemaItem[] = [];
-      const devSchema: schemaItem[] = [];
+  const schema: schemaItem[] = [];
+  const devSchema: schemaItem[] = [];
 
-      Object.keys(dependencies).forEach((key) => {
-        schema.push({ field: key, label: dependencies[key] });
-      });
+  Object.keys(dependencies).forEach((key) => {
+    schema.push({ field: key, label: dependencies[key] });
+  });
 
-      Object.keys(devDependencies).forEach((key) => {
-        devSchema.push({ field: key, label: devDependencies[key] });
-      });
-
-      return {
-        lastBuildTime,
-        dependencies,
-        devDependencies,
-        name,
-        version,
-        schema,
-        devSchema,
-      };
-    },
+  Object.keys(devDependencies).forEach((key) => {
+    devSchema.push({ field: key, label: devDependencies[key] });
   });
 </script>
 

src/views/comp/drag/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="拖拽"> 常用于卡片，事项，预约，流程，计划等， </n-card>
+    </div>
+
+    <n-alert title="花式拖拽演示" type="info" class="mt-4">
+      每个卡片，都可以上下拖拽顺序，另外不同卡片，也可以拖拽过去，拖拽过来，都不在话下呢，快试试O(∩_∩)O哈哈~
+    </n-alert>
+
+    <n-grid
+      cols="1 s:2 m:3 l:4 xl:4 2xl:4"
+      class="mt-4 proCard"
+      responsive="screen"
+      :x-gap="12"
+      :y-gap="8"
+    >
+      <n-grid-item>
+        <NCard
+          title="需求池"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">月</n-tag>
+          </template>
+
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="demandList"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="info">需求</n-tag><span class="ml-2">{{ element.name }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </NCard>
+      </n-grid-item>
+
+      <n-grid-item>
+        <NCard
+          title="开发中"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">月</n-tag>
+          </template>
+
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="exploitList"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="warning">开发中</n-tag><span class="ml-2">{{ element.name }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </NCard>
+      </n-grid-item>
+
+      <n-grid-item>
+        <NCard
+          title="已完成"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">月</n-tag>
+          </template>
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="completeList"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="error">已完成</n-tag><span class="ml-2">{{ element.name }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </NCard>
+      </n-grid-item>
+
+      <n-grid-item>
+        <NCard
+          title="已验收"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">月</n-tag>
+          </template>
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="approvedList"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="success">已验收</n-tag><span class="ml-2">{{ element.name }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </NCard>
+      </n-grid-item>
+    </n-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import Draggable from 'vuedraggable';
+
+  const demandList = reactive([
+    { name: '预约表单页面，能填写预约相关信息', id: 1 },
+    { name: '促销活动页面，包含促销广告展示', id: 2 },
+    { name: '商品列表，需要一个到货提醒功能', id: 3 },
+    { name: '商品需要一个评价功能', id: 4 },
+    { name: '商品图片需要提供放大镜', id: 5 },
+    { name: '订单需要提供删除到回收站', id: 6 },
+    { name: '用户头像上传，需要支持裁剪', id: 7 },
+    { name: '据说Vue3.2发布了，setup啥时候支持？', id: 8 },
+  ]);
+
+  const exploitList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
+
+  const completeList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
+
+  const approvedList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
+</script>
+
+<style lang="less" scoped>
+  .draggable-ul {
+    width: 100%;
+    overflow: hidden;
+    margin-top: -16px;
+
+    .draggable-li {
+      width: 100%;
+      padding: 16px 10px;
+      color: #333;
+      border-bottom: 1px solid #efeff5;
+    }
+  }
+</style>

src/views/comp/form/basic.vue

@@ -3,13 +3,15 @@
     <div class="n-layout-page-header">
       <n-card :bordered="false" title="基础表单"> 基础表单，用于向用户收集表单信息 </n-card>
     </div>
-    <n-card :bordered="false" class="proCard mt-4">
+    <n-card :bordered="false" class="mt-4 proCard">
       <div class="BasicForm">
         <BasicForm
           submitButtonText="提交预约"
           layout="horizontal"
           :gridProps="{ cols: 1 }"
           :schemas="schemas"
+          @submit="handleSubmit"
+          @reset="handleReset"
         >
           <template #statusSlot="{ model, field }">
             <n-input v-model:value="model[field]" />
@@ -20,12 +22,11 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { BasicForm, FormSchema } from '@/components/Form/index';
+<script lang="ts" setup>
+  import { BasicForm } from '@/components/Form/index';
   import { useMessage } from 'naive-ui';
 
-  const schemas: FormSchema[] = [
+  const schemas = [
     {
       field: 'name',
       component: 'NInput',
@@ -149,29 +150,16 @@
     },
   ];
 
-  export default defineComponent({
-    components: { BasicForm },
-    setup() {
-      const formRef: any = ref(null);
-      const message = useMessage();
+  const message = useMessage();
 
-      function handleSubmit(values: Recordable) {
-        console.log(values);
-        message.success(JSON.stringify(values));
-      }
+  function handleSubmit(values: Recordable) {
+    console.log(values);
+    message.success(JSON.stringify(values));
+  }
 
-      function handleReset(values: Recordable) {
-        console.log(values);
-      }
-
-      return {
-        schemas,
-        formRef,
-        handleSubmit,
-        handleReset,
-      };
-    },
-  });
+  function handleReset(values: Recordable) {
+    console.log(values);
+  }
 </script>
 
 <style lang="less" scoped>

src/views/comp/form/useForm.vue

@@ -3,7 +3,7 @@
     <div class="n-layout-page-header">
       <n-card :bordered="false" title="基础表单"> useForm 表单，用于向用户收集表单信息 </n-card>
     </div>
-    <n-card :bordered="false" class="proCard mt-4">
+    <n-card :bordered="false" class="mt-4 proCard">
       <div class="BasicForm">
         <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
           <template #statusSlot="{ model, field }">
@@ -15,12 +15,11 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
+<script lang="ts" setup>
+  import { BasicForm, useForm } from '@/components/Form/index';
   import { useMessage } from 'naive-ui';
 
-  const schemas: FormSchema[] = [
+  const schemas = [
     {
       field: 'name',
       component: 'NInput',
@@ -165,43 +164,25 @@
     },
   ];
 
-  export default defineComponent({
-    components: { BasicForm },
-    setup() {
-      const formRef: any = ref(null);
-      const message = useMessage();
+  const message = useMessage();
 
-      const [register, { setFieldsValue }] = useForm({
-        gridProps: { cols: 1 },
-        collapsedRows: 3,
-        labelWidth: 120,
-        layout: 'horizontal',
-        submitButtonText: '提交预约',
-        schemas,
-      });
-
-      function setName() {
-        setFieldsValue({ name: '小马哥' });
-      }
-
-      function handleSubmit(values: Recordable) {
-        console.log(values);
-        message.success(JSON.stringify(values));
-      }
-
-      function handleReset(values: Recordable) {
-        console.log(values);
-      }
-
-      return {
-        register,
-        formRef,
-        handleSubmit,
-        handleReset,
-        setName,
-      };
-    },
+  const [register, {}] = useForm({
+    gridProps: { cols: 1 },
+    collapsedRows: 3,
+    labelWidth: 120,
+    layout: 'horizontal',
+    submitButtonText: '提交预约',
+    schemas,
   });
+
+  function handleSubmit(values: Recordable) {
+    console.log(values);
+    message.success(JSON.stringify(values));
+  }
+
+  function handleReset(values: Recordable) {
+    console.log(values);
+  }
 </script>
 
 <style lang="less" scoped>

src/views/comp/richtext/vue-quill.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="富文本">
+        富文本，用于展示图文信息，比如商品详情，文章详情等...
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="mt-4 proCard">
+      <QuillEditor
+        ref="quillEditor"
+        :options="options"
+        v-model:content="myContent"
+        style="height: 350px"
+        @ready="readyQuill"
+        class="quillEditor"
+      />
+      <template #footer>
+        <n-space>
+          <n-button @click="addText">增加文本</n-button>
+          <n-button @click="addImg">增加图片</n-button>
+          <n-button @click="getHtml">获取HTML</n-button>
+        </n-space>
+      </template>
+    </n-card>
+    <n-card :bordered="false" class="mt-4 proCard" title="HTML 内容">
+      <n-input
+        v-model:value="myContentHtml"
+        type="textarea"
+        placeholder="html"
+        :autosize="{
+          minRows: 3,
+          maxRows: 6,
+        }"
+      />
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { QuillEditor } from '@vueup/vue-quill';
+  import '@vueup/vue-quill/dist/vue-quill.snow.css';
+  const quillEditor = ref();
+  const myContent = ref(
+    '<h4>Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案</h4>'
+  );
+  const myContentHtml = ref(
+    '<h4>Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案</h4>'
+  );
+
+  const options = reactive({
+    modules: {
+      toolbar: [
+        ['bold', 'italic', 'underline', 'strike'], // toggled buttons
+        ['blockquote', 'code-block'],
+
+        [{ header: 1 }, { header: 2 }], // custom button values
+        [{ list: 'ordered' }, { list: 'bullet' }],
+        [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
+        [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
+        [{ direction: 'rtl' }], // text direction
+
+        [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
+        [{ header: [1, 2, 3, 4, 5, 6, false] }],
+
+        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
+        [{ font: [] }],
+        [{ align: [] }],
+        ['clean'],
+        ['image'],
+      ],
+    },
+    theme: 'snow',
+    placeholder: '输入您喜欢的内容吧！',
+  });
+
+  function readyQuill() {
+    console.log('Quill准备好了');
+  }
+
+  function getHtml() {
+    myContentHtml.value = getHtmlVal();
+  }
+
+  function addText() {
+    const html = getHtmlVal() + '新增加的内容';
+    quillEditor.value.setHTML(html);
+  }
+
+  function addImg() {
+    const html =
+      getHtmlVal() +
+      '<img style="width:100px" src="https://www.baidu.com/img/flexible/logo/pc/result.png"/>';
+    quillEditor.value.setHTML(html);
+  }
+
+  function getHtmlVal() {
+    return quillEditor.value.getHTML();
+  }
+</script>
+
+<style lang="less">
+  .ql-toolbar.ql-snow {
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: 1px solid #eee;
+    margin-top: -10px;
+  }
+
+  .ql-container.ql-snow {
+    border: none;
+  }
+</style>

src/views/comp/table/basic.vue

@@ -18,105 +18,90 @@
   </n-card>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, toRefs, ref, h } from 'vue';
+<script lang="ts" setup>
+  import { reactive, ref, h } from 'vue';
   import { BasicTable, TableAction } from '@/components/Table';
   import { getTableList } from '@/api/table/list';
   import { columns } from './basicColumns';
   import { useDialog, useMessage } from 'naive-ui';
 
-  export default defineComponent({
-    components: { BasicTable },
-    setup() {
-      const message = useMessage();
-      const dialog = useDialog();
-      const actionRef = ref();
-      const state = reactive({
-        params: {
-          pageSize: 5,
-          name: 'xiaoMa',
-        },
-        actionColumn: {
-          width: 150,
-          title: '操作',
-          key: 'action',
-          fixed: 'right',
-          align: 'center',
-          render(record) {
-            return h(TableAction, {
-              style: 'button',
-              actions: createActions(record),
-            });
-          },
-        },
+  const message = useMessage();
+  const dialog = useDialog();
+  const actionRef = ref();
+
+  const params = reactive({
+    pageSize: 5,
+    name: 'xiaoMa',
+  });
+
+  const actionColumn = reactive({
+    width: 150,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    align: 'center',
+    render(record) {
+      return h(TableAction, {
+        style: 'button',
+        actions: createActions(record),
       });
-
-      function createActions(record) {
-        return [
-          {
-            label: '删除',
-            icon: 'ic:outline-delete-outline',
-            onClick: handleDelete.bind(null, record),
-            // 根据业务控制是否显示 isShow 和 auth 是并且关系
-            ifShow: () => {
-              return true;
-            },
-            // 根据权限控制是否显示: 有权限，会显示，支持多个
-            auth: ['basic_list'],
-          },
-          {
-            label: '编辑',
-            onClick: handleEdit.bind(null, record),
-            ifShow: () => {
-              return true;
-            },
-            auth: ['basic_list'],
-          },
-        ];
-      }
-
-      const loadDataTable = async (params) => {
-        const data = await getTableList(params);
-        return data;
-      };
-
-      function onCheckedRow(rowKeys) {
-        console.log(rowKeys);
-      }
-
-      function reloadTable() {
-        actionRef.value.reload();
-      }
-
-      function handleDelete(record) {
-        console.log(record);
-        dialog.info({
-          title: '提示',
-          content: `您想删除${record.name}`,
-          positiveText: '确定',
-          negativeText: '取消',
-          onPositiveClick: () => {
-            message.success('删除成功');
-          },
-          onNegativeClick: () => {},
-        });
-      }
-
-      function handleEdit(record) {
-        console.log(record);
-        message.success('您点击了编辑按钮');
-      }
-
-      return {
-        ...toRefs(state),
-        columns,
-        actionRef,
-        loadDataTable,
-        onCheckedRow,
-        reloadTable,
-      };
     },
   });
+
+  function createActions(record) {
+    return [
+      {
+        label: '删除',
+        icon: 'ic:outline-delete-outline',
+        onClick: handleDelete.bind(null, record),
+        // 根据业务控制是否显示 isShow 和 auth 是并且关系
+        ifShow: () => {
+          return true;
+        },
+        // 根据权限控制是否显示: 有权限，会显示，支持多个
+        auth: ['basic_list'],
+      },
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+        ifShow: () => {
+          return true;
+        },
+        auth: ['basic_list'],
+      },
+    ];
+  }
+
+  const loadDataTable = async (res) => {
+    return await getTableList({...res,...params});
+  };
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleDelete(record) {
+    console.log(record);
+    dialog.info({
+      title: '提示',
+      content: `您想删除${record.name}`,
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        message.success('删除成功');
+      },
+      onNegativeClick: () => {},
+    });
+  }
+
+  function handleEdit(record) {
+    console.log(record);
+    message.success('您点击了编辑按钮');
+  }
 </script>
 
 <style lang="less" scoped></style>

src/views/comp/table/editCell.vue

@@ -19,100 +19,41 @@
   </n-card>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, toRefs, ref, h } from 'vue';
-  import { BasicTable, TableAction } from '@/components/Table';
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+  import { BasicTable } from '@/components/Table';
   import { getTableList } from '@/api/table/list';
   import { columns } from './CellColumns';
 
-  export default defineComponent({
-    components: { BasicTable },
-    setup() {
-      const actionRef = ref();
-      const currentEditKeyRef = ref('');
-      const state = reactive({
-        params: {
-          pageSize: 5,
-          name: 'xiaoMa',
-        },
-      });
-
-      function handleEdit(record) {
-        currentEditKeyRef.value = record.key;
-        record.onEdit?.(true);
-      }
-
-      function handleCancel(record: EditRecordRow) {
-        currentEditKeyRef.value = '';
-        record.onEdit?.(false, false);
-      }
-
-      function onEditChange({ column, value, record }) {
-        if (column.key === 'id') {
-          record.editValueRefs.name4.value = `${value}`;
-        }
-        console.log(column, value, record);
-      }
-
-      async function handleSave(record: EditRecordRow) {
-        const pass = await record.onEdit?.(false, true);
-        if (pass) {
-          currentEditKeyRef.value = '';
-        }
-      }
-
-      function createActions(record) {
-        if (!record.editable) {
-          return [
-            {
-              label: '编辑',
-              onClick: handleEdit.bind(null, record),
-            },
-          ];
-        } else {
-          return [
-            {
-              label: '保存',
-              onClick: handleSave.bind(null, record),
-            },
-            {
-              label: '取消',
-              onClick: handleCancel.bind(null, record),
-            },
-          ];
-        }
-      }
-
-      const loadDataTable = async (params) => {
-        const data = await getTableList(params);
-        return data;
-      };
-
-      function onCheckedRow(rowKeys) {
-        console.log(rowKeys);
-      }
-
-      function reloadTable() {
-        console.log(actionRef.value);
-        actionRef.value.reload();
-      }
-
-      function editEnd({ record, index, key, value }) {
-        console.log(value);
-      }
-
-      return {
-        ...toRefs(state),
-        columns,
-        actionRef,
-        loadDataTable,
-        onCheckedRow,
-        reloadTable,
-        editEnd,
-        onEditChange,
-      };
-    },
+  const actionRef = ref();
+  const params = reactive({
+    pageSize: 5,
+    name: 'xiaoMa',
   });
+
+  function onEditChange({ column, value, record }) {
+    if (column.key === 'id') {
+      record.editValueRefs.name4.value = `${value}`;
+    }
+    console.log(column, value, record);
+  }
+
+  const loadDataTable = async (res) => {
+    return await getTableList({ ...res, ...params });
+  };
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+  }
+
+  function reloadTable() {
+    console.log(actionRef.value);
+    actionRef.value.reload();
+  }
+
+  function editEnd({ record, index, key, value }) {
+    console.log(value);
+  }
 </script>
 
 <style lang="less" scoped></style>

src/views/comp/table/editRow.vue

@@ -11,7 +11,7 @@
       @edit-end="editEnd"
       @edit-change="onEditChange"
       @update:checked-row-keys="onCheckedRow"
-      :scroll-x="1510"
+      :scroll-x="1590"
     >
       <template #toolbar>
         <n-button type="primary" @click="reloadTable">刷新数据</n-button>
@@ -20,113 +20,95 @@
   </n-card>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, toRefs, ref, h } from 'vue';
+<script lang="ts" setup>
+  import { reactive, ref, h } from 'vue';
   import { BasicTable, TableAction } from '@/components/Table';
   import { getTableList } from '@/api/table/list';
   import { columns } from './rowColumns';
 
-  export default defineComponent({
-    components: { BasicTable },
-    setup() {
-      const actionRef = ref();
-      const currentEditKeyRef = ref('');
-      const state = reactive({
-        params: {
-          pageSize: 5,
-          name: 'xiaoMa',
-        },
-        actionColumn: {
-          width: 150,
-          title: '操作',
-          key: 'action',
-          fixed: 'right',
-          align: 'center',
-          render(record) {
-            return h(TableAction, {
-              style: 'button',
-              actions: createActions(record),
-            });
-          },
-        },
+  const actionRef = ref();
+  const currentEditKeyRef = ref('');
+  const params = reactive({
+    pageSize: 5,
+    name: 'xiaoMa',
+  });
+
+  const actionColumn = reactive({
+    width: 150,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    align: 'center',
+    render(record) {
+      return h(TableAction, {
+        style: 'button',
+        actions: createActions(record),
       });
-
-      function handleEdit(record) {
-        currentEditKeyRef.value = record.key;
-        record.onEdit?.(true);
-      }
-
-      function handleCancel(record: EditRecordRow) {
-        currentEditKeyRef.value = '';
-        record.onEdit?.(false, false);
-      }
-
-      function onEditChange({ column, value, record }) {
-        if (column.key === 'id') {
-          record.editValueRefs.name4.value = `${value}`;
-        }
-        console.log(column, value, record);
-      }
-
-      async function handleSave(record: EditRecordRow) {
-        const pass = await record.onEdit?.(false, true);
-        if (pass) {
-          currentEditKeyRef.value = '';
-        }
-      }
-
-      function createActions(record) {
-        if (!record.editable) {
-          return [
-            {
-              label: '编辑',
-              onClick: handleEdit.bind(null, record),
-            },
-          ];
-        } else {
-          return [
-            {
-              label: '保存',
-              onClick: handleSave.bind(null, record),
-            },
-            {
-              label: '取消',
-              onClick: handleCancel.bind(null, record),
-            },
-          ];
-        }
-      }
-
-      const loadDataTable = async (params) => {
-        const data = await getTableList(params);
-        return data;
-      };
-
-      function onCheckedRow(rowKeys) {
-        console.log(rowKeys);
-      }
-
-      function reloadTable() {
-        console.log(actionRef.value);
-        actionRef.value.reload();
-      }
-
-      function editEnd({ record, index, key, value }) {
-        console.log(value);
-      }
-
-      return {
-        ...toRefs(state),
-        columns,
-        actionRef,
-        loadDataTable,
-        onCheckedRow,
-        reloadTable,
-        editEnd,
-        onEditChange,
-      };
     },
   });
+
+  function handleEdit(record) {
+    currentEditKeyRef.value = record.key;
+    record.onEdit?.(true);
+  }
+
+  function handleCancel(record) {
+    currentEditKeyRef.value = '';
+    record.onEdit?.(false, false);
+  }
+
+  function onEditChange({ column, value, record }) {
+    if (column.key === 'id') {
+      record.editValueRefs.name4.value = `${value}`;
+    }
+    console.log(column, value, record);
+  }
+
+  async function handleSave(record) {
+    const pass = await record.onEdit?.(false, true);
+    if (pass) {
+      currentEditKeyRef.value = '';
+    }
+  }
+
+  function createActions(record) {
+    if (!record.editable) {
+      return [
+        {
+          label: '编辑',
+          onClick: handleEdit.bind(null, record),
+        },
+      ];
+    } else {
+      return [
+        {
+          label: '保存',
+          onClick: handleSave.bind(null, record),
+        },
+        {
+          label: '取消',
+          onClick: handleCancel.bind(null, record),
+        },
+      ];
+    }
+  }
+
+  const loadDataTable = async (res) => {
+    return await getTableList({ ...res, ...params });
+  };
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+  }
+
+  function reloadTable() {
+    console.log(actionRef.value);
+    actionRef.value.reload();
+  }
+
+  function editEnd({ record, index, key, value }) {
+    console.log(value);
+  }
 </script>
 
 <style lang="less" scoped></style>

src/views/comp/table/rowColumns.ts

@@ -59,7 +59,7 @@ export const columns = [
     key: 'beginTime',
     editRow: true,
     edit: true,
-    width: 160,
+    width: 240,
     editComponent: 'NDatePicker',
     editComponentProps: {
       type: 'datetime',

src/views/comp/upload/index.vue

@@ -3,7 +3,7 @@
     <div class="n-layout-page-header">
       <n-card :bordered="false" title="上传图片"> 上传图片，用于向用户收集图片信息 </n-card>
     </div>
-    <n-card :bordered="false" class="proCard mt-4">
+    <n-card :bordered="false" class="mt-4 proCard">
       <n-grid cols="2 s:1 m:3 l:3 xl:3 2xl:3" responsive="screen">
         <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
           <n-form
@@ -47,8 +47,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
+<script lang="ts" setup>
+  import { ref, unref, reactive } from 'vue';
   import { useMessage } from 'naive-ui';
   import { BasicUpload } from '@/components/Upload';
   import { useGlobSetting } from '@/hooks/setting';
@@ -74,54 +74,38 @@
     },
   };
 
-  export default defineComponent({
-    components: { BasicUpload },
-    setup() {
-      const formRef: any = ref(null);
-      const message = useMessage();
-      const { uploadUrl } = globSetting;
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const { uploadUrl } = globSetting;
 
-      const state = reactive({
-        formValue: {
-          name: '',
-          mobile: '',
-          //图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
-          images: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'],
-        },
-        uploadHeaders: {
-          platform: 'miniPrograms',
-          timestamp: new Date().getTime(),
-          token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
-        },
-      });
-
-      function formSubmit() {
-        formRef.value.validate((errors) => {
-          if (!errors) {
-            message.success('验证成功');
-          } else {
-            message.error('验证失败，请填写完整信息');
-          }
-        });
-      }
-
-      function resetForm() {
-        formRef.value.restoreValidation();
-      }
-
-      function uploadChange(list: string[]) {
-        state.formValue.images = unref(list);
-      }
-
-      return {
-        ...toRefs(state),
-        formRef,
-        uploadUrl,
-        rules,
-        formSubmit,
-        resetForm,
-        uploadChange,
-      };
-    },
+  const formValue = reactive({
+    name: '',
+    mobile: '',
+    //图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
+    images: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'],
   });
+
+  const uploadHeaders = reactive({
+    platform: 'miniPrograms',
+    timestamp: new Date().getTime(),
+    token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        message.success('验证成功');
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function resetForm() {
+    formRef.value.restoreValidation();
+  }
+
+  function uploadChange(list: string[]) {
+    formValue.images = unref(list);
+  }
 </script>

src/views/dashboard/console/console.vue

@@ -13,30 +13,40 @@
             <n-tag type="success">日</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo :startVal="1" :endVal="visits.dayVisits" class="text-3xl" />
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo v-else :startVal="1" :endVal="visits.dayVisits" class="text-3xl" />
           </div>
           <div class="py-1 px-1 flex justify-between">
             <div class="text-sn">
-              日同比
-              <CountTo :startVal="1" suffix="%" :endVal="visits.rise" />
-              <n-icon size="12" color="#00ff6f">
-                <component is="CaretUpOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                日同比
+                <CountTo :startVal="1" suffix="%" :endVal="visits.rise" />
+                <n-icon size="12" color="#00ff6f">
+                  <component is="CaretUpOutlined" />
+                </n-icon>
+              </template>
             </div>
             <div class="text-sn">
-              周同比
-              <CountTo :startVal="1" suffix="%" :endVal="visits.decline" />
-              <n-icon size="12" color="#ffde66">
-                <component is="CaretDownOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                周同比
+                <CountTo :startVal="1" suffix="%" :endVal="visits.decline" />
+                <n-icon size="12" color="#ffde66">
+                  <component is="CaretDownOutlined" />
+                </n-icon>
+              </template>
             </div>
           </div>
           <template #footer>
             <div class="flex justify-between">
-              <div class="text-sn"> 总访问量： </div>
-              <div class="text-sn">
-                <CountTo :startVal="1" :endVal="visits.amount" />
-              </div>
+              <n-skeleton v-if="loading" text :repeat="2" />
+              <template v-else>
+                <div class="text-sn"> 总访问量： </div>
+                <div class="text-sn">
+                  <CountTo :startVal="1" :endVal="visits.amount" />
+                </div>
+              </template>
             </div>
           </template>
         </NCard>
@@ -52,7 +62,14 @@
             <n-tag type="info">周</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo prefix="￥" :startVal="1" :endVal="saleroom.weekSaleroom" class="text-3xl" />
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo
+              v-else
+              prefix="￥"
+              :startVal="1"
+              :endVal="saleroom.weekSaleroom"
+              class="text-3xl"
+            />
           </div>
           <div class="py-2 px-2 flex justify-between">
             <div class="text-sn flex-1">
@@ -66,10 +83,13 @@
           </div>
           <template #footer>
             <div class="flex justify-between">
-              <div class="text-sn"> 总销售额： </div>
-              <div class="text-sn">
-                <CountTo prefix="￥" :startVal="1" :endVal="saleroom.amount" />
-              </div>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                <div class="text-sn"> 总销售额： </div>
+                <div class="text-sn">
+                  <CountTo prefix="￥" :startVal="1" :endVal="saleroom.amount" />
+                </div>
+              </template>
             </div>
           </template>
         </NCard>
@@ -85,30 +105,40 @@
             <n-tag type="warning">周</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl" />
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo v-else :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl" />
           </div>
           <div class="py-1 px-1 flex justify-between">
             <div class="text-sn">
-              日同比
-              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
-              <n-icon size="12" color="#00ff6f">
-                <component is="CaretUpOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                日同比
+                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
+                <n-icon size="12" color="#00ff6f">
+                  <component is="CaretUpOutlined" />
+                </n-icon>
+              </template>
             </div>
             <div class="text-sn">
-              周同比
-              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
-              <n-icon size="12" color="#ffde66">
-                <component is="CaretDownOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                周同比
+                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
+                <n-icon size="12" color="#ffde66">
+                  <component is="CaretDownOutlined" />
+                </n-icon>
+              </template>
             </div>
           </div>
           <template #footer>
             <div class="flex justify-between">
-              <div class="text-sn"> 转化率： </div>
-              <div class="text-sn">
-                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.amount" />
-              </div>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                <div class="text-sn"> 转化率： </div>
+                <div class="text-sn">
+                  <CountTo :startVal="1" suffix="%" :endVal="orderLarge.amount" />
+                </div>
+              </template>
             </div>
           </template>
         </NCard>
@@ -124,30 +154,40 @@
             <n-tag type="error">月</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl" />
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo v-else prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl" />
           </div>
           <div class="py-1 px-1 flex justify-between">
             <div class="text-sn">
-              月同比
-              <CountTo :startVal="1" suffix="%" :endVal="volume.rise" />
-              <n-icon size="12" color="#00ff6f">
-                <component is="CaretUpOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                月同比
+                <CountTo :startVal="1" suffix="%" :endVal="volume.rise" />
+                <n-icon size="12" color="#00ff6f">
+                  <component is="CaretUpOutlined" />
+                </n-icon>
+              </template>
             </div>
             <div class="text-sn">
-              月同比
-              <CountTo :startVal="1" suffix="%" :endVal="volume.decline" />
-              <n-icon size="12" color="#ffde66">
-                <component is="CaretDownOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                月同比
+                <CountTo :startVal="1" suffix="%" :endVal="volume.decline" />
+                <n-icon size="12" color="#ffde66">
+                  <component is="CaretDownOutlined" />
+                </n-icon>
+              </template>
             </div>
           </div>
           <template #footer>
             <div class="flex justify-between">
-              <div class="text-sn"> 总成交额： </div>
-              <div class="text-sn">
-                <CountTo prefix="￥" :startVal="1" :endVal="volume.amount" />
-              </div>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                <div class="text-sn"> 总成交额： </div>
+                <div class="text-sn">
+                  <CountTo prefix="￥" :startVal="1" :endVal="volume.amount" />
+                </div>
+              </template>
             </div>
           </template>
         </NCard>
@@ -160,7 +200,8 @@
         <n-grid-item v-for="(item, index) in iconList" :key="index">
           <NCard content-style="padding-top: 0;" size="small" :bordered="false">
             <template #footer>
-              <div class="cursor-pointer">
+              <n-skeleton v-if="loading" size="medium" />
+              <div class="cursor-pointer" v-else>
                 <p class="flex justify-center">
                   <span>
                     <n-icon :size="item.size" class="flex-1" :color="item.color">
@@ -182,113 +223,115 @@
     <VisiTab />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, onMounted, reactive, toRefs } from 'vue';
-  import Icons from './components/Icons';
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { getConsoleInfo } from '@/api/dashboard/console';
   import VisiTab from './components/VisiTab.vue';
   import { CountTo } from '@/components/CountTo/index';
-  import { getConsoleInfo } from '@/api/dashboard/console';
+  import {
+    CaretUpOutlined,
+    CaretDownOutlined,
+    UsergroupAddOutlined,
+    BarChartOutlined,
+    ShoppingCartOutlined,
+    AccountBookOutlined,
+    CreditCardOutlined,
+    MailOutlined,
+    TagsOutlined,
+    SettingOutlined,
+  } from '@vicons/antd';
 
-  export default defineComponent({
-    components: { ...Icons, VisiTab, CountTo },
-    setup() {
-      const state = reactive({
-        cardHeaderStyle: {
-          'border-bottom': '1px solid #eee',
-          'font-size': '16px',
-        },
-        visits: {},
-        saleroom: {},
-        orderLarge: {},
-        volume: {},
-      });
-      // 图标列表
-      const iconList = [
-        {
-          icon: 'UsergroupAddOutlined',
-          size: '32',
-          title: '用户',
-          color: '#69c0ff',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'BarChartOutlined',
-          size: '32',
-          title: '分析',
-          color: '#69c0ff',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'ShoppingCartOutlined',
-          size: '32',
-          title: '商品',
-          color: '#ff9c6e',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'AccountBookOutlined',
-          size: '32',
-          title: '订单',
-          color: '#b37feb',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'CreditCardOutlined',
-          size: '32',
-          title: '票据',
-          color: '#ffd666',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'MailOutlined',
-          size: '32',
-          title: '消息',
-          color: '#5cdbd3',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'TagsOutlined',
-          size: '32',
-          title: '标签',
-          color: '#ff85c0',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'SettingOutlined',
-          size: '32',
-          title: '配置',
-          color: '#ffc069',
-          eventObject: {
-            click: () => {},
-          },
-        },
-      ];
-      onMounted(async () => {
-        const { visits, saleroom, orderLarge, volume } = await getConsoleInfo();
-        state.visits = visits;
-        state.saleroom = saleroom;
-        state.orderLarge = orderLarge;
-        state.volume = volume;
-      });
-      return {
-        ...toRefs(state),
-        iconList,
-      };
+  const cardHeaderStyle = ref({ 'border-bottom': '1px solid #eee', 'font-size': '16px' });
+
+  const loading = ref(true);
+  const visits = ref({});
+  const saleroom = ref({});
+  const orderLarge = ref({});
+  const volume = ref({});
+
+  // 图标列表
+  const iconList = [
+    {
+      icon: UsergroupAddOutlined,
+      size: '32',
+      title: '用户',
+      color: '#69c0ff',
+      eventObject: {
+        click: () => {},
+      },
     },
+    {
+      icon: BarChartOutlined,
+      size: '32',
+      title: '分析',
+      color: '#69c0ff',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: ShoppingCartOutlined,
+      size: '32',
+      title: '商品',
+      color: '#ff9c6e',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: AccountBookOutlined,
+      size: '32',
+      title: '订单',
+      color: '#b37feb',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: CreditCardOutlined,
+      size: '32',
+      title: '票据',
+      color: '#ffd666',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: MailOutlined,
+      size: '32',
+      title: '消息',
+      color: '#5cdbd3',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: TagsOutlined,
+      size: '32',
+      title: '标签',
+      color: '#ff85c0',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: SettingOutlined,
+      size: '32',
+      title: '配置',
+      color: '#ffc069',
+      eventObject: {
+        click: () => {},
+      },
+    },
+  ];
+
+  onMounted(async () => {
+    const { visits, saleroom, orderLarge, volume } = await getConsoleInfo();
+    visits.value = visits;
+    saleroom.value = saleroom;
+    orderLarge.value = orderLarge;
+    volume.value = volume;
+    loading.value = false;
   });
 </script>
 

src/views/dashboard/monitor/monitor.vue

@@ -2,15 +2,6 @@
   <div>监控台</div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {},
-    setup() {
-      return {};
-    },
-  });
-</script>
+<script lang="ts" setup></script>
 
 <style lang="less" scoped></style>

src/views/dashboard/workplace/workplace.vue

@@ -298,7 +298,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import schoolboy from '@/assets/images/schoolboy.png';
   import {
     GithubOutlined,
@@ -310,30 +310,6 @@
     Html5Outlined,
   } from '@vicons/antd';
   import { LogoVue, LogoAngular, LogoReact, LogoJavascript } from '@vicons/ionicons5';
-
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'DashboardWorkplace',
-    components: {
-      GithubOutlined,
-      LogoVue,
-      DashboardOutlined,
-      ProfileOutlined,
-      FileProtectOutlined,
-      SettingOutlined,
-      ApartmentOutlined,
-      Html5Outlined,
-      LogoAngular,
-      LogoReact,
-      LogoJavascript,
-    },
-    setup() {
-      return {
-        schoolboy,
-      };
-    },
-  });
 </script>
 
 <style lang="less" scoped>

src/views/exception/403.vue

@@ -10,20 +10,12 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { useRouter } from 'vue-router';
-
-  export default defineComponent({
-    setup() {
-      const router = useRouter();
-      return {
-        goHome() {
-          router.push('/');
-        },
-      };
-    },
-  });
+  const router = useRouter();
+  function goHome() {
+    router.push('/');
+  }
 </script>
 
 <style lang="less" scoped>

src/views/exception/404.vue

@@ -10,20 +10,12 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { useRouter } from 'vue-router';
-
-  export default defineComponent({
-    setup() {
-      const router = useRouter();
-      return {
-        goHome() {
-          router.push('/');
-        },
-      };
-    },
-  });
+  const router = useRouter();
+  function goHome() {
+    router.push('/');
+  }
 </script>
 
 <style lang="less" scoped>

src/views/exception/500.vue

@@ -10,20 +10,12 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { useRouter } from 'vue-router';
-
-  export default defineComponent({
-    setup() {
-      const router = useRouter();
-      return {
-        goHome() {
-          router.push('/');
-        },
-      };
-    },
-  });
+  const router = useRouter();
+  function goHome() {
+    router.push('/');
+  }
 </script>
 
 <style lang="less" scoped>

src/views/form/basicForm/index.vue

@@ -81,8 +81,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref, reactive, toRefs } from 'vue';
+<script lang="ts" setup>
+  import { ref, unref, reactive } from 'vue';
   import { useMessage } from 'naive-ui';
   import { BasicUpload } from '@/components/Upload';
   import { useGlobSetting } from '@/hooks/setting';
@@ -149,66 +149,46 @@
     },
   };
 
-  export default defineComponent({
-    components: { BasicUpload },
-    setup() {
-      const formRef: any = ref(null);
-      const message = useMessage();
-      const { uploadUrl } = globSetting;
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const { uploadUrl } = globSetting;
 
-      const defaultValueRef = () => ({
-        name: '',
-        mobile: '',
-        remark: '',
-        sex: 1,
-        matter: null,
-        doctor: null,
-        datetime: [],
-      });
-
-      const state = reactive({
-        formValue: defaultValueRef(),
-        //图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
-        uploadList: [
-          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-        ],
-        uploadHeaders: {
-          platform: 'miniPrograms',
-          timestamp: new Date().getTime(),
-          token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
-        },
-      });
-
-      function formSubmit() {
-        formRef.value.validate((errors) => {
-          if (!errors) {
-            message.success('验证成功');
-          } else {
-            message.error('验证失败，请填写完整信息');
-          }
-        });
-      }
-
-      function resetForm() {
-        formRef.value.restoreValidation();
-        state.formValue = Object.assign(state.formValue, defaultValueRef());
-      }
-
-      function uploadChange(list: string[]) {
-        console.log(list);
-      }
-
-      return {
-        ...toRefs(state),
-        formRef,
-        uploadUrl,
-        rules,
-        doctorList,
-        matterList,
-        formSubmit,
-        resetForm,
-        uploadChange,
-      };
-    },
+  const defaultValueRef = () => ({
+    name: '',
+    mobile: '',
+    remark: '',
+    sex: 1,
+    matter: null,
+    doctor: null,
+    datetime: [],
   });
+
+  let formValue = reactive(defaultValueRef());
+  const uploadList = ref([
+    'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+  ]);
+  const uploadHeaders = reactive({
+    platform: 'miniPrograms',
+    timestamp: new Date().getTime(),
+    token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        message.success('验证成功');
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function resetForm() {
+    formRef.value.restoreValidation();
+    formValue = Object.assign(unref(formValue), defaultValueRef());
+  }
+
+  function uploadChange(list: string[]) {
+    console.log(list);
+  }
 </script>

src/views/form/detail/index.vue

@@ -8,7 +8,7 @@
     <n-card
       :bordered="false"
       title="基本信息"
-      class="proCard mt-4"
+      class="mt-4 proCard"
       size="small"
       :segmented="{ content: 'hard' }"
     >
@@ -29,7 +29,7 @@
     <n-card
       :bordered="false"
       title="其它信息"
-      class="proCard mt-4"
+      class="mt-4 proCard"
       size="small"
       :segmented="{ content: 'hard' }"
     >
@@ -50,7 +50,7 @@
     <n-card
       :bordered="false"
       title="表格信息"
-      class="proCard mt-4"
+      class="mt-4 proCard"
       size="small"
       :segmented="{ content: 'hard' }"
     >
@@ -119,14 +119,6 @@
   </div>
 </template>
 
-<script>
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    setup() {
-      return {};
-    },
-  });
-</script>
+<script setup></script>
 
 <style lang="less" scoped></style>

src/views/form/stepForm/Step1.vue

@@ -47,8 +47,8 @@
   </n-form>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+  import { ref, defineEmits } from 'vue';
   import { useMessage } from 'naive-ui';
 
   const myAccountList = [
@@ -73,61 +73,50 @@
     },
   ];
 
-  export default defineComponent({
-    emits: ['nextStep'],
-    setup(_, { emit }) {
-      const form1Ref: any = ref(null);
-      const message = useMessage();
-      const current = ref(1);
+  const emit = defineEmits(['nextStep']);
 
-      return {
-        form1Ref,
-        current,
-        formValue: ref({
-          accountType: 1,
-          myAccount: null,
-          account: 'xioama@qq.com',
-          money: '1980',
-          name: 'Ah jung',
-        }),
-        rules: {
-          name: {
-            required: true,
-            message: '请输入收款人姓名',
-            trigger: 'blur',
-          },
-          account: {
-            required: true,
-            message: '请输入收款账户',
-            trigger: 'blur',
-          },
-          money: {
-            required: true,
-            message: '请输入转账金额',
-            trigger: 'blur',
-          },
-          myAccount: {
-            required: true,
-            type: 'number',
-            message: '请选择付款账户',
-            trigger: 'change',
-          },
-        },
-        myAccountList,
-        accountTypeList,
-        formSubmit() {
-          form1Ref.value.validate((errors) => {
-            if (!errors) {
-              emit('nextStep');
-            } else {
-              message.error('验证失败，请填写完整信息');
-            }
-          });
-        },
-        resetForm() {
-          form1Ref.value.restoreValidation();
-        },
-      };
-    },
+  const form1Ref: any = ref(null);
+  const message = useMessage();
+
+  const formValue = ref({
+    accountType: 1,
+    myAccount: null,
+    account: 'xioama@qq.com',
+    money: '1980',
+    name: 'Ah jung',
   });
+
+  const rules = {
+    name: {
+      required: true,
+      message: '请输入收款人姓名',
+      trigger: 'blur',
+    },
+    account: {
+      required: true,
+      message: '请输入收款账户',
+      trigger: 'blur',
+    },
+    money: {
+      required: true,
+      message: '请输入转账金额',
+      trigger: 'blur',
+    },
+    myAccount: {
+      required: true,
+      type: 'number',
+      message: '请选择付款账户',
+      trigger: 'change',
+    },
+  };
+
+  function formSubmit() {
+    form1Ref.value.validate((errors) => {
+      if (!errors) {
+        emit('nextStep');
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
 </script>

src/views/form/stepForm/Step2.vue

@@ -32,50 +32,41 @@
   </n-form>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+  import { ref, defineEmits } from 'vue';
   import { useMessage } from 'naive-ui';
+  const form2Ref: any = ref(null);
+  const message = useMessage();
+  const loading = ref(false);
 
-  export default defineComponent({
-    emits: ['prevStep', 'nextStep'],
-    setup(_, { emit }) {
-      const form2Ref: any = ref(null);
-      const message = useMessage();
-      const loading = ref(false);
-
-      function prevStep() {
-        emit('prevStep');
-      }
-
-      function formSubmit() {
-        loading.value = true;
-        form2Ref.value.validate((errors) => {
-          if (!errors) {
-            setTimeout(() => {
-              emit('nextStep');
-            }, 1500);
-          } else {
-            message.error('验证失败，请填写完整信息');
-          }
-        });
-      }
-
-      return {
-        form2Ref,
-        loading,
-        formValue: ref({
-          password: '086611',
-        }),
-        rules: {
-          password: {
-            required: true,
-            message: '请输入支付密码',
-            trigger: 'blur',
-          },
-        },
-        prevStep,
-        formSubmit,
-      };
-    },
+  const formValue = ref({
+    password: '086611',
   });
+
+  const rules = {
+    password: {
+      required: true,
+      message: '请输入支付密码',
+      trigger: 'blur',
+    },
+  };
+
+  const emit = defineEmits(['prevStep', 'nextStep']);
+
+  function prevStep() {
+    emit('prevStep');
+  }
+
+  function formSubmit() {
+    loading.value = true;
+    form2Ref.value.validate((errors) => {
+      if (!errors) {
+        setTimeout(() => {
+          emit('nextStep');
+        }, 1500);
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
 </script>

src/views/form/stepForm/Step3.vue

@@ -31,34 +31,17 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { useRouter } from 'vue-router';
+<script lang="ts" setup>
+  import { defineEmits } from 'vue';
 
-  export default defineComponent({
-    emits: ['finish', 'prevStep'],
-    setup(_, { emit }) {
-      const router = useRouter();
+  const emit = defineEmits(['finish', 'prevStep']);
+  function prevStep() {
+    emit('prevStep');
+  }
 
-      function prevStep() {
-        emit('prevStep');
-      }
-
-      function finish() {
-        emit('finish');
-      }
-
-      function toOrderList() {
-        router.push('/form/step-form');
-      }
-
-      return {
-        prevStep,
-        finish,
-        toOrderList,
-      };
-    },
-  });
+  function finish() {
+    emit('finish');
+  }
 </script>
 
 <style lang="less" scoped>

src/views/form/stepForm/stepForm.vue

@@ -5,7 +5,7 @@
         将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
       </n-card>
     </div>
-    <n-card :bordered="false" class="proCard mt-4">
+    <n-card :bordered="false" class="mt-4 proCard">
       <n-space vertical class="steps" justify="center">
         <n-steps :current="currentTab" :status="currentStatus">
           <n-step title="填写转账信息" description="确保填写正确" />
@@ -20,43 +20,30 @@
   </div>
 </template>
 
-<script>
+<script setup>
   import { defineComponent, ref } from 'vue';
   import step1 from './Step1.vue';
   import step2 from './Step2.vue';
   import step3 from './Step3.vue';
 
-  export default defineComponent({
-    components: { step1, step2, step3 },
-    setup() {
-      const currentTab = ref(1);
-      const currentStatus = ref('process');
+  const currentTab = ref(1);
+  const currentStatus = ref('process');
 
-      function nextStep() {
-        if (currentTab.value < 3) {
-          currentTab.value += 1;
-        }
-      }
+  function nextStep() {
+    if (currentTab.value < 3) {
+      currentTab.value += 1;
+    }
+  }
 
-      function prevStep() {
-        if (currentTab.value > 1) {
-          currentTab.value -= 1;
-        }
-      }
+  function prevStep() {
+    if (currentTab.value > 1) {
+      currentTab.value -= 1;
+    }
+  }
 
-      function finish() {
-        currentTab.value = 1;
-      }
-
-      return {
-        currentTab,
-        currentStatus,
-        nextStep,
-        prevStep,
-        finish,
-      };
-    },
-  });
+  function finish() {
+    currentTab.value = 1;
+  }
 </script>
 
 <style lang="less" scoped>

src/views/iframe/index.vue

@@ -5,55 +5,45 @@
     </div>
   </n-spin>
 </template>
-<script lang="ts">
-  import { defineComponent, ref, unref, onMounted, nextTick } from 'vue';
+<script lang="ts" setup>
+  import { ref, unref, onMounted, nextTick } from 'vue';
   import { useRoute } from 'vue-router';
 
-  export default defineComponent({
-    name: 'IFrame',
-    setup() {
-      const currentRoute = useRoute();
-      const loading = ref(false);
-      const frameRef = ref<HTMLFrameElement | null>(null);
-      const frameSrc = ref<string>('');
+  const currentRoute = useRoute();
+  const loading = ref(false);
+  const frameRef = ref<HTMLFrameElement | null>(null);
+  const frameSrc = ref<string>('');
 
-      if (unref(currentRoute.meta)?.frameSrc) {
-        frameSrc.value = unref(currentRoute.meta)?.frameSrc as string;
-      }
+  if (unref(currentRoute.meta)?.frameSrc) {
+    frameSrc.value = unref(currentRoute.meta)?.frameSrc as string;
+  }
 
-      function hideLoading() {
-        loading.value = false;
-      }
+  function hideLoading() {
+    loading.value = false;
+  }
 
-      function init() {
-        nextTick(() => {
-          const iframe = unref(frameRef);
-          if (!iframe) return;
-          const _frame = iframe as any;
-          if (_frame.attachEvent) {
-            _frame.attachEvent('onload', () => {
-              hideLoading();
-            });
-          } else {
-            iframe.onload = () => {
-              hideLoading();
-            };
-          }
+  function init() {
+    nextTick(() => {
+      const iframe = unref(frameRef);
+      if (!iframe) return;
+      const _frame = iframe as any;
+      if (_frame.attachEvent) {
+        _frame.attachEvent('onload', () => {
+          hideLoading();
         });
+      } else {
+        iframe.onload = () => {
+          hideLoading();
+        };
       }
+    });
+  }
 
-      onMounted(() => {
-        loading.value = true;
-        init();
-      });
-
-      return {
-        loading,
-        frameRef,
-        frameSrc,
-      };
-    },
+  onMounted(() => {
+    loading.value = true;
+    init();
   });
+
 </script>
 
 <style lang="less" scoped>

src/views/list/basicList/index.vue

@@ -61,11 +61,11 @@
   </n-card>
 </template>
 
-<script lang="ts">
-  import { defineComponent, h, reactive, ref, toRefs } from 'vue';
+<script lang="ts" setup>
+  import { h, reactive, ref } from 'vue';
   import { useMessage } from 'naive-ui';
   import { BasicTable, TableAction } from '@/components/Table';
-  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
+  import { BasicForm, useForm } from '@/components/Form/index';
   import { getTableList } from '@/api/table/list';
   import { columns } from './columns';
   import { PlusOutlined } from '@vicons/antd';
@@ -90,7 +90,7 @@
     },
   };
 
-  const schemas: FormSchema[] = [
+  const schemas = [
     {
       field: 'name',
       labelMessage: '这是一个提示',
@@ -214,164 +214,134 @@
     },
   ];
 
-  export default defineComponent({
-    // eslint-disable-next-line vue/no-unused-components
-    components: { BasicTable, PlusOutlined, TableAction, BasicForm },
-    setup() {
-      const router = useRouter();
-      const formRef: any = ref(null);
-      const message = useMessage();
-      const actionRef = ref();
-      const state = reactive({
-        showModal: false,
-        formBtnLoading: false,
-        formParams: {},
-        params: {
-          pageSize: 5,
-          name: 'xiaoMa',
-        },
-        actionColumn: {
-          width: 220,
-          title: '操作',
-          key: 'action',
-          fixed: 'right',
-          render(record) {
-            return h(TableAction as any, {
-              style: 'button',
-              actions: [
-                {
-                  label: '删除',
-                  icon: 'ic:outline-delete-outline',
-                  onClick: handleDelete.bind(null, record),
-                  // 根据业务控制是否显示 isShow 和 auth 是并且关系
-                  ifShow: () => {
-                    return true;
-                  },
-                  // 根据权限控制是否显示: 有权限，会显示，支持多个
-                  auth: ['basic_list'],
-                },
-                {
-                  label: '编辑',
-                  onClick: handleEdit.bind(null, record),
-                  ifShow: () => {
-                    return true;
-                  },
-                  auth: ['basic_list'],
-                },
-              ],
-              dropDownActions: [
-                {
-                  label: '启用',
-                  key: 'enabled',
-                  // 根据业务控制是否显示: 非enable状态的不显示启用按钮
-                  ifShow: () => {
-                    return true;
-                  },
-                },
-                {
-                  label: '禁用',
-                  key: 'disabled',
-                  ifShow: () => {
-                    return true;
-                  },
-                },
-              ],
-              select: (key) => {
-                message.info(`您点击了，${key} 按钮`);
-              },
-            });
+  const router = useRouter();
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const actionRef = ref();
+
+  const showModal = ref(false);
+  const formBtnLoading = ref(false);
+  const formParams = reactive({
+    name: '',
+    address: '',
+    date: null,
+  });
+
+  const params = ref({
+    pageSize: 5,
+    name: 'xiaoMa',
+  });
+
+  const actionColumn = reactive({
+    width: 220,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '删除',
+            icon: 'ic:outline-delete-outline',
+            onClick: handleDelete.bind(null, record),
+            // 根据业务控制是否显示 isShow 和 auth 是并且关系
+            ifShow: () => {
+              return true;
+            },
+            // 根据权限控制是否显示: 有权限，会显示，支持多个
+            auth: ['basic_list'],
           },
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+            ifShow: () => {
+              return true;
+            },
+            auth: ['basic_list'],
+          },
+        ],
+        dropDownActions: [
+          {
+            label: '启用',
+            key: 'enabled',
+            // 根据业务控制是否显示: 非enable状态的不显示启用按钮
+            ifShow: () => {
+              return true;
+            },
+          },
+          {
+            label: '禁用',
+            key: 'disabled',
+            ifShow: () => {
+              return true;
+            },
+          },
+        ],
+        select: (key) => {
+          message.info(`您点击了，${key} 按钮`);
         },
       });
-
-      const [register, {}] = useForm({
-        gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
-        labelWidth: 80,
-        schemas,
-      });
-
-      function addTable() {
-        state.showModal = true;
-      }
-
-      const loadDataTable = async (res) => {
-        let params = {
-          ...res,
-          ...state.formParams,
-        };
-        return await getTableList(params);
-      };
-
-      function onCheckedRow(rowKeys) {
-        console.log(rowKeys);
-      }
-
-      function reloadTable() {
-        actionRef.value.reload();
-      }
-
-      function confirmForm(e) {
-        e.preventDefault();
-        state.formBtnLoading = true;
-        formRef.value.validate((errors) => {
-          if (!errors) {
-            message.success('新建成功');
-            setTimeout(() => {
-              state.showModal = false;
-              reloadTable();
-            });
-          } else {
-            message.error('请填写完整信息');
-          }
-          state.formBtnLoading = false;
-        });
-      }
-
-      function handleEdit(record: Recordable) {
-        console.log('点击了编辑', record);
-        router.push({ name: 'basic-info', params: { id: record.id } });
-      }
-
-      function handleDelete(record: Recordable) {
-        console.log('点击了删除', record);
-        message.info('点击了删除');
-      }
-
-      function handleOpen(record: Recordable) {
-        console.log('点击了启用', record);
-        message.info('点击了删除');
-      }
-
-      function handleSubmit(values: Recordable) {
-        console.log(values);
-        state.formParams = values;
-        reloadTable();
-      }
-
-      function handleReset(values: Recordable) {
-        console.log(values);
-      }
-
-      return {
-        ...toRefs(state),
-        formRef,
-        columns,
-        rules,
-        actionRef,
-        register,
-        confirmForm,
-        loadDataTable,
-        onCheckedRow,
-        reloadTable,
-        addTable,
-        handleEdit,
-        handleDelete,
-        handleOpen,
-        handleSubmit,
-        handleReset,
-      };
     },
   });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  function addTable() {
+    showModal.value = true;
+  }
+
+  const loadDataTable = async (res) => {
+    return await getTableList({...res, ...formParams, ...params.value});
+  };
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        message.success('新建成功');
+        setTimeout(() => {
+          showModal.value = false;
+          reloadTable();
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function handleEdit(record: Recordable) {
+    console.log('点击了编辑', record);
+    router.push({ name: 'basic-info', params: { id: record.id } });
+  }
+
+  function handleDelete(record: Recordable) {
+    console.log('点击了删除', record);
+    message.info('点击了删除');
+  }
+
+  function handleSubmit(values: Recordable) {
+    console.log(values);
+    reloadTable();
+  }
+
+  function handleReset(values: Recordable) {
+    console.log(values);
+  }
 </script>
 
 <style lang="less" scoped></style>

src/views/login/index.vue

@@ -50,7 +50,7 @@
                 <n-checkbox v-model:checked="autoLogin">自动登录</n-checkbox>
               </div>
               <div class="flex-initial order-last">
-                <a href="javascript:;">忘记密码</a>
+                <a href="javascript:">忘记密码</a>
               </div>
             </div>
           </n-form-item>
@@ -65,21 +65,21 @@
                 <span>其它登录方式</span>
               </div>
               <div class="flex-initial mx-2">
-                <a href="javascript:;">
+                <a href="javascript:">
                   <n-icon size="24" color="#2d8cf0">
                     <LogoGithub />
                   </n-icon>
                 </a>
               </div>
               <div class="flex-initial mx-2">
-                <a href="javascript:;">
+                <a href="javascript:">
                   <n-icon size="24" color="#2d8cf0">
                     <LogoFacebook />
                   </n-icon>
                 </a>
               </div>
               <div class="flex-initial" style="margin-left: auto">
-                <a href="javascript:;">注册账号</a>
+                <a href="javascript:">注册账号</a>
               </div>
             </div>
           </n-form-item>
@@ -89,95 +89,83 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, toRefs, ref } from 'vue';
-  import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5';
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { useUserStore } from '@/store/modules/user';
   import { useMessage } from 'naive-ui';
   import { ResultEnum } from '@/enums/httpEnum';
   import logo from '@/assets/images/logo.png';
+  import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5';
 
   interface FormState {
     username: string;
     password: string;
   }
 
-  export default defineComponent({
-    components: { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook },
-    setup() {
-      const formRef = ref();
-      const message = useMessage();
-      const state = reactive({
-        loading: false,
-        autoLogin: true,
-        formInline: {
-          username: 'admin',
-          password: '123456',
-          isCaptcha: false,
-        },
-      });
-      const rules = {
-        username: { required: true, message: '请输入用户名', trigger: 'blur' },
-        password: { required: true, message: '请输入密码', trigger: 'blur' },
-        isCaptcha: {
-          required: true,
-          type: 'boolean',
-          trigger: 'change',
-          message: '请点击按钮进行验证码校验',
-          validator: (_, value) => value === true,
-        },
-      };
-      const userStore = useUserStore();
+  const formRef = ref();
+  const message = useMessage();
+  const loading = ref(false);
+  const autoLogin = ref(true);
 
-      const router = useRouter();
-      const route = useRoute();
-      const handleSubmit = (e) => {
-        e.preventDefault();
-        formRef.value.validate(async (errors) => {
-          if (!errors) {
-            const { username, password } = state.formInline;
-            message.loading('登录中...');
-            state.loading = true;
-
-            const params: FormState = {
-              username,
-              password,
-            };
-
-            const { code, message: msg } = await userStore.login(params);
-
-            if (code == ResultEnum.SUCCESS) {
-              const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
-              message.success('登录成功！');
-              router.replace(toPath).then((_) => {
-                if (route.name == 'login') {
-                  router.replace('/');
-                }
-              });
-            } else {
-              message.info(msg || '登录失败');
-            }
-          } else {
-            message.error('请填写完整信息，并且进行验证码校验');
-          }
-        });
-      };
-
-      function onAuthCode() {
-        state.formInline.isCaptcha = true;
-      }
-
-      return {
-        ...toRefs(state),
-        formRef,
-        rules,
-        logo,
-        handleSubmit,
-        onAuthCode,
-      };
-    },
+  const formInline = reactive({
+    username: 'admin',
+    password: '123456',
+    isCaptcha: false,
   });
+
+  const rules = {
+    username: { required: true, message: '请输入用户名', trigger: 'blur' },
+    password: { required: true, message: '请输入密码', trigger: 'blur' },
+    isCaptcha: {
+      required: true,
+      type: 'boolean',
+      trigger: 'change',
+      message: '请点击按钮进行验证码校验',
+      validator: (_, value) => value === true,
+    },
+  };
+
+  const userStore = useUserStore();
+
+  const router = useRouter();
+  const route = useRoute();
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    formRef.value.validate(async (errors) => {
+      if (!errors) {
+        const { username, password } = formInline;
+        message.loading('登录中...');
+        loading.value = true;
+
+        const params: FormState = {
+          username,
+          password,
+        };
+
+        const { code, message: msg } = await userStore.login(params);
+
+        if (code == ResultEnum.SUCCESS) {
+          const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
+          message.success('登录成功！');
+          router.replace(toPath).then((_) => {
+            if (route.name == 'login') {
+              router.replace('/');
+            }
+          });
+        } else {
+          message.info(msg || '登录失败');
+        }
+      } else {
+        message.error('请填写完整信息，并且进行验证码校验');
+      }
+    });
+  };
+
+  const onAuthCode = () => {
+    formInline.isCaptcha = true;
+  }
 </script>
 
 <style lang="less" scoped>

src/views/result/fail.vue

@@ -36,22 +36,15 @@
     </div>
   </n-card>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { useRouter } from 'vue-router';
   import { InfoCircleOutlined } from '@vicons/antd';
 
-  export default defineComponent({
-    components: { InfoCircleOutlined },
-    setup() {
-      const router = useRouter();
-      return {
-        goHome() {
-          router.push('/');
-        },
-      };
-    },
-  });
+  const router = useRouter();
+
+  function goHome() {
+    router.push('/');
+  }
 </script>
 <style lang="less" scoped>
   .result-box {

src/views/result/info.vue

@@ -40,22 +40,15 @@
     </div>
   </n-card>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { useRouter } from 'vue-router';
   import { CheckCircleOutlined } from '@vicons/antd';
 
-  export default defineComponent({
-    components: { CheckCircleOutlined },
-    setup() {
-      const router = useRouter();
-      return {
-        goHome() {
-          router.push('/');
-        },
-      };
-    },
-  });
+  const router = useRouter();
+
+  function goHome() {
+    router.push('/');
+  }
 </script>
 <style lang="less" scoped>
   .result-box {

src/views/result/success.vue

@@ -22,20 +22,14 @@
     </div>
   </n-card>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { useRouter } from 'vue-router';
 
-  export default defineComponent({
-    setup() {
-      const router = useRouter();
-      return {
-        goHome() {
-          router.push('/');
-        },
-      };
-    },
-  });
+  const router = useRouter();
+
+  function goHome() {
+    router.push('/');
+  }
 </script>
 <style lang="less" scoped>
   .result-box {

src/views/setting/account/BasicSetting.vue

@@ -28,8 +28,8 @@
   </n-grid>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, ref, toRefs } from 'vue';
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
   import { useMessage } from 'naive-ui';
 
   const rules = {
@@ -49,37 +49,23 @@
       trigger: 'input',
     },
   };
+  const formRef: any = ref(null);
+  const message = useMessage();
 
-  export default defineComponent({
-    setup() {
-      const formRef: any = ref(null);
-      const message = useMessage();
-
-      const state = reactive({
-        formValue: {
-          name: '',
-          mobile: '',
-          email: '',
-          address: '',
-        },
-      });
-
-      function formSubmit() {
-        formRef.value.validate((errors) => {
-          if (!errors) {
-            message.success('验证成功');
-          } else {
-            message.error('验证失败，请填写完整信息');
-          }
-        });
-      }
-
-      return {
-        formRef,
-        ...toRefs(state),
-        rules,
-        formSubmit,
-      };
-    },
+  const formValue = reactive({
+    name: '',
+    mobile: '',
+    email: '',
+    address: '',
   });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        message.success('验证成功');
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
 </script>

src/views/setting/account/SafetySetting.vue

@@ -49,58 +49,4 @@
   </n-grid>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, ref, toRefs } from 'vue';
-  import { useMessage } from 'naive-ui';
-
-  const rules = {
-    name: {
-      required: true,
-      message: '请输入昵称',
-      trigger: 'blur',
-    },
-    email: {
-      required: true,
-      message: '请输入邮箱',
-      trigger: 'blur',
-    },
-    mobile: {
-      required: true,
-      message: '请输入联系电话',
-      trigger: 'input',
-    },
-  };
-
-  export default defineComponent({
-    setup() {
-      const formRef: any = ref(null);
-      const message = useMessage();
-
-      const state = reactive({
-        formValue: {
-          name: '',
-          mobile: '',
-          email: '',
-          address: '',
-        },
-      });
-
-      function formSubmit() {
-        formRef.value.validate((errors) => {
-          if (!errors) {
-            message.success('验证成功');
-          } else {
-            message.error('验证失败，请填写完整信息');
-          }
-        });
-      }
-
-      return {
-        formRef,
-        ...toRefs(state),
-        rules,
-        formSubmit,
-      };
-    },
-  });
-</script>
+<script lang="ts" setup></script>

src/views/setting/account/account.vue

@@ -24,8 +24,8 @@
     </n-grid>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, reactive, toRefs } from 'vue';
+<script lang="ts" setup>
+  import { ref } from 'vue';
   import BasicSetting from './BasicSetting.vue';
   import SafetySetting from './SafetySetting.vue';
 
@@ -41,26 +41,14 @@
       key: 2,
     },
   ];
-  export default defineComponent({
-    components: { BasicSetting, SafetySetting },
-    setup() {
-      const state = reactive({
-        type: 1,
-        typeTitle: '基本设置',
-      });
 
-      function switchType(e) {
-        state.type = e.key;
-        state.typeTitle = e.name;
-      }
+  const type = ref(1);
+  const typeTitle = ref('基本设置');
 
-      return {
-        ...toRefs(state),
-        switchType,
-        typeTabList,
-      };
-    },
-  });
+  function switchType(e) {
+    type.value = e.key;
+    typeTitle.value = e.name;
+  }
 </script>
 <style lang="less" scoped>
   .thing-cell {

src/views/system/menu/menu.vue

@@ -124,8 +124,8 @@
     <CreateDrawer ref="createDrawerRef" :title="drawerTitle" />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, ref, unref, reactive, toRefs, onMounted, computed } from 'vue';
+<script lang="ts" setup>
+  import { ref, unref, reactive, onMounted, computed } from 'vue';
   import { useMessage } from 'naive-ui';
   import { DownOutlined, AlignLeftOutlined, SearchOutlined, FormOutlined } from '@vicons/antd';
   import { getMenuList } from '@/api/system/menu';
@@ -145,127 +145,104 @@
     },
   };
 
-  export default defineComponent({
-    components: { DownOutlined, AlignLeftOutlined, SearchOutlined, FormOutlined, CreateDrawer },
-    setup() {
-      const formRef: any = ref(null);
-      const createDrawerRef = ref();
-      const message = useMessage();
+  const formRef: any = ref(null);
+  const createDrawerRef = ref();
+  const message = useMessage();
 
-      const isAddSon = computed(() => {
-        return !state.treeItemKey.length;
-      });
+  let treeItemKey = ref([]);
 
-      const addMenuOptions = ref([
-        {
-          label: '添加顶级菜单',
-          key: 'home',
-          disabled: false,
-        },
-        {
-          label: '添加子菜单',
-          key: 'son',
-          disabled: isAddSon,
-        },
-      ]);
+  let expandedKeys = ref([]);
 
-      const treeItemKey: string[] = reactive([]);
+  const treeData = ref([]);
 
-      const expandedKeys: string[] = reactive([]);
+  const loading = ref(true);
+  const subLoading = ref(false);
+  const isEditMenu = ref(false);
+  const treeItemTitle = ref('');
+  const pattern = ref('');
+  const drawerTitle = ref('');
 
-      const treeData: string[] = reactive([]);
-
-      const state = reactive({
-        loading: true,
-        subLoading: false,
-        isEditMenu: false,
-        treeItemTitle: '',
-        formParams: {
-          type: 1,
-          label: '',
-          subtitle: '',
-          path: '',
-          auth: '',
-          openType: 1,
-        },
-        pattern: '',
-        drawerTitle: '',
-        treeItemKey,
-        expandedKeys,
-        treeData,
-      });
-
-      function selectAddMenu(key: string) {
-        state.drawerTitle = key === 'home' ? '添加顶栏菜单' : `添加子菜单：${state.treeItemTitle}`;
-        openCreateDrawer();
-      }
-
-      function openCreateDrawer() {
-        const { openDrawer } = createDrawerRef.value;
-        openDrawer();
-      }
-
-      function selectedTree(keys: string[]) {
-        if (keys.length) {
-          const treeItem = getTreeItem(unref(state.treeData), keys[0]);
-          state.treeItemKey = keys;
-          state.treeItemTitle = treeItem.label;
-          state.formParams = Object.assign(state.formParams, treeItem);
-          state.isEditMenu = true;
-        } else {
-          state.isEditMenu = false;
-          state.treeItemKey = [];
-          state.treeItemTitle = '';
-        }
-      }
-
-      function handleReset() {
-        const treeItem = getTreeItem(unref(state.treeData), state.treeItemKey[0]);
-        state.formParams = Object.assign(state.formParams, treeItem);
-      }
-
-      function formSubmit() {
-        formRef.value.validate((errors: boolean) => {
-          if (!errors) {
-            message.error('抱歉，您没有该权限');
-          } else {
-            message.error('请填写完整信息');
-          }
-        });
-      }
-
-      function packHandle() {
-        if (state.expandedKeys.length) {
-          state.expandedKeys = [];
-        } else {
-          state.expandedKeys = state.treeData.map((item: any) => item.key);
-        }
-      }
-
-      onMounted(async () => {
-        const treeMenuList = await getMenuList();
-        state.expandedKeys = treeMenuList.list.map((item) => item.key);
-        state.treeData = treeMenuList.list;
-        state.loading = false;
-      });
-
-      function onExpandedKeys(keys: string[]) {
-        state.expandedKeys = keys;
-      }
-
-      return {
-        ...toRefs(state),
-        addMenuOptions,
-        createDrawerRef,
-        formRef,
-        rules,
-        selectedTree,
-        handleReset,
-        formSubmit,
-        packHandle,
-        onExpandedKeys,
-        selectAddMenu,
-      };
-    },
+  const isAddSon = computed(() => {
+    return !treeItemKey.value.length;
   });
+
+  const addMenuOptions = ref([
+    {
+      label: '添加顶级菜单',
+      key: 'home',
+      disabled: false,
+    },
+    {
+      label: '添加子菜单',
+      key: 'son',
+      disabled: isAddSon,
+    },
+  ]);
+
+  let formParams = reactive({
+    type: 1,
+    label: '',
+    subtitle: '',
+    path: '',
+    auth: '',
+    openType: 1,
+  });
+
+  function selectAddMenu(key: string) {
+    drawerTitle.value = key === 'home' ? '添加顶栏菜单' : `添加子菜单：${treeItemTitle.value}`;
+    openCreateDrawer();
+  }
+
+  function openCreateDrawer() {
+    const { openDrawer } = createDrawerRef.value;
+    openDrawer();
+  }
+
+  function selectedTree(keys) {
+    if (keys.length) {
+      const treeItem = getTreeItem(unref(treeData), keys[0]);
+      treeItemKey.value = keys;
+      treeItemTitle.value = treeItem.label;
+      formParams = Object.assign(formParams, treeItem);
+      isEditMenu.value = true;
+    } else {
+      isEditMenu.value = false;
+      treeItemKey.value = [];
+      treeItemTitle.value = '';
+    }
+  }
+
+  function handleReset() {
+    const treeItem = getTreeItem(unref(treeData), treeItemKey[0]);
+    formParams = Object.assign(formParams, treeItem);
+  }
+
+  function formSubmit() {
+    formRef.value.validate((errors: boolean) => {
+      if (!errors) {
+        message.error('抱歉，您没有该权限');
+      } else {
+        message.error('请填写完整信息');
+      }
+    });
+  }
+
+  function packHandle() {
+    if (expandedKeys.value.length) {
+      expandedKeys.value = [];
+    } else {
+      expandedKeys.value = unref(treeData).map((item: any) => item.key as string) as [];
+    }
+  }
+
+  onMounted(async () => {
+    const treeMenuList = await getMenuList();
+    formParams = treeMenuList.list.map((item) => item.key);
+    treeData.value = treeMenuList.list;
+    loading.value = false;
+  });
+
+  function onExpandedKeys(keys) {
+    expandedKeys.value = keys;
+  }
 </script>

src/views/system/role/role.vue

@@ -61,8 +61,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, toRefs, ref, h, onMounted } from 'vue';
+<script lang="ts" setup>
+  import { reactive, ref, unref, h, onMounted } from 'vue';
   import { useMessage } from 'naive-ui';
   import { BasicTable, TableAction } from '@/components/Table';
   import { getRoleList } from '@/api/system/role';
@@ -70,191 +70,144 @@
   import { columns } from './columns';
   import { PlusOutlined } from '@vicons/antd';
   import { getTreeAll } from '@/utils';
+  import { useRouter } from 'vue-router';
 
-  const rules = {
-    name: {
-      required: true,
-      trigger: ['blur', 'input'],
-      message: '请输入名称',
-    },
-    address: {
-      required: true,
-      trigger: ['blur', 'input'],
-      message: '请输入地址',
-    },
-    date: {
-      type: 'number',
-      required: true,
-      trigger: ['blur', 'change'],
-      message: '请选择日期',
+  const router = useRouter();
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const actionRef = ref();
+
+  const showModal = ref(false);
+  const formBtnLoading = ref(false);
+  const checkedAll = ref(false);
+  const editRoleTitle = ref('');
+  const treeData = ref([]);
+  const expandedKeys = ref([]);
+  const checkedKeys = ref(['console', 'step-form']);
+
+  const params = reactive({
+    pageSize: 5,
+    name: 'xiaoMa',
+  });
+
+  const actionColumn = reactive({
+    width: 250,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction, {
+        style: 'button',
+        actions: [
+          {
+            label: '菜单权限',
+            onClick: handleMenuAuth.bind(null, record),
+            // 根据业务控制是否显示 isShow 和 auth 是并且关系
+            ifShow: () => {
+              return true;
+            },
+            // 根据权限控制是否显示: 有权限，会显示，支持多个
+            auth: ['basic_list'],
+          },
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+            ifShow: () => {
+              return true;
+            },
+            auth: ['basic_list'],
+          },
+          {
+            label: '删除',
+            icon: 'ic:outline-delete-outline',
+            onClick: handleDelete.bind(null, record),
+            // 根据业务控制是否显示 isShow 和 auth 是并且关系
+            ifShow: () => {
+              return true;
+            },
+            // 根据权限控制是否显示: 有权限，会显示，支持多个
+            auth: ['basic_list'],
+          },
+        ],
+      });
     },
+  });
+
+  const loadDataTable = async (res: any) => {
+    let _params = {
+      ...res,
+      ...unref(params),
+    };
+    return await getRoleList(_params);
   };
 
-  export default defineComponent({
-    components: { BasicTable, TableAction, PlusOutlined },
-    setup() {
-      const formRef: any = ref(null);
-      const message = useMessage();
-      const actionRef = ref();
-      const state = reactive({
-        showModal: false,
-        formBtnLoading: false,
-        checkedAll: false,
-        editRoleTitle: '',
-        treeData: [],
-        expandedKeys: [],
-        checkedKeys: ['console', 'step-form'],
-        formParams: {
-          name: '',
-          address: '',
-          date: [],
-        },
-        params: {
-          pageSize: 5,
-          name: 'xiaoMa',
-        },
-        actionColumn: {
-          width: 250,
-          title: '操作',
-          key: 'action',
-          fixed: 'right',
-          render(record) {
-            return h(TableAction, {
-              style: 'button',
-              actions: [
-                {
-                  label: '菜单权限',
-                  onClick: handleMenuAuth.bind(null, record),
-                  // 根据业务控制是否显示 isShow 和 auth 是并且关系
-                  ifShow: () => {
-                    return true;
-                  },
-                  // 根据权限控制是否显示: 有权限，会显示，支持多个
-                  auth: ['basic_list'],
-                },
-                {
-                  label: '编辑',
-                  onClick: handleEdit.bind(null, record),
-                  ifShow: () => {
-                    return true;
-                  },
-                  auth: ['basic_list'],
-                },
-                {
-                  label: '删除',
-                  icon: 'ic:outline-delete-outline',
-                  onClick: handleDelete.bind(null, record),
-                  // 根据业务控制是否显示 isShow 和 auth 是并且关系
-                  ifShow: () => {
-                    return true;
-                  },
-                  // 根据权限控制是否显示: 有权限，会显示，支持多个
-                  auth: ['basic_list'],
-                },
-              ],
-            });
-          },
-        },
-      });
+  function onCheckedRow(rowKeys: any[]) {
+    console.log(rowKeys);
+  }
 
-      const loadDataTable = async (params) => {
-        const data = await getRoleList(params);
-        return data;
-      };
+  function reloadTable() {
+    actionRef.value.reload();
+  }
 
-      function onCheckedRow(rowKeys) {
-        console.log(rowKeys);
-      }
-
-      function reloadTable() {
-        actionRef.value.reload();
-      }
-
-      function confirmForm(e) {
-        e.preventDefault();
-        state.formBtnLoading = true;
-        formRef.value.validate((errors) => {
-          if (!errors) {
-            message.success('新建成功');
-            setTimeout(() => {
-              state.showModal = false;
-              reloadTable();
-            });
-          } else {
-            message.error('请填写完整信息');
-          }
-          state.formBtnLoading = false;
+  function confirmForm(e: any) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        message.success('新建成功');
+        setTimeout(() => {
+          showModal.value = false;
+          reloadTable();
         });
+      } else {
+        message.error('请填写完整信息');
       }
+      formBtnLoading.value = false;
+    });
+  }
 
-      function handleEdit(record: Recordable) {
-        console.log('点击了编辑', record);
-        router.push({ name: 'basic-info', params: { id: record.id } });
-      }
+  function handleEdit(record: Recordable) {
+    console.log('点击了编辑', record);
+    router.push({ name: 'basic-info', params: { id: record.id } });
+  }
 
-      function handleDelete(record: Recordable) {
-        console.log('点击了删除', record);
-        message.info('点击了删除');
-      }
+  function handleDelete(record: Recordable) {
+    console.log('点击了删除', record);
+    message.info('点击了删除');
+  }
 
-      function handleOpen(record: Recordable) {
-        console.log('点击了启用', record);
-        message.info('点击了删除');
-      }
+  function handleMenuAuth(record: Recordable) {
+    editRoleTitle.value = `分配 ${record.name} 的菜单权限`;
+    checkedKeys.value = record.menu_keys;
+    showModal.value = true;
+  }
 
-      function handleMenuAuth(record: Recordable) {
-        state.editRoleTitle = `分配 ${record.name} 的菜单权限`;
-        state.checkedKeys = record.menu_keys;
-        state.showModal = true;
-      }
+  function checkedTree(keys) {
+    checkedKeys.value = [checkedKeys.value, ...keys];
+  }
 
-      function checkedTree(keys) {
-        state.checkedKeys = [state.checkedKeys, ...keys];
-      }
+  function packHandle() {
+    if (expandedKeys.value.length) {
+      expandedKeys.value = [];
+    } else {
+      expandedKeys.value = treeData.value.map((item: any) => item.key) as [];
+    }
+  }
 
-      function packHandle() {
-        if (state.expandedKeys.length) {
-          state.expandedKeys = [];
-        } else {
-          state.expandedKeys = state.treeData.map((item) => item.key);
-        }
-      }
+  function checkedAllHandle() {
+    if (!checkedAll.value) {
+      checkedKeys.value = getTreeAll(treeData.value);
+      checkedAll.value = true;
+    } else {
+      checkedKeys.value = [];
+      checkedAll.value = false;
+    }
+  }
 
-      function checkedAllHandle() {
-        if (!state.checkedAll) {
-          state.checkedKeys = getTreeAll(state.treeData);
-          state.checkedAll = true;
-        } else {
-          state.checkedKeys = [];
-          state.checkedAll = false;
-        }
-      }
-
-      onMounted(async () => {
-        const treeMenuList = await getMenuList();
-        state.expandedKeys = treeMenuList.list.map((item) => item.key);
-        state.treeData = treeMenuList.list;
-      });
-
-      return {
-        ...toRefs(state),
-        formRef,
-        columns,
-        rules,
-        actionRef,
-        confirmForm,
-        loadDataTable,
-        onCheckedRow,
-        reloadTable,
-        handleEdit,
-        handleDelete,
-        handleOpen,
-        handleMenuAuth,
-        checkedTree,
-        packHandle,
-        checkedAllHandle,
-      };
-    },
+  onMounted(async () => {
+    const treeMenuList = await getMenuList();
+    expandedKeys.value = treeMenuList.list.map((item) => item.key);
+    treeData.value = treeMenuList.list;
   });
 </script>
 

tsconfig.json

@@ -14,7 +14,7 @@
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedParameters": false,
     "experimentalDecorators": true,
     "lib": ["dom", "esnext"],
     "types": ["vite/client", "jest"],

yarn.lock

@@ -626,10 +626,10 @@
   resolved "https://registry.npm.taobao.org/@emotion/hash/download/@emotion/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha1-u7/2iXj+/b5ozLUzvIy+HRr7VBM=
 
-"@eslint/eslintrc@^0.4.2":
-  version "0.4.2"
-  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz#f63d0ef06f5c0c57d76c4ab5f63d3835c51b0179"
-  integrity sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==
+"@eslint/eslintrc@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
+  integrity sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==
   dependencies:
     ajv "^6.12.4"
     debug "^4.1.1"
@@ -641,6 +641,20 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@humanwhocodes/config-array@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
+  integrity sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==
+  dependencies:
+    "@humanwhocodes/object-schema" "^1.2.0"
+    debug "^4.1.1"
+    minimatch "^3.0.4"
+
+"@humanwhocodes/object-schema@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
+  integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.nlark.com/@istanbuljs/load-nyc-config/download/@istanbuljs/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -959,6 +973,11 @@
   resolved "https://registry.nlark.com/@types/estree/download/@types/estree-0.0.39.tgz?cache=0&sync_timestamp=1622611944045&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Festree%2Fdownload%2F%40types%2Festree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha1-4Xfmme4bjCLSMXTKqnQiZEOJUJ8=
 
+"@types/estree@^0.0.48":
+  version "0.0.48"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.48.tgz#18dc8091b285df90db2f25aa7d906cfc394b7f74"
+  integrity sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew==
+
 "@types/graceful-fs@^4.1.2":
   version "4.1.5"
   resolved "https://registry.nlark.com/@types/graceful-fs/download/@types/graceful-fs-4.1.5.tgz?cache=0&sync_timestamp=1621241272949&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fgraceful-fs%2Fdownload%2F%40types%2Fgraceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
@@ -1108,29 +1127,28 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^4.26.1":
-  version "4.26.1"
-  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.26.1.tgz#b9c7313321cb837e2bf8bebe7acc2220659e67d3"
-  integrity sha512-aoIusj/8CR+xDWmZxARivZjbMBQTT9dImUtdZ8tVCVRXgBUuuZyM5Of5A9D9arQPxbi/0rlJLcuArclz/rCMJw==
+"@typescript-eslint/eslint-plugin@^4.29.1":
+  version "4.29.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.29.1.tgz#808d206e2278e809292b5de752a91105da85860b"
+  integrity sha512-AHqIU+SqZZgBEiWOrtN94ldR3ZUABV5dUG94j8Nms9rQnHFc8fvDOue/58K4CFz6r8OtDDc35Pw9NQPWo0Ayrw==
   dependencies:
-    "@typescript-eslint/experimental-utils" "4.26.1"
-    "@typescript-eslint/scope-manager" "4.26.1"
+    "@typescript-eslint/experimental-utils" "4.29.1"
+    "@typescript-eslint/scope-manager" "4.29.1"
     debug "^4.3.1"
     functional-red-black-tree "^1.0.1"
-    lodash "^4.17.21"
     regexpp "^3.1.0"
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/experimental-utils@4.26.1":
-  version "4.26.1"
-  resolved "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.26.1.tgz#a35980a2390da9232aa206b27f620eab66e94142"
-  integrity sha512-sQHBugRhrXzRCs9PaGg6rowie4i8s/iD/DpTB+EXte8OMDfdCG5TvO73XlO9Wc/zi0uyN4qOmX9hIjQEyhnbmQ==
+"@typescript-eslint/experimental-utils@4.29.1":
+  version "4.29.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.29.1.tgz#0af2b17b0296b60c6b207f11062119fa9c5a8994"
+  integrity sha512-kl6QG6qpzZthfd2bzPNSJB2YcZpNOrP6r9jueXupcZHnL74WiuSjaft7WSu17J9+ae9zTlk0KJMXPUj0daBxMw==
   dependencies:
     "@types/json-schema" "^7.0.7"
-    "@typescript-eslint/scope-manager" "4.26.1"
-    "@typescript-eslint/types" "4.26.1"
-    "@typescript-eslint/typescript-estree" "4.26.1"
+    "@typescript-eslint/scope-manager" "4.29.1"
+    "@typescript-eslint/types" "4.29.1"
+    "@typescript-eslint/typescript-estree" "4.29.1"
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
@@ -1146,24 +1164,16 @@
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/parser@^4.26.1":
-  version "4.26.1"
-  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.26.1.tgz#cecfdd5eb7a5c13aabce1c1cfd7fbafb5a0f1e8e"
-  integrity sha512-q7F3zSo/nU6YJpPJvQveVlIIzx9/wu75lr6oDbDzoeIRWxpoc/HQ43G4rmMoCc5my/3uSj2VEpg/D83LYZF5HQ==
+"@typescript-eslint/parser@^4.29.1":
+  version "4.29.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.29.1.tgz#17dfbb45c9032ffa0fe15881d20fbc2a4bdeb02d"
+  integrity sha512-3fL5iN20hzX3Q4OkG7QEPFjZV2qsVGiDhEwwh+EkmE/w7oteiOvUNzmpu5eSwGJX/anCryONltJ3WDmAzAoCMg==
   dependencies:
-    "@typescript-eslint/scope-manager" "4.26.1"
-    "@typescript-eslint/types" "4.26.1"
-    "@typescript-eslint/typescript-estree" "4.26.1"
+    "@typescript-eslint/scope-manager" "4.29.1"
+    "@typescript-eslint/types" "4.29.1"
+    "@typescript-eslint/typescript-estree" "4.29.1"
     debug "^4.3.1"
 
-"@typescript-eslint/scope-manager@4.26.1":
-  version "4.26.1"
-  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.26.1.tgz#075a74a15ff33ee3a7ed33e5fce16ee86689f662"
-  integrity sha512-TW1X2p62FQ8Rlne+WEShyd7ac2LA6o27S9i131W4NwDSfyeVlQWhw8ylldNNS8JG6oJB9Ha9Xyc+IUcqipvheQ==
-  dependencies:
-    "@typescript-eslint/types" "4.26.1"
-    "@typescript-eslint/visitor-keys" "4.26.1"
-
 "@typescript-eslint/scope-manager@4.28.4":
   version "4.28.4"
   resolved "https://registry.nlark.com/@typescript-eslint/scope-manager/download/@typescript-eslint/scope-manager-4.28.4.tgz?cache=0&sync_timestamp=1626715953543&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40typescript-eslint%2Fscope-manager%2Fdownload%2F%40typescript-eslint%2Fscope-manager-4.28.4.tgz#bdbce9b6a644e34f767bd68bc17bb14353b9fe7f"
@@ -1172,28 +1182,23 @@
     "@typescript-eslint/types" "4.28.4"
     "@typescript-eslint/visitor-keys" "4.28.4"
 
-"@typescript-eslint/types@4.26.1":
-  version "4.26.1"
-  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.26.1.tgz#9e7c523f73c34b04a765e4167ca5650436ef1d38"
-  integrity sha512-STyMPxR3cS+LaNvS8yK15rb8Y0iL0tFXq0uyl6gY45glyI7w0CsyqyEXl/Fa0JlQy+pVANeK3sbwPneCbWE7yg==
+"@typescript-eslint/scope-manager@4.29.1":
+  version "4.29.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.29.1.tgz#f25da25bc6512812efa2ce5ebd36619d68e61358"
+  integrity sha512-Hzv/uZOa9zrD/W5mftZa54Jd5Fed3tL6b4HeaOpwVSabJK8CJ+2MkDasnX/XK4rqP5ZTWngK1ZDeCi6EnxPQ7A==
+  dependencies:
+    "@typescript-eslint/types" "4.29.1"
+    "@typescript-eslint/visitor-keys" "4.29.1"
 
 "@typescript-eslint/types@4.28.4":
   version "4.28.4"
   resolved "https://registry.nlark.com/@typescript-eslint/types/download/@typescript-eslint/types-4.28.4.tgz?cache=0&sync_timestamp=1626715941479&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40typescript-eslint%2Ftypes%2Fdownload%2F%40typescript-eslint%2Ftypes-4.28.4.tgz#41acbd79b5816b7c0dd7530a43d97d020d3aeb42"
   integrity sha1-Qay9ebWBa3wN11MKQ9l9Ag0660I=
 
-"@typescript-eslint/typescript-estree@4.26.1":
-  version "4.26.1"
-  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.26.1.tgz#b2ce2e789233d62283fae2c16baabd4f1dbc9633"
-  integrity sha512-l3ZXob+h0NQzz80lBGaykdScYaiEbFqznEs99uwzm8fPHhDjwaBFfQkjUC/slw6Sm7npFL8qrGEAMxcfBsBJUg==
-  dependencies:
-    "@typescript-eslint/types" "4.26.1"
-    "@typescript-eslint/visitor-keys" "4.26.1"
-    debug "^4.3.1"
-    globby "^11.0.3"
-    is-glob "^4.0.1"
-    semver "^7.3.5"
-    tsutils "^3.21.0"
+"@typescript-eslint/types@4.29.1":
+  version "4.29.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.29.1.tgz#94cce6cf7cc83451df03339cda99d326be2feaf5"
+  integrity sha512-Jj2yu78IRfw4nlaLtKjVaGaxh/6FhofmQ/j8v3NXmAiKafbIqtAPnKYrf0sbGjKdj0hS316J8WhnGnErbJ4RCA==
 
 "@typescript-eslint/typescript-estree@4.28.4":
   version "4.28.4"
@@ -1208,13 +1213,18 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/visitor-keys@4.26.1":
-  version "4.26.1"
-  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.26.1.tgz#0d55ea735cb0d8903b198017d6d4f518fdaac546"
-  integrity sha512-IGouNSSd+6x/fHtYRyLOM6/C+QxMDzWlDtN41ea+flWuSF9g02iqcIlX8wM53JkfljoIjP0U+yp7SiTS1onEkw==
+"@typescript-eslint/typescript-estree@4.29.1":
+  version "4.29.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.29.1.tgz#7b32a25ff8e51f2671ccc6b26cdbee3b1e6c5e7f"
+  integrity sha512-lIkkrR9E4lwZkzPiRDNq0xdC3f2iVCUjw/7WPJ4S2Sl6C3nRWkeE1YXCQ0+KsiaQRbpY16jNaokdWnm9aUIsfw==
   dependencies:
-    "@typescript-eslint/types" "4.26.1"
-    eslint-visitor-keys "^2.0.0"
+    "@typescript-eslint/types" "4.29.1"
+    "@typescript-eslint/visitor-keys" "4.29.1"
+    debug "^4.3.1"
+    globby "^11.0.3"
+    is-glob "^4.0.1"
+    semver "^7.3.5"
+    tsutils "^3.21.0"
 
 "@typescript-eslint/visitor-keys@4.28.4":
   version "4.28.4"
@@ -1224,6 +1234,14 @@
     "@typescript-eslint/types" "4.28.4"
     eslint-visitor-keys "^2.0.0"
 
+"@typescript-eslint/visitor-keys@4.29.1":
+  version "4.29.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.29.1.tgz#0615be8b55721f5e854f3ee99f1a714f2d093e5d"
+  integrity sha512-zLqtjMoXvgdZY/PG6gqA73V8BjqPs4af1v2kiiETBObp+uC6gRYnJLmJHxC0QyUrrHDLJPIWNYxoBV3wbcRlag==
+  dependencies:
+    "@typescript-eslint/types" "4.29.1"
+    eslint-visitor-keys "^2.0.0"
+
 "@vicons/antd@^0.10.0":
   version "0.10.0"
   resolved "https://registry.nlark.com/@vicons/antd/download/@vicons/antd-0.10.0.tgz#17661ed654122a6450926f40ceba9fd67ae2e036"
@@ -1271,28 +1289,6 @@
     html-tags "^3.1.0"
     svg-tags "^1.0.0"
 
-"@vue/compiler-core@3.1.1":
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.1.1.tgz#4f2c5d70eabd454675714cc8bd2b97f6a8efb196"
-  integrity sha512-Z1RO3T6AEtAUFf2EqqovFm3ohAeTvFzRtB0qUENW2nEerJfdlk13/LS1a0EgsqlzxmYfR/S/S/gW9PLbFZZxkA==
-  dependencies:
-    "@babel/parser" "^7.12.0"
-    "@babel/types" "^7.12.0"
-    "@vue/shared" "3.1.1"
-    estree-walker "^2.0.1"
-    source-map "^0.6.1"
-
-"@vue/compiler-core@3.1.2":
-  version "3.1.2"
-  resolved "https://registry.nlark.com/@vue/compiler-core/download/@vue/compiler-core-3.1.2.tgz#31ab1d88e1706a5c7a545faeeb64c31bd0101db0"
-  integrity sha1-MasdiOFwalx6VF+u62TDG9AQHbA=
-  dependencies:
-    "@babel/parser" "^7.12.0"
-    "@babel/types" "^7.12.0"
-    "@vue/shared" "3.1.2"
-    estree-walker "^2.0.1"
-    source-map "^0.6.1"
-
 "@vue/compiler-core@3.1.5":
   version "3.1.5"
   resolved "https://registry.nlark.com/@vue/compiler-core/download/@vue/compiler-core-3.1.5.tgz#298f905b6065d6d81ff63756f98c60876b393c87"
@@ -1304,21 +1300,16 @@
     estree-walker "^2.0.1"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@3.1.1":
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.1.1.tgz#ef60d856ac2ede5b2ad5c72a7a68122895e3d652"
-  integrity sha512-nobRIo0t5ibzg+q8nC31m+aJhbq8FbWUoKvk6h3Vs1EqTDJaj6lBTcVTq5or8AYht7FbSpdAJ81isbJ1rWNX7A==
+"@vue/compiler-core@3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.2.tgz#8d3e29f129579ed9b14f48af735fd8d95f248504"
+  integrity sha512-QhCI0ZU5nAR0LMcLgzW3v75374tIrHGp8XG5CzJS7Nsy+iuignbE4MZ2XJfh5TGIrtpuzfWA4eTIfukZf/cRdg==
   dependencies:
-    "@vue/compiler-core" "3.1.1"
-    "@vue/shared" "3.1.1"
-
-"@vue/compiler-dom@3.1.2":
-  version "3.1.2"
-  resolved "https://registry.nlark.com/@vue/compiler-dom/download/@vue/compiler-dom-3.1.2.tgz#75a7731bcc5d9718183a3c56c18e992f7c13e7b1"
-  integrity sha1-dadzG8xdlxgYOjxWwY6ZL3wT57E=
-  dependencies:
-    "@vue/compiler-core" "3.1.2"
-    "@vue/shared" "3.1.2"
+    "@babel/parser" "^7.12.0"
+    "@babel/types" "^7.12.0"
+    "@vue/shared" "3.2.2"
+    estree-walker "^2.0.1"
+    source-map "^0.6.1"
 
 "@vue/compiler-dom@3.1.5":
   version "3.1.5"
@@ -1328,17 +1319,26 @@
     "@vue/compiler-core" "3.1.5"
     "@vue/shared" "3.1.5"
 
-"@vue/compiler-sfc@3.1.1":
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.1.1.tgz#d4e4507c013d0b219f0b106b317ec5bb1cde3398"
-  integrity sha512-lSgMsZaYHF+bAgryq5aUqpvyfhu52GJI2/4LoiJCE5uaxc6FCZfxfgqgw/d9ltiZghv+HiISFtmQVAVvlsk+/w==
+"@vue/compiler-dom@3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.2.tgz#26e198498746c53047c3744d26fc95e670692ab7"
+  integrity sha512-ggcc+NV/ENIE0Uc3TxVE/sKrhYVpLepMAAmEiQ047332mbKOvUkowz4TTFZ+YkgOIuBOPP0XpCxmCMg7p874mA==
+  dependencies:
+    "@vue/compiler-core" "3.2.2"
+    "@vue/shared" "3.2.2"
+
+"@vue/compiler-sfc@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.2.tgz#5b7b13b07689be8e4880d856f72d1be500785be9"
+  integrity sha512-hrtqpQ5L6IPn5v7yVRo7uvLcQxv0z1+KBjZBWMBOcrXz4t+PKUxU/SWd6Tl9T8FDmYlunzKUh6lcx+2CLo6f5A==
   dependencies:
     "@babel/parser" "^7.13.9"
     "@babel/types" "^7.13.0"
-    "@vue/compiler-core" "3.1.1"
-    "@vue/compiler-dom" "3.1.1"
-    "@vue/compiler-ssr" "3.1.1"
-    "@vue/shared" "3.1.1"
+    "@types/estree" "^0.0.48"
+    "@vue/compiler-core" "3.2.2"
+    "@vue/compiler-dom" "3.2.2"
+    "@vue/compiler-ssr" "3.2.2"
+    "@vue/shared" "3.2.2"
     consolidate "^0.16.0"
     estree-walker "^2.0.1"
     hash-sum "^2.0.0"
@@ -1350,33 +1350,31 @@
     postcss-selector-parser "^6.0.4"
     source-map "^0.6.1"
 
-"@vue/compiler-ssr@3.1.1":
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.1.1.tgz#1d08b98601397258ed059b75966e0e94a385d770"
-  integrity sha512-7H6krZtVt3h/YzfNp7eYK41hMDz8ZskiBy+Wby+EDRINX6BD9JQ5C8zyy2xAa7T6Iz2VrQzsaJ/Bb52lTPSS5A==
+"@vue/compiler-ssr@3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.2.tgz#633bb8e01f00a969c35ca12db32be7fe4c7185a9"
+  integrity sha512-rVl1agMFhdEN3Go0bCriXo+3cysxKIuRP0yh1Wd8ysRrKfAmokyDhUA8PrGSq2Ymj/LdZTh+4OKfj3p2+C+hlA==
   dependencies:
-    "@vue/compiler-dom" "3.1.1"
-    "@vue/shared" "3.1.1"
+    "@vue/compiler-dom" "3.2.2"
+    "@vue/shared" "3.2.2"
 
 "@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.0.0-beta.14":
   version "6.0.0-beta.14"
   resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.14.tgz#6ed2d6f8d66a9256c9ad04bfff08309ba87b9723"
   integrity sha512-44fPrrN1cqcs6bFkT0C+yxTM6PZXLbR+ESh1U1j8UD22yO04gXvxH62HApMjLbS3WqJO/iCNC+CYT+evPQh2EQ==
 
+"@vue/devtools-api@^6.0.0-beta.15":
+  version "6.0.0-beta.15"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.15.tgz#ad7cb384e062f165bcf9c83732125bffbc2ad83d"
+  integrity sha512-quBx4Jjpexo6KDiNUGFr/zF/2A4srKM9S9v2uHgMXSU//hjgq1eGzqkIFql8T9gfX5ZaVOUzYBP3jIdIR3PKIA==
+
 "@vue/eslint-config-typescript@^7.0.0":
   version "7.0.0"
-  resolved "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-7.0.0.tgz#220c70c2edf7a253e739298525f4d401b8ef0038"
+  resolved "https://registry.yarnpkg.com/@vue/eslint-config-typescript/-/eslint-config-typescript-7.0.0.tgz#220c70c2edf7a253e739298525f4d401b8ef0038"
   integrity sha512-UxUlvpSrFOoF8aQ+zX1leYiEBEm7CZmXYn/ZEM1zwSadUzpamx56RB4+Htdjisv1mX2tOjBegNUqH3kz2OL+Aw==
   dependencies:
     vue-eslint-parser "^7.0.0"
 
-"@vue/reactivity@3.1.2":
-  version "3.1.2"
-  resolved "https://registry.nlark.com/@vue/reactivity/download/@vue/reactivity-3.1.2.tgz#66fa530dd726d2fef285ae55d02106a727db463b"
-  integrity sha1-ZvpTDdcm0v7yha5V0CEGpyfbRjs=
-  dependencies:
-    "@vue/shared" "3.1.2"
-
 "@vue/reactivity@3.1.5":
   version "3.1.5"
   resolved "https://registry.nlark.com/@vue/reactivity/download/@vue/reactivity-3.1.5.tgz#dbec4d9557f7c8f25c2635db1e23a78a729eb991"
@@ -1384,13 +1382,12 @@
   dependencies:
     "@vue/shared" "3.1.5"
 
-"@vue/runtime-core@3.1.2":
-  version "3.1.2"
-  resolved "https://registry.nlark.com/@vue/runtime-core/download/@vue/runtime-core-3.1.2.tgz#f4dbc503cfc9a02ab5f1ebe002c3322512064a54"
-  integrity sha1-9NvFA8/JoCq18evgAsMyJRIGSlQ=
+"@vue/reactivity@3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.2.tgz#d37011a68395e038a3cf5256af52d48c591b06b6"
+  integrity sha512-IHjhtmrhK6dzacj/EnLQDWOaA3HuzzVk6w84qgV8EpS4uWGIJXiRalMRg6XvGW2ykJvIl3pLsF0aBFlTMRiLOA==
   dependencies:
-    "@vue/reactivity" "3.1.2"
-    "@vue/shared" "3.1.2"
+    "@vue/shared" "3.2.2"
 
 "@vue/runtime-core@3.1.5":
   version "3.1.5"
@@ -1400,14 +1397,13 @@
     "@vue/reactivity" "3.1.5"
     "@vue/shared" "3.1.5"
 
-"@vue/runtime-dom@3.1.2":
-  version "3.1.2"
-  resolved "https://registry.nlark.com/@vue/runtime-dom/download/@vue/runtime-dom-3.1.2.tgz#0fd8724f14bc7ba64b6c954d874a8d8a4fcb5fe9"
-  integrity sha1-D9hyTxS8e6ZLbJVNh0qNik/LX+k=
+"@vue/runtime-core@3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.2.tgz#b9a7250783de19dd8dd6febf008084b0f9144586"
+  integrity sha512-/aUk1+GO/VPX0oVxhbzSWE1zrf3/wGCsO1ALNisVokYftKqfqLDjbJHE6mrI2hx3MiuwbHrWjJClkGUVTIOPEQ==
   dependencies:
-    "@vue/runtime-core" "3.1.2"
-    "@vue/shared" "3.1.2"
-    csstype "^2.6.8"
+    "@vue/reactivity" "3.2.2"
+    "@vue/shared" "3.2.2"
 
 "@vue/runtime-dom@3.1.5":
   version "3.1.5"
@@ -1418,21 +1414,33 @@
     "@vue/shared" "3.1.5"
     csstype "^2.6.8"
 
-"@vue/shared@3.1.1":
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.1.1.tgz#2287cfc3dc20e5b20aeb65c2c3a56533bdca801c"
-  integrity sha512-g+4pzAw7PYSjARtLBoDq6DmcblX8i9KJHSCnyM5VDDFFifUaUT9iHbFpOF/KOizQ9f7QAqU2JH3Y6aXjzUMhVA==
-
-"@vue/shared@3.1.2":
-  version "3.1.2"
-  resolved "https://registry.nlark.com/@vue/shared/download/@vue/shared-3.1.2.tgz#1069c0bc7d6f4bd15ccf3a5f3be29450aca368f9"
-  integrity sha1-EGnAvH1vS9FczzpfO+KUUKyjaPk=
+"@vue/runtime-dom@3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.2.tgz#6d0da23ed1cfc702477f4b8c5dc4f9335c94e119"
+  integrity sha512-1Le/NpCfawCOfePfJezvWUF+oCVLU8N+IHN4oFDOxRe6/PgHNJ+yT+YdxFifBfI+TIAoXI/9PsnqzmJZV+xsmw==
+  dependencies:
+    "@vue/runtime-core" "3.2.2"
+    "@vue/shared" "3.2.2"
+    csstype "^2.6.8"
 
 "@vue/shared@3.1.5":
   version "3.1.5"
   resolved "https://registry.nlark.com/@vue/shared/download/@vue/shared-3.1.5.tgz#74ee3aad995d0a3996a6bb9533d4d280514ede03"
   integrity sha1-dO46rZldCjmWpruVM9TSgFFO3gM=
 
+"@vue/shared@3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.2.tgz#6104185ebd57af5a14ac51c1f491b2205fc24054"
+  integrity sha512-dvYb318tk9uOzHtSaT3WII/HscQSIRzoCZ5GyxEb3JlkEXASpAUAQwKnvSe2CudnF8XHFRTB7VITWSnWNLZUtA==
+
+"@vueup/vue-quill@^1.0.0-beta.7":
+  version "1.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/@vueup/vue-quill/-/vue-quill-1.0.0-beta.7.tgz#f1b912f6049a651b9787766290120700b9dece91"
+  integrity sha512-JOU7RJ953nDlzRVbJ3lEul3e2Wfb1K0m6ny/tYzLefybMkuKBCvB5MV1y4ct5G/m+FeowE5sphuiVGgGqXOmCw==
+  dependencies:
+    quill "^1.3.7"
+    quill-delta "^3.6.3"
+
 "@vueuse/core@^5.0.3":
   version "5.0.3"
   resolved "https://registry.nlark.com/@vueuse/core/download/@vueuse/core-5.0.3.tgz#8f3170e2a51ae62fb1725c84d4cc02a7552aad0b"
@@ -1864,7 +1872,7 @@ cachedir@2.2.0:
   resolved "https://registry.npmjs.org/cachedir/-/cachedir-2.2.0.tgz#19afa4305e05d79e417566882e0c8f960f62ff0e"
   integrity sha512-VvxA0xhNqIIfg0V9AmJkDg91DaJwryutH5rVEZAhcNi4iJFj9f+QxmAjgK1LT9I8OgToX27fypX6/MeCXVbBjQ==
 
-call-bind@^1.0.0:
+call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
   integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
@@ -2076,6 +2084,11 @@ clone-regexp@^2.1.0:
   dependencies:
     is-regexp "^2.0.0"
 
+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npm.taobao.org/co/download/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -2438,6 +2451,18 @@ dedent@0.7.0, dedent@^0.7.0:
   resolved "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
 
+deep-equal@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
+  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
+  dependencies:
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.1"
+    is-regex "^1.0.4"
+    object-is "^1.0.1"
+    object-keys "^1.1.1"
+    regexp.prototype.flags "^1.2.0"
+
 deep-is@^0.1.3, deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -2448,6 +2473,13 @@ deepmerge@^4.2.2:
   resolved "https://registry.npm.taobao.org/deepmerge/download/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=
 
+define-properties@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
+  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
+  dependencies:
+    object-keys "^1.0.12"
+
 defined@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npm.taobao.org/defined/download/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
@@ -2740,24 +2772,24 @@ escodegen@^2.0.0:
 
 eslint-config-prettier@^8.3.0:
   version "8.3.0"
-  resolved "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
   integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==
 
 eslint-define-config@^1.0.9:
   version "1.0.9"
-  resolved "https://registry.nlark.com/eslint-define-config/download/eslint-define-config-1.0.9.tgz#72e5e2410c576667a6ba1b5bff9801eeda476256"
-  integrity sha1-cuXiQQxXZmemuhtb/5gB7tpHYlY=
+  resolved "https://registry.yarnpkg.com/eslint-define-config/-/eslint-define-config-1.0.9.tgz#72e5e2410c576667a6ba1b5bff9801eeda476256"
+  integrity sha512-LRzNlRo9sv43BAXY+nhZIUCZLRisTMEXXSqlGc2uZ8emAGyJv3FDSew2MIVRMwThexEjVxjNmeqduaexJ/GT3Q==
 
 eslint-plugin-jest@^24.4.0:
   version "24.4.0"
-  resolved "https://registry.nlark.com/eslint-plugin-jest/download/eslint-plugin-jest-24.4.0.tgz#fa4b614dbd46a98b652d830377971f097bda9262"
-  integrity sha1-+kthTb1GqYtlLYMDd5cfCXvakmI=
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-24.4.0.tgz#fa4b614dbd46a98b652d830377971f097bda9262"
+  integrity sha512-8qnt/hgtZ94E9dA6viqfViKBfkJwFHXgJmTWlMGDgunw1XJEGqm3eiPjDsTanM3/u/3Az82nyQM9GX7PM/QGmg==
   dependencies:
     "@typescript-eslint/experimental-utils" "^4.0.1"
 
 eslint-plugin-prettier@^3.4.0:
   version "3.4.0"
-  resolved "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz#cdbad3bf1dbd2b177e9825737fe63b476a08f0c7"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz#cdbad3bf1dbd2b177e9825737fe63b476a08f0c7"
   integrity sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==
   dependencies:
     prettier-linter-helpers "^1.0.0"
@@ -2804,13 +2836,14 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
-eslint@^7.28.0:
-  version "7.28.0"
-  resolved "https://registry.npmjs.org/eslint/-/eslint-7.28.0.tgz#435aa17a0b82c13bb2be9d51408b617e49c1e820"
-  integrity sha512-UMfH0VSjP0G4p3EWirscJEQ/cHqnT/iuH6oNZOB94nBjWbMnhGEPxsZm1eyIW0C/9jLI0Fow4W5DXLjEI7mn1g==
+eslint@^7.32.0:
+  version "7.32.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
+  integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
   dependencies:
     "@babel/code-frame" "7.12.11"
-    "@eslint/eslintrc" "^0.4.2"
+    "@eslint/eslintrc" "^0.4.3"
+    "@humanwhocodes/config-array" "^0.5.0"
     ajv "^6.10.0"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
@@ -2921,6 +2954,11 @@ esutils@^2.0.2:
   resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+eventemitter3@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
+  integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
+
 evtd@^0.2.2:
   version "0.2.2"
   resolved "https://registry.nlark.com/evtd/download/evtd-0.2.2.tgz#bebbe27e15aedc1d5c18bc2620dfc90f260787c3"
@@ -2987,7 +3025,7 @@ expect@^27.0.6:
     jest-message-util "^27.0.6"
     jest-regex-util "^27.0.6"
 
-extend@^3.0.0:
+extend@^3.0.0, extend@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -3006,6 +3044,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
+  integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
+
 fast-diff@^1.1.2:
   version "1.2.0"
   resolved "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
@@ -3479,11 +3522,18 @@ has-flag@^4.0.0:
   resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-has-symbols@^1.0.1:
+has-symbols@^1.0.1, has-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
   integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
 
+has-tostringtag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
+  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+  dependencies:
+    has-symbols "^1.0.2"
+
 has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
@@ -3742,6 +3792,14 @@ is-alphanumerical@^1.0.0:
     is-alphabetical "^1.0.0"
     is-decimal "^1.0.0"
 
+is-arguments@^1.0.4:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
+  integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -3778,6 +3836,13 @@ is-core-module@^2.2.0:
   dependencies:
     has "^1.0.3"
 
+is-date-object@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
+  integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
 is-decimal@^1.0.0:
   version "1.0.4"
   resolved "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
@@ -3860,6 +3925,14 @@ is-potential-custom-element-name@^1.0.1:
   resolved "https://registry.npm.taobao.org/is-potential-custom-element-name/download/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
   integrity sha1-Fx7W8Z46xVQ5Tt94yqBXhKRb67U=
 
+is-regex@^1.0.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
 is-regexp@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
@@ -5143,6 +5216,19 @@ object-inspect@^1.9.0:
   resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz#c2aa7d2d09f50c99375704f7a0adf24c5782d369"
   integrity sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==
 
+object-is@^1.0.1:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
+  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+object-keys@^1.0.12, object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.nlark.com/on-finished/download/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
@@ -5253,6 +5339,11 @@ param-case@^3.0.3, param-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
+parchment@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
+  integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -5363,12 +5454,13 @@ pify@^4.0.1:
   resolved "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
-pinia@^2.0.0-beta.3:
-  version "2.0.0-beta.3"
-  resolved "https://registry.nlark.com/pinia/download/pinia-2.0.0-beta.3.tgz#c6f0d07da54dc5aa237f4cc9281898e927b33d16"
-  integrity sha1-xvDQfaVNxaojf0zJKBiY6SezPRY=
+pinia@^2.0.0-rc.4:
+  version "2.0.0-rc.4"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.0-rc.4.tgz#43fca89aeb8d397ca9900f001c2125c4d6765dd6"
+  integrity sha512-I43V1TIFyDWT4UTi1CPLQXQZYXGQHQMKpDPI+oxC2fv0c+ej0fQBoKCn4WbfRWB+Vf5chhWM97GFLI+OWmUQEQ==
   dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.14"
+    "@vue/devtools-api" "^6.0.0-beta.15"
+    vue-demi latest
 
 pinkie-promise@^2.0.0:
   version "2.0.1"
@@ -5727,6 +5819,27 @@ quick-lru@^5.1.1:
   resolved "https://registry.npm.taobao.org/quick-lru/download/quick-lru-5.1.1.tgz?cache=0&sync_timestamp=1610610364837&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fquick-lru%2Fdownload%2Fquick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha1-NmST5rPkKjpoheLpnRj4D7eoyTI=
 
+quill-delta@^3.6.2, quill-delta@^3.6.3:
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"
+  integrity sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==
+  dependencies:
+    deep-equal "^1.0.1"
+    extend "^3.0.2"
+    fast-diff "1.1.2"
+
+quill@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
+  integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
+  dependencies:
+    clone "^2.1.1"
+    deep-equal "^1.0.1"
+    eventemitter3 "^2.0.3"
+    extend "^3.0.2"
+    parchment "^1.1.4"
+    quill-delta "^3.6.2"
+
 react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.nlark.com/react-is/download/react-is-17.0.2.tgz?cache=0&sync_timestamp=1624033049355&other_urls=https%3A%2F%2Fregistry.nlark.com%2Freact-is%2Fdownload%2Freact-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
@@ -5788,6 +5901,14 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
   integrity sha1-ysLazIoepnX+qrrriugziYrkb1U=
 
+regexp.prototype.flags@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
+  integrity sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
 regexpp@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
@@ -6886,6 +7007,11 @@ vue-demi@*:
   resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.9.1.tgz#25d6e1ebd4d4010757ff3571e2bf6a1d7bf3de82"
   integrity sha512-7s1lufRD2l369eFWPjgLvhqCRk0XzGWJsQc7K4q+0mZtixyGIvsK1Cg88P4NcaRIEiBuuN4q1NN4SZKFKwQswA==
 
+vue-demi@latest:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.11.2.tgz#faa06da53887c493a695b997f4fcb4784a667990"
+  integrity sha512-J+X8Au6BhQdcej6LY4O986634hZLu55L0ewU2j8my7WIKlu8cK0dqmdUxqVHHMd/cMrKKZ9SywB/id6aLhwCtA==
+
 vue-eslint-parser@^7.0.0, vue-eslint-parser@^7.6.0:
   version "7.6.0"
   resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz#01ea1a2932f581ff244336565d712801f8f72561"
@@ -6911,10 +7037,10 @@ vue-eslint-parser@^7.8.0:
     lodash "^4.17.21"
     semver "^6.3.0"
 
-vue-router@^4.0.10:
-  version "4.0.10"
-  resolved "https://registry.nlark.com/vue-router/download/vue-router-4.0.10.tgz#ec8fda032949b2a31d3273170f8f376e86eb52ac"
-  integrity sha1-7I/aAylJsqMdMnMXD483bobrUqw=
+vue-router@^4.0.11:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.11.tgz#cd649a0941c635281763a20965b599643ddc68ed"
+  integrity sha512-sha6I8fx9HWtvTrFZfxZkiQQBpqSeT+UCwauYjkdOQYRvwsGwimlQQE2ayqUwuuXGzquFpCPoXzYKWlzL4OuXg==
   dependencies:
     "@vue/devtools-api" "^6.0.0-beta.14"
 
@@ -6941,14 +7067,14 @@ vue@^3.0.4:
     "@vue/runtime-dom" "3.1.5"
     "@vue/shared" "3.1.5"
 
-vue@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.nlark.com/vue/download/vue-3.1.2.tgz#647f8e3949a3d600771dca25d50225dc3e594c64"
-  integrity sha1-ZH+OOUmj1gB3Hcol1QIl3D5ZTGQ=
+vue@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.2.tgz#11715cb71a02baefd0f6e6552dc623680eb1bf32"
+  integrity sha512-D/LuzAV30CgNJYGyNheE/VUs5N4toL2IgmS6c9qeOxvyh0xyn4exyRqizpXIrsvfx34zG9x5gCI2tdRHCGvF9w==
   dependencies:
-    "@vue/compiler-dom" "3.1.2"
-    "@vue/runtime-dom" "3.1.2"
-    "@vue/shared" "3.1.2"
+    "@vue/compiler-dom" "3.2.2"
+    "@vue/runtime-dom" "3.2.2"
+    "@vue/shared" "3.2.2"
 
 vuedraggable@^4.0.3:
   version "4.0.3"