@peng_kai/kit 0.0.1

package/antd/admin/FilterDrawer.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const emits = defineEmits<{
+  (e: 'filter'): void
+  (e: 'reset', value: number): void
+}>()
+const filterVisible = ref(false)
+
+function filter() {
+  emits('filter')
+  filterVisible.value = false
+}
+
+function reset() {
+  emits('reset', 1)
+  filterVisible.value = false
+}
+</script>
+
+<template>
+  <div class="p-3 mb-2 bg-white text-14px" @click="filterVisible = true">
+    <!-- .filter-params 为空时显示 .filter-params-tips -->
+    <div class="filter-params">
+      <slot name="params" />
+    </div>
+    <div class="filter-params-tips">
+      条件筛选，点击打开
+    </div>
+  </div>
+
+  <ADrawer v-model:open="filterVisible" class="filter-drawer" placement="bottom" height="50vh">
+    <template #extra>
+      <AButton class="mr-3 my--3" @click="reset()">
+        重置
+      </AButton>
+      <AButton class="my--3" type="primary" @click="filter()">
+        筛选
+      </AButton>
+    </template>
+    <template #default>
+      <slot />
+    </template>
+  </ADrawer>
+</template>
+
+<style scoped lang="scss">
+.filter-params {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 5px 15px;
+}
+
+// .filter-params 为空时显示 .filter-params-tips
+.filter-params-tips {
+  display: none;
+  color: theme('colors.gray.DEFAULT');
+}
+
+.filter-params:empty {
+  display: none;
+}
+
+.filter-params:empty + .filter-params-tips {
+  display: block;
+}
+</style>
+
+<style lang="scss">
+.filter-drawer {
+  .ant-drawer-header {
+    padding: 16px;
+
+    .ant-drawer-close {
+      --expand: 5px;
+
+      padding: var(--expand);
+      margin: calc(var(--expand) * -1) var(--expand) calc(var(--expand) * -1) 0;
+    }
+  }
+
+  .ant-drawer-body {
+    padding: 16px;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+
+    .ant-form-item-label {
+      padding-bottom: 0;
+    }
+  }
+}
+</style>

package/antd/admin/FilterParam.vue

@@ -0,0 +1,76 @@
+<script lang="ts">
+import isNil from 'lodash-es/isNil'
+import isFinite from 'lodash-es/isFinite'
+import dayjs from 'dayjs'
+import bignumber from 'bignumber.js'
+
+export const paramTypes = { numberRange, datetimeRange, options }
+
+/**
+ * 时间范围格式化
+ * @param range 数字范围
+ * @param unit 单位
+ */
+function numberRange(range?: [number, number], unit?: string) {
+  if (!range?.every(isFinite))
+    return ''
+
+  return `${bignumber(range[0]).toFormat()}~${bignumber(range[1]).toFormat()}${unit}`
+}
+
+/**
+ * 时间范围格式化
+ * @param range 时间范围
+ * @param template 格式化模板（文档：https://dayjs.gitee.io/docs/zh-CN/display/format ）
+ */
+function datetimeRange(range?: [string | dayjs.Dayjs, string | dayjs.Dayjs], template = 'YYYY-MM-DD') {
+  if (!range?.every(v => dayjs(v).isValid()))
+    return ''
+
+  return `${dayjs(range[0]).format(template)} ~ ${dayjs(range[1]).format(template)}`
+}
+
+function options(
+  value?: string | number | Array<string | number>,
+  options?: Array<{ value: string | number; label: any }>,
+) {
+  if (isNil(value) || isNil(options))
+    return
+  if (value === '')
+    return
+
+  const _value = Array.isArray(value) ? value : [value]
+
+  return options
+    .filter(o => _value.includes(o.value))
+    .map(o => o.label)
+    .join(', ')
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+  label: string
+  content?: any
+}>()
+</script>
+
+<template>
+  <div v-if="props.content" class="item-param">
+    <span class="label">{{ props.label }}</span>
+    <span class="content">{{ props.content }}</span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.label {
+  display: inline-block;
+  margin-right: 0.3em;
+  color: theme('colors.gray.DEFAULT');
+}
+
+.content {
+  color: theme('colors.primary.DEFAULT');
+  word-break: break-all;
+}
+</style>

