初始化项目

.editorconfig

+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

+/dist
+/src-bex/www
+/src-capacitor
+/src-cordova
+/.quasar
+/node_modules
+.eslintrc.js
+babel.config.js
+/src-ssr
\ No newline at end of file

.eslintrc.js

+const { resolve } = require('path');
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: '@typescript-eslint/parser'
+  },
+  env: {
+    browser: true,
+    es6: true,
+    node: true
+  },
+  plugins: ['vue', '@typescript-eslint/eslint-plugin'],
+  rules: {
+    'prettier/prettier': 'off',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/member-delimiter-style': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/class-name-casing': 'off',
+    'vue/valid-v-slot': 'off',
+    'no-debugger': 'off',
+    'vue/experimental-script-setup-vars': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off'
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended'
+  ],
+  overrides: [
+    {
+      files: [
+        '**/tests/*.{j,t}s?(x)',
+        '**/tests/**/*.spec.{j,t}s?(x)',
+        '**/tests/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        mocha: true
+      }
+    }
+  ]
+}

.gitignore

+.DS_Store
+.thumbs.db
+node_modules
+
+# Quasar core related directories
+.quasar
+/dist
+
+# Cordova related directories and files
+/src-cordova/node_modules
+/src-cordova/platforms
+/src-cordova/plugins
+/src-cordova/www
+
+# Capacitor related directories and files
+/src-capacitor/www
+/src-capacitor/node_modules
+
+# BEX related directories and files
+/src-bex/www
+/src-bex/js/core
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

.postcssrc.js

+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  plugins: [
+    // to edit target browsers: use "browserslist" field in package.json
+    require('autoprefixer')
+  ]
+}

.prettierrc

+{
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "none",
+  "endOfLine": "lf",
+  "printWidth": 999,
+  "proseWrap": "never",
+  "arrowParens": "avoid"
+}

.vscode/extensions.json

+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "octref.vetur"
+  ],
+  "unwantedRecommendations": [
+    "hookyqr.beautify",
+    "dbaeumer.jshint",
+    "ms-vscode.vscode-typescript-tslint-plugin"
+  ]
+}

.vscode/settings.json

+{
+  "vetur.validation.template": false,
+  "vetur.format.enable": false,
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "vetur.experimental.templateInterpolationService": true
+}

README.md

-# deer
+<a name="lgzKP"></a>
+## 项目框架：
+项目采用Quasar+Vue3.2+TS，构建。开发中需要严格遵守TS协议，语法，对象等标准。严厉杜绝直接使用JS的弱类型。严格遵守composition api，杜绝Option api。项目后期会加入Vite2作为打包工具，放弃Webpack。
+> 项目弃用了ESLint语法约束，开发人员需要按照Prettier 格式化代码，并且处理语法不合规的内容，严禁关闭ESLint语法验证。
 
+​<br />
+<a name="WJ7J1"></a>
+## 第三方依赖：
+> cnpm i -S @types/webpack-env         自动注入
+> cnpm i -S vuex-persistedstate             持久化Store
+> cnpm install --save @types/lockr     LocalStorage管理工具
+> cnpm install --save @types/lodash      JS 原生库，封装了许多实用方法，项目使用初衷为全局组件注册的一致性
+
+注意Store已加入自动化注入功能，请按照示例格式进行添加<br />store的持久化需要在index.ts文件中进行配置
+```typescript
+process.env.NODE_ENV !== 'production'
+      ? [
+          createLogger(),
+          createPersistedState({
+            paths: ['app', 'user','你的Store名称']
+          })
+        ]
+      : [
+          createPersistedState({
+            paths: ['app', 'user','你的Store名称']
+          })
+        ]
+```
+<a name="GdhGb"></a>
+## 项目基础架构说明：
+```
+|-- 根目录
+    |-- quasar-cli文件，不需要做调整		
+    |-- dist 项目 build 之后的文件夹
+    |-- public 项目静态资源，不经过 webpack，以及默认的模版，适合存放第三方压缩好的资源
+    |-- src 主要的开发目录
+    | |-- @types 项目共用的 type
+    | |-- App.vue 页面渲染根节点
+    | |-- main.ts 入口文件
+    | |-- shims-vue.d.ts vue 文件类型的 type
+    | |-- api 封装http请求相关（持久层）
+    | | |-- apiList.ts api接口列表（弃用，在各自的Service中维护）
+    | | |-- axios.ts 业务请求封装 （封装Request AOP）
+    | | |-- Common.ts 公共模块的的网络请求，所有通用 api 放在此处（例如请求枚举之类）
+    | | |-- user.ts 用户请求模块（示例）
+    | |-- assets 存放静态资源，这个文件夹下的文件会走 webpack 压缩流程
+    | |-- boot quasar全局组件封装目录
+    | | |-- axios.ts 弃用
+    | | |-- dict.ts 字典库（用于魔法值的封装，注意项目全局不能存在魔法值）
+    | | |-- i18n.ts 国际化
+    | | |-- permission.ts 路由权限封装
+    | |-- components
+    | | |-- index.ts 自动注册脚本
+    | | |-- global 自动注册的全局组件
+    | | |-- ...其他非全局注册的模块（按照实际需要创建目录管理组件，严禁直接在cmp根目录创建）
+    | |-- config 全局静态配置，不可更改项
+    | | |-- app.ts 全局配置信息
+    | | |-- color.ts 示例
+    | | |-- dictionary.ts 魔法值定义类，按照项目需要自行创建部分类
+    | |-- css 样式存放目录（注意遵从Sass或Scss创建，不允许使用原生CSS）
+    | |-- i18n 国际化配置
+    | |-- layout 页面页面骨架
+    | |-- module 遵从Vue3.x cmpApi对Setup进行拆分封装，按照领域划分文件夹，类名+Module
+		| | |-- user
+		| | | |-- loginModule.ts 示例：内部应该遵从usexxxxModule规范命名
+    | |-- pages 页面级组件
+    | |-- router 路由
+    | | |-- index.ts 路由入口
+    | |-- store vuex
+    | | |-- modules 多个模块
+    | | |-- index.ts 自动装载模块
+    | | |-- app app 模块
+    | |-- utils 常用函数以及其他有用工具
+    | | |-- auth.ts 身份验证中间件
+    | | |-- message.ts 消息组件封装
+    | | |-- tools.ts 工具类
+    | | |-- validate.ts 验证封装
+    |-- .czrc 提交规范选项设置
+    |-- .editorconfig vscode 编辑器 设置
+    |-- .env.development 开发环境配置
+    |-- .env.preview 测试环境配置
+    |-- .env.production 生产环境配置
+    |-- .eslintignore eslint 要忽略的文件夹
+    |-- .eslintrc.js eslint 规则配置
+    |-- .gitignore git 忽略的文件
+    |-- .prettierrc.js 格式化插件配置
+    |-- README.md 项目说明
+    |-- babel.config.js babel 设置
+    |-- package.json npm 配置
+    |-- tsconfig.json typescript 配置
+    |-- typedoc.json 文档配置文件
+    |-- quasar.conf.js quasar 脚手架配置文件
+
+```
+
+<br />
+<br />​<br />

babel.config.js

+/* eslint-env node */
+
+module.exports = api => {
+  return {
+    presets: [
+      [
+        '@quasar/babel-preset-app',
+        api.caller(caller => caller && caller.target === 'node')
+          ? { targets: { node: 'current' } }
+          : {}
+      ]
+    ]
+  }
+}
+

package.json

+{
+  "name": "ocss",
+  "version": "0.0.1",
+  "description": "niuu bee",
+  "productName": "Ocss App",
+  "author": "alex9012 <alex9012@vip.qq.com>",
+  "private": true,
+  "scripts": {
+    "lint": "eslint --ext .js,.ts,.vue ./",
+    "test": "echo \"No test specified\" && exit 0"
+  },
+  "dependencies": {
+    "@quasar/extras": "^1.0.0",
+    "@types/lodash": "^4.14.173",
+    "@types/webpack-env": "^1.16.2",
+    "axios": "^0.21.1",
+    "core-js": "^3.6.5",
+    "katex": "^0.13.18",
+    "lockr": "^0.9.0-beta.0",
+    "lodash": "^4.17.21",
+    "mermaid": "^8.12.1",
+    "quasar": "^2.0.0",
+    "quasar-tiptap-branch": "^1.8.1",
+    "vue-i18n": "^9.0.0",
+    "vuex": "^4.0.1",
+    "vuex-persistedstate": "^4.0.0"
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.13.14",
+    "@quasar/app": "^3.0.0",
+    "@types/node": "^12.20.21",
+    "@types/webpack-env": "^1.16.2",
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
+    "@vue/eslint-config-typescript": "^7.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^7.0.0"
+  },
+  "browserslist": [
+    "last 10 Chrome versions",
+    "last 10 Firefox versions",
+    "last 4 Edge versions",
+    "last 7 Safari versions",
+    "last 8 Android versions",
+    "last 8 ChromeAndroid versions",
+    "last 8 FirefoxAndroid versions",
+    "last 10 iOS versions",
+    "last 5 Opera versions"
+  ],
+  "engines": {
+    "node": ">= 12.22.1",
+    "npm": ">= 6.13.4",
+    "yarn": ">= 1.21.1"
+  }
+}

