chore: 整理

env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+/// <reference types="vitest" />
+/// <reference types="vite-plugin-vue-layouts/client" />
+/// <reference types="vite-plugin-vue-meta-layouts/client" />
+/* /// <reference types="vite-plugin-pwa/client" /> */
+/// <reference types="unplugin-vue-macros/macros-global" />
+/// <reference types="unplugin-vue-router/client" />
+/// <reference types="unplugin-icons/types/vue" />
+/// <reference types="@intlify/unplugin-vue-i18n/messages" />

eslint.config.ts

@@ -6,8 +6,9 @@ import pluginVitest from '@vitest/eslint-plugin';
 import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';
 import { configureVueProject, defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript';
 import { flatConfigs as eslintPluginImportX_flatConfigs } from 'eslint-plugin-import-x';
-import oxlint from 'eslint-plugin-oxlint';
+import pluginOxlint from 'eslint-plugin-oxlint';
 import perfectionist from 'eslint-plugin-perfectionist';
+import pluginPlaywright from 'eslint-plugin-playwright';
 import eslintPluginUnicorn from 'eslint-plugin-unicorn';
 import pluginVue from 'eslint-plugin-vue';
 
@@ -16,15 +17,13 @@ configureVueProject({ scriptLangs: ['ts', 'tsx', 'js', 'jsx'] });
 
 const _ignores = [
   // >>>
-  // eslint-disable-next-line unicorn/no-await-expression-member
   (await import('@eslint/compat')).includeIgnoreFile(
-    // eslint-disable-next-line unicorn/import-style, unicorn/no-await-expression-member
+    // eslint-disable-next-line unicorn/import-style
     (await import('node:path')).default.resolve(import.meta.dirname, '.gitignore'),
   ),
   // <<<
 
   // >>>
-  // eslint-disable-next-line unicorn/no-await-expression-member
   (await import('eslint/config')).globalIgnores([
     '**/dist/**',
     '**/dist-ssr/**',
@@ -44,6 +43,7 @@ const _ignores = [
 ];
 
 export default defineConfigWithVueTs(
+  // >>> create vue >>>
   {
     name: 'app/files-to-lint',
     files: ['**/*.{ts,mts,tsx,vue}'],
@@ -59,8 +59,13 @@ export default defineConfigWithVueTs(
     files: ['src/**/__tests__/*'],
   },
 
-  ...oxlint.configs['flat/recommended'],
+  {
+    ...pluginPlaywright.configs['flat/recommended'],
+    files: ['tests/playwright/**/*.{test,spec}.{js,ts,jsx,tsx}'],
+  },
+  ...pluginOxlint.configs['flat/recommended'],
   skipFormatting,
+  // <<< create vue <<<
 
   // region >> eslint-plugin-unicorn >>
   eslintPluginUnicorn.configs.recommended,
@@ -72,6 +77,7 @@ export default defineConfigWithVueTs(
       'unicorn/no-useless-spread': 'off',
       'unicorn/prevent-abbreviations': 'off',
       'unicorn/relative-url-style': 'off', // [plugin:vite:import-glob] Invalid glob: "imgs/*.png" (resolved: "imgs/*.png"). It must start with '/' or './'
+      'unicorn/no-await-expression-member': 'off',
     },
   },
   // endregion <<< eslint-plugin-unicorn <<<

package.json

@@ -19,6 +19,7 @@
     "lint:oxlint": "oxlint --fix",
     "lint:eslint": "eslint . --fix",
     "prepare": "husky",
+    "test:unit": "vitest",
     "playwright": "playwright test",
     "playwright:headless": "HEADLESS=true playwright test",
     "playwright:ui": "playwright test --ui",
@@ -31,7 +32,7 @@
     "knip": "pnpm dlx knip"
   },
   "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx,vue}": [
+    "{src,tests/playwright}/**/*.{js,jsx,ts,tsx,vue}": [
       "prettier --write",
       "eslint --fix",
       "oxlint --fix"
@@ -39,7 +40,6 @@
   },
   "pnpm": {
     "overrides": {
-      "vite": "$vite",
       "vue-tsc": "$vue-tsc",
       "@primevue/auto-import-resolver": "$primevue"
     }
@@ -55,7 +55,7 @@
     "@types/sortablejs": "^1.15.8",
     "@unhead/vue": "^2.0.14",
     "@vant/use": "^1.6.0",
-    "@vueuse/core": "^13.6.0",
+    "@vueuse/core": "^13.7.0",
     "alova": "^3.3.4",
     "ant-design-vue": "~4.2.6",
     "axios": "^1.11.0",
@@ -66,7 +66,7 @@
     "dayjs": "^1.11.13",
     "deep-freeze-es6": "^4.0.1",
     "jsencrypt": "^3.5.4",
-    "lucide-vue-next": "^0.539.0",
+    "lucide-vue-next": "^0.540.0",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
     "p5": "^2.0.4",
@@ -105,9 +105,11 @@
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/utils": "^3.0.1",
     "@playwright/test": "^1.54.2",
+    "@prettier/plugin-oxc": "^0.0.4",
     "@primevue/auto-import-resolver": "^4.3.7",
     "@tsconfig/node22": "^22.0.2",
     "@types/archiver": "^6.0.3",
+    "@types/jsdom": "^21.1.7",
     "@types/mockjs": "^1.0.10",
     "@types/node": "^22.17.2",
     "@types/nprogress": "^0.2.3",
@@ -129,15 +131,18 @@
     "eslint-plugin-import-x": "^4.16.1",
     "eslint-plugin-oxlint": "^1.12.0",
     "eslint-plugin-perfectionist": "^4.15.0",
+    "eslint-plugin-playwright": "^2.2.2",
     "eslint-plugin-unicorn": "^60.0.0",
     "eslint-plugin-vue": "^10.4.0",
     "husky": "^9.1.7",
-    "less": "^4.4.0",
+    "jiti": "^2.5.1",
+    "jsdom": "^26.1.0",
+    "less": "^4.4.1",
     "lint-staged": "^16.1.5",
     "mockjs": "^1.1.0",
     "naive-ui": "^2.42.0",
     "npm-run-all2": "^8.0.4",
-    "oxlint": "^1.12.0",
+    "oxlint": "~1.12.0",
     "prettier": "3.6.2",
     "spritesmith": "^3.5.1",
     "typescript": "~5.9.2",
@@ -152,7 +157,7 @@
     "unplugin-vue-markdown": "^29.1.0",
     "unplugin-vue-router": "^0.15.0",
     "vfonts": "^0.0.3",
-    "vite": "^7.1.2",
+    "vite": "^7.1.3",
     "vite-plugin-checker": "^0.10.2",
     "vite-plugin-fake-server": "^2.2.0",
     "vite-plugin-image-tools": "^3.0.0",
@@ -163,6 +168,7 @@
     "vite-plugin-vue-layouts": "^0.11.0",
     "vite-plugin-vue-meta-layouts": "^0.5.1",
     "vite-plugin-webfont-dl": "^3.11.1",
+    "vitest": "^3.2.4",
     "vue-component-type-helpers": "^3.0.5",
     "vue-tsc": "^3.0.5"
   }

src/pages/Page/iframe-page/Spectrogram.page.vue

@@ -20,7 +20,7 @@ function generateFakeSpectrogramData(len = 30, baseLevel = -90, noiseRange = 30)
 }
 
 // 定时更新数据以模拟实时效果
-let intervalId: null | number = null;
+let intervalId: null | NodeJS.Timeout = null;
 
 onMounted(() => {
   // 模拟: 每x秒更新一次数据并通过 ref 发送

tests/playwright/test-1.spec.ts

@@ -1,4 +1,4 @@
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 import { consola } from 'consola';
 
 test('页面加载正常', async ({ page }, testInfo) => {
@@ -14,4 +14,5 @@ test('页面加载正常', async ({ page }, testInfo) => {
   // 获取元素的文本内容
   const innerText = await commitElement.textContent();
   consola.debug(`Commit 文本内容: "${innerText}"`);
+  expect(innerText).toContain('commit:');
 });

tsconfig.app.json

@@ -1,6 +1,7 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json", // https://github.com/vuejs/create-vue/blob/main/template/tsconfig/base/tsconfig.app.json
   "include": [
+    "env.d.ts",
     "./typed-router.d.ts",
     "./auto-imports.d.ts",
     "./components.d.ts",
@@ -9,25 +10,15 @@
     "src/**/*",
     "src/**/*.vue"
   ],
-  "exclude": [
+  "exclude": ["src/**/__tests__/*"],
-    "src/**/__tests__/*",
-  ],
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+
     "allowJs": true, // 允许编译 JavaScript 文件
     "checkJs": true, // 启用 JavaScript 文件的类型检查
-    "types": [
-      "vite/client",
-      // "vitest",
 
-      "vite-plugin-vue-layouts/client",
-      "vite-plugin-vue-meta-layouts/client",
-      // "vite-plugin-pwa/client",
-      "unplugin-vue-macros/macros-global",
-      "unplugin-vue-router/client",
-      "unplugin-icons/types/vue",
-      "@intlify/unplugin-vue-i18n/messages"
-    ],
     "paths": {
       "@/*": ["./src/*"]
     }

tsconfig.json

@@ -1,6 +1,16 @@
 {
   "files": [],
-  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ],
   "compilerOptions": {
     // https://www.shadcn-vue.com/docs/components-json.html#aliases
     // A fallback to tsconfig.app.json if no paths were found in tsconfig.json

tsconfig.vitest.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.app.json",
+  "include": ["src/**/__tests__/*", "env.d.ts"],
+  "exclude": [],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}

vite.config.plugins.ts

@@ -198,8 +198,8 @@ export function Plugins() {
     VitePluginImageTools({
       quality: 80,
       enableWebp: true,
-      enableDev: false,
+      enableDev: true,
-      enableDevWebp: false,
+      enableDevWebp: true,
       // 排除字体 SVG 文件和可能有问题的 SVG 文件
       excludes: /fonts\/.*\.svg$|Helvetica.*\.svg$/,
     }),

vite.config.ts

@@ -57,19 +57,24 @@ export default defineConfig(({ command, mode }) => {
         // output: env.VITE_SPLIT_CHUNKS === 'true' ? (await import('utils4u/rollup')).createSplitChunkOutput() : undefined,
         output: {
           // minifyInternalExports: false,
-          // manualChunks: {
+          /* manualChunks: {
-          //   'vendor/utils4u': ['utils4u', 'utils4u/vue-use', 'utils4u/primevue'],
+            'vendor/utils4u': ['utils4u', 'utils4u/vue-use', 'utils4u/primevue'],
-          //   'vendor/vue': ['vue'],
+            'vendor/vue': ['vue'],
-          //   'vendor/primevue': ['primevue'],
+            'vendor/primevue': ['primevue'],
-          //   'vendor/faker-js': ['@faker-js/faker'],
+            'vendor/faker-js': ['@faker-js/faker'],
-          //   'vendor/mockjs': ['mockjs'],
+            'vendor/mockjs': ['mockjs'],
-          //   'vendor/axios': ['axios', 'alova', '@alova/adapter-axios'],
+            'vendor/axios': ['axios', 'alova', '@alova/adapter-axios'],
-          //   // 'vendor/nprogress': ['nprogress'],
+            // 'vendor/nprogress': ['nprogress'],
-          //   // 'vendor/formkit': ['@formkit/auto-animate'],
+            // 'vendor/formkit': ['@formkit/auto-animate'],
-          // },
+          }, */
-          manualChunks: {
+          /* manualChunks: {
             'vendor/Cesium': ['cesium'],
-          },
+          }, */
+          /* manualChunks(id) {
+            if (id.includes('cesium')) {
+              return 'vendor/Cesium';
+            }
+          }, */
           // advancedChunks: {
           //   groups: [
           //     {

vitest.config.ts

@@ -0,0 +1,15 @@
+import { fileURLToPath } from 'node:url';
+import { configDefaults, defineConfig, mergeConfig } from 'vitest/config';
+
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+  viteConfig as never,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/**'],
+      root: fileURLToPath(new URL('./', import.meta.url)),
+    },
+  }),
+);