@4399ywkf/cli 0.0.21 → 1.0.2

package/dist/templates/updateVersion.ts

@@ -0,0 +1,186 @@
+import { message, notification } from 'antd';
+import React from 'react';
+
+const APP_NAME = process.env.APP_NAME;
+interface IVersionRecord {
+  action: '' | 'refreshedByClick';
+  stack: string[];
+}
+// 对应的数组的key
+const RECORD_KEY = `${APP_NAME}_version_record`;
+
+// 当前版本号
+let CUR_VERSION = '';
+// 页面是否有通知
+let CUR_STATE = false;
+// 是否通过点击通知触发刷新
+let REFRESHED_BY_CLICK = false;
+
+window.addEventListener('beforeunload', () => {
+  if (!REFRESHED_BY_CLICK) {
+    const recordStr = localStorage.getItem(RECORD_KEY);
+    if (recordStr === null) return;
+    const record: IVersionRecord = JSON.parse(recordStr);
+    if (record.action !== '') {
+      record.action = '';
+      localStorage.setItem(RECORD_KEY, JSON.stringify(record));
+    }
+  }
+});
+
+const Interval = {
+  clearInterval: function () {
+    cancelAnimationFrame(this.timer);
+  },
+  setInterval: function (callback: any, interval: any) {
+    let startTime = new Date().valueOf();
+    let endTime = new Date().valueOf();
+    const self: any = this; // eslint-disable-line
+    const loop = () => {
+      self.timer = requestAnimationFrame(loop);
+      endTime = new Date().valueOf();
+      if (endTime - startTime >= interval) {
+        endTime = startTime = new Date().valueOf();
+        callback?.(); // eslint-disable-line
+      }
+    };
+    this.timer = requestAnimationFrame(loop);
+    return this.timer;
+  },
+  timer: 0,
+};
+
+/**
+ * 读取到更新的json文件版本内容
+ */
+const fetchUpdateVersionFile = () => {
+  return new Promise((resolve, reject) => {
+    fetch('/update_version.json')
+      .then(res => {
+        return res.body;
+      })
+      .then(body => {
+        const reader = body?.getReader();
+        if (reader) {
+          reader
+            .read()
+            .then(val => {
+              let str = '';
+              if (val.value) {
+                for (let i = 0; i < val.value.length; i++) {
+                  str += String.fromCharCode(val.value[i]);
+                }
+              }
+              return JSON.parse(str);
+            })
+            .then(json => {
+              resolve(json);
+            })
+            .catch(err => {
+              reject(err);
+            });
+        }
+      })
+      .catch(err => {
+        reject(err);
+      });
+  });
+};
+
+const ENV = process.env.NODE_ENV;
+
+const notifyUserUpdate = () => {
+  const handleClick = () => {
+    REFRESHED_BY_CLICK = true;
+    const recordStr = localStorage.getItem(RECORD_KEY);
+    if (recordStr === null) return;
+    const record: IVersionRecord = JSON.parse(recordStr);
+    record.action = 'refreshedByClick';
+    localStorage.setItem(RECORD_KEY, JSON.stringify(record));
+    window.location.reload();
+  };
+  const handleClose = () => {
+    Interval.clearInterval();
+    message.open({
+      content: '页面将不会提示更新',
+      type: 'warning',
+    });
+  };
+  const openNotification = () => {
+    const element = React.createElement(
+      'div', // 类型
+      {
+        onClick: handleClick,
+        style: { color: '#1677ff', cursor: 'pointer' },
+      }, // 属性
+      '页面已更新，请点击此处刷新页面!', // 子元素
+    );
+    notification.warning({
+      description: element,
+      duration: null,
+      message: '温馨提示',
+      onClose: handleClose,
+      placement: 'bottomRight',
+    });
+  };
+  openNotification();
+  CUR_STATE = true;
+};
+
+const handleMain = (version: string, handleCb: any, fetchDelay: number) => {
+  // 记录当前版本号
+  CUR_VERSION = version;
+  // 从本地获取历史记录
+  const oldVersionRecordStr = localStorage.getItem(RECORD_KEY);
+  // 继承历史记录中的action、stack
+  let oldAction: IVersionRecord['action'] = '';
+  const oldStack: IVersionRecord['stack'] = [version];
+  if (oldVersionRecordStr !== null) {
+    const record: IVersionRecord = JSON.parse(oldVersionRecordStr);
+    oldAction = record.action;
+  }
+  // 创建变量记录版本、操作
+  const curVersionRecord: IVersionRecord = {
+    action: oldAction,
+    stack: oldStack,
+  };
+
+  localStorage.setItem(RECORD_KEY, JSON.stringify(curVersionRecord));
+
+  Interval.setInterval(() => {
+    fetchUpdateVersionFile().then((res: any) => {
+      // 读取版本记录
+      const versionRecordStr = localStorage.getItem(RECORD_KEY);
+      if (typeof versionRecordStr === 'string') {
+        const versionRecord: IVersionRecord = JSON.parse(versionRecordStr);
+        // 读取对应栈
+        const lastVersion = versionRecord.stack[0];
+        localStorage.setItem(RECORD_KEY, JSON.stringify(versionRecord));
+        // 在服务器的版本与当前版本不一致
+        if (res.version !== CUR_VERSION) {
+          if (CUR_STATE === false) {
+            // 发起通知
+            handleCb();
+          } else if (
+            versionRecord.action === 'refreshedByClick' &&
+            lastVersion !== CUR_VERSION
+          ) {
+            // 上一个标签页更新过，且当前标签页未更新
+            REFRESHED_BY_CLICK = true;
+            window.location.reload();
+          }
+        }
+      }
+    });
+  }, fetchDelay);
+};
+
+export const openUpdateVersionNotify = (fetchDelay: number) => {
+  // 开发环境没有必要开启版本检测功能
+  if (ENV === 'development') {
+    return;
+  }
+  fetchUpdateVersionFile().then((res: any) => {
+    handleMain(res.version, notifyUserUpdate, fetchDelay);
+  });
+};

