@peng_kai/kit 0.3.0-beta.3 → 0.3.0-beta.31

package/admin/components/date/helpers.ts

@@ -0,0 +1,250 @@
+import dayjs, { type Dayjs } from '../../../libs/dayjs';
+import { tryOnScopeDispose } from '@vueuse/core';
+import { computed, reactive, watch, customRef, type Ref } from 'vue';
+import type { Simplify } from 'type-fest';
+
+/**
+ * 获取应用的时区，默认使用浏览器的时区
+ * @returns 返回一个响应式的时区字符串
+ */
+export function getTtaTimeZone() {
+  const win = window as any;
+  const key = '__APP_TZ__';
+
+  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>;
+}
+
+/**
+ * 监听应用的时区变化的函数
+ */
+export const onTtaTimeZone = (() => {
+  const ttaTz = getTtaTimeZone();
+  const cbList: any[] = [];
+
+  watch(ttaTz, (newTz, oldTz) => {
+    newTz !== oldTz && cbList.forEach((cb) => cb(newTz));
+  }, { flush: 'post' });
+
+  return (cb: (tz: string) => void) => {
+    cbList.push(cb);
+
+    const unbind = () => {
+      const index = cbList.indexOf(cb);
+      if (index !== -1) {
+        cbList.splice(index, 1);
+      }
+    }
+
+    tryOnScopeDispose(unbind);
+
+    return unbind;
+  }
+})();
+
+export function standardizeTzParam(tz: string) {
+  if (tz === 'APP') {
+    return getTtaTimeZone().value;
+  } else if (tz === 'LOCAL') {
+    return dayjs.tz.guess();
+  }
+  return tz;
+}
+
+export function getLocalOffset(tz: string) {
+  const offsetTzMinutes = dayjs().tz(tz).utcOffset();
+  const offsetLocalMinutes = dayjs().utcOffset();
+  return (offsetLocalMinutes - offsetTzMinutes) * 60 * 1000;
+}
+
+type OfDayType = dayjs.Dayjs | undefined | null;
+type UnitType = dayjs.QUnitType | dayjs.OpUnitType;
+export const datetime = {
+  /**
+   * 将日期范围转换为 API 参数格式的时间戳范围
+   * @param days 时间范围元组，包含开始和结束时间
+   * @param unit 时间单位，默认为 'day'
+   * @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',
+    tz: string = 'APP',
+    keys?: KS
+  ) {
+    if (!days || !days[0] || !days[1])
+      return undefined;
+
+    const _tz = standardizeTzParam(tz);
+    const _keys = (Array.isArray(keys) && keys?.length > 1) ? keys : ['start_time', 'end_time'];
+    const offsetMS = getLocalOffset(_tz);
+
+    type RetType = KS extends readonly [string, string]
+      ? Simplify<{ [K in KS[0]]: number } & { [K in KS[1]]: number }>
+      : { start_time: number; end_time: number };
+
+    const startTime = dayjs(days[0].valueOf()).startOf(unit).valueOf() + offsetMS;
+    const endTime = dayjs(days[1].valueOf()).endOf(unit).valueOf() + offsetMS;
+
+    return {
+      [_keys[0]]: startTime,
+      [_keys[1]]: endTime,
+    } as RetType;
+  },
+  /**
+   * 将日期范围转换为表单使用的时间范围
+   * @param days 时间范围元组，包含开始和结束时间
+   * @param defaultRangeUnit 默认的时间范围单位，如果未提供，则返回 undefined
+   * @return 返回一个包含开始和结束时间的元组，格式为 dayjs 对象
+   */
+  toRangeForForm(
+    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]
+        : undefined;
+    }
+
+    if (!days || !days[0] || !days[1])
+      return getDefaultRange();
+
+    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];
+  },
+  /**
+   * 获取指定日期的开始时间
+   * @param unit 时间单位
+   * @param day 日期对象
+   * @param tz 时区字符串，默认为 'APP'（应用时区）。特殊值：UTC、LOCAL、APP
+   * @returns 返回指定日期的开始时间，格式为 dayjs 对象
+   */
+  ofStart(unit: UnitType, day: OfDayType, tz: string = 'APP') {
+    if (!day)
+      return undefined;
+
+    const _tz = standardizeTzParam(tz);
+    return dayjs(day.valueOf()).tz(_tz).startOf(unit);
+  },
+  /**
+   * 获取指定日期的结束时间
+   * @param unit 时间单位
+   * @param day 日期对象
+   * @param tz 时区字符串，默认为 'APP'（应用时区）。特殊值：UTC、LOCAL、APP
+   * @returns 返回指定日期的结束时间，格式为 dayjs 对象
+   */
+  ofEnd(unit: UnitType, day: OfDayType, tz: string = 'APP') {
+    if (!day)
+      return undefined;
+
+    const _tz = standardizeTzParam(tz);
+    return dayjs(day.valueOf()).tz(_tz).endOf(unit);
+  },
+}
+
+/** 为 DatePicker 组件提供响应式时区支持，当时区更新时，自动调整时间戳 */
+function useDatePickerPropsForTz(
+  value: Ref<Dayjs | undefined>,
+  props: {
+    createPresets?: (day: Dayjs) => { label: string; value: Dayjs }[];
+  } = {},
+  tz?: Ref<string>,
+) {
+  // 默认值
+  props.createPresets ??= () => {
+    return [
+      // { label: '昨天', value: day.subtract(1, 'day').startOf('day') },
+      // { label: '上周', value: day.subtract(1, 'week').startOf('week') },
+      // { label: '上个月', value: day.subtract(1, 'month').startOf('month') },
+    ];
+  };
+  const _tz = tz || getTtaTimeZone();
+  const nowDay = computed(() => dayjs().tz(_tz.value));
+  const _value = computed(() => value.value ? dayjs(value.value.valueOf()).tz(_tz.value) : undefined);
+
+  watch(_tz, (newV, oldV) => {
+    if (!value.value) return;
+
+    const newTzOffset = dayjs().tz(newV).utcOffset();
+    const oldTzOffset = dayjs().tz(oldV).utcOffset();
+    value.value = dayjs(value.value.valueOf() + (oldTzOffset - newTzOffset) * 60 * 1000);
+  });
+
+  return reactive({
+    'value': _value,
+    'onUpdate:value': (value: any) => value.value = dayjs(value).valueOf(),
+    'presets': computed(() => props.createPresets!(nowDay.value)),
+  });
+}
+
+function useRangePickerPropsForTz(
+  value: Ref<[string, string] | [Dayjs, Dayjs] | undefined>,
+  props: {
+    createPresets?: (day: Dayjs) => { label: string; value: Dayjs[] }[];
+  } = {},
+  tz?: Ref<string>,
+) {
+  const _tz = tz || getTtaTimeZone();
+
+  // 默认值
+  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 _value = computed(() => {
+    const v = value.value;
+    if (v && v[0] && v[1]) {
+      return [
+        dayjs(v[0].valueOf()),
+        dayjs(v[1].valueOf()),
+      ] as [Dayjs, Dayjs];
+    }
+    return undefined;
+  });
+
+  return reactive({
+    'value': _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'
+  });
+};