quasar.conf.js

+/*
+ * This file runs in a Node context (it's NOT transpiled by Babel), so use only
+ * the ES6 features that are supported by your Node version. https://node.green/
+ */
+
+// Configuration for your app
+// https://v2.quasar.dev/quasar-cli/quasar-conf-js
+
+/* eslint-env node */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { configure } = require('quasar/wrappers')
+const path = require('path')
+
+module.exports = configure(function (ctx) {
+  return {
+    // https://v2.quasar.dev/quasar-cli/supporting-ts
+    supportTS: {
+      tsCheckerConfig: {
+        eslint: {
+          enabled: true,
+          files: './src/**/*.{ts,tsx,js,jsx,vue}'
+        }
+      }
+    },
+
+    // https://v2.quasar.dev/quasar-cli/prefetch-feature
+    // preFetch: true,
+
+    // app boot file (/src/boot)
+    // --> boot files are part of "main.js"
+    // https://v2.quasar.dev/quasar-cli/boot-files
+    boot: ['i18n', 'axios', 'dict', 'permission', 'globalcmp'],
+
+    // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
+    css: ['app.scss'],
+
+    // https://github.com/quasarframework/quasar/tree/dev/extras
+    extras: [
+      // 'ionicons-v4',
+      'mdi-v5',
+      // 'fontawesome-v5',
+      // 'eva-icons',
+      // 'themify',
+      // 'line-awesome',
+      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
+
+      'roboto-font', // optional, you are not bound to it
+      'material-icons' // optional, you are not bound to it
+    ],
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
+    build: {
+      vueRouterMode: 'history', // available values: 'hash', 'history'
+
+      // transpile: false,
+
+      // Add dependencies for transpiling with Babel (Array of string/regex)
+      // (from node_modules, which are by default not transpiled).
+      // Applies only if "transpile" is set to true.
+      // transpileDependencies: [],
+
+      env: ctx.dev
+        ? {
+            BASE_APP_API: 'http://192.168.20.51:8088/api'
+          }
+        : {
+            BASE_APP_API: 'https://eduapi.oytour.com/api'
+          },
+
+      extendWebpack(cfg, { isServer, isClient }) {
+        cfg.resolve.alias = {
+          ...cfg.resolve.alias,
+          '@': path.resolve(__dirname, './src')
+        }
+      },
+
+      // rtl: true, // https://v2.quasar.dev/options/rtl-support
+      // preloadChunks: true,
+      // showProgress: false,
+      // gzip: true,
+      // analyze: true,
+
+      // Options below are automatically set depending on the env, set them if you want to override
+      // extractCSS: false,
+
+      // https://v2.quasar.dev/quasar-cli/handling-webpack
+      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
+      chainWebpack(/* chain */) {
+        //
+      }
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
+    devServer: {
+      https: false,
+      port: 8080,
+      open: true // opens browser window automatically
+    },
+
+    // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
+    framework: {
+      config: {},
+
+      // iconSet: 'material-icons', // Quasar icon set
+      // lang: 'en-US', // Quasar language pack
+
+      // For special cases outside of where the auto-import strategy can have an impact
+      // (like functional components as one of the examples),
+      // you can manually specify Quasar components/directives to be available everywhere:
+      //
+      // components: [],
+      directives: ['ClosePopup'],
+
+      // Quasar plugins
+      plugins: []
+    },
+
+    animations: 'all', // --- includes all animations
+    // https://v2.quasar.dev/options/animations
+    animations: ['bounceInLeft', 'bounceOutRight'],
+
+    // https://v2.quasar.dev/quasar-cli/developing-ssr/configuring-ssr
+    ssr: {
+      pwa: false,
+
+      // manualStoreHydration: true,
+      // manualPostHydrationTrigger: true,
+
+      prodPort: 3000, // The default port that the production server should use
+      // (gets superseded if process.env.PORT is specified at runtime)
+
+      maxAge: 1000 * 60 * 60 * 24 * 30,
+      // Tell browser when a file from the server should expire from cache (in ms)
+
+      chainWebpackWebserver(/* chain */) {
+        //
+      },
+
+      middlewares: [
+        ctx.prod ? 'compression' : '',
+        'render' // keep this as last one
+      ]
+    },
+
+    // https://v2.quasar.dev/quasar-cli/developing-pwa/configuring-pwa
+    pwa: {
+      workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
+      workboxOptions: {}, // only for GenerateSW
+
+      // for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
+      // if using workbox in InjectManifest mode
+      chainWebpackCustomSW(/* chain */) {
+        //
+      },
+
+      manifest: {
+        name: 'Ocss App',
+        short_name: 'Ocss App',
+        description: 'niuu bee',
+        display: 'standalone',
+        orientation: 'portrait',
+        background_color: '#ffffff',
+        theme_color: '#027be3',
+        icons: [
+          {
+            src: 'icons/icon-128x128.png',
+            sizes: '128x128',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-256x256.png',
+            sizes: '256x256',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-384x384.png',
+            sizes: '384x384',
+            type: 'image/png'
+          },
+          {
+            src: 'icons/icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      }
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
+    cordova: {
+      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
+    capacitor: {
+      hideSplashscreen: true
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
+    electron: {
+      bundler: 'packager', // 'packager' or 'builder'
+
+      packager: {
+        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
+        // OS X / Mac App Store
+        // appBundleId: '',
+        // appCategoryType: '',
+        // osxSign: '',
+        // protocol: 'myapp://path',
+        // Windows only
+        // win32metadata: { ... }
+      },
+
+      builder: {
+        // https://www.electron.build/configuration/configuration
+
+        appId: 'ocss'
+      },
+
+      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
+      chainWebpack(/* chain */) {
+        // do something with the Electron main process Webpack cfg
+        // extendWebpackMain also available besides this chainWebpackMain
+      },
+
+      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
+      chainWebpackPreload(/* chain */) {
+        // do something with the Electron main process Webpack cfg
+        // extendWebpackPreload also available besides this chainWebpackPreload
+      }
+    }
+  }
+})

src/@types/index.ts

+import { AppStateType } from '@/store/modules/app/state'
+import { UserStateType } from '@/store/modules/user/state'
+import { TeamStateType } from '@/store/modules/user/modules/team/state'
+
+// vuex state 的模块的类型
+type ModuleType = {
+  app: AppStateType
+  user: UserStateType & { team: TeamStateType }
+}
+
+// 所有的StateType
+export type StateType = ModuleType
+
+/** http请求响应格式  */
+export declare interface ApiResponse {
+  errCode: number
+  errMsg?: string
+  data?: any
+}
+
+// ant-design-button 颜色
+export type ButtonColorType = 'primary' | 'danger' | 'dashed' | 'ghost' | 'default' | 'link'
+
+// icon的类型
+export type IconType = 'icon' | 'iconfont'
+
+// 对话框打开类型
+export type ModalOpenMode = 'edit' | 'add' | 'other'
+
+/**
+ * @description 常用异常结果常量定义
+ */
+export enum ResultType {
+  'Empty' = 1,
+  'Null' = 2,
+  'EmptyArray' = 3
+}
+//TODO: 请根据实际情况调整定义的实体对象
+/**
+ * @description 模拟定义菜单信息
+ * 
+ */
+export interface AuthMenuType {
+  menuId: number
+  menuName: string
+  menuUrl: string
+}
+export interface BasicUserType {
+  id: number
+  name?: string
+  avatar?: string
+  role?: string
+  department?: string
+  code?: string
+  createTime?: string
+  description?: string
+  email?: string
+  lastLoginTime?: string
+  modifyTime?: string
+  modifyUser?: number
+  nickName?: string
+  phone?: string
+  roleId?: number
+  roleName?: string
+  status?: number
+  tenantId?: number
+  type?: string
+  userId?: number
+  username?: string
+  cloudRole?: string
+}
+
+export interface ListParamType {
+  id: number
+  pageSize: number
+  pageNum: number
+}
+
+// 接口响应通过格式
+export interface HttpResponse {
+  status: number
+  statusText: string
+  data: {
+    code: number
+    desc: string
+    [key: string]: any
+  }
+}
+
+// 接口请求列表通用参数配置
+export interface HttpListQuery {
+  pageNum?: number
+  pageSize?: number
+  orderNum?: number
+  [key: string]: any
+}
+
+// 团队列表类型
+export interface TeamListType {
+  createTime?: string
+  description?: string
+  id?: number
+  memberNum?: number
+  name?: string
+  orderNum?: number
+  projectNum?: number
+  tenantId?: number
+  roleId?: number // 用户在当前所在团队的权限
+}
+
+// 批量添加团队成员列表
+export interface TeamMemberType {
+  id?: number
+  roleId?: number
+  status?: number
+  teamId?: number
+  tenantId?: number
+  toolRole?: string
+  userId?: number
+  userTenantId?: number
+  cloudRole?: string
+}
+
+export enum RoleType {
+  '超级管理员' = 1,
+  '子账号',
+  '团队超级管理员',
+  '团队管理员',
+  '团队成员',
+  '团队访客',
+  '项目管理员',
+  '项目成员',
+  '项目访客'
+}
+
+// 权限列表类型
+export interface RoleItemType {
+  createTime: string
+  id: number
+  roleId: number
+  modifyTime: string
+  parentId: number
+  remark: string
+  roleName: keyof typeof RoleType
+  type: number
+  menuIds: string
+}
+
+export interface AddTeamGroupParams {
+  description?: string
+  id?: number
+  teamId?: number
+  name: string
+  tenantId?: number
+}
+
+export interface AddTeamGroupMemberParams {
+  groupId: number
+  id?: number
+  userId: number
+}
+
+export interface AddCloudRoleItem {
+  cloudRoleId: number
+  teamId: number
+  tenantId: number
+}
+// 云角色成员列表类型
+export interface CloudRoleItem extends AddCloudRoleItem {
+  allocatedNum: number
+  cloudRoleNum: number
+  endTime: string
+  id: number
+  name: string
+  unallocatedNum: number
+  cloudRoleName: string
+  toolId: number
+}
+
+// 更改成员云角色需要的传参
+export interface UpdateMemberRoleParams {
+  cloudRole: string
+  id: number
+  teamId: number
+  tenantId: number
+  userId: number
+}
+
+// 云角色列表项类型
+export type CloudRoleItemType = CloudRoleItem & { members: BasicUserType[] }
+
+// 云角色成员编辑的列表项类型
+
+export type EditCloudRoleItemType = {
+  members: BasicUserType[]
+  isCheck: boolean
+  cloudRole: string
+  teamId: number
+  tenantId: number
+  userId: number
+  allocatedNum: number
+  cloudRoleNum: number
+  endTime: string
+  id: number
+  name: string
+  unallocatedNum: number
+  cloudRoleName: string
+  toolId: number
+  cloudRoleId: number
+}

src/App.vue

+<template>
+  <router-view />
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'App'
+})
+</script>
+<style lang="sass">
+@import url('./css/font.sass')
+</style>

src/api/axios.ts

+import Axios, { AxiosResponse, AxiosRequestConfig, AxiosError } from 'axios'
+import router from '@/router/index'
+// import { message } from 'ant-design-vue'
+import Store from '@/store'
+import { Notify } from 'quasar'
+
+/**
+ * get status code
+ * @param {AxiosResponse} response Axios  response object
+ */
+const getErrorCode2text = (response: AxiosResponse): string => {
+	/** http status code */
+	const code = response.status
+	/** notice text */
+	let message = 'Request Error'
+	switch (code) {
+		case 400:
+			message = 'Request Error'
+			break
+		case 401:
+			message = 'Unauthorized, please login'
+			break
+		case 403:
+			message = '拒绝访问'
+			break
+		case 404:
+			message = '访问资源不存在'
+			break
+		case 408:
+			message = '请求超时'
+			break
+		case 500:
+			message = '位置错误'
+			break
+		case 501:
+			message = '承载服务未实现'
+			break
+		case 502:
+			message = '网关错误'
+			break
+		case 503:
+			message = '服务暂不可用'
+			break
+		case 504:
+			message = '网关超时'
+			break
+		case 505:
+			message = '暂不支持的 HTTP 版本'
+			break
+		default:
+			message = '位置错误'
+	}
+	return message
+}
+
+/**
+ * @returns  {AxiosResponse} result
+ * @tutorial see more:https://github.com/onlyling/some-demo/tree/master/typescript-width-axios
+ * @example
+ * service.get<{data: string; code: number}>('/test').then(({data}) => { console.log(data.code) })
+ */
+const service = Axios.create({
+	baseURL: process.env.BASE_APP_API,
+	timeout: 10000,
+	headers: {
+		'User-Type': 'bus',
+		'Content-Type': 'application/json;charset=UTF-8'
+	}
+})
+
+/**
+ * @description 请求发起前的拦截器
+ * @returns {AxiosRequestConfig} config
+ */
+service.interceptors.request.use(
+	async (config: AxiosRequestConfig) => {
+		// 如果是获取token接口：
+		if (config.url === '/auth/oauth/token') {
+			//TODO:用户登录的特殊处理，
+		} else {
+			// 如果保存有token，则取，否则不添加Authorization
+			if (localStorage.vuex && JSON.parse(localStorage.vuex).user?.token) {
+				//TODO:Access_TOKEN 的获取，需要根据实际业务情况进行调整
+				const token = Store.state.user?.token
+				const tokenType = token.token_type
+				const accessToken = token.access_token
+				config.headers.Authorization = `${tokenType} ${accessToken}`
+			}
+
+			//TODO:包装一层MSG，但是微服务应该去掉此步骤
+			config.data = {
+				Msg: config.data
+			}
+		}
+
+		return config
+	},
+	error => {
+		//TODO:  新增网络请求异常处理业务
+		return Promise.reject(error)
+	}
+)
+
+/**
+ * @description 响应收到后的拦截器
+ * @returns {}
+ */
+service.interceptors.response.use(
+	/** 请求有响应 */
+	async (response: AxiosResponse) => {
+		if (response.status === 200) {
+			return Promise.resolve(response)
+		} else {
+			const __text = getErrorCode2text(response)
+			return Promise.reject(new Error(__text))
+		}
+	},
+	/** 请求无响应 */
+	(error: AxiosError) => {
+		let __emsg: string = error.message || ''
+
+		if (error.message) {
+			__emsg = error.message
+		}
+
+		if (error.response) {
+			__emsg = error.response.data.message ? error.response.data.message : error.response.data.data
+		}
+		// timeout
+		if (__emsg.indexOf('timeout') >= 0) {
+			__emsg = 'timeout'
+		}
+
+		//TODO: 结合接口实际情况进行权限判断
+		if (error?.response?.status === 401) {
+			if (router.currentRoute.value.path !== '/entry/login') {
+				Notify.create({
+					message: '登录凭证已过期，请重新登录',
+					color: 'warning',
+					textColor: 'dark',
+					icon: 'announcement'
+				})
+				router.push('/entry/login')
+			}
+			return Promise.reject(new Error('401'))
+		}
+		return Promise.reject(new Error(__emsg))
+	}
+)
+
+export default service

src/api/common.ts

+import Axios from './axios'
+import { HttpResponse } from '@/@types/index'
+
+/**
+ * @description 公共模块的的网络请求，所有通用 api 放在此处
+ */
+
+class CommonService {
+	// 添加团队（示例）
+	static getRoleInfoList(): Promise<HttpResponse> {
+		return Axios.get('/bus/common/getRoleInfo', {
+			responseType: 'json'
+		})
+	}
+}
+
+export default CommonService

src/api/user.ts

+/**
+ * 所有跟用户相关的接口（TODO:DEMO USER）
+ */
+
+import { HttpResponse } from '@/@types'
+import Axios from './axios'
+
+interface HttpParams {
+	coinName: string
+	cashName: string
+}
+
+/**
+ * @interface loginParams -登录参数
+ * @property {string} grant_type -授权类型
+ * @property {string} email -邮箱
+ * @property {string} password -用户密码
+ */
+interface LoginParams {
+	grant_type: string
+	username: string
+	password: string
+}
+
+/**
+ * @interface RefreshTokenParams -刷新令牌参数
+ * @property {string} refresh_token -refresh_token
+ */
+interface RefreshTokenParams {
+	refresh_token: string
+}
+
+/**
+ * @interface SendEmailCodeParams -发送邮件验证码参数
+ * @property {string} email -邮箱
+ */
+interface SendEmailCodeParams {
+	email: string
+}
+
+/**
+ * @interface VerifyEmailCodeParams -验证邮件验证码参数
+ * @property {string} email -邮箱
+ * @property {string} code -验证码
+ */
+interface VerifyEmailCodeParams {
+	email: string
+	code: string
+}
+
+/**
+ * @interface SendPhoneCodeParams -发送手机验证码参数
+ * @property {string} phone -手机号
+ */
+interface SendPhoneCodeParams {
+	phone: string
+}
+
+/**
+ * @interface BindPhoneParams -绑定手机参数
+ * @property {string} phone -手机号
+ * @property {string} code -手机验证码
+ */
+interface BindPhoneParams {
+	phone: string
+	code: string
+}
+
+/**
+ * @interface registerParams -注册参数
+ * @property {string} email -邮箱
+ * @property {string} password -用户密码
+ * @property {string} code -验证码
+ */
+interface RegisterParams {
+	email: string
+	password: string
+	code: string
+}
+
+export interface UserApi {
+	coin2cash(param: HttpParams): Promise<any>
+}
+
+/**
+ * @example Axios.get(`https://xxx.com}`)
+ * @todo Get the exchange rate of the current currency
+ */
+
+class UserService {
+	// 登录
+	static async login(params: LoginParams): Promise<HttpResponse> {
+		return Axios('/auth/oauth/token', {
+			method: 'post',
+			responseType: 'json',
+			params: params
+		})
+	}
+
+	// 刷新令牌
+	static async refreshToken(params: RefreshTokenParams): Promise<HttpResponse> {
+		return Axios('/auth/oauth/token', {
+			method: 'post',
+			responseType: 'json',
+			params: {
+				grant_type: 'refresh_token',
+				...params
+			}
+		})
+	}
+
+	// 获取用户信息
+	static getUserDetail(): Promise<HttpResponse> {
+		return Axios('/bus/user/userDetail', {
+			method: 'get',
+			responseType: 'json'
+		})
+	}
+
+	// 添加登录记录
+	static addLoginLog(): Promise<HttpResponse> {
+		return Axios('/bus/user/success', {
+			method: 'get',
+			responseType: 'json'
+		})
+	}
+
+	// 发送邮箱验证码
+	static sendEmailCode(params: SendEmailCodeParams): Promise<HttpResponse> {
+		return Axios('/bus/common/sendEmailCode', {
+			method: 'get',
+			responseType: 'json',
+			params
+		})
+	}
+
+	// 验证邮箱验证码
+	static verifyEmailCode(params: VerifyEmailCodeParams): Promise<HttpResponse> {
+		return Axios('/bus/common/verifyEmailCode', {
+			method: 'post',
+			responseType: 'json',
+			params
+		})
+	}
+
+	// 发送手机验证码
+	static sendPhoneCode(params: SendPhoneCodeParams): Promise<HttpResponse> {
+		return Axios('/bus/common/sendPhoneCode', {
+			method: 'get',
+			responseType: 'json',
+			params
+		})
+	}
+
+	// 绑定手机
+	static bindPhone(params: BindPhoneParams): Promise<HttpResponse> {
+		return Axios('/bus/user/bindingPhone', {
+			method: 'post',
+			responseType: 'json',
+			params
+		})
+	}
+
+	// 注册
+	static register(params: RegisterParams): Promise<HttpResponse> {
+		return Axios('/bus/user/register', {
+			method: 'post',
+			responseType: 'json',
+			data: params
+		})
+	}
+}
+
+export default UserService

src/assets/quasar-logo-vertical.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356 360">
+	<path
+		d="M43.4 303.4c0 3.8-2.3 6.3-7.1 6.3h-15v-22h14.4c4.3 0 6.2 2.2 6.2 5.2 0 2.6-1.5 4.4-3.4 5 2.8.4 4.9 2.5 4.9 5.5zm-8-13H24.1v6.9H35c2.1 0 4-1.3 4-3.8 0-2.2-1.3-3.1-3.7-3.1zm5.1 12.6c0-2.3-1.8-3.7-4-3.7H24.2v7.7h11.7c3.4 0 4.6-1.8 4.6-4zm36.3 4v2.7H56v-22h20.6v2.7H58.9v6.8h14.6v2.3H58.9v7.5h17.9zm23-5.8v8.5H97v-8.5l-11-13.4h3.4l8.9 11 8.8-11h3.4l-10.8 13.4zm19.1-1.8V298c0-7.9 5.2-10.7 12.7-10.7 7.5 0 13 2.8 13 10.7v1.4c0 7.9-5.5 10.8-13 10.8s-12.7-3-12.7-10.8zm22.7 0V298c0-5.7-3.9-8-10-8-6 0-9.8 2.3-9.8 8v1.4c0 5.8 3.8 8.1 9.8 8.1 6 0 10-2.3 10-8.1zm37.2-11.6v21.9h-2.9l-15.8-17.9v17.9h-2.8v-22h3l15.6 18v-18h2.9zm37.9 10.2v1.3c0 7.8-5.2 10.4-12.4 10.4H193v-22h11.2c7.2 0 12.4 2.8 12.4 10.3zm-3 0c0-5.3-3.3-7.6-9.4-7.6h-8.4V307h8.4c6 0 9.5-2 9.5-7.7V298zm50.8-7.6h-9.7v19.3h-3v-19.3h-9.7v-2.6h22.4v2.6zm34.4-2.6v21.9h-3v-10.1h-16.8v10h-2.8v-21.8h2.8v9.2H296v-9.2h2.9zm34.9 19.2v2.7h-20.7v-22h20.6v2.7H316v6.8h14.5v2.3H316v7.5h17.8zM24 340.2v7.3h13.9v2.4h-14v9.6H21v-22h20v2.7H24zm41.5 11.4h-9.8v7.9H53v-22h13.3c5.1 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6H66c3.1 0 5.3-1.5 5.3-4.7 0-3.3-2.2-4.1-5.3-4.1H55.7v8.8zm47.9 6.2H89l-2 4.3h-3.2l10.7-22.2H98l10.7 22.2h-3.2l-2-4.3zm-1-2.3l-6.3-13-6 13h12.2zm46.3-15.3v21.9H146v-17.2L135.7 358h-2.1l-10.2-15.6v17h-2.8v-21.8h3l11 16.9 11.3-17h3zm35 19.3v2.6h-20.7v-22h20.6v2.7H166v6.8h14.5v2.3H166v7.6h17.8zm47-19.3l-8.3 22h-3l-7.1-18.6-7 18.6h-3l-8.2-22h3.3L204 356l6.8-18.5h3.4L221 356l6.6-18.5h3.3zm10 11.6v-1.4c0-7.8 5.2-10.7 12.7-10.7 7.6 0 13 2.9 13 10.7v1.4c0 7.9-5.4 10.8-13 10.8-7.5 0-12.7-3-12.7-10.8zm22.8 0v-1.4c0-5.7-4-8-10-8s-9.9 2.3-9.9 8v1.4c0 5.8 3.8 8.2 9.8 8.2 6.1 0 10-2.4 10-8.2zm28.3 2.4h-9.8v7.9h-2.8v-22h13.2c5.2 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6h10.2c3 0 5.2-1.5 5.2-4.7 0-3.3-2.1-4.1-5.2-4.1h-10.2v8.8zm40.3-1.5l-6.8 5.6v6.4h-2.9v-22h2.9v12.3l15.2-12.2h3.7l-9.9 8.1 10.3 13.8h-3.6l-8.9-12z" />
+	<path fill="#050A14"
+		d="M188.4 71.7a10.4 10.4 0 01-20.8 0 10.4 10.4 0 1120.8 0zM224.2 45c-2.2-3.9-5-7.5-8.2-10.7l-12 7c-3.7-3.2-8-5.7-12.6-7.3a49.4 49.4 0 00-9.7 13.9 59 59 0 0140.1 14l7.6-4.4a57 57 0 00-5.2-12.5zM178 125.1c4.5 0 9-.6 13.4-1.7v-14a40 40 0 0012.5-7.2 47.7 47.7 0 00-7.1-15.3 59 59 0 01-32.2 27.7v8.7c4.4 1.2 8.9 1.8 13.4 1.8zM131.8 45c-2.3 4-4 8.1-5.2 12.5l12 7a40 40 0 000 14.4c5.7 1.5 11.3 2 16.9 1.5a59 59 0 01-8-41.7l-7.5-4.3c-3.2 3.2-6 6.7-8.2 10.6z" />
+	<path fill="#00B4FF"
+		d="M224.2 98.4c2.3-3.9 4-8 5.2-12.4l-12-7a40 40 0 000-14.5c-5.7-1.5-11.3-2-16.9-1.5a59 59 0 018 41.7l7.5 4.4c3.2-3.2 6-6.8 8.2-10.7zm-92.4 0c2.2 4 5 7.5 8.2 10.7l12-7a40 40 0 0012.6 7.3c4-4.1 7.3-8.8 9.7-13.8a59 59 0 01-40-14l-7.7 4.4c1.2 4.3 3 8.5 5.2 12.4zm46.2-80c-4.5 0-9 .5-13.4 1.7V34a40 40 0 00-12.5 7.2c1.5 5.7 4 10.8 7.1 15.4a59 59 0 0132.2-27.7V20a53.3 53.3 0 00-13.4-1.8z" />
+	<path fill="#00B4FF"
+		d="M178 9.2a62.6 62.6 0 11-.1 125.2A62.6 62.6 0 01178 9.2m0-9.2a71.7 71.7 0 100 143.5A71.7 71.7 0 00178 0z" />
+	<path fill="#050A14"
+		d="M96.6 212v4.3c-9.2-.8-15.4-5.8-15.4-17.8V180h4.6v18.4c0 8.6 4 12.6 10.8 13.5zm16-31.9v18.4c0 8.9-4.3 12.8-10.9 13.5v4.4c9.2-.7 15.5-5.6 15.5-18v-18.3h-4.7zM62.2 199v-2.2c0-12.7-8.8-17.4-21-17.4-12.1 0-20.7 4.7-20.7 17.4v2.2c0 12.8 8.6 17.6 20.7 17.6 1.5 0 3-.1 4.4-.3l11.8 6.2 2-3.3-8.2-4-6.4-3.1a32 32 0 01-3.6.2c-9.8 0-16-3.9-16-13.3v-2.2c0-9.3 6.2-13.1 16-13.1 9.9 0 16.3 3.8 16.3 13.1v2.2c0 5.3-2.1 8.7-5.6 10.8l4.8 2.4c3.4-2.8 5.5-7 5.5-13.2zM168 215.6h5.1L156 179.7h-4.8l17 36zM143 205l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.8-3.7H143zm133.7 10.7h5.2l-17.3-35.9h-4.8l17 36zm-25-10.7l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.7-3.7h-14.8zm73.8-2.5c6-1.2 9-5.4 9-11.4 0-8-4.5-10.9-12.9-10.9h-21.4v35.5h4.6v-31.3h16.5c5 0 8.5 1.4 8.5 6.7 0 5.2-3.5 7.7-8.5 7.7h-11.4v4.1h10.7l9.3 12.8h5.5l-9.9-13.2zm-117.4 9.9c-9.7 0-14.7-2.5-18.6-6.3l-2.2 3.8c5.1 5 11 6.7 21 6.7 1.6 0 3.1-.1 4.6-.3l-1.9-4h-3zm18.4-7c0-6.4-4.7-8.6-13.8-9.4l-10.1-1c-6.7-.7-9.3-2.2-9.3-5.6 0-2.5 1.4-4 4.6-5l-1.8-3.8c-4.7 1.4-7.5 4.2-7.5 8.9 0 5.2 3.4 8.7 13 9.6l11.3 1.2c6.4.6 8.9 2 8.9 5.4 0 2.7-2.1 4.7-6 5.8l1.8 3.9c5.3-1.6 8.9-4.7 8.9-10zm-20.3-21.9c7.9 0 13.3 1.8 18.1 5.7l1.8-3.9a30 30 0 00-19.6-5.9c-2 0-4 .1-5.7.3l1.9 4 3.5-.2z" />
+	<path fill="#00B4FF"
+		d="M.5 251.9c29.6-.5 59.2-.8 88.8-1l88.7-.3 88.7.3 44.4.4 44.4.6-44.4.6-44.4.4-88.7.3-88.7-.3a7981 7981 0 01-88.8-1z" />
+	<path fill="none" d="M-565.2 324H-252v15.8h-313.2z" />
+</svg>
\ No newline at end of file

src/boot/axios.ts

+import { boot } from 'quasar/wrappers'
+import axios, { AxiosInstance } from 'axios'
+
+declare module '@vue/runtime-core' {
+	interface ComponentCustomProperties {
+		$axios: AxiosInstance
+	}
+}
+
+// Be careful when using SSR for cross-request state pollution
+// due to creating a Singleton instance here;
+// If any client changes this (global) instance, it might be a
+// good idea to move this instance creation inside of the
+// "export default () => {}" function below (which runs individually
+// for each client)
+const api = axios.create({ baseURL: 'https://api.example.com' })
+
+export default boot(({ app }) => {
+	// for use inside Vue files (Options API) through this.$axios and this.$api
+
+	app.config.globalProperties.$axios = axios
+	// ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
+	//       so you won't necessarily have to import axios in each vue file
+
+	/**
+	 * @deprecated 弃用的方法
+	 */
+	app.config.globalProperties.$api = api
+	// ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
+	//       so you can easily perform requests against your app's API
+})
+
+export { api }

src/boot/dict.ts

+import { userDictionmary } from '@/config/dictionary'
+import { boot } from 'quasar/wrappers'
+
+export default boot(({ app }) => {
+	app.config.globalProperties.$userDictionmary = userDictionmary
+})
+
+export { userDictionmary }

src/boot/globalcmp.ts

+import { registeGlobalComponent } from '@/components'
+import { boot } from 'quasar/wrappers'
+
+export default boot(({ app }) => {
+	/** 自动注册全局组件  */
+    registeGlobalComponent(app)
+})

src/boot/i18n.ts

+import { boot } from 'quasar/wrappers'
+import { createI18n } from 'vue-i18n'
+
+import messages from 'src/i18n'
+
+const i18n = createI18n({
+	locale: 'en-US',
+	messages
+})
+
+export default boot(({ app }) => {
+	// Set i18n instance on app
+	app.use(i18n)
+})
+
+export { i18n }

src/boot/permission.ts

+import { ResultType, AuthMenuType } from '@/@types'
+import router from '@/router/index'
+
+import { getAuth, getUserAllMenu } from '@/utils/auth'
+import { LoadingBar } from 'quasar'
+LoadingBar.setDefaults({
+  color: 'primary',
+  size: '3px',
+  position: 'bottom'
+})
+
+let loadAsyncRouter = false
+
+const whiteList = ['/auth/login']
+
+router.beforeEach((to, from, next) => {
+  localStorage.setItem('routerBefore', from.path)
+  LoadingBar.start()
+  /** 请求头包含授权信息 并且 页面必须授权 直接进入 */
+  if (getAuth()) {
+    //debugger;
+    if (to.path === '/auth/login' || to.path === '/') {
+      next({
+        path: '/home'
+      })
+      LoadingBar.stop()
+    } else {
+      if (!loadAsyncRouter) {
+        // 判断当前用户是否获取权限
+        loadAsyncRouter = true
+        const allAuth = getUserAllMenu()
+        if (allAuth != ResultType.EmptyArray) {
+          //TODO: 动态生成并追加路由 //router.addRoutes(store.getters.addRouters);
+          //   if (to.path === '/404') {
+          //     //如果用户直接访问404调回原页面或首页
+          //     next(to.redirectedFrom || '/')
+          //   } else {
+          //检查是否有权限访问
+          const authMenu = allAuth.findIndex((x: AuthMenuType) => {
+            return x.menuUrl == to.path
+          })
+          if (authMenu != -1) {
+            next({
+              ...to,
+              replace: true
+            })
+          } else {
+            next('/404')
+          }
+          LoadingBar.stop()
+        } else {
+          next('/404')
+          LoadingBar.stop()
+        }
+      } else {
+        next()
+      }
+    }
+  } else {
+    if (whiteList.indexOf(to.path) !== -1) {
+      next()
+    } else {
+      next(`/auth/login?redirect=${decodeURIComponent(to.path)}`) // 否则全部重定向到登录页
+      LoadingBar.stop()
+    }
+  }
+})
+
+router.afterEach(() => {
+  LoadingBar.stop() // 结束Progress
+})
+
+router.onError(error => {
+  const pattern = /Loading chunk (\d)+ failed/g
+  const isChunkLoadFailed = error.message.match(pattern)
+  const targetPath = error.to
+  if (isChunkLoadFailed) {
+    router.replace(targetPath)
+  }
+})

src/components/CompositionComponent.vue

+<template>
+	<div>
+		<p>{{ title }}</p>
+		<ul>
+			<li v-for="todo in todos" :key="todo.id" @click="increment">{{ todo.id }} - {{ todo.content }}</li>
+		</ul>
+		<p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
+		<p>Active: {{ active ? 'yes' : 'no' }}</p>
+		<p>Clicks on todos: {{ clickCount }}</p>
+		<p>前端之神：罗超</p>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed, ref, toRef, Ref } from 'vue'
+import { Todo, Meta } from './models'
+
+function useClickCount() {
+	const clickCount = ref(0)
+	function increment() {
+		clickCount.value += 1
+		return clickCount.value
+	}
+
+	return { clickCount, increment }
+}
+
+function useDisplayTodo(todos: Ref<Todo[]>) {
+	const todoCount = computed(() => todos.value.length)
+	return { todoCount }
+}
+
+export default defineComponent({
+	name: 'CompositionComponent',
+	props: {
+		title: {
+			type: String,
+			required: true
+		},
+		todos: {
+			type: Array as PropType<Todo[]>,
+			default: () => []
+		},
+		meta: {
+			type: Object as PropType<Meta>,
+			required: true
+		},
+		active: {
+			type: Boolean
+		}
+	},
+	setup(props) {
+		return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')) }
+	}
+})
+</script>

src/components/EssentialLink.vue

+<template>
+	<q-item clickable tag="a" target="_blank" :href="link">
+		<q-item-section v-if="icon" avatar>
+			<q-icon :name="icon" />
+		</q-item-section>
+
+		<q-item-section>
+			<q-item-label>{{ title }}</q-item-label>
+			<q-item-label caption>
+				{{ caption }}
+			</q-item-label>
+		</q-item-section>
+	</q-item>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+	name: 'EssentialLink',
+	props: {
+		title: {
+			type: String,
+			required: true
+		},
+
+		caption: {
+			type: String,
+			default: ''
+		},
+
+		link: {
+			type: String,
+			default: '#'
+		},
+
+		icon: {
+			type: String,
+			default: ''
+		}
+	}
+})
+</script>

src/components/index.ts

+import { createApp } from 'vue'
+import { kebabCase } from 'lodash'
+
+/**
+ * @description 自动将 ./src/components/global 下的组件注册成为全局组件
+ * @param {vue} app 当前应用实例
+ * @returns {void} void
+ */
+export function registeGlobalComponent(app: ReturnType<typeof createApp>): void {
+  const files = require.context('./global', true, /\.(vue|ts)$/)
+  files.keys().forEach(key => {
+    const config = files(key)
+    const name = kebabCase(key.replace(/^\.\//, '').replace(/\.\w+$/, ''))
+    app.component(name, config.default || config)
+  })
+}

src/components/models.ts

+export interface Todo {
+	id: number
+	content: string
+}
+
+export interface Meta {
+	totalCount: number
+}

src/config/app.ts

+/**  跟应用全局相关的静态配置放在这里  */
+import { Notify } from 'quasar'
+
+const AppConfig = {
+	$message: Notify
+}
+const StaticConfig = {
+	MaxPageSize: 1000
+}
+export { AppConfig, StaticConfig }

src/config/color.ts

+/**
+ * description 举例类，暂时不要直接使用
+ */
+
+const Color = {
+	antd: {
+		primary: '#00a971', // 全局主色
+		link: '#00a971', // 链接色
+		success: '#52c41a', // 成功色
+		warning: '#faad14', // 警告色
+		error: '#f5222d', // 错误色
+		fontSizeBase: '14px', // 主字号
+		headingColor: 'rgba(0, 0, 0, 0.85)', // 标题色
+		textColor: 'rgba(0, 0, 0, 0.65)', // 主文本色
+		textColorSecondary: 'rgba(0, 0, 0, 0.45)', // 次文本色
+		disabledColor: 'rgba(0, 0, 0, 0.25)', // 失效色
+		borderRadiusBase: '2px', // 组件/浮层圆角
+		borderColorBase: '#d9d9d9', // 边框色
+		boxShadowBase: '0 2px 8px rgba(0, 0, 0, 0.15);' //
+	}
+}
+
+type ColorType = typeof Color
+
+export default ColorType

src/config/dictionary.ts

+/**
+ * @description 用户字典数据
+ */
+const userDictionmary = {
+	token: 'access_token',
+	serverTokenName: 'Token'
+}
+
+export { userDictionmary }

src/css/app.scss

+// app global css in SCSS form

src/css/font.sass

+@font-face
+    // 苹方字体
+    font-family: 'pf'
+    src: url('../assets/fonts/PingFangMedium.ttf') format('truetype')
+    font-weight: normal
+    font-style: normal
+@font-face
+    // 苹方加粗字体
+    font-family: 'pfb'
+    src: url('../assets/fonts/PingFangBold.ttf') format('truetype')
+    font-weight: normal
+    font-style: normal
+@font-face
+    // 微软雅黑极细字体
+    font-family: 'msl'
+    src: url('../assets/fonts/PingFangBold.ttf') format('truetype')
+    font-weight: normal
+    font-style: normal
+@font-face
+    // 加粗数字字体
+    font-family: 'din'
+    src: url('../assets/fonts/DIN-Bold.otf') format('opentype')
+    font-weight: normal
+    font-style: normal
+@font-face
+    // 正常英文字体
+    font-family: 'Poppins'
+    src: url('../assets/fonts/Poppins-Regular.ttf') format('truetype')
+    font-weight: normal
+    font-style: normal
+.pf
+    font-family: 'pf'
+.pfb
+    font-family: 'pfb'
+.msl
+    font-family: 'msl'
+.din
+    font-family: 'din'
+.Poppins
+    font-family: 'Poppins'
+body
+    font-family: 'Poppins','Helvetica','sans-serif',pf
+    color: var(--q-dark)
+.no-underline
+    text-decoration: none !important
+.change-a-primary
+    color: var(--q-dark)
+.change-a-primary:hover
+    color: var(--q-primary)

src/css/quasar.variables.scss

+// Quasar SCSS (& Sass) Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
+
+// Check documentation for full list of Quasar variables
+
+// Your own variables (that are declared here) and Quasar's own
+// ones will be available out of the box in your .vue/.scss/.sass files
+
+// It's highly recommended to change the default colors
+// to match your app's branding.
+// Tip: Use the "Theme Builder" on Quasar's documentation website.
+
+// $primary   : #1976D2;
+// $secondary : #26A69A;
+// $accent    : #9C27B0;
+
+// $dark      : #1D1D1D;
+
+// $positive  : #21BA45;
+// $negative  : #C10015;
+// $info      : #31CCEC;
+// $warning   : #F2C037;
+
+// src/css/quasar.variables.scss
+
+$primary: #04c8c8;
+$secondary: #e4e6ef;
+$accent: #009ef7;
+
+$dark: #181c32;
+
+$positive: #20c997;
+$negative: #f1416c;
+$info: #7239ea;
+$warning: #ffc700;

src/env.d.ts

+declare namespace NodeJS {
+	interface ProcessEnv {
+		NODE_ENV: string
+		VUE_ROUTER_MODE: 'hash' | 'history' | 'abstract' | undefined
+		VUE_ROUTER_BASE: string | undefined
+	}
+}

src/i18n/en-US/index.ts

+// This is just an example,
+// so you can safely delete all default props below
+
+export default {
+	failed: 'Action failed',
+	success: 'Action was successful'
+}

src/i18n/index.ts

+import enUS from './en-US'
+
+export default {
+	'en-US': enUS
+}

src/index.template.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= productName %></title>
+
+    <meta charset="utf-8">
+    <meta name="description" content="<%= productDescription %>">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+
+    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+    <link rel="icon" type="image/ico" href="favicon.ico">
+  </head>
+  <body>
+    <!-- DO NOT touch the following DIV -->
+    <div id="q-app"></div>
+  </body>
+</html>

src/layouts/MainLayout.vue

+<template>
+	<q-layout view="lHh Lpr lFf">
+		<q-header elevated>
+			<q-toolbar>
+				<q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
+
+				<q-toolbar-title>Quasar App</q-toolbar-title>
+
+				<div>Quasar v{{ $q.version }}</div>
+			</q-toolbar>
+		</q-header>
+
+		<q-drawer v-model="leftDrawerOpen" show-if-above bordered>
+			<q-list>
+				<q-item-label header>Essential Links</q-item-label>
+
+				<EssentialLink v-for="link in essentialLinks" :key="link.title" v-bind="link" />
+			</q-list>
+		</q-drawer>
+
+		<q-page-container>
+			<router-view />
+		</q-page-container>
+	</q-layout>
+</template>
+
+<script lang="ts">
+import EssentialLink from 'components/EssentialLink.vue'
+
+const linksList = [
+	{
+		title: 'Docs',
+		caption: 'quasar.dev',
+		icon: 'school',
+		link: 'https://quasar.dev'
+	},
+	{
+		title: 'Github',
+		caption: 'github.com/quasarframework',
+		icon: 'code',
+		link: 'https://github.com/quasarframework'
+	},
+	{
+		title: 'Discord Chat Channel',
+		caption: 'chat.quasar.dev',
+		icon: 'chat',
+		link: 'https://chat.quasar.dev'
+	},
+	{
+		title: 'Forum',
+		caption: 'forum.quasar.dev',
+		icon: 'record_voice_over',
+		link: 'https://forum.quasar.dev'
+	},
+	{
+		title: 'Twitter',
+		caption: '@quasarframework',
+		icon: 'rss_feed',
+		link: 'https://twitter.quasar.dev'
+	},
+	{
+		title: 'Facebook',
+		caption: '@QuasarFramework',
+		icon: 'public',
+		link: 'https://facebook.quasar.dev'
+	},
+	{
+		title: 'Quasar Awesome',
+		caption: 'Community Quasar projects',
+		icon: 'favorite',
+		link: 'https://awesome.quasar.dev'
+	}
+]
+
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+	name: 'MainLayout',
+
+	components: {
+		EssentialLink
+	},
+
+	setup() {
+		const leftDrawerOpen = ref(false)
+
+		return {
+			essentialLinks: linksList,
+			leftDrawerOpen,
+			toggleLeftDrawer() {
+				leftDrawerOpen.value = !leftDrawerOpen.value
+			}
+		}
+	}
+})
+</script>

src/module/user/loginModule.ts

+import message from '@/utils/message'
+import { reactive,ref } from 'vue'
+interface LoginParams {
+  username: string
+  password: string
+  remeber: boolean
+}
+
+const userUserLoginModule = () => {
+  const userModel: LoginParams = reactive({
+    username: '',
+    password: '',
+    remeber: false
+  })
+
+  const userValidateRule = reactive({
+    usernameRule: [(val: any) => !!val || '请填写账户信息'],
+    userpasswordRule: [(val: any) => !!val || '请填写密码信息']
+  })
+
+  const usernameRef=ref(null)
+  const passwordRef=ref(null)
+
+  const loginSubmit = () => {
+    const ur=(usernameRef as any) //断言任意类型
+    const pr=(passwordRef as any)
+    ur.value.validate()
+    pr.value.validate()
+    if (ur.value.hasError || pr.value.hasError) {
+      message.warnMsg('请完善登录信息')
+    } else {
+      message.successMsg('验证通过')
+    }
+  }
+
+  return { userModel, usernameRef, passwordRef, userValidateRule, loginSubmit }
+}
+
+export default userUserLoginModule

src/pages/Error404.vue

+<template>
+	<div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
+		<div>
+			<div style="font-size: 30vh">404</div>
+
+			<div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
+
+			<q-btn class="q-mt-xl" color="white" text-color="blue" unelevated to="/" label="Go Home" no-caps />
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+	name: 'Error404'
+})
+</script>