package/dist/templates/url.ts

@@ -0,0 +1 @@
+export const imageUrl = (filename: string) => `/public/images/${filename}`;

package/dist/templates/urlStorage.ts

@@ -0,0 +1,85 @@
+import { isEmpty } from 'lodash-es';
+import type { StorageValue } from 'zustand/middleware';
+
+interface UrlSearchHelper {
+  getUrlSearch: () => string;
+  setUrlSearch: (params: URLSearchParams) => void;
+}
+
+const createUrlSearch = (mode: 'search' | 'hash' = 'hash'): UrlSearchHelper => {
+  if (mode === 'hash')
+    return {
+      getUrlSearch: () => location.hash.slice(1),
+      setUrlSearch: (params: URLSearchParams) => {
+        location.hash = params.toString();
+      },
+    };
+
+  return {
+    getUrlSearch: () => location.search.slice(1),
+    setUrlSearch: (params: URLSearchParams) => {
+      if (params.size === 0) return;
+
+      history.replaceState({}, '', `?${params.toString()}`);
+    },
+  };
+};
+
+export const creatUrlStorage = <State extends object>(
+  mode: 'hash' | 'search' = 'hash',
+) => {
+  const { setUrlSearch, getUrlSearch } = createUrlSearch(mode);
+
+  return {
+    getItem: <T extends State>(): StorageValue<T> | undefined => {
+      const searchParameters = new URLSearchParams(getUrlSearch());
+
+      if (searchParameters.size === 0) return undefined;
+
+      const state = Object.fromEntries(searchParameters.entries()) as T;
+
+      return { state };
+    },
+    removeItem: (key?: string) => {
+      const searchParameters = new URLSearchParams(getUrlSearch());
+      if (key) searchParameters.delete(key);
+
+      setUrlSearch(searchParameters);
+    },
+    setItem: <T extends State>(name: string, state: T) => {
+      const searchParameters = new URLSearchParams(getUrlSearch());
+
+      for (const [urlKey, v] of Object.entries(state)) {
+        switch (typeof v) {
+          case 'boolean': {
+            searchParameters.set(urlKey, (v ? 1 : 0).toString());
+            break;
+          }
+
+          case 'bigint':
+          case 'number': {
+            searchParameters.set(urlKey, v.toString());
+            break;
+          }
+
+          case 'string': {
+            searchParameters.set(urlKey, v);
+            break;
+          }
+
+          case 'object': {
+            if (isEmpty(v)) {
+              searchParameters.delete(urlKey);
+              continue;
+            }
+
+            searchParameters.set(urlKey, JSON.stringify(v));
+            break;
+          }
+        }
+      }
+
+      setUrlSearch(searchParameters);
+    },
+  };
+};