package/admin/components/date/index.ts

@@ -0,0 +1,6 @@
+export { default as TimeFieldSelectForLabel } from './TimeFieldSelectForLabel.vue';
+export { default as TtaTimeZone } from './TtaTimeZone.vue';
+export { default as TtaTimeZoneSimple } from './TtaTimeZoneSimple.vue';
+export { default as PeriodPicker } from './PeriodPicker.vue';
+export { getTtaTimeZone, onTtaTimeZone, datetime } from './helpers';
+export { antdRangePickerPresets, antdRangePickerShowTimeProps } from './presetProps';

package/admin/components/date/presetProps.ts

@@ -0,0 +1,19 @@
+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: '今天', key: 'today', get value() {return [dayjs().startOf('day'), dayjs().endOf('day')] } },
+  { label: '昨天', key: 'yesterday', get value() { return [dayjs().subtract(1, 'day').startOf('day'), dayjs().subtract(1, 'day').endOf('day')] } },
+  { label: '本月', key: 'thisMonth', get value() { return [dayjs().startOf('month'), dayjs().endOf('month')] } },
+  { label: '上个月', key: 'lastMonth', get value() { return [dayjs().subtract(1, 'month').startOf('month'), dayjs().subtract(1, 'month').endOf('month')] } },
+  { label: '近3个月', key: 'last3months', get value() { return [dayjs().subtract(2, 'month').startOf('month'), dayjs().endOf('month')] } },
+  { label: '近半年', key: 'last6months', get value() { return [dayjs().subtract(5, 'month').startOf('month'), dayjs().endOf('month')] } },
+  { label: '今年', key: 'thisYear', get value() { return [dayjs().startOf('year'), dayjs().endOf('month')] } },
+] as unknown as { label: string; key: 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/filter/src/FilterReset.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
-import { Button as AButton } from 'ant-design-vue';
-import { computed } from 'vue';
+import { Button, Menu, MenuItem, Dropdown, type TableColumnsType } from 'ant-design-vue';
+import { type Ref, computed, inject } from 'vue';
+import { onTtaTimeZone } from '../../date';
+import { TableSettingModal } from './more/TableSetting.vue'
+import { type ColumnConfig } from '../../../../antd/hooks/useTableColumns';
 
 const props = withDefaults(defineProps<{
   loading?: boolean
   filterQuery?: any
   filterParams?: any
   filterForm?: any
+  tableColumns?: TableColumnsType<any>
+  tableColumnsConfig?: ColumnConfig[]
 }>(), {
   loading: undefined,
 });
 const emits = defineEmits<{
   (e: 'filter'): void
   (e: 'reset'): void
+  (e: 'setColumnsConfig', columnsConfig: any): void
 }>();
 
 const loading = computed(() => {
@@ -38,18 +44,56 @@ function reset() {
   props.filterParams?.update?.(true);
   emits('reset');
 }
+
+const tableColumns = inject('tableColumns', props.tableColumns) as TableColumnsType<any>;
+const tableColumnsConfig = inject('tableColumnsConfig') as Ref<ColumnConfig[]>;
+function openTableSettingModal() {
+
+  if (!tableColumns) return;
+
+  TableSettingModal.open({
+    tableColumns,
+    tableColumnsConfig: tableColumnsConfig.value || []
+   } as any)?.then((res) => {
+    TableSettingModal.close();
+    if (res) {
+      tableColumnsConfig.value = res;
+      emits('setColumnsConfig', res);
+    }
+  });
+}
+
+onTtaTimeZone(() => {
+  setTimeout(() => {
+    props.filterParams?.update?.(true);
+  }, 100)
+});
 </script>
 
 <template>
   <div class="btns flex-none flex w-min ml-auto gap-2">
     <slot :loading="loading" :filter="filter" :reset="reset">
-      <AButton class="filter-btn" type="primary" htmlType="submit" :loading="loading" @click="filter()">
+      <Button class="filter-btn" type="primary" htmlType="submit" :loading="loading" @click="filter()">
         查询
-      </AButton>
-      <AButton :disabled="loading" @click="reset()">
+      </Button>
+      <Button :disabled="loading" @click="reset()">
         重置
-      </AButton>
+      </Button>
+      <Dropdown trigger="click" placement="bottomRight" >
+        <Button class="px-1 w-8">
+          <i class="i-si:more-square-horiz-fill scale-130 transform-origin-bottom-center" />
+        </Button>
+        <template #overlay>
+          <Menu>
+            <MenuItem v-if="tableColumns" @click="openTableSettingModal">
+              设置表格
+            </MenuItem>
+          </Menu>
+        </template>
+      </Dropdown>
     </slot>
+
+    <TableSettingModal.PresetComponent />
   </div>
 </template>
 
@@ -58,7 +102,7 @@ function reset() {
 :slotted(.filter-btn) {
   position: relative;
 
-  .ant-btn-loading-icon{
+  .ant-btn-loading-icon {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
@@ -68,7 +112,7 @@ function reset() {
       margin-inline-end: 0 !important;
     }
 
-    + span {
+    +span {
       visibility: hidden;
     }
   }

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

@@ -0,0 +1,95 @@
+<script lang="ts">
+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/useTableColumns';
+
+export const TableSettingModal = useAntdModal(
+  // eslint-disable-next-line import/no-self-import
+  defineAsyncComponent(() => import('./TableSetting.vue')),
+  {
+    title: '表格设置',
+    width: 500,
+    centered: true,
+    maskClosable: false,
+  }
+);
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  tableColumns: TableColumnsType<any>
+  tableColumnsConfig: ColumnConfig[]
+}>();
+
+let columnsCfg = props.tableColumns.map((col: any) => ({
+  title: col.title as string,
+  dataIndex: col.dataIndex as string,
+  visible: props.tableColumnsConfig.find(cf => cf.dataIndex === col.dataIndex)?.visible !== false,
+  compact: props.tableColumnsConfig.find(cf => cf.dataIndex === col.dataIndex)?.compact === true,
+  fixed: !!col.fixed,
+}));
+
+// 排序
+if (props.tableColumnsConfig.length) {
+  const dataIndexOrderMap = new Map(props.tableColumnsConfig.map((col, i) => [col.dataIndex, i]));
+  columnsCfg.sort((a, b) => {
+    const aIndex = dataIndexOrderMap.get(a.dataIndex);
+    const bIndex = dataIndexOrderMap.get(b.dataIndex);
+    return (aIndex ?? 0) - (bIndex ?? 0);
+  })
+}
+
+const columnsConfig = ref(columnsCfg);
+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(columnsConfig.value.map((cf) => {
+  const value = cf.visible === false ? 'hidden' : cf.compact === true ? 'compact' : 'show';
+  return [cf.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) => ({
+      dataIndex: col.dataIndex,
+      visible: columnsShowValue[col.dataIndex] !== 'hidden',
+      compact: columnsShowValue[col.dataIndex] === 'compact',
+    })) as ColumnConfig[];
+    resolve(newColumnsConfig);
+    return true;
+  },
+})
+</script>
+
+<template>
+  <div>
+    <div>
+      <!-- <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 p-1 -m-2 "
+            :class="{ '!pointer-events-none !cursor-no-drop': col.fixed }"
+          >
+            <i class="i-material-symbols:drag-indicator" :class="{ 'op-0': col.fixed }" />&nbsp;
+          </div>
+          <span>{{ col.title }}</span>
+          <RadioGroup class="ml-auto" 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/components/provider/Admin.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { Router } from 'vue-router';
+
+export const admin = {};
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+  router: Router
+}>();
+</script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,48 @@
+import { reactive, readonly, ref, watch } from 'vue';
+import type { AsyncReturnType } from 'type-fest';
+
+type TRole = () => Promise<Record<string, boolean> | null | undefined>;
+interface TRoles {
+  main: TRole
+  [key: string]: TRole
+}
+
+export function createAdminPermission(roles: TRoles) {
+  const role = ref('main');
+  const permissionCodes = ref<AsyncReturnType<TRole>>();
+
+  /**
+   * 刷新权限
+   */
+  const refreshPermission = async () => {
+    permissionCodes.value = await roles?.[role.value]?.();
+
+    return permissionCodes.value;
+  };
+
+  /**
+   * 是否满足权限要求
+   * @param codes 权限 code
+   */
+  const hasPermission = (codes: string | string[]) => {
+    const _codes = Array.isArray(codes) ? codes : [codes];
+    const _permissionCodes = permissionCodes.value;
+
+    if (_permissionCodes === null)
+      return false;
+    else if (_permissionCodes === undefined)
+      // undefined 则表示没有权限要求，返回 true
+      return true;
+    else
+      return _codes.every(code => !!_permissionCodes[code]);
+  };
+
+  watch(role, refreshPermission);
+
+  return reactive({
+    codes: readonly(permissionCodes),
+    role,
+    has: hasPermission,
+    refresh: refreshPermission,
+  });
+}