升级最新依赖 并修复eslint报错 (#2896)

* chore: update deps

* fix: import.meta.globEager 已过期

* docs: fix doc bugs

* fix: eslint

* fix: lint:prettier

* fix: stylelint

* chore: update deps

* fix: eslint

* refactor: accountdetail setup

* fix: 'Nullable' is not defined

* feat: remove vite-plugin-vue-setup-extend

* chore: remove unplugin-vue-define-options

* fix(component): pageWrapper

use setup

closed #2898

* refactor: PageFooter use setup

---------

Co-authored-by: jinmao88 <50581550+jinmao88@users.noreply.github.com>

.prettierignore

@@ -8,3 +8,5 @@ node_modules
 
 public
 .npmrc
+
+*-lock.yaml

README.md

@@ -9,7 +9,7 @@
 
 ## Introduction
 
-Vue Vben Admin is a free and open source middle and back-end template. Using the latest `vue3`, `vite2`, `TypeScript` and other mainstream technology development, the out-of-the-box middle and back-end front-end solutions can also be used for learning reference.
+Vue Vben Admin is a free and open source middle and back-end template. Using the latest `vue3`, `vite4`, `TypeScript` and other mainstream technology development, the out-of-the-box middle and back-end front-end solutions can also be used for learning reference.
 
 ## Feature
 
@@ -54,7 +54,7 @@ Open the project in Gitpod (free online dev environment for GitHub) and start co
 - [TypeScript](https://www.typescriptlang.org/) - Familiar with the basic syntax of `TypeScript`
 - [Es6+](http://es6.ruanyifeng.com/) - Familiar with es6 basic syntax
 - [Vue-Router-Next](https://next.router.vuejs.org/) - Familiar with the basic use of vue-router
-- [Ant-Design-Vue](https://2x.antdv.com/docs/vue/introduce-cn/) - ui basic use
+- [Ant-Design-Vue](https://antdv.com/docs/vue/introduce-cn/) - ui basic use
 - [Mock.js](https://github.com/nuysoft/Mock) - mockjs basic syntax
 
 ## Install and use

README.zh-CN.md

@@ -9,7 +9,7 @@
 
 ## 简介
 
-Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的`vue3`,`vite2`,`TypeScript`等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
+Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的`vue3`,`vite4`,`TypeScript`等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
 
 ## 特性
 
@@ -54,7 +54,7 @@ Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的`vue3
 - [TypeScript](https://www.typescriptlang.org/) - 熟悉`TypeScript`基本语法
 - [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
 - [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用
-- [Ant-Design-Vue](https://2x.antdv.com/docs/vue/introduce-cn/) - ui 基本使用
+- [Ant-Design-Vue](https://antdv.com/docs/vue/introduce-cn/) - ui 基本使用
 - [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法
 
 ## 安装使用

apps/test-server/package.json

@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "fs-extra": "^11.1.1",
-    "koa": "^2.14.1",
+    "koa": "^2.14.2",
     "koa-body": "^6.0.1",
-    "koa-bodyparser": "^4.4.0",
+    "koa-bodyparser": "^4.4.1",
     "koa-route": "^3.2.0",
     "koa-router": "^12.0.0",
     "koa-static": "^5.0.0",
@@ -24,13 +24,13 @@
     "@types/koa": "^2.13.6",
     "@types/koa-bodyparser": "^5.0.2",
     "@types/koa-router": "^7.4.4",
-    "@types/node": "^18.15.11",
+    "@types/node": "^20.3.3",
     "nodemon": "^2.0.22",
     "pm2": "^5.3.0",
-    "rimraf": "^4.4.1",
+    "rimraf": "^5.0.1",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.2.0",
-    "tsup": "^6.7.0",
+    "tsup": "^7.1.0",
-    "typescript": "^5.0.3"
+    "typescript": "^5.1.6"
   }
 }

internal/eslint-config/package.json

@@ -36,14 +36,14 @@
     "stub": "pnpm unbuild --stub"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.57.1",
+    "@typescript-eslint/parser": "^5.60.1",
-    "eslint": "^8.37.0",
+    "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-vue": "^9.10.0",
+    "eslint-plugin-vue": "^9.15.1",
-    "vue-eslint-parser": "^9.1.1"
+    "vue-eslint-parser": "^9.3.1"
   }
 }

internal/stylelint-config/package.json

@@ -31,18 +31,18 @@
     "stub": "pnpm unbuild --stub"
   },
   "devDependencies": {
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.24",
     "postcss-html": "^1.5.0",
     "postcss-less": "^6.0.0",
     "postcss-scss": "^4.0.6",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
-    "stylelint": "^15.4.0",
+    "stylelint": "^15.9.0",
     "stylelint-config-property-sort-order-smacss": "^9.1.0",
-    "stylelint-config-recommended": "^11.0.0",
+    "stylelint-config-recommended": "^12.0.0",
-    "stylelint-config-recommended-scss": "^9.0.1",
+    "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard": "^32.0.0",
+    "stylelint-config-standard": "^33.0.0",
-    "stylelint-config-standard-scss": "^7.0.1",
+    "stylelint-config-standard-scss": "^10.0.0",
     "stylelint-order": "^6.0.3",
     "stylelint-prettier": "^3.0.0"
   }

internal/ts-config/package.json

@@ -19,8 +19,7 @@
     "node-server.json"
   ],
   "dependencies": {
-    "@types/node": "^18.15.11",
+    "@types/node": "^20.3.3",
-    "unplugin-vue-define-options": "^1.3.3",
+    "vite": "^4.3.9"
-    "vite": "^4.3.0-beta.2"
   }
 }

internal/ts-config/vue-app.json

@@ -6,6 +6,5 @@
     "jsx": "preserve",
     "lib": ["ESNext", "DOM"],
     "noImplicitAny": false
-
   }
 }

internal/vite-config/package.json

@@ -32,25 +32,24 @@
   },
   "dependencies": {
     "@ant-design/colors": "^7.0.0",
-    "vite": "^4.3.0-beta.2"
+    "vite": "^4.3.9"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.1",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "ant-design-vue": "^3.2.17",
+    "ant-design-vue": "^3.2.20",
-    "dayjs": "^1.11.7",
+    "dayjs": "^1.11.9",
-    "dotenv": "^16.0.3",
+    "dotenv": "^16.3.1",
     "fs-extra": "^11.1.1",
     "less": "^4.1.3",
     "picocolors": "^1.0.0",
-    "pkg-types": "^1.0.2",
+    "pkg-types": "^1.0.3",
-    "rollup-plugin-visualizer": "^5.9.0",
+    "rollup-plugin-visualizer": "^5.9.2",
-    "sass": "^1.60.0",
+    "sass": "^1.63.6",
-    "unocss": "^0.50.6",
+    "unocss": "^0.53.4",
-    "unplugin-vue-define-options": "^1.3.3",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-dts": "^2.2.0",
+    "vite-plugin-dts": "^3.0.2",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-purge-icons": "^0.9.2",

internal/vite-config/src/plugins/index.ts

@@ -1,7 +1,5 @@
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
-// @ts-ignore: type unless
-import DefineOptions from 'unplugin-vue-define-options/vite';
 import { type PluginOption } from 'vite';
 import purgeIcons from 'vite-plugin-purge-icons';
 import vueSetupExtend from 'vite-plugin-vue-setup-extend';
@@ -22,12 +20,7 @@ interface Options {
 }
 
 async function createPlugins({ isBuild, root, enableMock, compress, enableAnalyze }: Options) {
-  const vitePlugins: (PluginOption | PluginOption[])[] = [
+  const vitePlugins: (PluginOption | PluginOption[])[] = [vue(), vueJsx()];
-    vue(),
-    vueJsx(),
-    vueSetupExtend(),
-    DefineOptions(),
-  ];
 
   const appConfigPlugin = await createAppConfigPlugin({ root, isBuild });
   vitePlugins.push(appConfigPlugin);

mock/_createProductionServer.ts

@@ -16,14 +16,14 @@ import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
 //   return pre;
 // }, [] as any[]);
 
-const modules = import.meta.globEager('./**/*.ts');
+const modules = import.meta.glob('./**/*.ts', { eager: true });
 
 const mockModules: any[] = [];
 Object.keys(modules).forEach((key) => {
   if (key.includes('/_')) {
     return;
   }
-  mockModules.push(...modules[key].default);
+  mockModules.push(...(modules as Recordable)[key].default);
 });
 
 /**

package.json

@@ -68,20 +68,20 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
-    "@iconify/iconify": "^3.1.0",
+    "@iconify/iconify": "^3.1.1",
-    "@logicflow/core": "^1.2.1",
+    "@logicflow/core": "^1.2.9",
-    "@logicflow/extension": "^1.2.1",
+    "@logicflow/extension": "^1.2.9",
     "@vben/hooks": "workspace:*",
-    "@vue/shared": "^3.2.47",
+    "@vue/shared": "^3.3.4",
-    "@vueuse/core": "^9.13.0",
+    "@vueuse/core": "^10.2.1",
-    "@vueuse/shared": "^9.13.0",
+    "@vueuse/shared": "^10.2.1",
-    "@zxcvbn-ts/core": "^2.2.1",
+    "@zxcvbn-ts/core": "^3.0.2",
-    "ant-design-vue": "^3.2.17",
+    "ant-design-vue": "^3.2.20",
-    "axios": "^1.3.5",
+    "axios": "^1.4.0",
     "codemirror": "^5.65.12",
     "cropperjs": "^1.5.13",
     "crypto-js": "^4.1.1",
-    "dayjs": "^1.11.7",
+    "dayjs": "^1.11.9",
     "echarts": "^5.4.2",
     "exceljs": "^4.3.0",
     "intro.js": "^7.0.1",
@@ -89,64 +89,64 @@
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.1",
-    "pinia": "2.0.33",
+    "pinia": "2.1.4",
     "print-js": "^1.6.0",
-    "qrcode": "^1.5.1",
+    "qrcode": "^1.5.3",
-    "qs": "^6.11.1",
+    "qs": "^6.11.2",
     "resize-observer-polyfill": "^1.5.1",
     "showdown": "^2.1.0",
     "sortablejs": "^1.15.0",
     "tinymce": "^5.10.7",
-    "vditor": "^3.9.1",
+    "vditor": "^3.9.4",
-    "vue": "^3.2.47",
+    "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-json-pretty": "^2.2.4",
-    "vue-router": "^4.1.6",
+    "vue-router": "^4.2.2",
-    "vue-types": "^5.0.2",
+    "vue-types": "^5.1.0",
     "vuedraggable": "^4.1.0",
+
     "vxe-table": "^4.4.5",
+
     "vxe-table-plugin-export-xlsx": "^3.0.4",
-    "xe-utils": "^3.5.7",
+    "xe-utils": "^3.5.11",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.5.1",
+    "@commitlint/cli": "^17.6.6",
-    "@commitlint/config-conventional": "^17.4.4",
+    "@commitlint/config-conventional": "^17.6.6",
-    "@iconify/json": "^2.2.46",
+    "@iconify/json": "^2.2.85",
     "@purge-icons/generated": "^0.9.0",
-    "@types/codemirror": "^5.60.7",
+    "@types/codemirror": "^5.60.8",
     "@types/crypto-js": "^4.1.1",
     "@types/intro.js": "^5.1.1",
     "@types/lodash-es": "^4.17.7",
     "@types/mockjs": "^1.0.7",
     "@types/nprogress": "^0.2.0",
-    "@types/qrcode": "^1.5.0",
+    "@types/qrcode": "^1.5.1",
     "@types/qs": "^6.9.7",
-    "@types/showdown": "^2.0.0",
+    "@types/showdown": "^2.0.1",
     "@types/sortablejs": "^1.15.1",
     "@vben/eslint-config": "workspace:*",
     "@vben/stylelint-config": "workspace:*",
     "@vben/ts-config": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/vite-config": "workspace:*",
-    "@vue/compiler-sfc": "^3.2.47",
+    "@vue/compiler-sfc": "^3.3.4",
-    "@vue/test-utils": "^2.3.2",
+    "@vue/test-utils": "^2.4.0",
     "cross-env": "^7.0.3",
     "cz-git": "^1.6.1",
     "czg": "^1.6.1",
     "husky": "^8.0.3",
-    "lint-staged": "13.2.0",
+    "lint-staged": "13.2.3",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
     "prettier-plugin-packagejson": "^2.4.3",
-    "rimraf": "^4.4.1",
+    "rimraf": "^5.0.1",
-    "turbo": "^1.8.8",
+    "turbo": "^1.10.7",
-    "typescript": "^5.0.3",
+    "typescript": "^5.1.6",
-    "unbuild": "^1.2.0",
+    "unbuild": "^1.2.1",
-    "unplugin-vue-define-options": "^1.3.3",
+    "vite": "^4.3.9",
-    "vite": "^4.3.0-beta.2",
     "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vue-tsc": "^1.8.3"
-    "vue-tsc": "^1.2.0"
   },
   "packageManager": "pnpm@8.1.0",
   "engines": {

packages/hooks/package.json

@@ -29,8 +29,8 @@
     "lint": "pnpm eslint ."
   },
   "dependencies": {
-    "@vueuse/core": "^9.13.0",
+    "@vueuse/core": "^10.2.1",
-    "vue": "^3.2.47"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@vben/types": "workspace:*"

src/components/Page/src/PageFooter.vue

@@ -9,20 +9,17 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   import { useDesign } from '/@/hooks/web/useDesign';
 
-  export default defineComponent({
+  defineOptions({
     name: 'PageFooter',
     inheritAttrs: false,
-    setup() {
-      const { prefixCls } = useDesign('page-footer');
-      const { getCalcContentWidth } = useMenuSetting();
-      return { prefixCls, getCalcContentWidth };
-    },
   });
+
+  const { prefixCls } = useDesign('page-footer');
+  const { getCalcContentWidth } = useMenuSetting();
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-page-footer';

src/components/Page/src/PageWrapper.vue

@@ -32,16 +32,17 @@
     </PageFooter>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import {
     CSSProperties,
     PropType,
     provide,
-    defineComponent,
     computed,
     watch,
     ref,
     unref,
+    useAttrs,
+    useSlots,
   } from 'vue';
 
   import PageFooter from './PageFooter.vue';
@@ -53,122 +54,109 @@
   import { useContentHeight } from '/@/hooks/web/useContentHeight';
   import { PageWrapperFixedHeightKey } from '/@/enums/pageEnum';
 
-  export default defineComponent({
+  defineOptions({
     name: 'PageWrapper',
-    components: { PageFooter, PageHeader },
     inheritAttrs: false,
-    props: {
-      title: propTypes.string,
-      dense: propTypes.bool,
-      ghost: propTypes.bool,
-      content: propTypes.string,
-      contentStyle: {
-        type: Object as PropType<CSSProperties>,
-      },
-      contentBackground: propTypes.bool,
-      contentFullHeight: propTypes.bool,
-      contentClass: propTypes.string,
-      fixedHeight: propTypes.bool,
-      upwardSpace: propTypes.oneOfType([propTypes.number, propTypes.string]).def(0),
-    },
-    setup(props, { slots, attrs }) {
-      const wrapperRef = ref(null);
-      const headerRef = ref(null);
-      const contentRef = ref(null);
-      const footerRef = ref(null);
-      const { prefixCls } = useDesign('page-wrapper');
-
-      provide(
-        PageWrapperFixedHeightKey,
-        computed(() => props.fixedHeight),
-      );
-
-      const getIsContentFullHeight = computed(() => {
-        return props.contentFullHeight;
-      });
-
-      const getUpwardSpace = computed(() => props.upwardSpace);
-      const { redoHeight, setCompensation, contentHeight } = useContentHeight(
-        getIsContentFullHeight,
-        wrapperRef,
-        [headerRef, footerRef],
-        [contentRef],
-        getUpwardSpace,
-      );
-      setCompensation({ useLayoutFooter: true, elements: [footerRef] });
-
-      const getClass = computed(() => {
-        return [
-          prefixCls,
-          {
-            [`${prefixCls}--dense`]: props.dense,
-          },
-          attrs.class ?? {},
-        ];
-      });
-
-      const getShowHeader = computed(
-        () => props.content || slots?.headerContent || props.title || getHeaderSlots.value.length,
-      );
-
-      const getShowFooter = computed(() => slots?.leftFooter || slots?.rightFooter);
-
-      const getHeaderSlots = computed(() => {
-        return Object.keys(omit(slots, 'default', 'leftFooter', 'rightFooter', 'headerContent'));
-      });
-
-      const getContentStyle = computed((): CSSProperties => {
-        const { contentFullHeight, contentStyle, fixedHeight } = props;
-        if (!contentFullHeight) {
-          return { ...contentStyle };
-        }
-
-        const height = `${unref(contentHeight)}px`;
-        return {
-          ...contentStyle,
-          minHeight: height,
-          ...(fixedHeight ? { height } : {}),
-        };
-      });
-
-      const getContentClass = computed(() => {
-        const { contentBackground, contentClass } = props;
-        return [
-          `${prefixCls}-content`,
-          contentClass,
-          {
-            [`${prefixCls}-content-bg`]: contentBackground,
-          },
-        ];
-      });
-
-      watch(
-        () => [getShowFooter.value],
-        () => {
-          redoHeight();
-        },
-        {
-          flush: 'post',
-          immediate: true,
-        },
-      );
-
-      return {
-        getContentStyle,
-        wrapperRef,
-        headerRef,
-        contentRef,
-        footerRef,
-        getClass,
-        getHeaderSlots,
-        prefixCls,
-        getShowHeader,
-        getShowFooter,
-        omit,
-        getContentClass,
-      };
-    },
   });
+
+  const props = defineProps({
+    title: propTypes.string,
+    dense: propTypes.bool,
+    ghost: propTypes.bool,
+    content: propTypes.string,
+    contentStyle: {
+      type: Object as PropType<CSSProperties>,
+    },
+    contentBackground: propTypes.bool,
+    contentFullHeight: propTypes.bool.def(false),
+    contentClass: propTypes.string,
+    fixedHeight: propTypes.bool,
+    upwardSpace: propTypes.oneOfType([propTypes.number, propTypes.string]).def(0),
+  });
+
+  const attrs = useAttrs();
+  const slots = useSlots();
+
+  const wrapperRef = ref(null);
+  const headerRef = ref(null);
+  const contentRef = ref(null);
+  const footerRef = ref(null);
+  const { prefixCls } = useDesign('page-wrapper');
+
+  provide(
+    PageWrapperFixedHeightKey,
+    computed(() => props.fixedHeight),
+  );
+
+  const getIsContentFullHeight = computed(() => {
+    return props.contentFullHeight;
+  });
+
+  const getUpwardSpace = computed(() => props.upwardSpace);
+  const { redoHeight, setCompensation, contentHeight } = useContentHeight(
+    getIsContentFullHeight,
+    wrapperRef,
+    [headerRef, footerRef],
+    [contentRef],
+    getUpwardSpace,
+  );
+  setCompensation({ useLayoutFooter: true, elements: [footerRef] });
+
+  const getClass = computed(() => {
+    return [
+      prefixCls,
+      {
+        [`${prefixCls}--dense`]: props.dense,
+      },
+      attrs.class ?? {},
+    ];
+  });
+
+  const getShowHeader = computed(
+    () => props.content || slots?.headerContent || props.title || getHeaderSlots.value.length,
+  );
+
+  const getShowFooter = computed(() => slots?.leftFooter || slots?.rightFooter);
+
+  const getHeaderSlots = computed(() => {
+    return Object.keys(omit(slots, 'default', 'leftFooter', 'rightFooter', 'headerContent'));
+  });
+
+  const getContentStyle = computed((): CSSProperties => {
+    const { contentFullHeight, contentStyle, fixedHeight } = props;
+    if (!contentFullHeight) {
+      return { ...contentStyle };
+    }
+
+    const height = `${unref(contentHeight)}px`;
+    return {
+      ...contentStyle,
+      minHeight: height,
+      ...(fixedHeight ? { height } : {}),
+    };
+  });
+
+  const getContentClass = computed(() => {
+    const { contentBackground, contentClass } = props;
+    return [
+      `${prefixCls}-content`,
+      contentClass,
+      {
+        [`${prefixCls}-content-bg`]: contentBackground,
+      },
+    ];
+  });
+
+  watch(
+    () => [getShowFooter.value],
+    () => {
+      redoHeight();
+    },
+    {
+      flush: 'post',
+      immediate: true,
+    },
+  );
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-page-wrapper';

src/design/ant/input.less

@@ -4,8 +4,8 @@
 .ant-input {
   &-number,
   &-number-group-wrapper {
-    min-width: 110px;
     width: 100% !important;
+    min-width: 110px;
     max-width: 100%;
   }
 }

src/design/ant/pagination.less

@@ -16,9 +16,9 @@ html[data-theme='dark'] {
       }
 
       .ant-pagination-item-active {
-        background-color: @primary-color !important;
         border: none;
         border-radius: none !important;
+        background-color: @primary-color !important;
 
         a {
           color: @white !important;
@@ -32,9 +32,9 @@ html[data-theme='dark'] {
   &.mini {
     .ant-pagination-prev,
     .ant-pagination-next {
-      font-size: 12px;
-      color: @text-color-base;
       border: 1px solid;
+      color: @text-color-base;
+      font-size: 12px;
     }
 
     .ant-pagination-prev:hover,
@@ -50,9 +50,9 @@ html[data-theme='dark'] {
     .ant-pagination-next,
     .ant-pagination-item {
       margin: 0 4px !important;
-      background-color: #f4f4f5 !important;
       border: none;
       border-radius: none !important;
+      background-color: #f4f4f5 !important;
 
       a {
         margin-top: 1px;
@@ -65,9 +65,9 @@ html[data-theme='dark'] {
     }
 
     .ant-pagination-item-active {
-      background-color: @primary-color !important;
       border: none;
       border-radius: none !important;
+      background-color: @primary-color !important;
 
       a {
         color: @white !important;

src/design/index.less

@@ -46,7 +46,7 @@ span {
 
 // 保持 和 windi 一样的全局样式，减少升级带来的影响
 ul {
-  list-style: none;
   margin: 0;
   padding: 0;
+  list-style: none;
 }

src/design/public.less

@@ -21,10 +21,10 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  // background: rgba(0, 0, 0, 0.6);
-  background-color: rgb(144 147 153 / 30%);
   // background-color: rgba(144, 147, 153, 0.3);
   border-radius: 2px;
+  // background: rgba(0, 0, 0, 0.6);
+  background-color: rgb(144 147 153 / 30%);
   box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
 }
 
@@ -40,12 +40,12 @@
 
   .bar {
     position: fixed;
+    z-index: 99999;
     top: 0;
     left: 0;
-    z-index: 99999;
     width: 100%;
     height: 2px;
-    background-color: @primary-color;
     opacity: 0.75;
+    background-color: @primary-color;
   }
 }

src/design/theme.less

@@ -8,18 +8,18 @@ html[data-theme='light'] {
   }
 
   .ant-alert-success {
-    background-color: #f6ffed;
     border: 1px solid #b7eb8f;
+    background-color: #f6ffed;
   }
 
   .ant-alert-error {
-    background-color: #fff2f0;
     border: 1px solid #ffccc7;
+    background-color: #fff2f0;
   }
 
   .ant-alert-warning {
-    background-color: #fffbe6;
     border: 1px solid #ffe58f;
+    background-color: #fffbe6;
   }
 
   :not(:root):fullscreen::backdrop {

src/design/transition/fade.less

@@ -27,13 +27,13 @@
 }
 
 .fade-slide-enter-from {
-  opacity: 0;
   transform: translateX(-30px);
+  opacity: 0;
 }
 
 .fade-slide-leave-to {
-  opacity: 0;
   transform: translateX(30px);
+  opacity: 0;
 }
 
 // ///////////////////////////////////////////////
@@ -47,13 +47,13 @@
 }
 
 .fade-bottom-enter-from {
-  opacity: 0;
   transform: translateY(-10%);
+  opacity: 0;
 }
 
 .fade-bottom-leave-to {
-  opacity: 0;
   transform: translateY(10%);
+  opacity: 0;
 }
 
 // fade-scale
@@ -63,13 +63,13 @@
 }
 
 .fade-scale-enter-from {
-  opacity: 0;
   transform: scale(1.2);
+  opacity: 0;
 }
 
 .fade-scale-leave-to {
-  opacity: 0;
   transform: scale(0.8);
+  opacity: 0;
 }
 
 // ///////////////////////////////////////////////
@@ -83,11 +83,11 @@
 }
 
 .fade-top-enter-from {
-  opacity: 0;
   transform: translateY(8%);
+  opacity: 0;
 }
 
 .fade-top-leave-to {
-  opacity: 0;
   transform: translateY(-8%);
+  opacity: 0;
 }

src/design/transition/scale.less

@@ -4,8 +4,8 @@
   &-enter-from,
   &-leave,
   &-leave-to {
-    opacity: 0;
     transform: scale(0);
+    opacity: 0;
   }
 }
 
@@ -15,7 +15,7 @@
   &-enter-from,
   &-leave,
   &-leave-to {
-    opacity: 0;
     transform: scale(0) rotate(-45deg);
+    opacity: 0;
   }
 }

src/design/transition/slide.less

@@ -3,8 +3,8 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
     transform: translateY(-15px);
+    opacity: 0;
   }
 }
 
@@ -13,8 +13,8 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
     transform: translateY(15px);
+    opacity: 0;
   }
 }
 
@@ -23,8 +23,8 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
     transform: translateX(-15px);
+    opacity: 0;
   }
 }
 
@@ -33,7 +33,7 @@
 
   &-enter-from,
   &-leave-to {
-    opacity: 0;
     transform: translateX(15px);
+    opacity: 0;
   }
 }

src/design/transition/zoom.less

@@ -6,8 +6,8 @@
 
 .zoom-out-enter-from,
 .zoom-out-leave-to {
-  opacity: 0;
   transform: scale(0);
+  opacity: 0;
 }
 
 // zoom-fade
@@ -17,11 +17,11 @@
 }
 
 .zoom-fade-enter-from {
-  opacity: 0;
   transform: scale(0.92);
+  opacity: 0;
 }
 
 .zoom-fade-leave-to {
-  opacity: 0;
   transform: scale(1.06);
+  opacity: 0;
 }

src/layouts/default/feature/index.vue

@@ -11,6 +11,7 @@
   import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
   import SessionTimeoutLogin from '/@/views/sys/login/SessionTimeoutLogin.vue';
+
   export default defineComponent({
     name: 'LayoutFeatures',
     components: {

src/layouts/default/header/components/FullScreen.vue

@@ -13,6 +13,7 @@
   import { useFullscreen } from '@vueuse/core';
 
   import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
+
   export default defineComponent({
     name: 'FullScreen',
     components: { FullscreenExitOutlined, FullscreenOutlined, Tooltip },

src/layouts/default/header/components/lock/LockModal.vue

@@ -34,6 +34,7 @@
   import { useUserStore } from '/@/store/modules/user';
   import { useLockStore } from '/@/store/modules/lock';
   import headerImg from '/@/assets/images/header.jpg';
+
   export default defineComponent({
     name: 'LockModal',
     components: { BasicModal, BasicForm },

src/layouts/default/header/components/notify/NoticeList.vue

@@ -59,6 +59,7 @@
   import { useDesign } from '/@/hooks/web/useDesign';
   import { List, Avatar, Tag, Typography } from 'ant-design-vue';
   import { isNumber } from '/@/utils/is';
+
   export default defineComponent({
     components: {
       [Avatar.name]: Avatar,

src/layouts/default/setting/components/TypePicker.vue

@@ -25,6 +25,7 @@
   import { useDesign } from '/@/hooks/web/useDesign';
 
   import { menuTypeList } from '../enum';
+
   export default defineComponent({
     name: 'MenuTypePicker',
     components: { Tooltip },

src/layouts/default/sider/index.vue

@@ -23,6 +23,7 @@
   import { useAppInject } from '/@/hooks/web/useAppInject';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   import { useDesign } from '/@/hooks/web/useDesign';
+
   export default defineComponent({
     name: 'SiderWrapper',
     components: { Sider, Drawer, MixSider },

src/locales/lang/en.ts

@@ -1,10 +1,10 @@
 import { genMessage } from '../helper';
 import antdLocale from 'ant-design-vue/es/locale/en_US';
 
-const modules = import.meta.globEager('./en/**/*.ts');
+const modules = import.meta.glob('./en/**/*.ts', { eager: true });
 export default {
   message: {
-    ...genMessage(modules, 'en'),
+    ...genMessage(modules as Recordable<Recordable>, 'en'),
     antdLocale,
   },
   dateLocale: null,

src/locales/lang/zh_CN.ts

@@ -1,10 +1,10 @@
 import { genMessage } from '../helper';
 import antdLocale from 'ant-design-vue/es/locale/zh_CN';
 
-const modules = import.meta.globEager('./zh-CN/**/*.ts');
+const modules = import.meta.glob('./zh-CN/**/*.ts', { eager: true });
 export default {
   message: {
-    ...genMessage(modules, 'zh-CN'),
+    ...genMessage(modules as Recordable<Recordable>, 'zh-CN'),
     antdLocale,
   },
 };

src/router/menus/index.ts

@@ -10,12 +10,12 @@ import { router } from '/@/router';
 import { PermissionModeEnum } from '/@/enums/appEnum';
 import { pathToRegexp } from 'path-to-regexp';
 
-const modules = import.meta.globEager('./modules/**/*.ts');
+const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
 
 const menuModules: MenuModule[] = [];
 
 Object.keys(modules).forEach((key) => {
-  const mod = modules[key].default || {};
+  const mod = (modules as Recordable)[key].default || {};
   const modList = Array.isArray(mod) ? [...mod] : [mod];
   menuModules.push(...modList);
 });

src/router/routes/index.ts

@@ -6,13 +6,13 @@ import { mainOutRoutes } from './mainOut';
 import { PageEnum } from '/@/enums/pageEnum';
 import { t } from '/@/hooks/web/useI18n';
 
-// import.meta.globEager() 直接引入所有的模块 Vite 独有的功能
+// import.meta.glob() 直接引入所有的模块 Vite 独有的功能
-const modules = import.meta.globEager('./modules/**/*.ts');
+const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
 const routeModuleList: AppRouteModule[] = [];
 
 // 加入到路由集合中
 Object.keys(modules).forEach((key) => {
-  const mod = modules[key].default || {};
+  const mod = (modules as Recordable)[key].default || {};
   const modList = Array.isArray(mod) ? [...mod] : [mod];
   routeModuleList.push(...modList);
 });

src/store/modules/multipleTab.ts

@@ -320,7 +320,7 @@ export const useMultipleTabStore = defineStore({
       }
       this.bulkCloseTabs(pathList);
       this.updateCacheTab();
-      Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList, true)
+      Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList, true);
       handleGotoPage(router);
     },
 

src/views/dashboard/analysis/components/VisitSource.vue

@@ -7,6 +7,7 @@
   import { Ref, ref, watch } from 'vue';
   import { Card } from 'ant-design-vue';
   import { useECharts } from '/@/hooks/web/useECharts';
+
   const props = defineProps({
     loading: Boolean,
     width: {

src/views/demo/comp/button/index.vue

@@ -106,6 +106,7 @@
   import { defineComponent } from 'vue';
   import { PageWrapper } from '/@/components/Page';
   import { Card, Row, Col } from 'ant-design-vue';
+
   export default defineComponent({
     components: { PageWrapper, ACard: Card, ARow: Row, ACol: Col },
   });

src/views/demo/comp/card-list/index.vue

@@ -14,6 +14,7 @@
   import { PageWrapper } from '/@/components/Page';
   import { demoListApi } from '/@/api/demo/table';
   import { useMessage } from '/@/hooks/web/useMessage';
+
   const { notification } = useMessage();
   // 请求api时附带参数
   const params = {};

src/views/demo/comp/drawer/Drawer1.vue

@@ -4,6 +4,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { BasicDrawer } from '/@/components/Drawer';
+
   export default defineComponent({
     components: { BasicDrawer },
     setup() {

src/views/demo/comp/drawer/Drawer2.vue

@@ -7,6 +7,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+
   export default defineComponent({
     components: { BasicDrawer },
     setup() {

src/views/demo/comp/drawer/Drawer3.vue

@@ -20,6 +20,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { BasicDrawer } from '/@/components/Drawer';
+
   export default defineComponent({
     components: { BasicDrawer },
     setup() {

src/views/demo/comp/drawer/Drawer4.vue

@@ -10,6 +10,7 @@
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
 
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+
   const schemas: FormSchema[] = [
     {
       field: 'field1',

src/views/demo/comp/drawer/Drawer5.vue

@@ -7,6 +7,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { BasicDrawer } from '/@/components/Drawer';
+
   export default defineComponent({
     components: { BasicDrawer },
   });

src/views/demo/comp/flow-chart/index.vue

@@ -14,6 +14,7 @@
   import { PageWrapper } from '/@/components/Page';
 
   import demoData from './dataTurbo.json';
+
   export default {
     components: { FlowChart, PageWrapper },
     setup() {

src/views/demo/comp/modal/Modal1.vue

@@ -23,6 +23,7 @@
 <script lang="ts">
   import { defineComponent, ref, watch } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
+
   export default defineComponent({
     components: { BasicModal },
     setup() {

src/views/demo/comp/modal/Modal2.vue

@@ -12,6 +12,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
+
   export default defineComponent({
     components: { BasicModal },
     setup() {

src/views/demo/comp/modal/Modal3.vue

@@ -6,6 +6,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { BasicModal } from '/@/components/Modal';
+
   export default defineComponent({
     components: { BasicModal },
     setup() {

src/views/demo/comp/modal/Modal4.vue

@@ -14,6 +14,7 @@
   import { defineComponent, ref, nextTick } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+
   const schemas: FormSchema[] = [
     {
       field: 'field1',

src/views/demo/comp/modal/index.vue

@@ -42,6 +42,7 @@
   import Modal3 from './Modal3.vue';
   import Modal4 from './Modal4.vue';
   import { PageWrapper } from '/@/components/Page';
+  import { type Nullable } from '@vben/types';
 
   export default defineComponent({
     components: { Alert, Modal1, Modal2, Modal3, Modal4, PageWrapper, ASpace: Space },

src/views/demo/comp/qrcode/index.vue

@@ -80,6 +80,7 @@
   import LogoImg from '/@/assets/images/logo.png';
   import { CollapseContainer } from '/@/components/Container/index';
   import { PageWrapper } from '/@/components/Page';
+  import { type Nullable } from '@vben/types';
 
   const qrCodeUrl = 'https://www.vvbin.cn';
   export default defineComponent({

src/views/demo/comp/scroll/Action.vue

@@ -23,6 +23,7 @@
   import { defineComponent, ref, unref } from 'vue';
   import { ScrollContainer, ScrollActionType } from '/@/components/Container/index';
   import { PageWrapper } from '/@/components/Page';
+  import { type Nullable } from '@vben/types';
 
   export default defineComponent({
     components: { ScrollContainer, PageWrapper },

src/views/demo/comp/scroll/VirtualScroll.vue

@@ -29,6 +29,7 @@
 
   import { Divider } from 'ant-design-vue';
   import { PageWrapper } from '/@/components/Page';
+
   const data = (() => {
     const arr: any[] = [];
     for (let index = 1; index < 20000; index++) {

src/views/demo/comp/verify/index.vue

@@ -56,6 +56,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { BugOutlined, RightOutlined } from '@ant-design/icons-vue';
   import { PageWrapper } from '/@/components/Page';
+  import { type Nullable } from '@vben/types';
 
   export default defineComponent({
     components: { BasicDragVerify, BugOutlined, RightOutlined, PageWrapper },

src/views/demo/editor/markdown/index.vue

@@ -22,6 +22,7 @@
   import { MarkDown, MarkDownActionType, MarkdownViewer } from '/@/components/Markdown';
   import { PageWrapper } from '/@/components/Page';
   import { Card } from 'ant-design-vue';
+  import { type Nullable } from '@vben/types';
 
   export default defineComponent({
     components: { MarkDown, PageWrapper, MarkdownViewer, ACard: Card },

src/views/demo/feat/breadcrumb/ChildrenListDetail.vue

@@ -6,5 +6,6 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { PageWrapper } from '/@/components/Page';
+
   export default defineComponent({ components: { PageWrapper } });
 </script>

src/views/demo/feat/full-screen/index.vue

@@ -29,6 +29,7 @@
   import { useFullscreen } from '@vueuse/core';
 
   import { PageWrapper } from '/@/components/Page';
+  import { type Nullable } from '@vben/types';
 
   export default defineComponent({
     components: { CollapseContainer, PageWrapper },

src/views/demo/feat/watermark/index.vue

@@ -16,6 +16,7 @@
   import { CollapseContainer } from '/@/components/Container/index';
   import { useWatermark } from '/@/hooks/web/useWatermark';
   import { PageWrapper } from '/@/components/Page';
+  import { type Nullable } from '@vben/types';
 
   export default defineComponent({
     components: { CollapseContainer, PageWrapper },

src/views/demo/form/RefForm.vue

@@ -70,6 +70,7 @@
   import { CollapseContainer } from '/@/components/Container/index';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { PageWrapper } from '/@/components/Page';
+  import { type Nullable } from '@vben/types';
 
   const schemas: FormSchema[] = [
     {

src/views/demo/level/Menu111.vue

@@ -8,5 +8,6 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { Input } from 'ant-design-vue';
+
   export default defineComponent({ name: 'Menu111Demo', components: { Input } });
 </script>

src/views/demo/level/Menu12.vue

@@ -8,5 +8,6 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { Input } from 'ant-design-vue';
+
   export default defineComponent({ name: 'Menu12Demo', components: { Input } });
 </script>

src/views/demo/level/Menu2.vue

@@ -8,6 +8,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { Input } from 'ant-design-vue';
+
   export default defineComponent({
     name: 'Menu2Demo',
     components: { Input },

src/views/demo/page/desc/basic/index.vue

@@ -41,6 +41,7 @@
     refundTableData,
     refundTimeTableData,
   } from './data';
+
   export default defineComponent({
     components: { Description, BasicTable, PageWrapper, [Divider.name]: Divider },
     setup() {

src/views/demo/page/desc/high/index.vue

@@ -99,6 +99,7 @@
   import { Divider, Card, Empty, Descriptions, Steps, Tabs } from 'ant-design-vue';
 
   import { refundTimeTableSchema, refundTimeTableData } from './data';
+
   export default defineComponent({
     components: {
       BasicTable,

src/views/demo/page/form/step/Step1.vue

@@ -32,6 +32,7 @@
   import { step1Schemas } from './data';
 
   import { Select, Input, Divider } from 'ant-design-vue';
+
   export default defineComponent({
     components: {
       BasicForm,

src/views/demo/page/form/step/Step3.vue

@@ -19,6 +19,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { Result, Descriptions } from 'ant-design-vue';
+
   export default defineComponent({
     components: {
       [Result.name]: Result,

src/views/demo/page/result/fail/index.vue

@@ -24,6 +24,7 @@
   import { defineComponent } from 'vue';
   import { Result } from 'ant-design-vue';
   import { CloseCircleOutlined } from '@ant-design/icons-vue';
+
   export default defineComponent({
     components: {
       Result,

src/views/demo/page/result/success/index.vue

@@ -38,6 +38,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { Result, Steps, Descriptions } from 'ant-design-vue';
+
   export default defineComponent({
     components: {
       Result,

src/views/demo/permission/CurrentPermissionMode.vue

@@ -14,6 +14,7 @@
   import { PermissionModeEnum } from '/@/enums/appEnum';
   import { Divider } from 'ant-design-vue';
   import { usePermission } from '/@/hooks/web/usePermission';
+
   export default defineComponent({
     name: 'CurrentPermissionMode',
     components: { Divider },

src/views/demo/permission/front/AuthPageA.vue

@@ -3,6 +3,7 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
+
   export default defineComponent({});
 </script>
 <style lang="less" scoped>

src/views/demo/permission/front/AuthPageB.vue

@@ -3,6 +3,7 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
+
   export default defineComponent({});
 </script>
 <style lang="less" scoped>

src/views/demo/system/account/AccountDetail.vue

@@ -26,37 +26,36 @@
   </PageWrapper>
 </template>
 
-<script>
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
   import { useRoute } from 'vue-router';
   import { PageWrapper } from '/@/components/Page';
   import { useGo } from '/@/hooks/web/usePage';
   import { useTabs } from '/@/hooks/web/useTabs';
   import { Tabs } from 'ant-design-vue';
-  export default defineComponent({
-    name: 'AccountDetail',
-    components: { PageWrapper, ATabs: Tabs, ATabPane: Tabs.TabPane },
-    setup() {
-      const route = useRoute();
-      const go = useGo();
-      // 此处可以得到用户ID
-      const userId = ref(route.params?.id);
-      const currentKey = ref('detail');
-      const { setTitle } = useTabs();
-      // TODO
-      // 本页代码仅作演示，实际应当通过userId从接口获得用户的相关资料
 
-      // 设置Tab的标题（不会影响页面标题）
+  defineOptions({ name: 'AccountDetail' });
-      setTitle('详情：用户' + userId.value);
 
-      // 页面左侧点击返回链接时的操作
+  const ATabs = Tabs;
-      function goBack() {
+  const ATabPane = Tabs.TabPane;
-        // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
+
-        go('/system/account');
+  const route = useRoute();
-      }
+  const go = useGo();
-      return { userId, currentKey, goBack };
+  // 此处可以得到用户ID
-    },
+  const userId = ref(route.params?.id);
-  });
+  const currentKey = ref('detail');
+  const { setTitle } = useTabs();
+  // TODO
+  // 本页代码仅作演示，实际应当通过userId从接口获得用户的相关资料
+
+  // 设置Tab的标题（不会影响页面标题）
+  setTitle('详情：用户' + userId.value);
+
+  // 页面左侧点击返回链接时的操作
+  function goBack() {
+    // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
+    go('/system/account');
+  }
 </script>
 
 <style></style>

src/views/demo/system/dept/DeptModal.vue

@@ -10,6 +10,7 @@
   import { formSchema } from './dept.data';
 
   import { getDeptList } from '/@/api/demo/system';
+
   export default defineComponent({
     name: 'DeptModal',
     components: { BasicModal, BasicForm },

src/views/demo/system/password/index.vue

@@ -15,6 +15,7 @@
   import { BasicForm, useForm } from '/@/components/Form';
 
   import { formSchema } from './pwd.data';
+
   export default defineComponent({
     name: 'ChangePassword',
     components: { BasicForm, PageWrapper },

src/views/demo/table/AuthColumn.vue

@@ -61,6 +61,7 @@
   import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
 
   import { demoListApi } from '/@/api/demo/table';
+
   const columns: BasicColumn[] = [
     {
       title: '编号',

src/views/demo/table/CustomerCell.vue

@@ -32,6 +32,7 @@
   import { BasicTable, useTable, BasicColumn, TableImg } from '/@/components/Table';
   import { Tag, Avatar } from 'ant-design-vue';
   import { demoListApi } from '/@/api/demo/table';
+
   const columns: BasicColumn[] = [
     {
       title: 'ID',

src/views/demo/table/EditCellTable.vue

@@ -17,6 +17,7 @@
   import { treeOptionsListApi } from '/@/api/demo/tree';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Progress } from 'ant-design-vue';
+
   const columns: BasicColumn[] = [
     {
       title: '输入框',

src/views/demo/table/FetchTable.vue

@@ -15,6 +15,7 @@
   import { PageWrapper } from '/@/components/Page';
 
   import { demoListApi } from '/@/api/demo/table';
+
   export default defineComponent({
     components: { BasicTable, PageWrapper },
     setup() {

src/views/demo/table/FixedColumn.vue

@@ -31,6 +31,7 @@
   import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
 
   import { demoListApi } from '/@/api/demo/table';
+
   const columns: BasicColumn[] = [
     {
       title: 'ID',

src/views/demo/table/MultipleHeader.vue

@@ -9,6 +9,7 @@
   import { getMultipleHeaderColumns } from './tableData';
 
   import { demoListApi } from '/@/api/demo/table';
+
   export default defineComponent({
     components: { BasicTable },
     setup() {

src/views/demo/table/RefTable.vue

@@ -34,6 +34,7 @@
   import { getBasicColumns, getBasicShortColumns } from './tableData';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { demoListApi } from '/@/api/demo/table';
+  import { type Nullable } from '@vben/types';
 
   export default defineComponent({
     components: { BasicTable },

src/views/demo/tree/ActionTree.vue

@@ -33,6 +33,7 @@
   import { treeData } from './data';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { PageWrapper } from '/@/components/Page';
+  import { type Nullable } from '@vben/types';
 
   export default defineComponent({
     components: { BasicTree, PageWrapper },

src/views/demo/tree/index.vue

@@ -53,96 +53,79 @@
     </Row>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, nextTick, ref, unref } from 'vue';
+  import { nextTick, ref, unref } from 'vue';
   import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree/index';
   import { treeData } from './data';
   import { PageWrapper } from '/@/components/Page';
   import { Card, Row, Col, Spin } from 'ant-design-vue';
   import { cloneDeep, uniq } from 'lodash-es';
   import { isArray } from '/@/utils/is';
+  import { type Nullable } from '@vben/types';
 
-  export default defineComponent({
+  const asyncTreeRef = ref<Nullable<TreeActionType>>(null);
-    components: { BasicTree, PageWrapper, Card, Row, Col, Spin },
+  const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
-    setup() {
+  const loadTreeRef = ref<Nullable<TreeActionType>>(null);
-      const asyncTreeRef = ref<Nullable<TreeActionType>>(null);
+  const tree2 = ref<TreeItem[]>([]);
-      const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
+  const treeLoading = ref(false);
-      const loadTreeRef = ref<Nullable<TreeActionType>>(null);
-      const tree2 = ref<TreeItem[]>([]);
-      const treeLoading = ref(false);
 
-      function handleCheck(checkedKeys, e) {
+  function handleCheck(checkedKeys, e) {
-        console.log('onChecked', checkedKeys, e);
+    console.log('onChecked', checkedKeys, e);
-      }
+  }
 
-      function loadTreeData() {
+  function loadTreeData() {
-        treeLoading.value = true;
+    treeLoading.value = true;
-        // 以下是模拟异步获取数据
+    // 以下是模拟异步获取数据
-        setTimeout(() => {
+    setTimeout(() => {
-          // 设置数据源
+      // 设置数据源
-          tree2.value = cloneDeep(treeData);
+      tree2.value = cloneDeep(treeData);
-          treeLoading.value = false;
+      treeLoading.value = false;
-          // 展开全部
+      // 展开全部
-          nextTick(() => {
+      nextTick(() => {
-            console.log(unref(asyncExpandTreeRef));
+        console.log(unref(asyncExpandTreeRef));
-            unref(asyncExpandTreeRef)?.expandAll(true);
+        unref(asyncExpandTreeRef)?.expandAll(true);
-          });
+      });
-        }, 2000);
+    }, 2000);
-      }
+  }
-      function loadTreeData2() {
+  function loadTreeData2() {
-        treeLoading.value = true;
+    treeLoading.value = true;
-        // 以下是模拟异步获取数据
+    // 以下是模拟异步获取数据
-        setTimeout(() => {
+    setTimeout(() => {
-          // 设置数据源
+      // 设置数据源
-          tree2.value = cloneDeep(treeData);
+      tree2.value = cloneDeep(treeData);
-          treeLoading.value = false;
+      treeLoading.value = false;
-        }, 2000);
+    }, 2000);
-      }
+  }
 
-      const tree = ref([
+  const tree = ref([
-        {
+    {
-          title: 'parent ',
+      title: 'parent ',
-          key: '0-0',
+      key: '0-0',
-        },
-      ]);
-
-      function onLoadData(treeNode) {
-        return new Promise((resolve: (value?: unknown) => void) => {
-          if (isArray(treeNode.children) && treeNode.children.length > 0) {
-            resolve();
-            return;
-          }
-          setTimeout(() => {
-            const asyncTreeAction: TreeActionType | null = unref(asyncTreeRef);
-            if (asyncTreeAction) {
-              const nodeChildren = [
-                { title: `Child Node ${treeNode.eventKey}-0`, key: `${treeNode.eventKey}-0` },
-                { title: `Child Node ${treeNode.eventKey}-1`, key: `${treeNode.eventKey}-1` },
-              ];
-              asyncTreeAction.updateNodeByKey(treeNode.eventKey, { children: nodeChildren });
-              asyncTreeAction.setExpandedKeys(
-                uniq([treeNode.eventKey, ...asyncTreeAction.getExpandedKeys()]),
-              );
-            }
-
-            resolve();
-            return;
-          }, 300);
-        });
-      }
-      return {
-        treeData,
-        handleCheck,
-        tree,
-        onLoadData,
-        asyncTreeRef,
-        asyncExpandTreeRef,
-        loadTreeRef,
-        tree2,
-        loadTreeData,
-        treeLoading,
-        loadTreeData2,
-      };
     },
-  });
+  ]);
+
+  function onLoadData(treeNode) {
+    return new Promise((resolve: (value?: unknown) => void) => {
+      if (isArray(treeNode.children) && treeNode.children.length > 0) {
+        resolve();
+        return;
+      }
+      setTimeout(() => {
+        const asyncTreeAction: TreeActionType | null = unref(asyncTreeRef);
+        if (asyncTreeAction) {
+          const nodeChildren = [
+            { title: `Child Node ${treeNode.eventKey}-0`, key: `${treeNode.eventKey}-0` },
+            { title: `Child Node ${treeNode.eventKey}-1`, key: `${treeNode.eventKey}-1` },
+          ];
+          asyncTreeAction.updateNodeByKey(treeNode.eventKey, { children: nodeChildren });
+          asyncTreeAction.setExpandedKeys(
+            uniq([treeNode.eventKey, ...asyncTreeAction.getExpandedKeys()]),
+          );
+        }
+
+        resolve();
+        return;
+      }, 300);
+    });
+  }
 </script>

src/views/form-design/components/VFormDesign/components/ComponentProps.vue

@@ -85,9 +85,10 @@
     Select,
     InputNumber,
     RadioGroup,
+    Col,
+    Row,
   } from 'ant-design-vue';
   import RadioButtonGroup from '/@/components/Form/src/components/RadioButtonGroup.vue';
-  import { Col, Row } from 'ant-design-vue';
   import { computed, defineComponent, ref, watch } from 'vue';
   import { useFormDesignState } from '../../../hooks/useFormDesignState';
   import {

src/views/form-design/components/VFormDesign/components/FormProps.vue

@@ -78,9 +78,17 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { useFormDesignState } from '../../../hooks/useFormDesignState';
-  import { InputNumber, Slider, Checkbox, Col, RadioChangeEvent } from 'ant-design-vue';
+  import {
-  // import RadioButtonGroup from '/@/components/RadioButtonGroup.vue';
+    InputNumber,
-  import { Form, FormItem, Radio } from 'ant-design-vue';
+    Slider,
+    Checkbox,
+    Col,
+    RadioChangeEvent,
+    Form,
+    FormItem,
+    Radio,
+  } from 'ant-design-vue';
+
   export default defineComponent({
     name: 'FormProps',
     components: {

src/views/form-design/components/VFormDesign/components/LayoutItem.vue

@@ -65,6 +65,7 @@
   import { useFormDesignState } from '../../../hooks/useFormDesignState';
   import { IVFormComponent } from '../../../typings/v-form-component';
   import { Row, Col } from 'ant-design-vue';
+
   export default defineComponent({
     name: 'LayoutItem',
     components: {

src/views/form-design/components/VFormDesign/components/PreviewCode.vue

@@ -24,6 +24,7 @@
 
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useMessage } from '/@/hooks/web/useMessage';
+
   export default defineComponent({
     name: 'PreviewCode',
     components: {

src/views/form-design/components/VFormDesign/index.vue

@@ -105,6 +105,7 @@
   import { useDesign } from '/@/hooks/web/useDesign';
 
   import { CollapseContainer } from '/@/components/Container/index';
+
   defineProps({
     title: {
       type: String,

src/views/form-design/components/VFormDesign/modules/PropsPanel.vue

@@ -29,6 +29,7 @@
   import { useFormDesignState } from '../../../hooks/useFormDesignState';
   import { customComponents } from '../../../core/formItemConfig';
   import { TabPane, Tabs } from 'ant-design-vue';
+
   type ChangeTabKey = 1 | 2;
   export interface IPropsPanel {
     changeTab: (key: ChangeTabKey) => void;

src/views/form-design/components/VFormPreview/index.vue

@@ -36,6 +36,7 @@
   import JsonModal from '../VFormDesign/components/JsonModal.vue';
   import { IToolbarMethods } from '../../typings/form-type';
   import { Modal } from 'ant-design-vue';
+
   export default defineComponent({
     name: 'VFormPreview',
     components: {

src/views/sys/iframe/FrameBlank.vue

@@ -1,9 +1,6 @@
 <template>
   <div></div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  defineOptions({ name: 'FrameBlank' });
-  export default defineComponent({
-    name: 'FrameBlank',
-  });
 </script>

src/views/sys/login/Login.vue

@@ -49,8 +49,7 @@
 </template>
 <script lang="ts" setup>
   import { computed } from 'vue';
-  import { AppLogo } from '/@/components/Application';
+  import { AppLogo, AppLocalePicker } from '/@/components/Application';
-  import { AppLocalePicker } from '/@/components/Application';
   import LoginForm from './LoginForm.vue';
   import ForgetPasswordForm from './ForgetPasswordForm.vue';
   import RegisterForm from './RegisterForm.vue';

src/views/sys/login/SessionTimeoutLogin.vue

@@ -13,6 +13,7 @@
   import { usePermissionStore } from '/@/store/modules/permission';
   import { useAppStore } from '/@/store/modules/app';
   import { PermissionModeEnum } from '/@/enums/appEnum';
+  import { type Nullable } from '@vben/types';
 
   const { prefixCls } = useDesign('st-login');
   const userStore = useUserStore();

tsconfig.json

@@ -3,7 +3,7 @@
   "extends": "@vben/ts-config/vue-app.json",
   "compilerOptions": {
     "baseUrl": ".",
-    "types": ["vite/client", "unplugin-vue-define-options/macros-global"],
+    "types": ["vite/client"],
     "paths": {
       "/@/*": ["src/*"],
       "/#/*": ["types/*"],