From 197c020a5994e44834bf7c36df84350cf3ed2261 Mon Sep 17 00:00:00 2001 From: baiqi Date: Mon, 17 Jul 2023 15:16:54 +0800 Subject: [PATCH] feat: mock --- frontend/README.md | 72 ++-- frontend/package.json | 7 +- frontend/src/api/http/Axios.ts | 2 +- frontend/src/api/http/index.ts | 49 +-- frontend/src/api/modules/system/project.ts | 2 +- .../src/api/modules/system/resourcePool.ts | 16 +- .../src/api/requrls/system/resourcePool.ts | 1 + frontend/src/enums/httpEnum.ts | 2 +- frontend/src/main.ts | 2 + frontend/src/mock/api-test.ts | 12 +- frontend/src/mock/index.ts | 6 +- frontend/src/mock/message-box.ts | 26 +- frontend/src/mock/system/member.ts | 12 +- frontend/src/mock/system/pluginManger.ts | 12 +- frontend/src/mock/system/project.ts | 12 +- frontend/src/mock/system/resourcePool.ts | 322 +++++++++--------- frontend/src/mock/system/user.ts | 12 +- frontend/src/mock/user.ts | 147 +------- frontend/src/utils/setup-mock.ts | 38 ++- frontend/tsconfig.json | 4 +- 20 files changed, 299 insertions(+), 457 deletions(-) diff --git a/frontend/README.md b/frontend/README.md index 0e687ab3ec..9d833c6204 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -413,55 +413,36 @@ export interface LoginRes { 提供全局接口数据 mock 功能，避免因为调试而修改请求代码导致出现问题，按功能模块划分文件，通过`index.ts`暴露，示例如下： ```typescript -import Mock from 'mockjs'; -import './user'; -import '@/views/dashboard/workplace/mock'; +import MOCK from '@/utils/setup-mock'; -Mock.setup({ - timeout: '600-1000', -}); +import './user'; ``` ```typescript -import Mock from 'mockjs'; -import setupMock, { successResponseWrap, failResponseWrap } from '@/utils/setup-mock'; -import { isLogin } from '@/utils/auth'; +import { mock } from '@/utils/setup-mock'; +import { RequestEnum } from '@/enums/httpEnum'; -import { MockParams } from '@/types/mock'; +const getProjectList = () => { + return [ + { + id: '0283f238hf2', + num: 0, + organizationId: 'v3v4h434c3', + name: '发了多少', + description: 'string', + createTime: 0, + updateTime: 0, + updateUser: 'string', + createUser: 'string', + deleteTime: 0, + deleted: true, + deleteUser: 'string', + enable: true, + }, + ]; +}; -setupMock({ - setup() { - // 用户信息 - Mock.mock(new RegExp('/api/user/info'), () => { - if (isLogin()) { - const role = window.localStorage.getItem('userRole') || 'admin'; - return successResponseWrap({ - name: '王立群', - avatar: '//lf1-xgcdn-tos.pstatp.com/obj/vcloud/vadmin/start.8e0e4855ee346a46ccff8ff3e24db27b.png', - email: 'wangliqun@email.com', - job: 'frontend', - jobName: '前端艺术家', - organization: 'Frontend', - organizationName: '前端', - location: 'beijing', - locationName: '北京', - introduction: '人潇洒，性温存', - personalWebsite: 'https://www.arco.design', - phone: '150****0000', - registrationDate: '2013-05-10 12:10:00', - accountId: '15012312300', - certification: 1, - role, - }); - } - return failResponseWrap(null, '未登录', 50008); - }); - // 登出 - Mock.mock(new RegExp('/api/user/logout'), () => { - return successResponseWrap(null); - }); - }, -}); +mock(RequestEnum.GET, '/system/project/list', getProjectList(), 200); ``` @@ -557,10 +538,11 @@ export default i18n; ## -theme 主题配置 -1. 去Desing Lab 创建主题 https://arco.design/themes/home + +1. 去 Desing Lab 创建主题 https://arco.design/themes/home 2. 以`ms-theme-` 命名为开头 3. 点击页面的配置主题 -**“CSS 变量” + “Tailwind 配置变量” + “基于 css 变量自行计算混合色覆盖 arco-theme 变量”** + **“CSS 变量” + “Tailwind 配置变量” + “基于 css 变量自行计算混合色覆盖 arco-theme 变量”** ## -.env.\*环境变量配置 diff --git a/frontend/package.json b/frontend/package.json index 6c7688b0a0..5aaa70ed0e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -36,7 +36,7 @@ "dependencies": { "@7polo/kity": "2.0.8", "@7polo/kityminder-core": "1.4.53", - "@arco-design/web-vue": "^2.47.0", + "@arco-design/web-vue": "^2.48.0", "@arco-themes/vue-ms-theme-default": "^0.0.17", "@form-create/arco-design": "^3.1.21", "@vueuse/core": "^9.13.0", @@ -49,6 +49,7 @@ "lodash": "^4.17.21", "lodash-es": "^4.17.21", "mitt": "^3.0.0", + "monaco-editor": "^0.39.0", "nprogress": "^0.2.0", "pinia": "^2.1.3", "pinia-plugin-persistedstate": "^3.1.0", @@ -67,7 +68,6 @@ "@commitlint/config-conventional": "^17.6.5", "@types/lodash": "^4.14.195", "@types/lodash-es": "^4.17.7", - "@types/mockjs": "^1.0.7", "@types/nprogress": "^0.2.0", "@types/sortablejs": "^1.15.1", "@typescript-eslint/eslint-plugin": "^5.59.9", @@ -78,6 +78,7 @@ "@vue/babel-plugin-jsx": "^1.1.1", "@vue/test-utils": "^2.3.2", "autoprefixer": "^10.4.14", + "axios-mock-adapter": "^1.21.5", "consola": "^2.15.3", "cross-env": "^7.0.3", "eslint": "^8.42.0", @@ -93,7 +94,6 @@ "less": "^4.1.3", "less-loader": "^11.1.2", "lint-staged": "^13.2.2", - "mockjs": "^1.1.0", "postcss": "^8.4.24", "postcss-html": "^1.5.0", "postcss-import": "^15.1.0", @@ -122,6 +122,7 @@ "vite-plugin-compression": "^0.5.1", "vite-plugin-eslint": "^1.8.1", "vite-plugin-imagemin": "^0.6.1", + "vite-plugin-monaco-editor": "^1.1.0", "vite-plugin-svg-icons": "^2.0.1", "vite-plugin-vue-setup-extend": "^0.4.0", "vite-svg-loader": "^3.6.0", diff --git a/frontend/src/api/http/Axios.ts b/frontend/src/api/http/Axios.ts index 6e0a2b8aee..ea2d825211 100644 --- a/frontend/src/api/http/Axios.ts +++ b/frontend/src/api/http/Axios.ts @@ -14,7 +14,7 @@ export * from './axiosTransform'; * @description: 封装axios请求，返回重新封装的数据格式 */ export class MSAxios { - private axiosInstance: AxiosInstance; + public axiosInstance: AxiosInstance; private readonly options: CreateAxiosOptions; diff --git a/frontend/src/api/http/index.ts b/frontend/src/api/http/index.ts index d6eab06693..0ba2f754c5 100644 --- a/frontend/src/api/http/index.ts +++ b/frontend/src/api/http/index.ts @@ -1,7 +1,7 @@ import { MSAxios } from './Axios'; import checkStatus from './checkStatus'; import { Message, Modal } from '@arco-design/web-vue'; -import { RequestEnum, ContentTypeEnum, ResultEnum } from '@/enums/httpEnum'; +import { RequestEnum, ContentTypeEnum } from '@/enums/httpEnum'; import { isString } from '@/utils/is'; import { getToken } from '@/utils/auth'; import { setObjToUrlParams, deepMerge } from '@/utils'; @@ -31,7 +31,7 @@ const transform: AxiosTransform = { config.params = Object.assign(params || {}, joinTimestamp(joinTime, false)); } else { // 兼容restful风格 - config.url = `${config.url}${params}${joinTimestamp(joinTime, true)}`; + config.url = `${config.url}/${params}${joinTimestamp(joinTime, true)}`; config.params = undefined; } } else if (isString(params)) { @@ -76,32 +76,33 @@ const transform: AxiosTransform = { throw new Error(t('api.apiRequestFailed')); } // 这里 code，result，message为 后台统一的字段 - const { code, data: dataResult, message } = data; + const { data: dataResult } = data; - // TODO:定义完成功code后需要重写 - const hasSuccess = data && Reflect.has(data, 'code') && Number(code) === ResultEnum.SUCCESS; - if (hasSuccess) { - return dataResult; - } + // 这里直接返回正常结果，因为拦截器已经拦截了非 200 的请求 + return dataResult; + // const hasSuccess = data && Reflect.has(data, 'code') && Number(code) === ResultEnum.SUCCESS; + // if (hasSuccess) { + // return dataResult; + // } - // 在此处根据自己项目的实际情况对不同的code执行不同的操作 - // 如果不希望中断当前请求，请return数据，否则直接抛出异常即可 - let timeoutMsg = ''; - if (Number(code) === ResultEnum.TIMEOUT) { - timeoutMsg = t('api.timeoutMessage'); - } else if (message) { - timeoutMsg = message; - } + // // 在此处根据自己项目的实际情况对不同的code执行不同的操作 + // // 如果不希望中断当前请求，请return数据，否则直接抛出异常即可 + // let timeoutMsg = ''; + // if (Number(code) === ResultEnum.TIMEOUT) { + // timeoutMsg = t('api.timeoutMessage'); + // } else if (message) { + // timeoutMsg = message; + // } - // errorMessageMode=‘modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误 - // errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示 - if (options.errorMessageMode === 'modal') { - Modal.error({ title: t('api.errorTip'), content: timeoutMsg }); - } else if (options.errorMessageMode === 'message') { - Message.error(timeoutMsg); - } + // // errorMessageMode=‘modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误 + // // errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示 + // if (options.errorMessageMode === 'modal') { + // Modal.error({ title: t('api.errorTip'), content: timeoutMsg }); + // } else if (options.errorMessageMode === 'message') { + // Message.error(timeoutMsg); + // } - throw new Error(timeoutMsg || t('api.apiRequestFailed')); + // throw new Error(timeoutMsg || t('api.apiRequestFailed')); }, /** diff --git a/frontend/src/api/modules/system/project.ts b/frontend/src/api/modules/system/project.ts index 31ee94fd2c..cf125cbf67 100644 --- a/frontend/src/api/modules/system/project.ts +++ b/frontend/src/api/modules/system/project.ts @@ -3,7 +3,7 @@ import { ProjectListUrl } from '@/api/requrls/system/project'; import type { ProjectListItem } from '@/models/system/project'; export function getProjectList(organizationId: string) { - return MSR.get({ url: `${ProjectListUrl}/${organizationId}` }); + return MSR.get({ url: ProjectListUrl, params: organizationId }); } export default {}; diff --git a/frontend/src/api/modules/system/resourcePool.ts b/frontend/src/api/modules/system/resourcePool.ts index b3c1273999..4a22d55181 100644 --- a/frontend/src/api/modules/system/resourcePool.ts +++ b/frontend/src/api/modules/system/resourcePool.ts @@ -1,12 +1,24 @@ import MSR from '@/api/http/index'; -import { PoolListUrl, UpdatePoolUrl } from '@/api/requrls/system/resourcePool'; -import type { ResourcePoolItem } from '@/models/system/resourcePool'; +import { PoolListUrl, UpdatePoolUrl, AddPoolUrl, DetailPoolUrl } from '@/api/requrls/system/resourcePool'; +import type { ResourcePoolItem, ResourcePoolInfo } from '@/models/system/resourcePool'; import type { TableQueryParams } from '@/models/common'; +// 获取资源池列表 export function getPoolList(data: TableQueryParams) { return MSR.post({ url: PoolListUrl, data }); } +// 更新资源池信息 export function updatePoolInfo(data: ResourcePoolItem) { return MSR.post({ url: UpdatePoolUrl, data }); } + +// 添加资源池 +export function addPool(data: ResourcePoolInfo) { + return MSR.post({ url: AddPoolUrl, data }); +} + +// 获取资源池详情 +export function getPoolInfo(poolId: string) { + return MSR.get({ url: DetailPoolUrl, params: poolId }); +} diff --git a/frontend/src/api/requrls/system/resourcePool.ts b/frontend/src/api/requrls/system/resourcePool.ts index e3d4520fb8..72d0fd0a89 100644 --- a/frontend/src/api/requrls/system/resourcePool.ts +++ b/frontend/src/api/requrls/system/resourcePool.ts @@ -2,3 +2,4 @@ export const PoolListUrl = '/test/resource/pool/page'; export const UpdatePoolUrl = '/test/resource/pool/update'; export const AddPoolUrl = '/test/resource/pool/add'; export const DeletePoolUrl = '/test/resource/pool/delete'; +export const DetailPoolUrl = '/test/resource/pool/detail'; diff --git a/frontend/src/enums/httpEnum.ts b/frontend/src/enums/httpEnum.ts index 3c16a89400..e97f3c5ad0 100644 --- a/frontend/src/enums/httpEnum.ts +++ b/frontend/src/enums/httpEnum.ts @@ -2,7 +2,7 @@ * 请求结果枚举 */ export enum ResultEnum { - SUCCESS = 0, + SUCCESS = 100200, ERROR = 1, TIMEOUT = 401, TYPE = 'success', diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 01078c2d69..d87ef524c4 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -2,6 +2,7 @@ import { createApp } from 'vue'; import FormCreate from '@form-create/arco-design'; import ArcoVueIcon from '@arco-design/web-vue/es/icon'; import SvgIcon from '@/components/pure/svg-icon/index.vue'; +import MSIcon from '@/components/pure/ms-icon-font/index.vue'; import router from './router'; import store from './store'; import { setupI18n } from './locale'; @@ -23,6 +24,7 @@ async function bootstrap() { await setupI18n(app); app.use(ArcoVueIcon); + app.component('MsIcon', MSIcon); app.component('SvgIcon', SvgIcon); app.use(router); diff --git a/frontend/src/mock/api-test.ts b/frontend/src/mock/api-test.ts index 51ff248efc..35509a9065 100644 --- a/frontend/src/mock/api-test.ts +++ b/frontend/src/mock/api-test.ts @@ -1,5 +1,5 @@ -import Mock from 'mockjs'; -import setupMock, { successResponseWrap } from '@/utils/setup-mock'; +import { mock } from '@/utils/setup-mock'; +import { RequestEnum } from '@/enums/httpEnum'; const getList = () => { return { @@ -108,10 +108,4 @@ const getList = () => { }; }; -setupMock({ - setup: () => { - Mock.mock(new RegExp('/mock/api-test/define/list/'), () => { - return successResponseWrap(getList()); - }); - }, -}); +mock(RequestEnum.POST, '/mock/api-test/define/list/', getList(), 200); diff --git a/frontend/src/mock/index.ts b/frontend/src/mock/index.ts index cfd34cb394..40409be580 100644 --- a/frontend/src/mock/index.ts +++ b/frontend/src/mock/index.ts @@ -1,4 +1,4 @@ -import Mock from 'mockjs'; +import MOCK from '@/utils/setup-mock'; import './user'; import './message-box'; @@ -9,6 +9,4 @@ import './system/resourcePool'; import './system/member'; import './system/pluginManger'; -Mock.setup({ - timeout: '600-1000', -}); +MOCK.onAny().passThrough(); diff --git a/frontend/src/mock/message-box.ts b/frontend/src/mock/message-box.ts index 6449e68fd1..fea6f0f322 100644 --- a/frontend/src/mock/message-box.ts +++ b/frontend/src/mock/message-box.ts @@ -1,5 +1,5 @@ -import Mock from 'mockjs'; -import setupMock, { successResponseWrap } from '@/utils/setup-mock'; +import { mock } from '@/utils/setup-mock'; +import { RequestEnum } from '@/enums/httpEnum'; const haveReadIds: number[] = []; const getMessageList = () => { @@ -70,16 +70,14 @@ const getMessageList = () => { })); }; -setupMock({ - setup: () => { - Mock.mock(new RegExp('/api/message/list'), () => { - return successResponseWrap(getMessageList()); - }); - - Mock.mock(new RegExp('/api/message/read'), (params: { body: string }) => { - const { ids } = JSON.parse(params.body); - haveReadIds.push(...(ids || [])); - return successResponseWrap(true); - }); +mock(RequestEnum.GET, '/api/message/list', getMessageList(), 200); +mock( + RequestEnum.GET, + '/api/message/read', + (params: { body: string }) => { + const { ids } = JSON.parse(params.body); + haveReadIds.push(...(ids || [])); + return true; }, -}); + 200 +); diff --git a/frontend/src/mock/system/member.ts b/frontend/src/mock/system/member.ts index 499d46979b..e94bb4b9e6 100644 --- a/frontend/src/mock/system/member.ts +++ b/frontend/src/mock/system/member.ts @@ -1,5 +1,5 @@ -import Mock from 'mockjs'; -import setupMock, { successTableResponseWrap } from '@/utils/setup-mock'; +import { mock } from '@/utils/setup-mock'; +import { RequestEnum } from '@/enums/httpEnum'; const getMemberList = () => { return [ @@ -250,10 +250,4 @@ const getMemberList = () => { ]; }; -setupMock({ - setup: () => { - Mock.mock(new RegExp('/member/page'), () => { - return successTableResponseWrap(getMemberList()); - }); - }, -}); +mock(RequestEnum.POST, '/member/page', getMemberList(), 200, true); diff --git a/frontend/src/mock/system/pluginManger.ts b/frontend/src/mock/system/pluginManger.ts index ecbc53bd4f..bbd2154c6c 100644 --- a/frontend/src/mock/system/pluginManger.ts +++ b/frontend/src/mock/system/pluginManger.ts @@ -1,5 +1,5 @@ -import Mock from 'mockjs'; -import setupMock, { successTableResponseWrap } from '@/utils/setup-mock'; +import { mock } from '@/utils/setup-mock'; +import { RequestEnum } from '@/enums/httpEnum'; const getPluginList = () => { return [ @@ -176,10 +176,4 @@ const getPluginList = () => { ]; }; -setupMock({ - setup: () => { - Mock.mock(new RegExp('/plugin/page'), () => { - return successTableResponseWrap(getPluginList()); - }); - }, -}); +mock(RequestEnum.POST, '/plugin/page', getPluginList(), 200, true); diff --git a/frontend/src/mock/system/project.ts b/frontend/src/mock/system/project.ts index 672e6da6b6..0c3def9403 100644 --- a/frontend/src/mock/system/project.ts +++ b/frontend/src/mock/system/project.ts @@ -1,5 +1,5 @@ -import Mock from 'mockjs'; -import setupMock, { successResponseWrap } from '@/utils/setup-mock'; +import { mock } from '@/utils/setup-mock'; +import { RequestEnum } from '@/enums/httpEnum'; const getProjectList = () => { return [ @@ -51,10 +51,4 @@ const getProjectList = () => { ]; }; -setupMock({ - setup: () => { - Mock.mock(new RegExp('/system/project/list'), () => { - return successResponseWrap(getProjectList()); - }); - }, -}); +mock(RequestEnum.GET, '/system/project/list', getProjectList(), 200); diff --git a/frontend/src/mock/system/resourcePool.ts b/frontend/src/mock/system/resourcePool.ts index 9935470306..6d9f6c652e 100644 --- a/frontend/src/mock/system/resourcePool.ts +++ b/frontend/src/mock/system/resourcePool.ts @@ -1,166 +1,160 @@ -import Mock from 'mockjs'; -import setupMock, { makeMockUrl, successTableResponseWrap } from '@/utils/setup-mock'; -import { PoolListUrl } from '@/api/requrls/system/resourcePool'; +// import { mock } from '@/utils/setup-mock'; +// import { PoolListUrl } from '@/api/requrls/system/resourcePool'; +// import { RequestEnum } from '@/enums/httpEnum'; -const getPoolList = () => { - return [ - { - id: '938uh9', - name: 'ksajdfkas', - type: 'Node', - description: '年卡是健康的就是肯德基富士康', - enable: true, - createTime: 0, - updateTime: 0, - createUser: 'hShdf', - apiTest: true, - loadTest: true, - uiTest: true, - serverUrl: 'fldskfsl.sdjks.com', - deleted: false, - configuration: 'akjfhbgkdjfsokdsdfs', - organizationList: [ - { - id: 'string', - num: 0, - name: '组织 1', - description: 'blabla', - createTime: 0, - updateTime: 0, - createUser: 'string', - updateUser: 'string', - deleted: true, - deleteUser: 'string', - deleteTime: 0, - enable: true, - }, - { - id: 'string', - num: 0, - name: '组织 2', - description: 'blabla', - createTime: 0, - updateTime: 0, - createUser: 'string', - updateUser: 'string', - deleted: true, - deleteUser: 'string', - deleteTime: 0, - enable: true, - }, - { - id: 'string', - num: 0, - name: '组织 3', - description: 'blabla', - createTime: 0, - updateTime: 0, - createUser: 'string', - updateUser: 'string', - deleted: true, - deleteUser: 'string', - deleteTime: 0, - enable: true, - }, - { - id: 'string', - num: 0, - name: '组织 4', - description: 'blabla', - createTime: 0, - updateTime: 0, - createUser: 'string', - updateUser: 'string', - deleted: true, - deleteUser: 'string', - deleteTime: 0, - enable: true, - }, - ], - resources: ['192.168.1.1', '192.168.11.23'], - }, - { - id: 'dfopi03wif3', - name: 'ksajdfkas', - type: 'K8s', - description: '生动地很多次私董会佛山的', - enable: false, - createTime: 0, - updateTime: 0, - createUser: 'hShdf', - apiTest: true, - loadTest: true, - uiTest: true, - serverUrl: 'fldskfsl.sdjks.com', - deleted: false, - configuration: 'akjfhbgkdjfsokdsdfs', - organizationList: [ - { - id: 'string', - num: 0, - name: '组织 1', - description: 'blabla', - createTime: 0, - updateTime: 0, - createUser: 'string', - updateUser: 'string', - deleted: true, - deleteUser: 'string', - deleteTime: 0, - enable: true, - }, - { - id: 'string', - num: 0, - name: '组织 2', - description: 'blabla', - createTime: 0, - updateTime: 0, - createUser: 'string', - updateUser: 'string', - deleted: true, - deleteUser: 'string', - deleteTime: 0, - enable: true, - }, - { - id: 'string', - num: 0, - name: '组织 3', - description: 'blabla', - createTime: 0, - updateTime: 0, - createUser: 'string', - updateUser: 'string', - deleted: true, - deleteUser: 'string', - deleteTime: 0, - enable: true, - }, - { - id: 'string', - num: 0, - name: '组织 4', - description: 'blabla', - createTime: 0, - updateTime: 0, - createUser: 'string', - updateUser: 'string', - deleted: true, - deleteUser: 'string', - deleteTime: 0, - enable: true, - }, - ], - resources: ['192.168.1.1', '192.168.11.23'], - }, - ]; -}; +// const getPoolList = () => { +// return [ +// { +// id: '938uh9', +// name: 'ksajdfkas', +// type: 'Node', +// description: '年卡是健康的就是肯德基富士康', +// enable: true, +// createTime: 0, +// updateTime: 0, +// createUser: 'hShdf', +// apiTest: true, +// loadTest: true, +// uiTest: true, +// serverUrl: 'fldskfsl.sdjks.com', +// deleted: false, +// configuration: 'akjfhbgkdjfsokdsdfs', +// organizationList: [ +// { +// id: 'string', +// num: 0, +// name: '组织 1', +// description: 'blabla', +// createTime: 0, +// updateTime: 0, +// createUser: 'string', +// updateUser: 'string', +// deleted: true, +// deleteUser: 'string', +// deleteTime: 0, +// enable: true, +// }, +// { +// id: 'string', +// num: 0, +// name: '组织 2', +// description: 'blabla', +// createTime: 0, +// updateTime: 0, +// createUser: 'string', +// updateUser: 'string', +// deleted: true, +// deleteUser: 'string', +// deleteTime: 0, +// enable: true, +// }, +// { +// id: 'string', +// num: 0, +// name: '组织 3', +// description: 'blabla', +// createTime: 0, +// updateTime: 0, +// createUser: 'string', +// updateUser: 'string', +// deleted: true, +// deleteUser: 'string', +// deleteTime: 0, +// enable: true, +// }, +// { +// id: 'string', +// num: 0, +// name: '组织 4', +// description: 'blabla', +// createTime: 0, +// updateTime: 0, +// createUser: 'string', +// updateUser: 'string', +// deleted: true, +// deleteUser: 'string', +// deleteTime: 0, +// enable: true, +// }, +// ], +// resources: ['192.168.1.1', '192.168.11.23'], +// }, +// { +// id: 'dfopi03wif3', +// name: 'ksajdfkas', +// type: 'K8s', +// description: '生动地很多次私董会佛山的', +// enable: false, +// createTime: 0, +// updateTime: 0, +// createUser: 'hShdf', +// apiTest: true, +// loadTest: true, +// uiTest: true, +// serverUrl: 'fldskfsl.sdjks.com', +// deleted: false, +// configuration: 'akjfhbgkdjfsokdsdfs', +// organizationList: [ +// { +// id: 'string', +// num: 0, +// name: '组织 1', +// description: 'blabla', +// createTime: 0, +// updateTime: 0, +// createUser: 'string', +// updateUser: 'string', +// deleted: true, +// deleteUser: 'string', +// deleteTime: 0, +// enable: true, +// }, +// { +// id: 'string', +// num: 0, +// name: '组织 2', +// description: 'blabla', +// createTime: 0, +// updateTime: 0, +// createUser: 'string', +// updateUser: 'string', +// deleted: true, +// deleteUser: 'string', +// deleteTime: 0, +// enable: true, +// }, +// { +// id: 'string', +// num: 0, +// name: '组织 3', +// description: 'blabla', +// createTime: 0, +// updateTime: 0, +// createUser: 'string', +// updateUser: 'string', +// deleted: true, +// deleteUser: 'string', +// deleteTime: 0, +// enable: true, +// }, +// { +// id: 'string', +// num: 0, +// name: '组织 4', +// description: 'blabla', +// createTime: 0, +// updateTime: 0, +// createUser: 'string', +// updateUser: 'string', +// deleted: true, +// deleteUser: 'string', +// deleteTime: 0, +// enable: true, +// }, +// ], +// resources: ['192.168.1.1', '192.168.11.23'], +// }, +// ]; +// }; -setupMock({ - setup: () => { - Mock.mock(makeMockUrl(PoolListUrl), () => { - return successTableResponseWrap(getPoolList()); - }); - }, -}); +// mock(RequestEnum.POST, PoolListUrl, getPoolList(), 200, true); diff --git a/frontend/src/mock/system/user.ts b/frontend/src/mock/system/user.ts index bb8ed72338..5f5e660540 100644 --- a/frontend/src/mock/system/user.ts +++ b/frontend/src/mock/system/user.ts @@ -1,5 +1,5 @@ -import Mock from 'mockjs'; -import setupMock, { successTableResponseWrap } from '@/utils/setup-mock'; +import { mock } from '@/utils/setup-mock'; +import { RequestEnum } from '@/enums/httpEnum'; const getUserList = () => { return [ @@ -250,10 +250,4 @@ const getUserList = () => { ]; }; -setupMock({ - setup: () => { - Mock.mock(new RegExp('/user/page'), () => { - return successTableResponseWrap(getUserList()); - }); - }, -}); +mock(RequestEnum.POST, '/user/page', getUserList(), 200, true); diff --git a/frontend/src/mock/user.ts b/frontend/src/mock/user.ts index b66321671f..e7355b9831 100644 --- a/frontend/src/mock/user.ts +++ b/frontend/src/mock/user.ts @@ -1,143 +1,6 @@ -import Mock from 'mockjs'; -import setupMock, { successResponseWrap, failResponseWrap, makeMockUrl } from '@/utils/setup-mock'; +import { mock } from '@/utils/setup-mock'; +import { RequestEnum } from '@/enums/httpEnum'; +import { LogoutUrl, LoginUrl } from '@/api/requrls/user'; -import { GetMenuListUrl, LogoutUrl, LoginUrl } from '@/api/requrls/user'; -import { isLogin } from '@/utils/auth'; - -setupMock({ - mock: false, - setup() { - // 用户信息 - Mock.mock(makeMockUrl('/api/userinfo'), async () => { - if (await isLogin()) { - const role = window.localStorage.getItem('userRole') || 'admin'; - return successResponseWrap({ - name: '王立群', - avatar: '//lf1-xgcdn-tos.pstatp.com/obj/vcloud/vadmin/start.8e0e4855ee346a46ccff8ff3e24db27b.png', - email: 'wangliqun@email.com', - job: 'frontend', - jobName: '前端艺术家', - organization: 'Frontend', - organizationName: '前端', - location: 'beijing', - locationName: '北京', - introduction: '人潇洒，性温存', - personalWebsite: 'https://www.arco.design', - phone: '150****0000', - registrationDate: '2013-05-10 12:10:00', - accountId: '15012312300', - certification: 1, - role, - }); - } - return failResponseWrap(null, '未登录', 50008); - }); - - // 登陆 - Mock.mock(makeMockUrl(LoginUrl), () => { - return successResponseWrap({}); - }); - - // 登出 - Mock.mock(makeMockUrl(LogoutUrl), () => { - return successResponseWrap(null); - }); - - // 用户的服务端菜单 - Mock.mock(makeMockUrl(GetMenuListUrl), () => { - const menuList = [ - { - path: '/api-test', - name: 'apiTest', - meta: { - locale: 'menu.apiTest', - icon: 'icon-dashboard', - order: 0, - }, - children: [ - { - path: 'list', - name: 'apiTest', - meta: { - locale: 'menu.apiTest', - roles: ['*'], - icon: 'icon-computer', - }, - }, - ], - }, - { - path: '/setting', - name: 'setting', - meta: { - locale: 'menu.settings', - icon: 'icon-dashboard', - order: 0, - }, - children: [ - { - path: 'system', - name: 'settingSystem', - redirect: '/setting/system/user', - meta: { - locale: 'menu.settings.system', - roles: ['*'], - hideChildrenInMenu: true, - }, - children: [ - { - path: 'user', - name: 'settingSystemUser', - meta: { - locale: 'menu.settings.system.user', - roles: ['*'], - isTopMenu: true, - }, - }, - { - path: 'usergroup', - name: 'settingSystemUsergroup', - meta: { - locale: 'menu.settings.system.usergroup', - roles: ['*'], - isTopMenu: true, - }, - }, - { - path: 'resourcePool', - name: 'settingSystemResourcePool', - meta: { - locale: 'menu.settings.system.resourcePool', - roles: ['*'], - isTopMenu: true, - }, - }, - { - path: 'resourcePoolDetail', - name: 'settingSystemResourcePoolDetail', - meta: { - locale: 'menu.settings.system.resourcePoolDetail', - roles: ['*'], - }, - }, - ], - }, - ], - }, - { - path: '/personal', - name: 'personal', - meta: {}, - children: [ - { - path: '/personal/info', - name: 'personalInfo', - meta: {}, - }, - ], - }, - ]; - return successResponseWrap(menuList); - }); - }, -}); +// mock(RequestEnum.POST, LoginUrl, {}, 200); +mock(RequestEnum.POST, LogoutUrl, null, 200); diff --git a/frontend/src/utils/setup-mock.ts b/frontend/src/utils/setup-mock.ts index 6517028cdc..10f5e8e651 100644 --- a/frontend/src/utils/setup-mock.ts +++ b/frontend/src/utils/setup-mock.ts @@ -1,8 +1,8 @@ -import debug from './env'; +import MSR from '@/api/http'; +import { RequestEnum } from '@/enums/httpEnum'; +import MockAdapter from 'axios-mock-adapter'; -export default ({ mock, setup }: { mock?: boolean; setup: () => void }) => { - if (mock !== false && debug) setup(); -}; +const MOCK = new MockAdapter(MSR.axiosInstance, { onNoMatch: 'throwException' }); /** * mock- 成功返回结果结构体 @@ -39,15 +39,35 @@ export const successTableResponseWrap = (data: unknown) => { * @param code * @returns */ -export const failResponseWrap = (data: unknown, message: string, code = 50000) => { +export const failResponseWrap = (data: unknown, message?: string, messageDetail?: string) => { return { data, - status: 'fail', - message, - code, + message: message || '请求失败', + messageDetail, }; }; +export const mock = ( + method: RequestEnum, + url: string | RegExp, + data: unknown, + code: number, + isTable?: boolean, + message?: string, + messageDetail?: string +) => { + const methodMap = { + [RequestEnum.GET]: MOCK.onGet(url), + [RequestEnum.POST]: MOCK.onPost(url), + [RequestEnum.PUT]: MOCK.onPut(url), + [RequestEnum.DELETE]: MOCK.onDelete(url), + }; + if (code === 200) { + return methodMap[method].reply(code, isTable ? successTableResponseWrap(data) : successResponseWrap(data)); + } + return methodMap[method].reply(code, failResponseWrap(data, message, messageDetail)); +}; + /** * 拼接 mock 匹配的 url * @param url 不含前缀的接口地址 @@ -57,3 +77,5 @@ export const makeMockUrl = (url: string) => { const mockOrigin = window.location.origin; return `${mockOrigin}/front${url}`; }; + +export default MOCK; diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 94d5bfdac6..ad1fcde9a1 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -12,10 +12,8 @@ "build/**/*.d.ts", "mock/**/*.ts", "__test__/**/*.ts", + "node_modules/monaco-editor/monaco.d.ts" ], // TS解析路径配置 - "exclude": [ - "node_modules" - ], "compilerOptions": { "allowJs": true, // 允许编译器编译JS，JSX文件 "noEmit": true,