src/pages/Index.vue

+<template>
+  <q-page class="row items-center justify-evenly">
+    <example-component
+      title="Example component"
+      active
+      :todos="todos"
+      :meta="meta"
+    ></example-component>
+  </q-page>
+</template>
+
+<script lang="ts">
+import { Todo, Meta } from '@/components/models';
+import ExampleComponent from 'components/CompositionComponent.vue';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  name: 'PageIndex',
+  components: { ExampleComponent },
+  setup() {
+    const todos = ref<Todo[]>([
+      {
+        id: 1,
+        content: 'ct1'
+      },
+      {
+        id: 2,
+        content: 'ct2'
+      },
+      {
+        id: 3,
+        content: 'ct3'
+      },
+      {
+        id: 4,
+        content: 'ct4'
+      },
+      {
+        id: 5,
+        content: 'ct5'
+      }
+    ]);
+    const meta = ref<Meta>({
+      totalCount: 1200
+    });
+    return { todos, meta };
+  }
+});
+</script>

src/pages/auth/login.vue

+<template>
+  <div class="row">
+    <div class="col window-height column">
+      <div class="col q-pa-lg flex justify-center items-center">
+        <div>
+          <img src="../../assets/images/big-logo.png" style="height: 60px" class="q-mb-lg" alt="" />
+          <div class="text-h5 pfb q-mb-md">欢迎回来，亲爱的用户</div>
+          <div class="pfb text-grey-5 text-subtitle">通过配置您的推广渠道，实现对线索和客户的快速获取<br />并且及时的跟进</div>
+        </div>
+      </div>
+      <div class="col q-mb-lg login-bg"></div>
+    </div>
+    <div class="col q-pa-xl column">
+      <div class="col">
+        <q-card class="w-450 q-ma-xl q-pa-xl">
+          <div class="text-h5 pfb q-mb-md text-center">登录大水豚</div>
+          <div class="text-center q-mb-lg">
+            <span class="text-grey-5 pfb text-subtitle">新用户？</span>
+            <router-link :to="{ path: '/auth/regist' }" class="text-primary pfb text-subtitle">1分钟创建新账户</router-link>
+          </div>
+          <div class="text-body pfb">账户：</div>
+          <div class="q-mt-xs">
+            <q-input standout v-model="userModel.username" dense ref="usernameRef" :rules="userValidateRule.usernameRule" />
+          </div>
+          <div class="row q-mt-lg">
+            <div class="col text-body pfb">密码：</div>
+            <div class="col text-right">
+              <router-link :to="{ path: '/auth/forget' }" class="text-primary pfb text-body no-underline">忘记密码</router-link>
+            </div>
+          </div>
+          <div class="q-mt-xs">
+            <q-input standout v-model="userModel.password" dense ref="passwordRef" :rules="userValidateRule.userpasswordRule" />
+          </div>
+          <div class="q-mt-md">
+            <q-checkbox dense v-model="userModel.remeber" label="30天免登录" color="accent" />
+          </div>
+          <div class="q-mt-lg text-center">
+            <q-btn class="pfb" color="primary" unelevated label="登 录" style="width: 10rem" @click="loginSubmit"></q-btn>
+          </div>
+        </q-card>
+      </div>
+      <div class="q-my-lg q-mx-xl text-center w-450-only">
+        <router-link :to="{ path: '/auth/forget' }" class="pfb text-body no-underline change-a-primary q-mr-md">关于大水豚</router-link>
+        <router-link :to="{ path: '/auth/forget' }" class="pfb text-body no-underline change-a-primary q-mr-md">联系我们</router-link>
+        <router-link :to="{ path: '/auth/forget' }" class="pfb text-body no-underline change-a-primary q-mr-md">技术支持</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+import useLgoinModule from '@/module/user/loginModule'
+
+export default defineComponent({
+  setup() {
+    let { userModel, usernameRef, passwordRef, userValidateRule, loginSubmit } = useLgoinModule()
+
+    return { userModel, usernameRef, passwordRef, userValidateRule, loginSubmit }
+  }
+})
+</script>
+
+<style>
+.login-bg {
+  background-image: url(../../assets/images/8.png);
+  background-position-x: center;
+  background-position-y: bottom;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+.w-450 {
+  width: 450px;
+  box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075) !important;
+  border-radius: 0.475rem !important;
+}
+.w-450-only{
+  width: 450px;
+}
+</style>

