@peng_kai/kit 0.3.0-beta.14 → 0.3.0-beta.15

package/admin/components/date/helpers.ts

@@ -1,6 +1,6 @@
 import dayjs, { type Dayjs } from '../../../libs/dayjs';
 import { tryOnScopeDispose } from '@vueuse/core';
-import { computed, reactive, watch, ref, type Ref } from 'vue';
+import { computed, reactive, watch, customRef, type Ref } from 'vue';
 import type { Simplify } from 'type-fest';
 
 /**
@@ -11,7 +11,27 @@ export function getTtaTimeZone() {
   const win = window as any;
   const key = '__APP_TZ__';
 
-  return (win[key] || (win[key] = ref(dayjs.tz.guess()))) as Ref<string>;
+  if (!win[key]) {
+    win[key] = customRef<string>((track, trigger) => {
+      return {
+        get() {
+          let value = localStorage.getItem(key);
+          if (!value) {
+            value = dayjs.tz.guess();
+            localStorage.setItem(key, value);
+          }
+          track();
+          return value;
+        },
+        set(newValue: string) {
+          localStorage.setItem(key, newValue);
+          trigger();
+        }
+      }
+    })
+  }
+
+  return win[key] as Ref<string>;
 }
 
 /**
@@ -41,6 +61,15 @@ export const onTtaTimeZone = (() => {
   }
 })();
 
+export function standardizeTzParam(tz: string) {
+  if (tz === 'APP') {
+    return getTtaTimeZone().value;
+  } else if (tz === 'LOCAL') {
+    return dayjs.tz.guess();
+  }
+  return tz;
+}
+
 type OfDayType = dayjs.Dayjs | undefined | null;
 type UnitType = dayjs.QUnitType | dayjs.OpUnitType;
 export const datetime = {
@@ -48,29 +77,29 @@ export const datetime = {
    * 将日期范围转换为 API 参数格式的时间戳范围
    * @param days 时间范围元组，包含开始和结束时间
    * @param unit 时间单位，默认为 'day'
-   * @param useAppTz 是否使用时区，默认为 true
+   * @param tz 时区字符串，默认为 'APP'（应用时区）。特殊值：UTC、LOCAL、APP
    * @param keys 可选的键名元组，默认为 ['start_time', 'end_time']
    * @returns 返回一个对象，包含开始和结束时间的时间戳
    */
   toRangeForApiParams<KS extends readonly [string, string] = ['start_time', 'end_time']>(
     days: Array<OfDayType | undefined | null> | undefined | null,
-    unit: UnitType = 'day', 
-    useAppTz: boolean = true,
+    unit: UnitType = 'day',
+    tz: string = 'APP',
     keys?: KS
   ) {
     if (!days || !days[0] || !days[1])
       return undefined;
 
-    const tz = useAppTz ? getTtaTimeZone().value : dayjs.tz.guess();
+    const _tz = standardizeTzParam(tz);
     const _keys = (Array.isArray(keys) && keys?.length > 1) ? keys : ['start_time', 'end_time'];
 
     type RetType = KS extends readonly [string, string]
-      ? Simplify<{ [K in KS[0]]: number } & { [K in KS[1]]: number }> 
+      ? Simplify<{ [K in KS[0]]: number } & { [K in KS[1]]: number }>
       : { start_time: number; end_time: number };
 
     return {
-      [_keys[0]]: dayjs(days[0].valueOf()).tz(tz).startOf(unit).valueOf(),
-      [_keys[1]]: dayjs(days[1].valueOf()).tz(tz).endOf(unit).valueOf(),
+      [_keys[0]]: dayjs(days[0].valueOf()).tz(_tz).startOf(unit).valueOf(),
+      [_keys[1]]: dayjs(days[1].valueOf()).tz(_tz).endOf(unit).valueOf(),
     } as RetType;
   },
   /**
@@ -80,21 +109,19 @@ export const datetime = {
    * @return 返回一个包含开始和结束时间的元组，格式为 dayjs 对象
    */
   toRangeForForm(
-    days: Array<OfDayType | string | undefined | null>,
-    defaultRangeUnit?: UnitType, 
+    days: Array<OfDayType | string | number | undefined | null>,
+    defaultRangeUnit?: UnitType,
   ) {
     const getDefaultRange = () => {
       const now = dayjs();
-      return defaultRangeUnit 
-        ? [now.startOf(defaultRangeUnit), now.endOf(defaultRangeUnit)] as [dayjs.Dayjs, dayjs.Dayjs] 
+      return defaultRangeUnit
+        ? [now.startOf(defaultRangeUnit), now.endOf(defaultRangeUnit)] as [dayjs.Dayjs, dayjs.Dayjs]
         : undefined;
     }
 
     if (!days || !days[0] || !days[1])
       return getDefaultRange();
 
-    // const sDay = dayjs(typeof days[0] === 'string' ? Number(days[0]) : days[0].valueOf());
-    // const eDay = dayjs(typeof days[1] === 'string' ? Number(days[1]) : days[1].valueOf());
     const [sDay, eDay] = days.map(d => dayjs(typeof d === 'string' ? Number(d) : d?.valueOf()));
 
     if (!sDay.isValid() || !eDay.isValid())
@@ -106,34 +133,34 @@ export const datetime = {
    * 获取指定日期的开始时间
    * @param unit 时间单位
    * @param day 日期对象
-   * @param useAppTz 是否使用应用时区，默认为 true
+   * @param tz 时区字符串，默认为 'APP'（应用时区）。特殊值：UTC、LOCAL、APP
    * @returns 返回指定日期的开始时间，格式为 dayjs 对象
    */
-  ofStart(unit: UnitType, day: OfDayType, useAppTz = true) {
+  ofStart(unit: UnitType, day: OfDayType, tz: string = 'APP') {
     if (!day)
       return undefined;
 
-    const tz = useAppTz ? getTtaTimeZone().value : dayjs.tz.guess();
-    return dayjs(day.valueOf()).tz(tz).startOf(unit);
+    const _tz = standardizeTzParam(tz);
+    return dayjs(day.valueOf()).tz(_tz).startOf(unit);
   },
   /**
    * 获取指定日期的结束时间
    * @param unit 时间单位
    * @param day 日期对象
-   * @param useAppTz 是否使用应用时区，默认为 true
+   * @param tz 时区字符串，默认为 'APP'（应用时区）。特殊值：UTC、LOCAL、APP
    * @returns 返回指定日期的结束时间，格式为 dayjs 对象
    */
-  ofEnd(unit: UnitType, day: OfDayType, useAppTz = true) {
+  ofEnd(unit: UnitType, day: OfDayType, tz: string = 'APP') {
     if (!day)
       return undefined;
 
-    const tz = useAppTz ? getTtaTimeZone().value : dayjs.tz.guess();
-    return dayjs(day.valueOf()).tz(tz).endOf(unit);
+    const _tz = standardizeTzParam(tz);
+    return dayjs(day.valueOf()).tz(_tz).endOf(unit);
   },
 }
 
 /** 为 DatePicker 组件提供响应式时区支持，当时区更新时，自动调整时间戳 */
-export function useDatePickerPropsForTz(
+function useDatePickerPropsForTz(
   value: Ref<Dayjs | undefined>,
   props: {
     createPresets?: (day: Dayjs) => { label: string; value: Dayjs }[];
@@ -167,7 +194,7 @@ export function useDatePickerPropsForTz(
   });
 }
 
-export function useRangePickerPropsForTz(
+function useRangePickerPropsForTz(
   value: Ref<[string, string] | [Dayjs, Dayjs] | undefined>,
   props: {
     createPresets?: (day: Dayjs) => { label: string; value: Dayjs[] }[];
@@ -192,86 +219,22 @@ export function useRangePickerPropsForTz(
       { label: '近30天', value: [day.subtract(29, 'day').startOf('day'), day.endOf('day')] },
     ];
   };
-  const nowDay = computed(() => dayjs().tz(_tz.value));
   const _value = computed(() => {
     const v = value.value;
     if (v && v[0] && v[1]) {
       return [
-        dayjs(v[0].valueOf()).tz(_tz.value),
-        dayjs(v[1].valueOf()).tz(_tz.value),
+        dayjs(v[0].valueOf()),
+        dayjs(v[1].valueOf()),
       ] as [Dayjs, Dayjs];
     }
     return undefined;
   });
 
-  watch(_tz, (newV, oldV) => {
-    const v = value.value;
-    if (!v || !v[0] || !v[1]) return;
-
-    const newTzOffset = dayjs().tz(newV).utcOffset();
-    const oldTzOffset = dayjs().tz(oldV).utcOffset();
-    value.value = [
-      dayjs(v[0].valueOf()).add((oldTzOffset - newTzOffset) * 60 * 1000),
-      dayjs(v[1].valueOf()).add((oldTzOffset - newTzOffset) * 60 * 1000),
-    ]
-  });
-
   return reactive({
     'value': _value,
-    'onUpdate:value': (newVal: any) => value.value = newVal,
-    'presets': computed(() => props.createPresets!(nowDay.value)),
+    'onUpdate:value': (v: any) => value.value = v,
+    'presets': computed(() => props.createPresets!(dayjs())),
+    // showTime: computed(() => ({ defaultValue: [dayjs().startOf('day'), dayjs().endOf('day')] })),
+    format: 'YY-MM-DD HH:mm:ss'
   });
 };
-
-/** 为 RangePicker 组件提供响应式时区支持，当时区更新时，自动调整时间戳 */
-export function useRangePickerPropsForTz_old(
-  ts: [Ref<number | undefined>, Ref<number | undefined>],
-  props: {
-    createPresets?: (day: Dayjs) => { label: string; value: Dayjs[] }[];
-  } = {},
-  tz?: Ref<string>,
-) {
-  // 默认值
-  props.createPresets ??= (day: Dayjs) => {
-    return [
-      { label: '今天', value: [day.startOf('day'), day.endOf('day')] },
-      { label: '昨天', value: [day.subtract(1, 'day').startOf('day'), day.subtract(1, 'day').endOf('day')] },
-      { label: '前一天', value: [day.subtract(1, 'day').startOf('day'), day.subtract(1, 'day').endOf('day')] },
-      { label: '后一天', value: [day.add(1, 'day').startOf('day'), day.add(1, 'day').endOf('day')] },
-      { label: '本周', value: [day.startOf('week'), day.endOf('week')] },
-      { label: '上周', value: [day.subtract(1, 'week').startOf('week'), day.subtract(1, 'week').endOf('week')] },
-      { label: '本月', value: [day.startOf('month'), day.endOf('month')] },
-      { label: '上个月', value: [day.subtract(1, 'month').startOf('month'), day.subtract(1, 'month').endOf('month')] },
-      { label: '上上月', value: [day.subtract(2, 'month').startOf('month'), day.subtract(2, 'month').endOf('month')] },
-      { label: '近7天', value: [day.subtract(6, 'day').startOf('day'), day.endOf('day')] },
-      { label: '近30天', value: [day.subtract(29, 'day').startOf('day'), day.endOf('day')] },
-    ];
-  };
-  const _tz = tz || getTtaTimeZone();
-  const nowDay = computed(() => dayjs().tz(_tz.value));
-  const inputDay = computed(() => {
-    console.log('🤡 / ts:', ts);
-    if (ts[0].value && ts[1].value)
-      return [dayjs(ts[0].value).tz(_tz.value), dayjs(ts[1].value).tz(_tz.value)] as [Dayjs, Dayjs];
-    return undefined;
-  });
-
-  watch(_tz, (newV, oldV) => {
-    if (!ts[0].value || !ts[1].value) return;
-
-    const newTzOffset = dayjs().tz(newV).utcOffset();
-    const oldTzOffset = dayjs().tz(oldV).utcOffset();
-    ts[0].value = ts[0].value + (oldTzOffset - newTzOffset) * 60 * 1000;
-    ts[1].value = ts[1].value + (oldTzOffset - newTzOffset) * 60 * 1000;
-  })
-
-  return reactive({
-    'value': inputDay,
-    'onUpdate:value': (value: any) => {
-      console.log('🤡 / value:', value);
-      ts[0].value = dayjs(value[0]).valueOf();
-      ts[1].value = dayjs(value[1]).valueOf();
-    },
-    'presets': computed(() => props.createPresets!(nowDay.value)),
-  });
-};

package/admin/components/date/index.ts

@@ -1,4 +1,5 @@
 export { default as TimeFieldSelectForLabel } from './TimeFieldSelectForLabel.vue';
 export { default as TtaTimeZone } from './TtaTimeZone.vue';
 export { default as PeriodPicker } from './PeriodPicker.vue';
-export { useDatePickerPropsForTz, useRangePickerPropsForTz, getTtaTimeZone, onTtaTimeZone, datetime } from './helpers';
+export { getTtaTimeZone, onTtaTimeZone, datetime } from './helpers';
+export { antdRangePickerPresets, antdRangePickerShowTimeProps } from './presetProps';

package/admin/components/date/presetProps.ts

@@ -0,0 +1,23 @@
+import { type RangePicker } from 'ant-design-vue';
+import dayjs, { type Dayjs } from '../../../libs/dayjs';
+import { type ComponentProps } from 'vue-component-type-helpers'
+
+export const  antdRangePickerPresets = [
+  { label: '今天', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
+  { label: '昨天', value: [dayjs().subtract(1, 'day').startOf('day'), dayjs().subtract(1, 'day').endOf('day')] },
+  { label: '前一天', value: [dayjs().subtract(1, 'day').startOf('day'), dayjs().subtract(1, 'day').endOf('day')] },
+  { label: '后一天', value: [dayjs().add(1, 'day').startOf('day'), dayjs().add(1, 'day').endOf('day')] },
+  { label: '本周', value: [dayjs().startOf('week'), dayjs().endOf('week')] },
+  { label: '上周', value: [dayjs().subtract(1, 'week').startOf('week'), dayjs().subtract(1, 'week').endOf('week')] },
+  { label: '本月', value: [dayjs().startOf('month'), dayjs().endOf('month')] },
+  { label: '上个月', value: [dayjs().subtract(1, 'month').startOf('month'), dayjs().subtract(1, 'month').endOf('month')] },
+  { label: '上上月', value: [dayjs().subtract(2, 'month').startOf('month'), dayjs().subtract(2, 'month').endOf('month')] },
+  { label: '近7天', value: [dayjs().subtract(6, 'day').startOf('day'), dayjs().endOf('day')] },
+  { label: '近30天', value: [dayjs().subtract(29, 'day').startOf('day'), dayjs().endOf('day')] },
+] as { label: string; value: [Dayjs, Dayjs] }[]
+
+export const antdRangePickerShowTimeProps: ComponentProps<typeof RangePicker> = {
+  presets: antdRangePickerPresets,
+  showTime: { defaultValue: [dayjs().startOf('day'), dayjs().endOf('day')] },
+  format: 'YY-MM-DD HH:mm:ss'
+}

package/admin/components/provider/admin-router.ts

@@ -39,7 +39,7 @@ const PageRefresh = defineComponent({
   mounted() {
     const { router } = this.$props;
     const fullPath = router.currentRoute.value.fullPath;
-     router.replace({ ...router.resolve(fullPath),  force: true });
+    router.replace({ ...router.resolve(fullPath),  force: true });
   },
   setup() {
     return () => null;

package/admin/components/text/src/Datetime.vue

@@ -20,6 +20,7 @@ const props = withDefaults(
 );
 
 const tz = getTtaTimeZone();
+const localTz = dayjs.tz.guess();
 const timestamp = computed(() => {
   let tsStr = String(props.ts || props.timestamp);
 
@@ -49,7 +50,7 @@ const text = computed(() => {
         <span class="op-50">指定</span>
       </div>
       <div>
-        {{ dayjs(timestamp).tz(tz).format('YYYY-MM-DD HH:mm:ss') }}
+        {{ dayjs(timestamp).tz(localTz).format('YYYY-MM-DD HH:mm:ss') }}
         <span class="op-50">本地</span>
       </div>
       <div v-if="dayjs().utc">

package/admin/layout/large/Content.vue

@@ -5,13 +5,18 @@ import { KeepAlive, type KeepAliveProps } from 'vue';
 const props = defineProps<{
   cached: KeepAliveProps['include']
 }>();
+
+function side(comp: any) {
+  console.log('🤡 / side / comp:', comp)
+  return comp;
+}
 </script>
 
 <template>
   <RouterView #default="{ Component }">
     <KeepAlive :include="props.cached">
       <Suspense>
-        <component :is="Component" />
+        <component :is="Component" :key="$route.fullPath" />
         <template #fallback>
           <div class="flex justify-center items-center h-full">
             <div class="flex items-center">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.3.0-beta.14",
+  "version": "0.3.0-beta.15",
   "description": "",
   "author": "",
   "license": "ISC",

package/utils/locale/helpers.ts

@@ -1,3 +1,4 @@
+import type { I18nOptions } from 'vue-i18n';
 import { omitBy } from '../../libs/lodash-es';
 
 /**
@@ -32,6 +33,14 @@ export function omitLocale(modules: Record<string, any>, excludes: string[] = []
   return omitBy(modules, (_, path) => excludes.some(locale => path.includes(locale)));
 }
 
+/** 添加语言格式 */
+export function addDatetimeFormat<T extends string>(name: T, config: NonNullable<I18nOptions['datetimeFormats']>[string][string]) {
+  return {
+    [name]: config,
+    [`${name}-utc`]: { ...config, timeZone: 'UTC' },
+  } as Record<T | `${T}-utc`, typeof config>;
+}
+
 /**
  * 加密 JSON 消息
  */

package/vue/components/test/KitTest.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { useTestStore } from './testStore';
-
-useTestStore();
-</script>
-
-<template>
-  <div>123</div>
-</template>

package/vue/components/test/testStore.ts

@@ -1,11 +0,0 @@
-import { useQueryClient } from '@tanstack/vue-query';
-import { defineStore } from 'pinia';
-import { useRouter } from 'vue-router';
-
-export const useTestStore = defineStore('test-store', () => {
-  const router = useRouter();
-  const queryClient = useQueryClient();
-  console.log('🤡 / router:', router);
-  console.log('🤡 / queryClient:', queryClient);
-  return {};
-});