清哥的小屋

1
/**
2
 * 防抖函数
3
 * @param fn 回调函数
4
 * @param timeout 延迟时间
5
 * @param immediate 是否立即执行
6
 */
7
export const debounce = <T extends FunctionArgs>(
8
  fn: T,
9
  timeout: MaybeRef<number> = 200,
10
  immediate = false
11
) => {
12
  let timmer: TimeoutHandle;
13
  const wait = unref(timeout);
14
  return () => {
15
    timmer && clearTimeout(timmer);
16
    if (immediate) {
17
      if (!timmer) {
18
        fn();
19
      }
20
      timmer = setTimeout(() => (timmer = null), wait);
21
    } else {
22
      timmer = setTimeout(fn, wait);
23
    }
24
  };
25
};

1
/**
2
 *
3
 * @param fn 回调函数
4
 * @param timeout 延迟时间
5
 */
6
export const throttle = (fn, timeout = 200) => {
7
  let lastExecutedTime = 0;
8
  return function (...args) {
9
    const currentTime = Date.now();
10
    if (currentTime - lastExecutedTime > timeout) {
11
      fn.apply(this, args);
12
      lastExecutedTime = currentTime;
13
    }
14
  };
15
};

1
/**
2
 * 检测当前设备是否为移动设备
3
 *
4
 * 通过检查用户代理(User Agent)字符串判断当前设备类型
5
 *
6
 * @returns {boolean} 如果是移动设备返回true，桌面设备返回false
7
 *
8
 * @example
9
 * if (deviceDetection()) {
10
 *   // 移动设备逻辑
11
 * } else {
12
 *   // 桌面设备逻辑
13
 * }
14
 */
15
export const deviceDetection = (): boolean => {
16
  const userAgent: string = navigator.userAgent.toLowerCase();
17

18
  // 定义移动设备的特征标识
19
  const mobileIdentifiers = [
20
    /iphone os/i,     // iOS设备
21
    /midp/i,          // 早期Java手机平台
22
    /rv:1.2.3.4/i,    // 特定UC浏览器版本
23
    /ucweb/i,         // UC浏览器
24
    /android/i,       // 安卓设备
25
    /windows ce/i,    // Windows CE设备
26
    /windows mobile/i // Windows Mobile设备
27
  ];
28

29
  // 检查是否匹配任一移动设备标识
30
  return mobileIdentifiers.some(pattern => pattern.test(userAgent));
31
};
32