src/router/index.ts

+// import { route } from 'quasar/wrappers';
+import { createMemoryHistory, createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import routes from './routes'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Router instance.
+ */
+
+// export default route(function (/* { store, ssrContext } */) {
+//   const createHistory = process.env.SERVER
+//     ? createMemoryHistory
+//     : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory);
+
+//   const Router = createRouter({
+//     scrollBehavior: () => ({ left: 0, top: 0 }),
+//     routes,
+
+//     // Leave this as is and make changes in quasar.conf.js instead!
+//     // quasar.conf.js -> build -> vueRouterMode
+//     // quasar.conf.js -> build -> publicPath
+//     history: createHistory(
+//       process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE
+//     ),
+//   });
+
+//   return Router;
+// });
+
+const createHistory = process.env.SERVER ? createMemoryHistory : process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory
+
+const Router = createRouter({
+	scrollBehavior: () => ({ left: 0, top: 0 }),
+	routes,
+
+	// Leave this as is and make changes in quasar.conf.js instead!
+	// quasar.conf.js -> build -> vueRouterMode
+	// quasar.conf.js -> build -> publicPath
+	history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)
+})
+export default Router

src/router/routes.ts

+import { RouteRecordRaw } from 'vue-router'
+
+const routes: RouteRecordRaw[] = [
+	{
+		path: '/',
+		component: () => import('layouts/MainLayout.vue'),
+		children: [{ path: '', component: () => import('pages/Index.vue') }]
+	},
+	{
+		path:'/auth/login',
+		component: () => import('@/pages/auth/login.vue')
+	},
+	// Always leave this as last one,
+	// but you can also remove it
+	{
+		path: '/:catchAll(.*)*',
+		component: () => import('pages/Error404.vue')
+	}
+]
+
+export default routes