package/antd/admin/FilterReset.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const props = defineProps<{
+  loading?: boolean
+}>()
+const emits = defineEmits<{
+  (e: 'filter'): void
+  (e: 'reset'): void
+}>()
+</script>
+
+<template>
+  <div class="flex w-min mb-6">
+    <AButton class="mr-2" type="primary" :loading="props.loading" @click="emits('filter')">
+      查询
+    </AButton>
+    <AButton :disabled="props.loading" @click="emits('reset')">
+      重置
+    </AButton>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/antd/admin/index.ts

@@ -0,0 +1,3 @@
+export { default as FilterDrawer } from './FilterDrawer.vue'
+export { default as FilterReset } from './FilterReset.vue'
+export { default as FilterParam, paramTypes} from './FilterParam.vue'

package/antd/hooks/createAntdModal.ts

@@ -0,0 +1,61 @@
+import { createVNode, defineComponent, reactive, render as vueRender } from 'vue'
+import { Modal as AntModal } from 'ant-design-vue'
+import { tryOnUnmounted } from '@vueuse/core'
+import type { VNode, Component } from 'vue'
+import type { ModalProps } from 'ant-design-vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { Writable } from 'type-fest'
+
+export function createAntdModal<Comp extends Component>(comp: Comp, defaultModalProps: ModalProps = {}) {
+  type TCompProps = Writable<ComponentProps<Comp>>
+
+  let holderUsed = false // 是否是使用 ContextHolder 的方式挂载弹窗
+  let container: DocumentFragment
+  let instance: VNode
+  const compProps = reactive({} as TCompProps)
+  const modalProps = reactive<ModalProps>({
+    'open': false,
+    'destroyOnClose': true,
+    ...defaultModalProps,
+    'onUpdate:open': (value) => {
+      modalProps.open = value
+    },
+    'afterClose': () => {
+      container && vueRender(null, container as any);
+      (instance as any) = null;
+      (container as any) = null
+    },
+  })
+  const ContextHolder = defineComponent({
+    setup() {
+      if (!instance)
+        holderUsed = true
+    },
+    render() {
+      return createVNode(AntModal, modalProps, { modalRender: () => createVNode(comp, compProps) })
+    },
+  })
+
+  const open = (newCompProps: TCompProps) => {
+    Object.keys(compProps).forEach(k => delete compProps[k])
+    Object.assign(compProps, {
+      ...newCompProps,
+      onClose: close,
+    })
+
+    if (!holderUsed) {
+      container = document.createDocumentFragment()
+      instance = createVNode(ContextHolder)
+      vueRender(instance, container as any)
+    }
+
+    modalProps.open = true
+  }
+  const close = () => {
+    modalProps.open = false
+  }
+
+  tryOnUnmounted(close)
+
+  return { open, close, ContextHolder }
+}

package/antd/hooks/useAntdDrawer.ts