33
## 3. 获取当前浏览器信息
34
```js
35

36
/**
37
 * 获取当前浏览器信息，包括浏览器类型和版本号
38
 *
39
 * @returns {BrowserInter} 包含浏览器类型和版本的对象
40
 * @property {string} browser - 浏览器类型 (msie|firefox|chrome|opera|safari)
41
 * @property {string} version - 浏览器版本号
42
 *
43
 * @example
44
 * const { browser, version } = getBrowserInfo();
45
 * console.log(`当前浏览器: ${browser} ${version}`);
46
 */
47
export const getBrowserInfo = (): BrowserInter => {
48
  const userAgent = navigator.userAgent.toLowerCase();
49
  const regExp = /(msie|firefox|chrome|opera|version).*?([\d.]+)/;
50
  const match = userAgent.match(regExp);
51

52
  if (!match || match.length < 3) {
53
    return {
54
      browser: 'unknown',
55
      version: '0.0'
56
    };
57
  }
58

59
  // 特殊处理Safari浏览器（Safari使用'version'而不是'safari'标识）
60
  const browser = match[1] === 'version' ? 'safari' : match[1];
61

62
  return {
63
    browser,
64
    version: match[2]
65
  };
66
};

1
/**
2
 * 检查DOM元素是否包含指定的类名
3
 *
4
 * @param {RefType<any>} ele - 要检查的DOM元素
5
 * @param {string} cls - 要检查的类名
6
 * @returns {boolean} 如果元素包含指定类名则返回true，否则返回false
7
 *
8
 * @example
9
 * if (hasClass(element, 'active')) {
10
 *   // 元素包含'active'类的处理逻辑
11
 * }
12
 */
13
export const hasClass = (ele: RefType<any>, cls: string): boolean => {
14
  if (!ele || !ele.className || typeof ele.className !== 'string') return false;
15
  return new RegExp("(\\s|^)" + cls + "(\\s|$)").test(ele.className);
16
};
17

18
/**
19
 * 为DOM元素添加一个或两个类名
20
 *
21
 * @param {RefType<any>} ele - 要添加类名的DOM元素
22
 * @param {string} cls - 要添加的主要类名
23
 * @param {string} [extracls] - 可选的额外类名
24
 * @returns {void}
25
 *
26
 * @example
27
 * addClass(element, 'active');
28
 * addClass(element, 'primary', 'large');
29
 */
30
export const addClass = (
31
  ele: RefType<any>,
32
  cls: string,
33
  extracls?: string
34
): void => {
35
  if (!ele || !cls) return;
36

37
  if (!hasClass(ele, cls)) {
38
    ele.className = ele.className ? `${ele.className} ${cls}` : cls;
39
  }
40

41
  if (extracls && !hasClass(ele, extracls)) {
42
    ele.className = `${ele.className} ${extracls}`;
43
  }
44
};
45

46
/**
47
 * 从DOM元素移除一个或两个类名
48
 *
49
 * @param {RefType<any>} ele - 要移除类名的DOM元素
50
 * @param {string} cls - 要移除的主要类名
51
 * @param {string} [extracls] - 可选的额外要移除的类名
52
 * @returns {void}
53
 *
54
 * @example
55
 * removeClass(element, 'active');
56
 * removeClass(element, 'primary', 'large');
57
 */
58
export const removeClass = (
59
  ele: RefType<any>,
60
  cls: string,
61
  extracls?: string
62
): void => {
63
  if (!ele || !ele.className || !cls) return;
64

65
  if (hasClass(ele, cls)) {
66
    const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
67
    ele.className = ele.className.replace(reg, " ").trim();
68
  }
69

70
  if (extracls && hasClass(ele, extracls)) {
71
    const regs = new RegExp("(\\s|^)" + extracls + "(\\s|$)");
72
    ele.className = ele.className.replace(regs, " ").trim();
73
  }
74
};
75

76
/**
77
 * 根据条件切换DOM元素的类名
78
 *
79
 * @param {boolean} flag - 决定是否添加类名的标志，true添加，false移除
80
 * @param {string} clsName - 要切换的类名
81
 * @param {RefType<any>} [target] - 目标DOM元素，默认为document.body
82
 * @returns {void}
83
 *
84
 * @example
85
 * // 根据darkMode变量切换body上的dark-theme类
86
 * toggleClass(darkMode, 'dark-theme');
87
 * // 切换特定元素的visible类
88
 * toggleClass(isVisible, 'visible', menuElement);
89
 */
90
export const toggleClass = (
91
  flag: boolean,
92
  clsName: string,
93
  target?: RefType<any>
94
): void => {
95
  if (!clsName) return;
96

97
  const targetEl = target || document.body;
98
  if (!targetEl) return;
99

100
  // 首先移除类名
101
  let { className } = targetEl;
102
  const reg = new RegExp("(\\s|^)" + clsName + "(\\s|$)");
103
  className = className.replace(reg, " ").trim();
104

105
  // 根据flag决定是否重新添加
106
  targetEl.className = flag ? `${className} ${clsName}` : className;
107
};

1
/**
2
 * 创建一个使用requestAnimationFrame实现的节流函数
3
 *
4
 * 该函数确保回调在每个动画帧内最多执行一次，适用于滚动、调整大小等高频事件处理
5
 *
6
 * @template T - 任意函数类型
7
 * @param {T} fn - 需要节流的原始函数
8
 * @returns {T} 节流处理后的函数
9
 *
10
 * @example
11
 * // 创建一个节流的滚动处理函数
12
 * const throttledScroll = useRafThrottle(() => {
13
 *   console.log(window.scrollY);
14
 * });
15
 *
16
 * // 添加滚动事件监听
17
 * window.addEventListener('scroll', throttledScroll);
18
 */
19
import type { FunctionArgs } from "@vueuse/core";
20

21
export function useRafThrottle<T extends FunctionArgs>(fn: T): T {
22
  let locked = false;
23

24
  // @ts-ignore
25
  return function (...args) {
26
    if (locked) return;
27

28
    locked = true;
29
    window.requestAnimationFrame(() => {
30
      fn.apply(this, args);
31
      locked = false;
32
    });
33
  };
34
}

1
/**
2
 * ResizeObserver的回调处理函数
3
 * 处理元素大小变化事件，并触发所有注册的监听函数
4
 *
5
 * @param {ResizeObserverEntry[]} entries - ResizeObserver提供的条目数组
6
 * @private
7
 */
8
const resizeHandler = function (entries: ResizeObserverEntry[]): void {
9
  for (const entry of entries) {
10
    const listeners = entry.target.__resizeListeners__ || [];
11
    if (listeners.length) {
12
      listeners.forEach(fn => {
13
        fn();
14
      });
15
    }
16
  }
17
};

1
/**
2
 * 为DOM元素添加大小变化监听器
3
 *
4
 * 使用ResizeObserver监听元素大小变化，当元素大小变化时触发回调函数
5
 *
6
 * @param {HTMLElement} element - 要监听大小变化的DOM元素
7
 * @param {Function} fn - 元素大小变化时调用的回调函数
8
 * @returns {void}
9
 *
10
 * @example
11
 * // 监听容器大小变化并更新图表
12
 * addResizeListener(chartContainer, () => {
13
 *   chart.resize();
14
 * });
15
 */
16
export const addResizeListener = function (element: any, fn: () => void): void {
17
  if (isServer || !element) return;
18

19
  // 初始化元素上的监听器数组
20
  if (!element.__resizeListeners__) {
21
    element.__resizeListeners__ = [];
22

23
    // 创建ResizeObserver实例并开始观察元素
24
    element.__ro__ = new ResizeObserver(resizeHandler);
25
    element.__ro__.observe(element);
26
  }
27

28
  // 避免重复添加相同的监听器
29
  if (element.__resizeListeners__.indexOf(fn) === -1) {
30
    element.__resizeListeners__.push(fn);
31
  }
32
};
33

34
/**
35
 * 移除DOM元素上的大小变化监听器
36
 *
37
 * 如果移除后元素上没有其他监听器，则停止对该元素的观察
38
 *
39
 * @param {HTMLElement} element - 要移除监听器的DOM元素
40
 * @param {Function} fn - 要移除的特定监听器函数
41
 * @returns {void}
42
 *
43
 * @example
44
 * // 移除之前添加的监听器
45
 * removeResizeListener(chartContainer, updateChart);
46
 */
47
export const removeResizeListener = function (element: any, fn: () => void): void {
48
  if (isServer || !element || !element.__resizeListeners__) return;
49

50
  // 查找并移除特定监听器
51
  const index = element.__resizeListeners__.indexOf(fn);
52
  if (index !== -1) {
53
    element.__resizeListeners__.splice(index, 1);
54
  }
55

56
  // 如果没有剩余监听器，停止观察并清理
57
  if (!element.__resizeListeners__.length && element.__ro__) {
58
    element.__ro__.disconnect();
59
    element.__ro__ = null;
60
  }
61
};

1
/**
2
 * Web存储代理接口
3
 * 定义了存储操作的标准方法集
4
 */
5
interface ProxyStorage {
6
  /**
7
   * 获取存储项
8
   * @param {string} key - 存储项的键
9
   * @returns {any} 存储的值
10
   */
11
  getItem(key: string): any;
12

13
  /**
14
   * 设置存储项
15
   * @param {string} key - 存储项的键
16
   * @param {string} value - 要存储的值
17
   */
18
  setItem(key: string, value: string): void;
19

20
  /**
21
   * 移除存储项
22
   * @param {string} key - 要移除的存储项的键
23
   */
24
  removeItem(key: string): void;
25

26
  /**
27
   * 清除所有存储项
28
   */
29
  clear(): void;
30
}
31

32
/**
33
 * sessionStorage操作代理类
34
 * 提供对sessionStorage的操作封装，支持存取JSON对象
35
 */
36
class SessionStorageProxy implements ProxyStorage {
37
  /**
38
   * 被代理的存储对象
39
   * @protected
40
   */
41
  protected storage: ProxyStorage;
42

43
  /**
44
   * 构造函数
45
   * @param {ProxyStorage} storageModel - 被代理的存储对象
46
   */
47
  constructor(storageModel: ProxyStorage) {
48
    this.storage = storageModel;
49
  }
50

51
  /**
52
   * 存储数据，自动将对象转换为JSON字符串
53
   * @param {string} key - 存储项的键
54
   * @param {any} value - 要存储的值，可以是任意类型
55
   */
56
  public setItem(key: string, value: any): void {
57
    if (key === undefined || key === null || key === '') {
58
      throw new Error('Storage key cannot be empty');
59
    }
60

61
    try {
62
      const valueStr = typeof value === 'object'
63
        ? JSON.stringify(value)
64
        : String(value);
65
      this.storage.setItem(key, valueStr);
66
    } catch (error) {
67
      console.error('Failed to store item:', error);
68
    }
69
  }
70

71
  /**
72
   * 获取数据，自动将JSON字符串转换回对象
73
   * @param {string} key - 存储项的键
74
   * @returns {any} 解析后的存储值，如果项不存在或解析失败则返回null
75
   */
76
  public getItem(key: string): any {
77
    if (key === undefined || key === null || key === '') {
78
      return null;
79
    }
80

81
    try {
82
      const value = this.storage.getItem(key);
83
      if (value === null || value === undefined) {
84
        return null;
85
      }
86
      return JSON.parse(value);
87
    } catch (error) {
88
      console.warn(`Error parsing stored item ${key}:`, error);
89
      return this.storage.getItem(key);
90
    }
91
  }
92

93
  /**
94
   * 移除指定的存储项
95
   * @param {string} key - 要移除的存储项的键
96
   */
97
  public removeItem(key: string): void {
98
    if (key) {
99
      this.storage.removeItem(key);
100
    }
101
  }
102

103
  /**
104
   * 清除所有存储项
105
   */
106
  public clear(): void {
107
    this.storage.clear();
108
  }
109
}
110

111
/**
112
 * localStorage操作代理类
113
 * 提供对localStorage的操作封装，继承自SessionStorageProxy
114
 */
115
class LocalStorageProxy extends SessionStorageProxy implements ProxyStorage {
116
  /**
117
   * 构造函数
118
   * @param {ProxyStorage} localStorage - 被代理的localStorage对象
119
   */
120
  constructor(localStorage: ProxyStorage) {
121
    super(localStorage);
122
  }
123
}
124

125
/**
126
 * sessionStorage实例
127
 * 用于操作浏览器的会话存储
128
 * 页面会话结束时数据会被清除
129
 *
130
 * @example
131
 * // 存储数据
132
 * storageSession.setItem('user', { name: 'John', age: 30 });
133
 *
134
 * // 获取数据
135
 * const user = storageSession.getItem('user');
136
 *
137
 * // 删除数据
138
 * storageSession.removeItem('user');
139
 */
140
export const storageSession = new SessionStorageProxy(sessionStorage);
141

142
/**
143
 * localStorage实例
144
 * 用于操作浏览器的本地存储
145
 * 数据永久保存，除非被显式清除
146
 *
147
 * @example
148
 * // 存储数据
149
 * storageLocal.setItem('theme', 'dark');
150
 *
151
 * // 获取数据
152
 * const theme = storageLocal.getItem('theme');
153
 *
154
 * // 删除数据
155
 * storageLocal.removeItem('theme');
156
 */
157
export const storageLocal = new LocalStorageProxy(localStorage);

1
import Cookies from "js-cookie";
2

3
import useUserStoreHook from "/@/store/modules/user";
4

5
/**
6
 * 认证令牌的Cookie键名
7
 * 用于存储和获取认证令牌
8
 */
9
const TokenKey = "Admin-Token";
10

11
/**
12
 * 获取当前用户的认证令牌
13
 *
14
 * 从Cookie中读取存储的令牌
15
 *
16
 * @returns {string | undefined} 用户认证令牌，如果未登录则返回undefined
17
 *
18
 * @example
19
 * const token = getToken();
20
 * if (token) {
21
 *   // 用户已登录
22
 * } else {
23
 *   // 用户未登录，重定向到登录页
24
 * }
25
 */
26
export function getToken(): string | undefined {
27
  return Cookies.get(TokenKey);
28
}
29

30
/**
31
 * 设置用户认证令牌
32
 *
33
 * 将认证令牌存储到Cookie中，同时更新Vuex存储的状态
34
 *
35
 * @param {object} data - 包含令牌信息的对象
36
 * @param {string} data.token - 用户认证令牌
37
 * @returns {void}
38
 *
39
 * @example
40
 * // 登录成功后设置令牌
41
 * setToken({ token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' });
42
 */
43
export function setToken(data: { token: string }): void {
44
  if (!data || typeof data !== 'object') {
45
    console.error('Invalid token data provided');
46
    return;
47
  }
48

49
  const { token: accessToken } = data;
50

51
  if (!accessToken) {
52
    console.error('No access token provided');
53
    return;
54
  }
55

56
  // store 里面保存 token 的方法 更新Vuex存储的令牌状态
57
  useUserStoreHook().SET_TOKEN(accessToken);
58

59
  // 存储令牌到Cookie
60
  // 注意：这里没有设置过期时间，使用默认的会话Cookie
61
  Cookies.set(TokenKey, accessToken);
62
}
63

64
/**
65
 * 移除用户认证令牌
66
 *
67
 * 从Cookie中删除存储的令牌，通常在用户登出时调用
68
 *
69
 * @returns {void}
70
 *
71
 * @example
72
 * // 用户登出
73
 * removeToken();
74
 * router.push('/login');
75
 */
76
export function removeToken(): void {
77
  Cookies.remove(TokenKey);
78
}

1
/**
2
 * 环境变量工具模块
3
 * 用于访问和加载Vite应用的环境变量
4
 */
5

6
/**
7
 * 加载应用的环境变量
8
 *
9
 * 从Vite的import.meta.env中获取当前应用的所有环境变量。
10
 * 环境变量通常在.env文件中定义，并在构建时由Vite处理。
11
 *
12
 * @returns {ViteEnv} 包含所有环境变量的对象
13
 *
14
 * @example
15
 * // 获取所有环境变量
16
 * const env = loadEnv();
17
 * console.log('当前模式:', env.MODE);
18
 * console.log('API基础URL:', env.VITE_API_BASE_URL);
19
 *
20
 * // 也可以直接解构需要的环境变量
21
 * const { VITE_APP_TITLE, VITE_API_BASE_URL } = loadEnv();
22
 */
23
export const loadEnv = (): ViteEnv => {
24
  try {
25
    // 确保我们在浏览器环境中
26
    if (typeof import.meta.env === 'undefined') {
27
      console.warn('环境变量不可用，可能不在Vite环境中运行');
28
      return {} as ViteEnv;
29
    }
30

31
    return import.meta.env;
32
  } catch (error) {
33
    console.error('加载环境变量时发生错误:', error);
34
    return {} as ViteEnv;
35
  }
36
};