@peng_kai/kit 0.1.16 → 0.2.0-beta.0

package/admin/adminPlugin.ts

@@ -0,0 +1,47 @@
+import type { App } from 'vue';
+import type { Router } from 'vue-router';
+import type { TUseMenuStore } from './stores/createUseMenuStore';
+import type { TUsePageStore } from './stores/createUsePageStore';
+import type { TUsePageTabStore } from './stores/createUsePageTabStore';
+import type { TRole, TUsePermissionStore } from './stores/createUsePermissionStore';
+
+interface IOtions {
+  meta: {
+    appId: string
+    appName: string
+  }
+  deps: {
+    router: Router
+    roles: Record<string, TRole>
+    useMenuStore: TUseMenuStore
+    usePageStore: TUsePageStore
+    usePageTabStore: TUsePageTabStore
+    usePermissionStore: TUsePermissionStore
+  }
+}
+
+let _meta: IOtions['meta'];
+let _deps: IOtions['deps'];
+
+export const adminPlugin = {
+  install(_app: App, options: IOtions) {
+    _meta = options.meta;
+    _deps = options.deps;
+  },
+  meta: new Proxy({} as IOtions['meta'], {
+    get(_, p) {
+      return _meta?.[p];
+    },
+  }),
+  deps: new Proxy({} as IOtions['deps'], {
+    get(_, p) {
+      const _p = String(p);
+      const _dep = _deps?.[p];
+
+      if (!_dep)
+        throw new Error(`${_p} 不在 kit 依赖中，请通过 kitPlugin 传入 ${_p}`);
+
+      return _dep;
+    },
+  }),
+};

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

