Merge branch 'dev' into dev-feat-multi-select

Merge pull request !21 from 王志强/master

.commitlintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["@commitlint/config-conventional"]
+};

.env

@@ -1,11 +1,11 @@
 # port
-VITE_DEV_PORT = 8001
+VITE_DEV_PORT = '8001'
 
 # development path
-VITE_DEV_PATH = /
+VITE_DEV_PATH = '/'
 
 # production path
-VITE_PRO_PATH = /
+VITE_PRO_PATH = '/'
 
 # spa-title
 VITE_GLOB_APP_TITLE = GoView

.gitignore

@@ -3,3 +3,4 @@ node_modules
 dist
 dist-ssr
 *.local
+.vscode

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint -e 

Makefile

@@ -3,14 +3,23 @@ default: help
 dev:
 	npm run dev
 
-build:
+dist:
 	npm run build
 
+view:
+	npm run preview
+
 lint:
 	npm run lint
 
+new:
+	npm run new
+
+
 	
 help:
-	@echo "    make dev 开发模式"
-	@echo "    make build 编译模式"
-	@echo "    make lint 格式校验"
+	@echo "    make dev [npm run dev] 开发模式"
+	@echo "    make dist [npm run build] 编译模式"
+	@echo "    make view [npm run preview] 预览打包文件"
+	@echo "    make new [npm run lint] 通过自动化流程创建代码"
+	@echo "    make lint [npm run new] 格式校验"

README.md