package/dist/templates/useRouteTitle.tsx

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { useLocation, matchRoutes } from 'react-router';
+import { useAppData } from '@config/router/appContext';
+
+const APP_NAME = process.env.APP_NAME!;
+
+export const useRouteTitle = () => {
+  const location = useLocation();
+  const { routes } = useAppData();
+
+  useEffect(() => {
+    // 将路由配置转换为适合 matchRoutes 的格式
+    const routesList = Object.keys(routes).map((key) => {
+      const route = routes[key];
+      return {
+        path: route.absPath,
+        meta: route.props,
+        id: key,
+      };
+    });
+    // 匹配当前路径的路由
+    const matchedRoutes = matchRoutes(routesList, location);
+
+    if (matchedRoutes && matchedRoutes.length > 0) {
+      // 找到最后一个匹配的路由（叶子路由）
+      const leafRoute = matchedRoutes[matchedRoutes.length - 1];
+      const title = leafRoute.route.meta?.title;
+
+      if (title) {
+        document.title = title;
+      } else {
+        document.title = APP_NAME;
+      }
+    }
+  }, [location.pathname, routes]);
+};

package/dist/templates/useSentry.ts

@@ -0,0 +1,92 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router';
+import { sentryPerformance, sentryContext, sentryError, sentrySession } from '@/utils/sentry';
+
+// 页面性能监控 Hook
+export const useSentryPageTracking = (pageName: string) => {
+  const location = useLocation();
+
+  useEffect(() => {
+    // ✨ 记录页面访问（保持会话活跃）
+    sentrySession.recordPageView(pageName, `${location.pathname}${location.search}`);
+
+    const cleanup = sentryPerformance.withSpan(`Page: ${pageName}`, 'navigation', () => {
+      sentryContext.setContext('page', {
+        name: pageName,
+        path: location.pathname,
+        search: location.search,
+      });
+
+      sentryPerformance.addBreadcrumb(`Navigation to ${pageName}`, 'navigation', 'info');
+
+      return () => {
+        // 清理函数
+      };
+    });
+
+    return cleanup;
+  }, [pageName, location]);
+};
+
+// 组件性能监控 Hook
+export const useSentryComponentTracking = (componentName: string) => {
+  useEffect(() => {
+    return sentryPerformance.withSpan(`Component: ${componentName}`, 'ui.react.mount', () => {
+      sentryPerformance.addBreadcrumb(`Component ${componentName} mounted`, 'ui', 'info');
+
+      return () => {
+        sentryPerformance.addBreadcrumb(`Component ${componentName} unmounted`, 'ui', 'info');
+      };
+    });
+  }, [componentName]);
+};
+
+// 错误处理 Hook
+export const useSentryErrorHandler = () => {
+  return {
+    captureError: (error: Error, context?: Record<string, any>) => {
+      sentryError.captureException(error, context);
+    },
+    captureMessage: (message: string, level?: 'info' | 'warning' | 'error') => {
+      sentryError.captureMessage(message, level);
+    },
+  };
+};
+
+// 点击事件追踪 Hook
+export const useSentryClickTracking = () => {
+  return {
+    trackClick: (
+      buttonName: string,
+      context?: {
+        buttonId?: string;
+        location?: string;
+        extraData?: Record<string, any>;
+      },
+    ) => {
+      const clickData = {
+        buttonName,
+        buttonId: context?.buttonId,
+        location: context?.location || window.location.pathname,
+        clickTime: new Date().toISOString(),
+        timestamp: Date.now(),
+        ...context?.extraData,
+      };
+
+      // ✨ 主动发送点击事件到 Sentry（这会立即发送）
+      sentryError.captureMessage(`Button Click: ${buttonName}`, 'info');
+
+      // 设置点击上下文（会包含在上面的消息中）
+      sentryContext.setContext('clickData', clickData);
+
+      // 记录用户操作（用于埋点统计）
+      sentrySession.recordUserAction(`Button Click: ${buttonName}`, clickData);
+
+      // 添加面包屑用于调试
+      sentryPerformance.addBreadcrumb(`Button clicked: ${buttonName}`, 'user.click', 'info');
+
+      // 设置点击上下文
+      sentryContext.setContext('lastClick', clickData);
+    },
+  };
+};

package/dist/templates/user/index.tsx

@@ -0,0 +1 @@
+export * from './store';

package/dist/templates/user/indexApi.tsx

@@ -0,0 +1,5 @@
+import request from '@config/request';
+
+export function apiGetV1GatewayProfile(params?: Record<string, any>) {
+  return request.get('/v1/gateway/profile', params);
+}

package/dist/templates/user/initialState.ts

@@ -0,0 +1,15 @@
+import {
+  type UserProfileState,
+  initialState as initialProfileState,
+} from './slices/profile/initialState';
+import {
+  type UserSettingsState,
+  initialState as initialSettingsState,
+} from './slices/settings/initialState';
+
+export type UserState = UserProfileState & UserSettingsState;
+
+export const initialState: UserState = {
+  ...initialProfileState,
+  ...initialSettingsState,
+};

