diff --git a/.env b/.env index cfd4432..c7028d7 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ # 应用名称 -VITE_APP_TITLE="车辆监控中心" +VITE_APP_TITLE="Vite 模板" # 平台本地运行端口号 VITE_PORT=7000 @@ -13,11 +13,20 @@ VITE_APP_URL=http://localhost:8801 # 如果端口被占用会直接退出，而不是尝试下一个端口 VITE_STRICT_PORT=false -# 是否启用屏幕转vw适配 -VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN=true +# 是否启用屏幕转vw适配，可以选择 postcss-px-to-viewport-8-plugin || autofit +VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="autofit" # 是否在打包时使用cdn替换本地库 替换 true 不替换 false VITE_CDN=false +# 是否使用Mock +VITE_MOCK_DEV_SERVER=true + +# mock地址 +VITE_MOCK_BASE_API=/mock + +# 基础请求路径 +VITE_APP_BASE_API=/api + # 是否启用gzip压缩 VITE_COMPRESSION=gzip \ No newline at end of file diff --git a/.env.development b/.env.development index 5f2f00e..2d6d599 100644 --- a/.env.development +++ b/.env.development @@ -7,11 +7,20 @@ VITE_PUBLIC_PATH=/ # 跨域代理地址 VITE_APP_URL=http://localhost:8801 +# 基础请求路径 +VITE_APP_BASE_API=/api + +# mock地址 +VITE_MOCK_BASE_API=/mock + +# 是否使用Mock +VITE_MOCK_DEV_SERVER=true + # 如果端口被占用会直接退出，而不是尝试下一个端口 VITE_STRICT_PORT=false -# 是否启用屏幕转vw适配 -VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN=true +# 是否启用屏幕转vw适配，可以选择 postcss-px-to-viewport-8-plugin || autofit +VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="autofit" # 是否在打包时使用cdn替换本地库 替换 true 不替换 false VITE_CDN=false diff --git a/.env.production b/.env.production index 1bbd063..229e046 100644 --- a/.env.production +++ b/.env.production @@ -1,5 +1,5 @@ # 平台本地运行端口号 -VITE_PORT=8800 +VITE_PORT=7000 # 开发环境读取配置文件路径 VITE_PUBLIC_PATH=/ @@ -7,11 +7,20 @@ VITE_PUBLIC_PATH=/ # 跨域代理地址 VITE_APP_URL=http://localhost:8801 +# 基础请求路径 +VITE_APP_BASE_API=/api + +# 是否使用Mock +VITE_MOCK_DEV_SERVER=true + +# mock地址 +VITE_MOCK_BASE_API=/mock + # 如果端口被占用会直接退出，而不是尝试下一个端口 VITE_STRICT_PORT=false -# 是否启用屏幕转vw适配 -VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN=true +# 是否启用屏幕转vw适配，可以选择 postcss-px-to-viewport-8-plugin || autofit +VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="autofit" # 是否在打包时使用cdn替换本地库 替换 true 不替换 false VITE_CDN=false diff --git a/.prettierrc.js b/.prettierrc.js index 236e742..e8eb694 100644 --- a/.prettierrc.js +++ b/.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,9 +16,9 @@ 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, // 结尾添加分号 @@ -28,18 +28,18 @@ export default { // 缩进空格数，默认2个空格 tabWidth: 2, // 元素末尾是否加逗号，默认es5: ES5中的 objects, arrays 等会添加逗号，TypeScript 中的 type 后不加逗号 - trailingComma: 'es5', + trailingComma: "es5", // 指定缩进方式，空格或tab，默认false，即使用空格 useTabs: false, - // vue 文件中是否缩进 和 + - + - + diff --git a/src/plugins/autofit.ts b/src/plugins/autofit.ts new file mode 100644 index 0000000..59748d0 --- /dev/null +++ b/src/plugins/autofit.ts @@ -0,0 +1,18 @@ +import autofit from 'autofit.js'; + +/** 使用autoFit 做大屏*/ +export const autoFit = () => { + const hasAutoFit = import.meta.env.VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN; + + if (hasAutoFit !== 'autofit') return null; + + autofit.init({ + dh: 1080, + dw: 1920, + el: 'body', + resize: true, + transition: 0.49, + limit: 0.1, + allowScroll: false, + }); +}; diff --git a/src/plugins/index.ts b/src/plugins/index.ts index a6146e4..bab9d90 100644 --- a/src/plugins/index.ts +++ b/src/plugins/index.ts @@ -1,6 +1,7 @@ import type { App } from 'vue'; import { setupDirective } from '@/directive'; +import { autoFit } from '@/plugins/autofit'; import { useEcharts } from '@/plugins/echarts'; import { setUpRouter } from '@/router'; import { setupStore } from '@/store'; @@ -13,7 +14,8 @@ export default { setupStore(app); // 设置指令 setupDirective(app); - // 按需引入echarts + // 根据需求引入echarts useEcharts(app); + autoFit(); }, }; diff --git a/src/router/index.ts b/src/router/index.ts index d0826b9..f76bf52 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,48 +1,12 @@ import type { App } from 'vue'; import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-router'; -export const Layout = () => import('@/layout/index.vue'); +import error from '@/router/modules/error'; +import home from '@/router/modules/home'; +import remaining from '@/router/modules/remaining'; // 静态路由 -const routes: RouteRecordRaw[] = [ - { - path: '/redirect', - component: Layout, - meta: { hidden: true }, - children: [ - { - path: '/redirect/:path(.*)', - component: () => import('@/views/redirect/index.vue'), - }, - ], - }, - { - path: '/', - name: '/', - component: Layout, - // redirect: '/dashboard', - children: [ - // { - // path: 'dashboard', - // component: () => import('@/views/index.vue'), - // // 用于 keep-alive 功能，需要与 SFC 中自动推导或显式声明的组件名称一致 - // // 参考文档: https://cn.vuejs.org/guide/built-ins/keep-alive.html#include-exclude - // name: 'Dashboard', - // meta: { - // title: 'dashboard', - // icon: 'homepage', - // affix: true, - // keepAlive: true, - // }, - // }, - ], - }, - { - path: '/error', - component: () => import('@/views/error-page/404.vue'), - meta: { hidden: true }, - }, -]; +const routes: RouteRecordRaw[] = [...remaining, ...home, ...error]; const router = createRouter({ history: createWebHashHistory(), routes, diff --git a/src/router/modules/error.ts b/src/router/modules/error.ts new file mode 100644 index 0000000..0a1ec66 --- /dev/null +++ b/src/router/modules/error.ts @@ -0,0 +1,11 @@ +import type { RouteRecordRaw } from 'vue-router'; + +const routes: RouteRecordRaw[] = [ + { + path: '/error', + component: () => import('@/views/error-page/404.vue'), + meta: { hidden: true }, + }, +]; + +export default routes; diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts new file mode 100644 index 0000000..171334b --- /dev/null +++ b/src/router/modules/home.ts @@ -0,0 +1,34 @@ +import type { RouteRecordRaw } from 'vue-router'; + +import Layout from '@/layout/index.vue'; + +const routes: RouteRecordRaw[] = [ + { + path: '/', + name: '/', + component: Layout, + // redirect: '/dashboard', + children: [ + // { + // path: 'dashboard', + // component: () => import('@/views/index.vue'), + // // 用于 keep-alive 功能，需要与 SFC 中自动推导或显式声明的组件名称一致 + // // 参考文档: https://cn.vuejs.org/guide/built-ins/keep-alive.html#include-exclude + // name: 'Dashboard', + // meta: { + // title: 'dashboard', + // icon: 'homepage', + // affix: true, + // keepAlive: true, + // }, + // }, + ], + }, + { + path: '/smart-parking', + name: 'smartParking', + component: () => import('@/views/smart-parking/index.vue'), + }, +]; + +export default routes; diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts new file mode 100644 index 0000000..5e17fcb --- /dev/null +++ b/src/router/modules/remaining.ts @@ -0,0 +1,19 @@ +import type { RouteRecordRaw } from 'vue-router'; + +import Layout from '@/layout/index.vue'; + +const routes: RouteRecordRaw[] = [ + { + path: '/redirect', + component: Layout, + meta: { hidden: true }, + children: [ + { + path: '/redirect/:path(.*)', + component: () => import('@/views/redirect/index.vue'), + }, + ], + }, +]; + +export default routes; diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts new file mode 100644 index 0000000..7890df7 --- /dev/null +++ b/src/store/modules/user.ts @@ -0,0 +1,21 @@ +import { defineStore } from 'pinia'; + +import { user } from '@/api/test'; + +/** 用户信息 */ +export const useUserStore = defineStore('userStore', { + state() { + return { + userinfo: {}, + }; + }, + getters: {}, + actions: { + async getUserInfo() { + const response = await user(); + if (response.code == 200) { + this.userinfo = response.data; + } + }, + }, +}); diff --git a/src/types/global.d.ts b/src/types/global.d.ts index b27c3ca..73fc7cd 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -5,8 +5,11 @@ declare global { VITE_PORT: number; VITE_PUBLIC_PATH: string; VITE_APP_URL: string; + VITE_APP_BASE_API: string; VITE_STRICT_PORT: boolean; VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN: boolean; + VITE_MOCK_DEV_SERVER: boolean; + VITE_MOCK_BASE_API: string; VITE_CDN: boolean; VITE_COMPRESSION: string; } diff --git a/src/types/request/index.d.ts b/src/types/request/index.d.ts new file mode 100644 index 0000000..b8e4f79 --- /dev/null +++ b/src/types/request/index.d.ts @@ -0,0 +1,6 @@ +// 基础后端返回内容 +export interface BaseResult { + code: number; + data: T; + message: string; +} diff --git a/src/layout/components/Footer/index.vue b/src/views/smart-parking/components/footer/index.vue similarity index 86% rename from src/layout/components/Footer/index.vue rename to src/views/smart-parking/components/footer/index.vue index 37f554f..39d3fd2 100644 --- a/src/layout/components/Footer/index.vue +++ b/src/views/smart-parking/components/footer/index.vue @@ -4,7 +4,7 @@