update 升级部分依赖，优化eslint语法以及scss语法

eslint.config.js

@@ -1,86 +0,0 @@
-import globals from 'globals';
-import pluginJs from '@eslint/js';
-import tseslint from 'typescript-eslint';
-import pluginVue from 'eslint-plugin-vue';
-import { readFile } from 'node:fs/promises';
-import prettier from 'eslint-plugin-prettier';
-
-/**
- * https://blog.csdn.net/sayUonly/article/details/123482912
- * 自动导入的配置
- */
-const autoImportFile = new URL('./.eslintrc-auto-import.json', import.meta.url);
-const autoImportGlobals = JSON.parse(await readFile(autoImportFile, 'utf8'));
-
-/** @type {import('eslint').Linter.Config[]} */
-export default [
-  {
-    /**
-     * 不需要.eslintignore文件 而是在这里配置
-     */
-    ignores: [
-      '*.sh',
-      'node_modules',
-      '*.md',
-      '*.woff',
-      '*.ttf',
-      '.vscode',
-      '.idea',
-      'dist',
-      '/public',
-      '/docs',
-      '.husky',
-      '.local',
-      '/bin',
-      '.eslintrc.cjs',
-      'prettier.config.js',
-      'src/assets',
-      'tailwind.config.js'
-    ]
-  },
-  { files: ['**/*.{js,mjs,cjs,ts,vue}'] },
-  {
-    languageOptions: {
-      globals: globals.browser
-    }
-  },
-  pluginJs.configs.recommended,
-  ...tseslint.configs.recommended,
-  ...pluginVue.configs['flat/essential'],
-  {
-    files: ['**/*.vue'],
-    languageOptions: {
-      parserOptions: {
-        parser: tseslint.parser
-      }
-    }
-  },
-  {
-    languageOptions: {
-      globals: {
-        // 自动导入的配置 undef
-        ...autoImportGlobals.globals,
-        DialogOption: 'readonly',
-        LayoutSetting: 'readonly'
-      }
-    },
-    plugins: { prettier },
-    rules: {
-      '@typescript-eslint/no-empty-function': 'off',
-      '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/no-unused-vars': 'off',
-      '@typescript-eslint/no-this-alias': 'off',
-
-      // vue
-      'vue/multi-word-component-names': 'off',
-      'vue/valid-define-props': 'off',
-      'vue/no-v-model-argument': 'off',
-      'prefer-rest-params': 'off',
-      // prettier
-      'prettier/prettier': 'error',
-      // 允许使用空Object类型 {}
-      '@typescript-eslint/no-empty-object-type': 'off',
-      '@typescript-eslint/no-unused-expressions': 'off'
-    }
-  }
-];

eslint.config.ts

@@ -0,0 +1,44 @@
+import pluginVue from 'eslint-plugin-vue';
+import globals from 'globals';
+import prettier from 'eslint-plugin-prettier';
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript';
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';
+
+export default defineConfigWithVueTs(
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{js,cjs,ts,mts,tsx,vue}']
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**']
+  },
+  {
+    languageOptions: {
+      globals: globals.browser
+    }
+  },
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+  skipFormatting,
+  {
+    plugins: { prettier },
+    rules: {
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/no-this-alias': 'off',
+      // vue
+      'vue/multi-word-component-names': 'off',
+      'vue/valid-define-props': 'off',
+      'vue/no-v-model-argument': 'off',
+      'prefer-rest-params': 'off',
+      // prettier
+      'prettier/prettier': 'error',
+      // 允许使用空Object类型 {}
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-unused-expressions': 'off'
+    }
+  }
+);

package.json

