@peng_kai/kit 0.2.3 → 0.2.4

package/libs/dayjs.ts

@@ -1,6 +1,8 @@
 import dayjs from 'dayjs/esm';
 
 import relativeTime from 'dayjs/esm/plugin/relativeTime';
+import weekday from 'dayjs/esm/plugin/weekday';
+import localeData from 'dayjs/esm/plugin/localeData';
 import 'dayjs/esm/locale/zh';
 import 'dayjs/esm/locale/en';
 
@@ -9,3 +11,5 @@ export default dayjs;
 
 dayjs.locale('zh');
 dayjs.extend(relativeTime);
+dayjs.extend(weekday);
+dayjs.extend(localeData);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "",
   "author": "",
   "license": "ISC",
@@ -25,6 +25,7 @@
     "@babel/traverse": "^7.24.0",
     "@babel/types": "^7.24.0",
     "@ckeditor/ckeditor5-vue": "^5.1.0",
+    "@fingerprintjs/fingerprintjs": "^4.2.2",
     "@tanstack/vue-query": "^5.25.0",
     "@vueuse/components": "^10.9.0",
     "@vueuse/core": "^10.9.0",

package/request/interceptors/getDeviceInfo.ts

@@ -0,0 +1,31 @@
+import type { AxiosInterceptorManager } from 'axios';
+import FingerprintJS from '@fingerprintjs/fingerprintjs';
+import type { GetResult } from '@fingerprintjs/fingerprintjs';
+
+/**
+ * 【请求拦截器】检索设备信息并在请求中设置“Device”头。
+ * @param callback - 一个回调函数，接受基本设备信息和完整设备信息作为参数，并返回一个字符串。
+ */
+export function getDeviceInfo(callback: (base: Record<string, any>, all: GetResult) => string): Parameters<AxiosInterceptorManager<any>['use']> {
+  const fpPromise = FingerprintJS.load();
+
+  return [
+    async (req) => {
+      const fp = await fpPromise;
+      const result: any = await fp.get();
+      const base = {
+        languages: result.components.languages.value?.join(','),
+        platform: result.components.platform.value,
+        screen_rolution: result.components.screenResolution.value?.join('x'),
+        timezone: result.components.timezone.value,
+        vendor: result.components.vendor.value,
+        vendor_flavors: result.components.vendorFlavors.value?.join(','),
+        visitor_id: result.visitorId,
+      };
+
+      req.headers.set('Device', callback(base, result));
+
+      return req;
+    },
+  ];
+}

package/request/interceptors/index.ts

@@ -5,6 +5,7 @@ export { checkCode } from './checkCode';
 export { formatPaging } from './formatPaging';
 export { filterEmptyValue } from './filterEmptyValue';
 export { toLogin } from './toLogin';
+export { getDeviceInfo } from './getDeviceInfo';
 
 declare module 'axios' {
   interface AxiosRequestConfig {

package/utils/date.ts

@@ -20,6 +20,34 @@ export function endOfDay(day: dayjs.ConfigType) {
   return _day.isValid() ? _day.endOf('day').valueOf() : undefined;
 }
 
+/**
+ * 将一个值转换为 Day.js 实例。
+ * @param day - 要转换的值。
+ * @returns 表示给定值的 Day.js 实例。
+ */
+export function toDayjs(day: dayjs.ConfigType) {
+  if (typeof day === 'number' || typeof day === 'string') {
+    const tsStr = day.toString();
+    const tsNum = Number(tsStr.length === 10 ? `${tsStr}000` : tsStr);
+    return dayjs(tsNum);
+  }
+  else {
+    return dayjs(day);
+  }
+}
+
+/**
+ * 将给定的日期转换为10位时间戳。
+ * @param day - 要转换的日期。
+ * @returns 10位时间戳。
+ */
+export function to10Timestamp(day: dayjs.ConfigType) {
+  const _day = toDayjs(day);
+  const ts10 = Math.floor(_day.valueOf() / 1000);
+
+  return ts10;
+}
+
 /**
  * 将秒数转换为时长格式化时间
  * @param seconds 秒数

package/vue/hooks/useTemplateRefs.ts

@@ -0,0 +1,24 @@
+import { type Component, reactive } from 'vue';
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import { makeDestructurable } from '@vueuse/core';
+
+export function useTemplateRefs<T extends Record<string, Component | HTMLElement>>() {
+  type TK = keyof T;
+  type TI = {
+    [K in TK]?: T[K] extends Component ? ComponentExposed<T[K]> : T[K]
+  };
+
+  const refs = reactive({} as TI);
+  const setRefs = new Proxy({} as { [K in TK]: (t: any) => void }, {
+    get(_, p: any) {
+      return (t: any) => {
+        (refs as any)[p] = t ?? undefined;
+      };
+    },
+  });
+
+  return makeDestructurable(
+    { refs, setRefs } as const,
+    [refs, setRefs] as const,
+  );
+}

package/vue/index.ts

@@ -1,4 +1,5 @@
 export { useComponentRef } from './hooks/useComponentRef';
+export { useTemplateRefs } from './hooks/useTemplateRefs';
 export { useTeleportTarget, createTeleportSelectors } from './hooks/useTeleportTarget';
 export { useIsMounted } from './hooks/useIsMounted';
 export { useIsDark } from './hooks/useIsDark';