src/shims-vue.d.ts

+// Mocks all files ending in `.vue` showing them as plain Vue instances
+declare module '*.vue' {
+	import { ComponentOptions } from 'vue'
+	const component: ComponentOptions
+	export default component
+}

src/store/index.ts

+import { createStore, createLogger, Store } from 'vuex'
+import createPersistedState from 'vuex-persistedstate'
+import mutations from './mutations'
+import modules from './modules'
+import { StateType } from '@/@types'
+import { InjectionKey } from 'vue'
+
+export const key: InjectionKey<Store<StateType>> = Symbol()
+
+const store: Store<StateType> = createStore({
+  strict: !!process.env.DEBUGGING,
+  mutations,
+  actions: {},
+  modules: { ...modules },
+  plugins:
+    process.env.NODE_ENV !== 'production'
+      ? [
+          createLogger(),
+          createPersistedState({
+            paths: ['app', 'user']
+          })
+        ]
+      : [
+          createPersistedState({
+            paths: ['app', 'user']
+          })
+        ]
+})
+
+export default store

src/store/modules/app/actions.ts

+export default {
+	//
+}

src/store/modules/app/getters.ts

+export default {
+	//
+}

src/store/modules/app/mutations.ts

+export default {
+	__set(state: any, msg: { key: string; val: any }) {
+		state[msg.key] = msg.val
+	}
+}

