@peng_kai/kit 0.3.0-beta.1 → 0.3.0-beta.11

package/admin/components/date/helpers.ts

@@ -0,0 +1,223 @@
+import dayjs, { type Dayjs } from 'dayjs/esm';
+import { tryOnScopeDispose } from '@vueuse/core';
+import { computed, reactive, watch, ref, type Ref } from 'vue';
+import type { Simplify } from 'type-fest';
+
+export function getTtaTimeZone() {
+  const win = window as any;
+  const key = '__APP_TZ__';
+
+  return (win[key] || (win[key] = ref(dayjs.tz.guess()))) 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;
+  }
+})();
+
+type OfDayType = 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,
+    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;
+
+    const tz = getTtaTimeZone().value;
+    const _keys = (Array.isArray(keys) && keys?.length > 1) ? keys : ['start_time', 'end_time'];
+
+    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;
+  },
+  start(unit: UnitType, day: OfDayType) {
+    if (!day)
+      return undefined;
+
+    const tz = getTtaTimeZone().value;
+    return dayjs(day.valueOf()).tz(tz).startOf(unit);
+  },
+  startTs(unit: UnitType, day: OfDayType) {
+    this.start(unit, day);
+  },
+  end(unit: UnitType, day: OfDayType) {
+    if (!day)
+      return undefined;
+
+    const tz = getTtaTimeZone().value;
+    return dayjs(day.valueOf()).tz(tz).endOf(unit);
+  },
+  endTs(unit: UnitType, day: OfDayType) {
+    this.end(unit, day);
+  },
+}
+
+/** 为 DatePicker 组件提供响应式时区支持，当时区更新时，自动调整时间戳 */
+export 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)),
+  });
+}
+
+export 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 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),
+      ] 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]).add((oldTzOffset - newTzOffset) * 60 * 1000),
+      dayjs(v[1]).add((oldTzOffset - newTzOffset) * 60 * 1000),
+    ]
+    console.log('🤡 / value.value:', value.value[0].valueOf())
+  });
+
+  return reactive({
+    'value': _value,
+    'onUpdate:value': (newVal: any) => value.value = newVal,
+    'presets': computed(() => props.createPresets!(nowDay.value)),
+  });
+};
+
+/** 为 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

@@ -0,0 +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';

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

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { Button as AButton } from 'ant-design-vue';
+import { Button, Menu, MenuItem, Dropdown, type TableColumnsType } from 'ant-design-vue';
 import { computed } from 'vue';
+import { onTtaTimeZone } from '../../date';
+import { TableSettingModal } from './more/TableSetting.vue'
 
 const props = withDefaults(defineProps<{
   loading?: boolean
   filterQuery?: any
   filterParams?: any
   filterForm?: any
+  tableColumns?: TableColumnsType<any>
 }>(), {
   loading: undefined,
 });
@@ -38,18 +41,47 @@ function reset() {
   props.filterParams?.update?.(true);
   emits('reset');
 }
+
+function openTableSettingModal() {
+  const tableColumns = props.tableColumns?.map((x: any) => ({
+    ...x,
+    title: typeof x.title === 'string' ? x.title : x.dataIndex || '',
+  })) || [];
+
+  TableSettingModal.open({ tableColumns });
+}
+
+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="props.tableColumns" @click="openTableSettingModal">
+              设置表格
+            </MenuItem>
+          </Menu>
+        </template>
+      </Dropdown>
     </slot>
+
+    <TableSettingModal.PresetComponent />
   </div>
 </template>
 
@@ -58,7 +90,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 +100,7 @@ function reset() {
       margin-inline-end: 0 !important;
     }
 
-    + span {
+    +span {
       visibility: hidden;
     }
   }

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

@@ -0,0 +1,63 @@
+<script lang="ts">
+import { Button, Switch, Divider, Select, type TableColumnsType } from 'ant-design-vue';
+import { reactive, defineAsyncComponent, ref } from 'vue';
+import { useDragAndDrop } from "fluid-dnd/vue";
+import { useAntdModal } from '../../../../../antd/hooks/useAntdModal';
+
+export const TableSettingModal = useAntdModal(
+  // eslint-disable-next-line import/no-self-import
+  defineAsyncComponent(() => import('./TableSetting.vue')),
+  {
+    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>
+const props = defineProps<{
+  tableColumns: TableColumnsType<any>
+}>();
+const columnsConfig = ref(props.tableColumns.map((col: any) => ({
+  title: col.title as string,
+  dataIndex: col.dataIndex as string,
+  visible: col.visible !== false,
+})));
+
+const [$ctn] = useDragAndDrop(columnsConfig, {
+  handlerSelector: '.drag-handler',
+  draggingClass: 'op-50',
+  direction: 'vertical',
+});
+</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 cursor-move p-1 -m-2">
+            <i class="i-material-symbols:drag-indicator" />
+          </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> -->
+        </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, { immediate: true });
+
+  return reactive({
+    codes: readonly(permissionCodes),
+    role,
+    has: hasPermission,
+    refresh: refreshPermission,
+  });
+}