@@ -0,0 +1,73 @@
+import { Button as AButton, Drawer as ADrawer, Space as ASpace } from 'ant-design-vue'
+import { defineComponent, isProxy, reactive, toRefs, toRef, h } from 'vue'
+import type { Component } from 'vue'
+import type { ButtonProps, DrawerProps } from 'ant-design-vue'
+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 }
+
+interface IComponentConfig<Comp extends Component> {
+  is: Comp
+  props?: Writable<ComponentProps<Comp>>
+}
+
+export function useAntdDrawer<Comp extends Component>(
+  comp: IComponentConfig<Comp> | Comp,
+  drawerProps = defaultDrawerProps,
+) {
+  const _comp = ({ props: {}, ...((comp as any)?.is ? comp : { is: comp }) }) as Required<IComponentConfig<Comp>>
+  const compProps = reactive(_comp.props)
+  const compRef = useComponentRef(_comp.is)
+  const _drawerProps: DrawerProps = reactive({
+    ...defaultDrawerProps,
+    ...isProxy(drawerProps) ? toRefs(drawerProps) : drawerProps,
+  })
+
+  const open = (newBodyProps?: Partial<typeof compProps>, newAntdModalProps?: Omit<Partial<DrawerProps>, 'open'>) => {
+    Object.assign(_drawerProps, newAntdModalProps)
+    Object.assign(compProps, newBodyProps)
+    _drawerProps.open = true
+  }
+  const close = () => {
+    _drawerProps.open = false
+  }
+
+  const DrawerExtra = defineComponent({
+    setup() {
+      const cancelBtnProps: ButtonProps = reactive({ onClick: close })
+      const confirmBtnProps: ButtonProps = reactive({
+        type: 'primary',
+        loading: toRef(() => (compRef as any)?.loading),
+        onClick: () => (compRef as any)?.confirm?.(),
+      })
+
+      return { cancelBtnProps, confirmBtnProps }
+    },
+    render() {
+      const { cancelBtnProps, confirmBtnProps } = this
+
+      return h(ASpace, {}, () => [
+        h(AButton, cancelBtnProps, () => '取消'),
+        h(AButton, confirmBtnProps, () => '确定'),
+      ])
+    },
+  })
+  const PresetComponent = defineComponent({
+    render() {
+      return h(ADrawer, _drawerProps, {
+        default: () => h(_comp.is, compProps as any),
+      })
+    },
+  })
+
+  _drawerProps.extra = _drawerProps.extra === undefined ? h(DrawerExtra) : _drawerProps.extra
+  _drawerProps['onUpdate:open'] = (visiable) => {
+    _drawerProps.open = visiable
+  }
+  (compProps as any).ref = compRef;
+  (compProps as any).onClose = close
+
+  return { PresetComponent, drawerProps: _drawerProps, open, close }
+}

package/antd/hooks/useAntdForm.helpers.ts

@@ -0,0 +1,48 @@
+export { buildGroupFieldName, parseGroupFieldName, isSameGroup, isSameField, getGroupIndex, GROUP_SEP }
+
+const GROUP_SEP = '__'
+const groupFieldNameRE = new RegExp(
+  `(?<groupName>[a-zA-Z0-9]+)${GROUP_SEP}(?<index>\\d+)${GROUP_SEP}(?<fieldName>[a-zA-Z0-9]+)`,
+)
+
+function buildGroupFieldName(name: string, index: number, field: string) {
+  return name + GROUP_SEP + index + GROUP_SEP + field
+}
+
+function parseGroupFieldName(name: string) {
+  const res = name.match(groupFieldNameRE)
+  const ret = {
+    fieldName: '',
+    index: -1,
+    groupName: '',
+  }
+
+  if (res?.groups) {
+    ret.fieldName = res.groups.fieldName
+    ret.index = Number(res.groups.index)
+    ret.groupName = res.groups.groupName
+  }
+
+  return ret
+}
+
+function getGroupIndex(name: string, schemas: Record<string, any>) {
+  const indexs = Object.keys(schemas).map((key) => {
+    const { groupName, index } = parseGroupFieldName(key)
+    return groupName === name ? index : -1
+  })
+
+  return Math.max.apply(undefined, indexs)
+}
+
+function isSameGroup(name: string, groupName: string) {
+  const { groupName: gn } = parseGroupFieldName(name)
+
+  return gn === groupName
+}
+
+function isSameField(name: string, fieldName: string) {
+  const { fieldName: fn } = parseGroupFieldName(name)
+
+  return fn === fieldName
+}

package/antd/hooks/useAntdForm.ts

