vue2server7 7.0.15 → 7.0.17

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

@@ -0,0 +1,231 @@
+// axios配置  可自行根据项目进行更改，只需更改该文件即可，其他文件可以不动
+import type { AxiosInstance } from 'axios';
+import isString from 'lodash/isString';
+import merge from 'lodash/merge';
+import { MessagePlugin } from 'tdesign-vue-next';
+
+import { ContentTypeEnum } from '@/constants';
+import { useUserStore } from '@/store';
+
+import { VAxios } from './Axios';
+import type { AxiosTransform, CreateAxiosOptions } from './AxiosTransform';
+import { formatRequestDate, joinTimestamp, setObjToUrlParams } from './utils';
+
+const host = import.meta.env.VITE_IS_REQUEST_PROXY !== 'true' ? '' : import.meta.env.VITE_API_URL;
+
+// 数据处理，方便区分多种处理方式
+const transform: AxiosTransform = {
+  // 处理请求数据。如果数据不是预期格式，可直接抛出错误
+  transformRequestHook: (res, options) => {
+    const { isTransformResponse, isReturnNativeResponse } = options;
+
+    // 如果204无内容直接返回
+    const method = res.config.method?.toLowerCase();
+    if (res.status === 204 && ['put', 'patch', 'delete'].includes(method)) {
+      return res;
+    }
+
+    // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+    if (isReturnNativeResponse) {
+      return res;
+    }
+    // 不进行任何处理，直接返回
+    // 用于页面代码可能需要直接获取code，data，message这些信息时开启
+    if (!isTransformResponse) {
+      return res.data;
+    }
+
+    // 错误的时候返回
+    const { data } = res;
+    if (!data) {
+      throw new Error('请求接口错误');
+    }
+
+    //  这里 code为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
+    const { code } = data;
+
+    // 这里逻辑可以根据项目进行修改
+    const hasSuccess = data && code === 200;
+    if (hasSuccess) {
+      return data.data;
+    }
+
+    throw new Error(`请求接口错误, 错误码: ${code}`);
+  },
+
+  // 请求前处理配置
+  beforeRequestHook: (config, options) => {
+    const { apiUrl, isJoinPrefix, urlPrefix, joinParamsToUrl, formatDate, joinTime = true } = options;
+
+    // 添加接口前缀
+    if (isJoinPrefix && urlPrefix && isString(urlPrefix)) {
+      config.url = `${urlPrefix}${config.url}`;
+    }
+
+    // 将baseUrl拼接
+    if (apiUrl && isString(apiUrl)) {
+      config.url = `${apiUrl}${config.url}`;
+    }
+    const params = config.params || {};
+    const data = config.data || false;
+
+    if (formatDate && data && !isString(data)) {
+      formatRequestDate(data);
+    }
+    if (config.method?.toUpperCase() === 'GET') {
+      if (!isString(params)) {
+        // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
+        config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
+      } else {
+        // 兼容restful风格
+        config.url = `${config.url + params}${joinTimestamp(joinTime, true)}`;
+        config.params = undefined;
+      }
+    } else if (!isString(params)) {
+      if (formatDate) {
+        formatRequestDate(params);
+      }
+      if (
+        Reflect.has(config, 'data') &&
+        config.data &&
+        (Object.keys(config.data).length > 0 || data instanceof FormData)
+      ) {
+        config.data = data;
+        config.params = params;
+      } else {
+        // 非GET请求如果没有提供data，则将params视为data
+        config.data = params;
+        config.params = undefined;
+      }
+      if (joinParamsToUrl) {
+        config.url = setObjToUrlParams(config.url as string, { ...config.params, ...config.data });
+      }
+    } else {
+      // 兼容restful风格
+      config.url += params;
+      config.params = undefined;
+    }
+    return config;
+  },
+
+  // 请求拦截器处理
+  requestInterceptors: (config, options) => {
+    // 请求之前处理config
+    const userStore = useUserStore();
+    const { token } = userStore;
+    config.headers['x-skip-crypto'] = 'dev_debug_token_123';
+    if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
+      // jwt token
+      (config as Recordable).headers.Authorization = options.authenticationScheme
+        ? `${options.authenticationScheme} ${token}`
+        : token;
+    }
+    return config;
+  },
+
+  // 响应拦截器处理
+  responseInterceptors: (res) => {
+    return res;
+  },
+
+  // 响应错误处理
+  responseInterceptorsCatch: async (error: any, instance: AxiosInstance) => {
+    const { config, response } = error;
+    // 获取服务器返回的错误数据
+    const errorData = response?.data;
+    const errorMessage = errorData?.message || error.message || '请求失败';
+
+    // 401 未授权：清除 token 并跳转登录页
+    if (response?.status === 401) {
+      const userStore = useUserStore();
+      userStore.logout();
+      const currentPath = window.location.hash ? window.location.hash.slice(1) : window.location.pathname;
+      if (currentPath !== '/login') {
+        window.location.href = `/login?redirect=${encodeURIComponent(currentPath)}`;
+      }
+      return Promise.reject(error);
+    }
+
+    // 弹出错误提示
+    await MessagePlugin.error(errorMessage);
+
+    if (!config || !config.requestOptions.retry) {
+      // 将错误信息附加到 error 对象上，方便调用方获取
+      error.message = errorMessage;
+      error.data = errorData;
+      return Promise.reject(error);
+    }
+
+    config.retryCount = config.retryCount || 0;
+
+    if (config.retryCount >= config.requestOptions.retry.count) {
+      error.message = errorMessage;
+      error.data = errorData;
+      return Promise.reject(error);
+    }
+
+    config.retryCount += 1;
+
+    const backoff = new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(config);
+      }, config.requestOptions.retry.delay || 1);
+    });
+    config.headers = { ...config.headers, 'Content-Type': ContentTypeEnum.Json };
+    return backoff.then((config) => instance.request(config));
+  },
+};
+
+function createAxios(opt?: Partial<CreateAxiosOptions>) {
+  return new VAxios(
+    merge(
+      <CreateAxiosOptions>{
+        // https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
+        // 例如: authenticationScheme: 'Bearer'
+        authenticationScheme: '',
+        // 超时
+        timeout: 10 * 1000,
+        // 携带Cookie
+        withCredentials: false,
+        // 头信息
+        headers: { 'Content-Type': ContentTypeEnum.Json },
+        // 数据处理方式
+        transform,
+        // 配置项，下面的选项都可以在独立的接口请求中覆盖
+        requestOptions: {
+          // 接口地址
+          apiUrl: host,
+          // 是否自动添加接口前缀
+          isJoinPrefix: true,
+          // 接口前缀
+          // 例如: https://www.baidu.com/api
+          // urlPrefix: '/api'
+          urlPrefix: import.meta.env.VITE_API_URL_PREFIX,
+          // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+          isReturnNativeResponse: false,
+          // 需要对返回数据进行处理
+          isTransformResponse: true,
+          // post请求的时候添加参数到url
+          joinParamsToUrl: false,
+          // 格式化提交参数时间
+          formatDate: true,
+          // 是否加入时间戳
+          joinTime: true,
+          // 是否忽略请求取消令牌
+          // 如果启用，则重复请求时不进行处理
+          // 如果禁用，则重复请求时会取消当前请求
+          ignoreCancelToken: true,
+          // 是否携带token
+          withToken: true,
+          // 重试
+          retry: {
+            count: 0,
+            delay: 1000,
+          },
+        },
+      },
+      opt || {},
+    ),
+  );
+}
+export const request = createAxios();

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