src/store/modules/app/state.ts

+import { StateType } from '@/@types'
+import { Module } from 'vuex'
+
+const state = {
+	language: 'zhCN',
+	theme: 'light',
+	version: '0.0.1',
+	fullLoading: false,
+	loadingText: 'Loading...',
+	currentActiveNav: '解决方案'
+}
+type AppStateType = typeof state
+
+const app: Module<AppStateType, StateType> = { namespaced: true, ...state }
+
+export { AppStateType, state }
+export default app

src/store/modules/index.ts

+// https://vuex.vuejs.org/en/modules.html
+
+const files = require.context('.', true, /\.ts$/)
+const modules: any = {}
+
+files.keys().forEach((key: string) => {
+	if (key === './index.ts') return
+	const path = key.replace(/(\.\/|\.ts)/g, '')
+	const [namespace, imported] = path.split('/')
+	if (!modules[namespace]) {
+		modules[namespace] = {
+			namespaced: true
+		}
+	}
+	modules[namespace][imported] = files(key).default
+})
+
+export default modules

src/store/modules/user/actions.ts

+import UserService from '@/api/user'
+import { setStoreState } from '../../utils'
+import Store from '@/store'
+/**
+ * @description 所有跟用户相关的内容
+ * @return status 返回状态  err_code：1，逻辑正确，err_code：0，发生错误。
+ */
+
+const userActions = {
+	// 刷新令牌
+	refreshToken() {
+		return UserService.refreshToken({
+			// eslint-disable-next-line
+			refresh_token: Store.state.user.token.refresh_token
+		}).then(res => {
+			// token过期时间
+			const expireTime = res.data.expires_in * 1000 + new Date().getTime()
+			setStoreState('user', 'token', { ...res.data, expireTime })
+		})
+	},
+	// 获取用户信息
+	getUserDetail() {
+		return UserService.getUserDetail().then(res => {
+			setStoreState('user', 'userDetail', res.data.data)
+		})
+	}
+}
+
+type UserActionsType = typeof userActions
+
+export { UserActionsType }
+export default userActions