@@ -0,0 +1,91 @@
+import { reactiveComputed } from '@vueuse/core'
+import type { FormInstance, FormItemProps, FormProps, RuleObject } from 'ant-design-vue/es/form'
+import { ref, computed } from 'vue'
+import type { ComputedRef, UnwrapRef } from 'vue'
+import { GROUP_SEP, buildGroupFieldName, getGroupIndex } from './useAntdForm.helpers'
+
+export { useAntdForm }
+export type { TField }
+
+function useAntdForm<F extends Record<string, TField>, S extends GetFormState<F>, STF = S>(
+  schemas: F,
+  _options?: {
+    transform?: (state: S) => STF
+  },
+) {
+  const formRef = ref<FormInstance>()
+  const $form = {
+    get clearValidate() {
+      return formRef.value?.clearValidate
+    },
+    get getFieldsValue() {
+      return formRef.value?.getFieldsValue
+    },
+    get resetFields() {
+      return formRef.value?.resetFields
+    },
+    get scrollToField() {
+      return formRef.value?.scrollToField
+    },
+    get validate() {
+      return formRef.value?.validate
+    },
+    get validateFields() {
+      return formRef.value?.validateFields
+    },
+    setField(name: string, schema: TField) {
+      (schemas as any)[name] = schema
+    },
+    addGroup(groupName: string, groupSchemas: Record<string, TField>) {
+      const i = getGroupIndex(groupName, schemas) + 1
+
+      Object.keys(groupSchemas).forEach((key) => {
+        const name = buildGroupFieldName(groupName, i, key);
+        (schemas as any)[name] = groupSchemas[key]
+      })
+    },
+    removeGroup(groupName: string, index?: number) {
+      const i = index ?? getGroupIndex(groupName, schemas)
+
+      Object.keys(schemas).forEach((key) => {
+        if (key.startsWith(groupName + GROUP_SEP + i))
+          Reflect.deleteProperty(schemas, key)
+      })
+    },
+  }
+  const state = reactiveComputed(() => {
+    return Object.fromEntries(Object.entries(schemas).map(([k, v]) => [k, v.value])) as S
+  })
+  const props = reactiveComputed<FormProps>(() => {
+    return {
+      model: state,
+      ref: (c: any) => (formRef.value = c),
+    }
+  })
+  const itemProps = reactiveComputed(() => {
+    const propsTuple = Object.entries(schemas).map(([key, value]): [string, FormItemProps] => [
+      key,
+      { name: key, rules: value.rules },
+    ])
+    const props = Object.fromEntries(propsTuple) as Record<keyof S, FormItemProps>
+
+    return props
+  })
+  const stateTF = _options?.transform ? computed(() => _options.transform!(state)) : computed(() => state)
+
+  return {
+    $form,
+    state,
+    stateTF: stateTF as ComputedRef<STF>,
+    props,
+    itemProps,
+  }
+}
+
+interface TField {
+  value: any
+  rules?: RuleObject[]
+}
+type GetFormState<C extends Record<string, TField>> = {
+  [K in keyof C]: UnwrapRef<C[K]['value']>;
+}

package/antd/hooks/useAntdModal.ts

@@ -0,0 +1,65 @@
+import { Modal as AntModal } from 'ant-design-vue'
+import { createVNode, defineComponent, isProxy, reactive, toRefs, toRef } from 'vue'
+import type { Component } from 'vue'
+import type { ModalProps } from 'ant-design-vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { Writable } from 'type-fest'
+import { useComponentRef } from '../../vue'
+
+const defaultModalProps: ModalProps = { open: false, destroyOnClose: true, wrapClassName: 'antd-cover__basic-modal' }
+
+interface IComponentConfig<Comp extends Component> {
+  is: Comp
+  props?: Writable<ComponentProps<Comp>>
+  type?: 'modal' | 'body'
+}
+
+/**
+ * AntdModal 组件的辅助 Hook
+ * @param comp 组件配置，也可以直接传入组件，既 comp.is 参数
+ * @param comp.is 组件
+ * @param comp.props 组件的 Props
+ * @param comp.type 组件类型，modal 为弹窗组件，body 为弹窗内容组件
+ * @param modalProps AntdModal 组件的 Props
+ */
+export function useAntdModal<Comp extends Component>(
+  comp: IComponentConfig<Comp> | Comp,
+  modalProps = defaultModalProps,
+) {
+  const _comp = ({ props: {}, type: 'body', ...((comp as any)?.is ? comp : { is: comp }) }) as Required<IComponentConfig<Comp>>
+  const compProps = reactive(_comp.props)
+  const compRef = useComponentRef(_comp.is)
+  const _modalProps: ModalProps = reactive({
+    ...defaultModalProps,
+    ...isProxy(modalProps) ? toRefs(modalProps) : modalProps,
+    confirmLoading: toRef(() => (compRef as any)?.loading),
+    onOk: () => (compRef as any)?.confirm?.(),
+  })
+  const modalSlotName = _comp.type === 'body' ? 'default' : 'modalRender'
+
+  const open = (newCompProps?: Partial<typeof compProps>, newAntdModalProps?: Omit<Partial<ModalProps>, 'open'>) => {
+    Object.assign(_modalProps, newAntdModalProps)
+    Object.assign(compProps, newCompProps)
+
+    _modalProps.open = true
+  }
+  const close = () => {
+    _modalProps.open = false
+  }
+
+  const PresetComponent = defineComponent({
+    render() {
+      return createVNode(AntModal, _modalProps, {
+        [modalSlotName]: () => createVNode(_comp.is, compProps as any),
+      })
+    },
+  })
+
+  _modalProps['onUpdate:open'] = (visiable) => {
+    _modalProps.open = visiable
+  }
+  (compProps as any).ref = compRef;
+  (compProps as any).onClose = close
+
+  return { PresetComponent, modalProps: _modalProps, compProps, $comp: compRef, open, close }
+}

