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

package/admin/components/date/helpers.ts

@@ -3,6 +3,10 @@ import { tryOnScopeDispose } from '@vueuse/core';
 import { computed, reactive, watch, ref, type Ref } from 'vue';
 import type { Simplify } from 'type-fest';
 
+/**
+ * 获取应用的时区，默认使用浏览器的时区
+ * @returns 返回一个响应式的时区字符串
+ */
 export function getTtaTimeZone() {
   const win = window as any;
   const key = '__APP_TZ__';
@@ -10,6 +14,9 @@ export function getTtaTimeZone() {
   return (win[key] || (win[key] = ref(dayjs.tz.guess()))) as Ref<string>;
 }
 
+/**
+ * 监听应用的时区变化的函数
+ */
 export const onTtaTimeZone = (() => {
   const ttaTz = getTtaTimeZone();
   const cbList: any[] = [];
@@ -34,47 +41,95 @@ export const onTtaTimeZone = (() => {
   }
 })();
 
-type OfDayType = Dayjs | undefined | null;
+type OfDayType = dayjs.Dayjs | undefined | null;
 type UnitType = dayjs.QUnitType | dayjs.OpUnitType;
-export const dayOf = {
-  rangeTs<KS extends readonly [string, string] = ['start_time', 'end_time']>(
-    unit: UnitType, 
-    day: Array<OfDayType> | undefined | null,
+export const datetime = {
+  /**
+   * 将日期范围转换为 API 参数格式的时间戳范围
+   * @param days 时间范围元组，包含开始和结束时间
+   * @param unit 时间单位，默认为 'day'
+   * @param useAppTz 是否使用时区，默认为 true
+   * @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,
     keys?: KS
-  ): KS extends readonly [string, string]
-  ? Simplify<{ [K in KS[0]]: number } & { [K in KS[1]]: number }> 
-  : { start_time: number; end_time: number } {
-    if (!day || !day[0] || !day[1])
-      return undefined as any;
+  ) {
+    if (!days || !days[0] || !days[1])
+      return undefined;
 
-    const tz = getTtaTimeZone().value;
+    const tz = useAppTz ? getTtaTimeZone().value : dayjs.tz.guess();
     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 }> 
+      : { start_time: number; end_time: number };
+
     return {
-      [_keys[0]]: dayjs(day[0].valueOf()).tz(tz).startOf(unit).valueOf(),
-      [_keys[1]]: dayjs(day[1].valueOf()).tz(tz).endOf(unit).valueOf(),
-    } as any;
+      [_keys[0]]: dayjs(days[0].valueOf()).tz(tz).startOf(unit).valueOf(),
+      [_keys[1]]: dayjs(days[1].valueOf()).tz(tz).endOf(unit).valueOf(),
+    } as RetType;
+  },
+  /**
+   * 将日期范围转换为表单使用的时间范围
+   * @param days 时间范围元组，包含开始和结束时间
+   * @param defaultRangeUnit 默认的时间范围单位，如果未提供，则返回 undefined
+   * @return 返回一个包含开始和结束时间的元组，格式为 dayjs 对象
+   */
+  toRangeForForm(
+    days: Array<OfDayType | string | undefined | null>,
+    defaultRangeUnit?: UnitType, 
+  ) {
+    const getDefaultRange = () => {
+      const now = 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())
+      return getDefaultRange();
+
+    return [sDay, eDay] as [dayjs.Dayjs, dayjs.Dayjs];
   },
-  start(unit: UnitType, day: OfDayType) {
+  /**
+   * 获取指定日期的开始时间
+   * @param unit 时间单位
+   * @param day 日期对象
+   * @param useAppTz 是否使用应用时区，默认为 true
+   * @returns 返回指定日期的开始时间，格式为 dayjs 对象
+   */
+  ofStart(unit: UnitType, day: OfDayType, useAppTz = true) {
     if (!day)
       return undefined;
 
-    const tz = getTtaTimeZone().value;
+    const tz = useAppTz ? getTtaTimeZone().value : dayjs.tz.guess();
     return dayjs(day.valueOf()).tz(tz).startOf(unit);
   },
-  startTs(unit: UnitType, day: OfDayType) {
-    this.start(unit, day);
-  },
-  end(unit: UnitType, day: OfDayType) {
+  /**
+   * 获取指定日期的结束时间
+   * @param unit 时间单位
+   * @param day 日期对象
+   * @param useAppTz 是否使用应用时区，默认为 true
+   * @returns 返回指定日期的结束时间，格式为 dayjs 对象
+   */
+  ofEnd(unit: UnitType, day: OfDayType, useAppTz = true) {
     if (!day)
       return undefined;
 
-    const tz = getTtaTimeZone().value;
+    const tz = useAppTz ? getTtaTimeZone().value : dayjs.tz.guess();
     return dayjs(day.valueOf()).tz(tz).endOf(unit);
   },
-  endTs(unit: UnitType, day: OfDayType) {
-    this.end(unit, day);
-  },
 }
 
 /** 为 DatePicker 组件提供响应式时区支持，当时区更新时，自动调整时间戳 */
@@ -156,10 +211,9 @@ export function useRangePickerPropsForTz(
     const newTzOffset = dayjs().tz(newV).utcOffset();
     const oldTzOffset = dayjs().tz(oldV).utcOffset();
     value.value = [
-      dayjs(v[0]).add((oldTzOffset - newTzOffset) * 60 * 1000),
-      dayjs(v[1]).add((oldTzOffset - newTzOffset) * 60 * 1000),
+      dayjs(v[0].valueOf()).add((oldTzOffset - newTzOffset) * 60 * 1000),
+      dayjs(v[1].valueOf()).add((oldTzOffset - newTzOffset) * 60 * 1000),
     ]
-    console.log('🤡 / value.value:', value.value[0].valueOf())
   });
 
   return reactive({

package/admin/components/date/index.ts

@@ -1,4 +1,4 @@
 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, dayOf } from './helpers';
+export { useDatePickerPropsForTz, useRangePickerPropsForTz, getTtaTimeZone, onTtaTimeZone, datetime } from './helpers';

package/admin/components/filter/src/FilterReset.vue

@@ -16,6 +16,7 @@ const props = withDefaults(defineProps<{
 const emits = defineEmits<{
   (e: 'filter'): void
   (e: 'reset'): void
+  (e: 'setColumnsConfig', columnsConfig: any): void
 }>();
 
 const loading = computed(() => {
@@ -48,7 +49,12 @@ function openTableSettingModal() {
     title: typeof x.title === 'string' ? x.title : x.dataIndex || '',
   })) || [];
 
-  TableSettingModal.open({ tableColumns });
+  TableSettingModal.open({ tableColumns })?.then((res) => {
+    TableSettingModal.close();
+    if (res) {
+      emits('setColumnsConfig', res);
+    }
+  });
 }
 
 onTtaTimeZone(() => {

package/admin/components/filter/src/more/TableSetting.vue

@@ -1,8 +1,9 @@
 <script lang="ts">
-import { Button, Switch, Divider, Select, type TableColumnsType } from 'ant-design-vue';
+import { RadioGroup,type TableColumnsType } from 'ant-design-vue';
 import { reactive, defineAsyncComponent, ref } from 'vue';
 import { useDragAndDrop } from "fluid-dnd/vue";
 import { useAntdModal } from '../../../../../antd/hooks/useAntdModal';
+import { type ColumnConfig } from '../../../../../antd/hooks/useAntdTable';
 
 export const TableSettingModal = useAntdModal(
   // eslint-disable-next-line import/no-self-import
@@ -10,17 +11,10 @@ export const TableSettingModal = useAntdModal(
   {
     title: '表格设置',
     width: 500,
-    // footer: null,
     centered: true,
     maskClosable: false,
   }
 );
-
-const showTypeOptions = [
-  { label: '显示', value: 'show' },
-  { label: '简略', value: 'simple' },
-  { label: '隐藏', value: 'hidden' },
-];
 </script>
 
 <script lang="ts" setup>
@@ -31,33 +25,58 @@ const columnsConfig = ref(props.tableColumns.map((col: any) => ({
   title: col.title as string,
   dataIndex: col.dataIndex as string,
   visible: col.visible !== false,
+  compact: col.compact === true,
 })));
+const columnsShowOptions = reactive(Object.fromEntries(props.tableColumns.map((col: any) => {
+  const options = [{ label: '显示', value: 'show' }, { label: '隐藏', value: 'hidden' }];
+  col.compactable === true && options.unshift({ label: '简略', value: 'compact' });
+  return [col.dataIndex, options];
+})) as Record<string, { value: string; options: string }[]>);
+const columnsShowValue = reactive(Object.fromEntries(props.tableColumns.map((col: any) => {
+  const value = col.visible === false ? 'hidden' : (col.compact === true && col.compactable === true) ? 'compact' : 'show';
+  return [col.dataIndex, value]
+})) as Record<string, string>);
 
 const [$ctn] = useDragAndDrop(columnsConfig, {
   handlerSelector: '.drag-handler',
   draggingClass: 'op-50',
   direction: 'vertical',
 });
+
+defineExpose({
+  confirm(_: any, resolve: (data: any) => void) {
+    const newColumnsConfig = columnsConfig.value.map((col) => ({
+        ...col,
+        visible: columnsShowValue[col.dataIndex] !== 'hidden',
+        compact: columnsShowValue[col.dataIndex] === 'compact',
+      })) as ColumnConfig[];
+    resolve(newColumnsConfig);
+    return true;
+  },
+})
 </script>
 
 <template>
   <div>
     <div>
-      <Divider>列设置</Divider>
+      <!-- <Divider>列设置</Divider> -->
       <div ref="$ctn">
-        <div v-for="(col, i) in columnsConfig" :key="col.dataIndex" :index="i" class="flex items-center gap-2 p-2 select-none">
-          <div class="drag-handler flex items-center justify-center cursor-move p-1 -m-2">
-            <i class="i-material-symbols:drag-indicator" />
+        <div 
+          v-for="(col, i) in columnsConfig" :key="col.dataIndex" :index="i" 
+          class="flex items-center gap-2 p-2 select-none"
+        >
+          <div class="drag-handler flex items-center justify-center p-1 -m-2 mr-auto">
+            <i class="i-material-symbols:drag-indicator" />&nbsp;
+            <span >{{ col.title }}</span>
           </div>
-          <span class="mr-auto">{{ col.title }}</span>
-          <Select value="show" :options="showTypeOptions" />
-          <!-- <Switch checked-children="简略" un-checked-children="简略" />
-          <Switch checked-children="显示" un-checked-children="显示" />
-          <Button>上</Button>
-          <Button>下</Button> -->
+          <RadioGroup 
+            v-model:value="columnsShowValue[col.dataIndex]"
+            :options="columnsShowOptions[col.dataIndex]"
+            optionType="button" buttonStyle="solid" size="small"
+           />
+          <!-- <Select v-model:value="columnsShowValue[col.dataIndex]" :options="columnsShowOptions[col.dataIndex]" /> -->
         </div>
       </div>
-
     </div>
   </div>
 </template>

package/admin/layout/large/Notice.vue

@@ -5,7 +5,7 @@ import { type UseQueryReturnType } from '@tanstack/vue-query'
 import { watch, ref, computed } from 'vue'
 import dayjs from '../../../libs/dayjs';
 import { useRouter } from 'vue-router';
-import audioURL from './y682.mp3';
+import audioURL from './y682.mp3?url';
 
 const noticeAudio = new Audio(audioURL);
 noticeAudio.src = audioURL;
@@ -88,7 +88,7 @@ useIntervalFn(() => {
         <i class="i-ri:notification-4-line block text-5" :class="{ shake: !!noticeNum }" />
       </div>
       <template #overlay>
-        <Menu v-if="noticeNum" @click="visible = false">
+        <Menu v-if="noticeNum" @click="visible = false" class="max-h-100 overflow-y-auto">
           <MenuItem v-for="(item, i) of noticesQry.data.value" :key="i" @click="operate(item)">
           <div class="min-w-50">
             <div>{{ item.title }}</div>

package/antd/hooks/useAntdModal.ts

@@ -53,8 +53,10 @@ export function useAntdModal<Comp extends Component>(
     ...defaultModalProps,
     ...isProxy(modalProps) ? toRefs(modalProps) : modalProps,
     confirmLoading: toRef(() => (refs.comp as any)?.loading),
-    onOk: (e: MouseEvent) => {
-      (refs.comp as any)?.confirm?.(e);
+    onOk: async (e: MouseEvent) => {
+      const comp = refs.comp as any;
+      const isClosed = await comp?.confirm?.(e, (data: any) => promiseResolvers?.resolve(data));
+      // isClosed  === true && (_modalProps.open = false);
       modalProps.onOk?.(e);
     },
   });
@@ -96,11 +98,11 @@ export function useAntdModal<Comp extends Component>(
 
     return promiseResolvers.promise;
   };
-  const confirm = (ev: any) => {
+  const onConfirm = (ev: any) => {
     _modalProps.open = false;
     promiseResolvers.resolve(ev);
   };
-  const close = (reason?: any) => {
+  const onClose = (reason?: any) => {
     _modalProps.open = false;
     _onClose(reason);
   };
@@ -122,8 +124,8 @@ export function useAntdModal<Comp extends Component>(
     !visiable && _onClose();
   };
   (compProps as any).ref = setRefs.comp;
-  (compProps as any).onClose = close;
-  (compProps as any).onConfirm = confirm;
+  (compProps as any).onClose = onClose;
+  (compProps as any).onConfirm = onConfirm;
 
   tryOnBeforeUnmount(_onClose);
   onDeactivated(_onClose);
@@ -136,6 +138,6 @@ export function useAntdModal<Comp extends Component>(
       return refs.comp;
     },
     open,
-    close,
+    close: onClose,
   };
 }

package/antd/hooks/useAntdTable.ts

@@ -54,7 +54,7 @@ export function useAntdTable<
       }
     }
   };
-  const { defineColumns } = useTableColumns<LocalColumnsType>();
+  const { defineColumns, setColumnsConfig } = useTableColumns<LocalColumnsType>();
   const defineRowSelection = (rowSelectionGetter: () => LocalTableRowSelection = () => ({})) => {
     const rowSelection = reactive(rowSelectionGetter());
 
@@ -114,8 +114,10 @@ export function useAntdTable<
     dataIndexs,
     /** 【类型辅助】bodyCell 插槽数据的精确类型描述 */
     bodyCellType,
-    /** 【类型辅助】用于定义出类型精确的 columns  */
+    /** 用于定义 columns  */
     defineColumns,
+    /** 用于设置 columns 的配置 */
+    setColumnsConfig,
     /** 【类型辅助】用于定义出类型精确的 rowSelection  */
     defineRowSelection,
     /** 内置的 ATable onChange 事件，默认在 `tableProps` 中 */
@@ -129,8 +131,9 @@ type GetRecordType<T> = T extends UseQueryReturnType<infer D, any>
     : never
   : never;
 
+export type ColumnConfig = { title: string, dataIndex: string, visible: boolean, compact: boolean }
+
 function useTableColumns<LCT extends any[]>() {
-  type ColumnConfig = {title: string, dataIndex: string, visible: boolean}
 
   const columnsConfig = ref<Array<ColumnConfig> | null>(null);
   let originalColumns: LCT | null = null;
@@ -143,11 +146,18 @@ function useTableColumns<LCT extends any[]>() {
       let columns = columnsGetter();
 
       if (config?.length) {
-        // 过滤掉不可见的列
-        columns = columns.filter((col: any) => {
+        columns = columns.map((col: any) => {
           const x = config.find(c => c.dataIndex === col.dataIndex);
-          return x ? x.visible : true;
+          if (x) {
+            return { ...col, visible: x.visible, compact: x.compact,};
+          }
+          return col;
         }) as LCT;
+        // 过滤掉不可见的列
+        // columns = columns.filter((col: any) => {
+        //   const x = config.find(c => c.dataIndex === col.dataIndex);
+        //   return x ? x.visible : true;
+        // }) as LCT;
         // 基于 config 的顺序排序
         columns = config.map(x => {
           const col = columns.find(c => c.dataIndex === x.dataIndex);
@@ -161,18 +171,12 @@ function useTableColumns<LCT extends any[]>() {
 
   const setColumnsConfig = (columns: Array<ColumnConfig>) => {
     columnsConfig.value = columns;
-
-    // if (!columnsConfig.value) {
-    //   columnsConfig.value = originalColumns?.map(col => ({
-    //     title: col.title,
-    //     dataIndex: col.dataIndex as string,
-    //     visible: true,
-    //   })) || [];
-    // }
+    console.log('🤡 / columns:', columns);
   };
 
 
   return {
     defineColumns,
+    setColumnsConfig
   };
 }

package/package.json

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