@peng_kai/kit 0.0.8 → 0.0.9

package/admin/components/scroll-nav/index.ts

@@ -0,0 +1 @@
+export { default as ScrollNav } from './src/ScrollNav.vue'

package/admin/components/scroll-nav/src/ScrollNav.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useElementSize } from '@vueuse/core'
+
+const props = defineProps<{
+  selector: string
+}>()
+
+const $content = document.querySelector(props.selector) as HTMLElement
+const $contentParent = $content.parentElement
+const { height: contentParentH } = useElementSize($contentParent)
+const { height: contentH } = useElementSize($content)
+const visible = computed(() => contentParentH.value * 2 < contentH.value)
+
+function scrollTo(top: number) {
+  $contentParent?.scrollTo({ top })
+}
+</script>
+
+<template>
+  <div v-if="visible" class="wrapper">
+    <div class="btn" @click="scrollTo(0)">
+      <i class="i-fluent:arrow-previous-24-filled rotate-90" />
+    </div>
+    <div class="btn" @click="scrollTo($contentParent?.scrollHeight ?? Infinity)">
+      <i class="i-fluent:arrow-previous-24-filled rotate-270" />
+    </div>
+    <!-- <div v-if="showReturn" class="btn" @click="toLastY()">
+      <i class="i-fluent:arrow-hook-down-left-24-filled rotate-270" />
+    </div> -->
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.wrapper {
+  font-size: 18px;
+}
+
+.btn {
+  display: flex;
+  width: 2em;
+  height: 2em;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+  background: #bcbcbc;
+  color: #000;
+  cursor: pointer;
+  opacity: 0.7;
+
+  &:active {
+    transform: scale(0.9);
+  }
+
+  & + & {
+    margin-top: 1px;
+  }
+}
+</style>

package/admin/hooks/useMenu.ts

@@ -1,5 +1,5 @@
 import { createGlobalState } from '@vueuse/core'
-import { reactive, ref, computed } from 'vue'
+import { reactive, ref, computed, watch } from 'vue'
 import type { UnwrapNestedRefs, VNode, Ref } from 'vue'
 
 export { useMenu }
@@ -29,6 +29,10 @@ const useMenu = createGlobalState(() => {
   const menus = reactive<TMenu[]>([])
   const collapsed = ref(false)
 
+  watch(menus, (menus) => {
+    console.log('menus', menus);
+  })
+
   const findMenu = (menus: TMenu[], key: string) => {
     const queue = [...menus]
 

package/admin/layout/large/Breadcrumb.vue

@@ -0,0 +1,68 @@
+<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 { usePage } from '../../hooks'
+import type { IBreadcrumb } from '../../hooks'
+
+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 { 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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { usePage } from '../../hooks'
+
+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>

package/admin/layout/large/Menu.vue

@@ -0,0 +1,73 @@
+<script lang="ts">
+import { computed, ref, watch } from "vue";
+import { Menu as AMenu } from "ant-design-vue";
+import type { ItemType } from 'ant-design-vue'
+import { useMenu } from '../../hooks'
+import type { TMenu } from '../../hooks'
+import { kitDependencies } from "../../../kitDependencies";
+
+function formatMenu(menu: TMenu): ItemType {
+  return {
+    key: menu.key,
+    title: menu.label,
+    label: menu.label,
+    icon: menu.icon ?? undefined,
+    onClick: (e) => {
+      (e as any).stopPropagation()
+      menu.trigger()
+    },
+    children: menu.children?.map(formatMenu),
+  }
+}
+</script>
+
+<script setup lang="ts">
+const router = kitDependencies.useRouter()
+const { menus, getMenuPath } = useMenu()
+const items = computed(() => menus.map(formatMenu))
+const openKeys = ref<string[]>([])
+const selectedKeys = ref<string[]>([])
+console.log('获取 kitDependencies');
+
+setTimeout(() => {
+}, 3000)
+console.log('菜单对象对比', kitDependencies, kitDependencies.menus === menus);
+
+watch(
+  () => router?.currentRoute.value,
+  (route) => {
+    if (!route) return;
+
+    const menuPath = getMenuPath(route.name as string)
+    openKeys.value = menuPath.map(menu => menu.key)
+    selectedKeys.value = [openKeys.value.pop()!]
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <AMenu
+    class="menu"
+    :items="items"
+    :openKeys="openKeys"
+    :selectedKeys="selectedKeys"
+    mode="inline"
+    :inlineIndent="14"
+  />
+</template>
+
+<style lang="scss" scoped>
+.menu {
+  border-inline-end: none !important;
+
+  &.ant-menu-inline-collapsed {
+    width: var(--app-siderbar-width);
+  }
+
+  &,
+  .ant-menu {
+    background-color: transparent;
+  }
+}
+</style>

package/admin/layout/large/PageTab.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { Tabs as ATabs, TabPane as ATabPane } from "ant-design-vue";
+import { usePageTab } from '../../hooks'
+
+const { activeTab, tabList, openTab, closeTab } = usePageTab()
+</script>
+
+<template>
+  <ATabs
+    class="app-page-tabs"
+    :activeKey="activeTab"
+    type="editable-card"
+    size="small"
+    :animated="false"
+    :hideAdd="true"
+    :tabBarGutter="4"
+    @tabClick="(openTab as any)"
+    @edit="(closeTab as any)"
+  >
+    <ATabPane v-for="tab of tabList" :key="tab.key" :tab="tab.title">
+      <template #closeIcon>
+        <i class="i-icon-park-outline:close" />
+      </template>
+    </ATabPane>
+  </ATabs>
+</template>
+
+<style scoped lang="scss">
+.app-page-tabs {
+  :deep(.ant-tabs-nav) {
+    margin: 0;
+  }
+
+  :deep(.ant-tabs-nav::before) {
+    display: none;
+  }
+
+  :deep(.ant-tabs-tab) {
+    --uno: 'border-rd-3px! text-14px p-[3px_1px_3px_8px]! select-none';
+  }
+
+  :deep(.ant-tabs-tab .ant-tabs-tab-btn) {
+    transform: translateX(8px);
+  }
+
+  :deep(.ant-tabs-tab-active) {
+    --uno: 'border-[currentColor]!';
+  }
+
+  :deep(.ant-tabs-tab-remove) {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    margin: 0;
+    opacity: 0;
+    transition: all 150ms;
+  }
+
+  :deep(.ant-tabs-tab:hover .ant-tabs-tab-btn),
+  :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
+    transform: translateX(0);
+  }
+
+  :deep(.ant-tabs-tab:hover .ant-tabs-tab-remove),
+  :deep(.ant-tabs-tab-active .ant-tabs-tab-remove) {
+    margin-left: 0;
+    opacity: 1;
+  }
+}
+</style>

package/admin/layout/large/index.ts

@@ -0,0 +1,4 @@
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as Content } from './Content.vue'
+export { default as Menu } from './Menu.vue'
+export { default as PageTab } from './PageTab.vue'

package/kitDependencies.ts

@@ -5,4 +5,5 @@ export const kitDependencies = {
   dayjs: dayjs,
   useRoute: (() => {}) as typeof useRoute,
   useRouter: (() => {}) as typeof useRouter,
+  menus: undefined as any,
 }

package/package.json

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