package/antd/hooks/useAntdTable.ts

@@ -0,0 +1,70 @@
+import { computed } 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'
+import type { ComponentProps } from 'vue-component-type-helpers'
+
+export function useAntdTable<
+  UQRR extends UseQueryReturnType<any, any>,
+  QP extends Partial<{ page?: string | number; page_size?: string | number }>,
+>(uqrt: UQRR, queryParams: QP) {
+  type RecordType = GetRecordType<UQRR>
+  type LocalTableProps = TableProps<RecordType>
+  type LocalColumnsType = NonNullable<LocalTableProps['columns']>
+
+  const { data, isFetching, isLoading } = uqrt
+
+  const onPaginationChange: ComponentProps<typeof Table>['onChange'] = (pagination) => {
+    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 tableProps = computed<LocalTableProps>(() => {
+    const { list, pagination } = data.value ?? {}
+
+    return {
+      dataSource: list,
+      pagination: {
+        disabled: isFetching.value,
+        current: Number(queryParams.page ?? 1),
+        pageSize: Number(queryParams.page_size ?? 10),
+        total: pagination?.total ?? 0,
+      },
+      loading: isLoading.value,
+      scroll: { x: 'max-content' },
+      sticky: true,
+      onChange: onPaginationChange as any,
+    }
+  })
+  const dataIndexs = new Proxy({} as Record<keyof RecordType, string>, {
+    get(_, p) {
+      return p
+    },
+  })
+  const bodyCellType = {} as {
+    index: number
+    text: any
+    value: any
+    record: RecordType
+    column: ColumnType<RecordType>
+  }
+
+  return {
+    /** ATable 的预设 Props */
+    tableProps,
+    /** 【类型辅助】基于接口数据类型推导出的 dataIndex，供 columns 的 dataIndex 使用 */
+    dataIndexs,
+    /** 【类型辅助】bodyCell 插槽数据的精确类型描述 */
+    bodyCellType,
+    /** 【类型辅助】用于定义出类型精确的 columns  */
+    defineColumns,
+    onPaginationChange,
+  }
+}
+
+type GetRecordType<T> = T extends UseQueryReturnType<infer D, any>
+  ? D extends Api.PageData
+    ? NonNullable<D['list']>[0]
+    : never
+  : never

package/antd/index.ts

@@ -0,0 +1,5 @@
+export { useAntdModal } from './hooks/useAntdModal'
+export { useAntdDrawer } from './hooks/useAntdDrawer'
+export { useAntdTable } from './hooks/useAntdTable'
+export { useAntdForm } from './hooks/useAntdForm'
+export { createAntdModal } from './hooks/createAntdModal'

package/component/infinite-query/index.ts

@@ -0,0 +1 @@
+export { default as InfiniteQuery } from './src/InfiniteQuery.vue'