@@ -0,0 +1,53 @@
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
+
+const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+
+export function joinTimestamp<T extends boolean>(_join: boolean, _restful: T): T extends true ? string : object;
+
+export function joinTimestamp(join: boolean, restful = false): string | object {
+  if (!join) {
+    return restful ? '' : {};
+  }
+  const now = new Date().getTime();
+  if (restful) {
+    return `?_t=${now}`;
+  }
+  return { _t: now };
+}
+
+// 格式化提交参数时间
+export function formatRequestDate(params: Recordable) {
+  if (Object.prototype.toString.call(params) !== '[object Object]') {
+    return;
+  }
+
+  for (const key in params) {
+    if (params[key] && params[key]._isAMomentObject) {
+      params[key] = params[key].format(DATE_TIME_FORMAT);
+    }
+    if (isString(key)) {
+      const value = params[key];
+      if (value) {
+        try {
+          params[key] = isString(value) ? value.trim() : value;
+        } catch (error: any) {
+          throw new Error(error);
+        }
+      }
+    }
+    if (isObject(params[key])) {
+      formatRequestDate(params[key]);
+    }
+  }
+}
+
+// 将对象转为Url参数
+export function setObjToUrlParams(baseUrl: string, obj: { [index: string]: any }): string {
+  let parameters = '';
+  for (const key in obj) {
+    parameters += `${key}=${encodeURIComponent(obj[key])}&`;
+  }
+  parameters = parameters.replace(/&$/, '');
+  return /\?$/.test(baseUrl) ? baseUrl + parameters : baseUrl.replace(/\/?$/, '?') + parameters;
+}