package/dist/templates/user/slices/profile/actions.ts

@@ -0,0 +1,20 @@
+import type { StateCreator } from 'zustand/vanilla';
+
+import type { UserStore } from '../../store';
+import { apiGetV1GatewayProfile } from './api';
+
+export interface UserProfileAction {
+  getUserProfile: () => Promise<void>;
+}
+
+export const createProfileSlice: StateCreator<
+  UserStore,
+  [['zustand/devtools', never]],
+  [],
+  UserProfileAction
+> = (set, get) => ({
+  getUserProfile: async () => {
+    const { data } = await apiGetV1GatewayProfile();
+    set({ user: data });
+  },
+});

package/dist/templates/user/slices/profile/api.ts

@@ -0,0 +1,5 @@
+import request from '@config/request';
+
+export function apiGetV1GatewayProfile(params?: Record<string, any>) {
+  return request.get('/v1/gateway/profile', params);
+}

package/dist/templates/user/slices/profile/initialState.ts

@@ -0,0 +1,14 @@
+import type { User } from '@/types/user';
+
+export interface UserProfileState {
+  user?: User;
+}
+
+export const initialState: UserProfileState = {
+  user: {
+    id: 0,
+    name: '',
+    cname: '',
+    staffId: '',
+  },
+};

package/dist/templates/user/slices/settings/actions.ts

@@ -0,0 +1,23 @@
+import type { StateCreator } from "zustand/vanilla";
+
+import type { UserStore } from "../../store";
+import type { AnimationMode, ThemeMode } from "./initialState";
+
+export interface UserSettingsAction {
+  setAnimationMode: (animationMode: AnimationMode) => void;
+  setThemeMode: (themeMode: ThemeMode) => void;
+}
+
+export const createSettingsSlice: StateCreator<
+  UserStore,
+  [["zustand/devtools", never]],
+  [],
+  UserSettingsAction
+> = (set, get) => ({
+  setAnimationMode: (animationMode: AnimationMode) => {
+    set({ animationMode });
+  },
+  setThemeMode: (themeMode: ThemeMode) => {
+    set({ themeMode });
+  },
+});

package/dist/templates/user/slices/settings/initialState.ts

@@ -0,0 +1,32 @@
+export type AnimationMode = "disabled" | "agile" | "elegant";
+export type ResponseAnimationStyle = "smooth" | "fadeIn" | "none";
+export type ThemeMode = "auto" | "dark" | "light";
+import type {
+  HighlighterProps,
+  MermaidProps,
+  NeutralColors,
+  PrimaryColors,
+} from "@/styles";
+
+export interface UserSettingsState {
+  animationMode?: AnimationMode;
+  neutralColor?: NeutralColors;
+  primaryColor?: PrimaryColors;
+  fontSize: number;
+  transitionMode?: ResponseAnimationStyle;
+  highlighterTheme?: HighlighterProps["theme"];
+  mermaidTheme?: MermaidProps["theme"];
+
+  themeMode?: ThemeMode;
+}
+
+export const initialState: UserSettingsState = {
+  animationMode: "agile",
+  neutralColor: undefined,
+  primaryColor: undefined,
+  fontSize: 14,
+  transitionMode: "fadeIn",
+  highlighterTheme: "lobe-theme",
+  mermaidTheme: "lobe-theme",
+  themeMode: "auto",
+};

package/dist/templates/user/store.ts

@@ -0,0 +1,39 @@
+import { subscribeWithSelector } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
+import { createWithEqualityFn } from 'zustand/traditional';
+import type { StateCreator } from 'zustand/vanilla';
+
+import { createDevtools } from '../middleware/createDevtools';
+import { type UserState, initialState } from './initialState';
+
+import {
+  type UserProfileAction,
+  createProfileSlice,
+} from './slices/profile/actions';
+import {
+  type UserSettingsAction,
+  createSettingsSlice,
+} from './slices/settings/actions';
+
+//  ===============  聚合 createStoreFn ============ //
+
+export type UserStore = UserState & UserProfileAction & UserSettingsAction;
+
+const createStore: StateCreator<UserStore, [['zustand/devtools', never]]> = (
+  ...parameters
+) => ({
+  ...initialState,
+  ...createProfileSlice(...parameters),
+  ...createSettingsSlice(...parameters),
+});
+
+//  ===============  实装 useStore ============ //
+
+const devtools = createDevtools('user');
+
+export const useUserStore = createWithEqualityFn<UserStore>()(
+  subscribeWithSelector(devtools(createStore)),
+  shallow,
+);
+
+export const getUserStoreState = () => useUserStore.getState();

