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

Author: jekip

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,
-          },
-        };
-      });
-
-      const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));
+  /**
+   * @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,
+      },
+    };
+  });
 
-      let timer;
+  const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));
 
-      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);
-      };
+  let timer;
 
-      onMounted(() => {
-        document.addEventListener('mousedown', timekeeping);
-      });
+  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);
+  };
 
-      onUnmounted(() => {
-        document.removeEventListener('mousedown', timekeeping);
-      });
+  onMounted(() => {
+    document.addEventListener('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>