From f5a5f44a2bc2d575e172456bc0ebfe505774a60f Mon Sep 17 00:00:00 2001 From: Soybean <2570172956@qq.com> Date: Tue, 23 Nov 2021 10:52:30 +0800 Subject: [PATCH] =?UTF-8?q?refactor(projects):=20=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E5=A4=B9=E4=BD=8D=E7=BD=AE=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/composables/common/theme.ts | 30 +++++ src/config/business/index.ts | 0 src/config/common/index.ts | 2 + .../sdk.ts => config/common/map-sdk.ts} | 1 + .../index.ts => config/common/service.ts} | 0 src/config/index.ts | 1 + src/main.ts | 4 +- src/plugins/dark-mode.ts | 36 ----- src/plugins/index.ts | 3 +- src/service/api/demo.ts | 5 +- src/service/request/axios/index.ts | 8 -- src/service/request/helpers/index.ts | 3 - src/service/request/index.ts | 6 +- src/service/request/{axios => }/instance.ts | 3 +- src/service/request/{axios => }/request.ts | 8 +- src/settings/index.ts | 1 - src/utils/common/index.ts | 2 - src/utils/index.ts | 3 +- .../helpers => utils/service}/error.ts | 2 +- .../helpers => utils/service}/handler.ts | 2 +- src/utils/service/index.ts | 124 +----------------- .../request/helpers => utils/service}/msg.ts | 2 +- .../helpers => utils/service}/transform.ts | 0 .../component/map/components/BaiduMap.vue | 2 +- .../component/map/components/GaodeMap.vue | 2 +- .../component/map/components/TencentMap.vue | 2 +- 26 files changed, 60 insertions(+), 192 deletions(-) create mode 100644 src/config/business/index.ts create mode 100644 src/config/common/index.ts rename src/{settings/sdk.ts => config/common/map-sdk.ts} (99%) rename src/{service/request/config/index.ts => config/common/service.ts} (100%) create mode 100644 src/config/index.ts delete mode 100644 src/plugins/dark-mode.ts delete mode 100644 src/service/request/axios/index.ts delete mode 100644 src/service/request/helpers/index.ts rename src/service/request/{axios => }/instance.ts (93%) rename src/service/request/{axios => }/request.ts (87%) rename src/{service/request/helpers => utils/service}/error.ts (99%) rename src/{service/request/helpers => utils/service}/handler.ts (93%) rename src/{service/request/helpers => utils/service}/msg.ts (92%) rename src/{service/request/helpers => utils/service}/transform.ts (100%) diff --git a/src/composables/common/theme.ts b/src/composables/common/theme.ts index 46c2cb21..847d1c1e 100644 --- a/src/composables/common/theme.ts +++ b/src/composables/common/theme.ts @@ -12,6 +12,24 @@ export function useDarkMode() { /** naive-ui暗黑主题 */ const naiveTheme = computed(() => (theme.darkMode ? darkTheme : undefined)); + // windicss 暗黑模式 + const DARK_CLASS = 'dark'; + function getHtmlElement() { + return document.querySelector('html'); + } + function addDarkClass() { + const html = getHtmlElement(); + if (html) { + html.classList.add(DARK_CLASS); + } + } + function removeDarkClass() { + const html = getHtmlElement(); + if (html) { + html.classList.remove(DARK_CLASS); + } + } + // 监听操作系统主题模式 watch( osDark, @@ -22,6 +40,18 @@ export function useDarkMode() { immediate: true } ); + // 监听主题的暗黑模式 + watch( + () => theme.darkMode, + newValue => { + if (newValue) { + addDarkClass(); + } else { + removeDarkClass(); + } + }, + { immediate: true } + ); return { naiveTheme diff --git a/src/config/business/index.ts b/src/config/business/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/config/common/index.ts b/src/config/common/index.ts new file mode 100644 index 00000000..3aa5573c --- /dev/null +++ b/src/config/common/index.ts @@ -0,0 +1,2 @@ +export * from './service'; +export * from './map-sdk'; diff --git a/src/settings/sdk.ts b/src/config/common/map-sdk.ts similarity index 99% rename from src/settings/sdk.ts rename to src/config/common/map-sdk.ts index 06a8be3c..e28fa78b 100644 --- a/src/settings/sdk.ts +++ b/src/config/common/map-sdk.ts @@ -1,6 +1,7 @@ /** 百度地图sdk地址 */ export const BAIDU_MAP_SDK_URL = 'https://api.map.baidu.com/getscript?v=3.0&ak=KSezYymXPth1DIGILRX3oYN9PxbOQQmU&services=&t=20210201100830&s=1'; + /** 高德地图sdk地址 */ export const GAODE_MAP_SDK_URL = 'https://webapi.amap.com/maps?v=2.0&key=e7bd02bd504062087e6563daf4d6721d'; diff --git a/src/service/request/config/index.ts b/src/config/common/service.ts similarity index 100% rename from src/service/request/config/index.ts rename to src/config/common/service.ts diff --git a/src/config/index.ts b/src/config/index.ts new file mode 100644 index 00000000..d0b93236 --- /dev/null +++ b/src/config/index.ts @@ -0,0 +1 @@ +export * from './common'; diff --git a/src/main.ts b/src/main.ts index eb651fb0..f3e89324 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,13 +3,11 @@ import App from './App.vue'; import AppProvider from './AppProvider.vue'; import { setupStore } from './store'; import { setupRouter } from './router'; -import { setupAssets, setupWindicssDarkMode } from './plugins'; +import { setupAssets } from './plugins'; function setupPlugins() { /** 引入静态资源 */ setupAssets(); - // 配置windicss暗黑主题 - setupWindicssDarkMode(); } async function setupApp() { diff --git a/src/plugins/dark-mode.ts b/src/plugins/dark-mode.ts deleted file mode 100644 index 55a02b53..00000000 --- a/src/plugins/dark-mode.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { watch } from 'vue'; -import { useThemeStore } from '@/store'; - -export default function setupWindicssDarkMode() { - const theme = useThemeStore(); - - const DARK_CLASS = 'dark'; - - function getHtmlElement() { - return document.querySelector('html'); - } - function addDarkClass() { - const html = getHtmlElement(); - if (html) { - html.classList.add(DARK_CLASS); - } - } - function removeDarkClass() { - const html = getHtmlElement(); - if (html) { - html.classList.remove(DARK_CLASS); - } - } - - watch( - () => theme.darkMode, - newValue => { - if (newValue) { - addDarkClass(); - } else { - removeDarkClass(); - } - }, - { immediate: true } - ); -} diff --git a/src/plugins/index.ts b/src/plugins/index.ts index 6e883421..4de580b2 100644 --- a/src/plugins/index.ts +++ b/src/plugins/index.ts @@ -1,4 +1,3 @@ import setupAssets from './assets'; -import setupWindicssDarkMode from './dark-mode'; -export { setupAssets, setupWindicssDarkMode }; +export { setupAssets }; diff --git a/src/service/api/demo.ts b/src/service/api/demo.ts index 6f32b180..a8ba0265 100644 --- a/src/service/api/demo.ts +++ b/src/service/api/demo.ts @@ -1,5 +1,6 @@ +import { requestMiddleware } from '@/utils'; import type { ResponseDictionary, Dictionary } from '@/interface'; -import { request, resultMiddleware } from '../request'; +import { request } from '../request'; import { fecthDictionaryMiddleware } from '../middleware'; // 接口示例 @@ -23,5 +24,5 @@ export async function fetchDictionaryWithMiddleware(keyword: string) { indiCatorName: keyword }); - return resultMiddleware(fecthDictionaryMiddleware, [res]); + return requestMiddleware(fecthDictionaryMiddleware, [res]); } diff --git a/src/service/request/axios/index.ts b/src/service/request/axios/index.ts deleted file mode 100644 index 82618924..00000000 --- a/src/service/request/axios/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type { AxiosRequestConfig } from 'axios'; -import CustomAxiosInstance from './instance'; -import Request from './request'; - -export function createRequest(axiosConfig: AxiosRequestConfig) { - const customInstance = new CustomAxiosInstance(axiosConfig); - return new Request(customInstance.instance); -} diff --git a/src/service/request/helpers/index.ts b/src/service/request/helpers/index.ts deleted file mode 100644 index 788621af..00000000 --- a/src/service/request/helpers/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './transform'; -export * from './error'; -export * from './handler'; diff --git a/src/service/request/index.ts b/src/service/request/index.ts index feebdeba..024cec72 100644 --- a/src/service/request/index.ts +++ b/src/service/request/index.ts @@ -1,9 +1,7 @@ -import { createRequest } from './axios'; -import { REQUEST_TIMEOUT } from './config'; +import { REQUEST_TIMEOUT } from '@/config'; +import { createRequest } from './request'; export const request = createRequest({ baseURL: import.meta.env.VITE_HTTP_URL, timeout: REQUEST_TIMEOUT }); - -export { resultMiddleware } from './helpers'; diff --git a/src/service/request/axios/instance.ts b/src/service/request/instance.ts similarity index 93% rename from src/service/request/axios/instance.ts rename to src/service/request/instance.ts index 9f92921f..2459da71 100644 --- a/src/service/request/axios/instance.ts +++ b/src/service/request/instance.ts @@ -1,8 +1,7 @@ import axios from 'axios'; import type { AxiosRequestConfig, AxiosInstance, AxiosError, CancelTokenStatic } from 'axios'; -import { getToken } from '@/utils'; +import { getToken, transformRequestData, handleAxiosError, handleResponseError, handleBackendError } from '@/utils'; import type { BackendServiceResult } from '@/interface'; -import { transformRequestData, handleAxiosError, handleResponseError, handleBackendError } from '../helpers'; /** * 封装axios请求类 diff --git a/src/service/request/axios/request.ts b/src/service/request/request.ts similarity index 87% rename from src/service/request/axios/request.ts rename to src/service/request/request.ts index 17191510..a5a462fd 100644 --- a/src/service/request/axios/request.ts +++ b/src/service/request/request.ts @@ -1,11 +1,12 @@ import type { AxiosRequestConfig, AxiosInstance, AxiosResponse } from 'axios'; import type { RequestServiceError, CustomSuccessRequestResult, CustomFailRequestResult } from '@/interface'; +import CustomAxiosInstance from './instance'; /** * 封装各个请求方法及结果处理的类 * @author Soybean */ -export default class Request { +export class Request { instance: AxiosInstance; constructor(instance: AxiosInstance) { @@ -58,3 +59,8 @@ export default class Request { .catch(Request.failHandler); } } + +export function createRequest(axiosConfig: AxiosRequestConfig) { + const customInstance = new CustomAxiosInstance(axiosConfig); + return new Request(customInstance.instance); +} diff --git a/src/settings/index.ts b/src/settings/index.ts index a2e42491..7b1f54ec 100644 --- a/src/settings/index.ts +++ b/src/settings/index.ts @@ -1,2 +1 @@ export * from './theme'; -export * from './sdk'; diff --git a/src/utils/common/index.ts b/src/utils/common/index.ts index 495ad77b..e7ff06a0 100644 --- a/src/utils/common/index.ts +++ b/src/utils/common/index.ts @@ -1,5 +1,3 @@ export * from './typeof'; - export * from './color'; - export * from './icon'; diff --git a/src/utils/index.ts b/src/utils/index.ts index 191900c9..fbe1d8bb 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,5 +1,6 @@ -export * from './auth'; export * from './common'; export * from './storage'; export * from './router'; +export * from './service'; export * from './package'; +export * from './auth'; diff --git a/src/service/request/helpers/error.ts b/src/utils/service/error.ts similarity index 99% rename from src/service/request/helpers/error.ts rename to src/utils/service/error.ts index 3e5a62ba..1a649eda 100644 --- a/src/service/request/helpers/error.ts +++ b/src/utils/service/error.ts @@ -8,7 +8,7 @@ import { REQUEST_TIMEOUT_CODE, REQUEST_TIMEOUT_MSG, ERROR_STATUS -} from '../config'; +} from '@/config'; import { showErrorMsg } from './msg'; type ErrorStatus = keyof typeof ERROR_STATUS; diff --git a/src/service/request/helpers/handler.ts b/src/utils/service/handler.ts similarity index 93% rename from src/service/request/helpers/handler.ts rename to src/utils/service/handler.ts index 768a0232..2b4429cb 100644 --- a/src/service/request/helpers/handler.ts +++ b/src/utils/service/handler.ts @@ -6,7 +6,7 @@ type ResultHandler = (...arg: any) => T; * @param resultHandler - 处理函数 * @param requests - 请求结果 */ -export function resultMiddleware( +export function requestMiddleware( resultHandler: ResultHandler, requests: CustomRequestResult[] ) { diff --git a/src/utils/service/index.ts b/src/utils/service/index.ts index 54c1b4b7..788621af 100644 --- a/src/utils/service/index.ts +++ b/src/utils/service/index.ts @@ -1,121 +1,3 @@ -import FormData from 'form-data'; -import { isArray } from '../common'; - -type HandleFunc = (...arg: any) => T; -type RequestError = any; -type RequestData = any; -type RequestResult = [RequestError, RequestData]; -/** - * 对请求的结果数据进行格式化的处理 - * @param handleFunc - 处理函数 - * @param requests - 请求结果 - */ -export function handleResponse(handleFunc: HandleFunc, ...requests: RequestResult[]) { - let handleData: any = null; - let error: any = null; - const hasError = requests.some(item => { - const isError = Boolean(item[0]); - if (isError) { - [error] = item; - } - return isError; - }); - if (!hasError) { - handleData = handleFunc(...requests.map(item => item[1])); - } - return [error, handleData] as [any, T]; -} - -/** - * 接口为上传文件的类型时数据转换 - * @param file - 单文件或多文件 - * @param key - 文件的属性名 - */ -export async function transformFile(file: File[] | File, key: string) { - const formData = new FormData(); - if (isArray(file)) { - await Promise.all( - (file as File[]).map(item => { - formData.append(key, item); - return true; - }) - ); - } else { - await formData.append(key, file); - } - return formData; -} - -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版本不支持该请求~' -}; -type ErrorStatus = keyof typeof ERROR_STATUS; - -/** - * 网络请求错误状态处理 - * @param error - 错误 - */ -export function errorHandler(error: any): void { - const { $message: Message } = window; - if (error.response) { - const status = error.response.status as ErrorStatus; - Message?.error(ERROR_STATUS[status]); - return; - } - if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) { - Message?.error('网络连接超时~'); - return; - } - if (!window.navigator.onLine || error.message === 'Network Error') { - Message?.error('网络不可用~'); - return; - } - Message?.error('请求错误~'); -} - -/** - * 连续的请求错误依此显示 - * @param duration - 上一次弹出错误消息到下一次的时间(ms) - */ -export function continuousErrorHandler(duration: number) { - let errorStacks: string[] = []; - function pushError(id: string) { - errorStacks.push(id); - } - function removeError(id: string) { - errorStacks = errorStacks.filter(item => item !== id); - } - function handleError(id: string, callback: Function) { - callback(); - setTimeout(() => { - removeError(id); - }, duration); - } - - function handleContinuousError(callback: Function) { - const id = Date.now().toString(36); - const { length } = errorStacks; - if (length > 0) { - pushError(id); - setTimeout(() => { - handleError(id, callback); - }, duration * length); - } else { - pushError(id); - handleError(id, callback); - } - } - - return handleContinuousError; -} +export * from './transform'; +export * from './error'; +export * from './handler'; diff --git a/src/service/request/helpers/msg.ts b/src/utils/service/msg.ts similarity index 92% rename from src/service/request/helpers/msg.ts rename to src/utils/service/msg.ts index 547446b1..8473c798 100644 --- a/src/service/request/helpers/msg.ts +++ b/src/utils/service/msg.ts @@ -1,5 +1,5 @@ import type { RequestServiceError } from '@/interface'; -import { NO_ERROR_MSG_CODE, ERROR_MSG_DURATION } from '../config'; +import { NO_ERROR_MSG_CODE, ERROR_MSG_DURATION } from '@/config'; /** 错误消息栈，防止同一错误同时出现 */ const errorMsgStack = new Map([]); diff --git a/src/service/request/helpers/transform.ts b/src/utils/service/transform.ts similarity index 100% rename from src/service/request/helpers/transform.ts rename to src/utils/service/transform.ts diff --git a/src/views/component/map/components/BaiduMap.vue b/src/views/component/map/components/BaiduMap.vue index 668338d2..877af209 100644 --- a/src/views/component/map/components/BaiduMap.vue +++ b/src/views/component/map/components/BaiduMap.vue @@ -5,7 +5,7 @@