@peng_kai/kit 0.1.10 → 0.1.11

package/admin/hooks/useMenu.ts

@@ -1,128 +1,128 @@
-import { createGlobalState } from '@vueuse/core';
-import { computed, reactive, ref } from 'vue';
-import type { Ref, UnwrapNestedRefs, VNode } from 'vue';
-
-export { useMenu };
-export type { TMenu };
-
-interface IMenuConfig {
-  key: string
-  label: string | (() => string)
-  icon?: () => VNode
-  order: number
-  trigger: () => void
-  children?: IMenuConfig[]
-}
-
-interface IMenuReactive {
-  key: string
-  label: Ref<string>
-  icon: Ref<VNode | null>
-  order: number
-  trigger: () => void
-  children?: IMenuReactive[]
-}
-
-type TMenu = UnwrapNestedRefs<IMenuReactive>;
-
-const useMenu = createGlobalState(() => {
-  const menus = reactive<TMenu[]>([]);
-  const collapsed = ref(false);
-
-  const findMenu = (menus: TMenu[], key: string) => {
-    const queue = [...menus];
-
-    while (queue.length > 0) {
-      const menu = queue.shift()!;
-
-      if (menu.key === key)
-        return menu;
-
-      if (menu.children)
-        queue.push(...menu.children);
-    }
-
-    return undefined;
-  };
-
-  /**
-   * 获取目标路由的路径
-   * @param key 目标路由
-   */
-  const getMenuPath = (key: string) => {
-    const path: TMenu[] = [];
-
-    const _getMenuPath = (menus: TMenu[], key: string) => {
-      for (const menu of menus) {
-        if (menu.key === key) {
-          path.push(menu);
-          return true;
-        }
-
-        if (menu.children) {
-          path.push(menu);
-          if (_getMenuPath(menu.children, key))
-            return true;
-          path.pop();
-        }
-      }
-
-      return false;
-    };
-
-    _getMenuPath(menus, key);
-
-    return path;
-  };
-
-  const addMenu = (menuConfig: IMenuConfig, parentKey?: string) => {
-    const labelGetter = typeof menuConfig.label === 'function' ? menuConfig.label : (() => menuConfig.label) as (() => string);
-    const iconGetter = typeof menuConfig.icon === 'function' ? menuConfig.icon : () => null;
-
-    const _menu = reactive<IMenuReactive>({
-      key: menuConfig.key,
-      label: computed(labelGetter),
-      icon: computed(iconGetter),
-      trigger: menuConfig.trigger,
-      order: menuConfig.order,
-    });
-
-    if (parentKey) {
-      const parentMenu = findMenu(menus, parentKey);
-
-      if (!parentMenu)
-        return;
-
-      const children = reactive(parentMenu.children ?? []);
-      children.push(_menu);
-      children.sort((a, b) => b.order - a.order);
-      parentMenu.children = children;
-    }
-    else {
-      menus.push(_menu);
-      menus.sort((a, b) => b.order - a.order);
-    }
-  };
-
-  const removeMenu = (key: string) => {
-    const _remove = (menus: TMenu[], key: string) => {
-      for (let i = 0; i < menus.length; i++) {
-        const menu = menus[i];
-        if (menu.key === key) {
-          menus.splice(i, 1);
-          return;
-        }
-        if (menu.children)
-          _remove(menu.children, key);
-      }
-    };
-
-    return _remove(menus, key);
-  };
-
-  const getMenu = (key: string) => {
-    return findMenu(menus, key);
-  };
-
-  return { menus, collapsed, getMenuPath, addMenu, removeMenu, getMenu };
-});
+import { createGlobalState } from '@vueuse/core';
+import { computed, reactive, ref } from 'vue';
+import type { Ref, UnwrapNestedRefs, VNode } from 'vue';
+
+export { useMenu };
+export type { TMenu };
+
+interface IMenuConfig {
+  key: string
+  label: string | (() => string)
+  icon?: () => VNode
+  order: number
+  trigger: () => void
+  children?: IMenuConfig[]
+}
+
+interface IMenuReactive {
+  key: string
+  label: Ref<string>
+  icon: Ref<VNode | null>
+  order: number
+  trigger: () => void
+  children?: IMenuReactive[]
+}
+
+type TMenu = UnwrapNestedRefs<IMenuReactive>;
+
+const useMenu = createGlobalState(() => {
+  const menus = reactive<TMenu[]>([]);
+  const collapsed = ref(false);
+
+  const findMenu = (menus: TMenu[], key: string) => {
+    const queue = [...menus];
+
+    while (queue.length > 0) {
+      const menu = queue.shift()!;
+
+      if (menu.key === key)
+        return menu;
+
+      if (menu.children)
+        queue.push(...menu.children);
+    }
+
+    return undefined;
+  };
+
+  /**
+   * 获取目标路由的路径
+   * @param key 目标路由
+   */
+  const getMenuPath = (key: string) => {
+    const path: TMenu[] = [];
+
+    const _getMenuPath = (menus: TMenu[], key: string) => {
+      for (const menu of menus) {
+        if (menu.key === key) {
+          path.push(menu);
+          return true;
+        }
+
+        if (menu.children) {
+          path.push(menu);
+          if (_getMenuPath(menu.children, key))
+            return true;
+          path.pop();
+        }
+      }
+
+      return false;
+    };
+
+    _getMenuPath(menus, key);
+
+    return path;
+  };
+
+  const addMenu = (menuConfig: IMenuConfig, parentKey?: string) => {
+    const labelGetter = typeof menuConfig.label === 'function' ? menuConfig.label : (() => menuConfig.label) as (() => string);
+    const iconGetter = typeof menuConfig.icon === 'function' ? menuConfig.icon : () => null;
+
+    const _menu = reactive<IMenuReactive>({
+      key: menuConfig.key,
+      label: computed(labelGetter),
+      icon: computed(iconGetter),
+      trigger: menuConfig.trigger,
+      order: menuConfig.order,
+    });
+
+    if (parentKey) {
+      const parentMenu = findMenu(menus, parentKey);
+
+      if (!parentMenu)
+        return;
+
+      const children = reactive(parentMenu.children ?? []);
+      children.push(_menu);
+      children.sort((a, b) => b.order - a.order);
+      parentMenu.children = children;
+    }
+    else {
+      menus.push(_menu);
+      menus.sort((a, b) => b.order - a.order);
+    }
+  };
+
+  const removeMenu = (key: string) => {
+    const _remove = (menus: TMenu[], key: string) => {
+      for (let i = 0; i < menus.length; i++) {
+        const menu = menus[i];
+        if (menu.key === key) {
+          menus.splice(i, 1);
+          return;
+        }
+        if (menu.children)
+          _remove(menu.children, key);
+      }
+    };
+
+    return _remove(menus, key);
+  };
+
+  const getMenu = (key: string) => {
+    return findMenu(menus, key);
+  };
+
+  return { menus, collapsed, getMenuPath, addMenu, removeMenu, getMenu };
+});