package/dist/templates/utils/__tests__/example.test.ts

@@ -0,0 +1,7 @@
+// 假设您有一些工具函数需要测试
+describe('工具函数测试', () => {
+  it('示例测试', () => {
+    const result = 1 + 1;
+    expect(result).toBe(2);
+  });
+});

package/dist/templates/utils/convert.ts

@@ -0,0 +1,40 @@
+/**
+ * 将文件大小从一个单位转换为另一个单位。
+ *
+ * @param {number} size 文件大小。
+ * @param {string} fromUnit 初始单位（'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'）。
+ * @param {string} toUnit 目标单位（'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'）。
+ * @param {number} [decimalPoint=2] 结果保留的小数位数，默认为2。
+ * @return {string} 转换后的文件大小，带单位。
+ */
+export const convertFileSize = (
+  size: number,
+  fromUnit: string,
+  toUnit: string,
+  decimalPoint = 2,
+): string => {
+  // 定义单位与字节之间的转换关系
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  // 获取初始单位和目标单位的索引
+  const fromIndex = units.indexOf(fromUnit);
+  const toIndex = units.indexOf(toUnit);
+
+  // 如果单位不在列表中，抛出错误
+  if (fromIndex === -1 || toIndex === -1) {
+    throw new Error('Invalid units');
+  }
+
+  // 计算初始单位与目标单位之间的转换系数
+  const exponent = toIndex - fromIndex;
+  // 计算结果大小
+  const resultSize = size / 1024 ** exponent;
+
+  // 返回格式化后的结果
+  return `${Number.parseFloat(resultSize.toFixed(decimalPoint))} ${toUnit}`;
+};
+
+// // 示例使用
+// console.log(convertFileSize(1, 'GB', 'MB')); // 输出: 1024.00 MB
+// console.log(convertFileSize(1, 'MB', 'KB')); // 输出: 1024.00 KB
+// console.log(convertFileSize(1, 'KB', 'B'));  // 输出: 1024.00 B
+// console.log(convertFileSize(1, 'MB', 'GB', 5)); // 输出: 0.00098 GB

package/dist/templates/utils/cookie.ts

@@ -0,0 +1,25 @@
+import dayjs from 'dayjs';
+
+export const COOKIE_CACHE_DAYS = 30;
+
+export const setCookie = (
+  key: string,
+  value: string | undefined,
+  expireDays: string | number = COOKIE_CACHE_DAYS,
+) => {
+  if (typeof value === 'undefined') {
+    // Set the expiration time to yesterday (expire immediately)
+    const expiredDate = new Date(0).toUTCString(); // 1970-01-01T00:00:00Z
+
+    // eslint-disable-next-line unicorn/no-document-cookie
+    document.cookie = `${key}=; expires=${expiredDate}; path=/;`;
+  } else {
+    const expires =
+      typeof expireDays === 'string'
+        ? expireDays
+        : dayjs().add(expireDays, 'day').toDate().toUTCString();
+
+    // eslint-disable-next-line unicorn/no-document-cookie
+    document.cookie = `${key}=${value};expires=${expires};path=/;`;
+  }
+};

package/dist/templates/utils/copyToClipboard.ts

@@ -0,0 +1,13 @@
+export const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    document.body.append(textArea);
+    textArea.focus();
+    textArea.select();
+    document.execCommand('copy');
+    textArea.remove();
+  }
+};

package/dist/templates/utils/difference.ts

@@ -0,0 +1,26 @@
+import isEqual from 'fast-deep-equal';
+import { isArray, isObject, transform } from 'lodash-es';
+
+/**
+ * Compare two objects and return the difference.
+ * when there are difference in array, just return the new value.
+ * it's used mostly in settings
+ */
+export const difference = <T extends object>(object: T, base: T) => {
+  const changes = (object: any, base: any) =>
+    transform(object, (result: any, value, key) => {
+      // First, check if value and base[key] are both arrays.
+      // If they are arrays, we directly use isEqual to compare their values.
+      if (isArray(value) && isArray(base[key])) {
+        if (!isEqual(value, base[key])) {
+          result[key] = value;
+        }
+      }
+      // If they are objects, we recursively call changes to compare their values.
+      else if (!isEqual(value, base[key])) {
+        result[key] = isObject(value) && isObject(base[key]) ? changes(value, base[key]) : value;
+      }
+    });
+
+  return changes(object, base);
+};