@peng_kai/kit 0.0.6 → 0.0.8

package/admin/defines/defineRoute.helpers.ts

@@ -0,0 +1,30 @@
+import type { RouteLocationNormalizedLoaded, Router } from 'vue-router'
+
+export function getTitle(route?: Pick<RouteLocationNormalizedLoaded, 'meta'>) {
+  const mTitle = route?.meta?.title
+
+  return typeof mTitle === 'function' ? mTitle() : mTitle
+}
+
+export function getMenusByRouter(router: Router) {
+  const menuOrderRE = /^(?<key>\w*)@(?<order>\d+)$/
+  const routes = router.getRoutes()
+
+  return routes
+    .filter(route => menuOrderRE.test((route.meta.menuOrder ?? '')))
+    .map((route) => {
+      const res = route.meta!.menuOrder!.match(menuOrderRE)
+      const parentKey = res?.groups?.key
+      const order = Number(res?.groups?.order)
+      const name = route.name as string
+      const menu = {
+        key: name,
+        label: route.meta.title ?? name,
+        icon: route.meta.icon,
+        trigger: parentKey ? () => router.push({ name }) : () => {},
+        order,
+      }
+
+      return { parentKey, menu }
+    })
+}

package/admin/defines/index.ts

@@ -1,4 +1,5 @@
 export { definePage } from './definePage'
 export { defineRoute, getRoutes } from './defineRoute'
+export { getMenusByRouter, getTitle as getRouteTitle } from './defineRoute.helpers'
 export { defineRouteGuard, getRouteGuards } from './defineRouteGuard'
 export { defineStartup, getStartups } from './defineStartup'

package/admin/filter/FilterReset.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { Button as AButton } from "ant-design-vue";
+
+const props = defineProps<{
+  loading?: boolean
+}>()
+const emits = defineEmits<{
+  (e: 'filter'): void
+  (e: 'reset'): void
+}>()
+</script>
+
+<template>
+  <div class="flex w-min">
+    <AButton class="mr-2 filter-btn" type="primary" :loading="props.loading" @click="emits('filter')">
+      查询
+    </AButton>
+    <AButton :disabled="props.loading" @click="emits('reset')">
+      重置
+    </AButton>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.filter-btn {
+  position: relative;
+
+  :deep(.ant-btn-loading-icon) {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: none !important;
+
+    .anticon-loading {
+      margin-inline-end: 0 !important;
+    }
+
+    + span {
+      visibility: hidden;
+    }
+  }
+}
+</style>

package/admin/hooks/index.ts

@@ -0,0 +1,6 @@
+export { usePage } from './usePage'
+export type { TPageState, IBreadcrumb } from './usePage'
+export { useMenu } from './useMenu'
+export type { TMenu } from './useMenu'
+export { usePageTab } from './usePageTab'
+export { usePermission } from './usePermission'

package/admin/hooks/useMenu.ts

@@ -0,0 +1,128 @@
+import { createGlobalState } from '@vueuse/core'
+import { reactive, ref, computed } from 'vue'
+import type { UnwrapNestedRefs, VNode, Ref } 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) => a.order - b.order)
+      parentMenu.children = children
+    }
+    else {
+      menus.push(_menu)
+      menus.sort((a, b) => a.order - b.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

@@ -0,0 +1,138 @@
+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 { kitDependencies } 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 router = kitDependencies.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
+}

package/admin/hooks/usePageTab.ts

@@ -0,0 +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 }
+})

package/admin/hooks/usePermission.ts

@@ -0,0 +1,5 @@
+import { createGlobalState } from '@vueuse/core'
+
+export { usePermission }
+
+const usePermission = createGlobalState(() => {})

package/kitDependencies.ts

@@ -1,5 +1,8 @@
 import dayjs from "dayjs";
+import type { useRoute, useRouter } from 'vue-router'
 
 export const kitDependencies = {
-  dayjs: dayjs
+  dayjs: dayjs,
+  useRoute: (() => {}) as typeof useRoute,
+  useRouter: (() => {}) as typeof useRouter,
 }

package/package.json

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

package/antd/admin/FilterReset.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { Button as AButton } from "ant-design-vue";
-
-const props = defineProps<{
-  loading?: boolean
-}>()
-const emits = defineEmits<{
-  (e: 'filter'): void
-  (e: 'reset'): void
-}>()
-</script>
-
-<template>
-  <div class="flex w-min">
-    <AButton class="mr-2" type="primary" :loading="props.loading" @click="emits('filter')">
-      查询
-    </AButton>
-    <AButton :disabled="props.loading" @click="emits('reset')">
-      重置
-    </AButton>
-  </div>
-</template>
-
-<style scoped lang="scss"></style>