package/admin/hooks/usePage.ts

@@ -1,141 +1,141 @@
-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 { 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;
+}

package/admin/hooks/usePageTab.ts

@@ -1,35 +1,35 @@
-import { createGlobalState } from '@vueuse/core';
-import { computed, ref, watch } from 'vue';
-import { usePage } from './usePage';
-
-export { usePageTab };
-
-const usePageTab = createGlobalState(() => {
-  const { currentPageKey, pageStateMap, openPage, closePage } = usePage();
-  const tabKeyList = ref<string[]>([]);
-  const tabList = computed(() => tabKeyList.value.map((key) => {
-    const state = 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) {
-      closePage(key);
-      setTimeout(() => tabKeyList.value.splice(i, 1));
-    }
-  };
-
-  watch(
-    currentPageKey,
-    (key) => {
-      if (!tabKeyList.value.includes(key))
-        tabKeyList.value.push(key);
-    },
-    { immediate: true },
-  );
-
-  return { activeTab: currentPageKey, tabList, closeTab, openTab: openPage };
-});
+import { createGlobalState } from '@vueuse/core';
+import { computed, ref, watch } from 'vue';
+import { usePage } from './usePage';
+
+export { usePageTab };
+
+const usePageTab = createGlobalState(() => {
+  const { currentPageKey, pageStateMap, openPage, closePage } = usePage();
+  const tabKeyList = ref<string[]>([]);
+  const tabList = computed(() => tabKeyList.value.map((key) => {
+    const state = 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) {
+      closePage(key);
+      setTimeout(() => tabKeyList.value.splice(i, 1));
+    }
+  };
+
+  watch(
+    currentPageKey,
+    (key) => {
+      if (!tabKeyList.value.includes(key))
+        tabKeyList.value.push(key);
+    },
+    { immediate: true },
+  );
+
+  return { activeTab: currentPageKey, tabList, closeTab, openTab: openPage };
+});