From 24588022102f181f8844561505d35dc394675ec8 Mon Sep 17 00:00:00 2001 From: Bunny <1319900154@qq.com> Date: Wed, 26 Feb 2025 11:23:04 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E6=B7=BB=E5=8A=A0=E5=A4=A7=E5=B1=8F?= =?UTF-8?q?=E6=8F=92=E4=BB=B6=E5=92=8C=E6=A0=BC=E5=BC=8F=E5=8C=96=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 3 + .env.development | 3 + .env.production | 3 + .prettierrc.js | 88 ++++---- build/buildEnv.ts | 93 ++++---- build/cdn.ts | 109 +++++----- build/css.ts | 39 ++++ build/define.ts | 11 +- build/info.ts | 78 +++---- build/plugins.ts | 72 +++---- build/resolve.ts | 12 +- build/server.ts | 53 ++--- build/utils.ts | 67 +++--- eslint.config.js | 339 ++++++++++++++--------------- package.json | 4 + pnpm-lock.yaml | 121 +++++------ src/App.vue | 14 +- src/components/HelloWorld.vue | 25 ++- src/directive/index.ts | 2 +- src/layout/index.vue | 41 ++-- src/main.ts | 9 +- src/plugins/index.ts | 17 +- src/router/index.ts | 84 ++++---- src/store/index.ts | 4 +- src/types/global.d.ts | 21 +- src/utils/nprogress.ts | 23 +- src/utils/request.ts | 105 ++++----- src/views/error-page/404.vue | 395 +++++++++++++++++----------------- src/views/redirect/index.vue | 2 +- stylelint.config.js | 98 ++++----- uno.config.ts | 59 ++--- vite.config.ts | 51 ++--- 32 files changed, 1056 insertions(+), 989 deletions(-) create mode 100644 build/css.ts diff --git a/.env b/.env index 6b20d11..4045c4a 100644 --- a/.env +++ b/.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 diff --git a/.env.development b/.env.development index d8b465e..160e4e2 100644 --- a/.env.development +++ b/.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 diff --git a/.env.production b/.env.production index 0ed6804..a694b76 100644 --- a/.env.production +++ b/.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 diff --git a/.prettierrc.js b/.prettierrc.js index 154480d..e8eb694 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,46 +1,46 @@ -module.exports = { - // (x)=>{},单个参数箭头函数是否显示小括号。(always:始终显示;avoid:省略括号。默认:always) - arrowParens: "always", - // 开始标签的右尖括号是否跟随在最后一行属性末尾，默认false - bracketSameLine: false, - // 对象字面量的括号之间打印空格 (true - Example: { foo: bar } ; false - Example: {foo:bar}) - bracketSpacing: true, - // 是否格式化一些文件中被嵌入的代码片段的风格(auto|off;默认auto) - embeddedLanguageFormatting: "auto", - // 指定 HTML 文件的空格敏感度 (css|strict|ignore;默认css) - htmlWhitespaceSensitivity: "ignore", - // 当文件已经被 Prettier 格式化之后，是否会在文件顶部插入一个特殊的 @format 标记，默认false - insertPragma: false, - // 在 JSX 中使用单引号替代双引号，默认false - jsxSingleQuote: false, - // 每行最多字符数量，超出换行(默认100) - printWidth: 100, - // 超出打印宽度 (always | never | preserve ) - proseWrap: "preserve", - // 对象属性是否使用引号(as-needed | consistent | preserve;默认as-needed:对象的属性需要加引号才添加;) - quoteProps: "as-needed", - // 是否只格式化在文件顶部包含特定注释(@prettier| @format)的文件，默认false - requirePragma: false, - // 结尾添加分号 - semi: true, - // 使用单引号 (true:单引号;false:双引号) - singleQuote: false, - // 缩进空格数，默认2个空格 - tabWidth: 2, - // 元素末尾是否加逗号，默认es5: ES5中的 objects, arrays 等会添加逗号，TypeScript 中的 type 后不加逗号 - trailingComma: "es5", - // 指定缩进方式，空格或tab，默认false，即使用空格 - useTabs: false, - // vue 文件中是否缩进 diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue index b58e52b..cffd4c5 100644 --- a/src/components/HelloWorld.vue +++ b/src/components/HelloWorld.vue @@ -1,9 +1,9 @@ - diff --git a/src/directive/index.ts b/src/directive/index.ts index 7007860..ec2ce6a 100644 --- a/src/directive/index.ts +++ b/src/directive/index.ts @@ -2,5 +2,5 @@ import type { App } from 'vue'; // 全局注册 directive export function setupDirective(app: App) { - // 使 v-hasPerm 在所有组件中都可用 + // 使 v-hasPerm 在所有组件中都可用 } diff --git a/src/layout/index.vue b/src/layout/index.vue index 1e544d7..5399073 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -1,26 +1,27 @@ diff --git a/src/main.ts b/src/main.ts index 062319e..27f5259 100644 --- a/src/main.ts +++ b/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'); diff --git a/src/plugins/index.ts b/src/plugins/index.ts index c11597a..6b23b4a 100644 --- a/src/plugins/index.ts +++ b/src/plugins/index.ts @@ -1,15 +1,16 @@ import type { App } from 'vue'; + import { setupDirective } from '@/directive'; import { setUpRouter } from '@/router'; import { setupStore } from '@/store'; export default { - install(app: App) { - // 设置路由 - setUpRouter(app); - // 设置状态管理 - setupStore(app); - // 设置指令 - setupDirective(app); - }, + install(app: App) { + // 设置路由 + setUpRouter(app); + // 设置状态管理 + setupStore(app); + // 设置指令 + setupDirective(app); + }, }; diff --git a/src/router/index.ts b/src/router/index.ts index ac3dcef..c0ae6f7 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -5,57 +5,57 @@ export const Layout = () => import('@/layout/index.vue'); // 静态路由 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: '/404', - component: () => import('@/views/error-page/404.vue'), - meta: { hidden: true }, - }, + { + 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: '/404', + component: () => import('@/views/error-page/404.vue'), + meta: { hidden: true }, + }, ]; const router = createRouter({ - history: createWebHashHistory(), - routes, - scrollBehavior: () => ({ x: 0, y: 0 }), + history: createWebHashHistory(), + routes, + scrollBehavior: () => ({ x: 0, y: 0 }), }); /** 全局注册 router */ export const setUpRouter = (app: App) => { - app.use(router); + app.use(router); }; /** 重置路由 */ export const resetRouter = () => { - router.replace({ path: '/' }).then(); + router.replace({ path: '/' }).then(); }; export default router; diff --git a/src/store/index.ts b/src/store/index.ts index 24ed9e4..899e282 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,9 +1,9 @@ -import type { App } from 'vue'; import { createPinia } from 'pinia'; +import type { App } from 'vue'; const store = createPinia(); // 全局注册 store export function setupStore(app: App) { - app.use(store); + app.use(store); } diff --git a/src/types/global.d.ts b/src/types/global.d.ts index a8afb09..b27c3ca 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -1,12 +1,13 @@ declare global { - /* 环境便配置 */ - declare interface ViteEnv { - VITE_APP_TITLE: string; - VITE_PORT: number; - VITE_PUBLIC_PATH: string; - VITE_APP_URL: string; - VITE_STRICT_PORT: boolean; - VITE_CDN: boolean; - VITE_COMPRESSION: string; - } + /* 环境便配置 */ + declare interface ViteEnv { + VITE_APP_TITLE: string; + VITE_PORT: number; + 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; + } } diff --git a/src/utils/nprogress.ts b/src/utils/nprogress.ts index e9ba431..608e7da 100644 --- a/src/utils/nprogress.ts +++ b/src/utils/nprogress.ts @@ -1,18 +1,19 @@ -import NProgress from 'nprogress'; import 'nprogress/nprogress.css'; +import NProgress from 'nprogress'; + // 进度条 NProgress.configure({ - // 动画方式 - easing: 'ease', - // 递增进度条的速度 - speed: 500, - // 是否显示加载ico - showSpinner: false, - // 自动递增间隔 - trickleSpeed: 200, - // 初始化时的最小百分比 - minimum: 0.3, + // 动画方式 + easing: 'ease', + // 递增进度条的速度 + speed: 500, + // 是否显示加载ico + showSpinner: false, + // 自动递增间隔 + trickleSpeed: 200, + // 初始化时的最小百分比 + minimum: 0.3, }); export default NProgress; diff --git a/src/utils/request.ts b/src/utils/request.ts index 7944688..79ad1bf 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -1,70 +1,71 @@ 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 => { - return qs.stringify(params); - }, + baseURL: import.meta.env.VITE_APP_BASE_API, + timeout: 50000, + headers: { 'Content-Type': 'application/json;charset=utf-8' }, + paramsSerializer: (params) => { + return qs.stringify(params); + }, }); // 请求拦截器 service.interceptors.request.use( - (config: InternalAxiosRequestConfig) => { - const accessToken = localStorage.getItem(TOKEN_KEY); - if (accessToken) { - config.headers.Authorization = accessToken; - } - return config; - }, - (error: any) => { - return Promise.reject(error); - }, + (config: InternalAxiosRequestConfig) => { + const accessToken = localStorage.getItem(TOKEN_KEY); + if (accessToken) { + config.headers.Authorization = accessToken; + } + return config; + }, + (error: any) => { + return Promise.reject(error); + } ); // 响应拦截器 service.interceptors.response.use( - (response: AxiosResponse) => { - // 检查配置的响应类型是否为二进制类型（'blob' 或 'arraybuffer'）, 如果是，直接返回响应对象 - if (response.config.responseType === 'blob' || response.config.responseType === 'arraybuffer') { - return response; - } + (response: AxiosResponse) => { + // 检查配置的响应类型是否为二进制类型（'blob' 或 'arraybuffer'）, 如果是，直接返回响应对象 + if (response.config.responseType === 'blob' || response.config.responseType === 'arraybuffer') { + return response; + } - const { code, data, msg } = response.data; - if (code === ResultEnum.SUCCESS) { - return data; - } + const { code, data, msg } = response.data; + if (code === ResultEnum.SUCCESS) { + return data; + } - ElMessage.error(msg || '系统出错'); - return Promise.reject(new Error(msg || 'Error')); - }, - (error: any) => { - // 异常处理 - if (error.response.data) { - const { code, msg } = error.response.data; - if (code === ResultEnum.TOKEN_INVALID) { - ElNotification({ - title: '提示', - message: '您的会话已过期，请重新登录', - type: 'info', - }); - useUserStoreHook() - .resetToken() - .then(() => { - location.reload(); - }); - } else { - ElMessage.error(msg || '系统出错'); - } - } - return Promise.reject(error.message); - }, + ElMessage.error(msg || '系统出错'); + return Promise.reject(new Error(msg || 'Error')); + }, + (error: any) => { + // 异常处理 + if (error.response.data) { + const { code, msg } = error.response.data; + if (code === ResultEnum.TOKEN_INVALID) { + ElNotification({ + title: '提示', + message: '您的会话已过期，请重新登录', + type: 'info', + }); + useUserStoreHook() + .resetToken() + .then(() => { + location.reload(); + }); + } else { + ElMessage.error(msg || '系统出错'); + } + } + return Promise.reject(error.message); + } ); // 导出 axios 实例 diff --git a/src/views/error-page/404.vue b/src/views/error-page/404.vue index f8e1007..98dcb87 100644 --- a/src/views/error-page/404.vue +++ b/src/views/error-page/404.vue @@ -5,228 +5,233 @@ const router = useRouter(); diff --git a/src/views/redirect/index.vue b/src/views/redirect/index.vue index 56f37a6..9a1288a 100644 --- a/src/views/redirect/index.vue +++ b/src/views/redirect/index.vue @@ -1,5 +1,5 @@