feat: 新增allinssl暗色模式配置-黑金主题

2025-12-18 10:04:01 +08:00 · 2025-12-05 18:08:12 +08:00
parent 0bb09ae6e5
commit 6e53bd522e
273 changed files with 21638 additions and 8823 deletions
--- a/frontend/packages/vue/hooks/src/axios/index.ts
+++ b/frontend/packages/vue/hooks/src/axios/index.ts
@@ -1,8 +1,8 @@
-import { AxiosError, AxiosResponse } from 'axios'
+import { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
 import { ref, shallowRef, computed, watch, effectScope, onScopeDispose } from 'vue'
 import type { Ref, ShallowRef, ComputedRef } from 'vue'
 import { useLoadingMask, useDialog, useMessage } from '@baota/naive-ui/hooks'
-import { HttpClient, type Middleware } from './model'
+import { HttpClient, HttpClientConfig, type Middleware } from './model'
 import { useError } from '../error'
 import { cancelRequest, removeAllAbortController } from './model/axios-cancel'

@@ -83,6 +83,7 @@ const useAxios = <T = unknown, Z = Record<string, unknown>>(instance: HttpClient
 	const loadingRef = ref(false) // 是否正在加载
 	const messageRef = ref(false) // 消息提示
 	const loadingInstance = shallowRef<unknown>(null) // 加载实例
+	const config = ref<AxiosRequestConfig>({}) // 配置项

 	// 响应数据
 	const errorRef = shallowRef<Error | null | string>(null) // 错误
@@ -133,7 +134,10 @@ const useAxios = <T = unknown, Z = Record<string, unknown>>(instance: HttpClient
 		aborted.value = (err as Error)?.name === 'AbortError' || false // 是否被中断
 		// 检查是否为服务器错误
 		if (err.status != 200 && err.status != 404 && err?.response) {
-			const { message } = err.response?.data as { status: number; message: string }
+			const { message } = err.response?.data as {
+				status: number
+				message: string
+			}
 			return handleError(new Error(message))
 		} else {
 			handleError(err)
@@ -173,7 +177,7 @@ const useAxios = <T = unknown, Z = Record<string, unknown>>(instance: HttpClient
 			// 显示加载遮罩
 			if (loadingMaskRefs.value.status) showLoadingMask()
 			// 执行请求
-			const res = await instance.post<T>(url, params as Record<string, unknown>)
+			const res = await instance.post<T>(url, params as Record<string, unknown>, config.value)
 			// 保存响应
 			response.value = res
 			// 处理响应数据
@@ -199,6 +203,13 @@ const useAxios = <T = unknown, Z = Record<string, unknown>>(instance: HttpClient
 		paramsRef.value = params
 		return execute(urlRef.value, params)
 	}
+	/**
+	 * 	设置配置项
+	 * @param config 配置项
+	 */
+	const setConfig = (requestConfig: AxiosRequestConfig) => {
+		config.value = requestConfig
+	}

 	/**
 	 * 设置请求地址，并执行请求
@@ -276,6 +287,7 @@ const useAxios = <T = unknown, Z = Record<string, unknown>>(instance: HttpClient
 		execute,
 		setParams,
 		setUrl,
+		setConfig,
 		cancel,
 		cancelAll,
 		fetch,
--- a/frontend/packages/vue/hooks/src/axios/model/index.ts
+++ b/frontend/packages/vue/hooks/src/axios/model/index.ts
@@ -1,7 +1,17 @@
-import axios from 'axios'
-import { requestMiddleware, responseMiddleware, errorMiddleware } from './other'
+import axios from "axios";
+import {
+  requestMiddleware,
+  responseMiddleware,
+  errorMiddleware,
+} from "./other";

-import type { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
+import type {
+  AxiosError,
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosResponse,
+  InternalAxiosRequestConfig,
+} from "axios";

 /**
 * 中间件类型定义
@@ -10,17 +20,21 @@ import type { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse, Inte
 * @property error - 错误处理器，用于处理请求过程中的错误
 */
 export type Middleware = {
-	request?: (config: AxiosRequestConfig) => AxiosRequestConfig | Promise<AxiosRequestConfig>
-	response?: (response: AxiosResponse) => AxiosResponse | Promise<AxiosResponse>
-	error?: (error: AxiosError) => AxiosError | Promise<AxiosError>
-}
+  request?: (
+    config: AxiosRequestConfig
+  ) => AxiosRequestConfig | Promise<AxiosRequestConfig>;
+  response?: (
+    response: AxiosResponse
+  ) => AxiosResponse | Promise<AxiosResponse>;
+  error?: (error: AxiosError) => AxiosError | Promise<AxiosError>;
+};

 /**
 * HTTP客户端配置接口
 */
 export interface HttpClientConfig extends AxiosRequestConfig {
-	/** 全局中间件 */
-	middlewares?: Middleware[]
+  /** 全局中间件 */
+  middlewares?: Middleware[];
 }

 /**
@@ -28,155 +42,190 @@ export interface HttpClientConfig extends AxiosRequestConfig {
 * 封装axios实例，提供中间件机制和常用的HTTP方法
 */
 class HttpClient {
-	// axios实例
-	private instance: AxiosInstance
-	// 全局中间件数组
-	private middlewares: Middleware[] = []
+  // axios实例
+  private instance: AxiosInstance;
+  // 全局中间件数组
+  private middlewares: Middleware[] = [];

-	/**
-	 * 构造函数
-	 * @param config - HTTP客户端配置
-	 */
-	constructor(config: HttpClientConfig = {}) {
-		const { middlewares = [], ...axiosConfig } = config
+  /**
+   * 构造函数
+   * @param config - HTTP客户端配置
+   */
+  constructor(config: HttpClientConfig = {}) {
+    const { middlewares = [], ...axiosConfig } = config;

-		// 创建axios实例
-		this.instance = axios.create(axiosConfig)
+    // 创建axios实例
+    this.instance = axios.create(axiosConfig);

-		// 初始化全局中间件
-		this.middlewares = [...middlewares]
+    // 初始化全局中间件
+    this.middlewares = [...middlewares];

-		// 设置拦截器
-		this.setupInterceptors()
-	}
+    // 设置拦截器
+    this.setupInterceptors();
+  }

-	/**
-	 * 执行中间件链
-	 * @param handler - 处理函数名称
-	 * @param context - 上下文数据
-	 * @returns 处理后的上下文数据
-	 */
-	private async executeMiddlewareChain<T>(handler: keyof Middleware, context: T): Promise<T> {
-		const currentContext = { ...context }
-		let Context = currentContext as T
-		// 执行中间件链
-		for (const middleware of this.middlewares) {
-			const handlerFn = middleware[handler]
-			if (handlerFn) Context = (await handlerFn(Context as any)) as T
-		}
-		return Context
-	}
+  /**
+   * 执行中间件链
+   * @param handler - 处理函数名称
+   * @param context - 上下文数据
+   * @returns 处理后的上下文数据
+   */
+  private async executeMiddlewareChain<T>(
+    handler: keyof Middleware,
+    context: T
+  ): Promise<T> {
+    const currentContext = { ...context };
+    let Context = currentContext as T;
+    // 执行中间件链
+    for (const middleware of this.middlewares) {
+      const handlerFn = middleware[handler];
+      if (handlerFn) Context = (await handlerFn(Context as any)) as T;
+    }
+    return Context;
+  }

-	/**
-	 * 设置请求和响应拦截器
-	 * 用于执行中间件链
-	 */
-	private setupInterceptors() {
-		// 请求拦截器
-		this.instance.interceptors.request.use(
-			async (config) => {
-				// 复制配置对象，避免直接修改原始配置
-				let currentConfig = { ...config } as AxiosRequestConfig
-				// 执行请求中间件链
-				currentConfig = await this.executeMiddlewareChain('request', currentConfig)
-				return currentConfig as InternalAxiosRequestConfig
-			},
-			(error) => {
-				return Promise.reject(error)
-			},
-		)
+  /**
+   * 设置请求和响应拦截器
+   * 用于执行中间件链
+   */
+  private setupInterceptors() {
+    // 请求拦截器
+    this.instance.interceptors.request.use(
+      async (config) => {
+        // 复制配置对象，避免直接修改原始配置
+        let currentConfig = { ...config } as AxiosRequestConfig;
+        // 执行请求中间件链
+        currentConfig = await this.executeMiddlewareChain(
+          "request",
+          currentConfig
+        );
+        return currentConfig as InternalAxiosRequestConfig;
+      },
+      (error) => {
+        return Promise.reject(error);
+      }
+    );

-		// 响应拦截器
-		this.instance.interceptors.response.use(async (response) => {
-			// 复制响应对象，避免直接修改原始响应
-			let currentResponse = { ...response }
-			// 执行响应中间件链
-			currentResponse = await this.executeMiddlewareChain('response', currentResponse)
-			return currentResponse
-		})
-	}
+    // 响应拦截器
+    this.instance.interceptors.response.use(async (response) => {
+      // 复制响应对象，避免直接修改原始响应
+      let currentResponse = { ...response };
+      // 执行响应中间件链
+      currentResponse = await this.executeMiddlewareChain(
+        "response",
+        currentResponse
+      );
+      return currentResponse;
+    });
+  }

-	/**
-	 * 添加全局中间件
-	 * @param middleware - 中间件对象
-	 * @returns this - 返回实例本身，支持链式调用
-	 */
-	public use(middleware: Middleware) {
-		this.middlewares.push(middleware)
-		return this
-	}
+  /**
+   * 添加全局中间件
+   * @param middleware - 中间件对象
+   * @returns this - 返回实例本身，支持链式调用
+   */
+  public use(middleware: Middleware) {
+    this.middlewares.push(middleware);
+    return this;
+  }

-	/**
-	 * 获取axios实例
-	 * @returns AxiosInstance - 返回当前的axios实例
-	 */
-	public getAxiosInstance() {
-		return this.instance
-	}
+  /**
+   * 获取axios实例
+   * @returns AxiosInstance - 返回当前的axios实例
+   */
+  public getAxiosInstance() {
+    return this.instance;
+  }

-	/**
-	 * 发送请求
-	 * @param config - 请求配置
-	 * @returns Promise<AxiosResponse<T>> - 返回请求响应
-	 */
-	public async request<T = unknown>(config: HttpClientConfig): Promise<AxiosResponse<T> | void> {
-		try {
-			const processedConfig = await this.executeMiddlewareChain('request', config) // 执行请求中间件链
-			const response = await this.instance.request(processedConfig) // 发送请求
-			return this.executeMiddlewareChain('response', response) // 执行响应中间件链
-		} catch (error) {
-			// 执行错误处理中间件链
-			const middleError = await this.executeMiddlewareChain('error', error) // 执行错误处理中间件链，返回错误信息
-			return Promise.reject(middleError)
-		}
-	}
+  /**
+   * 发送请求
+   * @param config - 请求配置
+   * @returns Promise<AxiosResponse<T>> - 返回请求响应
+   */
+  public async request<T = unknown>(
+    config: HttpClientConfig
+  ): Promise<AxiosResponse<T> | void> {
+    try {
+      const processedConfig = await this.executeMiddlewareChain(
+        "request",
+        config
+      ); // 执行请求中间件链
+      console.log("processedConfig", processedConfig, config);
+      const response = await this.instance.request(processedConfig); // 发送请求
+      return this.executeMiddlewareChain("response", response); // 执行响应中间件链
+    } catch (error) {
+      // 执行错误处理中间件链
+      const middleError = await this.executeMiddlewareChain("error", error); // 执行错误处理中间件链，返回错误信息
+      return Promise.reject(middleError);
+    }
+  }

-	/**
-	 * 发送GET请求
-	 * @param url - 请求地址
-	 * @param config - 请求配置
-	 * @returns Promise<AxiosResponse<T>> - 返回请求响应
-	 */
-	public async get<T = unknown>(url: string, config: AxiosRequestConfig = {}) {
-		return this.request<T>({ ...config, url, method: 'get' }) as Promise<AxiosResponse<T>>
-	}
+  /**
+   * 发送GET请求
+   * @param url - 请求地址
+   * @param config - 请求配置
+   * @returns Promise<AxiosResponse<T>> - 返回请求响应
+   */
+  public async get<T = unknown>(url: string, config: AxiosRequestConfig = {}) {
+    return this.request<T>({ ...config, url, method: "get" }) as Promise<
+      AxiosResponse<T>
+    >;
+  }

-	/**
-	 * 发送POST请求
-	 * @param url - 请求地址
-	 * @param data - 请求数据
-	 * @param config - 请求配置
-	 * @returns Promise<AxiosResponse<T>> - 返回请求响应
-	 */
-	public async post<T = unknown>(url: string, data?: Record<string, unknown>, config: AxiosRequestConfig = {}) {
-		return this.request<T>({ ...config, url, data, method: 'post' }) as Promise<AxiosResponse<T>>
-	}
+  /**
+   * 发送POST请求
+   * @param url - 请求地址
+   * @param data - 请求数据
+   * @param config - 请求配置
+   * @returns Promise<AxiosResponse<T>> - 返回请求响应
+   */
+  public async post<T = unknown>(
+    url: string,
+    data?: Record<string, unknown>,
+    config: AxiosRequestConfig = {}
+  ) {
+    console.log(config);
+    return this.request<T>({ ...config, url, data, method: "post" }) as Promise<
+      AxiosResponse<T>
+    >;
+  }

-	/**
-	 * 发送PUT请求
-	 * @param url - 请求地址
-	 * @param data - 请求数据
-	 * @param config - 请求配置
-	 * @returns Promise<AxiosResponse<T>> - 返回请求响应
-	 */
-	public async put<T = unknown>(url: string, data?: Record<string, unknown>, config: AxiosRequestConfig = {}) {
-		return this.request<T>({ ...config, url, data, method: 'put' }) as Promise<AxiosResponse<T>>
-	}
+  /**
+   * 发送PUT请求
+   * @param url - 请求地址
+   * @param data - 请求数据
+   * @param config - 请求配置
+   * @returns Promise<AxiosResponse<T>> - 返回请求响应
+   */
+  public async put<T = unknown>(
+    url: string,
+    data?: Record<string, unknown>,
+    config: AxiosRequestConfig = {}
+  ) {
+    return this.request<T>({ ...config, url, data, method: "put" }) as Promise<
+      AxiosResponse<T>
+    >;
+  }

-	/**
-	 * 发送DELETE请求
-	 * @param url - 请求地址
-	 * @param config - 请求配置
-	 * @returns Promise<AxiosResponse<T>> - 返回请求响应
-	 */
-	public async delete<T = unknown>(url: string, config: AxiosRequestConfig = {}) {
-		return this.request<T>({ ...config, url, method: 'delete' }) as Promise<AxiosResponse<T>>
-	}
+  /**
+   * 发送DELETE请求
+   * @param url - 请求地址
+   * @param config - 请求配置
+   * @returns Promise<AxiosResponse<T>> - 返回请求响应
+   */
+  public async delete<T = unknown>(
+    url: string,
+    config: AxiosRequestConfig = {}
+  ) {
+    return this.request<T>({ ...config, url, method: "delete" }) as Promise<
+      AxiosResponse<T>
+    >;
+  }
 }

 export {
-	HttpClient,
-	requestMiddleware, // 请求中间件
-	responseMiddleware, // 响应中间件
-	errorMiddleware, // 错误中间件
-}
+  HttpClient,
+  requestMiddleware, // 请求中间件
+  responseMiddleware, // 响应中间件
+  errorMiddleware, // 错误中间件
+};