src/store/modules/user/getters.ts

+import { ResultType } from '@/@types'
+import store from '@/store'
+
+const userGetter = {
+  getUserToken() {
+    const token = store.state.user.token
+    return token.access_token ?? ResultType.Empty
+  },
+  getUserAllAuth() {
+    return store.state.user.menuList
+  }
+}
+
+type UserGetter = typeof userGetter
+export { UserGetter }
+export default userGetter

src/store/modules/user/modules/team/actions.ts

+export default {
+	//
+}

src/store/modules/user/modules/team/getters.ts

+export default {
+	//
+}

src/store/modules/user/modules/team/mutations.ts

+export default {
+	__set(state: any, msg: { key: string; val: any }) {
+		state[msg.key] = msg.val
+	}
+}

src/store/modules/user/modules/team/state.ts

+import { Module } from 'vuex'
+import { StateType } from '@/@types/index'
+const state = {
+	teamName: '汉'
+}
+type TeamStateType = typeof state
+
+const ModuleTeam: Module<TeamStateType, StateType> = {
+	namespaced: true,
+	...state
+}
+
+export { TeamStateType, state }
+export default ModuleTeam

src/store/modules/user/mutations.ts

+export default {
+	__set(state: any, msg: { key: string; val: any }) {
+		state[msg.key] = msg.val
+	}
+}

