refactor: 重构 pont 模板、统一 Mock 与正式环境的 API 响应包装类

.eslintignore

-
 *.sh
 node_modules
 *.md
@@ -13,3 +12,5 @@ dist
 .local
 /bin
 Dockerfile
+
+types/auto-imports.d.ts

.prettierignore

@@ -7,3 +7,5 @@
 **/*.sh
 
 /public/*
+
+types/auto-imports.d.ts

build/vite/plugin/autoImport.ts

+import type { Plugin } from 'vite'
+
+// https://github.com/antfu/unplugin-auto-import
+import AutoImport from 'unplugin-auto-import/vite'
+
+/**
+ * unplugin-auto-import
+ * @returns Plugin
+ */
+export function configAutoImportPlugin(): Plugin {
+    return AutoImport({
+        dts: 'types/auto-imports.d.ts',
+        imports: ['vue', 'vue-router', { '/@/config/app': ['$app'] }, { '/@/api/services/mods': ['API'] }],
+    })
+}

build/vite/plugin/index.ts

@@ -16,6 +16,7 @@ import { configThemePlugin } from './theme'
 import { configImageminPlugin } from './imagemin'
 import { configSvgIconsPlugin } from './svgSprite'
 import { configOptimizePlugin } from './optimize'
+import { configAutoImportPlugin } from './autoImport'
 
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
     const {
@@ -68,15 +69,16 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
     // vite-plugin-optimize-persist
     vitePlugins.push(configOptimizePlugin())
 
+    // vite-plugin-auto-import
+    vitePlugins.push(configAutoImportPlugin())
+
     // The following plugins only work in the production environment
     if (isBuild) {
         // vite-plugin-imagemin
         VITE_USE_IMAGEMIN && vitePlugins.push(configImageminPlugin())
 
         // rollup-plugin-gzip
-        vitePlugins.push(
-            configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE),
-        )
+        vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE))
 
         // vite-plugin-pwa
         vitePlugins.push(configPwaConfig(viteEnv))

mock/_util.ts

-// Interface data format used to return a unified format
+import dayjs from 'dayjs'
+import { MockMethod } from 'vite-plugin-mock'
 