package/test/1/utils/route/constant.ts

@@ -0,0 +1,14 @@
+export const LAYOUT = () => import('@/layouts/index.vue');
+export const BLANK_LAYOUT = () => import('@/layouts/blank.vue');
+export const IFRAME = () => import('@/layouts/components/FrameBlank.vue');
+export const EXCEPTION_COMPONENT = () => import('@/pages/result/500/index.vue');
+export const PARENT_LAYOUT = () =>
+  new Promise((resolve) => {
+    resolve({ name: 'ParentLayout' });
+  });
+
+export const PAGE_NOT_FOUND_ROUTE = {
+  path: '/:w+',
+  name: '404Page',
+  redirect: '/result/404',
+};

package/test/1/utils/route/index.ts

@@ -0,0 +1,110 @@
+import cloneDeep from 'lodash/cloneDeep';
+
+import type { RouteItem } from '@/api/model/permissionModel';
+import type { RouteMeta } from '@/types/interface';
+import {
+  BLANK_LAYOUT,
+  EXCEPTION_COMPONENT,
+  IFRAME,
+  LAYOUT,
+  PAGE_NOT_FOUND_ROUTE,
+  PARENT_LAYOUT,
+} from '@/utils/route/constant';
+
+// 动态从包内引入单个Icon,如果没有网络环境可以使用这种方式 但是会导致产物存在多个chunk
+// const iconsPath = import.meta.glob('../../../node_modules/tdesign-icons-vue-next/esm/components/*.js');
+
+// async function getMenuIcon(iconName: string): Promise<string> {
+//   const RenderIcon = iconsPath[`../../../node_modules/tdesign-icons-vue-next/esm/components/${iconName}.js`];
+
+//   const Icon = await RenderIcon();
+//   return shallowRef(Icon.default);
+// }
+
+const LayoutMap = new Map<string, () => Promise<typeof import('*.vue')>>();
+
+LayoutMap.set('LAYOUT', LAYOUT);
+LayoutMap.set('BLANK', BLANK_LAYOUT);
+LayoutMap.set('IFRAME', IFRAME);
+
+let dynamicViewsModules: Record<string, () => Promise<Recordable>>;
+
+// 动态引入路由组件
+function asyncImportRoute(routes: RouteItem[] | undefined) {
+  dynamicViewsModules = dynamicViewsModules || import.meta.glob('../../pages/**/*.vue');
+  if (!routes) return;
+
+  routes.forEach(async (item) => {
+    const { component, name } = item;
+    const { children } = item;
+
+    if (component) {
+      const layoutFound = LayoutMap.get(component.toUpperCase());
+      if (layoutFound) {
+        item.component = layoutFound;
+      } else {
+        item.component = dynamicImport(dynamicViewsModules, component);
+      }
+    } else if (name) {
+      item.component = PARENT_LAYOUT();
+    }
+
+    // 动态从包内引入单个Icon,如果没有网络环境可以使用这种方式 但是会导致产物存在多个chunk
+    // if (item.meta.icon) item.meta.icon = await getMenuIcon(item.meta.icon);
+
+    children && asyncImportRoute(children);
+  });
+}
+
+function dynamicImport(dynamicViewsModules: Record<string, () => Promise<Recordable>>, component: string) {
+  const keys = Object.keys(dynamicViewsModules);
+  const matchKeys = keys.filter((key) => {
+    const k = key.replace('../../pages', '');
+    const startFlag = component.startsWith('/');
+    const endFlag = component.endsWith('.vue') || component.endsWith('.tsx');
+    const startIndex = startFlag ? 0 : 1;
+    const lastIndex = endFlag ? k.length : k.lastIndexOf('.');
+    return k.substring(startIndex, lastIndex) === component;
+  });
+  if (matchKeys?.length === 1) {
+    const matchKey = matchKeys[0];
+    return dynamicViewsModules[matchKey];
+  }
+  if (matchKeys?.length > 1) {
+    throw new Error(
+      'Please do not create `.vue` and `.TSX` files with the same file name in the same hierarchical directory under the views folder. This will cause dynamic introduction failure',
+    );
+  } else {
+    console.warn(`Can't find ${component} in pages folder`);
+  }
+  return EXCEPTION_COMPONENT;
+}
+
+// 将背景对象变成路由对象
+export function transformObjectToRoute<T = RouteItem>(routeList: RouteItem[]): T[] {
+  routeList.forEach(async (route) => {
+    const component = route.component as string;
+
+    if (component) {
+      if (component.toUpperCase() === 'LAYOUT') {
+        route.component = LayoutMap.get(component.toUpperCase());
+      } else {
+        route.children = [cloneDeep(route)];
+        route.component = LAYOUT;
+        route.name = `${route.name}Parent`;
+        route.path = '';
+        route.meta = (route.meta || {}) as RouteMeta;
+      }
+    } else {
+      throw new Error('component is undefined');
+    }
+
+    route.children && asyncImportRoute(route.children);
+
+    // 动态从包内引入单个Icon,如果没有网络环境可以使用这种方式 但是会导致产物存在多个chunk
+    // if (route.meta.icon)
+    // route.meta.icon = await getMenuIcon(route.meta.icon);
+  });
+
+  return [PAGE_NOT_FOUND_ROUTE, ...routeList] as unknown as T[];
+}

