@peng_kai/kit 0.1.4 → 0.1.5

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

@@ -29,7 +29,7 @@ const loading = computed(() => {
 });
 
 function filter() {
-  props.filterParams?.update?.();
+  props.filterParams?.update?.({ page: 1 });
   emits('filter');
 }
 
@@ -42,7 +42,7 @@ function reset() {
 
 <template>
   <div class="flex-none flex w-min ml-auto">
-    <AButton class="mr-2 filter-btn" type="primary" htmlType="submit" :loading="loading" @click="filter()">
+    <AButton class="filter-btn mr2" type="primary" htmlType="submit" :loading="loading" @click="filter()">
       查询
     </AButton>
     <AButton :disabled="loading" @click="reset()">

package/admin/components/filter/src/useFilterParams.ts

@@ -4,6 +4,15 @@ import { reactive } from 'vue';
 interface PageParams { page?: string | number, page_size?: string | number };
 const defaultPageParams: PageParams = { page: 1, page_size: 10 };
 
+/**
+ * 用于管理筛选参数
+ *
+ * @param _api - API 函数。
+ * @param buildParams - 构建参数的函数。
+ * @param pageParams - 默认的页面参数。
+ *
+ * @returns 包含筛选参数和更新函数的对象。
+ */
 export function useFilterParams<R extends Api.Request, AP extends Api.GetParam<R>, BP extends AP>(
   _api: R,
   buildParams: () => BP,

package/admin/styles/classCover.scss

@@ -85,14 +85,71 @@
     display: flex;
     min-height: 56px;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-end;
     padding: 0 var(--padding-size);
     border-top: 1px solid var(--antd-colorBorderSecondary);
     margin: 0;
   }
 }
 