src/store/modules/user/state.ts

+import { AuthMenuType, StateType } from '@/@types'
+import { Module } from 'vuex'
+import ModuleTeam from './modules/team/state'
+interface Token {
+  [propertys: string]: any
+}
+const state = {
+  token: {} as Token,
+  userDetail: {
+    email: '',
+    type: -1, // 用户账号本身类型  0：主账号，1：子账号
+    userId: -1,
+    username: '',
+    description: '',
+    nickName: '',
+    phone: '',
+    tenantId: 0,
+    roleId: 0
+  },
+  currentTeamRoleId: 0, // 当前所选择的团队用户所具有的权限
+  currentProjectRoleId: 0, // 当前所选择的项目用户所具有的权限
+  menuList: [] as Array<AuthMenuType>
+}
+type UserStateType = typeof state
+
+const user: Module<UserStateType, StateType> = {
+  namespaced: true,
+  ...state,
+  modules: {
+    team: ModuleTeam
+  }
+}
+
+export { UserStateType, state }
+export default user

src/store/mutations.ts

+/** 一个封装常规 mutation 操作的常规方法  */
+export default {
+	__set(state: any, msg: { key: string; val: any }) {
+		state[msg.key] = msg.val
+	}
+}

src/store/store-flag.d.ts

+/* eslint-disable */
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import 'quasar/dist/types/feature-flag'
+
+declare module 'quasar/dist/types/feature-flag' {
+	interface QuasarFeatureFlags {
+		store: true
+	}
+}

src/store/utils.ts

+import store from '@/store'
+
+// 定义 state 下的 module 值
+type ModuleNameType = 'app' | 'console' | 'user'
+
+/**
+ * @description setStoreState -方法是一个 mutaitions 的操作
+ * @type {T} T - 你要更改的模块的类型
+ * @param {string}  module - 要操作的state 的 module 名
+ * @param {string}  key - 要操作的state 的 module 下的 key 值
+ * @param {any} value - 当有 msg 参数时,视为赋值操作,触发 mutation,msg 则为要复制的数据.
+ * @example 如果需要更改 app 模块下的 theme为 dark，这样使用：setStoreState('app','theme','dark')
+ * @example 目前只支持更改 module 的 state 第一层，不支持单独修改深层嵌套的 key，如需更改，请直接替换第一层的对象
+ *  如
+ *   ``` const state = {
+ *                 name: {
+ *                   firstName:'jack',
+ *                   lastName:'Ma'
+ *                 }
+ *               }
+ *   ```
+ *  想要单独修改 firstName,直接使用 setStoreState<AppStateType>('app','name',{firstName:'modifiedName',lastName:'Ma'})
+ */
+
+export function setStoreState<T>(module: ModuleNameType, key: keyof T, value: any) {
+	store.commit({
+		type: module + '/__set',
+		key: key,
+		val: value
+	})
+}
+
+/**
+ * @description 封装 dispatch 方法
+ * @type {T} T  你要派发actions的模块的类型
+ * @example 使用方法如下  const result = await dispatchActions<UserActionsType>('console','refreshToken',1)
+ */
+export function dispatchAction<T>(module: ModuleNameType, key: keyof T, value?: any) {
+	store.dispatch(`${module}/${key}`, value)
+}
+
+/**
+ * @description 封装 dispatch 方法
+ * @type {T} T  你要获取 getters的模块的类型
+ * @example 使用方法如下  const result =  getStoreGetter<ConsoleGetterType>('console','list')
+ */
+export function getStoreGetter<T>(module: ModuleNameType, key: keyof T) {
+	return store.getters[`${module}/${key}`]
+}

src/utils/auth.ts

+import { getStoreGetter } from '@/store/utils'
+import { UserGetter } from '@/store/modules/user/getters'
+import { ResultType } from '@/@types'
+
+/**
+ * @description 获取授权信息
+ */
+export function getAuth() {
+  const token = getStoreGetter<UserGetter>('user', 'getUserToken')
+  return token != ResultType.Empty
+}
+
+/**
+ * 获取用户所有的权限菜单
+ * @returns 菜单数组
+ */
+export function getUserAllMenu() {
+  const auths = getStoreGetter<UserGetter>('user', 'getUserAllAuth')
+  return auths.length > 0 ? auths : ResultType.EmptyArray
+}

src/utils/message.ts

+import { Notify } from 'quasar'
+
+const message = {
+  warnMsg: (msg: string) => {
+    Notify.create({
+      message: msg,
+      color: 'warning',
+      textColor: 'dark',
+      icon: 'announcement'
+    })
+  },
+  successMsg: (msg: string) => {
+    Notify.create({
+      message: msg,
+      color: 'positive',
+      textColor: 'white',
+      icon: 'success'
+    })
+  }
+}
+
+export default message

src/utils/tools.ts

+/**
+ * @description 按照需要写入 必要可以注入全局
+ */

src/utils/validate.ts

+/**
+ * 验证工具类
+ */
+
+/* 合法uri*/
+export function validateURL(textval: string) {
+	const urlregex =
+		/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+	return urlregex.test(textval)
+}
+
+/* 小写字母*/
+export function validateLowerCase(str: string) {
+	const reg = /^[a-z]+$/
+	return reg.test(str)
+}
+
+/* 大写字母*/
+export function validateUpperCase(str: string) {
+	const reg = /^[A-Z]+$/
+	return reg.test(str)
+}
+
+/* 大小写字母*/
+export function validatAlphabets(str: string) {
+	const reg = /^[A-Za-z]+$/
+	return reg.test(str)
+}
+
+/** 比对数组是否相同 */
+export function compareArray(arrA: any[], arrB: any[]) {
+	let isSame = true
+	if (arrA.length !== arrB.length) {
+		return false
+	} else {
+		arrA.some((el, idx) => {
+			if (el !== arrB[idx]) {
+				isSame = false
+				return true
+			}
+		})
+	}
+	return isSame
+}

tsconfig.json

+{
+  "extends": "@quasar/app/tsconfig-preset",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "types": [
+      "node",
+      "webpack-env" // here
+    ]
+  }
+}