@peng_kai/kit 0.0.14 → 0.0.16

package/admin/hooks/usePage.ts

@@ -1,139 +1,141 @@
-import { createGlobalState, usePrevious } from '@vueuse/core'
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
-import { shallowRef, ref, reactive, computed, watch, readonly } from 'vue'
-import type { VNode } from 'vue'
-import { useMenu } from './useMenu'
-import type { TMenu } from './useMenu'
-import { getTitle } from '../defines/defineRoute.helpers'
-import { getDependencies } from "../../kitDependencies";
-
-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 { getMenuPath } = useMenu()
-  const menuPath = getMenuPath(route.name as string)
-  const currentMenu = menuPath.pop()
-  const { icon: mIcon } = route.meta
-  const title = currentMenu?.label ?? getTitle(route) ?? import.meta.env.VITE_APP_TITLE
-  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) ?? import.meta.env.VITE_APP_TITLE
-      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 { ref, computed, 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 };
+});

package/admin/layout/large/Breadcrumb.vue

@@ -1,70 +1,69 @@
-<script lang="ts">
-import { computed } from "vue";
-import type { VNode } from 'vue'
-import { Breadcrumb as ABreadcrumb } from "ant-design-vue";
-import type { Route as AntdBreadcrumbRoute } from 'ant-design-vue/es/breadcrumb/Breadcrumb'
-import type { IBreadcrumb } from '../../hooks'
-import { getDependencies } from "../../../kitDependencies";
-
-
-interface IBreadcrumbRoute extends AntdBreadcrumbRoute {
-  icon?: VNode | null
-  trigger?: () => void
-}
-
-function _buildRoute(breadcrumb: IBreadcrumb): IBreadcrumbRoute {
-  return {
-    breadcrumbName: breadcrumb.title,
-    path: breadcrumb.title,
-    icon: breadcrumb.icon,
-    children: breadcrumb.children?.map(child => _buildRoute(child)),
-    trigger: breadcrumb.trigger,
-  }
-}
-</script>
-
-<script setup lang="ts">
-const { usePage } = getDependencies()
-const { currentPageState } = usePage()
-const routes = computed(() => {
-  let breadcrumbs: IBreadcrumbRoute[] = []
-
-  if (!currentPageState.value)
-    return breadcrumbs
-
-  breadcrumbs = currentPageState.value.breadcrumbs.map(breadcrumb => _buildRoute(breadcrumb))
-
-  breadcrumbs.push({
-    path: currentPageState.value.title,
-    breadcrumbName: currentPageState.value.title,
-    icon: currentPageState.value.icon,
-  })
-
-  return breadcrumbs
-})
-</script>
-
-<template>
-  <ABreadcrumb class="breadcrumb" :routes="routes">
-    <template #itemRender="{ route }: {route: IBreadcrumbRoute}">
-      <div @click="route.trigger?.()">
-        <component :is="route.icon" v-if="route.icon" class="mb-0.2em mr-0.2em" />
-        <span>{{ route.breadcrumbName }}</span>
-      </div>
-    </template>
-  </ABreadcrumb>
-</template>
-
-<style lang="scss" scoped>
-.breadcrumb {
-  font-size: 1rem;
-
-  :deep(.ant-dropdown-trigger) {
-    height: 1.6em;
-  }
-
-  :deep(.anticon-down) {
-    display: none;
-  }
-}
-</style>
+<script lang="ts">
+import { computed } from 'vue';
+import type { VNode } from 'vue';
+import { Breadcrumb as ABreadcrumb } from 'ant-design-vue';
+import type { Route as AntdBreadcrumbRoute } from 'ant-design-vue/es/breadcrumb/Breadcrumb';
+import type { IBreadcrumb } from '../../hooks';
+import { getDependencies } from '../../../kitDependencies';
+
+interface IBreadcrumbRoute extends AntdBreadcrumbRoute {
+  icon?: VNode | null
+  trigger?: () => void
+}
+
+function _buildRoute(breadcrumb: IBreadcrumb): IBreadcrumbRoute {
+  return {
+    breadcrumbName: breadcrumb.title,
+    path: breadcrumb.title,
+    icon: breadcrumb.icon,
+    children: breadcrumb.children?.map(child => _buildRoute(child)),
+    trigger: breadcrumb.trigger,
+  };
+}
+</script>
+
+<script setup lang="ts">
+const { usePage } = getDependencies();
+const { currentPageState } = usePage();
+const routes = computed(() => {
+  let breadcrumbs: IBreadcrumbRoute[] = [];
+
+  if (!currentPageState.value)
+    return breadcrumbs;
+
+  breadcrumbs = currentPageState.value.breadcrumbs.map(breadcrumb => _buildRoute(breadcrumb));
+
+  breadcrumbs.push({
+    path: currentPageState.value.title,
+    breadcrumbName: currentPageState.value.title,
+    icon: currentPageState.value.icon,
+  });
+
+  return breadcrumbs;
+});
+</script>
+
+<template>
+  <ABreadcrumb class="breadcrumb" :routes="routes">
+    <template #itemRender="{ route }: {route: IBreadcrumbRoute}">
+      <div @click="route.trigger?.()">
+        <component :is="route.icon" v-if="route.icon" class="mb-0.2em mr-0.2em" />
+        <span>{{ route.breadcrumbName }}</span>
+      </div>
+    </template>
+  </ABreadcrumb>
+</template>
+
+<style lang="scss" scoped>
+.breadcrumb {
+  font-size: 1rem;
+
+  :deep(.ant-dropdown-trigger) {
+    height: 1.6em;
+  }
+
+  :deep(.anticon-down) {
+    display: none;
+  }
+}
+</style>

package/admin/layout/large/Content.vue

@@ -1,24 +1,24 @@
-<script setup lang="ts">
-import { getDependencies } from "../../../kitDependencies";
-
-const { usePage } = getDependencies()
-const { pageCacheList, setPage } = usePage()
-</script>
-
-<template>
-  <RouterView v-slot="{ Component, route }">
-    <KeepAlive :include="pageCacheList">
-      <Suspense>
-        <component :is="setPage(Component, route)" :key="(Component.type as any).name" />
-        <template #fallback>
-          <div class="flex justify-center items-center h-70">
-            <div class="flex items-center">
-              <i class="i-svg-spinners:180-ring-with-bg block color-primary scale-125 mr-2" />
-              <span class="text-gray">正在加载...</span>
-            </div>
-          </div>
-        </template>
-      </Suspense>
-    </KeepAlive>
-  </RouterView>
-</template>
+<script setup lang="ts">
+import { getDependencies } from '../../../kitDependencies';
+
+const { usePage } = getDependencies();
+const { pageCacheList, setPage } = usePage();
+</script>
+
+<template>
+  <RouterView #default="{ Component, route }">
+    <KeepAlive :include="pageCacheList">
+      <Suspense>
+        <component :is="setPage(Component, route)" :key="(Component.type as any).name" />
+        <template #fallback>
+          <div class="flex justify-center items-center h-70">
+            <div class="flex items-center">
+              <i class="i-svg-spinners:180-ring-with-bg block color-primary scale-125 mr-2" />
+              <span class="text-gray">正在加载...</span>
+            </div>
+          </div>
+        </template>
+      </Suspense>
+    </KeepAlive>
+  </RouterView>
+</template>