feat: 中间部分完成

.env

@@ -1,5 +1,5 @@
 # 应用名称
-VITE_APP_TITLE="车辆监控中心"
+VITE_APP_TITLE="Vite 模板"
 
 # 平台本地运行端口号
 VITE_PORT=7000
@@ -13,6 +13,9 @@ VITE_APP_URL=http://localhost:8801
 # 如果端口被占用会直接退出，而不是尝试下一个端口
 VITE_STRICT_PORT=false
 
+# 是否启用屏幕转vw适配
+VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN=true
+
 # 是否在打包时使用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=true
+
 # 是否在打包时使用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=true
+
 # 是否在打包时使用cdn替换本地库 替换 true 不替换 false
 VITE_CDN=false
 

.prettierrc.js

@@ -1,14 +1,14 @@
 export default {
   // (x)=>{},单个参数箭头函数是否显示小括号。(always:始终显示;avoid:省略括号。默认:always)
-  arrowParens: "always",
+  arrowParens: 'always',
   // 开始标签的右尖括号是否跟随在最后一行属性末尾，默认false
   bracketSameLine: false,
   // 对象字面量的括号之间打印空格 (true - Example: { foo: bar } ; false - Example: {foo:bar})
   bracketSpacing: true,
   // 是否格式化一些文件中被嵌入的代码片段的风格(auto|off;默认auto)
-  embeddedLanguageFormatting: "auto",
+  embeddedLanguageFormatting: 'auto',
   // 指定 HTML 文件的空格敏感度 (css|strict|ignore;默认css)
-  htmlWhitespaceSensitivity: "ignore",
+  htmlWhitespaceSensitivity: 'ignore',
   // 当文件已经被 Prettier 格式化之后，是否会在文件顶部插入一个特殊的 @format 标记，默认false
   insertPragma: false,
   // 在 JSX 中使用单引号替代双引号，默认false
@@ -16,30 +16,30 @@ export default {
   // 每行最多字符数量，超出换行(默认100)
   printWidth: 100,
   // 超出打印宽度 (always | never | preserve )
-  proseWrap: "preserve",
+  proseWrap: 'preserve',
   // 对象属性是否使用引号(as-needed | consistent | preserve;默认as-needed:对象的属性需要加引号才添加;)
-  quoteProps: "as-needed",
+  quoteProps: 'as-needed',
   // 是否只格式化在文件顶部包含特定注释(@prettier| @format)的文件，默认false
   requirePragma: false,
   // 结尾添加分号
   semi: true,
   // 使用单引号 (true:单引号;false:双引号)
-  singleQuote: false,
+  singleQuote: true,
   // 缩进空格数，默认2个空格
   tabWidth: 2,
   // 元素末尾是否加逗号，默认es5: ES5中的 objects, arrays 等会添加逗号，TypeScript 中的 type 后不加逗号
-  trailingComma: "es5",
+  trailingComma: 'es5',
   // 指定缩进方式，空格或tab，默认false，即使用空格
   useTabs: false,
-  // vue 文件中是否缩进 <style> 和 <script> 标签，默认 false
+  // vue 文件中是否缩进 <styles> 和 <script> 标签，默认 false
   vueIndentScriptAndStyle: false,
 
-  endOfLine: "auto",
+  endOfLine: 'auto',
   overrides: [
     {
-      files: "*.html",
+      files: '*.html',
       options: {
-        parser: "html",
+        parser: 'html',
       },
     },
   ],

.vscode/extensions.json

@@ -1,3 +1,6 @@
 {
-  "recommendations": ["Vue.volar"]
+  "recommendations": [
+    "Vue.volar",
+    "rvest.vs-code-prettier-eslint"
+  ]
 }

LICENSE

@@ -1,7 +1,6 @@
 MIT License
 
 Copyright (c) 2024 Bunny
-Copyright (c) 2025 Large-Visual-Screen
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -9,11 +8,9 @@ in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
@@ -22,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

build/buildEnv.ts

@@ -1,15 +1,16 @@
-import type { BuildOptions } from "vite";
+import type { BuildOptions } from 'vite';
-import { pathResolve } from "./utils";
+
+import { pathResolve } from './utils';
 
 export const buildEnv = (): BuildOptions => {
   return {
-    target: "es2015",
+    target: 'es2015',
     assetsInlineLimit: 20000,
     // 构建输出的目录，默认值为"dist"
-    outDir: "docker/dist",
+    outDir: 'docker/dist',
     // 用于指定使用的代码压缩工具。在这里，minify 被设置为 'terser'，表示使用 Terser 进行代码压缩。默认值terser
     // esbuild 打包更快，但是不能去除 console.log，terser打包慢，但能去除 console.log
-    minify: "terser", // "esbuild"
+    minify: 'terser', // "esbuild"
     // 用于配置 Terser 的选项
     terserOptions: {
       // 用于配置压缩选项
@@ -30,18 +31,18 @@ export const buildEnv = (): BuildOptions => {
     // 规定触发警告的 chunk 大小, 当某个代码分块的大小超过该限制时，Vite 会发出警告
     chunkSizeWarningLimit: 2000,
     rollupOptions: {
-      external: ["md-editor-v3", "echarts"],
+      external: ['md-editor-v3', 'echarts'],
       input: {
-        index: pathResolve("../index.html", import.meta.url),
+        index: pathResolve('../index.html', import.meta.url),
       },
       // 静态资源分类打包
       output: {
-        chunkFileNames: "static/js/[name]-[hash].js",
+        chunkFileNames: 'static/js/[name]-[hash].js',
-        entryFileNames: "static/js/[name]-[hash].js",
+        entryFileNames: 'static/js/[name]-[hash].js',
-        assetFileNames: "static/[ext]/[name]-[hash].[ext]",
+        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
         manualChunks: (id) => {
           // 如果是包含在包中则打包成 vendor
-          if (id.includes("node_modules")) {
+          if (id.includes('node_modules')) {
             return `vendor`;
           }
         },

build/cdn.ts

@@ -1,5 +1,6 @@
-import { Plugin as importToCDN } from "vite-plugin-cdn-import";
+import { Plugin as importToCDN } from 'vite-plugin-cdn-import';
-import { wrapperEnv } from "./utils";
+
+import { wrapperEnv } from './utils';
 
 /**
  * @description 打包时采用`cdn`模式，仅限外网使用（默认不采用，如果需要采用cdn模式，请在 .env.production 文件，将 VITE_CDN 设置成true）
@@ -9,17 +10,17 @@ import { wrapperEnv } from "./utils";
 export const cdn = importToCDN({
   //（prodUrl解释： name: 对应下面modules的name，version: 自动读取本地package.json中dependencies依赖中对应包的版本号，path: 对应下面modules的path，当然也可写完整路径，会替换prodUrl）
   // prodUrl: 'https://cdn.bootcdn.net/ajax/libs/{name}/{version}/{path}',
-  prodUrl: "https://unpkg.com/{name}@{version}/{path}",
+  prodUrl: 'https://unpkg.com/{name}@{version}/{path}',
   modules: [
     {
-      name: "vue",
+      name: 'vue',
-      var: "Vue",
+      var: 'Vue',
-      path: "dist/vue.global.prod.js",
+      path: 'dist/vue.global.prod.js',
     },
     {
-      name: "vue-router",
+      name: 'vue-router',
-      var: "VueRouter",
+      var: 'VueRouter',
-      path: "dist/vue-router.global.js",
+      path: 'dist/vue-router.global.js',
     },
     // {
     // 	name: 'vue-i18n',
@@ -32,9 +33,9 @@ export const cdn = importToCDN({
     // 	path: 'lib/index.iife.js',
     // },
     {
-      name: "pinia",
+      name: 'pinia',
-      var: "Pinia",
+      var: 'Pinia',
-      path: "dist/pinia.iife.js",
+      path: 'dist/pinia.iife.js',
     },
     // {
     // 	name: 'element-plus',
@@ -43,25 +44,25 @@ export const cdn = importToCDN({
     // 	css: 'dist/index.css',
     // },
     {
-      name: "axios",
+      name: 'axios',
-      var: "axios",
+      var: 'axios',
-      path: "dist/axios.min.js",
+      path: 'dist/axios.min.js',
     },
     {
-      name: "dayjs",
+      name: 'dayjs',
-      var: "dayjs",
+      var: 'dayjs',
-      path: "dayjs.min.js",
+      path: 'dayjs.min.js',
     },
     {
-      name: "echarts",
+      name: 'echarts',
-      var: "echarts",
+      var: 'echarts',
-      path: "dist/echarts.min.js",
+      path: 'dist/echarts.min.js',
     },
   ],
 });
 
 /* 是否使用CDN加速 */
 export const useCDN = (mode) => {
-  const env = wrapperEnv(mode, "VITE");
+  const env = wrapperEnv(mode, 'VITE');
   return env.VITE_CDN ? cdn : null;
 };

build/css.ts

@@ -0,0 +1,42 @@
+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 {
+    preprocessorOptions: {
+      scss: { additionalData: `@use "@/assets/styles/global.scss";` },
+    },
+    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,9 +1,10 @@
-import dayjs from "dayjs";
+import dayjs from 'dayjs';
-import { dependencies, devDependencies, engines, name, version } from "../package.json";
+
+import { dependencies, devDependencies, engines, name, version } from '../package.json';
 
 const __APP_INFO__ = {
   pkg: { name, version, engines, dependencies, devDependencies },
-  lastBuildTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"),
+  lastBuildTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
 };
 
 export const define = () => {

build/info.ts

@@ -1,22 +1,23 @@
-import { wrapperEnv } from "./utils";
+import boxen, { type Options as BoxenOptions } from 'boxen';
-import dayjs, { type Dayjs } from "dayjs";
+import dayjs, { type Dayjs } from 'dayjs';
-import gradientString from "gradient-string";
+import duration from 'dayjs/plugin/duration';
-import duration from "dayjs/plugin/duration";
+import gradientString from 'gradient-string';
-import boxen, { type Options as BoxenOptions } from "boxen";
+
+import { wrapperEnv } from './utils';
 
 dayjs.extend(duration);
 
 const boxenOptions: BoxenOptions = {
   padding: 0.94,
-  borderColor: "cyan",
+  borderColor: 'cyan',
-  borderStyle: "round",
+  borderStyle: 'round',
-  textAlignment: "left",
+  textAlignment: 'left',
 };
 
 /* 输出日志信息 */
 const printLogMessage = (VITE_PORT: number) => {
-  return gradientString("cyan", "magenta").multiline(
+  return gradientString('cyan', 'magenta').multiline(
-    `保存成功！服务器重新启动
+    `保存成功！服务器重新启动...
 项目访问地址如下：
 http://localhost:${VITE_PORT}`
   );
@@ -29,23 +30,23 @@ export const viteConsoleLog = (mode) => {
   let startTime: Dayjs;
   let endTime: Dayjs;
   return {
-    name: "vite:buildInfo",
+    name: 'vite:buildInfo',
     configResolved(resolvedConfig) {
       config = resolvedConfig;
     },
     buildStart() {
       console.log(boxen(printLogMessage(VITE_PORT), boxenOptions));
-      if (config.command === "build") {
+      if (config.command === 'build') {
         startTime = dayjs(new Date());
       }
     },
     closeBundle() {
-      if (config.command === "build") {
+      if (config.command === 'build') {
         endTime = dayjs(new Date());
-        const format = dayjs.duration(endTime.diff(startTime)).format("mm分ss秒");
+        const format = dayjs.duration(endTime.diff(startTime)).format('mm分ss秒');
         console.log(
           boxen(
-            gradientString("cyan", "magenta").multiline(`🎉 恭喜打包完成（总用时${format}）`),
+            gradientString('cyan', 'magenta').multiline(`🎉 恭喜打包完成（总用时${format}）`),
             boxenOptions
           )
         );

build/optimize.ts

@@ -4,7 +4,7 @@
  * 尤其当您禁用浏览器缓存时（这种情况只应该发生在调试阶段）必须将对应模块加入到 include里，否则会遇到开发环境切换页面卡顿的问题（vite 会认为它是一个新的依赖包会重新加载并强制刷新页面），因为它既无法使用浏览器缓存，又没有在本地 node_modules/.vite 里缓存
  * 温馨提示：如果您使用的第三方库是全局引入，也就是引入到 src/main.ts 文件里，就不需要再添加到 include 里了，因为 vite 会自动将它们缓存到 node_modules/.vite
  */
-const include = ["vue", "vue-router", "dayjs", "axios", "pinia", "vue-types", "js-cookie"];
+const include = ['vue', 'vue-router', 'dayjs', 'axios', 'pinia', 'vue-types', 'js-cookie'];
 
 /**
  * 在预构建中强制排除的依赖项

build/plugins.ts

@@ -1,14 +1,15 @@
-import vue from "@vitejs/plugin-vue";
+import UnoCssIcons from '@unocss/preset-icons';
-import type { PluginOption } from "vite";
+import vue from '@vitejs/plugin-vue';
-import vueJsx from "@vitejs/plugin-vue-jsx";
+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 removeConsole from "vite-plugin-remove-console";
+import type { PluginOption } from 'vite';
-import { useCDN } from "./cdn";
+import removeConsole from 'vite-plugin-remove-console';
-import { viteConsoleLog } from "./info";
+import Inspector from 'vite-plugin-vue-inspector';
-import UnoCSS from "unocss/vite";
+
-import { presetIcons, presetUno } from "unocss";
+import { useCDN } from './cdn';
-import UnoCssIcons from "@unocss/preset-icons";
+import { viteConsoleLog } from './info';
+import { compressPack, report } from './utils';
 
 export const plugins = (mode): PluginOption[] => {
   return [
@@ -25,15 +26,14 @@ export const plugins = (mode): PluginOption[] => {
       presets: [
         presetIcons({
           extraProperties: {
-            display: "inline-block",
+            display: 'inline-block',
-            "vertical-align": "middle",
+            'vertical-align': 'middle',
           },
         }),
         UnoCssIcons({
-          // 其他选项
+          prefix: 'i-',
-          prefix: "i-",
           extraProperties: {
-            display: "inline-block",
+            display: 'inline-block',
           },
         }),
         presetUno(),

build/resolve.ts

@@ -1,10 +1,10 @@
-import { pathResolve } from "./utils";
+import { pathResolve } from './utils';
 
 export const resolve = () => {
   return {
     alias: {
-      "@": pathResolve("../src"),
+      '@': pathResolve('../src'),
-      "@build": pathResolve(),
+      '@build': pathResolve(),
     },
   };
 };

build/server.ts

@@ -1,31 +1,32 @@
-import type { ServerOptions } from "vite";
+import type { ServerOptions } from 'vite';
-import { wrapperEnv } from "./utils";
+
+import { wrapperEnv } from './utils';
 
 /* 开发服务配置 */
 export const server = (mode) => {
   const { VITE_PORT, VITE_APP_URL, VITE_STRICT_PORT } = wrapperEnv(mode);
-
+  console.log(VITE_STRICT_PORT);
   const options: ServerOptions = {
     strictPort: VITE_STRICT_PORT,
     port: VITE_PORT,
-    host: "0.0.0.0",
+    host: '0.0.0.0',
     open: true,
     cors: true,
     proxy: {
-      "/api": {
+      '/api': {
         target: VITE_APP_URL,
         changeOrigin: true,
-        rewrite: (path: string) => path.replace(/^\/admin/, "/api"),
+        rewrite: (path: string) => path.replace(/^\/admin/, '/api'),
       },
-      "/mock": {
+      '/mock': {
         target: VITE_APP_URL,
         changeOrigin: true,
-        rewrite: (path: string) => path.replace(/^\/mock/, "/mock"),
+        rewrite: (path: string) => path.replace(/^\/mock/, '/mock'),
       },
     },
     // 预热文件以提前转换和缓存结果，降低启动期间的初始页面加载时长并防止转换瀑布
     warmup: {
-      clientFiles: ["./index.html", "./src/{views,components}/*"],
+      clientFiles: ['./index.html', './src/{views,components}/*'],
     },
   };
 

build/utils.ts

@@ -1,8 +1,9 @@
-import { dirname, resolve } from "node:path";
+import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from "node:url";
+import { fileURLToPath } from 'node:url';
-import { loadEnv } from "vite";
+
-import { visualizer } from "rollup-plugin-visualizer";
+import { visualizer } from 'rollup-plugin-visualizer';
-import viteCompression from "vite-plugin-compression";
+import { loadEnv } from 'vite';
+import viteCompression from 'vite-plugin-compression';
 
 export const root: string = process.cwd();
 
@@ -11,11 +12,11 @@ export const root: string = process.cwd();
  * @param dir 路径片段，默认`build`
  * @param metaUrl 模块的完整`url`，如果在`build`目录外调用必传`import.meta.url`
  */
-export const pathResolve = (dir = ".", metaUrl = import.meta.url) => {
+export const pathResolve = (dir = '.', metaUrl = import.meta.url) => {
   // 当前文件目录的绝对路径
   const currentFileDir = dirname(fileURLToPath(metaUrl));
   // build 目录的绝对路径
-  const buildDir = resolve(currentFileDir, "build");
+  const buildDir = resolve(currentFileDir, 'build');
   // 解析的绝对路径
   const resolvedPath = resolve(currentFileDir, dir);
   // 检查解析的绝对路径是否在 build 目录内
@@ -33,15 +34,15 @@ 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);
 
   // 将变量转换指定类型
   for (const envName of Object.keys(env)) {
-    let realName = env[envName].replace(/\\n/g, "\n");
+    let realName = env[envName].replace(/\\n/g, '\n');
-    realName = realName === "true" ? true : realName === "false" ? false : realName;
+    realName = realName === 'true' ? true : realName === 'false' ? false : realName;
 
-    if (envName === "VITE_PORT") {
+    if (envName === 'VITE_PORT') {
       realName = Number(realName);
     }
     env[envName] = realName;
@@ -53,8 +54,8 @@ export const wrapperEnv = (mode, prefix = ""): ViteEnv => {
 /* 打包分析 */
 export const report = () => {
   const lifecycle = process.env.npm_lifecycle_event;
-  return lifecycle === "report"
+  return lifecycle === 'report'
-    ? visualizer({ open: true, brotliSize: true, filename: "report.html" })
+    ? visualizer({ open: true, brotliSize: true, filename: 'report.html' })
     : (null as any);
 };
 
@@ -62,5 +63,5 @@ export const report = () => {
 export const compressPack = (mode) => {
   const { VITE_COMPRESSION } = wrapperEnv(mode);
 
-  return VITE_COMPRESSION == "gzip" ? viteCompression({ threshold: 1024000 }) : null;
+  return VITE_COMPRESSION == 'gzip' ? viteCompression({ threshold: 1024000 }) : null;
 };

eslint.config.js

@@ -1,174 +1,177 @@
-import js from "@eslint/js";
+import js from '@eslint/js';
-import pluginVue from "eslint-plugin-vue";
+import pluginTypeScript from '@typescript-eslint/eslint-plugin';
-import * as parserVue from "vue-eslint-parser";
+import * as parserTypeScript from '@typescript-eslint/parser';
-import configPrettier from "eslint-config-prettier";
+import configPrettier from 'eslint-config-prettier';
-import pluginPrettier from "eslint-plugin-prettier";
+import { defineFlatConfig } from 'eslint-define-config';
-import { defineFlatConfig } from "eslint-define-config";
+import pluginPrettier from 'eslint-plugin-prettier';
-import * as parserTypeScript from "@typescript-eslint/parser";
+import eslintPluginSimpleImportSort from 'eslint-plugin-simple-import-sort';
-import pluginTypeScript from "@typescript-eslint/eslint-plugin";
+import pluginVue from 'eslint-plugin-vue';
+import * as parserVue from 'vue-eslint-parser';
 
 export default defineFlatConfig([
   {
     ...js.configs.recommended,
-    ignores: ["**/.*", "dist/*", "*.d.ts", "public/*", "src/assets/**", "src/**/iconfont/**"],
+    ignores: ['**/.*', 'dist/*', '*.d.ts', 'public/*', 'src/assets/**', 'src/**/iconfont/**'],
     languageOptions: {
       globals: {
         // index.d.ts
-        RefType: "readonly",
+        RefType: 'readonly',
-        EmitType: "readonly",
+        EmitType: 'readonly',
-        TargetContext: "readonly",
+        TargetContext: 'readonly',
-        ComponentRef: "readonly",
+        ComponentRef: 'readonly',
-        ElRef: "readonly",
+        ElRef: 'readonly',
-        ForDataType: "readonly",
+        ForDataType: 'readonly',
-        AnyFunction: "readonly",
+        AnyFunction: 'readonly',
-        PropType: "readonly",
+        PropType: 'readonly',
-        Writable: "readonly",
+        Writable: 'readonly',
-        Nullable: "readonly",
+        Nullable: 'readonly',
-        NonNullable: "readonly",
+        NonNullable: 'readonly',
-        Recordable: "readonly",
+        Recordable: 'readonly',
-        ReadonlyRecordable: "readonly",
+        ReadonlyRecordable: 'readonly',
-        Indexable: "readonly",
+        Indexable: 'readonly',
-        DeepPartial: "readonly",
+        DeepPartial: 'readonly',
-        Without: "readonly",
+        Without: 'readonly',
-        Exclusive: "readonly",
+        Exclusive: 'readonly',
-        TimeoutHandle: "readonly",
+        TimeoutHandle: 'readonly',
-        IntervalHandle: "readonly",
+        IntervalHandle: 'readonly',
-        Effect: "readonly",
+        Effect: 'readonly',
-        ChangeEvent: "readonly",
+        ChangeEvent: 'readonly',
-        WheelEvent: "readonly",
+        WheelEvent: 'readonly',
-        ImportMetaEnv: "readonly",
+        ImportMetaEnv: 'readonly',
-        Fn: "readonly",
+        Fn: 'readonly',
-        PromiseFn: "readonly",
+        PromiseFn: 'readonly',
-        ComponentElRef: "readonly",
+        ComponentElRef: 'readonly',
-        parseInt: "readonly",
+        parseInt: 'readonly',
-        parseFloat: "readonly"
+        parseFloat: 'readonly',
-      }
+      },
     },
     plugins: {
-      prettier: pluginPrettier
+      prettier: pluginPrettier,
+      'simple-import-sort': eslintPluginSimpleImportSort,
     },
     rules: {
       ...configPrettier.rules,
       ...pluginPrettier.configs.recommended.rules,
-      "no-debugger": "off",
+      'simple-import-sort/imports': 'error',
-      "no-unused-vars": [
+      'no-debugger': 'off',
-        "error",
+      'no-unused-vars': [
+        'error',
         {
-          argsIgnorePattern: "^_",
+          argsIgnorePattern: '^_',
-          varsIgnorePattern: "^_"
+          varsIgnorePattern: '^_',
-        }
+        },
       ],
-      "prettier/prettier": [
+      'prettier/prettier': [
-        "error",
+        'error',
         {
-          endOfLine: "auto"
+          endOfLine: 'auto',
-        }
+        },
-      ]
+      ],
-    }
+    },
   },
   {
-    files: ["**/*.?([cm])ts", "**/*.?([cm])tsx"],
+    files: ['**/*.?([cm])ts', '**/*.?([cm])tsx'],
     languageOptions: {
       parser: parserTypeScript,
       parserOptions: {
-        sourceType: "module"
+        sourceType: 'module',
-      }
+      },
     },
     plugins: {
-      "@typescript-eslint": pluginTypeScript
+      '@typescript-eslint': pluginTypeScript,
     },
     rules: {
       ...pluginTypeScript.configs.strict.rules,
-      "@typescript-eslint/ban-types": "off",
+      '@typescript-eslint/ban-types': 'off',
-      "@typescript-eslint/no-redeclare": "error",
+      '@typescript-eslint/no-redeclare': 'error',
-      "@typescript-eslint/ban-ts-comment": "off",
+      '@typescript-eslint/ban-ts-comment': 'off',
-      "@typescript-eslint/no-explicit-any": "off",
+      '@typescript-eslint/no-explicit-any': 'off',
-      "@typescript-eslint/prefer-as-const": "warn",
+      '@typescript-eslint/prefer-as-const': 'warn',
-      "@typescript-eslint/no-empty-function": "off",
+      '@typescript-eslint/no-empty-function': 'off',
-      "@typescript-eslint/no-non-null-assertion": "off",
+      '@typescript-eslint/no-non-null-assertion': 'off',
-      "@typescript-eslint/no-import-type-side-effects": "error",
+      '@typescript-eslint/no-import-type-side-effects': 'error',
-      "@typescript-eslint/prefer-literal-enum-member": "off",
+      '@typescript-eslint/prefer-literal-enum-member': 'off',
-      "@typescript-eslint/explicit-module-boundary-types": "off",
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
-      "@typescript-eslint/consistent-type-imports": [
+      '@typescript-eslint/consistent-type-imports': [
-        "error",
+        'error',
         {
           disallowTypeAnnotations: false,
-          fixStyle: "inline-type-imports"
+          fixStyle: 'inline-type-imports',
-        }
+        },
       ],
-      "@typescript-eslint/no-unused-vars": [
+      '@typescript-eslint/no-unused-vars': [
-        "error",
+        'error',
         {
-          argsIgnorePattern: "^_",
+          argsIgnorePattern: '^_',
-          varsIgnorePattern: "^_"
+          varsIgnorePattern: '^_',
-        }
+        },
-      ]
+      ],
-    }
+    },
   },
   {
-    files: ["**/*.d.ts"],
+    files: ['**/*.d.ts'],
     rules: {
-      "eslint-comments/no-unlimited-disable": "off",
+      'eslint-comments/no-unlimited-disable': 'off',
-      "import/no-duplicates": "off",
+      'import/no-duplicates': 'off',
-      "unused-imports/no-unused-vars": "off"
+      'unused-imports/no-unused-vars': 'off',
-    }
+    },
   },
   {
-    files: ["**/*.?([cm])js"],
+    files: ['**/*.?([cm])js'],
     rules: {
-      "@typescript-eslint/no-require-imports": "off",
+      '@typescript-eslint/no-require-imports': 'off',
-      "@typescript-eslint/no-var-requires": "off"
+      '@typescript-eslint/no-var-requires': 'off',
-    }
+    },
   },
   {
-    files: ["**/*.vue"],
+    files: ['**/*.vue'],
     languageOptions: {
       globals: {
-        $: "readonly",
+        $: 'readonly',
-        $$: "readonly",
+        $$: 'readonly',
-        $computed: "readonly",
+        $computed: 'readonly',
-        $customRef: "readonly",
+        $customRef: 'readonly',
-        $ref: "readonly",
+        $ref: 'readonly',
-        $shallowRef: "readonly",
+        $shallowRef: 'readonly',
-        $toRef: "readonly"
+        $toRef: 'readonly',
       },
       parser: parserVue,
       parserOptions: {
         ecmaFeatures: {
-          jsx: true
+          jsx: true,
+        },
+        extraFileExtensions: ['.vue'],
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module',
       },
-        extraFileExtensions: [".vue"],
-        parser: "@typescript-eslint/parser",
-        sourceType: "module"
-      }
     },
     plugins: {
-      vue: pluginVue
+      vue: pluginVue,
     },
-    processor: pluginVue.processors[".vue"],
+    processor: pluginVue.processors['.vue'],
     rules: {
       ...pluginVue.configs.base.rules,
-      ...pluginVue.configs["vue3-essential"].rules,
+      ...pluginVue.configs['vue3-essential'].rules,
-      ...pluginVue.configs["vue3-recommended"].rules,
+      ...pluginVue.configs['vue3-recommended'].rules,
-      "no-undef": "off",
+      'no-undef': 'off',
-      "no-unused-vars": "off",
+      'no-unused-vars': 'off',
-      "vue/no-v-html": "off",
+      'vue/no-v-html': 'off',
-      "vue/require-default-prop": "off",
+      'vue/require-default-prop': 'off',
-      "vue/require-explicit-emits": "off",
+      'vue/require-explicit-emits': 'off',
-      "vue/multi-word-component-names": "off",
+      'vue/multi-word-component-names': 'off',
-      "vue/no-setup-props-reactivity-loss": "off",
+      'vue/no-setup-props-reactivity-loss': 'off',
-      "vue/html-self-closing": [
+      'vue/html-self-closing': [
-        "error",
+        'error',
         {
           html: {
-            void: "always",
+            void: 'always',
-            normal: "always",
+            normal: 'always',
-            component: "always"
+            component: 'always',
+          },
+          svg: 'always',
+          math: 'always',
+        },
+      ],
+    },
   },
-          svg: "always",
-          math: "always"
-        }
-      ]
-    }
-  }
 ]);

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vehicle-monitor",
+  "name": "dashboard-template",
   "private": true,
   "version": "1.0.0",
   "type": "module",
@@ -23,7 +23,7 @@
     "boxen": "^8.0.1",
     "dayjs": "^1.11.13",
     "echarts": "^5.5.1",
-    "eslint": "^9.21.0",
+    "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-define-config": "^2.1.0",
     "eslint-plugin-prettier": "^5.2.1",
@@ -34,8 +34,6 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.3.1",
     "pinia-plugin-persistedstate": "^3.2.3",
-    "postcss": "^8.5.3",
-    "postcss-loader": "^8.1.1",
     "postcss-px-to-viewport-8-plugin": "^1.2.5",
     "prettier": "^3.3.3",
     "rimraf": "^5.0.10",
@@ -60,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

@@ -42,7 +42,7 @@ importers:
         specifier: ^5.5.1
         version: 5.6.0
       eslint:
-        specifier: ^9.21.0
+        specifier: ^9.9.1
         version: 9.21.0(jiti@2.4.2)
       eslint-config-prettier:
         specifier: ^9.1.0
@@ -74,12 +74,6 @@ 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:
-        specifier: ^8.5.3
-        version: 8.5.3
-      postcss-loader:
-        specifier: ^8.1.1
-        version: 8.1.1(postcss@8.5.3)(typescript@5.7.3)
       postcss-px-to-viewport-8-plugin:
         specifier: ^1.2.5
         version: 1.2.5
@@ -147,6 +141,9 @@ importers:
       '@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
@@ -1389,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}
@@ -1720,10 +1722,6 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
-  jiti@1.21.7:
-    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
-    hasBin: true
-
   jiti@2.4.2:
     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
@@ -2006,19 +2004,6 @@ packages:
     resolution: {integrity: sha512-5mMeb1TgLWoRKxZ0Xh9RZDfwUUIqRrcxO2uXO+Ezl1N5lqpCiSU5Gk6+1kZediBfBHFtPCdopr2UZ2SgUsKcgQ==}
     engines: {node: ^12 || >=14}
 
-  postcss-loader@8.1.1:
-    resolution: {integrity: sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==}
-    engines: {node: '>= 18.12.0'}
-    peerDependencies:
-      '@rspack/core': 0.x || 1.x
-      postcss: ^7.0.0 || ^8.0.1
-      webpack: ^5.0.0
-    peerDependenciesMeta:
-      '@rspack/core':
-        optional: true
-      webpack:
-        optional: true
-
   postcss-media-query-parser@0.2.3:
     resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
 
@@ -3846,6 +3831,10 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 9.1.0(eslint@9.21.0(jiti@2.4.2))
 
+  eslint-plugin-simple-import-sort@12.1.1(eslint@9.21.0(jiti@2.4.2)):
+    dependencies:
+      eslint: 9.21.0(jiti@2.4.2)
+
   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))
@@ -4193,8 +4182,6 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
-  jiti@1.21.7: {}
-
   jiti@2.4.2: {}
 
   js-cookie@3.0.5: {}
@@ -4442,15 +4429,6 @@ snapshots:
       postcss: 8.5.3
       postcss-safe-parser: 6.0.0(postcss@8.5.3)
 
-  postcss-loader@8.1.1(postcss@8.5.3)(typescript@5.7.3):
-    dependencies:
-      cosmiconfig: 9.0.0(typescript@5.7.3)
-      jiti: 1.21.7
-      postcss: 8.5.3
-      semver: 7.7.1
-    transitivePeerDependencies:
-      - typescript
-
   postcss-media-query-parser@0.2.3: {}
 
   postcss-px-to-viewport-8-plugin@1.2.5:

src/assets/styles/global.scss

@@ -0,0 +1,29 @@
+.dashed-circle {
+  width: 46px; /* 圆圈的宽度 */
+  height: 46px; /* 圆圈的高度 */
+  line-height: 40px;
+  font-size: 16px;
+  text-align: center;
+  border: 2px dashed; /* 边框宽度、样式和颜色 */
+  border-radius: 50%; /* 将元素变成圆形 */
+}
+
+/* 旋转动画 */
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 反向旋转动画 */
+@keyframes rotate-reverse {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(-360deg);
+  }
+}

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/components/AppMain/MainCenter.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import MainCenterItem from '@/layout/components/AppMain/components/MainCenterItem.vue';
+import MainCenterPercent from '@/layout/components/AppMain/components/MainCenterPercent.vue';
+</script>
+
+<template>
+  <div class="main-center flex-center">
+    <div class="h-[570px] flex-y-between">
+      <div class="main-center-title">
+        <h1 class="c-white">卡口车辆监控</h1>
+      </div>
+
+      <!-- 中间布局 -->
+      <div class="main-inner">
+        <div class="pos-relative">
+          <MainCenterItem :count="45" class="top-[37px] left-[40px] w-[175px]" door="西北门" />
+          <MainCenterPercent :percent="44" class="top-[73px] left-[193px]" />
+        </div>
+        <div class="pos-relative">
+          <MainCenterItem :count="67" class="top-[37px] left-[120px] w-[175px]" door="东北门" />
+          <MainCenterPercent :percent="25" class="top-[73px] right-[192px]" />
+        </div>
+        <div class="pos-relative">
+          <MainCenterItem :count="345" class="top-[45px] left-[34px] w-[175px]" door="西南门" />
+          <MainCenterPercent :percent="25" class="top-[40px] left-[193px]" />
+        </div>
+        <div class="pos-relative">
+          <MainCenterItem :count="145" class="top-[45px] left-[130px] w-[175px]" door="东南门" />
+          <MainCenterPercent :percent="44" class="top-[40px] left-[66px]" />
+        </div>
+
+        <div class="main-inner-center">
+          <div class="main-inner-middle flex-center">
+            <h1 class="c-primary-secondary">智能管控</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main-center {
+  width: 824px;
+  height: 650px;
+  background: url('@/assets/images/bg/bg-middle.png') no-repeat center;
+  background-size: cover;
+}
+
+// 中间部分标题
+.main-center-title {
+  height: 61px;
+  background: url('@/assets/images/bg/bg-main-title.png') no-repeat center;
+  background-size: cover;
+
+  h1 {
+    font-size: 22px;
+    text-align: center;
+  }
+}
+
+// 中间部分四个部分
+.main-inner {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  position: relative;
+  margin: 28px 0 77px 0;
+  width: 666px;
+  height: 400px;
+  background: url('@/assets/images/bg/bg-main-1.png') no-repeat center;
+  background-size: cover;
+
+  // 中心智能管控
+  .main-inner-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 138px;
+    height: 138px;
+
+    .main-inner-middle {
+      width: 100%;
+      height: 100%;
+      background: url('@/assets/images/bg/bg-main-center.png');
+      background-size: cover;
+      animation: rotate 30s linear infinite;
+    }
+
+    h1 {
+      width: 53px;
+      font-size: 19px;
+      text-align: center;
+      animation: rotate-reverse 30s linear infinite;
+    }
+  }
+}
+</style>

src/layout/components/AppMain/MainLeft.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="left mr-[20px]">
+    <div class="pt-[55px] pl-[25px]" style="transform: rotateY(180deg)">
+      <!-- 路况 -->
+      <div class="road-condition w-[218px] h-[59px]">
+        <h1 class="c-white">实时道路情况</h1>
+      </div>
+
+      <!-- 汽车列表 -->
+      <ul class="car-list mt-[32px]">
+        <li class="flex-x-around w-[330px] h-[60px]">
+          <img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
+          <p class="c-white">入卡口（西北门）</p>
+          <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
+        </li>
+        <li class="flex-x-around w-[330px] h-[60px]">
+          <img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
+          <p class="c-white">入卡口（东北门）</p>
+          <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
+        </li>
+        <li class="flex-x-around w-[330px] h-[60px]">
+          <img alt="car-1" src="@/assets/images/layout/car/car-2.png" />
+          <p class="c-white">入卡口（东北门）</p>
+          <span class="dashed-circle c-warning border-b-warning">拥堵</span>
+        </li>
+        <li class="flex-x-around w-[330px] h-[60px]">
+          <img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
+          <p class="c-white">入卡口（东南门）</p>
+          <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
+        </li>
+      </ul>
+
+      <!-- 建议 -->
+      <div class="suggest c-white">
+        <h5>车流量建议</h5>
+        <p>
+          高峰时段大量车流量容易造成拥堵，主要由XXX企业、XXX企业的车辆构成，
+          <span class="c-warning-secondary">可建议XXX企业向后延迟15min错峰入园。</span>
+          高峰时段大量车流量容易造成拥堵， 主要由XXX企业、XXX企业的车辆构成
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.left {
+  transform: rotateY(180deg);
+
+  .car-list {
+    li {
+      width: 330px;
+      height: 60px;
+      margin: 0 0 9px 0;
+      background: url('@/assets/images/bg/bg-frame.png') no-repeat center;
+      background-size: cover;
+    }
+  }
+
+  .suggest {
+    margin: 24px 0 0 0;
+    padding: 15px 14px 17px 20px;
+    width: 330px;
+    height: 157px;
+    font-size: 14px;
+    background: url('@/assets/images/bg/bg-suggest.png') no-repeat center;
+    background-size: cover;
+  }
+}
+</style>

src/layout/components/AppMain/MainRight.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="right ml-[20px]">
+    <div class="pt-[55px] pl-[25px]">
+      <!-- 路况 -->
+      <div class="road-condition w-[218px] h-[59px]">
+        <h1 class="c-white">近7天车流量概览</h1>
+      </div>
+
+      <!-- 汽车列表 -->
+      <ul class="car-list mt-[32px]">
+        <li class="flex-x-around w-[330px] h-[60px]">
+          <img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
+          <p class="c-white">入卡口（西北门）</p>
+          <span class="dashed-circle c-[#66FFFF] border-b-[#66FFFF]">畅通</span>
+        </li>
+        <li class="flex-x-around w-[330px] h-[60px]">
+          <img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
+          <p class="c-white">入卡口（东北门）</p>
+          <span class="dashed-circle c-[#66FFFF] border-b-[#66FFFF]">畅通</span>
+        </li>
+        <li class="flex-x-around w-[330px] h-[60px]">
+          <img alt="car-1" src="@/assets/images/layout/car/car-2.png" />
+          <p class="c-white">入卡口（东北门）</p>
+          <span class="dashed-circle c-[#FFBE44] border-b-[#FFBE44]">拥堵</span>
+        </li>
+        <li class="flex-x-around w-[330px] h-[60px]">
+          <img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
+          <p class="c-white">入卡口（东南门）</p>
+          <span class="dashed-circle c-[#66FFFF] border-b-[#66FFFF]">畅通</span>
+        </li>
+      </ul>
+
+      <!-- 建议 -->
+      <div class="suggest">
+        <h5>车流量建议</h5>
+        <p>
+          高峰时段大量车流量容易造成拥堵，主要由XXX企业、XXX企业的车辆构成，
+          <span class="c-warning-secondary">可建议XXX企业向后延迟15min错峰入园。</span>
+          高峰时段大量车流量容易造成拥堵， 主要由XXX企业、XXX企业的车辆构成
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/layout/components/AppMain/components/MainCenterItem.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+defineProps({
+  count: Number,
+  door: String,
+});
+</script>
+
+<template>
+  <div class="flex-y-between position-relative">
+    <h1 class="font-size-[34px] c-primary-secondary">{{ count }}</h1>
+    <div class="mt-[-12px] font-size-[16px] c-white">今日 进出车辆数/辆</div>
+    <div class="mt-[7px] font-size-[18px] c-primary">{{ door }}</div>
+    <div class="flex-center mt-[8px] c-primary">
+      <span class="float-left font-size-[14px] c-primary-secondary">查看</span>
+      <img
+        alt="arrow-item"
+        class="float-left h-[16px]"
+        src="@/assets/images/layout/arrow/arrow-item.png"
+      />
+    </div>
+  </div>
+</template>

src/layout/components/AppMain/components/MainCenterPercent.vue

@@ -0,0 +1,41 @@
+<script lang="tsx" setup>
+defineProps({
+  percent: Number,
+});
+
+import ArrowDown from '@/assets/images/layout/arrow/arrow-down.png';
+import ArrowUp from '@/assets/images/layout/arrow/arrow-up.png';
+
+const calPercentItem: Element = (percent: number) => {
+  return percent > 25 ? (
+    <div class="flex-center font-size-[20px] c-warning">
+      <img alt="arrow" class="mt-2 h-[23px]" src={ArrowUp} />
+      <span>{percent}%</span>
+    </div>
+  ) : (
+    <div class="flex-center font-size-[20px] c-primary-secondary">
+      <img alt="arrow" class="mt-2 h-[23px]" src={ArrowDown} />
+      <span>{percent}%</span>
+    </div>
+  );
+};
+</script>
+
+<template>
+  <div class="main-center-percent">
+    <div class="flex-y-around mt-[16px] mr-[13px] mb-[20px] ml-[13px]">
+      <component :is="calPercentItem(percent)" />
+      <span class="font-size-[15px] text-center c-info">环比</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main-center-percent {
+  position: absolute;
+  width: 86px;
+  height: 86px;
+  background: url('@/assets/images/bg/bg-main-2.png') no-repeat center;
+  background-size: cover;
+}
+</style>

src/layout/components/AppMain/index.vue

@@ -1,38 +1,36 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import MainCenter from '@/layout/components/AppMain/MainCenter.vue';
+import MainLeft from '@/layout/components/AppMain/MainLeft.vue';
+import MainRight from '@/layout/components/AppMain/MainRight.vue';
+</script>
 
 <template>
   <main class="mt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
-    <div class="left mr-[28px]">左边</div>
+    <MainLeft />
 
-    <div class="middle">中间</div>
+    <MainCenter />
 
-    <div class="right ml-[28px]">右边</div>
+    <MainRight />
   </main>
 </template>
 
 <style lang="scss" scoped>
-.layout-main {
-  margin: 0 auto;
-}
-
 .left,
 .right {
   width: 380px;
   height: 650px;
-  background: url("@/assets/images/bg-side.png") no-repeat center;
+  background: url('@/assets/images/bg/bg-side.png') no-repeat center;
   background-size: cover;
   transition: transform 0.8s;
   transform-style: preserve-3d;
-}
 
-.left {
+  ::v-deep(.road-condition) {
-  transform: rotateY(180deg);
+    background: url('@/assets/images/bg/bg-road-condition.png') no-repeat center;
-}
-
-.middle {
-  width: 824px;
-  height: 650px;
-  background: url("@/assets/images/bg-middle.png") no-repeat center;
     background-size: cover;
+
+    h1 {
+      font-size: 18px;
+    }
+  }
 }
 </style>

src/layout/components/Footer/index.vue

@@ -8,8 +8,8 @@
         :key="index"
         class="rectangle w-[138px] h-[125px] flex-y-center bg-[#0E094D55]"
       >
-        <img alt="车辆管理" src="@/assets/images/footer-39.png" />
+        <img alt="车辆管理" src="@/assets/images/layout/footer-39.png" />
-        <span class="c-white font-100">车辆管理</span>
+        <span class="text-white font-100">车辆管理</span>
       </li>
     </ul>
   </footer>

src/layout/components/NavBar/index.vue

@@ -2,20 +2,20 @@
 
 <template>
   <header class="h-[105px]">
-    <div class="time ml-[41px] c-[#027AFF]">2025年2月25日22:45:14</div>
+    <div class="time ml-[41px] c-primary">2025年2月25日22:45:14</div>
 
     <div class="title">
       <h1 class="c-white text-align-center">智慧智能监管中心</h1>
-      <h2 class="text-align-center">车辆监控中心</h2>
+      <h2 class="text-align-center c-primary-secondary">车辆监控中心</h2>
     </div>
 
     <div class="bar-op flex items-center h-[36px]">
       <ul class="float-left flex-x-around w-[148px]">
-        <li><img alt="icon-1" src="@/assets/images/icon-1.png" /></li>
+        <li><img alt="icon-1" src="@/assets/images/layout/icon-1.png" /></li>
-        <li><img alt="icon-2" src="@/assets/images/icon-2.png" /></li>
+        <li><img alt="icon-2" src="@/assets/images/layout/icon-2.png" /></li>
-        <li><img alt="icon-3" src="@/assets/images/icon-3.png" /></li>
+        <li><img alt="icon-3" src="@/assets/images/layout/icon-3.png" /></li>
       </ul>
-      <span class="float-left c-[#027AFF]">王菠萝</span>
+      <span class="float-left c-primary">王菠萝</span>
     </div>
   </header>
 </template>
@@ -23,7 +23,7 @@
 <style lang="scss" scoped>
 header {
   position: relative;
-  background: url("@/assets/images/bg-header.png") no-repeat center;
+  background: url('@/assets/images/bg/bg-header.png') no-repeat center;
   background-size: cover;
 }
 
@@ -42,7 +42,7 @@ header {
   h2 {
     font-size: 24px;
     line-height: 45px;
-    color: #00ffff;
+    color: var();
   }
 }
 

src/layout/index.vue

@@ -1,22 +1,35 @@
 <script lang="ts" setup>
-import AppMain from "@/layout/components/AppMain/index.vue";
+import AppMain from '@/layout/components/AppMain/index.vue';
-import NavBar from "@/layout/components/NavBar/index.vue";
+import Footer from '@/layout/components/Footer/index.vue';
-import Footer from "@/layout/components/Footer/index.vue";
+import NavBar from '@/layout/components/NavBar/index.vue';
 </script>
 
 <template>
   <div class="layout w-full h-full">
+    <div class="arrow left-[38px]">
+      <img alt="左箭头" src="@/assets/images/layout/arrow/arrow-left.png" />
+    </div>
     <NavBar />
     <AppMain />
     <Footer />
+    <div class="arrow right-[38px]">
+      <img alt="左箭头" src="@/assets/images/layout/arrow/arrow-right.png" />
+    </div>
   </div>
 </template>
 
 <style scoped>
 .layout {
+  position: relative;
   width: 100%;
   height: 100%;
-  background: url("@/assets/images/bg.png") no-repeat center;
+  background: url('@/assets/images/bg/bg.png') no-repeat center;
   background-size: cover;
 }
+
+.arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
 </style>

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/router/index.ts

@@ -38,7 +38,7 @@ const routes: RouteRecordRaw[] = [
     ],
   },
   {
-		path: '/404',
+    path: '/error',
     component: () => import('@/views/error-page/404.vue'),
     meta: { hidden: true },
   },

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useRouter } from "vue-router";
+import { useRouter } from 'vue-router';
 
 const router = useRouter();
 </script>
@@ -7,10 +7,10 @@ const router = useRouter();
 <template>
   <div class="page-container">
     <div class="pic-404">
-      <img alt="404" class="pic-404__parent" src="@/assets/images/404.png" />
+      <img alt="404" class="pic-404__parent" src="../../assets/images/error/404.png" />
-      <img alt="404" class="pic-404__child left" src="@/assets/images/404_cloud.png" />
+      <img alt="404" class="pic-404__child left" src="../../assets/images/error/404_cloud.png" />
-      <img alt="404" class="pic-404__child mid" src="@/assets/images/404_cloud.png" />
+      <img alt="404" class="pic-404__child mid" src="../../assets/images/error/404_cloud.png" />
-      <img alt="404" class="pic-404__child right" src="@/assets/images/404_cloud.png" />
+      <img alt="404" class="pic-404__child right" src="../../assets/images/error/404_cloud.png" />
     </div>
     <div class="bullshit">
       <div class="bullshit__oops">OOPS!</div>

src/views/redirect/index.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useRoute, useRouter } from "vue-router";
+import { useRoute, useRouter } from 'vue-router';
 
 const route = useRoute();
 const router = useRouter();
@@ -11,5 +11,5 @@ const router = useRouter();
 const { params, query } = route;
 const { path } = params;
 
-router.replace({ path: "/" + path, query });
+router.replace({ path: '/' + path, query });
 </script>

uno.config.ts

@@ -7,18 +7,24 @@ import {
   presetWebFonts,
   transformerDirectives,
   transformerVariantGroup,
-} from "unocss";
+} from 'unocss';
 
 export default defineConfig({
   shortcuts: {
-    "flex-center": "flex justify-center items-center",
+    'flex-center': 'flex justify-center items-center',
-    "flex-x-between": "flex items-center justify-between",
+    'flex-x-between': 'flex items-center justify-between',
-    "flex-x-around": "flex items-center justify-around",
+    'flex-x-around': 'flex items-center justify-around',
-    "flex-y-center": "flex flex-col flex-wrap justify-center items-center",
+    'flex-y-center': 'flex flex-col flex-wrap justify-center items-center',
+    'flex-y-between': 'flex flex-col flex-wrap justify-between items-center',
+    'flex-y-around': 'flex flex-col flex-wrap justify-around items-center',
   },
   theme: {
     colors: {
-      // ...
+      primary: '#027AFF',
+      'primary-secondary': '#00FFFF',
+      info: '#7CC1FF',
+      warning: '#FFBE44',
+      'warning-secondary': '#FEDB65',
     },
   },
   presets: [

vite.config.ts

@@ -1,16 +1,17 @@
-import { defineConfig } from "vite";
+import { defineConfig } from 'vite';
-import { plugins } from "./build/plugins";
+
-import { resolve } from "./build/resolve";
+import { buildEnv } from './build/buildEnv';
-import { buildEnv } from "./build/buildEnv";
+import { css } from './build/css';
-import { define } from "./build/define";
+import { define } from './build/define';
-import { root, wrapperEnv } from "./build/utils";
+import { exclude, include } from './build/optimize';
-import { server } from "./build/server";
+import { plugins } from './build/plugins';
-import { exclude, include } from "./build/optimize";
+import { resolve } from './build/resolve';
-import postCssPxToViewport8plugin from "postcss-px-to-viewport-8-plugin";
+import { server } from './build/server';
+import { root, wrapperEnv } from './build/utils';
 
 // https://vite.dev/config/
 export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
-  const env = wrapperEnv(mode, "VITE");
+  const env = wrapperEnv(mode, 'VITE');
 
   return {
     root,
@@ -19,34 +20,12 @@ export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
     plugins: plugins(mode),
     resolve: resolve(),
     esbuild: {
-      jsxFactory: "h",
+      jsxFactory: 'h',
-      jsxFragment: "Fragment",
+      jsxFragment: 'Fragment',
       jsxInject: "import { h } from 'vue';",
     },
-    css: {
+    logLevel: 'info',
-      postcss: {
+    css: css(mode),
-        plugins: [
-          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, // 横屏时使用的视口宽度
-          }),
-        ],
-      },
-    },
-    logLevel: "info",
     // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息
     clearScreen: false,
     build: buildEnv(),