Initialize by clx-cli

b460c0c5 · zhangchao · b460c0c5 · b460c0c5 · b460c0c5 · b460c0c5
--- a/.env
+++ b/.env
+# 默认标题
+VITE_APP_TITLE=TEST_VUE3_VITE
\ No newline at end of file
--- a/.env.development
+++ b/.env.development
+# 开发环境
+NODE_ENV=development
+
+# 接口请求地址
+VITE_APP_BASE_URL=https://dapi.clxkj.cn:8088/
+
+# 静态资源地址
+VITE_APP_STATIC_URL=http://clx-dev.oss-cn-beijing.aliyuncs.com
+
+# 构建资源公共路径
+VITE_PUBLIC_PATH=/
\ No newline at end of file
--- a/.env.pre
+++ b/.env.pre
+# 预生产环境
+NODE_ENV=pre
+
+# 接口请求地址
+VITE_APP_BASE_URL=https://papi.clxkj.cn:8088/
+
+# 静态资源地址
+VITE_APP_STATIC_URL=http://clx-dev.oss-cn-beijing.aliyuncs.com
+
+# 构建资源公共路径
+VITE_PUBLIC_PATH=/
\ No newline at end of file
--- a/.env.production
+++ b/.env.production
+# 生产环境
+NODE_ENV=production
+
+# 接口请求地址
+VITE_APP_BASE_URL=https://api1.91msl.com:8088/
+
+# 静态资源地址
+VITE_APP_STATIC_URL=http://clx-prod.oss-cn-beijing.aliyuncs.com
+
+# 构建资源公共路径
+VITE_PUBLIC_PATH=/
\ No newline at end of file
--- a/.env.test
+++ b/.env.test
+# 测试环境
+NODE_ENV=test
+
+# 接口请求地址
+VITE_APP_BASE_URL=https://api.clxkj.cn:8088/
+
+# 静态资源地址
+VITE_APP_STATIC_URL=http://clx-dev.oss-cn-beijing.aliyuncs.com
+
+# 构建资源公共路径
+VITE_PUBLIC_PATH=/
\ No newline at end of file
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "airbnb-base",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript",
+    "@vue/eslint-config-prettier",
+    "vue-global-api",
+  ],
+  overrides: [
+    {
+      files: ["cypress/e2e/**.{cy,spec}.{js,ts,jsx,tsx}"],
+      extends: ["plugin:cypress/recommended"],
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    parser: "@typescript-eslint/parser",
+    sourceType: "module",
+  },
+  plugins: ["vue", "@typescript-eslint"],
+  rules: {
+    // 关闭名称校验
+    "vue/multi-word-component-names": "off",
+    "import/no-unresolved": "off",
+    "import/extensions": "off",
+    "import/no-absolute-path": "off",
+    "import/no-extraneous-dependencies": "off",
+    "vue/no-multiple-template-root": "off",
+    "no-param-reassign": [
+      "error",
+      {
+        props: true,
+        ignorePropertyModificationsFor: ["state", "config"],
+      },
+    ],
+  },
+};
--- a/.gitignore
+++ b/.gitignore
+.DS_Store
+node_modules
+dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.prettierrc.json
+++ b/.prettierrc.json
+{}
\ No newline at end of file
--- a/README.md
+++ b/README.md
+# vue3 + typeScript + vite 项目
+## 环境依赖
+已安装 16.0 或更高版本的 Node.js
+
+### 推荐使用 [pnpm](https://www.pnpm.cn/installation) 命令
+1. 执行 `npm install -g pnpm` 全局安装pnpm
+2. 执行 `pnpm install` 安装依赖
+3. 执行 `pnpm dev` 启动项目
+4. 项目启动访问 http://127.0.0.1:5173/ 查看
+
+## 代码格式化
+1. 执行 `pnpm lint` 会自动格式化项目中代码，代码风格 “[airbnb-base](https://github.com/airbnb/javascript)”
+2. 格式化不了的控制台会有报错信息及不规范文件索引
+
+## 打包
+1. `pnpm build-development` 开发环境
+2. `pnpm build-test` 测试环境
+3. `pnpm build-pre` 预发布环境
+4. `pnpm build-production` 生产环境
+### 打包后预览
+执行 `pnpm preview` 访问 http://127.0.0.1:4173/ 预览
+
+## 代码提交格式
+```txt
+提交格式  <type>[optional scope]: <description>
+说明：
+● type ：用于表明我们这次提交的改动类型。
+● optional scope：可选，用于标识此次提交主要涉及到代码中哪个模块。
+● description：一句话描述此次提交的主要内容，做到言简意赅。
+```
+
+## 目录说明
+```txt
+    |-- .env                                *全局默认，任何环境都加载合并*
+    |-- .env.development                    *开发环境下的配置文件*
+    |-- .env.pre                            *预发布环境下的配置文件*
+    |-- .env.production                     *生产环境下的配置文件*
+    |-- .env.test                           *测试环境下的配置文件*
+    |-- .eslintrc.cjs                       *eslint配置文件*
+    |-- .gitignore                          *git 提交忽略文件*
+    |-- .prettierrc.json                    *格式化配置文件*
+    |-- components.d.ts                     *自动生成： 自动引入组件（包括项目自身的组件和各种组件库中的组件）类型文件，不需要手动编写import { Button } from 'ant-design-vue'这样的代码了*
+    |-- cypress.config.ts                   *单元测试配置文件*
+    |-- env.d.ts                            *全局类型文件*
+    |-- index.html      
+    |-- package.json
+    |-- pnpm-lock.yaml                      *pnpm依赖版本文件*
+    |-- postcss.config.js                   *postcss配置文件*
+    |-- README.md
+    |-- tailwind.config.js                  *tailwind配置文件*
+    |-- tsconfig.app.json                   *应用的ts配置文件*
+    |-- tsconfig.config.json                *ts的配置文件*
+    |-- tsconfig.json                       *typeScript配置文件*
+    |-- tsconfig.vitest.json                **
+    |-- vite.config.ts                      *vite配置文件*
+    |-- .vscode
+    |   |-- extensions.json
+    |-- cypress                             *执行单元测试后的文件夹*
+    |-- dist                                *打包后文件夹*
+    |-- public                              *公开的静态文件夹*
+    |   |-- favicon.ico
+    |-- src
+        |-- App.vue
+        |-- auto-imports.d.ts               *自动生成： 按需自动导入Vue/Vue Router等官方Api的插件, 不需要手动编写import {xxx} from vue*
+        |-- main.ts                         *主入口文件*
+        |-- api                             *api文件夹-统一在此文件夹下*
+        |   |-- index.ts                    *api请求封装文件 get, post...*
+        |   |-- user.ts                     *示例：user api请求service*
+        |-- assets                          *项目静态资源文件夹*
+        |   |-- icons                       *SvgIcon 组件使用的精灵图文件夹 注：只能是svg文件*
+        |       |-- logo.svg
+        |       |-- tooling.svg
+        |-- components                      *项目组件文件夹*
+        |   |-- index.ts                    *组件入口文件-所有components中组件均需在此文件中引入*
+        |   |-- sys                         *项目本地自定义组件的文件夹*
+        |       |-- SvgIcon.vue
+        |-- layouts                         *页面布局Layout文件夹*
+        |   |-- BlankLayout.vue             *空白layout*
+        |   |-- default                     *默认基础layout 包含页头、页尾，可扩展...*
+        |       |-- index.vue               *默认基础layout 入口文件*
+        |       |-- components              *默认基础layout 子组件文件夹*
+        |           |-- DefaultFooter.vue
+        |           |-- DefaultHeader.vue
+        |-- libs                            *项目工具库文件夹*
+        |   |-- emitter.ts                  *mitt库-事件总线对象-使用时均从此文件引入即可*
+        |   |-- request                     *axios请求*
+        |   |   |-- index.ts                *axios请求主文件*
+        |   |   |-- shims.d.ts
+        |   |-- utils                       *项目工具文件夹*
+        |       |-- baseApiUrl.ts           *根据环境变化获取api地址*
+        |       |-- baseStaticUrl.ts        *根据环境变化获取静态资源地址 OSS*
+        |       |-- index.ts                *工具主入口文件-自定义工具文件-需在此文件引入导出*
+        |       |-- setTitle.ts             *设置网页title*
+        |-- pages                           *项目页面文件夹-路由生成默认文件夹*
+        |   |-- index.vue                   *主文件*
+        |   |-- [...all].vue                *404页面*
+        |   |-- home                        **
+        |   |   |-- index.vue
+        |   |-- user                        *用户相关页面*
+        |       |-- index.vue
+        |       |-- login
+        |       |   |-- index.vue
+        |       |-- regist
+        |           |-- index.vue
+        |-- router                          *项目router目录*
+        |   |-- index.ts                    *主配置文件*
+        |   |-- permission.ts               *路由拦截文件*
+        |-- stores                          *stores文件*
+        |   |-- counter.ts
+        |   |-- user.ts
+        |-- hooks                           *hooks文件夹*
+        |-- styles                          *css样式文件夹*
+            |-- base.css
+            |-- main.css
+            |-- tailwind.css                *tailwind 样式文件*
+
+```
--- a/components.d.ts
+++ b/components.d.ts
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SvgIcon: typeof import('./src/components/sys/SvgIcon.vue')['default']
+  }
+}
--- a/cypress.config.ts
+++ b/cypress.config.ts
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
+    baseUrl: "http://localhost:4173",
+  },
+});
--- a/cypress/e2e/example.cy.ts
+++ b/cypress/e2e/example.cy.ts
+// https://docs.cypress.io/api/introduction/api.html
+
+describe("My First Test", () => {
+  it("visits the app root url", () => {
+    cy.visit("/");
+    cy.contains("h1", "You did it!");
+  });
+});
--- a/cypress/e2e/tsconfig.json
+++ b/cypress/e2e/tsconfig.json
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["./**/*", "../support/**/*"],
+  "compilerOptions": {
+    "isolatedModules": false,
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  }
+}
--- a/cypress/fixtures/example.json
+++ b/cypress/fixtures/example.json
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+export {};
--- a/cypress/support/e2e.ts
+++ b/cypress/support/e2e.ts
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
--- a/env.d.ts
+++ b/env.d.ts
+/// <reference types="vite/client" />
+declare module "*.vue" {
+  import { ComponentOptions } from "vue";
+
+  const componentOptions: ComponentOptions;
+  export default componentOptions;
+}
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
+{
+  "name": "v",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check build-only",
+    "preview": "vite preview --port 4173",
+    "test:unit": "vitest --environment jsdom",
+    "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'",
+    "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'",
+    "build-only": "vite build",
+    "build-test": "run-p type-check && vite build --mode test",
+    "build-pre": "run-p type-check && vite build --mode pre",
+    "build-production": "run-p type-check && vite build --mode production",
+    "build-development": "run-p type-check && vite build --mode development",
+    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "engines": {
+    "node": ">=16.0"
+  },
+  "dependencies": {
+    "element-plus": "^2.2.17",
+    "stylelint-scss": "3.20.1",
+    "axios": "^0.27.2",
+    "mitt": "^3.0.0",
+    "nprogress": "^0.2.0",
+    "pinia": "^2.0.21",
+    "store": "^2.0.12",
+    "tailwindcss": "^3.1.8",
+    "ua-parser-js": "^1.0.2",
+    "vue": "^3.2.38",
+    "vue-router": "^4.1.5"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@types/jsdom": "^20.0.0",
+    "@types/node": "^16.11.56",
+    "@types/nprogress": "^0.2.0",
+    "@types/store": "^2.0.2",
+    "@types/ua-parser-js": "^0.7.36",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/test-utils": "^2.0.2",
+    "@vue/tsconfig": "^0.1.3",
+    "autoprefixer": "^10.4.12",
+    "cypress": "^10.7.0",
+    "eslint": "^8.22.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "jsdom": "^20.0.0",
+    "less": "^4.1.3",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.16",
+    "prettier": "^2.7.1",
+    "start-server-and-test": "^1.14.0",
+    "typescript": "~4.7.4",
+    "unplugin-auto-import": "^0.11.2",
+    "unplugin-vue-components": "^0.22.7",
+    "vite": "^3.0.9",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-pages": "^0.26.0",
+    "vite-plugin-pwa": "^0.13.1",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-layouts": "^0.7.0",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vitest": "^0.23.0",
+    "vue-global-api": "^0.4.1",
+    "vue-tsc": "^0.40.7",
+    "workbox-window": "^6.5.4"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
+// eslint-disable-next-line no-undef
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
+<script setup lang="ts">
+import { RouterLink, RouterView } from "vue-router";
+</script>
+
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
--- a/src/api/index.ts
+++ b/src/api/index.ts
+import type { AxiosRequestConfig } from "axios";
+import request, { useRequest } from "@/libs/request";
+
+type ResponseType<T> = {
+  code: number;
+  data: T;
+  msg: string;
+  pageNum: number;
+  total: number;
+};
+
+export default function requestAxios() {
+  return request<any>({
+    method: "get",
+    url: "/api",
+  });
+}
+
+class Ajax {
+  static get<T>(
+    url: string,
+    data: { [args: string]: any },
+    axiosConfig: AxiosRequestConfig = {}
+  ) {
+    return useRequest<ResponseType<T>>({
+      method: "get",
+      url,
+      data,
+      ...axiosConfig,
+    }).content;
+  }
+
+  static post<T>(
+    url: string,
+    data: { [args: string]: any },
+    axiosConfig: AxiosRequestConfig = {}
+  ) {
+    return useRequest<ResponseType<T>>({
+      method: "post",
+      url,
+      data,
+      ...axiosConfig,
+    }).content;
+  }
+
+  static put<T>(
+    url: string,
+    data: { [args: string]: any },
+    axiosConfig: AxiosRequestConfig = {}
+  ) {
+    return useRequest<ResponseType<T>>({
+      method: "put",
+      url,
+      data,
+      ...axiosConfig,
+    }).content;
+  }
+
+  static delete<T>(
+    url: string,
+    data: { [args: string]: any },
+    axiosConfig: AxiosRequestConfig = {}
+  ) {
+    return useRequest<ResponseType<T>>({
+      method: "delete",
+      url,
+      data,
+      ...axiosConfig,
+    }).content;
+  }
+}
+export const clxAjax = Ajax;
--- a/src/api/user.ts
+++ b/src/api/user.ts
+import type { UserInfo } from "@/stores/user";
+import { clxAjax } from ".";
+
+/** 登录接口 */
+export const loginRequset = () => {
+  return clxAjax.post<UserInfo>("user-service/owner/user/login", {
+    captcha: "11",
+    mobile: "12222222222",
+    platform: 6,
+    pwd: "e10adc3949ba59abbe56e057f20f883e",
+  });
+};
+
+export default {
+  loginRequset,
+};
--- a/src/assets/icons/logo.svg
+++ b/src/assets/icons/logo.svg
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
\ No newline at end of file
--- a/src/assets/icons/tooling.svg
+++ b/src/assets/icons/tooling.svg
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
+    <path d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z" fill="currentColor"></path>
+</svg>
\ No newline at end of file
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
--- a/src/components/index.ts
+++ b/src/components/index.ts
+import SvgIcon from "@/components/sys/SvgIcon.vue";
+
+export const components = [SvgIcon];
+
+export const plugins = [];
--- a/src/components/sys/SvgIcon.vue
+++ b/src/components/sys/SvgIcon.vue
+<script setup lang="ts">
+import { computed, withDefaults } from "vue";
+
+type SvgProps = {
+  prefix?: string;
+  name?: string;
+  color?: string;
+};
+
+const props = withDefaults(defineProps<SvgProps>(), {
+  prefix: "icon",
+  name: "",
+  color: "#000",
+});
+
+const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+</script>
+
+<template>
+  <svg aria-hidden="true">
+    <use :xlink:href="symbolId" :fill="color" />
+  </svg>
+</template>
--- a/src/layouts/BlankLayout.vue
+++ b/src/layouts/BlankLayout.vue
+<template>
+  <div class="blank-layout">
+    <router-view />
+  </div>
+</template>
+
+<script lang="ts" setup name="BlankLayout"></script>
--- a/src/layouts/default/components/DefaultFooter.vue
+++ b/src/layouts/default/components/DefaultFooter.vue
+<template>
+  <footer>底部</footer>
+</template>
+
+<script lang="ts" setup name="DefaultFooter"></script>
+
+<style scoped>
+footer {
+  background-color: antiquewhite;
+}
+</style>
--- a/src/layouts/default/components/DefaultHeader.vue
+++ b/src/layouts/default/components/DefaultHeader.vue
+<template>
+  <header>头部</header>
+</template>
+
+<script lang="ts" setup name="DefaultHeader"></script>
+
+<style scoped>
+header {
+  background-color: antiquewhite;
+}
+</style>
--- a/src/layouts/default/index.vue
+++ b/src/layouts/default/index.vue
+<template>
+  <div class="relative">
+    <Default-header />
+    <router-view v-slot="{ Component, route }">
+      <keep-alive>
+        <component :is="Component" v-if="route.meta.keepAlive"></component>
+      </keep-alive>
+      <component :is="Component" v-if="!route.meta.keepAlive"></component>
+    </router-view>
+    <Default-footer />
+  </div>
+</template>
+
+<script lang="ts" setup name="DefaultLayout">
+import DefaultHeader from "./components/DefaultHeader.vue";
+import DefaultFooter from "./components/DefaultFooter.vue";
+</script>
--- a/src/libs/emitter.ts
+++ b/src/libs/emitter.ts
+import mitt, { type Emitter } from "mitt";
+
+const emitter: Emitter<any> = mitt();
+
+export default emitter;
--- a/src/libs/request/index.ts
+++ b/src/libs/request/index.ts
+import { ref, type Ref } from "vue";
+import axios, {
+  AxiosError,
+  type AxiosResponse,
+  type AxiosRequestConfig,
+} from "axios";
+import storage from "store";
+// import { ElMessage } from "element-plus";
+import { useUserStore, USER_INFO, type UserInfo } from "@/stores/user";
+
+const { VITE_APP_BASE_URL } = import.meta.env;
+
+const request = axios.create({
+  // API 请求的默认前缀
+  baseURL: VITE_APP_BASE_URL as string,
+  timeout: 10000, // 请求超时时间
+});
+
+// 异常拦截处理器
+const errorHandler = (error: AxiosError) => {
+  const status = error.response?.status;
+  const useStore = useUserStore();
+  switch (status) {
+    /* eslint-disable no-param-reassign */
+    case 400:
+      error.message = "请求错误";
+      break;
+    case 401:
+      useStore.logout();
+      error.message = "未授权，请登录";
+      break;
+    case 403:
+      error.message = "拒绝访问";
+      break;
+    case 404:
+      error.message = `请求地址出错: ${error.response?.config.url}`;
+      break;
+    case 408:
+      error.message = "请求超时";
+      break;
+    case 500:
+      error.message = "服务器内部错误";
+      break;
+    case 501:
+      error.message = "服务未实现";
+      break;
+    case 502:
+      error.message = "网关错误";
+      break;
+    case 503:
+      error.message = "服务不可用";
+      break;
+    case 504:
+      error.message = "网关超时";
+      break;
+    case 505:
+      error.message = "HTTP版本不受支持";
+      break;
+    default:
+      break;
+  }
+  return Promise.reject(error);
+};
+
+request.interceptors.request.use((config) => {
+  // 如果 token 存在
+  // 让每个请求携带自定义 token 请根据实际情况自行修改
+  // config.headers.Authorization = `Bearer ${storage.get(ACCESS_TOKEN)}`;
+  const userInfo = (storage.get(USER_INFO) as UserInfo) || {};
+  config.headers = {
+    ...config.headers,
+    Authorization: `Bearer ${userInfo?.accessToken}`,
+    userId: userInfo?.userId,
+    childId: userInfo?.childId,
+    userMin: "vip",
+    accessToken: userInfo?.accessToken,
+  };
+  return config;
+}, errorHandler);
+
+// response interceptor
+request.interceptors.response.use((response: AxiosResponse) => {
+  const dataAxios = response.data;
+  const useStore = useUserStore();
+  // 这个状态码是和后端约定的
+  const { code, msg } = dataAxios;
+  // 根据 code 进行判断
+  if (code === undefined) {
+    // 如果没有 code 代表这不是项目后端开发的接口
+    return dataAxios;
+  }
+  // 有 code 代表这是一个后端接口 可以进行进一步的判断
+  // if (code) ElMessage.error(msg);
+  if (code) alert(msg);
+  switch (code) {
+    case 0:
+      // code === 0 代表没有错误
+      return dataAxios;
+    case 1:
+      // code === 1 代表请求错误
+      throw Error(msg);
+    case 401:
+      useStore.logout();
+      throw Error(msg);
+    default:
+      // 不是正确的 code
+      return dataAxios;
+  }
+}, errorHandler);
+
+export default request;
+
+export interface RequestConfig {
+  successMessage?: string;
+  errorMessage?: string;
+  /** 立即发送请求 */
+  immediate?: boolean;
+}
+
+export function useRequest<T>(
+  axiosConfig: AxiosRequestConfig,
+  requestConfig?: RequestConfig
+) {
+  // 最终返回的数据
+  const data = ref<T>();
+  // 请求失败返回的 Error 对象
+  const error = ref<Error>();
+  // 请求状态
+  const loading = ref(false);
+  // 立即发送请求
+  const immediate = requestConfig?.immediate !== false;
+  // 终止请求
+  const { CancelToken } = axios;
+  const { token, cancel } = CancelToken.source();
+  // 合并求情配置
+  const config = { ...axiosConfig, cancelToken: token };
+  // 请求 Promise
+
+  function run() {
+    loading.value = true;
+    return new Promise<Ref<T | undefined>>((resolve, reject) => {
+      request<T>(config)
+        .then((res: T) => {
+          data.value = res;
+          resolve(data);
+        })
+        .catch((err: Error) => {
+          error.value = err;
+          reject(err);
+          if (requestConfig?.errorMessage) {
+            throw Error(requestConfig.errorMessage);
+          }
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    });
+  }
+
+  const content = new Promise<Ref<T | undefined>>((resolve, reject) => {
+    if (immediate) {
+      run()
+        .then((res) => {
+          resolve(res);
+        })
+        .catch((err) => {
+          reject(err);
+        });
+    }
+  });
+  return { data, error, loading, content, run, cancel };
+}
--- a/src/libs/request/shims.d.ts
+++ b/src/libs/request/shims.d.ts
+import { AxiosRequestConfig } from "axios";
+
+declare module "axios" {
+  export interface AxiosInstance {
+    /* eslint-disable no-unused-vars */
+    <T = any>(config: AxiosRequestConfig): Promise<T>;
+    request<T = any>(config: AxiosRequestConfig): Promise<T>;
+    get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
+    delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
+    head<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
+    post<T = any>(
+      url: string,
+      data?: any,
+      config?: AxiosRequestConfig
+    ): Promise<T>;
+    put<T = any>(
+      url: string,
+      data?: any,
+      config?: AxiosRequestConfig
+    ): Promise<T>;
+    patch<T = any>(
+      url: string,
+      data?: any,
+      config?: AxiosRequestConfig
+    ): Promise<T>;
+  }
+}
--- a/src/libs/utils/baseApiUrl.ts
+++ b/src/libs/utils/baseApiUrl.ts
+export default function baseApiUrl(port?: number) {
+  const { VITE_APP_BASE_URL } = import.meta.env;
+  if (port) {
+    return `${VITE_APP_BASE_URL}:${port}`;
+  }
+  return VITE_APP_BASE_URL;
+}
--- a/src/libs/utils/baseStaticUrl.ts
+++ b/src/libs/utils/baseStaticUrl.ts
+// 处理静态资源链接
+export default function baseStaticUrl(src = "") {
+  const { VITE_APP_STATIC_URL } = import.meta.env;
+  if (src) {
+    return `${VITE_APP_STATIC_URL}${src}`;
+  }
+  return VITE_APP_STATIC_URL as string;
+}
--- a/src/libs/utils/index.ts
+++ b/src/libs/utils/index.ts
+export { default as baseStaticUrl } from "./baseStaticUrl";
+export { default as baseApiUrl } from "./baseApiUrl";
+export { default as setTitle } from "./setTitle";
--- a/src/libs/utils/setTitle.ts
+++ b/src/libs/utils/setTitle.ts
+export default function setTitle(title?: string) {
+  const { VITE_APP_TITLE } = import.meta.env;
+  const processTitle = VITE_APP_TITLE || "CLX";
+  window.document.title = `${title ? `${title} | ` : ""} ${processTitle}`;
+}
--- a/src/main.ts
+++ b/src/main.ts
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import { useRegisterSW } from "virtual:pwa-register/vue";
+
+import App from "./App.vue";
+import router from "./router";
+
+import "element-plus/es/components/message/style/css";
+import "@/router/permission";
+import "virtual:svg-icons-register";
+// css
+import "@/styles/tailwind.css";
+import "@/styles/main.css";
+
+useRegisterSW();
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+
+app.mount("#app");
--- a/src/pages/[...all].vue
+++ b/src/pages/[...all].vue
+<script lang="ts" setup name="404">
+import { ref } from "vue";
+import router from "@/router";
+
+const countdown = ref(3);
+
+const countdownInterval = setInterval(() => {
+  countdown.value -= 1;
+  if (countdown.value === 0) {
+    router.push("/");
+    clearInterval(countdownInterval);
+  }
+}, 1000);
+</script>
+
+<template>
+  <div class="h-screen flex flex-col justify-center items-center">
+    <h1 class="text-3xl">404</h1>
+    <p>{{ countdown }} seconds after the jump...</p>
+  </div>
+</template>
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
+<route lang="yaml">
+name: home
+meta:
+  auth: true
+</route>
+<script lang="ts" setup name="PageHome">
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+function regist() {
+  router.push({
+    path: "/user/regist",
+    query: {
+      id: 123,
+    },
+  });
+}
+</script>
+<template>
+  <div>
+    <div class="page-example">home</div>
+    <router-link to="/user/login"><button>登錄</button></router-link>
+    <button type="primary" @click="regist()">注册</button>
+    <div
+      class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"
+    >
+      <div class="flex-shrink-0">
+        <svg-icon class="h-12 w-12" name="tooling"></svg-icon>
+      </div>
+      <div>
+        <div class="text-xl font-medium text-black">ChitChat</div>
+        <p class="text-gray-500">You have a new message!</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-icon {
+  width: 20px;
+  height: 20px;
+}
+</style>
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
+<route lang="yaml">
+redirect:
+  name: home
+</route>
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
+<route lang="yaml">
+name: user
+meta:
+  auth: false
+  title: 用户
+  layout: BlankLayout
+</route>
--- a/src/pages/user/login/index.vue
+++ b/src/pages/user/login/index.vue
+<route lang="yaml">
+name: login
+meta:
+  auth: false
+  title: 登录
+  layout: BlankLayout
+</route>
+<template>
+  <div>
+    <div class="page-example">login</div>
+    <div
+      class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"
+    >
+      <div class="flex-shrink-0">
+        <svg-icon class="h-12 w-12" name="tooling"></svg-icon>
+      </div>
+      <div>
+        <div class="text-xl font-medium text-black">
+          <button type="link" @click="login()">登錄</button>
+        </div>
+        <p class="text-gray-500">点击登录!</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="PageLogin">
+import { useRoute, useRouter } from "vue-router";
+// import { ElMessage } from "element-plus";
+import { loginRequset } from "@/api/user";
+import { useUserStore } from "@/stores/user";
+import { baseStaticUrl } from "@/libs/utils";
+
+const router = useRouter();
+const route = useRoute();
+
+function GetRequest(urlStr: string) {
+  if (!urlStr.includes("?")) return {};
+  const url = urlStr.split("?")[1].split("&"); // 获取url中"?"符后的字串
+  const query: { [args: string]: any } = {};
+  url.forEach((item: string) => {
+    query[item.split("=")[0]] = decodeURIComponent(item.split("=")[1]); // 转码
+  });
+  return query;
+}
+
+console.log(import.meta.env);
+function login() {
+  loginRequset()
+    .then((res) => {
+      console.log(res);
+      const data = res?.value?.data;
+      if (!data) return;
+      const user = useUserStore();
+      user.setUserInfo({
+        ...data,
+      });
+      const queryRedirect = route.query?.redirect as string;
+      router.push({
+        path: queryRedirect || "/",
+        query: GetRequest(queryRedirect || ""),
+      });
+    })
+    .catch((error) => {
+      // ElMessage.error(error);
+      alert(error);
+    });
+}
+</script>
+
+<style scoped>
+.login-icon {
+  width: 20px;
+  height: 20px;
+}
+</style>
--- a/src/pages/user/regist/index.vue
+++ b/src/pages/user/regist/index.vue
+<route lang="yaml">
+name: regist
+meta:
+  auth: true
+  title: 注册
+  layout: BlankLayout
+</route>
+<script lang="ts" setup name="PageRegist">
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+console.log(route.query);
+</script>
+
+<template>
+  <div>
+    <div class="page-example">注册</div>
+  </div>
+</template>
+
+<style scoped></style>
--- a/src/router/index.ts
+++ b/src/router/index.ts
+import { createRouter, createWebHistory } from "vue-router";
+import { setupLayouts } from "virtual:generated-layouts";
+import generatedRoutes from "virtual:generated-pages";
+
+const routes = setupLayouts(generatedRoutes);
+
+const router = createRouter({
+  // history: createWebHashHistory(),
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+});
+
+export default router;
--- a/src/router/permission.ts
+++ b/src/router/permission.ts
+import storage from "store";
+import NProgress from "nprogress";
+import router from "@/router";
+import { USER_INFO, useUserStore, type UserInfo } from "@/stores/user";
+import { setTitle } from "@/libs/utils";
+
+// 进度条
+import "nprogress/nprogress.css";
+
+const loginRoutePath = "/user/login";
+const defaultRoutePath = "/home";
+/**
+ * 路由拦截
+ * 权限验证
+ */
+
+router.beforeEach(async (to, from, next) => {
+  const userStore = useUserStore();
+  const userInfo = (storage.get(USER_INFO) as UserInfo) || {};
+  const token = userInfo?.accessToken;
+
+  // 进度条
+  NProgress.start();
+  // 验证当前路由所有的匹配中是否需要有登录验证的
+  if (to.matched.some((r) => r.meta.auth)) {
+    // 是否存有token作为验证是否登录的条件
+    if (token && token !== "undefined") {
+      if (to.path === loginRoutePath) {
+        next({ path: defaultRoutePath });
+      } else {
+        next();
+      }
+    } else {
+      // 没有登录的时候跳转到登录界面
+      // 携带上登录成功之后需要跳转的页面完整路径
+      next({
+        name: "login",
+        query: {
+          redirect: to.fullPath,
+        },
+      });
+      NProgress.done();
+    }
+  } else {
+    // 不需要身份校验 直接通过
+    next();
+  }
+});
+
+router.afterEach((to) => {
+  // 进度条
+  NProgress.done();
+  setTitle(to.meta.title as string);
+});
--- a/src/stores/counter.ts
+++ b/src/stores/counter.ts
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
+
+export const useCounterStore = defineStore("counter", () => {
+  const count = ref(0);
+  const doubleCount = computed(() => count.value * 2);
+  function increment() {
+    count.value += 1;
+  }
+
+  return { count, doubleCount, increment };
+});
+
+export default {
+  useCounterStore,
+};
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
+import { defineStore } from "pinia";
+import storage from "store";
+import UaParser from "ua-parser-js";
+import type { IResult as UaResult } from "ua-parser-js";
+import router from "@/router";
+
+/**
+ * 用户信息-类型
+ */
+export interface UserInfo {
+  accessToken: string;
+  authed: number;
+  childId: number;
+  company: string;
+  domain: string;
+  equipmentFlag: number;
+  headImg: string;
+  logo: string;
+  mobile: string;
+  name: string;
+  openid: string;
+  placeId: number;
+  placeName: string;
+  role: number;
+  shortName: string;
+  tradeAuth: number;
+  truckNo: number;
+  userId: number;
+  walletCode: number;
+}
+
+export interface UserState {
+  userInfo: UserInfo;
+  ua: UaResult;
+}
+
+/** userInfo 存储信息 字段名 */
+export const USER_INFO: "USER_INFO" = "USER_INFO";
+
+/** token 字段名 */
+export const ACCESS_TOKEN: "accessToken" = "accessToken";
+/** userId 字段名 */
+export const USER_ID: "userId" = "userId";
+
+const defaultUserInfo = {
+  accessToken: "",
+  authed: 0,
+  childId: 0,
+  company: "",
+  domain: "",
+  equipmentFlag: 0,
+  headImg: "",
+  logo: "",
+  mobile: "",
+  name: "",
+  openid: "",
+  placeId: 0,
+  placeName: "",
+  role: 0,
+  shortName: "",
+  tradeAuth: 0,
+  truckNo: 0,
+  userId: 0,
+  walletCode: 0,
+};
+
+export const useUserStore = defineStore({
+  id: "clxUser",
+  state: (): UserState => ({
+    userInfo: { ...defaultUserInfo },
+    ua: new UaParser().getResult(),
+  }),
+  actions: {
+    setUserInfo(payload: UserInfo) {
+      this.userInfo = payload;
+      storage.set(USER_INFO, this.userInfo || {});
+    },
+    resetUserInfo() {
+      this.userInfo = { ...defaultUserInfo };
+    },
+    async getUserInfo() {
+      const userInfo = (storage.get(USER_INFO) as UserInfo) || {};
+      const userID = userInfo?.userId;
+      if (!userID) {
+        // 异步调用查询用户信息接口
+      }
+    },
+    async login() {
+      // 调用登陆接口
+      // this.setUserInfo(payload);
+      // router.push({ path: '/' });
+    },
+    async logout() {
+      // 调用退出登陆接口
+      this.resetUserInfo();
+      router.push({ name: "login" });
+    },
+    async verification(token: string) {
+      // 调用 token 验证接口
+      return Promise.resolve(token);
+    },
+  },
+});
--- a/src/styles/base.css
+++ b/src/styles/base.css
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
--- a/src/styles/main.css
+++ b/src/styles/main.css
+@import "./base.css";
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  /* padding: 2rem; */
+
+  font-weight: normal;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  /* #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  } */
+}
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/tailwind.config.js
+++ b/tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+// eslint-disable-next-line no-undef
+module.exports = {
+  mode: "jit",
+  content: ["index.html", "./src/**/*.{js,jsx,ts,tsx,vue,html}"],
+  darkMode: "media", // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*", "src/__tests__/*", "__tests__"],
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
--- a/tsconfig.config.json
+++ b/tsconfig.config.json
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.config.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ]
+}
--- a/tsconfig.vitest.json
+++ b/tsconfig.vitest.json
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "lib": [],
+    "types": [
+      "node",
+      "jsdom",
+      "vite/client",
+      "vite-plugin-pages/client",
+      "vite-plugin-vue-layouts/client",
+      "vite-plugin-pwa/client",
+    ],
+  }
+}
\ No newline at end of file
--- a/vite.config.ts
+++ b/vite.config.ts
+import { fileURLToPath, URL } from "node:url";
+
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import Components from "unplugin-vue-components/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+import AutoImport from "unplugin-auto-import/vite";
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
+import viteCompression from "vite-plugin-compression";
+import Pages from "vite-plugin-pages";
+import Layouts from "vite-plugin-vue-layouts";
+import { VitePWA } from "vite-plugin-pwa";
+import vueSetupExtend from "vite-plugin-vue-setup-extend";
+
+import path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    viteCompression(),
+    vueJsx(),
+    AutoImport({ dts: "src/auto-imports.d.ts", imports: ["vue"] }),
+    createSvgIconsPlugin({
+      // 指定需要缓存的图标文件夹
+      iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
+      // 指定symbolId格式
+      symbolId: "icon-[dir]-[name]",
+
+      /**
+       * 自定义插入位置
+       * @default: body-last
+       */
+      // inject?: 'body-last' | 'body-first'
+
+      /**
+       * custom dom id
+       * @default: __svg__icons__dom__
+       */
+      // customDomId: '__svg__icons__dom__',
+    }),
+    Components({
+      /* options */
+      resolvers: [ElementPlusResolver()],
+    }),
+    vueSetupExtend(),
+    Pages({
+      // extendRoute(route, parent) {
+      //   console.log("路由监听", route);
+      //   if (route.path === "/user/login") {
+      //     // Index is unauthenticated.
+      //     // 不进行身份认证的路由
+      //     return route;
+      //   }
+      //   // Augment the route with meta that indicates that the route requires authentication.
+      //   // 使用 meta 扩充路由，指示路由需要身份验证
+      //   return {
+      //     ...route,
+      //     meta: { auth: true },
+      //   };
+      // },
+    }),
+    Layouts({ defaultLayout: "default/index" }),
+    VitePWA({
+      includeAssets: ["favicon.svg"],
+      manifest: false,
+      registerType: "autoUpdate",
+      workbox: {
+        runtimeCaching: [
+          {
+            urlPattern: /someInterface/i, // 接口缓存 此处填你想缓存的接口正则匹配
+            handler: "CacheFirst",
+            options: {
+              cacheName: "interface-cache",
+            },
+          },
+          {
+            urlPattern: /(.*?)\.(js|css|ts)/, // js /css /ts静态资源缓存
+            handler: "CacheFirst",
+            options: {
+              cacheName: "js-css-cache",
+            },
+          },
+          {
+            urlPattern: /(.*?)\.(png|jpe?g|svg|gif|bmp|psd|tiff|tga|eps)/, // 图片缓存
+            handler: "CacheFirst",
+            options: {
+              cacheName: "image-cache",
+            },
+          },
+        ],
+      },
+    }),
+  ],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});