@pubinfo/core 2.0.0-beta.9 → 2.0.0-rc.2

package/src/{layout → built-in/layout-component}/components/Content/LinkView.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { PageMain } from '@/components';
 import { useClipboard } from '@vueuse/core';
 import Message from 'vue-m-message';
 import IconParkTwotonePlanet from '~icons/icon-park-twotone/planet';
 import RiExternalLinkFill from '~icons/ri/external-link-fill';
+import { PageMain } from '@/features/components';
 import { useContext } from '../../composables/useContext';
 
 defineOptions({
@@ -51,7 +51,7 @@ function open() {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .fade-enter-active,
 .slide-left-enter-active,
 .slide-right-enter-active,

package/src/built-in/layout-component/components/Content/index.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { useContext } from '../../composables/useContext';
+import IframeView from './IframeView.vue';
+import LinkView from './LinkView.vue';
+
+defineOptions({
+  name: 'LayoutContent',
+});
+
+const _route = useRoute();
+const { settingsStore, keepAliveStore } = useContext();
+
+const isIframe = computed(() => !!_route.meta.iframe);
+const isLink = computed(() => !!_route.meta.link);
+
+function EmptyWrapper(_: any, { slots }: { slots: any }) {
+  return slots?.default?.();
+}
+
+const Provider = computed(() => {
+  const metaProvider = _route.matched?.[0]?.meta?.provider;
+
+  if (!metaProvider) {
+    return EmptyWrapper;
+  };
+
+  // 是函数，认为是 () => import(...)
+  if (typeof metaProvider === 'function') {
+    return defineAsyncComponent(metaProvider);
+  }
+
+  return metaProvider;
+});
+
+const shouldCache = computed(() => !!_route.meta?.cache);
+
+// 监听路由变化，根据 meta.cache 管理缓存
+watch(
+  () => _route.name,
+  (newName, oldName) => {
+    if (newName && _route.meta?.cache) {
+      keepAliveStore.add(String(newName));
+    }
+  },
+  { immediate: true },
+);
+
+// 监听路由的 meta.cache 变化
+watch(
+  () => _route.meta?.cache,
+  (shouldCache, wasCached) => {
+    if (_route.name) {
+      if (shouldCache) {
+        keepAliveStore.add(String(_route.name));
+      }
+      else {
+        keepAliveStore.remove(String(_route.name));
+      }
+    }
+  },
+);
+</script>
+
+<template>
+  <RouterView v-slot="{ Component, route }">
+    <component :is="Provider">
+      <Transition
+        :name="settingsStore.settings.mainPage.enableTransition ? settingsStore.settings.mainPage.transitionMode : ''"
+        mode="out-in" appear
+      >
+        <KeepAlive :include="keepAliveStore.list">
+          <component :is="Component" v-show="!(isIframe || isLink)" :key="route.fullPath" class="page-container" />
+        </KeepAlive>
+      </Transition>
+    </component>
+  </RouterView>
+
+  <IframeView v-show="isIframe && !isLink" />
+  <LinkView v-if="isLink" />
+</template>
+
+<style scoped>
+.fade-enter-active,
+.slide-left-enter-active,
+.slide-right-enter-active,
+.slide-top-enter-active,
+.slide-bottom-enter-active {
+  transition: 0.2s;
+}
+
+.fade-leave-active,
+.slide-left-leave-active,
+.slide-right-leave-active,
+.slide-top-leave-active,
+.slide-bottom-leave-active {
+  transition: 0.15s;
+}
+
+.fade-enter-from {
+  opacity: 0;
+}
+
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-left-enter-from {
+  margin-left: 20px;
+  opacity: 0;
+}
+
+.slide-left-leave-to {
+  margin-left: -20px;
+  opacity: 0;
+}
+
+.slide-right-enter-from {
+  margin-left: -20px;
+  opacity: 0;
+}
+
+.slide-right-leave-to {
+  margin-left: 20px;
+  opacity: 0;
+}
+
+.slide-top-enter-from {
+  margin-top: 20px;
+  opacity: 0;
+}
+
+.slide-top-leave-to {
+  margin-top: -20px;
+  opacity: 0;
+}
+
+.slide-bottom-enter-from {
+  margin-top: -20px;
+  opacity: 0;
+}
+
+.slide-bottom-leave-to {
+  margin-top: 20px;
+  opacity: 0;
+}
+</style>

package/src/{layout → built-in/layout-component}/components/Copyright/index.vue

@@ -33,17 +33,16 @@ const { settingsStore } = useContext();
   </footer>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .copyright {
   --at-apply: flex items-center justify-center flex-wrap my-4 px-4 text-sm text-stone-5;
+}
 
-  span,
-  a {
-    --at-apply: px-1;
-  }
+.copyright span,a {
+  --at-apply: px-1;
+}
 
-  a {
-    --at-apply: text-center no-underline text-stone-5 hover:text-dark dark:hover:text-light transition;
-  }
+.copyright a {
+  --at-apply: text-center no-underline text-stone-5 hover:text-dark dark:hover:text-light transition;
 }
 </style>

package/src/{layout → built-in/layout-component}/components/Header/TopMode/More.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Menu } from '#/menu';
-import { PubinfoIcon } from '@/components';
+import { PubinfoIcon } from '@/features/components';
 import NotCursor from './NotCursor.vue';
 
 defineOptions({
@@ -35,7 +35,7 @@ function menuClick(index: number, item: Menu.recordMainRaw) {
     <template #popper>
       <div class="menu-more-container" box-border>
         <template v-for="(item, index) in items" :key="index">
-          <NotCursor :is-cursor="item.meta?.isDev" :skidding="150">
+          <NotCursor :is-cursor="item.meta?.isDev" :dev-text="item.meta?.devText" :skidding="150">
             <div
               cursor-pointer flex="~  items-center" box-border p-15px w-full h-40px rounded-8px text-sm mb-10px
               :class="{
@@ -54,50 +54,42 @@ function menuClick(index: number, item: Menu.recordMainRaw) {
   </VMenu>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .menu-more-container {
-  min-width: 180px;
-  padding: 10px;
-  padding-bottom: 0;
+  --at-apply: min-w-180px p-10px pb-0;
+}
 
-  .is-dev {
-    cursor: not-allowed;
+.menu-more-container .is-dev {
+  --at-apply: cursor-not-allowed;
+}
 
-    i {
-      filter: grayscale(100%);
-    }
+.menu-more-container .is-dev i {
+  filter: grayscale(100%);
+}
 
-    span {
-      opacity: 0.8;
-    }
-  }
+.menu-more-container .is-dev span {
+  opacity: 0.8;
 }
 </style>
 
-<style lang="scss">
+<style>
 .v-popper--theme-more-appley {
+  --at-apply: z-1000;
   z-index: 1000;
+}
 
-  .v-popper__inner {
-    background-image: linear-gradient(-43deg, #fff 0%, #eaf3ff 87%);
-    border: 1px solid #fff;
-    border-radius: 8px;
-    box-shadow: 8px 16px 28px -8px #8195b74f;
-  }
+.v-popper--theme-more-appley .v-popper__inner {
+  --at-apply: border border-white border-solid rounded-8px;
+  background-image: linear-gradient(-43deg, #fff 0%, #eaf3ff 87%);
+  box-shadow: 8px 16px 28px -8px #8195b74f;
+}
 
-  .v-popper__arrow-container {
-    display: none;
-  }
+.v-popper--theme-more-appley .v-popper__arrow-container {
+  --at-apply: hidden;
 }
 
-.dark {
-  .v-popper--theme-more-appley {
-    .v-popper__inner {
-      background-image: linear-gradient(-43deg, #141414  0%, #141414 87%);
-      border: 1px solid #4b4f53;
-      border-radius: 8px;
-      box-shadow: none;
-    }
-  }
+.dark .v-popper--theme-more-appley .v-popper__inner {
+  --at-apply: border border-#4b4f53 border-solid rounded-8px shadow-[none];
+  background-image: linear-gradient(-43deg, #141414 0%, #141414 87%);
 }
 </style>

package/src/built-in/layout-component/components/Header/TopMode/NotCursor.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'NotCursor',
+});
+
+withDefaults(defineProps<{
+  isCursor?: boolean
+  skidding?: number
+  devText?: string // 自定义开发模式文本
+}>(), {
+  isCursor: false,
+  skidding: 0,
+  devText: '该功能暂未上线，敬请期待！', // 默认文本
+});
+</script>
+
+<template>
+  <slot v-if="!isCursor" />
+  <VMenu
+    v-else
+    :triggers="['hover']"
+    :skidding="skidding"
+    :delay="0"
+    :auto-hide="false"
+    theme="not-cursor"
+  >
+    <slot />
+    <template #popper>
+      <div class="not-cursor-container" box-border flex="~ col justify-center items-center">
+        <img src="../../../assets/images/not-cursor.png" w-60px alt="">
+        <div text="#B8BBBD 14px" mt-10px>
+          {{ devText }}
+        </div>
+      </div>
+    </template>
+  </VMenu>
+</template>
+
+<style scoped>
+.not-cursor-container {
+--at-apply: size-full;
+}
+</style>
+
+<style>
+.v-popper--theme-not-cursor {
+  --at-apply: z-1000;
+}
+
+.v-popper--theme-not-cursor .v-popper__inner {
+  --at-apply: w-228px h-123px border border-solid border-white rounded-md;
+
+  background-image: linear-gradient(-55deg, #fff 0%, #eaf3ff 87%);
+  box-shadow: 4px 8px 14px -4px #8195b74f;
+}
+
+.v-popper--theme-not-cursor .v-popper__inner > div {
+  --at-apply: size-full;
+}
+
+.v-popper--theme-not-cursor .v-popper__arrow-container {
+  --at-apply: hidden;
+  display: none;
+}
+
+.dark .v-popper--theme-not-cursor .v-popper__inner {
+  --at-apply: shadow-[none] rounded-8px border border-solid border-[#4b4f53];
+  background-image: linear-gradient(-43deg, #141414 0%, #141414 87%);
+}
+</style>

package/src/{layout → built-in/layout-component}/components/Header/TopMode/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { Menu } from '#/menu';
-import { PubinfoIcon } from '@/components';
 import { useElementSize } from '@vueuse/core';
 import SolarWidget5BoldDuotone from '~icons/solar/widget-5-bold-duotone';
+import { PubinfoIcon } from '@/features/components';
 import { useContext } from '../../../composables/useContext';
 import useMenu from '../../../composables/useMenu';
 import More from './More.vue';
@@ -31,8 +31,6 @@ const menuRef = ref<HTMLElement | null>();
 const { width } = useElementSize(menuRef);
 const menuHideIndex = ref(0);
 
-watchMenuItem();
-
 const moreApple = computed(() => {
   return menuHideIndex.value === menuStore.allMenus.length - 1;
 });
@@ -42,19 +40,6 @@ function moreApplyClick(index: number, item: Menu.recordMainRaw) {
   switchTo(menuIndex, item);
 }
 
-function watchMenuItem() {
-  onMounted(() => {
-    watch(
-      width,
-      () => {
-        menuHideIndex.value = fitMenus();
-      },
-      {
-        immediate: true,
-      });
-  });
-}
-
 // 计算顶部菜单宽度
 function fitMenus() {
   const containerRoot = menuRef.value!;
@@ -89,6 +74,17 @@ function fitMenus() {
 
   return restrictedIndex;
 }
+
+onMounted(() => {
+  watch(
+    width,
+    () => {
+      menuHideIndex.value = fitMenus();
+    },
+    {
+      immediate: true,
+    });
+});
 </script>
 
 <template>
@@ -99,7 +95,7 @@ function fitMenus() {
         [`menu-active-${settingsStore.settings.menu.menuActiveStyle}`]: settingsStore.settings.menu.menuActiveStyle !== '',
       }"
     >
-      <template v-for="(item, index) in menuStore.allMenus" :key="index">
+      <template v-for="(item, index) in menuStore.allMenus" :key="item?.meta?.title || index">
         <div
           class="menu-item relative transition-all"
           invisible
@@ -109,7 +105,7 @@ function fitMenus() {
             'is-dev': item.meta?.isDev,
           }"
         >
-          <NotCursor :is-cursor="item.meta?.isDev">
+          <NotCursor :is-cursor="item.meta?.isDev" :dev-text="item.meta?.devText">
             <div
               v-if="(item.children && item.children.length !== 0) || item?.meta?.isDev"
               class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-4 text-[var(--g-header-menu-color)] transition-all hover:(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])"

package/src/built-in/layout-component/components/Header/index.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { useContext } from '../../composables/useContext';
+import Logo from '../Logo/index.vue';
+import Tools from '../Tools/index.vue';
+
+defineOptions({
+  name: 'LayoutHeader',
+});
+
+const TopMode = defineAsyncComponent(() => import('./TopMode/index.vue'));
+const TopThinMode = defineAsyncComponent(() => import('./TopThinMode.vue'));
+
+const { settingsStore } = useContext();
+</script>
+
+<template>
+  <Transition name="header">
+    <header v-if="settingsStore.mode === 'pc' && ['head', 'only-head'].includes(settingsStore.settings.menu.menuMode)">
+      <div class="header-container">
+        <div class="main">
+          <slot name="logo">
+            <Logo />
+          </slot>
+
+          <slot name="menu">
+            <!-- 顶部模式 -->
+            <TopMode v-if="settingsStore.settings.menu.menuMode === 'head'" />
+            <!-- 顶部精简模式 -->
+            <TopThinMode v-else-if="settingsStore.settings.menu.menuMode === 'only-head'" />
+          </slot>
+        </div>
+
+        <slot name="tools">
+          <Tools />
+        </slot>
+      </div>
+    </header>
+  </Transition>
+</template>
+
+<style scoped>
+[data-app-width-mode="center"] header,
+[data-app-width-mode="center-max-width"] header {
+  --at-apply: w-[--g-app-width] max-w-full;
+}
+
+header {
+  --at-apply: fixed top-0 right-0 left-0 z-1000 flex items-center w-full h-[--g-header-height] mx-auto my-0 px-5 py-0 text-[--g-header-color] bg-[--g-header-bg];
+  transition: background-color 0.3s;
+}
+
+.header-container {
+  --at-apply: flex items-center justify-between w-[--g-header-width] h-full mx-auto my-0;
+}
+
+:deep(.main) {
+  --at-apply: flex flex-[auto] flex-nowrap items-center w-0 h-full;
+}
+
+:deep(.main .menu-active-arrow .item-container::before),
+:deep(.main .menu-active-arrow .menu-item::before) {
+  --at-apply: absolute -translate-x-2/4 w-0 h-0 content-empty border-b-[color:var(--g-header-bg)] opacity-0 transition-all duration-[0.3s] border-b-[5px] border-x-[5px] border-x-transparent border-solid left-2/4 bottom-0;
+}
+
+:deep(.main .menu-active-arrow .item-container.active::before),
+:deep(.main .menu-active-arrow .menu-item.active::before) {
+  --at-apply: bottom-2 op-100;
+}
+
+:deep(.main .menu-active-line .item-container::before),
+:deep(.main .menu-active-line .menu-item::before) {
+  --at-apply: absolute -translate-x-2/4 w-0 h-1 content-empty bg-[--g-header-menu-active-bg] opacity-0 transition-all duration-[0.3s] rounded-sm left-2/4 bottom-1.5;
+  box-shadow: 0 0 0 1px var(--g-header-bg);
+}
+
+:deep(.main .menu-active-line .item-container.active::before),
+:deep(.main .menu-active-line .menu-item.active::before) {
+  --at-apply: w-5 op-100;
+}
+
+:deep(.main .menu-active-dot .item-container::before),
+:deep(.main .menu-active-dot .menu-item::before) {
+  --at-apply: absolute -translate-x-2/4 w-2.5 h-2.5 content-empty bg-[--g-header-menu-active-bg]
+  opacity-0 transition-all duration-[0.3s] rounded-[50%] left-2/4 bottom-0;
+  box-shadow: 0 0 0 1px var(--g-main-sidebar-bg);
+}
+
+:deep(.main .menu-active-dot .item-container.active::before),
+:deep(.main .menu-active-dot .menu-item.active::before) {
+  --at-apply: bottom-1 op-100;
+}
+
+:deep(.menu-container) {
+  --at-apply: flex-1 h-full overflow-x-auto mx-[30px] my-0 px-5 py-0;
+  scrollbar-width: none;
+  mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
+}
+
+:deep(.menu-container::-webkit-scrollbar) {
+  --at-apply: hidden;
+}
+
+:deep(.menu-container.nothin) {
+  --at-apply: flex;
+}
+
+:deep(.menu-container .menu-item-container-layout) {
+  --at-apply: flex flex-row w-auto;
+}
+
+:deep(.menu) {
+  --at-apply: inline-flex h-full bg-[--g-header-bg];
+}
+
+:deep(.menu .menu-item .v-popper--theme-not-cursor) {
+  --at-apply: h-full;
+}
+
+:deep(.menu .menu-item .menu-item-container) {
+  --at-apply: px-1.5 py-0 text-[--g-header-menu-color] bg-[--g-header-menu-bg];
+}
+
+:deep(.menu .menu-item .menu-item-container:hover) {
+  color: var(--g-header-menu-hover-color);
+  background-color: var(--g-header-menu-hover-bg);
+}
+
+:deep(.menu .menu-item .menu-item-container .menu-item-container-icon) {
+  transform: scale(1);
+}
+
+:deep(.menu .menu-item.is-dev .menu-item-container) {
+  --at-apply: cursor-not-allowed;
+}
+
+:deep(.menu .menu-item.is-dev .menu-item-container i) {
+  filter: grayscale(100%);
+}
+
+:deep(.menu .menu-item.is-dev .menu-item-container span) {
+  --at-apply: op-80;
+}
+
+:deep(.menu .menu-item.active .menu-item-container) {
+  color: var(--g-header-menu-active-color);
+  background-color: var(--g-header-menu-active-bg);
+}
+
+:deep(.tools) {
+  --at-apply: p-0;
+}
+
+:deep(.tools .buttons .item .icon) {
+  color: var(--g-header-color);
+}
+
+:deep(.tools .user-container) {
+  --at-apply: text-16px;
+  color: var(--g-header-color);
+}
+
+.header-enter-active,
+.header-leave-active {
+  transition: transform 0.3s;
+}
+
+.header-enter-from,
+.header-leave-to {
+  transform: translateY(calc(var(--g-header-height) * -1));
+}
+</style>

package/src/{layout → built-in/layout-component}/components/Logo/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PubinfoIcon } from '@/components';
+import { PubinfoIcon } from '@/features/components';
 import { useContext } from '../../composables/useContext';
 
 defineOptions({
@@ -31,7 +31,7 @@ const to = computed(() => {
 <template>
   <RouterLink
     :to="to"
-    class="logo h-[var(--g-sidebar-logo-height)] w-inherit flex-center gap-2 px-3 text-inherit no-underline"
+    class="relative w-max bg-inherit p-[inherit] h-[var(--g-sidebar-logo-height)] w-inherit flex-center gap-2 px-3 text-inherit no-underline"
     :class="{ 'cursor-pointer': settingsStore.settings.home.enable }"
   >
     <PubinfoIcon
@@ -40,7 +40,7 @@ const to = computed(() => {
       :size="30"
       color="transparent"
     />
-    <span v-if="showTitle" class="title block truncate">
+    <span v-if="showTitle" class="text-19px font-semibold block truncate">
       <slot>
         {{ appTitle }}
       </slot>
@@ -48,23 +48,8 @@ const to = computed(() => {
   </RouterLink>
 </template>
 
-<style lang="scss" scoped>
-.title {
-  font-size: 19px;
-  font-weight: 600;
-}
-
-.logo {
-  position: relative;
-  width: max-content;
-  height: inherit;
-  padding: inherit;
-  background-color: inherit;
-}
-
+<style scoped>
 span {
-  font-size: 24px;
-  color: var(--g-header-color);
-  letter-spacing: 1px;
+  --at-apply: text-2xl text-[--g-header-color] tracking-px;
 }
 </style>

package/src/{layout → built-in/layout-component}/components/Menu/index.vue

@@ -36,7 +36,7 @@ const isMenuPopup = computed<MenuInjection['isMenuPopup']>(() => {
 function initItems(menu: MenuProps['menu'], parentPaths: string[] = []) {
   menu.forEach((item) => {
     const index = item.path ?? JSON.stringify(item);
-    if (item.children) {
+    if (item.children && item.children.length > 0) {
       const indexPath = [...parentPaths, index];
       subMenus.value[index] = {
         index,
@@ -183,9 +183,9 @@ provide(rootMenuInjectionKey, reactive({
     }"
   >
     <template v-for="(item, index) in menu" :key="index">
-      <SubMenu v-if="item.children?.length" :menu="item" :unique-key="[item.path ?? JSON.stringify(item)]" />
+      <SubMenu v-if="item.children?.length && item.meta?.sidebar !== false" :menu="item" :unique-key="[item.path ?? JSON.stringify(item)]" />
       <Item
-        v-else
+        v-else-if="item.meta?.sidebar !== false"
         :item="item"
         :unique-key="[item.path ?? JSON.stringify(item)]"
         @click="handleMenuItemClick(item.path ?? JSON.stringify(item), item.meta)"