@peng_kai/kit 0.1.17 → 0.2.0-beta.0

package/admin/{hooks/usePage.ts → stores/createUsePageStore.ts}

@@ -1,141 +1,145 @@
-import { createGlobalState, usePrevious } from '@vueuse/core';
-import type { RouteLocationNormalizedLoaded } from 'vue-router';
-import { computed, reactive, readonly, ref, shallowRef, watch } from 'vue';
-import type { VNode } from 'vue';
-import { getTitle } from '../defines/route';
-import { getDependencies } from '../../kitDependencies';
-import { useMenu } from './useMenu';
-import type { TMenu } from './useMenu';
-
-export { usePage };
-export type { TPageState, IBreadcrumb };
-
-type TPageState = ReturnType<typeof getPageState>;
-
-interface IBreadcrumb {
-  title: string
-  icon?: VNode | null
-  trigger?: () => void
-  children?: IBreadcrumb[]
-}
-
-const usePage = createGlobalState(() => {
-  const { useRouter } = getDependencies();
-  const router = useRouter();
-  const currentPageNode = shallowRef<VNode>();
-  const currentPageKey = ref('');
-  const pageCacheList = reactive<string[]>([]);
-  const pageStateMap = new Map<string, TPageState>();
-  const currentPageState = computed(() => pageStateMap.get(currentPageKey.value));
-  const previousPageState = usePrevious(currentPageState);
-
-  const openPage = (key: string) => {
-    const route = pageStateMap.get(key)?.route;
-
-    if (!route)
-      return;
-
-    router.push(route.fullPath);
-  };
-
-  const closePage = (key: string) => {
-    if (!pageStateMap.has(key))
-      return;
-
-    const cacheIndex = pageCacheList.indexOf(key);
-    cacheIndex >= 0 && pageCacheList.splice(cacheIndex, 1);
-    // 关闭当前页面则返回上一个路由
-    currentPageKey.value === key && router.go(-1);
-    pageStateMap.delete(key);
-  };
-
-  const setPage = (pageNode: VNode, route: RouteLocationNormalizedLoaded) => {
-    const pageKey = route?.meta?.pageKeyFn?.(route) ?? route.fullPath;
-    const pageInfo = getPageState(route);
-    const canKeepAlive = route.meta.keepAlive && !pageCacheList.includes(pageKey);
-
-    canKeepAlive && pageCacheList.push(pageKey);
-    pageStateMap.has(pageKey) || pageStateMap.set(pageKey, pageInfo)
-
-    ;(pageNode as any).type.name = pageKey;
-    currentPageKey.value = pageKey;
-    currentPageNode.value = pageNode;
-
-    return pageNode;
-  };
-
-  const getCurrentPageState = () => {
-    return pageStateMap.get(currentPageKey.value);
-  };
-
-  // 监听 title 变化
-  watch(() => currentPageState.value?.title, (title) => {
-    let _title = title;
-
-    if (!_title) {
-      const pageState = currentPageState.value;
-
-      // 当前 title 为空时，使用路由 title
-      if (pageState) {
-        _title = getTitle(pageState?.route);
-        pageState.title = _title!;
-      }
-    }
-
-    document.title = _title!;
-  });
-
-  return {
-    currentPageNode,
-    pageCacheList,
-    pageStateMap,
-    currentPageKey,
-    currentPageState,
-    getCurrentPageState,
-    previousPageState,
-    setPage,
-    openPage,
-    closePage,
-  };
-});
-
-function getPageState(route: RouteLocationNormalizedLoaded) {
-  const deps = getDependencies();
-  const appName = deps.appName as string;
-  const { getMenuPath } = useMenu();
-  const menuPath = getMenuPath(route.name as string);
-  const currentMenu = menuPath.pop();
-  const { icon: mIcon } = route.meta;
-  const title = currentMenu?.label ?? getTitle(route) ?? appName;
-  const icon = currentMenu?.icon ?? mIcon?.();
-  const state = reactive({
-    title,
-    icon,
-    breadcrumbs: menuPath.map(menuToBreadcrumb),
-    route: readonly(route),
-    refresh() {
-      const menuKey = this.route.name as string;
-      const { getMenu, getMenuPath } = useMenu();
-      const menu = getMenu(menuKey);
-      const menuPath = getMenuPath(menuKey);
-
-      menuPath.pop();
-
-      this.title = menu?.label ?? getTitle(this.route) ?? appName;
-      this.breadcrumbs = menuPath.map(menuToBreadcrumb);
-    },
-  });
-
-  return state;
-}
-
-function menuToBreadcrumb(menu: TMenu) {
-  const ret: IBreadcrumb = reactive({
-    title: menu.label,
-    icon: menu.icon,
-    trigger: menu.trigger,
-    children: menu.children?.map(menuToBreadcrumb),
-  });
-
-  return ret;
-}
+import { usePrevious } from '@vueuse/core';
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+import { defineStore } from 'pinia';
+import { computed, reactive, readonly, ref, shallowRef, watch } from 'vue';
+import type { VNode } from 'vue';
+import { getTitle } from '../defines/route';
+import { adminPlugin } from '../adminPlugin';
+import type { TMenu } from './createUseMenuStore';
+
+export { createUsePageStore };
+export type { TPageState, TUsePageStore, IBreadcrumb };
+
+type TPageState = ReturnType<typeof getPageState>;
+type TUsePageStore = ReturnType<typeof createUsePageStore>;
+
+interface IBreadcrumb {
+  title: string
+  icon?: VNode | null
+  trigger?: () => void
+  children?: IBreadcrumb[]
+}
+
+function createUsePageStore() {
+  return defineStore('appPage', () => {
+    return storeSetup();
+  });
+}
+
+function storeSetup() {
+  const router = adminPlugin.deps.router;
+  const currentPageNode = shallowRef<VNode>();
+  const currentPageKey = ref('');
+  const pageCacheList = reactive<string[]>([]);
+  const pageStateMap = new Map<string, TPageState>();
+  const currentPageState = computed(() => pageStateMap.get(currentPageKey.value));
+  const previousPageState = usePrevious(currentPageState);
+
+  const openPage = (key: string) => {
+    const route = pageStateMap.get(key)?.route;
+
+    if (!route)
+      return;
+
+    router.push(route.fullPath);
+  };
+
+  const closePage = (key: string) => {
+    if (!pageStateMap.has(key))
+      return;
+
+    const cacheIndex = pageCacheList.indexOf(key);
+    cacheIndex >= 0 && pageCacheList.splice(cacheIndex, 1);
+    // 关闭当前页面则返回上一个路由
+    currentPageKey.value === key && router.go(-1);
+    pageStateMap.delete(key);
+  };
+
+  const setPage = (pageNode: VNode, route: RouteLocationNormalizedLoaded) => {
+    const pageKey = route?.meta?.pageKeyFn?.(route) ?? route.fullPath;
+    const pageInfo = getPageState(route);
+    const canKeepAlive = route.meta.keepAlive && !pageCacheList.includes(pageKey);
+
+    canKeepAlive && pageCacheList.push(pageKey);
+    pageStateMap.has(pageKey) || pageStateMap.set(pageKey, pageInfo)
+
+    ;(pageNode as any).type.name = pageKey;
+    currentPageKey.value = pageKey;
+    currentPageNode.value = pageNode;
+
+    return pageNode;
+  };
+
+  const getCurrentPageState = () => {
+    return pageStateMap.get(currentPageKey.value);
+  };
+
+  // 监听 title 变化
+  watch(() => currentPageState.value?.title, (title) => {
+    let _title = title;
+
+    if (!_title) {
+      const pageState = currentPageState.value;
+
+      // 当前 title 为空时，使用路由 title
+      if (pageState) {
+        _title = getTitle(pageState?.route);
+        pageState.title = _title!;
+      }
+    }
+
+    document.title = _title!;
+  });
+
+  return {
+    currentPageNode,
+    pageCacheList,
+    pageStateMap,
+    currentPageKey,
+    currentPageState,
+    getCurrentPageState,
+    previousPageState,
+    setPage,
+    openPage,
+    closePage,
+  };
+}
+
+function getPageState(route: RouteLocationNormalizedLoaded) {
+  const menuStore = adminPlugin.deps.useMenuStore()!;
+  const appName = adminPlugin.meta.appName;
+  const menuPath = menuStore.getMenuPath(route.name as string);
+  const currentMenu = menuPath.pop();
+  const { icon: mIcon } = route.meta;
+  const title = currentMenu?.label ?? getTitle(route) ?? appName;
+  const icon = currentMenu?.icon ?? mIcon?.();
+  const state = reactive({
+    title,
+    icon,
+    breadcrumbs: menuPath.map(menuToBreadcrumb),
+    route: readonly(route),
+    refresh() {
+      const menuKey = this.route.name as string;
+      const menu = menuStore.getMenu(menuKey);
+      const menuPath = menuStore.getMenuPath(menuKey);
+
+      menuPath.pop();
+
+      this.title = menu?.label ?? getTitle(this.route) ?? appName;
+      this.breadcrumbs = menuPath.map(menuToBreadcrumb);
+    },
+  });
+
+  return state;
+}
+
+function menuToBreadcrumb(menu: TMenu) {
+  const ret: IBreadcrumb = reactive({
+    title: menu.label,
+    icon: menu.icon,
+    trigger: menu.trigger,
+    children: menu.children?.map(menuToBreadcrumb),
+  });
+
+  return ret;
+}

