vue2server7 7.0.15 → 7.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2server7",
-  "version": "7.0.15",
+  "version": "7.0.16",
   "description": "",
   "scripts": {
     "dev": "nodemon --watch src --ext ts --exec \"ts-node src/app.ts\"",

package/test/1/main.ts

@@ -0,0 +1,52 @@
+/**
+ * 应用入口文件
+ *
+ * 职责：
+ *   1. 创建 Vue 应用实例
+ *   2. 注册全局插件（UI 库、状态管理、路由、国际化）
+ *   3. 加载全局样式
+ *   4. 挂载到 DOM
+ *   5. 启动版本热更新检测
+ *
+ * 导入顺序说明（eslint simple-import-sort 已禁用）：
+ *   - 框架核心 → 第三方库 → 业务模块 → 样式 → 副作用模块
+ *   此处手动控制顺序以确保 permission 等副作用模块在路由注册之后加载
+ */
+
+/* eslint-disable simple-import-sort/imports */
+import { createApp } from 'vue';
+import TDesign from 'tdesign-vue-next';
+
+import App from './App.vue';
+import router from './router';
+import { store } from './store';
+import i18n from './locales';
+
+/** TDesign 组件库全局样式 */
+import 'tdesign-vue-next/es/style/index.css';
+/** 项目自定义全局样式（变量覆盖、通用布局等） */
+import '@/style/index.less';
+/**
+ * 路由权限守卫（副作用模块）
+ * 导入即执行 router.beforeEach，必须在 router 创建之后引入
+ */
+import './permission';
+
+const app = createApp(App);
+
+app.use(TDesign); // TDesign 组件全局注册（Dialog、Message 等可通过插件式 API 调用）
+app.use(store); // Pinia 状态管理
+app.use(router); // Vue Router
+app.use(i18n); // Vue I18n 国际化
+
+/** 挂载到 public/index.html 中的 #app 节点 */
+app.mount('#app');
+
+/**
+ * 版本热更新检测
+ * 放在 mount 之后执行，确保 DOM 中的 <meta name="app-version"> 已就绪
+ * 详见 @/utils/version-update.ts
+ */
+import { initVersionCheck } from './utils/version-update';
+
+initVersionCheck();

package/test/1/utils/charts.ts

@@ -0,0 +1,38 @@
+import dayjs from 'dayjs';
+
+/**
+ * 获取表头数据
+ *
+ * @export
+ * @param {string[]} dateTime
+ * @param {number} divideNum
+ * @returns {string[]} timeArray
+ */
+export function getDateArray(dateTime: string[] = [], divideNum = 10): string[] {
+  const timeArray: string[] = [];
+  if (dateTime.length > 0) {
+    for (let i = 0; i < divideNum; i++) {
+      const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
+      const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
+      timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
+    }
+  }
+
+  return timeArray;
+}
+
+/**
+ * 获取随机数
+ *
+ * @param {number} [num]
+ * @returns {number} resultNum
+ */
+export function getRandomArray(num = 100): number {
+  let resultNum = Number((Math.random() * num).toFixed(0));
+
+  if (resultNum <= 1) {
+    resultNum = 1;
+  }
+
+  return resultNum;
+}

package/test/1/utils/color.ts

@@ -0,0 +1,110 @@
+import type * as echarts from 'echarts/core';
+import trim from 'lodash/trim';
+import { Color } from 'tvision-color';
+
+import type { TColorToken } from '@/config/color';
+import type { ModeType } from '@/types/interface';
+
+/**
+ * 依据主题类型获取颜色
+ *
+ * @export
+ * @returns {Array<string>} themeColorList
+ */
+export function getColorFromTheme(): Array<string> {
+  const theme = trim(getComputedStyle(document.documentElement).getPropertyValue('--td-brand-color'));
+  const themeColorList = Color.getRandomPalette({
+    color: theme,
+    colorGamut: 'bright',
+    number: 8,
+  });
+
+  return themeColorList;
+}
+
+/** 图表颜色 */
+export function getChartListColor(): Array<string> {
+  return getColorFromTheme();
+}
+
+/**
+ * 更改图表主题颜色
+ *
+ * @export
+ * @param {Array<string>} chartsList
+ */
+export function changeChartsTheme(chartsList: echarts.EChartsType[]): void {
+  if (chartsList && chartsList.length) {
+    const chartChangeColor = getChartListColor();
+
+    for (let index = 0; index < chartsList.length; index++) {
+      const elementChart = chartsList[index];
+
+      if (elementChart) {
+        const optionVal = elementChart.getOption();
+
+        // 更改主题颜色
+        optionVal.color = chartChangeColor;
+
+        elementChart.setOption(optionVal, true);
+      }
+    }
+  }
+}
+
+/**
+ * 根据当前主题色、模式等情景 计算最后生成的色阶
+ */
+export function generateColorMap(theme: string, colorPalette: Array<string>, mode: ModeType, brandColorIdx: number) {
+  const isDarkMode = mode === 'dark';
+
+  if (isDarkMode) {
+    colorPalette.reverse().map((color) => {
+      const [h, s, l] = Color.colorTransform(color, 'hex', 'hsl');
+      return Color.colorTransform([h, Number(s) - 4, l], 'hsl', 'hex');
+    });
+    brandColorIdx = 5;
+    colorPalette[0] = `${colorPalette[brandColorIdx]}20`;
+  }
+
+  const colorMap: TColorToken = {
+    '--td-brand-color': colorPalette[brandColorIdx], // 主题色
+    '--td-brand-color-1': colorPalette[0], // light
+    '--td-brand-color-2': colorPalette[1], // focus
+    '--td-brand-color-3': colorPalette[2], // disabled
+    '--td-brand-color-4': colorPalette[3],
+    '--td-brand-color-5': colorPalette[4],
+    '--td-brand-color-6': colorPalette[5],
+    '--td-brand-color-7': brandColorIdx > 0 ? colorPalette[brandColorIdx - 1] : theme, // hover
+    '--td-brand-color-8': colorPalette[brandColorIdx], // 主题色
+    '--td-brand-color-9': brandColorIdx > 8 ? theme : colorPalette[brandColorIdx + 1], // click
+    '--td-brand-color-10': colorPalette[9],
+  };
+  return colorMap;
+}
+
+/**
+ * 将生成的样式嵌入头部
+ */
+export function insertThemeStylesheet(theme: string, colorMap: TColorToken, mode: ModeType) {
+  const isDarkMode = mode === 'dark';
+  const root = !isDarkMode ? `:root[theme-color='${theme}']` : `:root[theme-color='${theme}'][theme-mode='dark']`;
+
+  const styleSheet = document.createElement('style');
+  styleSheet.type = 'text/css';
+  styleSheet.textContent = `${root}{
+    --td-brand-color: ${colorMap['--td-brand-color']};
+    --td-brand-color-1: ${colorMap['--td-brand-color-1']};
+    --td-brand-color-2: ${colorMap['--td-brand-color-2']};
+    --td-brand-color-3: ${colorMap['--td-brand-color-3']};
+    --td-brand-color-4: ${colorMap['--td-brand-color-4']};
+    --td-brand-color-5: ${colorMap['--td-brand-color-5']};
+    --td-brand-color-6: ${colorMap['--td-brand-color-6']};
+    --td-brand-color-7: ${colorMap['--td-brand-color-7']};
+    --td-brand-color-8: ${colorMap['--td-brand-color-8']};
+    --td-brand-color-9: ${colorMap['--td-brand-color-9']};
+    --td-brand-color-10: ${colorMap['--td-brand-color-10']};
+  }`;
+
+  document.head.appendChild(styleSheet);
+}

package/test/1/utils/date.ts

@@ -0,0 +1,9 @@
+// 获取常用时间
+import dayjs from 'dayjs';
+
+export const LAST_7_DAYS = [dayjs().subtract(6, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')];
+
+export const LAST_30_DAYS = [
+  dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
+  dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
+];

package/test/1/utils/request/Axios.ts

@@ -0,0 +1,294 @@
+import type {
+  AxiosError,
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosRequestHeaders,
+  AxiosResponse,
+  InternalAxiosRequestConfig,
+} from 'axios';
+import axios from 'axios';
+import cloneDeep from 'lodash/cloneDeep';
+import debounce from 'lodash/debounce';
+import isFunction from 'lodash/isFunction';
+import throttle from 'lodash/throttle';
+import { stringify } from 'qs';
+
+import { ContentTypeEnum } from '@/constants';
+import type { AxiosRequestConfigRetry, RequestOptions, Result } from '@/types/axios';
+
+import { AxiosCanceler } from './AxiosCancel';
+import type { CreateAxiosOptions } from './AxiosTransform';
+
+/**
+ * Axios 模块
+ */
+export class VAxios {
+  /**
+   * Axios实例句柄
+   * @private
+   */
+  private instance: AxiosInstance;
+
+  /**
+   * Axios配置
+   * @private
+   */
+  private readonly options: CreateAxiosOptions;
+
+  constructor(options: CreateAxiosOptions) {
+    this.options = options;
+    this.instance = axios.create(options);
+    this.setupInterceptors();
+  }
+
+  /**
+   * 创建Axios实例
+   * @param config
+   * @private
+   */
+  private createAxios(config: CreateAxiosOptions): void {
+    this.instance = axios.create(config);
+  }
+
+  /**
+   * 获取数据处理类
+   * @private
+   */
+  private getTransform() {
+    const { transform } = this.options;
+    return transform;
+  }
+
+  /**
+   * 获取Axios实例
+   */
+  getAxios(): AxiosInstance {
+    return this.instance;
+  }
+
+  /**
+   * 配置Axios
+   * @param config
+   */
+  configAxios(config: CreateAxiosOptions) {
+    if (!this.instance) return;
+    this.createAxios(config);
+  }
+
+  /**
+   * 设置公共头部信息
+   * @param headers
+   */
+  setHeader(headers: Record<string, string>): void {
+    if (!this.instance) return;
+    Object.assign(this.instance.defaults.headers, headers);
+  }
+
+  /**
+   * 设置拦截器
+   * @private
+   */
+  private setupInterceptors() {
+    const transform = this.getTransform();
+    if (!transform) return;
+
+    const { requestInterceptors, requestInterceptorsCatch, responseInterceptors, responseInterceptorsCatch } =
+      transform;
+    const axiosCanceler = new AxiosCanceler();
+
+    // 请求拦截器
+    this.instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
+      // 如果忽略取消令牌，则不会取消重复的请求
+      // @ts-expect-error 请求参数通过嵌套赋值
+      const { ignoreCancelToken } = config.requestOptions;
+      const ignoreCancel = ignoreCancelToken ?? this.options.requestOptions?.ignoreCancelToken;
+      if (!ignoreCancel) axiosCanceler.addPending(config);
+
+      if (requestInterceptors && isFunction(requestInterceptors)) {
+        config = requestInterceptors(config, this.options) as InternalAxiosRequestConfig;
+      }
+
+      return config;
+    }, undefined);
+
+    // 请求错误处理
+    if (requestInterceptorsCatch && isFunction(requestInterceptorsCatch)) {
+      this.instance.interceptors.request.use(undefined, requestInterceptorsCatch);
+    }
+
+    // 响应结果处理
+    this.instance.interceptors.response.use((res: AxiosResponse) => {
+      if (res) axiosCanceler.removePending(res.config);
+      if (responseInterceptors && isFunction(responseInterceptors)) {
+        res = responseInterceptors(res);
+      }
+      return res;
+    }, undefined);
+
+    // 响应错误处理
+    if (responseInterceptorsCatch && isFunction(responseInterceptorsCatch)) {
+      this.instance.interceptors.response.use(undefined, (error) => responseInterceptorsCatch(error, this.instance));
+    }
+  }
+
+  /**
+   * 支持 FormData 请求格式
+   * @param config
+   */
+  supportFormData(config: AxiosRequestConfig) {
+    const headers = config.headers || (this.options.headers as AxiosRequestHeaders);
+    const contentType = headers?.['Content-Type'] || headers?.['content-type'];
+
+    if (
+      contentType !== ContentTypeEnum.FormURLEncoded ||
+      !Reflect.has(config, 'data') ||
+      config.method?.toUpperCase() === 'GET'
+    ) {
+      return config;
+    }
+
+    return {
+      ...config,
+      data: stringify(config.data, { arrayFormat: 'brackets' }),
+    };
+  }
+
+  /**
+   * 支持 params 序列化
+   * @param config
+   */
+  supportParamsStringify(config: AxiosRequestConfig) {
+    const headers = config.headers || this.options.headers;
+    const contentType = headers?.['Content-Type'] || headers?.['content-type'];
+
+    if (contentType === ContentTypeEnum.FormURLEncoded || !Reflect.has(config, 'params')) {
+      return config;
+    }
+
+    return {
+      ...config,
+      paramsSerializer: (params: any) => stringify(params, { arrayFormat: 'brackets' }),
+    };
+  }
+
+  get<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'GET' }, options);
+  }
+
+  post<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'POST' }, options);
+  }
+
+  put<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'PUT' }, options);
+  }
+
+  delete<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'DELETE' }, options);
+  }
+
+  patch<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'PATCH' }, options);
+  }
+
+  /**
+   * 上传文件封装
+   * @param key 文件所属的key
+   * @param file 文件
+   * @param config 请求配置
+   * @param options
+   */
+  upload<T = any>(key: string, file: File, config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    const params: FormData = config.params ?? new FormData();
+    params.append(key, file);
+
+    return this.request(
+      {
+        ...config,
+        method: 'POST',
+        headers: {
+          'Content-Type': ContentTypeEnum.FormData,
+        },
+        params,
+      },
+      options,
+    );
+  }
+
+  /**
+   * 请求封装
+   * @param config
+   * @param options
+   */
+  request<T = any>(config: AxiosRequestConfigRetry, options?: RequestOptions): Promise<T> {
+    const { requestOptions } = this.options;
+
+    if (requestOptions.throttle !== undefined && requestOptions.debounce !== undefined) {
+      throw new Error('throttle and debounce cannot be set at the same time');
+    }
+
+    if (requestOptions.throttle && requestOptions.throttle.delay !== 0) {
+      return new Promise((resolve) => {
+        throttle(() => resolve(this.synthesisRequest(config, options)), requestOptions.throttle.delay);
+      });
+    }
+
+    if (requestOptions.debounce && requestOptions.debounce.delay !== 0) {
+      return new Promise((resolve) => {
+        debounce(() => resolve(this.synthesisRequest(config, options)), requestOptions.debounce.delay);
+      });
+    }
+
+    return this.synthesisRequest(config, options);
+  }
+
+  /**
+   * 请求方法
+   * @private
+   */
+  private async synthesisRequest<T = any>(config: AxiosRequestConfigRetry, options?: RequestOptions): Promise<T> {
+    let conf: CreateAxiosOptions = cloneDeep(config);
+    const transform = this.getTransform();
+
+    const { requestOptions } = this.options;
+
+    const opt: RequestOptions = { ...requestOptions, ...options };
+
+    const { beforeRequestHook, requestCatchHook, transformRequestHook } = transform || {};
+    if (beforeRequestHook && isFunction(beforeRequestHook)) {
+      conf = beforeRequestHook(conf, opt);
+    }
+    conf.requestOptions = opt;
+
+    conf = this.supportFormData(conf);
+    // 支持params数组参数格式化，因axios默认的toFormData即为brackets方式，无需配置paramsSerializer为qs，有需要可解除注释，参数参考qs文档
+    // conf = this.supportParamsStringify(conf);
+
+    return new Promise((resolve, reject) => {
+      this.instance
+        .request<any, AxiosResponse<Result>>(!config.retryCount ? conf : config)
+        .then((res: AxiosResponse<Result>) => {
+          if (transformRequestHook && isFunction(transformRequestHook)) {
+            try {
+              const ret = transformRequestHook(res, opt);
+              resolve(ret);
+            } catch (err) {
+              reject(err || new Error('请求错误!'));
+            }
+            return;
+          }
+          resolve(res as unknown as Promise<T>);
+        })
+        .catch((e: Error | AxiosError) => {
+          if (requestCatchHook && isFunction(requestCatchHook)) {
+            reject(requestCatchHook(e, opt));
+            return;
+          }
+          if (axios.isAxiosError(e)) {
+            // 在这里重写Axios的错误信息
+          }
+          reject(e);
+        });
+    });
+  }
+}

