@pubinfo/core 2.0.0-beta.8 → 2.0.0-rc.1

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)"

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

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import type { SubMenuItemProps } from './types';
-import { PubinfoIcon } from '@/components';
+import { PubinfoIcon } from '@/features/components';
 import { useContext } from '../../composables/useContext';
 import { rootMenuInjectionKey } from './types';
 
+defineOptions({
+  name: 'MenuItem',
+});
+
 const props = withDefaults(
   defineProps<SubMenuItemProps>(),
   {
@@ -128,39 +132,30 @@ defineExpose({
   </div>
 </template>
 
-<style lang="scss" scoped>
-.badge {
-  :deep(> span) {
-    right: 0;
-    left: initial !important;
-  }
+<style scoped>
+.badge :deep(> span) {
+  --at-apply: right-0;
+  left: initial !important;
 }
 
 .sharp-corner {
   --at-apply: relative ml-1 w-[10px];
+}
 
-  &::before {
-    --at-apply: absolute h-1.5px w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px];
-  }
+.sharp-corner::before {
+  --at-apply: absolute h-1.5px w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px];
+}
 
-  &::after {
-    --at-apply: absolute h-1.5px w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px];
-  }
+.sharp-corner::after {
+  --at-apply: absolute h-1.5px w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px];
 }
 
-.sub-sidebar-container {
-  .menu-item-container-layout:has(.system-point) {
-    position: relative;
-
-    &::before {
-      position: absolute;
-      left: 12px;
-      width: 6px;
-      height: 6px;
-      content: "";
-      background: var(--g-sub-sidebar-menu-active-color);
-      border-radius: 50%;
-    }
-  }
+.sub-sidebar-container .menu-item-container-layout:has(.system-point) {
+  --at-apply: relative;
+}
+
+.sub-sidebar-container .menu-item-container-layout:has(.system-point)::before {
+  --at-apply: absolute w-1.5 h-1.5 content-empty rounded-[50%] left-3;
+  background: var(--g-sub-sidebar-menu-active-color);
 }
 </style>

package/src/{layout → built-in/layout-component}/components/Menu/types.ts

@@ -1,5 +1,5 @@
 import type { Menu } from '#/menu';
-import { createInjectionKey } from '@/utils';
+import { createInjectionKey } from '../../utils';
 
 export interface MenuItem {
   index: string

package/src/{layout → built-in/layout-component}/components/SettingBar/AppSetting.vue

@@ -119,8 +119,8 @@ function excludesComponents(all: string[], excludes: string[]) {
   </HSlideover>
 </template>
 
-<style lang="scss" scoped>
-.settong-warp :deep(.setting-item) {
+<style scoped>
+:deep(.setting-item) {
   --at-apply:
     flex
     items-center
@@ -130,17 +130,17 @@ function excludesComponents(all: string[], excludes: string[]) {
     py-2
     rounded-2
     transition;
+}
 
-  &:hover {
-    --at-apply: bg-stone-1 dark:bg-stone-1 dark:bg-stone-9;
-  }
+:deep(.setting-item:hover) {
+  --at-apply: bg-stone-1 dark:bg-stone-1 dark:bg-stone-9;
+}
 
-  .label {
-    --at-apply: flex items-center flex-shrink-0 gap-2 text-sm;
+:deep(.setting-item .label) {
+  --at-apply: flex items-center flex-shrink-0 gap-2 text-sm;
+}
 
-    i {
-      --at-apply: text-xl text-orange cursor-help;
-    }
-  }
+:deep(.setting-item .label i) {
+  --at-apply: text-xl text-orange cursor-help;
 }
 </style>