package/test/1/utils/version-check.worker.ts

@@ -0,0 +1,58 @@
+declare function postMessage(message: unknown): void;
+
+let timer: ReturnType<typeof setInterval> | null = null;
+let currentVersion = '';
+let checkUrl = '';
+let interval = 60_000;
+
+async function check() {
+  try {
+    const res = await fetch(`${checkUrl}?t=${Date.now()}`);
+    if (!res.ok) return;
+    const data = await res.json();
+    if (data.version && data.version !== currentVersion) {
+      postMessage({ type: 'update-available', version: data.version });
+      stop();
+    }
+  } catch {
+    // Network error — silently ignore, next tick will retry
+  }
+}
+
+function stop() {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+}
+
+function start() {
+  stop();
+  check();
+  timer = setInterval(check, interval);
+}
+
+onmessage = (e: MessageEvent) => {
+  const msg = e.data;
+
+  switch (msg.type) {
+    case 'start':
+      currentVersion = msg.version;
+      checkUrl = msg.url;
+      interval = msg.interval || 60_000;
+      start();
+      break;
+
+    case 'pause':
+      stop();
+      break;
+
+    case 'resume':
+      start();
+      break;
+
+    case 'stop':
+      stop();
+      break;
+  }
+};

package/test/1/utils/version-update.ts