@@ -1 +1,134 @@
-# Vue 3 + Typescript + Vite2 + Pinia2
+## 总览
+
+![logo](readme/logo-t-y.png)
+
+GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可制作数据大屏，减少心智负担。
+
+### 纯 **😶 前端** 分支： **`master`**
+
+### 携带 **👻 后端** 请求分支: **`master-fetch`**
+
+项目纯前端-Demo 地址：[https://www.mtruning.club](https://www.mtruning.club)
+
+项目带后端-Demo 地址：[后端 Demo 地址](http://1.117.240.165:8080/goview/#/login)
+
+文档-在线地址：[http://www.mtruning.club:81/](http://www.mtruning.club:81/)
+
+文档-源码地址：[https://gitee.com/MTrun/go-view-doc](https://gitee.com/MTrun/go-view-doc)
+
+技术点：
+
+- 框架：基于 `Vue3` 框架编写，使用 `hooks` 写法抽离部分逻辑，使代码结构更加清晰；
+
+- 类型：使用 `TypeScript` 进行类型约束，减少未知错误发生概率，可以大胆修改逻辑内容；
+
+- 性能：多处性能优化，使用页面懒加载、组件动态注册、数据滚动加载等方式，提升页面渲染速度；
+
+- 存储：拥有本地记忆，部分配置项采用 `storage` 存储本地，提升使用体验；
+
+- 封装：项目进行了详细的工具类封装如：路由、存储、加/解密、文件处理、主题、NaiveUI 全局方法、组件等
+
+项目截图：
+![项目截图](readme/goView-canvas.png)
+
+主要技术栈为：
+
+| 名称                | 版本  | 名称        | 版本   |
+| ------------------- | ----- | ----------- | ------ |
+| Vue                 | 3.2.x | TypeScript4 | 4.6.x  |
+| Vite                | 2.9.x | NaiveUI     | 2.27.x |
+| ECharts             | 5.3.x | Pinia       | 2.0.x  |
+| 详见 `package.json` | 😁    | 🥰          | 🤗     |
+
+开发环境:
+
+| 名称 | 版本    | 名称    | 版本  |
+| ---- | ------- | ------- | ----- |
+| node | 16.14.x | npm     | 8.5.x |
+| pnpm | 7.1.x   | windows | 11    |
+
+已完成图表：
+
+| 分类   | 名称             | 名称             | 名称     |
+| ------ | ---------------- | ---------------- | -------- |
+| 图表   | 柱状图           | 横向柱状图       | 折线图   |
+| \*     | 单/多 折线面积图 | 饼图             | 水球图   |
+| \*     | 环形图           | NaiveUI 多种进度 | 🤠       |
+| 信息   | 文字             | 图片             | 😶       |
+| 列表   | 滚动排名列表     | 滚动表格         | 🤓       |
+| 小组件 | 边框-01~13       | 装饰-01~05       | 数字翻牌 |
+
+## 浏览器支持
+
+开发和测试平台均在 `Google` 和最新版 `EDGE` 上完成，暂未测试 `IE11` 等其它浏览器，如有需求请自行测试与兼容。
+
+## 安装
+
+本项目采用` pnpm` 进行包管理
+
+```shell
+#建议使用 nrm 切换到淘宝源 https://registry.npmmirror.com/
+#pnpm
+pnpm install
+
+#yarn
+yarn install
+
+#npm
+npm install
+```
+
+## 启动
+
+```shell
+#pnpm
+pnpm dev
+
+# npm
+npm run dev
+
+#yarn
+yarn dev
+
+#Makefile
+make dev
+```
+
+## 编译
+
+```shell
+#pnpm
+pnpm run build
+
+# npm
+npm run build
+
+#yarn
+yarn run build
+
+#Makefile
+make dist
+
+```
+
+## 代码提交
+
+- feat: 新功能
+- fix: 修复 Bug
+- docs: 文档修改
+- perf: 性能优化
+- revert: 版本回退
+- ci: CICD 集成相关
+- test: 添加测试代码
+- refactor: 代码重构
+- build: 影响项目构建或依赖修改
+- style: 不影响程序逻辑的代码修改
+- chore: 不属于以上类型的其他类型(日常事务)
+
+## 交流
+
+QQ 群：1030129384
+
+![QQ群](readme/goView-QQ.png)
+
+![渲染海报](readme/logo-poster.png)

build/constant.ts

@@ -1 +1,35 @@
-export const OUTPUT_DIR = 'dist';
+export const OUTPUT_DIR = 'dist'
+
+// monaco-editor 路径
+export const prefix = `monaco-editor/esm/vs`
+
+// chunk 警告大小
+export const chunkSizeWarningLimit = 2000
+
+// 禁用 brotli 压缩大小报告
+export const brotliSize = false
+
+// 分包
+export const rollupOptions = {
+  output: {
+    chunkFileNames: 'static/js/[name]-[hash].js',
+    entryFileNames: 'static/js/[name]-[hash].js',
+    assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
+    manualChunks: {
+      jsonWorker: [`${prefix}/language/json/json.worker`],
+      cssWorker: [`${prefix}/language/css/css.worker`],
+      htmlWorker: [`${prefix}/language/html/html.worker`],
+      tsWorker: [`${prefix}/language/typescript/ts.worker`],
+      editorWorker: [`${prefix}/editor/editor.worker`]
+    }
+  }
+}
+
+// 去除开发代码
+export const terserOptions = {
+  compress: {
+    keep_infinity: true,
+    drop_console: true,
+    drop_debugger: true
+  }
+}

index.css

@@ -0,0 +1,106 @@
+* {
+  margin: 0;
+}
+.first-loading-wrp {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #17171a;
+}
+.first-loading-wrp > h1 {
+  font-size: 128px;
+}
+.first-loading-wrp .loading-wrp {
+  padding: 98px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.dot {
+  animation: antRotate 1.2s infinite linear;
+  transform: rotate(45deg);
+  position: relative;
+  display: inline-block;
+  font-size: 32px;
+  width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+}
+.dot i {
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  display: block;
+  background-color: #1890ff;
+  border-radius: 100%;
+  transform: scale(0.75);
+  transform-origin: 50% 50%;
+  opacity: 0.3;
+  animation: antSpinMove 1s infinite linear alternate;
+}
+.dot i:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+.dot i:nth-child(2) {
+  top: 0;
+  right: 0;
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+.dot i:nth-child(3) {
+  right: 0;
+  bottom: 0;
+  -webkit-animation-delay: 0.8s;
+  animation-delay: 0.8s;
+}
+.dot i:nth-child(4) {
+  bottom: 0;
+  left: 0;
+  -webkit-animation-delay: 1.2s;
+  animation-delay: 1.2s;
+}
+@keyframes antRotate {
+  to {
+    -webkit-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+}
+@-webkit-keyframes antRotate {
+  to {
+    -webkit-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+}
+@keyframes antSpinMove {
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes antSpinMove {
+  to {
+    opacity: 1;
+  }
+}
+
+/* 小屏处理 0~1000*/
+.mobile-terminal {
+  display: none;
+}
+@media (max-width: 1000px) {
+  #app {
+    display: none;
+  }
+  .mobile-terminal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
+    height: 100vh;
+    text-align: center;
+    font-size: 24px;
+    font-weight: 200;
+    background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
+  }
+}

index.html

@@ -1,26 +1,32 @@
 <!DOCTYPE html>
 <html lang="zh-cmn-Hans">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
-  <meta name="renderer" content="webkit"/>
-  <meta
-    name="viewport"
-    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
-  />
-  <link rel="icon" href="./favicon.ico"/>
-  <title>GoView</title>
-  <style>*{margin: 0;}.first-loading-wrp{display:flex;justify-content:center;align-items:center;height:100vh;background-color: #17171a;}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
-</head>
-<body>
-<div id="appProvider" style="display: none"></div>
-<div id="app">
-  <div class="first-loading-wrp">
-    <div class="loading-wrp">
-        <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta name="description" content="GoView 是高效、高性能的拖拽式低代码数据可视化开发平台，将页面元素封装为基础组件，无需编写代码即可完成业务需求。">
+    <meta name="keywords" content="GoView，goview，低代码，可视化">
+    <meta name="author" content="奔跑的面条，面条">
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
+    <link rel="icon" href="./favicon.ico" />
+    <title>GoView</title>
+    <link rel="stylesheet" href="./index.css" />
+  </head>
+  <body>
+    <div id="appProvider" style="display: none;"></div>
+    <div id="app">
+      <div class="first-loading-wrp">
+        <div class="loading-wrp">
+          <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+        </div>
+      </div>
     </div>
-  </div>
-</div>
-<script type="module" src="/src/main.ts"></script>
-</body>
+    <div class="mobile-terminal">
+      <p>请使用 Web 端进行查看</p>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
 </html>

package.json

@@ -1,49 +1,71 @@
 {
   "name": "go-view",
-  "version": "0.1.0",
+  "version": "1.0.4",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vue-tsc --noEmit && vite build",
-    "serve": "vite preview",
-    "lint": "eslint \"{src}/**/*.{vue,ts,tsx}\" --fix --ext"
+    "preview": "vite preview",
+    "new": "plop --plopfile ./plop/plopfile.js",
+    "postinstall": "husky install"
   },
   "dependencies": {
-    "axios": "^0.23.0",
-    "mockjs": "^1.1.0",
-    "naive-ui": "^2.19.9",
-    "pinia": "^2.0.6",
-    "screenfull": "^6.0.0",
-    "vue": "^3.2.16",
-    "vue-i18n": "^9.2.0-beta.23",
-    "vue-router": "4.0.12"
+    "@types/color": "^3.0.3",
+    "@types/crypto-js": "^4.1.1",
+    "@types/keymaster": "^1.6.30",
+    "animate.css": "^4.1.1",
+    "axios": "0.23.0",
+    "color": "^4.2.3",
+    "crypto-js": "^4.1.1",
+    "echarts-liquidfill": "^3.1.0",
+    "highlight.js": "^11.5.0",
+    "html2canvas": "^1.4.1",
+    "keymaster": "^1.6.2",
+    "monaco-editor": "^0.33.0",
+    "naive-ui": "2.30.3",
+    "pinia": "^2.0.13",
+    "screenfull": "^6.0.1",
+    "vue": "^3.2.31",
+    "vue-demi": "^0.13.1",
+    "vue-i18n": "9.1.9",
+    "vue-router": "4.0.12",
+    "vue3-lazyload": "^0.2.5-beta",
+    "vue3-sketch-ruler": "^1.3.3",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@types/node": "^16.11.1",
-    "@typescript-eslint/eslint-plugin": "^5.6.0",
-    "@typescript-eslint/parser": "^5.6.0",
+    "@commitlint/cli": "^17.0.2",
+    "@commitlint/config-conventional": "^17.0.2",
+    "@types/node": "^16.11.26",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
+    "@vicons/carbon": "^0.12.0",
     "@vicons/ionicons5": "~0.11.0",
-    "@vitejs/plugin-vue": "^1.9.3",
-    "@vitejs/plugin-vue-jsx": "^1.2.0",
-    "@vue/compiler-sfc": "^3.2.20",
-    "@vueuse/core": "^7.3.0",
+    "@vitejs/plugin-vue": "^1.10.2",
+    "@vitejs/plugin-vue-jsx": "^1.3.9",
+    "@vue/compiler-sfc": "^3.2.31",
+    "@vueuse/core": "^7.7.1",
+    "commitlint": "^17.0.2",
     "default-passive-events": "^2.0.0",
-    "eslint": "^8.4.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.3",
+    "echarts": "^5.3.2",
+    "eslint": "^8.12.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.2.0",
+    "eslint-plugin-vue": "^8.5.0",
+    "husky": "^8.0.1",
     "lodash": "~4.17.21",
-    "prettier": "^2.5.1",
-    "sass": "^1.43.2",
-    "sass-loader": "^12.2.0",
-    "typescript": "^4.4.4",
-    "vite": "^2.6.10",
+    "mockjs": "^1.1.0",
+    "plop": "^3.0.5",
+    "prettier": "^2.6.2",
+    "sass": "^1.49.11",
+    "sass-loader": "^12.6.0",
+    "typescript": "^4.6.3",
+    "vite": "2.9.5",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-importer": "^0.2.5",
     "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-style-import": "^1.2.1",
-    "vue-tsc": "^0.28.7"
-  },
-  "lint-staged": {
-    "*.{vue,js,ts,tsx}": "eslint --fix"
+    "vite-plugin-monaco-editor": "^1.1.0",
+    "vue-echarts": "^6.0.2",
+    "vue-tsc": "^0.28.10"
   }
 }

plop/plopfile.js

@@ -0,0 +1,5 @@
+const storeGenerator = require('./store-template/prompt')
+
+module.exports = (plop) => {
+  plop.setGenerator('store', storeGenerator)
+}

plop/store-template/index.d.hbs

@@ -0,0 +1,3 @@
+export interface {{upperDataName}}StoreType {
+  
+}

plop/store-template/index.hbs

@@ -0,0 +1,11 @@
+import { defineStore } from 'pinia'
+import { {{upperDataName}}StoreType } from './{{name}}Store.d'
+import { setLocalStorage, getLocalStorage } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+
+export const use{{upperDataName}}Store = defineStore({
+  id: 'use{{upperDataName}}Store',
+  state: (): {{upperDataName}}StoreType => ({}),
+  getters: {},
+  actions: {}
+})

plop/store-template/prompt.js

@@ -0,0 +1,45 @@
+module.exports = {
+  description: 'create a store',
+  prompts: [
+    {
+      type: 'input',
+      name: 'name',
+      message: 'Please enter store name，such as "newStoreName" :',
+      validate (value) {
+        if (!value || value.trim === '') {
+          return 'name is required';
+        }
+        return true;
+      },
+    }
+  ],
+  actions: (data) => {
+    const dataName = data.name
+
+    // 首字母大写
+    const upperDataName = dataName.slice(0, 1).toUpperCase() + dataName.slice(1)
+
+    const actions = [
+      {
+        type: 'add',
+        path: `${process.cwd()}/src/store/modules/${dataName}Store/${dataName}Store.ts`, // 这里的name就是上面定义的键
+        templateFile: './store-template/index.hbs',
+        data: {
+          name: data.name,
+          upperDataName,
+        }
+      },
+      {
+        type: 'add',
+        path: `${process.cwd()}/src/store/modules/${dataName}Store/${dataName}Store.d.ts`, // 这里的name就是上面定义的键
+        templateFile: './store-template/index.d.hbs',
+        data: {
+          name: data.name,
+          upperDataName,
+        }
+      },
+    ]
+    
+    return actions
+  }
+}

prettier.config.js

@@ -1,10 +1,10 @@
 module.exports = {
-  printWidth: 80,
+  printWidth: 120,
   tabWidth: 2,
   useTabs: false,
   singleQuote: true,
   semi: false,
-  trailingComma: "es5",
+  trailingComma: "none",
   bracketSpacing: true,
   jsxSingleQuote: true,
   jsxBracketSameLine: false,

src/App.vue

@@ -1,28 +1,31 @@
 <template>
   <n-config-provider
     :locale="zhCN"
-    :theme="getDarkTheme"
+    :theme="darkTheme"
+    :hljs="hljsTheme"
     :date-locale="dateZhCN"
-    :theme-overrides="getThemeOverrides"
+    :theme-overrides="overridesTheme"
   >
-    <AppProvider>
-      <router-view />
-    </AppProvider>
+    <go-app-provider>
+      <I18n></I18n>
+      <router-view></router-view>
+    </go-app-provider>
   </n-config-provider>
 </template>
 
 <script lang="ts" setup>
 import { zhCN, dateZhCN, NConfigProvider } from 'naive-ui'
-import { AppProvider } from '@/components/Application'
-import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { GoAppProvider } from '@/components/GoAppProvider'
+import { I18n } from '@/components/I18n'
 
-import { getDarkThemeHook, getThemeOverridesHook } from '@/hooks'
+import { useDarkThemeHook, useThemeOverridesHook, useCode } from '@/hooks'
 
-// 返回暗黑主题
-const getDarkTheme = getDarkThemeHook()
+// 暗黑主题
+const darkTheme = useDarkThemeHook()
 
 // 主题配置
-const getThemeOverrides = getThemeOverridesHook()
-</script>
+const overridesTheme = useThemeOverridesHook()
 
-<style lang="scss"></style>
+// 代码主题
+const hljsTheme = useCode()
+</script>

src/api/axios.ts

@@ -11,7 +11,6 @@ const axiosInstance = axios.create({
 axiosInstance.interceptors.request.use(
   (config: AxiosRequestConfig) => {
     config.headers = {}
-    config.data = {}
     return config
   },
   (error: AxiosRequestConfig) => {
@@ -26,11 +25,10 @@ axiosInstance.interceptors.response.use(
     if (code === ResultEnum.DATA_SUCCESS) return Promise.resolve(res.data)
     // 重定向
     if (ErrorPageNameMap.get(code)) redirectErrorPage(code)
-    return Promise.reject(res.data)
+    return Promise.resolve(res.data)
   },
   (err: AxiosResponse) => {
-    const { code } = err.data as { code: number }
-    if (ErrorPageNameMap.get(code)) redirectErrorPage(code)
+    window['$message'].error('接口异常，请检查！')
     Promise.reject(err)
   }
 )

src/api/http.ts

@@ -1,34 +1,60 @@
 import axiosInstance from './axios'
-import { RequestEnum, ContentTypeEnum } from '@/enums/httpEnum'
+import { RequestHttpEnum, ContentTypeEnum } from '@/enums/httpEnum'
 
-// 缓存处理
-const filterUrl = (url: string) => {
-  return url.indexOf('?') !== -1 ? `${url}&time=${new Date().getTime()}` : `${url}?time=${new Date().getTime()}`
-}
-
-export const get = (params: object, url: string) => {
+export const get = (url: string, params?: object) => {
   return axiosInstance({
-    url: filterUrl(url),
-    method: RequestEnum.GET,
-    params
+    url: url,
+    method: RequestHttpEnum.GET,
+    params: params
   })
 }
 
-export const post = (params: object, url: string, headersType: string) => {
+export const post = (url: string, data?: object, headersType?: string) => {
   return axiosInstance({
     url: url,
-    method: RequestEnum.POST,
-    data: params,
+    method: RequestHttpEnum.POST,
+    data: data,
     headers: {
       'Content-Type': headersType || ContentTypeEnum.JSON
     }
   })
 }
 
-export const del = (params: object, url: string) => {
+export const put = (url: string, data?: object, headersType?: ContentTypeEnum) => {
   return axiosInstance({
-    url: filterUrl(url),
-    method: RequestEnum.DELETE,
+    url: url,
+    method: RequestHttpEnum.PUT,
+    data: data,
+    headers: {
+      'Content-Type': headersType || ContentTypeEnum.JSON
+    }
+  })
+}
+
+export const del = (url: string, params?: object) => {
+  return axiosInstance({
+    url: url,
+    method: RequestHttpEnum.DELETE,
     params
   })
-}
+}
+
+// 获取请求函数，默认get
+export const http = (type?: RequestHttpEnum) => {
+  switch (type) {
+    case RequestHttpEnum.GET:
+      return get
+
+    case RequestHttpEnum.POST:
+      return post
+
+    case RequestHttpEnum.PUT:
+      return put
+
+    case RequestHttpEnum.DELETE:
+      return del
+
+    default:
+      return get
+  }
+}

src/api/mock/index.ts

@@ -0,0 +1,54 @@
+import test from './test.mock'
+import { MockMethod } from 'vite-plugin-mock'
+import { RequestHttpEnum } from '@/enums/httpEnum'
+
+// 单个X数据
+export const chartDataUrl = '/mock/chartData'
+export const numberFloatUrl = '/mock/number/float'
+export const numberIntUrl = '/mock/number/int'
+export const textUrl = '/mock/text'
+export const imageUrl = '/mock/image'
+export const rankListUrl = '/mock/rankList'
+export const scrollBoardUrl = '/mock/scrollBoard'
+
+const mockObject: MockMethod[] = [
+  {
+    // 正则
+    // url: /\/mock\/mockData(|\?\S*)$/,
+    url: chartDataUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchMockData
+  },
+  {
+    url: numberFloatUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchNumberFloat
+  },
+  {
+    url: numberIntUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchNumberInt
+  },
+  {
+    url: textUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchText
+  },
+  {
+    url: imageUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchImage(Math.round(Math.random() * 10))
+  },
+  {
+    url: rankListUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchRankList
+  },
+  {
+    url: scrollBoardUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchScrollBoard
+  }
+]
+
+export default mockObject

src/api/mock/test.mock.ts

@@ -0,0 +1,107 @@
+export default {
+  // 图表
+  fetchMockData: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: {
+      dimensions: ['product', 'dataOne', 'dataTwo'],
+      source: [
+        {
+          product: '@name',
+          'dataOne|100-900': 3,
+          'dataTwo|100-900': 3
+        },
+        {
+          product: '@name',
+          'dataOne|100-900': 3,
+          'dataTwo|100-900': 3
+        },
+        {
+          product: '@name',
+          'dataOne|100-900': 3,
+          'dataTwo|100-900': 3
+        },
+        {
+          product: '@name',
+          'dataOne|100-900': 3,
+          'dataTwo|100-900': 3
+        },
+        {
+          product: '@name',
+          'dataOne|100-900': 3,
+          'dataTwo|100-900': 3
+        },
+        {
+          product: '@name',
+          'dataOne|100-900': 3,
+          'dataTwo|100-900': 3
+        }
+      ]
+    }
+  },
+  // 排名列表
+  fetchRankList: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: [
+      { name: '@name', 'value|100-900': 5 },
+      { name: '@name', 'value|100-900': 5 },
+      { name: '@name', 'value|100-900': 5 },
+      { name: '@name', 'value|100-900': 5 },
+      { name: '@name', 'value|100-900': 5 },
+      { name: '@name', 'value|100-900': 5 },
+      { name: '@name', 'value|100-900': 5 },
+      { name: '@name', 'value|100-900': 5 },
+      { name: '@name', 'value|100-900': 5 },
+      { name: '@name', 'value|100-900': 5 },
+      { name: '@name', 'value|100-900': 5 },
+      { name: '@name', 'value|100-900': 5 },
+      { name: '@name', 'value|100-900': 5 }
+    ]
+  },
+  // 轮播表格
+  fetchScrollBoard: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: [
+      ['行1列1', '行1列2', '1'],
+      ['行2列1', '行2列2', '2'],
+      ['行3列1', '行3列2', '3'],
+      ['行4列1', '行4列2', '4'],
+      ['行5列1', '行5列2', '5'],
+      ['行6列1', '行6列2', '6'],
+      ['行7列1', '行7列2', '行7列3'],
+      ['行8列1', '行8列2', '行8列3'],
+      ['行9列1', '行9列2', '行9列3'],
+      ['行10列1', '行10列2', '行10列3']
+    ]
+  },
+  // 获取数字
+  fetchNumberFloat: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: '@float(0, 0.99, 1, 4)'
+  },
+  fetchNumberInt: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: '@integer(0, 100)'
+  },
+  fetchText: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: '@paragraph(1, 10)'
+  },
+  fetchImage: (num: number) => ({
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: `https://robohash.org/${num}`
+  })
+}