@peng_kai/kit 0.0.10 → 0.0.11

package/admin/filter/FilterReset.vue

@@ -11,8 +11,8 @@ const emits = defineEmits<{
 </script>
 
 <template>
-  <div class="flex w-min">
-    <AButton class="mr-2 filter-btn" type="primary" :loading="props.loading" @click="emits('filter')">
+  <div class="flex-none flex w-min ml-auto">
+    <AButton class="mr-2 filter-btn" type="primary" htmlType="submit" :loading="props.loading" @click="emits('filter')">
       查询
     </AButton>
     <AButton :disabled="props.loading" @click="emits('reset')">

package/admin/filter/index.ts

@@ -1,4 +1,5 @@
 export { default as FilterDrawer } from './FilterDrawer.vue'
 export { default as FilterReset } from './FilterReset.vue'
 export { default as FilterParam, paramTypes} from './FilterParam.vue'
-export { useFilterParams } from './useFilterParams'
+export { useFilterParams } from './useFilterParams'
+export { useFilterInfiniteQuery, useFilterPaginationQuery } from './useFilterQuery'

package/admin/filter/useFilterParams.ts

@@ -1,14 +1,15 @@
 import { extendRef } from '@vueuse/core'
 import { reactive } from "vue";
 
-const defaultPageParams: any = { page: 1, page_size: 10 }
+type PageParams = { page?: string | number; page_size?: string | number }
+const defaultPageParams: PageParams = { page: 1, page_size: 10 }
 
 export function useFilterParams<R extends Api.Request, AP extends Api.GetParam<R>, BP extends AP>(
   _api: R,
   buildParams: () => BP,
-  pageParams: Pick<AP, 'page' | 'page_size'> = defaultPageParams,
+  pageParams = defaultPageParams,
 ) {
-  const params = reactive({ ...pageParams, ...buildParams() } as AP & BP)
+  const params = reactive({ ...pageParams, ...buildParams() } as AP & BP & PageParams)
   const update = (newParams?: Partial<AP>) => {
     Object.assign(params, { ...buildParams(), ...newParams })
   }

package/admin/filter/useFilterQuery.ts

@@ -0,0 +1,31 @@
+import { useFilterParams } from './useFilterParams'
+import { useInfiniteQuery, useQuery } from '@tanstack/vue-query'
+
+/**
+ 
+ */
+export function useFilterPaginationQuery<Api extends Api.Request, P extends Api.GetParam<Api>>(apiFn: Api, paramsFn: () => P) {
+  type Data = Api.GetData<Api>
+
+  const filterParams = useFilterParams(apiFn, paramsFn)
+  const filterQuery = useQuery({
+    keepPreviousData: true,
+    queryKey: [apiFn.id, 'pagination', filterParams],
+    queryFn: () => (apiFn(filterParams) as Promise<Data>),
+  })
+
+  return [filterQuery, filterParams] as const
+}
+
+export function useFilterInfiniteQuery<Api extends Api.Request, P extends Api.GetParam<Api>>(apiFn: Api, paramsFn: () => P) {
+  type Data = Api.GetData<Api>
+
+  const filterParams = useFilterParams(apiFn, paramsFn)
+  const filterQuery = useInfiniteQuery({
+    keepPreviousData: true,
+    queryKey: [apiFn.id, 'infinite', filterParams],
+    queryFn: ctx => (apiFn({ ...filterParams, ...ctx.pageParam }) as Promise<Data>),
+  })
+
+  return [filterQuery, filterParams] as const
+}

package/admin/styles/classCover.scss

@@ -0,0 +1,108 @@
+/*
+  通过为 antd 组件添加 class 的方式覆盖其默认样式
+  格式：antd-cover__xxx
+ */
+
+// 表单气泡 help 提示
+.ant-form.antd-cover__bubble-help-form {
+  .ant-form-show-help {
+    position: relative;
+
+    + div {
+      display: none;
+    }
+
+    > div {
+      position: absolute;
+      z-index: 2;
+      top: 7px;
+      left: -10px;
+      max-width: 70%;
+      box-sizing: border-box;
+      padding: 6px 8px;
+      border-radius: 5px;
+      background-color: rgb(0 0 0 / 75%);
+
+      // box-shadow: 0 0 5px 0 rgb(0 0 0 / 50%);
+      color: #fff !important;
+      filter: drop-shadow(0 0 5px rgb(0 0 0 / 50%));
+      line-height: 1.4em;
+      pointer-events: none;
+
+      // 气泡箭头
+      &::after {
+        position: absolute;
+        top: -7.7px;
+        left: 10px;
+        width: 16px;
+        height: 16px;
+        background-color: rgb(0 0 0 / 75%);
+        clip-path: path('M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z');
+        content: "";
+      }
+    }
+  }
+
+  .ant-form-margin-offset {
+    display: none;
+  }
+}
+
+// 弹窗的基本款样式
+.ant-modal-wrap.antd-cover__basic-modal {
+  --padding-size: 22px;
+
+  // --min-body-height: ;
+  // --max-body-height: ;
+  // --body-height: ;
+
+  .ant-modal-content {
+    padding: 0;
+  }
+
+  .ant-modal-header {
+    display: flex;
+    min-height: 56px;
+    align-items: center;
+    padding: 0 var(--padding-size);
+    border-bottom: 1px solid var(--antd-colorBorderSecondary);
+    margin: 0;
+  }
+
+  .ant-modal-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-modal-footer {
+    display: flex;
+    min-height: 56px;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--padding-size);
+    border-top: 1px solid var(--antd-colorBorderSecondary);
+    margin: 0;
+  }
+}
+
+// 查询器基本样式
+.ant-form.ant-form__filter {
+  display: flex;
+  flex-wrap: wrap;
+  --uno: 'gap-4 mb-4';
+
+  .ant-form-item {
+    margin-bottom: 0;
+    min-width: 220px;
+    width: 250px;
+    max-width: 280px;
+    flex: 1 1 auto;
+  }
+}

package/admin/styles/globalCover.scss

@@ -0,0 +1,43 @@
+:root {
+  // table 组件头部圆角设为 0
+  .ant-table-wrapper {
+    .ant-table .ant-table-header,
+    table,
+    .ant-table-container table > thead > tr:first-child > *:first-child,
+    .ant-table-container table > thead > tr:first-child > *:last-child {
+      border-radius: 0;
+    }
+
+    .ant-pagination {
+      margin-bottom: 0;
+    }
+  }
+
+
+  // 隐藏在 sticky 模式下的滚动条
+  .ant-table-sticky-scroll {
+    display: none;
+  }
+
+  // 卡片
+  .ant-card .ant-card-actions > li > span {
+    cursor: inherit;
+  }
+
+  // Tab 溢出出现下列框时
+  .ant-tabs-dropdown-menu-title-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  // 表格
+  .ant-table-wrapper {
+    .ant-table-row-expand-icon-collapsed::before {
+      height: 1.5px;
+    }
+    .ant-table-row-expand-icon-collapsed::after {
+      width: 1.5px;
+    }
+  }
+}

package/admin/styles/index.scss

@@ -0,0 +1,30 @@
+@import './classCover.scss';
+@import './globalCover.scss';
+
+@media (pointer: fine) {
+  * {
+    scrollbar-color: rgb(0 0 0 / 50%) transparent;
+    scrollbar-width: thin;
+
+    /* overflow-y: overlay; */
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: rgb(0 0 0 / 20%);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(0 0 0 / 60%);
+  }
+}
+
+:root {
+  font-family: var(--antd-fontFamily);
+}

package/admin/unocss/index.ts

@@ -0,0 +1,6 @@
+export const shortcuts = [
+  // 页面板块
+  ['page-section', 'p-4 bg-$antd-colorBgContainer'],
+  // 用于 FormItem 在 flex布局下的自适应
+  [/^fiw-(.*?)_(.*?)_(.*?)$/, ([, w1, w2, w3]) => `min-w-${w1} w-${w2} max-w-${w3} flex-auto`],
+]

package/antd/hooks/useAntdForm.ts

@@ -5,9 +5,13 @@ import type { ComputedRef, UnwrapRef } from 'vue'
 import { GROUP_SEP, buildGroupFieldName, getGroupIndex } from './useAntdForm.helpers'
 
 export { useAntdForm }
-export type { TField }
+export type { TField, RecordToSchemas }
 
-function useAntdForm<F extends Record<string, TField>, S extends GetFormState<F>, STF = S>(
+function useAntdForm<
+  F extends Record<string, TField>, 
+  S extends GetFormState<F>, 
+  STF = S
+>(
   schemas: F,
   _options?: {
     transform?: (state: S) => STF
@@ -82,10 +86,15 @@ function useAntdForm<F extends Record<string, TField>, S extends GetFormState<F>
   }
 }
 
-interface TField {
-  value: any
+interface TField<V = any> {
+  value: V
   rules?: RuleObject[]
 }
+
+type RecordToSchemas<T extends Record<string, unknown>> = {
+  [K in keyof T]: TField<T[K]>
+}
+
 type GetFormState<C extends Record<string, TField>> = {
   [K in keyof C]: UnwrapRef<C[K]['value']>;
-}
+}

package/antd/hooks/useAntdTable.ts

@@ -7,7 +7,7 @@ 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) {
+>(uqrt: UQRR, queryParams: QP = ({} as any)) {
   type RecordType = GetRecordType<UQRR>
   type LocalTableProps = TableProps<RecordType>
   type LocalColumnsType = NonNullable<LocalTableProps['columns']>

package/antd/index.ts

@@ -4,4 +4,4 @@ export { useAntdTable } from './hooks/useAntdTable'
 export { useAntdForm } from './hooks/useAntdForm'
 export { createAntdModal } from './hooks/createAntdModal'
 export { default as InputNumberRange } from './components/InputNumberRange.vue'
-export type { TField } from './hooks/useAntdForm.ts'
+export type { TField, RecordToSchemas } from './hooks/useAntdForm.ts'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peng_kai/kit",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "",
   "main": "index.js",
   "scripts": {

package/request/type.d.ts

@@ -1,5 +1,5 @@
 declare namespace Api {
-  type Request = (reqData: any, options?: Options) => Promise<any>
+  type Request = ((reqData: any, options?: Options) => Promise<any>) & { id: string }
   // type RequestPagination = (reqData: Partial<PageParam>, options?: Options) => Promise<PaginationData<any>>;
   interface PageParam {
     page: number