-export function resultSuccess<T = Recordable>(result: T, { message = 'ok' } = {}) {
-    return {
-        code: 0,
-        result,
-        message,
-        type: 'success',
-    }
-}
-
-export function resultPageSuccess<T = any>(page: number, pageSize: number, list: T[], { message = 'ok' } = {}) {
-    const pageData = pagination(page, pageSize, list)
+/**
+ * 构建 URL 请求地址
+ * @param path 请求地址
+ * @returns 拼接 BASE_URL 后的请求地址
+ */
+export const URL = (path: string): string => `/basic-api${path}`
 
-    return {
-        ...resultSuccess({
-            items: pageData,
-            total: list.length,
-        }),
-        message,
+/**
+ * 通用响应工具类
+ */
+export class Response {
+    /**
+     * 成功返回
+     * @param data 数据
+     * @param param 覆盖响应内容
+     * @returns 通用响应结果
+     */
+    static ok<T = any>(data: T, { message = 'OK', code = 0 } = {}): defs.Result<T> {
+        return {
+            code,
+            message,
+            status: 200,
+            times: '0.0s',
+            timestamp: dayjs().format('yyyy-MM-dd HH:mm:ss'),
+            body: data,
+        }
     }
-}
 
-export function resultError(message = 'Request failed', { code = -1, result = null } = {}) {
-    return {
-        code,
-        result,
-        message,
-        type: 'error',
+    /**
+     * 失败返回
+     * @param message 失败的消息
+     * @param status 状态码
+     * @param param 覆盖响应内容
+     * @returns 通用响应结果
+     */
+    static no(message = 'fail', { status = 400, code = -1, details = '' } = {}): defs.Result<string> {
+        return {
+            code,
+            status,
+            message,
+            details,
+            times: '0.0s',
+            timestamp: dayjs().format('yyyy-MM-dd HH:mm:ss'),
+            body: null,
+        }
     }
-}
 
-export function pagination<T = any>(pageNo: number, pageSize: number, array: T[]): T[] {
-    const offset = (pageNo - 1) * Number(pageSize)
-    const ret =
-        offset + Number(pageSize) >= array.length
-            ? array.slice(offset, array.length)
-            : array.slice(offset, offset + Number(pageSize))
-    return ret
+    /**
+     * 包装正常返回的 GET 请求 MockMethod
+     * @param url 请求地址
+     * @param data 响应数据
+     * @returns 经过包装的 MockMethod
+     */
+    static getOk<T = any>(url: string, data: T): MockMethod {
+        return {
+            url: URL(url),
+            method: 'get',
+            response: () => {
+                return Response.ok(data)
+            },
+        }
+    }
 }
 
-export interface requestParams {
+export class Request {
     method: string
     body: any
     headers?: { authorization?: string }
     query: any
-}
 
-/**
- * @description 本函数用于从request数据中获取token，请根据项目的实际情况修改
- *
- */
-export function getRequestToken({ headers }: requestParams): string | undefined {
-    return headers?.authorization
+    /**
+     * 获取 Token 值
+     * @param param 请求参数
+     * @returns token
+     */
+    static getRequestToken({ headers }: Request): string | undefined {
+        return headers?.authorization
+    }
 }

mock/demo/account.ts

 import { MockMethod } from 'vite-plugin-mock'
-import { resultSuccess, resultError } from '../_util'
-import { ResultEnum } from '../../src/enums/httpEnum'
+import { Response } from '../_util'
+import * as HTTP from '../../src/api/types'
 
 const userInfo = {
-    name: 'Vben',
+    name: 'Basic',
     userid: '00000001',
     email: 'test@gmail.com',
     signature: '海纳百川，有容乃大',
@@ -49,7 +49,7 @@ export default [
         timeout: 1000,
         method: 'get',
         response: () => {
-            return resultSuccess(userInfo)
+            return Response.ok(userInfo)
         },
     },
     {
@@ -57,7 +57,7 @@ export default [
         method: 'post',
         statusCode: 401,
         response: () => {
-            return resultError()
+            return Response.no()
         },
     },
     {
@@ -65,7 +65,7 @@ export default [
         method: 'post',
         statusCode: 200,
         response: () => {
-            return resultError('Token Expired!', { code: ResultEnum.TIMEOUT as number })
+            return Response.no('Token Expired!', { status: HTTP.Status.UNAUTHORIZED })
         },
     },
 ] as MockMethod[]

mock/demo/api-cascader.ts

 import { MockMethod } from 'vite-plugin-mock'
-import { resultSuccess } from '../_util'
+import { Response } from '../_util'
 
 const areaList: any[] = [
     {
@@ -317,9 +317,9 @@ export default [
         response: ({ body }) => {
             const { parentCode } = body || {}
             if (!parentCode) {
-                return resultSuccess(areaList.filter((it) => it.code === '430000'))
+                return Response.ok(areaList.filter((it) => it.code === '430000'))
             }
-            return resultSuccess(areaList.filter((it) => it.parentCode === parentCode))
+            return Response.ok(areaList.filter((it) => it.parentCode === parentCode))
         },
     },
 ] as MockMethod[]

mock/demo/select-demo.ts

 import { MockMethod } from 'vite-plugin-mock'
-import { resultSuccess } from '../_util'
+import { Response } from '../_util'
 
 const demoList = (keyword, count = 20) => {
     const result = {
@@ -22,7 +22,7 @@ export default [
         response: ({ query }) => {
             const { keyword, count } = query
             console.log(keyword)
-            return resultSuccess(demoList(keyword, count))
+            return Response.ok(demoList(keyword, count))
         },
     },
 ] as MockMethod[]

mock/demo/system.ts

 import { MockMethod } from 'vite-plugin-mock'
-import { resultError, resultPageSuccess, resultSuccess } from '../_util'
+import { Response } from '../_util'
 
 const accountList = (() => {
     const result: any[] = []
@@ -135,18 +135,22 @@ export default [
         url: '/basic-api/system/getAccountList',
         timeout: 100,
         method: 'get',
-        response: ({ query }) => {
-            const { page = 1, pageSize = 20 } = query
-            return resultPageSuccess(page, pageSize, accountList)
+        response: () => {
+            return Response.ok({
+                data: accountList,
+                total: accountList.length,
+            })
         },
     },
     {
         url: '/basic-api/system/getRoleListByPage',
         timeout: 100,
         method: 'get',
-        response: ({ query }) => {
-            const { page = 1, pageSize = 20 } = query
-            return resultPageSuccess(page, pageSize, roleList)
+        response: () => {
+            return Response.ok({
+                data: roleList,
+                total: roleList.length,
+            })
         },
     },
     {
@@ -155,7 +159,7 @@ export default [
         method: 'post',
         response: ({ query }) => {
             const { id, status } = query
-            return resultSuccess({ id, status })
+            return Response.ok({ id, status })
         },
     },
     {
@@ -163,7 +167,7 @@ export default [
         timeout: 100,
         method: 'get',
         response: () => {
-            return resultSuccess(roleList)
+            return Response.ok(roleList)
         },
     },
     {
@@ -171,7 +175,7 @@ export default [
         timeout: 100,
         method: 'get',
         response: () => {
-            return resultSuccess(deptList)
+            return Response.ok(deptList)
         },
     },
     {
@@ -179,7 +183,7 @@ export default [
         timeout: 100,
         method: 'get',
         response: () => {
-            return resultSuccess(menuList)
+            return Response.ok(menuList)
         },
     },
     {
@@ -189,9 +193,9 @@ export default [
         response: ({ body }) => {
             const { account } = body || {}
             if (account && account.indexOf('admin') !== -1) {
-                return resultError('该字段不能包含admin')
+                return Response.no('该字段不能包含admin')
             } else {
-                return resultSuccess(`${account} can use`)
+                return Response.ok(`${account} can use`)
             }
         },
     },

mock/demo/table-demo.ts

 import { MockMethod } from 'vite-plugin-mock'
 import { Random } from 'mockjs'
-import { resultPageSuccess } from '../_util'
+import { Response } from '../_util'
 
 function getRandomPics(count = 10): string[] {
     const arr: string[] = []
@@ -44,9 +44,11 @@ export default [
         url: '/basic-api/table/getDemoList',
         timeout: 100,
         method: 'get',
-        response: ({ query }) => {
-            const { page = 1, pageSize = 20 } = query
-            return resultPageSuccess(page, pageSize, demoList)
+        response: () => {
+            return Response.ok({
+                data: demoList,
+                total: demoList.length,
+            })
         },
     },
 ] as MockMethod[]

mock/demo/tree-demo.ts

 import { MockMethod } from 'vite-plugin-mock'
-import { resultSuccess } from '../_util'
+import { Response } from '../_util'
 
 const demoTreeList = (keyword) => {
     const result = {
@@ -32,7 +32,7 @@ export default [
         response: ({ query }) => {
             const { keyword } = query
             console.log(keyword)
-            return resultSuccess(demoTreeList(keyword))
+            return Response.ok(demoTreeList(keyword))
         },
     },
 ] as MockMethod[]

mock/sys/menu.ts

-import { resultSuccess, resultError, getRequestToken, requestParams } from '../_util'
 import { MockMethod } from 'vite-plugin-mock'
 import { createFakeUserList } from './user'
+import { Response, Request } from '../_util'
 
 // single
 const dashboardRoute = {
@@ -228,14 +228,14 @@ export default [
         url: '/basic-api/getMenuList',
         timeout: 1000,
         method: 'get',
-        response: (request: requestParams) => {
-            const token = getRequestToken(request)
+        response: (request: Request) => {
+            const token = Request.getRequestToken(request)
             if (!token) {
-                return resultError('Invalid token!')
+                return Response.no('Invalid token!')
             }
             const checkUser = createFakeUserList().find((item) => item.token === token)
             if (!checkUser) {
-                return resultError('Invalid user token!')
+                return Response.no('Invalid user token!')
             }
             const id = checkUser.userId
             let menu: Object[]
@@ -252,7 +252,7 @@ export default [
                     menu = []
             }
 
-            return resultSuccess(menu)
+            return Response.ok(menu)
         },
     },
 ] as MockMethod[]

mock/sys/user.ts

 import { MockMethod } from 'vite-plugin-mock'
-import { resultError, resultSuccess, getRequestToken, requestParams } from '../_util'
+import { Response, Request } from '../_util'
 
 export function createFakeUserList() {
     return [
         {
             userId: '1',
-            username: 'vben',
-            realName: 'Vben Admin',
+            username: 'basic',
+            realName: 'Basic Admin',
             avatar: 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640',
             desc: 'manager',
             password: '123456',
@@ -55,10 +55,10 @@ export default [
                 (item) => item.username === username && password === item.password,
             )
             if (!checkUser) {
-                return resultError('Incorrect account or password！')
+                return Response.no('Incorrect account or password！')
             }
             const { userId, username: _username, token, realName, desc, roles } = checkUser
-            return resultSuccess({
+            return Response.ok({
                 roles,
                 userId,
                 username: _username,
@@ -71,44 +71,44 @@ export default [
     {
         url: '/basic-api/getUserInfo',
         method: 'get',
-        response: (request: requestParams) => {
-            const token = getRequestToken(request)
-            if (!token) return resultError('Invalid token')
+        response: (request: Request) => {
+            const token = Request.getRequestToken(request)
+            if (!token) return Response.no('Invalid token')
             const checkUser = createFakeUserList().find((item) => item.token === token)
             if (!checkUser) {
-                return resultError('The corresponding user information was not obtained!')
+                return Response.no('The corresponding user information was not obtained!')
             }
-            return resultSuccess(checkUser)
+            return Response.ok(checkUser)
         },
     },
     {
         url: '/basic-api/getPermCode',
         timeout: 200,
         method: 'get',
-        response: (request: requestParams) => {
-            const token = getRequestToken(request)
-            if (!token) return resultError('Invalid token')
+        response: (request: Request) => {
+            const token = Request.getRequestToken(request)
+            if (!token) return Response.no('Invalid token')
             const checkUser = createFakeUserList().find((item) => item.token === token)
             if (!checkUser) {
-                return resultError('Invalid token!')
+                return Response.no('Invalid token!')
             }
             const codeList = fakeCodeList[checkUser.userId]
 
-            return resultSuccess(codeList)
+            return Response.ok(codeList)
         },
     },
     {
         url: '/basic-api/logout',
         timeout: 200,
         method: 'get',
-        response: (request: requestParams) => {
-            const token = getRequestToken(request)
-            if (!token) return resultError('Invalid token')
+        response: (request: Request) => {
+            const token = Request.getRequestToken(request)
+            if (!token) return Response.no('Invalid token')
             const checkUser = createFakeUserList().find((item) => item.token === token)
             if (!checkUser) {
-                return resultError('Invalid token!')
+                return Response.no('Invalid token!')
             }
-            return resultSuccess(undefined, { message: 'Token has been destroyed' })
+            return Response.ok(undefined, { message: 'Token has been destroyed' })
         },
     },
     {
@@ -116,7 +116,7 @@ export default [
         statusCode: 405,
         method: 'get',
         response: () => {
-            return resultError('Error!')
+            return Response.no('Error!')
         },
     },
 ] as MockMethod[]

package.json

@@ -149,6 +149,7 @@
         "stylelint-order": "^5.0.0",
         "ts-node": "^10.7.0",
         "typescript": "^4.6.2",
+        "unplugin-auto-import": "^0.6.6",
         "vite": "^2.9.0-beta.3",
         "vite-plugin-compression": "^0.5.1",
         "vite-plugin-html": "^3.2.0",

pont.template.ts

-import { Interface, BaseClass, Property, CodeGenerator } from 'pont-engine'
+import { Interface, BaseClass, Property, CodeGenerator, Surrounding } from 'pont-engine'
 
-export default class MyGenerator extends CodeGenerator {
+export default class BasicGenerator extends CodeGenerator {
     getParams(inter: Interface) {
         const requestParams = inter.getRequestParams(this.surrounding)
 
@@ -52,14 +52,14 @@ export default class MyGenerator extends CodeGenerator {
              */
 
             import * as defs from '../../baseClass';
-            import { defHttp } from '/@/utils/http/axios'
+            import { Http } from '/@/utils/http/axios'
 
             export ${paramsCode}
 
             export const init = ${inter.response.getInitialValue()};
 
             export function request(${requestParams}) {
-                return defHttp.request({
+                return Http.request({
                     url: "${inter.path}",
                     method: '${method}',
                     ${
@@ -73,4 +73,71 @@ export default class MyGenerator extends CodeGenerator {
             }
         `
     }
+
+    reviseModName(modName: string) {
+        // .replace(/\//g, '.').replace(/^\./, '').replace(/\./g, '_') 转换 / .为下划线
+        // exp: /api/v1/users  => api_v1_users
+        // exp: api.v1.users => api_v1_users
+        return modName.replace(/\//g, '.').replace(/^\./, '').replace(/\./g, '_')
+    }
+
+    /** 获取所有模块的 index 入口文件 */
+    getModsIndex() {
+        const isTypeScript = this.surrounding === Surrounding.typeScript
+
+        let conclusion = `
+            export const API = {
+                ${this.dataSource.mods.map((mod) => this.reviseModName(mod.name)).join(', \n')}
+            };
+
+            const getWindow = ()${isTypeScript ? ': any' : ''} => (typeof window === 'undefined' ? {} : window)
+            getWindow().API = API
+        `
+
+        // dataSource name means multiple dataSource
+        if (this.dataSource.name) {
+            conclusion = `
+                export const ${this.dataSource.name} = {
+                    ${this.dataSource.mods.map((mod) => this.reviseModName(mod.name)).join(', \n')}
+                };
+            `
+        }
+
+        return `
+            ${this.dataSource.mods
+                .map((mod) => {
+                    const modName = this.reviseModName(mod.name)
+                    return `import * as ${modName} from './${modName}';`
+                })
+                .join('\n')}
+
+            ${conclusion}
+        `
+    }
+
+    /** 获取接口类和基类的总的 index 入口文件代码 */
+    getIndex() {
+        const isTypeScript = this.surrounding === Surrounding.typeScript
+
+        let conclusion = `
+            import * as defs from './baseClass';
+            import './mods/';
+
+            export { defs };
+
+            const getWindow = ()${isTypeScript ? ': any' : ''} => (typeof window === 'undefined' ? {} : window)
+            getWindow().defs = defs
+        `
+
+        // dataSource name means multiple dataSource
+        if (this.dataSource.name) {
+            conclusion = `
+                import { ${this.dataSource.name} as defs } from './baseClass';
+                export { ${this.dataSource.name} } from './mods/';
+                export { defs };
+            `
+        }
+
+        return conclusion
+    }
 }

src/api/services/index.ts

 import * as defs from './baseClass'
 import './mods/'
-;(window as any).defs = defs
+
+export { defs }
+
+const getWindow = (): any => (typeof window === 'undefined' ? {} : window)
+getWindow().defs = defs

src/api/services/mods/auth/login.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** 账号(支持用户名/手机号/邮箱) */
@@ -15,7 +15,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/auth/login',
             method: 'POST',

src/api/services/mods/auth/logout.ts

@@ -3,14 +3,14 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {}
 
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/auth/logout',
             method: 'GET',

src/api/services/mods/auth/register.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** 头像 */
@@ -27,7 +27,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/auth/register',
             method: 'POST',

src/api/services/mods/hello/fail.ts

@@ -3,14 +3,14 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {}
 
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/hello/fail',
             method: 'GET',

src/api/services/mods/hello/hello.ts

@@ -3,14 +3,14 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {}
 
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/hello/',
             method: 'GET',

src/api/services/mods/hello/page.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** 当前页数 */
@@ -19,7 +19,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/hello/page',
             method: 'GET',

src/api/services/mods/index.ts

@@ -4,7 +4,8 @@ import * as minio from './minio'
 import * as permission from './permission'
 import * as role from './role'
 import * as user from './user'
-;(window as any).API = {
+
+export const API = {
     auth,
     hello,
     minio,
@@ -12,3 +13,6 @@ import * as user from './user'
     role,
     user,
 }
+
+const getWindow = (): any => (typeof window === 'undefined' ? {} : window)
+getWindow().API = API

src/api/services/mods/minio/upload.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {}
 
@@ -15,7 +15,7 @@ export function request(
     config?: axios.RequestConfig<Params | FormData>,
     options?: axios.RequestOptions,
 ) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/common/minio/upload',
             method: 'POST',

src/api/services/mods/permission/add.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** 组件 */
@@ -31,7 +31,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/manage/permission/add',
             method: 'POST',

src/api/services/mods/permission/deleted.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** id */
@@ -13,7 +13,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/manage/permission/deleted',
             method: 'POST',

src/api/services/mods/permission/find.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** id */
@@ -13,7 +13,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/manage/permission/find',
             method: 'GET',

src/api/services/mods/permission/modify.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** 组件 */
@@ -33,7 +33,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/manage/permission/modify',
             method: 'POST',

src/api/services/mods/permission/page.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** 当前页数 */
@@ -19,7 +19,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/manage/permission/page',
             method: 'GET',

src/api/services/mods/permission/tree.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** 父级 id */
@@ -13,7 +13,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/manage/permission/tree',
             method: 'GET',

src/api/services/mods/role/add.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** 名称 */
@@ -15,7 +15,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/manage/role/add',
             method: 'POST',

src/api/services/mods/role/assign.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** id */
@@ -15,7 +15,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/manage/role/assign',
             method: 'POST',

src/api/services/mods/role/deleted.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** id */
@@ -13,7 +13,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/manage/role/deleted',
             method: 'POST',

src/api/services/mods/role/find.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** id */
@@ -13,7 +13,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/manage/role/find',
             method: 'GET',

src/api/services/mods/role/modify.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** id */
@@ -17,7 +17,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/manage/role/modify',
             method: 'POST',

src/api/services/mods/role/page.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** 当前页数 */
@@ -19,7 +19,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/manage/role/page',
             method: 'GET',

src/api/services/mods/role/selector.ts

@@ -3,14 +3,14 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {}
 
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/manage/role/selector',
             method: 'GET',

src/api/services/mods/user/assign.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** id */
@@ -15,7 +15,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/user/manage/assign',
             method: 'POST',

src/api/services/mods/user/info.ts

@@ -3,14 +3,14 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {}
 
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/user/info',
             method: 'GET',

src/api/services/mods/user/page.ts

@@ -3,7 +3,7 @@
  */
 
 import * as defs from '../../baseClass'
-import { defHttp } from '/@/utils/http/axios'
+import { Http } from '/@/utils/http/axios'
 
 export class Params {
     /** 当前页数 */
@@ -19,7 +19,7 @@ export class Params {
 export const init = new defs.Result()
 
 export function request(params: Params, config?: axios.RequestConfig<Params>, options?: axios.RequestOptions) {
-    return defHttp.request(
+    return Http.request(
         {
             url: '/basic-api/user/manage/page',
             method: 'GET',

src/api/types.ts

+export interface Result<T = any> {
+    /**
+     * 状态码
+     */
+    status: Status
+
+    /**
+     * 消息
+     */
+    message: string
+
+    /**
+     * 响应时间
+     */
+    timestamp: string
+
+    /**
+     * 接口耗时（不含网络通信时间）
+     */
+    times: string
+
+    /**
+     * 自定义错误码
+     */
+    code: number
+
+    /**
+     * 详细信息
+     */
+    details?: string
+
+    /**
+     * 异常信息
+     */
+    error?: string
+
+    /**
+     * 响应内容
+     */
+    body: T
+}
+
+export enum Status {
+    /**
+     * 成功
+     */
+    OK = 200,
+
+    /**
+     * 用户认证失败
+     */
+    NON_AUTHORITATIVE_INFORMATION = 203,
+
+    /**
+     * 失败的请求，通常是一些验证错误（当出现该状态码时，将产生对应的业务错误编码，可以使用 Result.details 进行交互提醒）
+     */
+    FAIL = 400,
+
+    /**
+     * 鉴权失败
+     */
+    UNAUTHORIZED = 401,
+
+    /**
+     * Token 错误/失效
+     */
+    FORBIDDEN = 403,
+
+    /**
+     * 找不到资源
+     */
+    NOT_FOUND = 404,
+
+    /**
+     * 不支持的请求类型
+     */
+    METHOD_NOT_ALLOWED = 405,
+
+    /**
+     * 服务器错误
+     */
+    INTERNAL_SERVER_ERROR = 500,
+
+    /**
+     * 未知错误
+     */
+    UNKNOWN_ERROR = 500,
+
+    /**
+     * API 未实现
+     */
+    NOT_IMPLEMENTED = 501,
+
+    /**
+     * 服务异常（网关提醒）
+     */
+    BAD_GATEWAY = 502,
+
+    /**
+     * 服务暂停（网关提醒）
+     */
+    SERVICE_UNAVAILABLE = 503,
+}
+
+export function toMessage(status: Status): string {
+    switch (status) {
+        case Status.OK:
+            return '成功'
+        case Status.FAIL:
+            return '失败'
+        case Status.UNAUTHORIZED:
+            return '用户认证失败'
+        case Status.FORBIDDEN:
+            return '拒绝访问'
+        case Status.NOT_FOUND:
+            return '找不到资源'
+        case Status.INTERNAL_SERVER_ERROR:
+            return '服务器错误'
+        case Status.NOT_IMPLEMENTED:
+            return '未实现'
+        case Status.BAD_GATEWAY:
+            return '网关错误'
+        case Status.SERVICE_UNAVAILABLE:
+            return '服务暂停'
+        default:
+            return '未知错误'
+    }
+}

src/config/app.ts

+const config: Application = {
+    name: __APP__.name,
+    version: __APP__.version,
+    description: __APP__.description,
+    author: __APP__.author,
+    lastBuildTime: __APP__.lastBuildTime,
+}
+
+export const $app = config
+
+export function setupAppConfig() {
+    // 打印 App 信息
+    const infos: string[] = []
+    infos.push(`==================================================================`)
+    infos.push(`[App] name: ${config.name}`)
+    infos.push(`[App] version: ${config.version}`)
+    infos.push(`[App] description: ${config.description}`)
+    infos.push(`[App] author: ${config.author.name} ${config.author.url}`)
+    infos.push(`[App] lastBuildTime: ${config.lastBuildTime}`)
+    infos.push(`==================================================================`)
+    console.log('%c' + infos.join('\n'), 'color: #fadfa3;')
+}

src/main.ts

@@ -13,14 +13,18 @@ import { setupRouterGuard } from '/@/router/guard'
 import { setupStore } from '/@/store'
 import { setupGlobDirectives } from '/@/directives'
 import { setupI18n } from '/@/locales/setupI18n'
+import { setupAppConfig } from '/@/config/app'
 import { registerGlobComp } from '/@/components/registerGlobComp'
 
 // 全局注入 API
-import '/@/api/services/mods'
+// import '/@/api/services/mods'
 
 async function bootstrap() {
     const app = createApp(App)
 
+    // App 配置
+    setupAppConfig()
+
     // Configure store
     setupStore(app)
 

src/utils/http/axios/index.ts

@@ -3,13 +3,13 @@
 
 import type { AxiosResponse } from 'axios'
 import { clone } from 'lodash-es'
-import type { RequestOptions, Result } from '/#/axios'
+import type { RequestOptions } from '/#/axios'
 import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform'
 import { VAxios } from './Axios'
 import { checkStatus } from './checkStatus'
 import { useGlobSetting } from '/@/hooks/setting'
 import { useMessage } from '/@/hooks/web/useMessage'
-import { RequestEnum, ResultEnum, ContentTypeEnum } from '/@/enums/httpEnum'
+import { RequestEnum, ContentTypeEnum } from '/@/enums/httpEnum'
 import { isString } from '/@/utils/is'
 import { getToken } from '/@/utils/auth'
 import { setObjToUrlParams, deepMerge } from '/@/utils'
@@ -18,6 +18,7 @@ import { useI18n } from '/@/hooks/web/useI18n'
 import { joinTimestamp, formatRequestDate } from './helper'
 import { useUserStoreWithOut } from '/@/store/modules/user'
 import { AxiosRetry } from '/@/utils/http/axios/axiosRetry'
+import * as HTTP from '/@/api/types'
 
 const globSetting = useGlobSetting()
 const urlPrefix = globSetting.urlPrefix
@@ -30,7 +31,7 @@ const transform: AxiosTransform = {
     /**
      * @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
      */
-    transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
+    transformRequestHook: (res: AxiosResponse<defs.Result>, options: RequestOptions) => {
         const { t } = useI18n()
         const { isTransformResponse, isReturnNativeResponse } = options
         // 是否返回原生响应头 比如：需要获取响应头时使用该属性
@@ -49,27 +50,29 @@ const transform: AxiosTransform = {
             // return '[HTTP] Request has no return value';
             throw new Error(t('sys.api.apiRequestFailed'))
         }
-        //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
-        const { code, result, message } = data
+        //  这里 status，body，message为 后台统一的字段，需要在 types.ts 内修改为项目自己的接口返回格式
+        const { status, body, message, details } = data
 
         // 这里逻辑可以根据项目进行修改
-        const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS
+        const hasSuccess = data && Reflect.has(data, 'status') && status === HTTP.Status.OK
         if (hasSuccess) {
-            return result
+            return body
         }
 
         // 在此处根据自己项目的实际情况对不同的code执行不同的操作
         // 如果不希望中断当前请求，请return数据，否则直接抛出异常即可
         let timeoutMsg = ''
-        switch (code) {
-            case ResultEnum.TIMEOUT:
+        switch (status) {
+            case HTTP.Status.UNAUTHORIZED:
                 timeoutMsg = t('sys.api.timeoutMessage')
                 const userStore = useUserStoreWithOut()
                 userStore.setToken(undefined)
                 userStore.logout(true)
                 break
             default:
-                if (message) {
+                if (details) {
+                    timeoutMsg = details
+                } else if (message) {
                     timeoutMsg = message
                 }
         }
@@ -251,8 +254,20 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
         ),
     )
 }
+
 export const defHttp = createAxios()
 
+// 自定义配置
+// TODO: 实际项目所需的请求配置
+// const { apiUrl } = useGlobSetting()
+const apiUrl = 'http://localhost:8181'
+export const Http = createAxios({
+    headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
+    requestOptions: {
+        apiUrl,
+    },
+})
+
 // other api url
 // export const otherHttp = createAxios({
 //   requestOptions: {

src/views/sys/login/LoginForm.vue

@@ -119,7 +119,7 @@
     const rememberMe = ref(false)
 
     const formData = reactive({
-        account: 'vben',
+        account: 'basic',
         password: '123456',
     })
 

tests/server/service/UserService.ts

-import { Result } from '../utils';
+import { Result } from '../utils'
 
 const fakeUserInfo = {
-  userId: '1',
-  username: 'vben',
-  realName: 'Vben Admin',
-  desc: 'manager',
-  password: '123456',
-  token: 'fakeToken1',
-  roles: [
-    {
-      roleName: 'Super Admin',
-      value: 'super',
-    },
-  ],
-};
+    userId: '1',
+    username: 'vben',
+    realName: 'Vben Admin',
+    desc: 'manager',
+    password: '123456',
+    token: 'fakeToken1',
+    roles: [
+        {
+            roleName: 'Super Admin',
+            value: 'super',
+        },
+    ],
+}
 export default class UserService {
-  async login() {
-    return Result.success(fakeUserInfo);
-  }
+    async login() {
+        return Result.success(fakeUserInfo)
+    }
 
-  async getUserInfoById() {
-    return Result.success(fakeUserInfo);
-  }
+    async getUserInfoById() {
+        return Result.success(fakeUserInfo)
+    }
 }

types/app.d.ts

+/**
+ * App 信息
+ */
+type Application = {
+    /**
+     * 项目名称
+     */
+    name: string
+
+    /**
+     * 版本号
+     */
+    version: string
+
+    /**
+     * 项目描述信息
+     */
+    description: string
+
+    /**
+     * 作者
+     */
+    author: Author
+
+    /**
+     * 最后构建时间
+     */
+    lastBuildTime: string
+}
+
+/**
+ * App 作者信息
+ */
+type Author = {
+    /**
+     * 作者名称
+     */
+    name: string
+
+    /**
+     * 地址
+     */
+    url: string
+}
+
+declare const __APP__: Application

types/auto-imports.d.ts

+// Generated by 'unplugin-auto-import'
+// We suggest you to commit this file into source control
+declare global {
+  const $app: typeof import('/@/config/app')['$app']
+  const API: typeof import('/@/api/services/mods')['API']
+  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 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 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 useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+}
+export {}

types/window.d.ts

+interface Window {
+    /**
+     * API 接口实例 Window 挂载
+     * api.d.ts
+     */
+    API: API
+
+    /**
+     * API 接口类型引用 Window 挂载
+     * api.d.ts
+     */
+    defs: defs
+}

vite.config.ts

@@ -87,6 +87,13 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
             // Suppress warning
             __INTLIFY_PROD_DEVTOOLS__: false,
             __APP_INFO__: JSON.stringify(__APP_INFO__),
+            __APP__: {
+                name: pkg.name,
+                version: pkg.version,
+                description: pkg.description,
+                author: pkg.author,
+                lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+            },
         },
 
         css: {