package/test/1/utils/request/AxiosCancel.ts

@@ -0,0 +1,67 @@
+import type { AxiosRequestConfig, Canceler } from 'axios';
+import axios from 'axios';
+import isFunction from 'lodash/isFunction';
+
+// 存储请求与取消令牌的键值对列表
+let pendingMap = new Map<string, Canceler>();
+
+/**
+ * 获取请求Url
+ * @param config
+ */
+export const getPendingUrl = (config: AxiosRequestConfig) => [config.method, config.url].join('&');
+
+/**
+ * @description 请求管理器
+ */
+export class AxiosCanceler {
+  /**
+   * 添加请求到列表中
+   * @param config
+   */
+  addPending(config: AxiosRequestConfig) {
+    this.removePending(config);
+    const url = getPendingUrl(config);
+    config.cancelToken =
+      config.cancelToken ||
+      new axios.CancelToken((cancel) => {
+        if (!pendingMap.has(url)) {
+          // 如果当前没有相同请求就添加
+          pendingMap.set(url, cancel);
+        }
+      });
+  }
+
+  /**
+   * 移除现有的所有请求
+   */
+  removeAllPending() {
+    pendingMap.forEach((cancel) => {
+      if (cancel && isFunction(cancel)) cancel();
+    });
+    pendingMap.clear();
+  }
+
+  /**
+   * 移除指定请求
+   * @param config
+   */
+  removePending(config: AxiosRequestConfig) {
+    const url = getPendingUrl(config);
+
+    if (pendingMap.has(url)) {
+      // If there is a current request identifier in pending,
+      // the current request needs to be cancelled and removed
+      const cancel = pendingMap.get(url);
+      if (cancel) cancel(url);
+      pendingMap.delete(url);
+    }
+  }
+
+  /**
+   * 重置
+   */
+  reset() {
+    pendingMap = new Map<string, Canceler>();
+  }
+}

