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

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>