chore: modfify 2 alova

2025-04-05 04:22:49 +08:00 · 2024-03-15 17:28:25 +08:00 · 2024-03-15 17:28:25 +08:00 · 76f15c8d5a
commit 76f15c8d5a
parent 87a70d9a1a
17 changed files with 301 additions and 264 deletions
--- a/README.md
+++ b/README.md
@ -11,14 +11,14 @@

 <div align='center'>

-  **English** |  [中文](./README.zh-CN.md)
+  English |  [中文](./README.zh-CN.md)
 </div>

-## 🌈introduction
+## introduction

 [Nova-admin](https://github.com/chansee97/nova-admin) A free and open-source template for middle platform/back-end based on Vue3, Vite4, Typescript, pinia, Naive UI, and Vue-Router to help improve the development efficiency of middle platform/back-end

-## ⚡features
+## features

 - **Latest popular technology stack** - Developed based on the latest technology stack such as Vue3, Vite, TypeScript, NaiveUI, Pinia, etc
 - **Network request function encapsulation** - Perfect axios encapsulation and configuration, unified response processing and multi-scenario capability
@ -28,7 +28,7 @@
 - **Theme Configuration** - Dark Theme Adaptation
 - **Code Specification** - Only perform eslint verification at commit time, no too many restrictions, easier development

-## 😎project preview & display
+## project preview & display

 - [Nova-Admin preview](https://admin-nova.vercel.app/)

@ -38,11 +38,11 @@
 ![image.png](https://s2.loli.net/2023/10/10/cy8nrv1kSLpjCT9.png)
 ![image.png](https://s2.loli.net/2023/10/10/rACdG2fUI6oJN7H.png)

-## 💎related projects
+## related projects

 - [Nova-admin-nest](https://github.com/chansee97/nove-admin-nest) (under development) Nova-Admin supporting background project based on TS, NestJs, typeorm

-## 🚧install and use
+## install and use

 The local development environment is recommended to use pnpm 8.x, Node.js 16.x

@ -58,22 +58,26 @@ pnpm build

 ```

-## 🙌 learn to communicate
+## learn to communicate

 Nova-Admin is a completely open-source and free project. It is still being optimized and iterated. It is designed to help developers more conveniently develop medium and large management systems. If you have any questions, please ask questions in the QQ exchange group.

 ![image.png](https://s2.loli.net/2023/08/26/PQJjURT7V46Lw2d.png)

-## 🧩contribution
+## contribution

 If you find any issues or have suggestions for improvement, please create an issue or submit a PR. We welcome your contributions!

-## 🤗support
+## support

 If you feel that this project is helpful for your work or study, please help me order a ✨ Star, which will be a great encouragement and support for me, or you can buy me a cup of coffee below

 ![sponsor](https://cdn.jsdelivr.net/gh/chansee97/static/sponsor.png)

-## 🧾License
+## [Contributors](https://github.com/chansee97/nova-admin/graphs/contributors)
+
+![Contributors](https://contrib.rocks/image?repo=chansee97/nova-admin)
+
+## License

 [MIT](LICENSE)
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -11,14 +11,14 @@

 <div align='center'>

-  [English](./README.md) | **中文**
+  [English](./README.md) | 中文
 </div>

-## 🌈 介绍
+## 介绍

 [Nova-admin](https://github.com/chansee97/nova-admin)一个基于Vue3、Vite4、Typescript、pinia、Naive UI、Vue-Router的后台管理免费开源模板，助力提高中后台开发效率

-## ⚡特性
+## 特性

 - **最新流行技术栈** - 基于Vue3、Vite、TypeScript、NaiveUI、Pinia等最新技术栈开发
 - **网络请求功能封装** - 完善的axios封装和配置，统一的响应处理和多场景能力
@ -28,7 +28,7 @@
 - **主题配置** - 黑暗主题适配
 - **代码规范** - 仅在提交时进行eslint校验，没有过多限制，开发更简便

-## 😎 项目预览&展示
+## 项目预览&展示

 - [Nova-Admin 预览](https://admin-nova.vercel.app/)

@ -38,11 +38,11 @@
 ![image.png](https://s2.loli.net/2023/10/10/cy8nrv1kSLpjCT9.png)
 ![image.png](https://s2.loli.net/2023/10/10/rACdG2fUI6oJN7H.png)

-## 💎 相关项目
+## 相关项目

 - [Nova-admin-nest](https://github.com/chansee97/nove-admin-nest) (开发中)基于TS, NestJs, typeorm的Nova-Admin配套后台项目

-## 🚧 安装使用
+## 安装使用

 本地开发环境建议使用 pnpm 8.x 、Node.js 16.x

@ -58,22 +58,26 @@ pnpm build

 ```

-## 🙌 学习交流
+## 学习交流

 Nova-Admin 是完全开源免费的项目，目前仍然在优化迭代中，旨在帮助开发者更方便地进行中大型管理系统开发，有使用问题欢迎在QQ交流群内提问。

 ![image.png](https://s2.loli.net/2023/08/26/PQJjURT7V46Lw2d.png)

-## 🧩贡献
+## 贡献

 如果您发现了任何问题或有改进建议，请创建一个issue或提交一个PR。我们欢迎您的贡献！

-## 🤗 支持
+## 支持

 如果感觉本项目对你工作或学习有帮助，请帮我点一个✨Star,这将是对我极大的鼓励与支持, 也可以在下方请我喝一杯咖啡

 ![sponsor](https://cdn.jsdelivr.net/gh/chansee97/static/sponsor.png)

-## 🧾License
+## [贡献者](https://github.com/chansee97/nova-admin/graphs/contributors)
+
+![Contributors](https://contrib.rocks/image?repo=chansee97/nova-admin)
+
+## 协议

 [MIT](LICENSE)
--- a/index.html
+++ b/index.html
@ -1,20 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link
-      rel="icon"
-      href="/favicon.svg" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0" />
-    <title>%VITE_APP_NAME%</title>
-  </head>
-  <body>
-    <div id="appLoading"></div>
-    <div id="app"></div>
-    <script
-      type="module"
-      src="/src/main.ts"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>%VITE_APP_NAME%</title>
+</head>
+
+<body>
+  <div id="appLoading"></div>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
 </html>
--- a/package.json
+++ b/package.json
@ -24,7 +24,7 @@
    "admin-template",
    "vue-admin",
    "vue-admin-template",
-    "Vite4",
+    "Vite5",
    "Vite",
    "vite-admin",
    "TypeScript",
@ -44,17 +44,14 @@
    "build:dev": "vue-tsc --noEmit && vite build --mode dev",
    "build:test": "vue-tsc --noEmit && vite build --mode test",
    "preview": "vite preview",
-    "lint": "eslint . --fix",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
    "sizecheck": "npx vite-bundle-visualizer"
  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-customizable"
-    }
-  },
  "dependencies": {
    "@tinymce/tinymce-vue": "^5.1.1",
    "@vueuse/core": "^10.9.0",
+    "alova": "^2.17.1",
    "axios": "^1.6.7",
    "crypto-js": "^4.2.0",
    "echarts": "^5.5.0",
@ -91,6 +88,11 @@
    "vite-plugin-svg-icons": "^2.0.1",
    "vue-tsc": "^1.8.27"
  },
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ]
+  },
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged"
  },
--- a/src/service/api/login.ts
+++ b/src/service/api/login.ts
@ -1,4 +1,4 @@
-import { mockRequest } from '../http'
+import { alovaInstance } from '../http'

 interface Ilogin {
  username: string
@ -6,14 +6,14 @@ interface Ilogin {
 }

 export function fetchLogin(params: Ilogin) {
-  return mockRequest.post<any>('/login', params)
+  return alovaInstance.Post<any>('/login', params)
 }
 export function fetchUpdateToken(params: any) {
-  return mockRequest.post<ApiAuth.loginToken>('/updateToken', params)
+  return alovaInstance.Post<ApiAuth.loginToken>('/updateToken', params)
 }
 export function fetchUserInfo(params: any) {
-  return mockRequest.get<Auth.UserInfo>('/getUserInfo', { params })
+  return alovaInstance.Get<Auth.UserInfo>('/getUserInfo', { params })
 }
 export function fetchUserRoutes(params: { id: number }) {
-  return mockRequest.get<AppRoute.Route[]>('/getUserRoutes', { params })
+  return alovaInstance.Get<AppRoute.Route[]>('/getUserRoutes', { params })
 }
--- a/src/service/api/mock.ts
+++ b/src/service/api/mock.ts
@ -1,5 +1,5 @@
-import { mockRequest } from '../http'
+import { alovaInstance } from '../http'

 export function fetchUserList() {
-  return mockRequest.get('/userList')
+  return alovaInstance.Get('/userList')
 }
--- a/src/service/api/test.ts
+++ b/src/service/api/test.ts
@ -1,45 +1,45 @@
-import { mockRequest, request } from '../http'
+import qs from 'qs'
+import { alovaInstance } from '../http'

 /* get方法测试 */
 export function fetachGet(params?: any) {
-  return request.get('/getAPI', { params })
+  return alovaInstance.Get('/getAPI', { params })
 }
 /* post方法测试 */
 export function fetachPost(data: any) {
-  return request.post('/postAPI', data)
+  return alovaInstance.Post('/postAPI', data)
 }
 /* formPost方法测试 */
 export function fetachFormPost(data: any) {
-  return request.formPost('/postAPI', data)
+  return alovaInstance.Post('/postAPI', qs.stringify(data), {
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+  })
 }
 /* delete方法测试 */
 export function fetachDelete() {
-  return request.delete('/deleteAPI')
+  return alovaInstance.Delete('/deleteAPI')
 }
 /* put方法测试 */
 export function fetachPut(data: any) {
-  return request.put('/putAPI', data)
+  return alovaInstance.Put('/putAPI', data)
 }

 /* 测试状态码500失败 */
 export function testFailedRequest() {
-  return request.get('/filedRequest')
+  return alovaInstance.Get('/serverError')
 }

 /* 测试业务码500失败 */
 export function testFailedResponse() {
-  return request.get('/filedResponse')
+  return alovaInstance.Post('/businessError')
+}
+/* token失效的接口 */
+export function expiredTokenRequest() {
+  return alovaInstance.Get('/expiredToken')
 }
 /* 测试token刷新接口 */
-export function testUpdataToken() {
-  return request.get('/updataToken')
-}
-/* 测试token刷新接口 */
-export function testFailedResponse_NT() {
-  return request.get('/failedResponse_NT')
-}
-
-/* mock方法测试 */
-export function fetchMock() {
-  return mockRequest.post('/login')
+export function refreshToken() {
+  return alovaInstance.Get('/updataToken')
 }
--- a/src/service/http/alova.ts
+++ b/src/service/http/alova.ts
@ -0,0 +1,83 @@
+import type { Method } from 'alova'
+import { createAlova } from 'alova'
+import VueHook from 'alova/vue'
+import GlobalFetch from 'alova/GlobalFetch'
+import {
+  handleBusinessError,
+  handleRefreshToken,
+  handleResponseError,
+  handleServiceResult,
+} from './handle'
+import {
+  DEFAULT_ALOVA_OPTIONS,
+  DEFAULT_BACKEND_OPTIONS,
+  REFRESH_TOKEN_CODE,
+} from './config'
+import { local } from '@/utils'
+
+// docs path of alova.js https://alova.js.org/
+/**
+ * 前端alova的配置
+ */
+interface AlovaConfig {
+  baseURL: string
+  timeout?: number
+  beforeRequest?: (method: Method<globalThis.Ref<unknown>>) => void
+}
+
+export function createAlovaInstance(
+  alovaConfig: AlovaConfig,
+  backendConfig?: Service.BackendConfig,
+) {
+  const _backendConfig = { ...DEFAULT_BACKEND_OPTIONS, ...backendConfig }
+  const _alovaConfig = { ...DEFAULT_ALOVA_OPTIONS, ...alovaConfig }
+
+  return createAlova({
+    statesHook: VueHook,
+    requestAdapter: GlobalFetch(),
+    localCache: null,
+    baseURL: _alovaConfig.baseURL,
+    timeout: _alovaConfig.timeout,
+
+    beforeRequest(method) {
+      // 添加token到请求头
+      method.config.headers.token = `Bearer ${local.get('token')}`
+      alovaConfig.beforeRequest?.(method)
+    },
+
+    responded: {
+    // 请求成功的拦截器
+      onSuccess: async (response, method) => {
+        const { status } = response
+
+        if (status === 200) {
+        // 获取返回的数据
+          const apiData = await response.json()
+          // 请求成功
+          if (apiData[_backendConfig.codeKey] === _backendConfig.successCode)
+            return handleServiceResult(apiData.data, null)
+
+          // token失效, 刷新token
+          if (REFRESH_TOKEN_CODE.includes(apiData[_backendConfig.codeKey])) {
+            await handleRefreshToken()
+            method.send()
+          }
+
+          // 业务请求失败
+          const errorResult = handleBusinessError(apiData, _backendConfig)
+          return handleServiceResult(null, errorResult)
+        }
+        // 接口请求失败
+        const errorResult = handleResponseError(response)
+        return handleServiceResult(null, errorResult)
+      },
+      onError: (error, _method) => {
+        console.warn('🚀 ~ error:', error)
+      },
+
+      onComplete: async (_method) => {
+        // 处理请求完成逻辑
+      },
+    },
+  })
+}
--- a/src/service/http/config.ts
+++ b/src/service/http/config.ts
@ -0,0 +1,63 @@
+/** 默认实例的Aixos配置 */
+import type { AxiosRequestConfig } from 'axios'
+
+export const DEFAULT_AXIOS_OPTIONS: AxiosRequestConfig = {
+  // 请求超时时间,默认15秒
+  timeout: 15 * 1000,
+}
+export const DEFAULT_ALOVA_OPTIONS: AxiosRequestConfig = {
+  // 请求超时时间,默认15秒
+  timeout: 15 * 1000,
+}
+
+/** 默认实例的后端字段配置 */
+export const DEFAULT_BACKEND_OPTIONS = {
+  codeKey: 'code',
+  dataKey: 'data',
+  msgKey: 'msg',
+  successCode: 200,
+}
+
+/** 错误信息的显示时间 */
+export const ERROR_MSG_DURATION = 3 * 1000
+
+/** 默认的请求错误code */
+export const DEFAULT_REQUEST_ERROR_CODE = 'DEFAULT'
+
+/** 默认的请求错误文本 */
+export const DEFAULT_REQUEST_ERROR_MSG = '请求错误~'
+
+/** 请求超时的错误code */
+export const REQUEST_TIMEOUT_CODE = 'TIME_OUT'
+
+/** 请求超时的错误文本 */
+export const REQUEST_TIMEOUT_MSG = '请求超时~'
+
+/** 默认的请求错误code */
+export const NETWORK_ERROR_CODE = 'NETWORK_ERROR'
+
+/** 默认的请求错误文本 */
+export const NETWORK_ERROR_MSG = '网络错误'
+
+/** 请求不成功各种状态的错误 */
+export const ERROR_STATUS = {
+  400: '400: 请求出现语法错误~',
+  401: '401: 用户未授权~',
+  403: '403: 服务器拒绝访问~',
+  404: '404: 请求的资源不存在~',
+  405: '405: 请求方法未允许~',
+  408: '408: 网络请求超时~',
+  500: '500: 服务器内部错误~',
+  501: '501: 服务器未实现请求功能~',
+  502: '502: 错误网关~',
+  503: '503: 服务不可用~',
+  504: '504: 网关超时~',
+  505: '505: http版本不支持该请求~',
+  [DEFAULT_REQUEST_ERROR_CODE]: DEFAULT_REQUEST_ERROR_MSG,
+}
+
+/** token刷新的code */
+export const REFRESH_TOKEN_CODE = [888, 999]
+
+/** 没有错误提示的code */
+export const ERROR_NO_TIP_STATUS = [10000]
--- a/src/service/http/handle.ts
+++ b/src/service/http/handle.ts
@ -1,4 +1,4 @@
-import type { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
+import type { AxiosError } from 'axios'
 import { showError } from './utils'
 import {
  DEFAULT_REQUEST_ERROR_CODE,
@ -8,7 +8,7 @@ import {
  NETWORK_ERROR_MSG,
  REQUEST_TIMEOUT_CODE,
  REQUEST_TIMEOUT_MSG,
-} from '@/config'
+} from './config'
 import { useAuthStore } from '@/store'
 import { fetchUpdateToken } from '@/service'
 import { local } from '@/utils'
@ -20,9 +20,9 @@ type ErrorStatus = keyof typeof ERROR_STATUS
 * @param {AxiosError} err
 * @return {*}
 */
-export function handleAxiosError(err: AxiosError) {
+export function handleFontEndError(err: AxiosError) {
  const error: Service.RequestError = {
-    type: 'Axios',
+    type: 'Alova',
    code: DEFAULT_REQUEST_ERROR_CODE,
    msg: DEFAULT_REQUEST_ERROR_MSG,
  }
@ -54,7 +54,7 @@ export function handleAxiosError(err: AxiosError) {
 * @param {AxiosResponse} response
 * @return {*}
 */
-export function handleResponseError(response: AxiosResponse) {
+export function handleResponseError(response: Response) {
  const error: Service.RequestError = {
    type: 'Axios',
    code: DEFAULT_REQUEST_ERROR_CODE,
@ -83,7 +83,7 @@ export function handleResponseError(response: AxiosResponse) {
 * @param {Service} config axios字段配置
 * @return {*}
 */
-export function handleBusinessError(data: Record<string, any>, config: Service.BackendResultConfig) {
+export function handleBusinessError(data: Record<string, any>, config: Service.BackendConfig) {
  const { codeKey, msgKey } = config
  const error: Service.RequestError = {
    type: 'Business',
@ -119,23 +119,18 @@ export function handleServiceResult<T = any>(data: any, error: Service.RequestEr

 /**
 * @description: 处理接口token刷新
- * @param {AxiosRequestConfig} config axios字段配置
 * @return {*}
 */
-export async function handleRefreshToken(config: AxiosRequestConfig) {
+export async function handleRefreshToken() {
  const authStore = useAuthStore()
  const refreshToken = local.get('refreshToken')
  const { data } = await fetchUpdateToken(refreshToken)
  if (data) {
-    local.set('refreshToken', data.accessToken)
-    local.set('token', data.refreshToken)
-
-    // 设置token
-    if (config.headers)
-      typeof config.headers.set === 'function' && config.headers.set('Authorization', `Bearer ${data.accessToken || ''}`)
-
-    return config
+    local.set('token', data.accessToken)
+    local.set('refreshToken', data.refreshToken)
+  }
+  else {
+    // 刷新失败，推出
+    await authStore.resetAuthStore()
  }
-  await authStore.resetAuthStore()
-  return null
 }
--- a/src/service/http/index.ts
+++ b/src/service/http/index.ts
@ -1,4 +1,5 @@
 import { createRequest } from './request'
+import { createAlovaInstance } from './alova'
 import { proxyConfig } from '@/config'

 const { url, urlPattern } = proxyConfig[import.meta.env.MODE]
@ -15,3 +16,7 @@ export const request = createRequest({
 export const mockRequest = createRequest({ baseURL: 'https://mock.apifox.com/m1/4071143-0-default' }, {
  msgKey: 'message',
 })
+
+export const alovaInstance = createAlovaInstance({
+  baseURL: 'https://mock.apifox.com/m1/4071143-0-default',
+})
--- a/src/service/http/instance.ts
+++ b/src/service/http/instance.ts
@ -1,15 +1,15 @@
 import axios from 'axios'
 import type { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios'
 import {
-  handleAxiosError,
  handleBusinessError,
+  handleFontEndError,
  handleRefreshToken,
  handleResponseError,
  handleServiceResult,
 } from './handle'
 import { clearInvalidParameters, transformRequestData } from './utils'
+import { DEFAULT_AXIOS_OPTIONS, DEFAULT_BACKEND_OPTIONS, REFRESH_TOKEN_CODE } from './config'
 import { local } from '@/utils'
-import { DEFAULT_AXIOS_OPTIONS, DEFAULT_BACKEND_OPTIONS, REFRESH_TOKEN_CODE } from '@/config'

 /**
 * @description: 封装axios请求类
@ -18,11 +18,11 @@ export default class CreateAxiosInstance {
  // axios 实例
  instance: AxiosInstance
  // 后台字段配置
-  backendConfig: Service.BackendResultConfig
+  backendConfig: Service.BackendConfig
  // 基础配置
  axiosConfig: AxiosRequestConfig = {}

-  constructor(axiosConfig: AxiosRequestConfig, backendConfig: Partial<Service.BackendResultConfig> = DEFAULT_BACKEND_OPTIONS) {
+  constructor(axiosConfig: AxiosRequestConfig, backendConfig: Partial<Service.BackendConfig> = DEFAULT_BACKEND_OPTIONS) {
    // 设置了axios实例上的一些默认配置,新配置会覆盖默认配置
    this.backendConfig = { ...DEFAULT_BACKEND_OPTIONS, ...backendConfig }
    this.instance = axios.create({ ...DEFAULT_AXIOS_OPTIONS, ...axiosConfig })
@ -48,7 +48,7 @@ export default class CreateAxiosInstance {
        return handleConfig
      },
      (error: AxiosError) => {
-        const errorResult = handleAxiosError(error)
+        const errorResult = handleFontEndError(error)
        return handleServiceResult(null, errorResult)
      },
    )
@ -79,7 +79,7 @@ export default class CreateAxiosInstance {
      },
      (error: AxiosError) => {
        // 处理http常见错误，进行全局提示等
-        const errorResult = handleAxiosError(error)
+        const errorResult = handleFontEndError(error)
        return handleServiceResult(null, errorResult)
      },
    )
--- a/src/service/http/request.ts
+++ b/src/service/http/request.ts
@ -34,7 +34,7 @@ async function getRequestResponse(options: {
 */
 export function createRequest(
  axiosConfig: AxiosRequestConfig,
-  backendConfig?: Partial<Service.BackendResultConfig>,
+  backendConfig?: Partial<Service.BackendConfig>,
 ) {
  const axiosInstance = new CreateAxiosInstance(axiosConfig, backendConfig)
  /**
--- a/src/service/http/utils.ts
+++ b/src/service/http/utils.ts
@ -54,7 +54,7 @@ function handleFormData(data: Record<string, any>) {
 * 接口提交的参数去除无效字段
 * @param requestData -接口提交的参数
 */
-export function clearInvalidParameters(requestData: Record<string, any>) {
+export function clearInvalidParameters(requestData?: Record<string, any>) {
  const result: Record<string, any> = {}
  for (const key in requestData) {
    if (isEmpty(requestData[key]) || isNullOrUnDef(requestData[key]))
--- a/src/typings/service.d.ts
+++ b/src/typings/service.d.ts
@ -1,7 +1,8 @@
 /** 请求的相关类型 */
 declare namespace Service {
+
  /** 后端接口返回的数据结构配置 */
-  interface BackendResultConfig {
+  interface BackendConfig {
    /** 表示后端请求状态码的属性字段 */
    codeKey: string
    /** 表示后端请求数据的属性字段 */
@ -12,7 +13,7 @@ declare namespace Service {
    successCode: number | string
  }

-  type RequestErrorType = 'Axios' | 'Response' | 'Business'
+  type RequestErrorType = 'Axios' | 'Alova' | 'Response' | 'Business'
  type RequestCode = string | number

  interface RequestError {
--- a/src/views/list/commonList/index.vue
+++ b/src/views/list/commonList/index.vue
@ -19,7 +19,7 @@ const model = ref({ ...initialModel })

 const formRef = ref<FormInst | null>()
 function sendMail(id: number) {
-  window.$message?.success(`用户id:${id}`)
+  window.$message?.success(`删除用户id:${id}`)
 }
 const columns: DataTableColumns = [
  {
@ -166,63 +166,24 @@ function handleAddTable() {
 </script>

 <template>
-  <NSpace
-    vertical
-    size="large"
-  >
+  <NSpace vertical size="large">
    <n-card>
-      <n-form
-        ref="formRef"
-        :model="model"
-        label-placement="left"
-        :show-feedback="false"
-      >
-        <n-grid
-          :x-gap="30"
-          :cols="18"
-        >
-          <n-form-item-gi
-            :span="4"
-            label="姓名"
-            path="condition_1"
-          >
-            <n-input
-              v-model:value="model.condition_1"
-              placeholder="请输入"
-            />
+      <n-form ref="formRef" :model="model" label-placement="left" :show-feedback="false">
+        <n-grid :x-gap="30" :cols="18">
+          <n-form-item-gi :span="4" label="姓名" path="condition_1">
+            <n-input v-model:value="model.condition_1" placeholder="请输入" />
          </n-form-item-gi>
-          <n-form-item-gi
-            :span="4"
-            label="年龄"
-            path="condition_2"
-          >
-            <n-input
-              v-model:value="model.condition_2"
-              placeholder="请输入"
-            />
+          <n-form-item-gi :span="4" label="年龄" path="condition_2">
+            <n-input v-model:value="model.condition_2" placeholder="请输入" />
          </n-form-item-gi>
-          <n-form-item-gi
-            :span="4"
-            label="性别"
-            path="condition_3"
-          >
-            <n-input
-              v-model:value="model.condition_3"
-              placeholder="请输入"
-            />
+          <n-form-item-gi :span="4" label="性别" path="condition_3">
+            <n-input v-model:value="model.condition_3" placeholder="请输入" />
          </n-form-item-gi>
-          <n-form-item-gi
-            :span="4"
-            label="地址"
-            path="condition_4"
-          >
-            <n-input
-              v-model:value="model.condition_4"
-              placeholder="请输入"
-            />
+          <n-form-item-gi :span="4" label="地址" path="condition_4">
+            <n-input v-model:value="model.condition_4" placeholder="请输入" />
          </n-form-item-gi>
          <n-gi :span="1">
-            <NButton type="primary">
+            <NButton type="primary" @click="getUserList">
              <template #icon>
                <i-icon-park-outline-search />
              </template>
@ -230,11 +191,7 @@ function handleAddTable() {
            </NButton>
          </n-gi>
          <n-gi :span="1">
-            <NButton
-              strong
-              secondary
-              @click="handleResetSearch"
-            >
+            <NButton strong secondary @click="handleResetSearch">
              <template #icon>
                <i-icon-park-outline-redo />
              </template>
@ -245,54 +202,30 @@ function handleAddTable() {
      </n-form>
    </n-card>
    <n-card>
-      <NSpace
-        vertical
-        size="large"
-      >
+      <NSpace vertical size="large">
        <div class="flex gap-4">
-          <NButton
-            type="primary"
-            @click="handleAddTable"
-          >
+          <NButton type="primary" @click="handleAddTable">
            <template #icon>
              <i-icon-park-outline-add-one />
            </template>
            新建
          </NButton>
-          <NButton
-            strong
-            secondary
-          >
+          <NButton strong secondary>
            <template #icon>
              <i-icon-park-outline-afferent />
            </template>
            批量导入
          </NButton>
-          <NButton
-            strong
-            secondary
-            class="ml-a"
-          >
+          <NButton strong secondary class="ml-a">
            <template #icon>
              <i-icon-park-outline-download />
            </template>
            下载
          </NButton>
        </div>
-        <n-data-table
-          :columns="columns"
-          :data="listData"
-          :loading="loading"
-        />
-        <Pagination
-          :count="100"
-          @change="changePage"
-        />
-        <TableModal
-          v-model:visible="visible"
-          :type="modalType"
-          :modal-data="editData"
-        />
+        <n-data-table :columns="columns" :data="listData" :loading="loading" />
+        <Pagination :count="100" @change="changePage" />
+        <TableModal v-model:visible="visible" :type="modalType" :modal-data="editData" />
      </NSpace>
    </n-card>
  </NSpace>
--- a/src/views/test/test1/index.vue
+++ b/src/views/test/test1/index.vue
@ -1,18 +1,19 @@
 <script setup lang="ts">
 import {
+  expiredTokenRequest,
  fetachDelete,
  fetachFormPost,
  fetachGet,
  fetachPost,
  fetachPut,
-  fetchMock,
+  fetchUpdateToken,
  testFailedRequest,
  testFailedResponse,
  testFailedResponse_NT,
-  testUpdataToken,
 } from '@/service'

 const msg = ref()
+
 function pinter() {
  msg.value = import.meta.env
 }
@ -75,14 +76,15 @@ function failedResponse_NT() {
    msg.value = res
  })
 }
-// 测试刷新token
-function updataToken() {
-  testUpdataToken().then((res) => {
+// token过期
+function expiredToken() {
+  expiredTokenRequest().then((res) => {
    msg.value = res
  })
 }
-function mock() {
-  fetchMock().then((res) => {
+// 刷新token
+function updataToken() {
+  fetchUpdateToken('test token').then((res) => {
    msg.value = res
  })
 }
@ -92,96 +94,44 @@ function mock() {
  <div>
    <n-h1>接口功能测试</n-h1>
    <n-space>
-      <n-button
-        strong
-        secondary
-        type="success"
-        @click="pinter"
-      >
+      <n-button strong secondary type="success" @click="pinter">
        check env
      </n-button>
-      <n-button
-        strong
-        secondary
-        type="success"
-        @click="get"
-      >
+      <n-button strong secondary type="success" @click="get">
        use online get
      </n-button>
-      <n-button
-        strong
-        secondary
-        type="success"
-        @click="post"
-      >
+      <n-button strong secondary type="success" @click="post">
        use online post
      </n-button>
-      <n-button
-        strong
-        secondary
-        type="success"
-        @click="formPost"
-      >
+      <n-button strong secondary type="success" @click="formPost">
        use online formPost
      </n-button>
-      <n-button
-        strong
-        secondary
-        type="success"
-        @click="delete2"
-      >
+      <n-button strong secondary type="success" @click="delete2">
        use online delete
      </n-button>
-      <n-button
-        strong
-        secondary
-        type="success"
-        @click="put"
-      >
+      <n-button strong secondary type="success" @click="put">
        use online put
      </n-button>
-      <n-button
-        strong
-        secondary
-        type="success"
-        @click="mock"
-      >
-        to use mock
+      <n-button strong secondary type="error" @click="failedRequest">
+        失败-错误状态码
      </n-button>
-      <n-button
-        strong
-        secondary
-        type="error"
-        @click="failedRequest"
-      >
-        请求失败
+      <n-button strong secondary type="error" @click="failedResponse">
+        失败-错误业务码
      </n-button>
-      <n-button
-        strong
-        secondary
-        type="error"
-        @click="failedResponse"
-      >
-        响应失败
-      </n-button>
-      <n-button
-        strong
-        secondary
-        type="error"
-        @click="failedResponse_NT"
-      >
+      <n-button strong secondary type="error" @click="failedResponse_NT">
        响应失败(无提示)
      </n-button>
-      <n-button
-        strong
-        secondary
-        @click="updataToken"
-      >
-        测试刷新token接口
+      <n-button strong secondary @click="expiredToken">
+        token 过期
+      </n-button>
+      <n-button strong secondary @click="updataToken">
+        refresh token
      </n-button>
    </n-space>

-    {{ msg }}
+    <pre>
+      {{ msg }}
+    </pre>
  </div>
 </template>