@@ -48,38 +48,37 @@
     "vxe-table": "4.5.22"
   },
   "devDependencies": {
-    "@eslint/js": "9.15.0",
     "@iconify/json": "2.2.276",
     "@types/crypto-js": "4.2.2",
     "@types/file-saver": "2.0.7",
     "@types/js-cookie": "3.0.6",
-    "@types/node": "18.18.2",
     "@types/nprogress": "0.2.3",
-    "@unocss/preset-attributify": "0.64.1",
+    "@unocss/preset-attributify": "66.0.0",
-    "@unocss/preset-icons": "0.64.1",
+    "@unocss/preset-icons": "66.0.0",
-    "@unocss/preset-uno": "0.64.1",
+    "@unocss/preset-uno": "66.0.0",
-    "@vitejs/plugin-vue": "5.0.4",
+    "@vitejs/plugin-vue": "5.2.1",
     "@vue/compiler-sfc": "3.4.23",
-    "autoprefixer": "10.4.18",
+    "@vue/eslint-config-prettier": "10.2.0",
-    "eslint": "9.15.0",
+    "@vue/eslint-config-typescript": "14.4.0",
-    "eslint-plugin-prettier": "^5.2.1",
+    "autoprefixer": "10.4.20",
-    "eslint-plugin-vue": "9.31.0",
+    "eslint": "9.21.0",
+    "eslint-plugin-prettier": "5.2.3",
+    "eslint-plugin-vue": "9.32.0",
     "fast-glob": "3.3.2",
-    "globals": "15.12.0",
+    "globals": "16.0.0",
-    "postcss": "8.4.36",
+    "prettier": "3.5.2",
-    "prettier": "3.2.5",
+    "sass": "1.84.0",
-    "sass": "1.72.0",
+    "typescript": "5.7.3",
-    "typescript": "5.7.2",
+    "unocss": "66.0.0",
-    "typescript-eslint": "8.16.0",
-    "unocss": "0.64.1",
     "unplugin-auto-import": "0.17.5",
     "unplugin-icons": "0.18.5",
-    "unplugin-vue-components": "0.26.0",
+    "unplugin-vue-components": "28.0.0",
     "unplugin-vue-setup-extend-plus": "1.0.1",
     "vite": "5.4.11",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-svg-icons": "2.0.1",
-    "vitest": "1.5.0",
+    "vite-plugin-vue-devtools": "7.7.1",
-    "vue-tsc": "2.0.13"
+    "vitest": "3.0.5",
+    "vue-tsc": "2.2.0"
   }
 }

src/assets/styles/btn.scss

@@ -1,4 +1,4 @@
-@import './variables.module.scss';
+@use './variables.module.scss' as *;
 
 @mixin colorBtn($color) {
   background: $color;

src/assets/styles/index.scss

@@ -1,12 +1,12 @@
-@import './variables.module.scss';
+@use './variables.module.scss' as *;
-@import './mixin.scss';
+@use './mixin.scss';
-@import './transition.scss';
+@use './transition.scss';
-@import './element-ui.scss';
+@use './element-ui.scss';
-@import './sidebar.scss';
+@use './sidebar.scss';
-@import './btn.scss';
+@use './btn.scss';
-@import './ruoyi.scss';
+@use './ruoyi.scss';
-@import 'animate.css';
+@use 'animate.css';
-@import 'element-plus/dist/index.css';
+@use 'element-plus/dist/index.css';
 
 body {
   height: 100%;

src/assets/styles/ruoyi.scss

@@ -1,3 +1,5 @@
+@use './variables.module.scss' as *;
+
 /**
  * 通用css样式布局处理
  * Copyright (c) 2019 ruoyi

src/assets/styles/sidebar.scss

@@ -1,3 +1,5 @@
+@use './variables.module.scss' as *;
+
 #app {
   .main-container {
     height: 100%;

src/layout/index.vue

@@ -68,7 +68,7 @@ onMounted(() => {
 });
 
 onMounted(() => {
-  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+  const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
   initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + '/resource/websocket');
 });
 
@@ -86,11 +86,11 @@ const setLayout = () => {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/mixin.scss';
+@use '@/assets/styles/mixin.scss';
-@import '@/assets/styles/variables.module.scss';
+@use '@/assets/styles/variables.module.scss' as *;
 
 .app-wrapper {
-  @include clearfix;
+  @include mixin.clearfix;
   position: relative;
   height: 100%;
   width: 100%;

vite.config.ts

@@ -1,6 +1,6 @@
-import { UserConfig, ConfigEnv, loadEnv, defineConfig } from 'vite';
+import { type UserConfig, type ConfigEnv, loadEnv, defineConfig } from 'vite';
-
 import createPlugins from './vite/plugins';
+import autoprefixer from 'autoprefixer'; // css自动添加兼容性前缀
 
 import path from 'path';
 export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
@@ -35,11 +35,17 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
     css: {
       preprocessorOptions: {
         scss: {
-          javascriptEnabled: true
+          // additionalData: '@use "@/assets/styles/variables.module.scss as *";'
+          // javascriptEnabled: true
+          api: 'modern-compiler'
         }
       },
       postcss: {
         plugins: [
+          // 浏览器兼容性
+          autoprefixer({
+            overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
+          }),
           {
             postcssPlugin: 'internal:charset-removal',
             AtRule: {

vite/plugins/index.ts

@@ -1,4 +1,6 @@
 import vue from '@vitejs/plugin-vue';
+import vueDevTools from 'vite-plugin-vue-devtools';
+
 import createUnoCss from './unocss';
 import createAutoImport from './auto-import';
 import createComponents from './components';
@@ -11,6 +13,7 @@ import path from 'path';
 export default (viteEnv: any, isBuild = false): [] => {
   const vitePlugins: any = [];
   vitePlugins.push(vue());
+  vitePlugins.push(vueDevTools());
   vitePlugins.push(createUnoCss());
   vitePlugins.push(createAutoImport(path));
   vitePlugins.push(createComponents(path));