style: 添加大屏插件和格式化代码

.env

@@ -13,6 +13,9 @@ VITE_APP_URL=http://localhost:8801
 # 如果端口被占用会直接退出，而不是尝试下一个端口
 VITE_STRICT_PORT=false
 
+# 是否启用屏幕转vw适配
+VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN=false
+
 # 是否在打包时使用cdn替换本地库 替换 true 不替换 false
 VITE_CDN=false
 

.env.development

@@ -10,6 +10,9 @@ VITE_APP_URL=http://localhost:8801
 # 如果端口被占用会直接退出，而不是尝试下一个端口
 VITE_STRICT_PORT=false
 
+# 是否启用屏幕转vw适配
+VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN=false
+
 # 是否在打包时使用cdn替换本地库 替换 true 不替换 false
 VITE_CDN=false
 

.env.production

@@ -10,6 +10,9 @@ VITE_APP_URL=http://localhost:8000
 # 如果端口被占用会直接退出，而不是尝试下一个端口
 VITE_STRICT_PORT=false
 
+# 是否启用屏幕转vw适配
+VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN=false
+
 # 是否在打包时使用cdn替换本地库 替换 true 不替换 false
 VITE_CDN=false
 

.prettierrc.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   // (x)=>{},单个参数箭头函数是否显示小括号。(always:始终显示;avoid:省略括号。默认:always)
   arrowParens: "always",
   // 开始标签的右尖括号是否跟随在最后一行属性末尾，默认false