package/admin/stores/createUsePageTabStore.ts

@@ -0,0 +1,43 @@
+import { defineStore, storeToRefs } from 'pinia';
+import { computed, ref, watch } from 'vue';
+import { adminPlugin } from '../adminPlugin';
+
+export { createUsePageTabStore };
+export type { TUsePageTabStore };
+
+type TUsePageTabStore = ReturnType<typeof createUsePageTabStore>;
+
+function createUsePageTabStore() {
+  return defineStore('appPageTab', () => storeSetup());
+}
+
+function storeSetup() {
+  const pageStore = adminPlugin.deps.usePageStore!();
+  const { currentPageKey } = storeToRefs(pageStore);
+  const tabKeyList = ref<string[]>([]);
+  const tabList = computed(() => tabKeyList.value.map((key) => {
+    const state = pageStore.pageStateMap.get(key);
+
+    return state ? { key, title: state.title, icon: state.icon } : undefined!;
+  }).filter(tab => !!tab));
+
+  const closeTab = (key: string) => {
+    const i = tabKeyList.value.indexOf(key);
+
+    if (i > -1) {
+      pageStore.closePage(key);
+      setTimeout(() => tabKeyList.value.splice(i, 1));
+    }
+  };
+
+  watch(
+    () => pageStore.currentPageKey,
+    (key) => {
+      if (!tabKeyList.value.includes(key))
+        tabKeyList.value.push(key);
+    },
+    { immediate: true },
+  );
+
+  return { activeTab: currentPageKey, tabList, closeTab, openTab: pageStore.openPage };
+}