@@ -0,0 +1,135 @@
+import { DialogPlugin } from 'tdesign-vue-next';
+
+/**
+ * 前端版本热更新检测模块
+ *
+ * 工作原理：
+ *   1. 应用启动时，从 <meta name="app-version"> 读取当前构建版本号
+ *   2. 启动一个 Web Worker 按固定间隔轮询 version.json（构建时生成）
+ *   3. Worker 发现远端版本号与当前不一致时，通过 postMessage 通知主线程
+ *   4. 主线程弹出确认弹窗，用户可选择"立即刷新"或"稍后提醒"
+ *   5. 选择稍后提醒时，等待 SNOOZE_INTERVAL 后重新开始轮询
+ *
+ * 附加行为：
+ *   - 页面切到后台时暂停轮询，回到前台时恢复（节省资源）
+ *   - 开发环境（DEV）下不启用检测
+ */
+
+/** 正常轮询间隔：60 秒 */
+const POLL_INTERVAL = 60 * 1000;
+
+/** 用户点击"稍后提醒"后的静默期：5 分钟，期间不再弹窗 */
+const SNOOZE_INTERVAL = 5 * 60 * 1000;
+
+/** 负责后台轮询的 Web Worker 实例 */
+let worker: Worker | null = null;
+
+/** 防重复弹窗标记：同一轮检测周期内只弹一次 */
+let hasNotified = false;
+
+/** 当前前端构建版本号，来自 HTML meta 标签 */
+let currentVersion = '';
+
+/** version.json 的完整 URL（含 BASE_URL 前缀，适配子路径部署） */
+let versionUrl = '';
+
+/**
+ * 初始化版本检测，应在应用挂载后调用一次
+ *
+ * 流程：
+ *   1. 开发环境直接跳过
+ *   2. 读取 meta 标签中的版本号，读不到则放弃
+ *   3. 创建 Web Worker；浏览器不支持时静默降级
+ *   4. 监听 Worker 消息，收到 update-available 则弹窗
+ *   5. 监听 visibilitychange 实现前后台暂停/恢复
+ */
+export function initVersionCheck() {
+  if (import.meta.env.DEV) return;
+
+  currentVersion = document.querySelector('meta[name="app-version"]')?.getAttribute('content') || '';
+  if (!currentVersion) return;
+
+  versionUrl = `${import.meta.env.BASE_URL}version.json`;
+
+  try {
+    worker = new Worker(new URL('./version-check.worker.ts', import.meta.url), { type: 'module' });
+  } catch {
+    // 浏览器不支持 module Worker 或 URL 构造失败，静默降级
+    return;
+  }
+
+  worker.onmessage = (e: MessageEvent) => {
+    if (e.data.type === 'update-available' && !hasNotified) {
+      hasNotified = true;
+      showUpdateDialog();
+    }
+  };
+
+  // 启动 Worker 轮询，传入当前版本号、远端地址和轮询间隔
+  worker.postMessage({ type: 'start', version: currentVersion, url: versionUrl, interval: POLL_INTERVAL });
+
+  document.addEventListener('visibilitychange', handleVisibilityChange);
+}
+
+/**
+ * 页面可见性变化回调
+ * - 回到前台：恢复轮询
+ * - 切到后台：暂停轮询（避免不必要的网络请求）
+ */
+function handleVisibilityChange() {
+  if (!worker || hasNotified) return;
+  if (document.visibilityState === 'visible') {
+    worker.postMessage({ type: 'resume', interval: POLL_INTERVAL });
+  } else {
+    worker.postMessage({ type: 'pause' });
+  }
+}
+
+/**
+ * 弹出版本更新确认弹窗
+ * - 确认：立即刷新页面加载新版本
+ * - 取消/关闭：进入静默期后重新开始检测
+ */
+function showUpdateDialog() {
+  const dialog = DialogPlugin.confirm({
+    header: '发现新版本',
+    body: '系统已更新，请刷新页面以获取最新功能和修复。',
+    confirmBtn: '立即刷新',
+    cancelBtn: '稍后提醒',
+    theme: 'info',
+    onConfirm: () => {
+      dialog.destroy();
+      window.location.reload();
+    },
+    onCancel: () => {
+      dialog.destroy();
+      scheduleRecheck();
+    },
+    onClose: () => {
+      dialog.destroy();
+      scheduleRecheck();
+    },
+  });
+}
+
+/**
+ * 安排延迟重新检测
+ * 重置弹窗标记，等待 SNOOZE_INTERVAL 后重新启动 Worker 轮询
+ */
+function scheduleRecheck() {
+  hasNotified = false;
+  setTimeout(() => {
+    worker?.postMessage({ type: 'start', version: currentVersion, url: versionUrl, interval: POLL_INTERVAL });
+  }, SNOOZE_INTERVAL);
+}
+
+/**
+ * 销毁版本检测，应在应用卸载时调用
+ * 移除事件监听、停止并终止 Worker，释放资源
+ */
+export function destroyVersionCheck() {
+  document.removeEventListener('visibilitychange', handleVisibilityChange);
+  worker?.postMessage({ type: 'stop' });
+  worker?.terminate();
+  worker = null;
+}