-// 查询器基本样式
+// 抽屉的基本款样式
+.ant-drawer.antd-cover__basic-drawer {
+  --padding-size: 22px;
+
+  // --min-body-height: ;
+  // --max-body-height: ;
+  // --body-height: ;
+
+  .ant-drawer-content {
+    padding: 0;
+  }
+
+  .ant-drawer-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+  }
+
+  .ant-drawer-header {
+    display: flex;
+    align-items: center;
+    min-height: 56px;
+    padding: 0 var(--padding-size);
+    margin: 0;
+    border-bottom: 1px solid var(--antd-colorBorderSecondary);
+  }
+
+  .ant-drawer-body {
+    height: var(--body-height, auto);
+    min-height: var(--min-body-height, auto);
+    max-height: var(--max-body-height, auto);
+    padding: var(--padding-size);
+    overflow-y: auto;
+
+    &:empty {
+      height: var(--min-body-height, 150px);
+    }
+  }
+
+  .ant-drawer-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-height: 56px;
+    padding: 0 var(--padding-size);
+    margin: 0;
+    border-top: 1px solid var(--antd-colorBorderSecondary);
+
+    & > *:not(:first-of-type) {
+      margin-left: 8px;
+    }
+  }
+}
+
+// 查询器表单基本样式
 .ant-form.ant-form__filter {
   display: flex;
   flex-wrap: wrap;

package/admin/types/assist.ts

@@ -4,7 +4,7 @@ export declare interface AppPermissionCodes {}
 export declare interface AppRouteNames {}
 
 /** 权限 code 类型辅助（permission code） */
-export const pc_ = createSelfKeyProxy<{ [K in keyof AppPermissionCodes]: K }>();
+export const PC = createSelfKeyProxy<{ [K in keyof AppPermissionCodes]: K }>();
 
 /** 路由 name 类型辅助（route name） */
-export const rn_ = createSelfKeyProxy<{ [K in keyof AppRouteNames]: K }>();
+export const RN = createSelfKeyProxy<{ [K in keyof AppRouteNames]: K }>();

package/antd/hooks/useAntdDrawer.ts

@@ -6,7 +6,7 @@ import type { ComponentProps } from 'vue-component-type-helpers';
 import type { Writable } from 'type-fest';
 import { useComponentRef } from '../../vue';
 
-const defaultDrawerProps: DrawerProps = { open: false, destroyOnClose: true };
+const defaultDrawerProps: DrawerProps = { open: false, destroyOnClose: true, rootClassName: 'antd-cover__basic-drawer' };
 
 interface IComponentConfig<Comp extends Component> {
   is: Comp
@@ -34,7 +34,7 @@ export function useAntdDrawer<Comp extends Component>(
     _drawerProps.open = false;
   };
 
-  const DrawerExtra = defineComponent({
+  const DrawerFooter = defineComponent({
     setup() {
       const cancelBtnProps: ButtonProps = reactive({ onClick: close });
       const confirmBtnProps: ButtonProps = reactive({
@@ -62,7 +62,7 @@ export function useAntdDrawer<Comp extends Component>(
     },
   });
 
-  _drawerProps.extra = _drawerProps.extra === undefined ? h(DrawerExtra) : _drawerProps.extra;
+  _drawerProps.footer = _drawerProps.footer === undefined ? h(DrawerFooter) : _drawerProps.footer;
   _drawerProps['onUpdate:open'] = (visiable) => {
     _drawerProps.open = visiable;
   };

package/antd/hooks/useAntdTable.ts

@@ -1,4 +1,4 @@
-import { computed } from 'vue';
+import { computed, reactive } from 'vue';
 import type { UseQueryReturnType } from '@tanstack/vue-query';
 import type { Table, TableProps } from 'ant-design-vue';
 import type { ColumnType } from 'ant-design-vue/es/table/interface';
@@ -11,6 +11,7 @@ export function useAntdTable<
   type RecordType = GetRecordType<UQRR>;
   type LocalTableProps = TableProps<RecordType>;
   type LocalColumnsType = NonNullable<LocalTableProps['columns']>;
+  type LocalTableRowSelection = NonNullable<LocalTableProps['rowSelection']>;
 
   const { data, isFetching, isLoading } = uqrt;
 
@@ -18,7 +19,15 @@ export function useAntdTable<
     const page = queryParams.page_size !== pagination.pageSize ? 1 : pagination.current;
     Object.assign(queryParams, { page, page_size: pagination.pageSize ?? 10 });
   };
-  const defineColumns = (columnsFn: () => LocalColumnsType) => computed(columnsFn);
+  const defineColumns = (columnsGetter: () => LocalColumnsType) => computed(columnsGetter);
+  const defineRowSelection = (rowSelectionGetter: () => LocalTableRowSelection) => {
+    const rowSelection = reactive(rowSelectionGetter());
+
+    rowSelection.selectedRowKeys ??= [];
+    rowSelection.onChange ??= keys => rowSelection.selectedRowKeys = keys;
+
+    return rowSelection;
+  };
 
   const tableProps = computed<LocalTableProps>(() => {
     const { list, pagination } = data.value ?? {};
@@ -60,6 +69,8 @@ export function useAntdTable<
     bodyCellType,
     /** 【类型辅助】用于定义出类型精确的 columns  */
     defineColumns,
+    /** 【类型辅助】用于定义出类型精确的 rowSelection  */
+    defineRowSelection,
     onPaginationChange,
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "",
   "author": "",
   "license": "ISC",
@@ -29,6 +29,7 @@
     "@babel/types": "^7.23.5",
     "@tanstack/vue-query": "^4.37.1",
     "@vueuse/core": "^10.6.1",
+    "a-calc": "^1.3.8",
     "ant-design-vue": "^4.0.7",
     "axios": "^1.6.2",
     "bignumber.js": "^9.1.2",

package/pnpm-lock.yaml

@@ -23,6 +23,9 @@ dependencies:
   '@vueuse/core':
     specifier: ^10.6.1
     version: 10.6.1(vue@3.3.8)
+  a-calc:
+    specifier: ^1.3.8
+    version: 1.3.8
   ant-design-vue:
     specifier: ^4.0.7
     version: 4.0.7(vue@3.3.8)
@@ -1549,6 +1552,12 @@ packages:
       through: 2.3.8
     dev: true
 
+  /a-calc@1.3.8:
+    resolution: {integrity: sha512-/YQ+RActls7GQYXjCYP135DEwMC7tdUFfEiR65pnjsZ4N1Uvtz3MKlpw2RHI0hoDraJ2Ih9zjcAAERxnKL4qng==}
+    dependencies:
+      typescript-treasure: 0.0.9
+    dev: false
+
   /acorn-jsx@5.3.2(acorn@8.11.2):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -4963,6 +4972,10 @@ packages:
     engines: {node: '>=16'}
     dev: true
 
+  /typescript-treasure@0.0.9:
+    resolution: {integrity: sha512-QPmpqJvQqZ7rt2iVNzPrtQNSFs1zVuTuP+jzE3np7qytEUcfSKtAW8RTDslldeAwaJjVJa0UM3ps1uVddpEMqQ==}
+    dev: false
+
   /typescript@5.2.2:
     resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
     engines: {node: '>=14.17'}

package/utils/date.ts

@@ -0,0 +1,44 @@
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/zh';
+import 'dayjs/locale/en';
+
+export { default as dayjs } from 'dayjs';
+
+dayjs.locale('zh');
+dayjs.extend(relativeTime);
+
+/**
+ * 返回给定日期的一天的开始时间。
+ * @param day - 要获取一天的开始时间的日期。
+ * @returns 一天的开始时间作为Unix时间戳，如果输入无效则返回 undefined。
+ */
+export function startOfDay(day: dayjs.ConfigType) {
+  const _day = dayjs(day);
+  return _day.isValid() ? _day.startOf('day').valueOf() : undefined;
+}
+
+/**
+ * 计算给定日期的当天结束时间。
+ * @param day - 要计算当天结束时间的日期。
+ * @returns 表示当天结束时间的时间戳值，如果输入无效则返回 undefined。
+ */
+export function endOfDay(day: dayjs.ConfigType) {
+  const _day = dayjs(day);
+  return _day.isValid() ? _day.endOf('day').valueOf() : undefined;
+}
+
+/**
+ * 将秒数转换为时长格式化时间
+ * @param seconds 秒数
+ * @returns 时长格式化时间
+ */
+export function secondsToDuration(seconds: number) {
+  const units = [['天', 24 * 60 * 60], ['时', 60 * 60], ['分', 60], ['秒', 1]] as const;
+
+  return units.reduce((duration, [label, durationValue]) => {
+    const value = Math.floor(seconds / durationValue);
+    seconds %= durationValue;
+    return value > 0 ? duration += `${value + label}` : duration;
+  }, '');
+}

package/utils/index.ts

@@ -18,9 +18,7 @@ export const ENV = {
  * @param dur 时长
  */
 export function sleep(dur: number) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, dur);
-  });
+  return new Promise(resolve => setTimeout(resolve, dur));
 }
 
 /**
@@ -34,11 +32,6 @@ export function isSSR() {
   return typeof window === 'undefined';
 }
 
-export function fixed() {
-
-  // return (12).toFixed
-}
-
 /**
  * 字符串脱敏，省略中间字符串
  * @param str 字符串
@@ -59,6 +52,15 @@ export function desensitize(str: string | undefined | null, startChars = 4, endC
   return truncatedStr;
 }
 
+/**
+ * 生成指定长度的随机字符串
+ * @param length 要生成的随机字符串的长度
+ */
+export function randomString(length: number) {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  return Array.from({ length }, () => characters[Math.floor(Math.random() * characters.length)]).join('');
+}
+
 /**
  * 对应链的浏览器地址
  * @param chain 链名
@@ -121,6 +123,10 @@ export function removeUrlSearchParam(key: string) {
   window.history.replaceState({}, '', url);
 }
 
+/**
+ * 创建一个带有自身键的代理对象
+ * @returns 带有自身键的代理对象
+ */
 export function createSelfKeyProxy<T extends object>() {
   return new Proxy({} as T, {
     get(_, p) {

package/utils/number.ts

@@ -0,0 +1,49 @@
+import { calc } from 'a-calc';
+
+export { default as bn } from 'bignumber.js';
+export { calc } from 'a-calc';
+
+/**
+ * 常用的数值格式化规则
+ *
+ * 命名规则：
+ * - d-decimal: 保留的小数位
+ * - p-pad: 当小数位不够填充指定的小数位时，是否填充0
+ * - r-round: 舍入规则。可选规则: R5四舍五入、R6四舍六入、R1向上取整、R0向下取整
+ * - t-thousand: 是否使用千位符
+ * - n-number: 返回数字类型
+ */
+export const numFmt = {
+  /** 保留18位小数，千位符 */
+  t: (num: any, err: any = null) => calc('a | <=18 ,', { a: String(num), _error: err }) as string | null,
+  /** 舍去小数，四舍五入，千位符 */
+  d0r5t: (num: any, err: any = null) => calc('a | =0 ~5 ,', { a: String(num), _error: err }) as string | null,
+  /** 舍去小数，向下取整，千位符 */
+  d0r0t: (num: any, err: any = null) => calc('a | =0 ~- ,', { a: String(num), _error: err }) as string | null,
+  /** 保留2位小数，四舍五入，千位符 */
+  d2r5t: (num: any, err: any = null) => calc('a | <=2 ~5 ,', { a: String(num), _error: err }) as string | null,
+  /** 保留2位小数，向下取整，千位符 */
+  d2r0t: (num: any, err: any = null) => calc('a | <=2 ~- ,', { a: String(num), _error: err }) as string | null,
+  /** 保留6位小数，四舍五入，千位符 */
+  d6r5t: (num: any, err: any = null) => calc('a | <=6 ~5 ,', { a: String(num), _error: err }) as string | null,
+  /** 保留6位小数，向下取整，千位符 */
+  d6r0t: (num: any, err: any = null) => calc('a | <=6 ~- ,', { a: String(num), _error: err }) as string | null,
+  /** 保留8位小数，四舍五入，千位符 */
+  d8r5t: (num: any, err: any = null) => calc('a | <=8 ~5 ,', { a: String(num), _error: err }) as string | null,
+  /** 保留8位小数，向下取整，千位符 */
+  d8r0t: (num: any, err: any = null) => calc('a | <=8 ~- ,', { a: String(num), _error: err }) as string | null,
+};
+
+/**
+ * 将给定的金额转换为格式化的字符串表示
+ * @param amount - 要转换的金额。
+ * @param decimal - 格式化字符串中包含的小数位数。默认为 0。
+ * @returns 金额的格式化字符串表示。
+ */
+export function toAmount(amount: any, decimal: string | number = 0) {
+  const res = calc('a / 10 ** d', { a: String(amount), d: Number(decimal), _error: null });
+  const fmt = (fmt: keyof typeof numFmt) => (numFmt[fmt] ?? numFmt.t)(res);
+  fmt.toString = () => numFmt.t(res);
+
+  return fmt;
+}

package/vue/hooks/useComponentRef.ts

@@ -2,7 +2,13 @@ import { ref } from 'vue';
 import type { Component } from 'vue';
 import type { ComponentExposed } from 'vue-component-type-helpers';
 
-export function useComponentRef<C extends Component>(_component: C) {
+/**
+ * 组件引用
+ * @param component 组件实例
+ * @returns 组件引用的代理对象
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+export function useComponentRef<C extends Component>(component: C) {
   const _cpt = ref<any>();
   const refFn = (cpt: any) => {
     _cpt.value = cpt;

package/vue/hooks/useIsDark.ts

@@ -18,4 +18,9 @@ function _useIsDark() {
   return isDark;
 }
 
+/**
+ * 返回一个布尔值，表示当前主题是否为暗色模式。
+ *
+ * @returns 当前主题是否为暗色模式的布尔值
+ */
 const useIsDark = createSharedComposable(_useIsDark);

package/vue/hooks/useIsMounted.ts

@@ -1,5 +1,8 @@
 import { onMounted, ref } from 'vue';
 
+/**
+ * 指示组件是否已挂载
+ */
 export function useIsMounted() {
   const mounted = ref(false);
 

package/vue/hooks/useTeleportTarget.ts

@@ -1,5 +1,13 @@
-import { onMounted, ref } from 'vue';
+import { h, onMounted, ref } from 'vue';
+import type { VNode } from 'vue';
+import type { ArrayValues } from 'type-fest';
+import { randomString } from '../../utils';
 
+/**
+ * 使用选择器获取传送目标
+ * @param selectors 选择器字符串
+ * @returns 传送目标的引用
+ */
 export function useTeleportTarget(selectors: string) {
   const target = ref<HTMLElement | null>();
 
@@ -10,4 +18,29 @@ export function useTeleportTarget(selectors: string) {
   });
 
   return target;
-}
+}
+
+/**
+ * 基于提供的顶级类和目标创建传送门选择器
+ * @param topClass 传送门选择器的顶级类
+ * @param targets 传送门的目标
+ */
+export function createTeleportSelectors<TG extends string[]>(topClass: string, targets: TG) {
+  type TGK = ArrayValues<TG>;
+  type TRet = { topClass: string }
+    & { [K in `${TGK}Selector`]: string }
+    & { [K in `${TGK}Class`]: string }
+    & { [K in `${TGK}Target`]: (className?: string, tag?: string) => VNode };
+
+  const ret: Record<string, any> = {};
+  ret.topClass = `${topClass}-${randomString(6)}`;
+
+  targets.forEach((target) => {
+    const _target = ret[`${target}Class`] = `${target}_${randomString(6)}`;
+
+    ret[`${target}Selector`] = `.${ret.topClass} .${_target}`;
+    ret[`${target}Target`] = (className: string = '', tag: string = 'div') => h(tag, { className: `${_target} ${className}` });
+  });
+
+  return ret as TRet;
+}

package/vue/index.ts

@@ -1,5 +1,5 @@
 export { useComponentRef } from './hooks/useComponentRef';
-export { useTeleportTarget } from './hooks/useTeleportTarget';
+export { useTeleportTarget, createTeleportSelectors } from './hooks/useTeleportTarget';
 export { useIsMounted } from './hooks/useIsMounted';
 export { useIsDark } from './hooks/useIsDark';
 export { InfiniteQuery } from './components/infinite-query';