package/admin/{permission/usePermission.ts → stores/createUsePermissionStore.ts}

@@ -1,52 +1,57 @@
-import { createGlobalState } from '@vueuse/core';
-import type { AsyncReturnType } from 'type-fest';
-import { computed, readonly, ref, watch } from 'vue';
-import { getDependencies } from '../../kitDependencies';
-
-export { usePermission };
-export type { TRole };
-
-type TRole = () => Promise<Record<string, boolean> | null | undefined>;
-
-const usePermission = createGlobalState(() => {
-  const { roles } = getDependencies();
-  const role = ref('main');
-  const permissionCodes = ref<AsyncReturnType<TRole>>();
-  const permissionCodesStr = computed(() => Object.keys(permissionCodes.value ?? {}).sort().join(','));
-
-  /**
-   * 刷新权限
-   */
-  const refreshPermission = async () => {
-    permissionCodes.value = await roles[role.value]?.();
-
-    return permissionCodes.value;
-  };
-
-  /**
-   * 是否满足权限要求
-   * @param codes 权限 code
-   */
-  const hasPermissions = (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 {
-    permissionCodes: readonly(permissionCodes),
-    permissionCodesStr,
-    role,
-    hasPermissions,
-    refreshPermission,
-  };
-});
+import { computed, readonly, ref, watch } from 'vue';
+import { defineStore } from 'pinia';
+import type { AsyncReturnType } from 'type-fest';
+import { adminPlugin } from '../adminPlugin';
+
+export { createUsePermissionStore };
+export type { TRole, TUsePermissionStore };
+
+type TRole = () => Promise<Record<string, boolean> | null | undefined>;
+type TUsePermissionStore = ReturnType<typeof createUsePermissionStore>;
+
+function createUsePermissionStore() {
+  return defineStore('appPermission', () => storeSetup());
+}
+
+function storeSetup() {
+  const roles = adminPlugin.deps.roles;
+  const role = ref('main');
+  const permissionCodes = ref<AsyncReturnType<TRole>>();
+  const permissionCodesStr = computed(() => Object.keys(permissionCodes.value ?? {}).sort().join(','));
+
+  /**
+   * 刷新权限
+   */
+  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 {
+    permissionCodes: readonly(permissionCodes),
+    permissionCodesStr,
+    role,
+    hasPermission,
+    refreshPermission,
+  };
+}

package/admin/stores/index.ts

@@ -0,0 +1,8 @@
+export { createUsePageStore } from './createUsePageStore';
+export { createUseMenuStore } from './createUseMenuStore';
+export { createUsePageTabStore } from './createUsePageTabStore';
+export { createUsePermissionStore } from './createUsePermissionStore';
+
+export type { TPageState, TUsePageStore, IBreadcrumb } from './createUsePageStore';
+export type { TUseMenuStore } from './createUseMenuStore';
+export type { TUsePageTabStore } from './createUsePageTabStore';

package/admin/styles/classCover.scss

@@ -48,6 +48,14 @@
   }
 }
 