@@ -24,7 +24,7 @@ module.exports = {
   // 结尾添加分号
   semi: true,
   // 使用单引号 (true:单引号;false:双引号)
-    singleQuote: false,
+  singleQuote: true,
   // 缩进空格数，默认2个空格
   tabWidth: 2,
   // 元素末尾是否加逗号，默认es5: ES5中的 objects, arrays 等会添加逗号，TypeScript 中的 type 后不加逗号

build/buildEnv.ts

@@ -1,4 +1,5 @@
 import type { BuildOptions } from 'vite';
+
 import { pathResolve } from './utils';
 
 export const buildEnv = (): BuildOptions => {
@@ -39,7 +40,7 @@ export const buildEnv = (): BuildOptions => {
         chunkFileNames: 'static/js/[name]-[hash].js',
         entryFileNames: 'static/js/[name]-[hash].js',
         assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
-				manualChunks: id => {
+        manualChunks: (id) => {
           // 如果是包含在包中则打包成 vendor
           if (id.includes('node_modules')) {
             return `vendor`;

build/cdn.ts

@@ -1,4 +1,5 @@
 import { Plugin as importToCDN } from 'vite-plugin-cdn-import';
+
 import { wrapperEnv } from './utils';
 
 /**
@@ -61,7 +62,7 @@ export const cdn = importToCDN({
 });
 
 /* 是否使用CDN加速 */
-export const useCDN = mode => {
+export const useCDN = (mode) => {
   const env = wrapperEnv(mode, 'VITE');
   return env.VITE_CDN ? cdn : null;
 };

build/css.ts

@@ -0,0 +1,39 @@
+import postCssPxToViewport8plugin from 'postcss-px-to-viewport-8-plugin';
+import type { CSSOptions, Plugin } from 'vite';
+
+import { wrapperEnv } from './utils';
+
+export const css = (mode): CSSOptions => {
+  const plugins: Plugin[] = [usePostCssPxToViewport8plugin(mode)];
+
+  return {
+    postcss: {
+      plugins: plugins.filter(Boolean),
+    },
+  };
+};
+
+/** 是否启用px转换vw插件 */
+const usePostCssPxToViewport8plugin = (mode): Plugin => {
+  const { VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN } = wrapperEnv(mode, 'VITE');
+
+  return VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN
+    ? postCssPxToViewport8plugin({
+        unitToConvert: 'px',
+        viewportWidth: 1920, // 设计稿的宽度
+        unitPrecision: 5, // 单位转换后保留的精度
+        propList: ['*'], // 能转化为vw的属性列表
+        viewportUnit: 'vw', // 希望使用的视口单位
+        fontViewportUnit: 'vw', // 字体使用的视口单位
+        selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
+        minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
+        mediaQuery: true, // 媒体查询里的单位是否需要转换单位
+        replace: true, //  是否直接更换属性值，而不添加备用属性
+        exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+        include: [], // 如果设置了include，那将只有匹配到的文件才会被转换
+        landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
+        landscapeUnit: 'vw', // 横屏时使用的单位
+        landscapeWidth: 1024, // 横屏时使用的视口宽度
+      })
+    : null;
+};

build/define.ts

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+
 import { dependencies, devDependencies, engines, name, version } from '../package.json';
 
 const __APP_INFO__ = {

build/info.ts

@@ -1,8 +1,9 @@
-import { wrapperEnv } from './utils';
-import dayjs, { type Dayjs } from 'dayjs';
-import gradientString from 'gradient-string';
-import duration from 'dayjs/plugin/duration';
 import boxen, { type Options as BoxenOptions } from 'boxen';
+import dayjs, { type Dayjs } from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import gradientString from 'gradient-string';
+
+import { wrapperEnv } from './utils';
 
 dayjs.extend(duration);
 
@@ -16,13 +17,13 @@ const boxenOptions: BoxenOptions = {
 /* 输出日志信息 */
 const printLogMessage = (VITE_PORT: number) => {
   return gradientString('cyan', 'magenta').multiline(
-		`保存成功！服务器重新启动
+    `保存成功！服务器重新启动...
 项目访问地址如下：
-http://localhost:${VITE_PORT}`,
+http://localhost:${VITE_PORT}`
   );
 };
 
-export const viteConsoleLog = mode => {
+export const viteConsoleLog = (mode) => {
   const { VITE_PORT } = wrapperEnv(mode);
 
   let config: { command: string };
@@ -43,7 +44,12 @@ export const viteConsoleLog = mode => {
       if (config.command === 'build') {
         endTime = dayjs(new Date());
         const format = dayjs.duration(endTime.diff(startTime)).format('mm分ss秒');
-				console.log(boxen(gradientString('cyan', 'magenta').multiline(`🎉 恭喜打包完成（总用时${format}）`), boxenOptions));
+        console.log(
+          boxen(
+            gradientString('cyan', 'magenta').multiline(`🎉 恭喜打包完成（总用时${format}）`),
+            boxenOptions
+          )
+        );
       }
     },
   };

build/plugins.ts

@@ -1,14 +1,15 @@
+import UnoCssIcons from '@unocss/preset-icons';
 import vue from '@vitejs/plugin-vue';
-import type { PluginOption } from 'vite';
 import vueJsx from '@vitejs/plugin-vue-jsx';
-import Inspector from 'vite-plugin-vue-inspector';
+import { presetIcons, presetUno } from 'unocss';
-import { compressPack, report } from './utils';
+import UnoCSS from 'unocss/vite';
+import type { PluginOption } from 'vite';
 import removeConsole from 'vite-plugin-remove-console';
+import Inspector from 'vite-plugin-vue-inspector';
+
 import { useCDN } from './cdn';
 import { viteConsoleLog } from './info';
-import UnoCSS from 'unocss/vite';
+import { compressPack, report } from './utils';
-import { presetIcons, presetUno } from 'unocss';
-import UnoCssIcons from '@unocss/preset-icons';
 
 export const plugins = (mode): PluginOption[] => {
   return [
@@ -21,7 +22,7 @@ export const plugins = (mode): PluginOption[] => {
     viteConsoleLog(mode),
     UnoCSS({
       hmrTopLevelAwait: false,
-
+      inspector: true, // 控制台是否打印 UnoCSS inspector
       presets: [
         presetIcons({
           extraProperties: {
@@ -30,7 +31,6 @@ export const plugins = (mode): PluginOption[] => {
           },
         }),
         UnoCssIcons({
-					// 其他选项
           prefix: 'i-',
           extraProperties: {
             display: 'inline-block',

build/server.ts

@@ -1,8 +1,9 @@
 import type { ServerOptions } from 'vite';
+
 import { wrapperEnv } from './utils';
 
 /* 开发服务配置 */
-export const server = mode => {
+export const server = (mode) => {
   const { VITE_PORT, VITE_APP_URL, VITE_STRICT_PORT } = wrapperEnv(mode);
 
   const options: ServerOptions = {

build/utils.ts

@@ -1,7 +1,8 @@
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { loadEnv } from 'vite';
+
 import { visualizer } from 'rollup-plugin-visualizer';
+import { loadEnv } from 'vite';
 import viteCompression from 'vite-plugin-compression';
 
 export const root: string = process.cwd();
@@ -33,7 +34,7 @@ export const pathResolve = (dir = '.', metaUrl = import.meta.url) => {
  * @param prefix 需要过滤的前缀
  * @link 参考：https://cn.vite.dev/config/#using-environment-variables-in-config
  */
-export const wrapperEnv = (mode, prefix = ''): ViteEnv => {
+export const wrapperEnv = (mode, prefix: string = ''): ViteEnv => {
   const env = loadEnv(mode, root, prefix);
 
   // 将变量转换指定类型
@@ -53,11 +54,13 @@ export const wrapperEnv = (mode, prefix = ''): ViteEnv => {
 /* 打包分析 */
 export const report = () => {
   const lifecycle = process.env.npm_lifecycle_event;
-	return lifecycle === 'report' ? visualizer({ open: true, brotliSize: true, filename: 'report.html' }) : (null as any);
+  return lifecycle === 'report'
+    ? visualizer({ open: true, brotliSize: true, filename: 'report.html' })
+    : (null as any);
 };
 
 /* 启用gzip压缩 */
-export const compressPack = mode => {
+export const compressPack = (mode) => {
   const { VITE_COMPRESSION } = wrapperEnv(mode);
 
   return VITE_COMPRESSION == 'gzip' ? viteCompression({ threshold: 1024000 }) : null;

eslint.config.js

@@ -1,11 +1,12 @@
 import js from '@eslint/js';
+import pluginTypeScript from '@typescript-eslint/eslint-plugin';
+import * as parserTypeScript from '@typescript-eslint/parser';
+import configPrettier from 'eslint-config-prettier';
+import { defineFlatConfig } from 'eslint-define-config';
+import pluginPrettier from 'eslint-plugin-prettier';
+import eslintPluginSimpleImportSort from 'eslint-plugin-simple-import-sort';
 import pluginVue from 'eslint-plugin-vue';
 import * as parserVue from 'vue-eslint-parser';
-import configPrettier from 'eslint-config-prettier';
-import pluginPrettier from 'eslint-plugin-prettier';
-import { defineFlatConfig } from 'eslint-define-config';
-import * as parserTypeScript from '@typescript-eslint/parser';
-import pluginTypeScript from '@typescript-eslint/eslint-plugin';
 
 export default defineFlatConfig([
   {
@@ -46,10 +47,12 @@ export default defineFlatConfig([
     },
     plugins: {
       prettier: pluginPrettier,
+      'simple-import-sort': eslintPluginSimpleImportSort,
     },
     rules: {
       ...configPrettier.rules,
       ...pluginPrettier.configs.recommended.rules,
+      'simple-import-sort/imports': 'error',
       'no-debugger': 'off',
       'no-unused-vars': [
         'error',

package.json

@@ -12,6 +12,7 @@
     "lint": "pnpm lint:eslint && pnpm lint:prettier && pnpm lint:stylelint"
   },
   "dependencies": {
+    "@eslint/js": "^9.21.0",
     "@typescript-eslint/eslint-plugin": "^8.24.1",
     "@typescript-eslint/parser": "^8.24.1",
     "@unocss/preset-icons": "^66.0.0",
@@ -33,6 +34,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.3.1",
     "pinia-plugin-persistedstate": "^3.2.3",
+    "postcss-px-to-viewport-8-plugin": "^1.2.5",
     "prettier": "^3.3.3",
     "rimraf": "^5.0.10",
     "rollup-plugin-visualizer": "^5.14.0",
@@ -48,6 +50,7 @@
     "vite-plugin-remove-console": "^2.2.0",
     "vite-plugin-vue-inspector": "^5.3.1",
     "vue": "^3.5.13",
+    "vue-eslint-parser": "^9.4.3",
     "vue-router": "^4.4.3",
     "vue-types": "^6.0.0"
   },
@@ -55,6 +58,7 @@
     "@iconify/json": "^2.2.310",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "typescript": "~5.7.2",
     "vite": "^6.1.0",
     "vite-plugin-compression": "^0.5.1",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@eslint/js':
+        specifier: ^9.21.0
+        version: 9.21.0
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.24.1
         version: 8.24.1(@typescript-eslint/parser@8.24.1(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)
@@ -43,16 +46,16 @@ importers:
         version: 9.21.0(jiti@2.4.2)
       eslint-config-prettier:
         specifier: ^9.1.0
-        version: 9.1.0(eslint@9.21.0)
+        version: 9.1.0(eslint@9.21.0(jiti@2.4.2))
       eslint-define-config:
         specifier: ^2.1.0
         version: 2.1.0
       eslint-plugin-prettier:
         specifier: ^5.2.1
-        version: 5.2.3(eslint-config-prettier@9.1.0(eslint@9.21.0))(eslint@9.21.0)(prettier@3.5.2)
+        version: 5.2.3(eslint-config-prettier@9.1.0(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.5.2)
       eslint-plugin-vue:
         specifier: ^9.27.0
-        version: 9.32.0(eslint@9.21.0)
+        version: 9.32.0(eslint@9.21.0(jiti@2.4.2))
       gradient-string:
         specifier: ^3.0.0
         version: 3.0.0
@@ -71,6 +74,9 @@ importers:
       pinia-plugin-persistedstate:
         specifier: ^3.2.3
         version: 3.2.3(pinia@2.3.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)))
+      postcss-px-to-viewport-8-plugin:
+        specifier: ^1.2.5
+        version: 1.2.5
       prettier:
         specifier: ^3.3.3
         version: 3.5.2
@@ -116,6 +122,9 @@ importers:
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.7.3)
+      vue-eslint-parser:
+        specifier: ^9.4.3
+        version: 9.4.3(eslint@9.21.0(jiti@2.4.2))
       vue-router:
         specifier: ^4.4.3
         version: 4.5.0(vue@3.5.13(typescript@5.7.3))
@@ -128,10 +137,13 @@ importers:
         version: 2.2.310
       '@vitejs/plugin-vue':
         specifier: ^5.2.1
-        version: 5.2.1(vite@6.1.1(sass@1.85.0))(vue@3.5.13(typescript@5.7.3))
+        version: 5.2.1(vite@6.1.1(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
       '@vue/tsconfig':
         specifier: ^0.7.0
         version: 0.7.0(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
+      eslint-plugin-simple-import-sort:
+        specifier: ^12.1.1
+        version: 12.1.1(eslint@9.21.0(jiti@2.4.2))
       typescript:
         specifier: ~5.7.2
         version: 5.7.3
@@ -1374,6 +1386,11 @@ packages:
       eslint-config-prettier:
         optional: true
 
+  eslint-plugin-simple-import-sort@12.1.1:
+    resolution: {integrity: sha512-6nuzu4xwQtE3332Uz0to+TxDQYRLTKRESSc2hefVT48Zc8JthmN23Gx9lnYhu0FtkRSL1oxny3kJ2aveVhmOVA==}
+    peerDependencies:
+      eslint: '>=5.0.0'
+
   eslint-plugin-vue@9.32.0:
     resolution: {integrity: sha512-b/Y05HYmnB/32wqVcjxjHZzNpwxj1onBOvqW89W+V+XNG1dRuaFbNd3vT9CLbr2LXjEoq+3vn8DanWf7XU22Ug==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -1890,6 +1907,10 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
   ofetch@1.4.1:
     resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
 
@@ -1986,6 +2007,9 @@ packages:
   postcss-media-query-parser@0.2.3:
     resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
 
+  postcss-px-to-viewport-8-plugin@1.2.5:
+    resolution: {integrity: sha512-+yc69+q/euV7iKh5fGXY6C/lpepmVx2DGFHeYj5BpzIFyBBpdACDjZyrZ8AV0kCg+J0bplBv4ZA1QTzgaK0rGg==}
+
   postcss-resolve-nested-selector@0.1.6:
     resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==}
 
@@ -2849,11 +2873,6 @@ snapshots:
       eslint: 9.21.0(jiti@2.4.2)
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/eslint-utils@4.4.1(eslint@9.21.0)':
-    dependencies:
-      eslint: 9.21.0
-      eslint-visitor-keys: 3.4.3
-
   '@eslint-community/regexpp@4.12.1': {}
 
   '@eslint/config-array@0.19.2':
@@ -3342,9 +3361,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.2.1(vite@6.1.1(sass@1.85.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vitejs/plugin-vue@5.2.1(vite@6.1.1(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
-      vite: 6.1.1(sass@1.85.0)
+      vite: 6.1.1(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
       vue: 3.5.13(typescript@5.7.3)
 
   '@volar/language-core@2.4.11':
@@ -3797,31 +3816,35 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-config-prettier@9.1.0(eslint@9.21.0):
+  eslint-config-prettier@9.1.0(eslint@9.21.0(jiti@2.4.2)):
     dependencies:
-      eslint: 9.21.0
+      eslint: 9.21.0(jiti@2.4.2)
 
   eslint-define-config@2.1.0: {}
 
-  eslint-plugin-prettier@5.2.3(eslint-config-prettier@9.1.0(eslint@9.21.0))(eslint@9.21.0)(prettier@3.5.2):
+  eslint-plugin-prettier@5.2.3(eslint-config-prettier@9.1.0(eslint@9.21.0(jiti@2.4.2)))(eslint@9.21.0(jiti@2.4.2))(prettier@3.5.2):
     dependencies:
-      eslint: 9.21.0
+      eslint: 9.21.0(jiti@2.4.2)
       prettier: 3.5.2
       prettier-linter-helpers: 1.0.0
       synckit: 0.9.2
     optionalDependencies:
-      eslint-config-prettier: 9.1.0(eslint@9.21.0)
+      eslint-config-prettier: 9.1.0(eslint@9.21.0(jiti@2.4.2))
 
-  eslint-plugin-vue@9.32.0(eslint@9.21.0):
+  eslint-plugin-simple-import-sort@12.1.1(eslint@9.21.0(jiti@2.4.2)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.21.0)
+      eslint: 9.21.0(jiti@2.4.2)
-      eslint: 9.21.0
+
+  eslint-plugin-vue@9.32.0(eslint@9.21.0(jiti@2.4.2)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.21.0(jiti@2.4.2))
+      eslint: 9.21.0(jiti@2.4.2)
       globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.2
       semver: 7.7.1
-      vue-eslint-parser: 9.4.3(eslint@9.21.0)
+      vue-eslint-parser: 9.4.3(eslint@9.21.0(jiti@2.4.2))
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -3840,45 +3863,6 @@ snapshots:
 
   eslint-visitor-keys@4.2.0: {}
 
-  eslint@9.21.0:
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.21.0)
-      '@eslint-community/regexpp': 4.12.1
-      '@eslint/config-array': 0.19.2
-      '@eslint/core': 0.12.0
-      '@eslint/eslintrc': 3.3.0
-      '@eslint/js': 9.21.0
-      '@eslint/plugin-kit': 0.2.7
-      '@humanfs/node': 0.16.6
-      '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.4.2
-      '@types/estree': 1.0.6
-      '@types/json-schema': 7.0.15
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.6
-      debug: 4.4.0
-      escape-string-regexp: 4.0.0
-      eslint-scope: 8.2.0
-      eslint-visitor-keys: 4.2.0
-      espree: 10.3.0
-      esquery: 1.6.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 8.0.0
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      ignore: 5.3.2
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      json-stable-stringify-without-jsonify: 1.0.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.4
-    transitivePeerDependencies:
-      - supports-color
-
   eslint@9.21.0(jiti@2.4.2):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1(eslint@9.21.0(jiti@2.4.2))
@@ -4347,6 +4331,8 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
+  object-assign@4.1.1: {}
+
   ofetch@1.4.1:
     dependencies:
       destr: 2.0.3
@@ -4445,6 +4431,10 @@ snapshots:
 
   postcss-media-query-parser@0.2.3: {}
 
+  postcss-px-to-viewport-8-plugin@1.2.5:
+    dependencies:
+      object-assign: 4.1.1
+
   postcss-resolve-nested-selector@0.1.6: {}
 
   postcss-safe-parser@6.0.0(postcss@8.5.3):
@@ -4924,25 +4914,16 @@ snapshots:
       sass: 1.85.0
       terser: 5.39.0
 
-  vite@6.1.1(sass@1.85.0):
-    dependencies:
-      esbuild: 0.24.2
-      postcss: 8.5.3
-      rollup: 4.34.8
-    optionalDependencies:
-      fsevents: 2.3.3
-      sass: 1.85.0
-
   vscode-uri@3.1.0: {}
 
   vue-demi@0.14.10(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       vue: 3.5.13(typescript@5.7.3)
 
-  vue-eslint-parser@9.4.3(eslint@9.21.0):
+  vue-eslint-parser@9.4.3(eslint@9.21.0(jiti@2.4.2)):
     dependencies:
       debug: 4.4.0
-      eslint: 9.21.0
+      eslint: 9.21.0(jiti@2.4.2)
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1

src/components/HelloWorld.vue

@@ -1,9 +1,9 @@
-<script setup lang="ts">
+<script lang="ts" setup>
-import { ref } from 'vue'
+import { ref } from 'vue';
 
-defineProps<{ msg: string }>()
+defineProps<{ msg: string }>();
 
-const count = ref(0)
+const count = ref(0);
 </script>
 
 <template>
@@ -13,23 +13,22 @@ const count = ref(0)
     <button type="button" @click="count++">count is {{ count }}</button>
     <p>
       Edit
-      <code>components/HelloWorld.vue</code> to test HMR
+      <code>components/HelloWorld.vue</code>
+      to test HMR
     </p>
   </div>
 
   <p>
     Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>
-      >create-vue</a
+    , the official Vue + Vite starter
-    >, the official Vue + Vite starter
   </p>
   <p>
     Learn more about IDE Support for Vue in the
-    <a
+    <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank">
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      Vue Docs Scaling up Guide
-      target="_blank"
+    </a>
-      >Vue Docs Scaling up Guide</a
+    .
-    >.
   </p>
   <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
 </template>

src/layout/index.vue

@@ -4,6 +4,7 @@
   <div class="w-full flex items-center justify-center flex-wrap gap-x-4 text-4xl p-2 mt-4">
     <div class="w-full flex items-center justify-center mb-4">
       <button>清除默认样式的按钮</button>
+      <div class="w-[100px] h-[100px] bg-green" />
     </div>
     <div class="i-ph-anchor-simple-thin" />
     <!-- 来自 Phosphor 图标的基本锚点图标 -->

src/main.ts

@@ -1,9 +1,12 @@
-import { createApp } from 'vue';
 import 'animate.css';
-import App from './App.vue';
-import plugins from '@/plugins';
 import '@unocss/reset/tailwind-compat.css';
 import 'uno.css';
 import 'virtual:unocss-devtools';
 
+import { createApp } from 'vue';
+
+import plugins from '@/plugins';
+
+import App from './App.vue';
+
 createApp(App).use(plugins).mount('#app');

src/plugins/index.ts

@@ -1,4 +1,5 @@
 import type { App } from 'vue';
+
 import { setupDirective } from '@/directive';
 import { setUpRouter } from '@/router';
 import { setupStore } from '@/store';

src/store/index.ts

@@ -1,5 +1,5 @@
-import type { App } from 'vue';
 import { createPinia } from 'pinia';
+import type { App } from 'vue';
 
 const store = createPinia();
 

src/types/global.d.ts

@@ -6,6 +6,7 @@ declare global {
     VITE_PUBLIC_PATH: string;
     VITE_APP_URL: string;
     VITE_STRICT_PORT: boolean;
+    VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN: boolean;
     VITE_CDN: boolean;
     VITE_COMPRESSION: string;
   }

src/utils/nprogress.ts

@@ -1,6 +1,7 @@
-import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 
+import NProgress from 'nprogress';
+
 // 进度条
 NProgress.configure({
   // 动画方式

src/utils/request.ts

@@ -1,15 +1,16 @@
 import axios, { type AxiosResponse, type InternalAxiosRequestConfig } from 'axios';
-import { useUserStoreHook } from '@/store/modules/user';
-import { ResultEnum } from '@/enums/ResultEnum';
-import { TOKEN_KEY } from '@/enums/CacheEnum';
 import qs from 'qs';
 
+import { TOKEN_KEY } from '@/enums/CacheEnum';
+import { ResultEnum } from '@/enums/ResultEnum';
+import { useUserStoreHook } from '@/store/modules/user';
+
 // 创建 axios 实例
 const service = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_API,
   timeout: 50000,
   headers: { 'Content-Type': 'application/json;charset=utf-8' },
-	paramsSerializer: params => {
+  paramsSerializer: (params) => {
     return qs.stringify(params);
   },
 });
@@ -25,7 +26,7 @@ service.interceptors.request.use(
   },
   (error: any) => {
     return Promise.reject(error);
-	},
+  }
 );
 
 // 响应拦截器
@@ -64,7 +65,7 @@ service.interceptors.response.use(
       }
     }
     return Promise.reject(error.message);
-	},
+  }
 );
 
 // 导出 axios 实例

src/views/error-page/404.vue

@@ -19,8 +19,13 @@ const router = useRouter();
         <a href="https://wallstreetcn.com" style="color: #20a0ff" target="_blank">wallstreetcn</a>
       </div>
       <div class="bullshit__headline">The webmaster said that you can not enter this page...</div>
-			<div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
+      <div class="bullshit__info">
-			<a class="bullshit__return-home" href="/" @click.prevent="router.replace('/')"> Back to home </a>
+        Please check that the URL you entered is correct, or click the button below to return to the
+        homepage.
+      </div>
+      <a class="bullshit__return-home" href="/" @click.prevent="router.replace('/')">
+        Back to home
+      </a>
     </div>
   </div>
 </template>

uno.config.ts

@@ -10,9 +10,12 @@ import {
 } from 'unocss';
 
 export default defineConfig({
-	shortcuts: [
+  shortcuts: {
-		// ...
+    'flex-center': 'flex justify-center items-center',
-	],
+    'flex-x-between': 'flex items-center justify-between',
+    'flex-x-around': 'flex items-center justify-around',
+    'flex-y-center': 'flex flex-col flex-wrap justify-center items-center',
+  },
   theme: {
     colors: {
       // ...

vite.config.ts

@@ -1,11 +1,13 @@
 import { defineConfig } from 'vite';
+
+import { buildEnv } from './build/buildEnv';
+import { css } from './build/css';
+import { define } from './build/define';
+import { exclude, include } from './build/optimize';
 import { plugins } from './build/plugins';
 import { resolve } from './build/resolve';
-import { buildEnv } from './build/buildEnv';
-import { define } from './build/define';
-import { root, wrapperEnv } from './build/utils';
 import { server } from './build/server';
-import { exclude, include } from './build/optimize';
+import { root, wrapperEnv } from './build/utils';
 
 // https://vite.dev/config/
 export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
@@ -23,6 +25,7 @@ export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
       jsxInject: "import { h } from 'vue';",
     },
     logLevel: 'info',
+    css: css(mode),
     // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息
     clearScreen: false,
     build: buildEnv(),