package/test/1/utils/request/AxiosTransform.ts

@@ -0,0 +1,63 @@
+import type { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+
+import type { RequestOptions, Result } from '@/types/axios';
+
+/**
+ * @description 创建Axios实例配置
+ */
+export interface CreateAxiosOptions extends AxiosRequestConfig {
+  /**
+   * 请求验证方案
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
+   */
+  authenticationScheme?: string;
+  /**
+   * 请求数据处理
+   */
+  transform?: AxiosTransform;
+  /**
+   * 请求配置
+   */
+  requestOptions?: RequestOptions;
+}
+
+/**
+ * Axios请求数据处理 抽象类
+ */
+export abstract class AxiosTransform {
+  /**
+   * 请求前钩子
+   */
+  beforeRequestHook?: (_config: AxiosRequestConfig, _options: RequestOptions) => AxiosRequestConfig;
+
+  /**
+   * 数据处理前钩子
+   */
+  transformRequestHook?: <T = any>(_res: AxiosResponse<Result>, _options: RequestOptions) => T;
+
+  /**
+   * 请求失败钩子
+   */
+  requestCatchHook?: <T = any>(_e: Error | AxiosError, _options: RequestOptions) => Promise<T>;
+
+  /**
+   * 请求拦截器
+   */
+  requestInterceptors?: (_config: AxiosRequestConfig, _options: CreateAxiosOptions) => AxiosRequestConfig;
+
+  /**
+   * 响应拦截器
+   */
+  responseInterceptors?: (_res: AxiosResponse) => AxiosResponse;
+
+  /**
+   * 请求拦截器错误处理
+   */
+  requestInterceptorsCatch?: (_error: AxiosError) => void;
+
+  /**
+   * 响应拦截器错误处理
+   */
+  responseInterceptorsCatch?: (_error: AxiosError, _instance: AxiosInstance) => void;
+}