+// 表单两列布局
+.ant-form.ant-cover__col2-form {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 24px;
+  align-content: flex-start;
+}
+
 // 弹窗的基本款样式
 .ant-modal-wrap.antd-cover__basic-modal {
   --padding-size: 22px;

package/antd/hooks/useAntdForm.helpers.ts

@@ -1,15 +1,38 @@
-export { buildGroupFieldName, parseGroupFieldName, isSameGroup, isSameField, getGroupIndex, GROUP_SEP };
+import type { FormItemProps } from 'ant-design-vue/es/form';
+
+export {
+  buildGroupField,
+  parseGroupField,
+  groupingForm,
+  formatGroup,
+  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]+)`,
+  `(?<groupName>.+?)${GROUP_SEP}(?<index>\\d+)${GROUP_SEP}(?<fieldName>.+)`,
 );
 
-function buildGroupFieldName(name: string, index: number, field: string) {
+/**
+ * 构建组字段名
+ * @param name - 组名
+ * @param index - 组索引
+ * @param field - 字段名
+ * @returns 返回组字段名
+ */
+function buildGroupField(name: string, index: number, field: string) {
   return name + GROUP_SEP + index + GROUP_SEP + field;
 }
 
-function parseGroupFieldName(name: string) {
+/**
+ * 解析组字段名
+ * @param name - 组字段名
+ * @returns 返回一个数组，包含组名、组索引和字段名
+ */
+function parseGroupField(name: string) {
   const res = name.match(groupFieldNameRE);
   const ret = {
     fieldName: '',
@@ -26,23 +49,84 @@ function parseGroupFieldName(name: string) {
   return ret;
 }
 
+/**
+ * 根据指定的组名对表单项进行分组
+ * @param groupName - 要分组的组名
+ * @param items - 包含表单项的对象
+ * @returns 返回一个对象，其键为组索引，值为该组内的表单项
+ */
+function groupingForm(groupName: string, items: Record<string, FormItemProps>) {
+  const _groups: Record<number, typeof items> = {};
+
+  for (const [key, item] of Object.entries(items)) {
+    const { groupName: name, index } = parseGroupField(key);
+
+    if (name === groupName) {
+      _groups[index] ??= {};
+      _groups[index][key] = item;
+    }
+  }
+
+  return _groups;
+}
+
+/**
+ * 格式化表单项组
+ * @param name - 组名
+ * @param items - 包含表单数据
+ * @returns 返回一个数组，其元素为分组后的表单项对象，如果没有找到匹配的组名，则返回 undefined
+ */
+function formatGroup(name: string, items: Record<string, any>) {
+  const group: any[] = [];
+
+  for (const k in items) {
+    const params = parseGroupField(k);
+
+    if (params.groupName !== name || params.index === -1)
+      continue;
+
+    group[params.index] ??= {};
+    group[params.index][params.fieldName] = items[k];
+  }
+
+  return group?.length ? group.filter(g => !!g) : undefined;
+}
+
+/**
+ * 获取指定组名的最大索引值
+ * @param name - 组名
+ * @param schemas - 包含组字段的对象
+ * @returns 返回指定组名的最大索引值，如果没有找到匹配的组名，则返回 -1
+ */
 function getGroupIndex(name: string, schemas: Record<string, any>) {
   const indexs = Object.keys(schemas).map((key) => {
-    const { groupName, index } = parseGroupFieldName(key);
+    const { groupName, index } = parseGroupField(key);
     return groupName === name ? index : -1;
   });
 
-  return Math.max.apply(undefined, indexs);
+  return Math.max(...indexs);
 }
 
+/**
+ * 判断指定的名称是否属于同一组
+ * @param name - 要检查的名称
+ * @param groupName - 组名
+ * @returns 如果指定的名称属于同一组，则返回 true，否则返回 false
+ */
 function isSameGroup(name: string, groupName: string) {
-  const { groupName: gn } = parseGroupFieldName(name);
+  const { groupName: gn } = parseGroupField(name);
 
   return gn === groupName;
 }
 
+/**
+ * 判断指定的字段名是否相同
+ * @param name - 要检查的名称
+ * @param fieldName - 字段名
+ * @returns 如果指定的名称和字段名相同，则返回 true，否则返回 false
+ */
 function isSameField(name: string, fieldName: string) {
-  const { fieldName: fn } = parseGroupFieldName(name);
+  const { fieldName: fn } = parseGroupField(name);
 
   return fn === fieldName;
 }