@@ -1,78 +1,76 @@
-<script lang="ts">
-import isNil from 'lodash-es/isNil';
-import isFinite from 'lodash-es/isFinite';
-import bignumber from 'bignumber.js';
-import { getDependencies } from '../../../../kitDependencies';
-
-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?: [any, any], template = 'YYYY-MM-DD') {
-  const { dayjs } = getDependencies();
-
-  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>
+<script lang="ts">
+import isNil from 'lodash-es/isNil';
+import isFinite from 'lodash-es/isFinite';
+import bignumber from 'bignumber.js';
+import { dayjs } from '../../../../utils/date';
+
+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?: [any, any], 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/admin/components/filter/src/FilterReset.vue

@@ -29,13 +29,13 @@ const loading = computed(() => {
 });
 
 function filter() {
-  props.filterParams?.update?.({ page: 1 });
+  props.filterParams?.update?.(true);
   emits('filter');
 }
 
 function reset() {
   props.filterForm?.$form.resetFields?.();
-  props.filterParams?.update?.({ page: 1 });
+  props.filterParams?.update?.(true);
   emits('reset');
 }
 </script>

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

@@ -1,28 +1,78 @@
-import { extendRef } from '@vueuse/core';
-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,
-  pageParams = defaultPageParams,
-) {
-  type FinalParams = AP & BP & PageParams;
-  const params = reactive({ ...pageParams, ...buildParams() } as FinalParams);
-  const update = (newParams?: Partial<FinalParams>) => {
-    Object.assign(params, { ...buildParams(), ...newParams, __t: Date.now() });
+import { cloneDeep, eq, mapValues } from 'lodash-es';
+import { type DeepReadonly, type MaybeRefOrGetter, reactive, toRef, watch } from 'vue';
+
+export type ShcemeConfig<T> = {
+  [P in keyof T]: {
+    /**
+     * 属性值。可以传入 普通值、Ref对象、一个函数（get函数，只读）
+     */
+    value: MaybeRefOrGetter<T[P]>
+    /**
+     * 是否是响应式，默认 `false`
+     * - `true`: 值的变化立即生效到 `$params`
+     * - `false`: 值不会立即生效到 `$params`，需要调用 `update`
+     */
+    responsive?: boolean
+    /**
+     * 当值变化时是否重置 `page`，默认 `true`
+     */
+    resetPage?: boolean
+    /**
+     * 在值变化后，生效到 `$params`前，触发 `before` 钩子
+     * @param bp 所有在 `before` 函数中被修改的属性组成的对象
+     * @param np 触发 `before` 函数时的 params 对象
+     */
+    before?(bp: T, np: DeepReadonly<T>): void
+  }
+};
+
+export function useFilterParams<T extends Record<string, any>>(shcemes: ShcemeConfig<T>) {
+  // 设置默认值
+  Object.values(shcemes).forEach((s) => {
+    s.resetPage ??= true;
+  });
+
+  // 好像不需要 resetPage，因为参数一旦变化肯定要重置分页的
+  (shcemes as any).page ??= { value: 1, responsive: true, resetPage: false };
+  (shcemes as any).page_size ??= { value: 10, responsive: true, resetPage: true };
+
+  const modifiableParams = reactive(mapValues(shcemes, o => toRef(o.value))) as T;
+  const pesponsiveParams = Object.keys(modifiableParams).filter(k => !!shcemes[k]?.responsive).map(k => toRef(modifiableParams, k));
+  const readonlyParams = reactive(cloneDeep(modifiableParams));
+
+  const update = (force?: boolean) => {
+    const prevParams = Object.freeze({ ...modifiableParams });
+    const beforeParams = {};
+    const modifiedParamKeys = Object.keys(readonlyParams).filter(pk => !eq(modifiableParams[pk], readonlyParams[pk]));
+    const beforeFuns = Object.entries(shcemes).filter(([k, s]) => modifiedParamKeys.includes(k) && !!s.effect).map(([_, s]) => s.effect!);
+    const needResetPage = modifiedParamKeys.some(k => !!shcemes[k]?.resetPage);
+    const pageParams = needResetPage || !!force ? { page: 1 } : {};
+
+    beforeFuns.forEach(fun => fun(beforeParams, prevParams));
+    Object.assign(readonlyParams, prevParams, pageParams, beforeParams);
+
+    for (const k in readonlyParams) {
+      // 为了拦截“只读属性赋值”的报错，因为无法判断哪些属性是只读的
+      try {
+        // @ts-expect-error 类型错误，暂时不理会
+        modifiableParams[k] = readonlyParams[k];
+      }
+      catch {}
+    }
+
+    if (force)
+      Reflect.set(readonlyParams, '__t', Date.now());
+  };
+
+  watch(pesponsiveParams, () => update(), { deep: true });
+
+  const extra = {
+    /** 给查询器使用 */
+    $params: readonlyParams,
+    /** 更新值 */
+    update,
   };
+  Object.setPrototypeOf(modifiableParams, extra);
 
-  return extendRef(params, { update });
+  return modifiableParams as typeof modifiableParams & typeof extra;
 }

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

@@ -1,30 +1,46 @@
 import { useInfiniteQuery, useQuery } from '@tanstack/vue-query';
-import { useFilterParams } from './useFilterParams';
+import { getNextPageParam, keepPreviousData } from '../../../../request/queryClient';
+import { type ShcemeConfig, useFilterParams } from './useFilterParams';
 
 /**
-
+ * 函数用于创建一个带有过滤参数的分页查询。
+ *
+ * @param apiFn - API函数
+ * @param params - 过滤参数的配置
+ * @returns 返回一个元组，包含查询对象和过滤参数
  */
-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);
+export function useFilterPaginationQuery<
+  Api extends Api.Request,
+  P extends Api.GetParam<Api>,
+>(apiFn: Api, params: ShcemeConfig<P>) {
+  const filterParams = useFilterParams<Api.GetParam<Api>>(params);
   const filterQuery = useQuery({
-    keepPreviousData: true,
-    queryKey: [apiFn.id, 'pagination', filterParams],
-    queryFn: () => (apiFn(filterParams) as Promise<Data>),
+    queryKey: [apiFn.id, 'pagination', filterParams.$params],
+    queryFn: () => apiFn(filterParams.$params) as Promise<Api.GetData<Api>>,
+    placeholderData: keepPreviousData,
   });
 
   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);
+/**
+ * 函数用于创建一个带有过滤参数的无限滚动查询。
+ *
+ * @param apiFn - API函数
+ * @param params - 过滤参数的配置
+ * @returns 返回一个数组，包含查询对象和过滤参数
+ */
+export function useFilterInfiniteQuery<
+  Api extends Api.Request,
+  P extends Api.GetParam<Api>,
+>(apiFn: Api, params: ShcemeConfig<P>) {
+  const filterParams = useFilterParams<Api.GetParam<Api>>(params);
   const filterQuery = useInfiniteQuery({
-    keepPreviousData: true,
-    queryKey: [apiFn.id, 'infinite', filterParams],
-    queryFn: ctx => (apiFn({ ...filterParams, ...ctx.pageParam }) as Promise<Data>),
+    queryKey: [apiFn.id, 'infinite', filterParams.$params],
+    queryFn: ctx => (apiFn({ ...filterParams.$params, ...ctx.pageParam }) as Promise<Api.GetData<Api>>),
+    initialPageParam: { page: 1, page_size: 10 },
+    placeholderData: keepPreviousData,
+    getNextPageParam,
   });
 
   return [filterQuery, filterParams] as const;

package/admin/components/rich-text/index.ts

@@ -0,0 +1,2 @@
+export { default as RichText } from './src/RichText.vue';
+export { createImageUploaderForAws3 } from './src/imageUploader';