@pubinfo/core 2.0.0-beta.1

package/src/layout/components/Menu/sub.vue

@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-vue';
+import type { SubMenuProps } from './types';
+import { useTimeoutFn } from '@vueuse/core';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
+import Item from './item.vue';
+import { rootMenuInjectionKey } from './types';
+
+defineOptions({
+  name: 'SubMenu',
+});
+
+const props = withDefaults(
+  defineProps<SubMenuProps>(),
+  {
+    level: 0,
+  },
+);
+
+const index = props.menu.path ?? JSON.stringify(props.menu);
+const itemRef = shallowRef();
+const subMenuRef = shallowRef<OverlayScrollbarsComponentRef>();
+const rootMenu = inject(rootMenuInjectionKey)!;
+
+const opened = computed(() => {
+  return rootMenu.openedMenus.includes(props.uniqueKey[props.uniqueKey.length - 1]);
+});
+
+const transitionEvent = computed(() => {
+  return rootMenu.isMenuPopup
+    ? {
+        enter(el: HTMLElement) {
+          if (el.offsetHeight > window.innerHeight) {
+            el.style.height = `${window.innerHeight}px`;
+          }
+        },
+        afterEnter: () => {},
+        beforeLeave: (el: HTMLElement) => {
+          el.style.overflow = 'hidden';
+          el.style.maxHeight = `${el.offsetHeight}px`;
+        },
+        leave: (el: HTMLElement) => {
+          el.style.maxHeight = '0';
+        },
+        afterLeave(el: HTMLElement) {
+          el.style.overflow = '';
+          el.style.maxHeight = '';
+        },
+      }
+    : {
+        enter(el: HTMLElement) {
+          const memorizedHeight = el.offsetHeight;
+          el.style.maxHeight = '0';
+          el.style.overflow = 'hidden';
+          void el.offsetHeight;
+          el.style.maxHeight = `${memorizedHeight}px`;
+        },
+        afterEnter(el: HTMLElement) {
+          el.style.overflow = '';
+          el.style.maxHeight = '';
+        },
+        beforeLeave(el: HTMLElement) {
+          el.style.overflow = 'hidden';
+          el.style.maxHeight = `${el.offsetHeight}px`;
+        },
+        leave(el: HTMLElement) {
+          el.style.maxHeight = '0';
+        },
+        afterLeave(el: HTMLElement) {
+          el.style.overflow = '';
+          el.style.maxHeight = '';
+        },
+      };
+});
+
+const transitionClass = computed(() => {
+  return rootMenu.isMenuPopup
+    ? {
+        enterActiveClass: 'ease-in-out duration-300',
+        enterFromClass: 'opacity-0 translate-x-4',
+        enterToClass: 'opacity-100',
+        leaveActiveClass: 'ease-in-out duration-300',
+        leaveFromClass: 'opacity-100',
+        leaveToClass: 'opacity-0',
+      }
+    : {
+        enterActiveClass: 'ease-in-out duration-300',
+        enterFromClass: 'opacity-0',
+        enterToClass: 'opacity-100',
+        leaveActiveClass: 'ease-in-out duration-300',
+        leaveFromClass: 'opacity-100',
+        leaveToClass: 'opacity-0',
+      };
+});
+
+const hasChildren = computed(() => {
+  let flag = true;
+  if (props.menu.children) {
+    if (props.menu.children.every((item: any) => item.meta?.sidebar === false)) {
+      flag = false;
+    }
+  }
+  else {
+    flag = false;
+  }
+  return flag;
+});
+
+function handleClick() {
+  if (rootMenu.isMenuPopup && hasChildren.value) {
+    return;
+  }
+  if (hasChildren.value) {
+    rootMenu.handleSubMenuClick(index, props.uniqueKey);
+  }
+  else {
+    rootMenu.handleMenuItemClick(index, props.menu.meta);
+  }
+}
+
+let timeout: (() => void) | undefined;
+
+function handleMouseenter() {
+  if (!rootMenu.isMenuPopup) {
+    return;
+  }
+  rootMenu.mouseInMenu = props.uniqueKey;
+  timeout?.()
+  ;({ stop: timeout } = useTimeoutFn(() => {
+    if (hasChildren.value) {
+      rootMenu.openMenu(index, props.uniqueKey);
+      nextTick(() => {
+        const el = itemRef.value.ref;
+        let top = 0;
+        let left = 0;
+        if (rootMenu.props.mode === 'vertical' || props.level !== 0) {
+          top = el.getBoundingClientRect().top + el.scrollTop;
+          left = el.getBoundingClientRect().left + el.getBoundingClientRect().width;
+          if (top + subMenuRef.value!.getElement()!.offsetHeight > window.innerHeight) {
+            top = window.innerHeight - subMenuRef.value!.getElement()!.offsetHeight;
+          }
+        }
+        else {
+          top = el.getBoundingClientRect().top + el.getBoundingClientRect().height;
+          left = el.getBoundingClientRect().left;
+          if (top + subMenuRef.value!.getElement()!.offsetHeight > window.innerHeight) {
+            subMenuRef.value!.getElement()!.style.height = `${window.innerHeight - top}px`;
+          }
+        }
+        subMenuRef.value!.getElement()!.style.top = `${top}px`;
+        subMenuRef.value!.getElement()!.style.left = `${left}px`;
+      });
+    }
+    else {
+      const path = props.menu.children ? rootMenu.subMenus[index].indexPath.at(-1)! : rootMenu.items[index].indexPath.at(-1)!;
+      rootMenu.openMenu(path, rootMenu.subMenus[path].indexPath);
+    }
+  }, 300));
+}
+
+function handleMouseleave() {
+  if (!rootMenu.isMenuPopup) {
+    return;
+  }
+  rootMenu.mouseInMenu = [];
+  timeout?.()
+  ;({ stop: timeout } = useTimeoutFn(() => {
+    if (rootMenu.mouseInMenu.length === 0) {
+      rootMenu.closeMenu(props.uniqueKey);
+    }
+    else {
+      if (hasChildren.value) {
+        if (!rootMenu.mouseInMenu.includes(props.uniqueKey.at(-1)!)) {
+          rootMenu.closeMenu(props.uniqueKey.at(-1)!);
+        }
+      }
+    }
+  }, 300));
+}
+</script>
+
+<template>
+  <Item
+    ref="itemRef"
+    :unique-key="uniqueKey"
+    :item="menu"
+    :level="level"
+    :sub-menu="hasChildren"
+    :expand="opened"
+    @click="handleClick"
+    @mouseenter="handleMouseenter"
+    @mouseleave="handleMouseleave"
+  />
+  <Teleport v-if="hasChildren" to="body" :disabled="!rootMenu.isMenuPopup">
+    <Transition v-bind="transitionClass" v-on="transitionEvent">
+      <OverlayScrollbarsComponent
+        v-if="opened"
+        ref="subMenuRef"
+        :options="{ scrollbars: { visibility: 'hidden' } }"
+        defer
+        class="sub-menu"
+        :class="{
+          'bg-[var(--g-sub-sidebar-bg)]': rootMenu.isMenuPopup,
+          'ring-1 ring-stone-2 dark:ring-stone-8 shadow-xl fixed z-3000 w-[200px]': rootMenu.isMenuPopup,
+          'mx-2': rootMenu.isMenuPopup && (rootMenu.props.mode === 'vertical' || level !== 0),
+          'rounded-2 py-1': rootMenu.props.rounded && rootMenu.isMenuPopup,
+        }"
+      >
+        <template v-for="item in menu.children" :key="item.path ?? JSON.stringify(item)">
+          <SubMenu
+            v-if="item.meta?.sidebar !== false"
+            :unique-key="[...uniqueKey, item.path ?? JSON.stringify(item)]"
+            :menu="item"
+            :level="level + 1"
+          />
+        </template>
+      </OverlayScrollbarsComponent>
+    </Transition>
+  </Teleport>
+</template>

package/src/layout/components/Menu/types.ts

@@ -0,0 +1,49 @@
+import type { Menu } from '#/menu';
+import { createInjectionKey } from '@/utils';
+
+export interface MenuItem {
+  index: string
+  indexPath: string[]
+  active?: boolean
+}
+
+export interface MenuProps {
+  menu: Menu.recordRaw[]
+  value: string
+  accordion?: boolean
+  defaultOpeneds?: string[]
+  mode?: 'horizontal' | 'vertical'
+  collapse?: boolean
+  showCollapseName?: boolean
+  rounded?: boolean
+}
+
+export interface MenuInjection {
+  props: MenuProps
+  items: Record<string, MenuItem>
+  subMenus: Record<string, MenuItem>
+  activeIndex: MenuProps['value']
+  openedMenus: string[]
+  mouseInMenu: string[]
+  isMenuPopup: boolean
+  openMenu: (index: string, indexPath: string[]) => void
+  closeMenu: (index: string | string[]) => void
+  handleMenuItemClick: (index: string, meta?: Menu.recordRaw['meta']) => void
+  handleSubMenuClick: (index: string, indexPath: string[]) => void
+}
+
+export const rootMenuInjectionKey = createInjectionKey<MenuInjection>('rootMenu');
+
+export interface SubMenuProps {
+  uniqueKey: string[]
+  menu: Menu.recordRaw
+  level?: number
+}
+
+export interface SubMenuItemProps {
+  uniqueKey: string[]
+  item: Menu.recordRaw
+  level?: number
+  subMenu?: boolean
+  expand?: boolean
+}

package/src/layout/components/SettingBar/AppSetting.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core';
+import { defineAsyncComponent } from 'vue';
+import Message from 'vue-m-message';
+import EpDocumentCopy from '~icons/ep/document-copy';
+import { useContext } from '../../composables/useContext';
+
+defineOptions({
+  name: 'AppSetting',
+  components: {
+    SettingThemes: defineAsyncComponent(() => import('./components/SettingThemes.vue')),
+    SettingsMode: defineAsyncComponent(() => import('./components/SettingMode.vue')),
+    SettingWidthMode: defineAsyncComponent(() => import('./components/SettingWidthMode.vue')),
+    SettingEnableTransition: defineAsyncComponent(() => import('./components/SettingEnableTransition.vue')),
+    SettingMenu: defineAsyncComponent(() => import('./components/SettingMenu.vue')),
+    SettingTopbar: defineAsyncComponent(() => import('./components/SettingTopbar.vue')),
+    SettingTabbar: defineAsyncComponent(() => import('./components/SettingTabbar.vue')),
+    SettingToolbar: defineAsyncComponent(() => import('./components/SettingToolbar.vue')),
+    SettingBreadcrumb: defineAsyncComponent(() => import('./components/SettingBreadcrumb.vue')),
+    SettingPage: defineAsyncComponent(() => import('./components/SettingPage.vue')),
+    SettingNavSearch: defineAsyncComponent(() => import('./components/SettingNavSearch.vue')),
+    SettingCopyright: defineAsyncComponent(() => import('./components/SettingCopyright.vue')),
+    SettingHome: defineAsyncComponent(() => import('./components/SettingHome.vue')),
+    SettingOther: defineAsyncComponent(() => import('./components/SettingOther.vue')),
+  },
+});
+
+const isShow = defineModel('open', { default: false });
+
+const route = useRoute();
+const { settingsStore, menuStore } = useContext();
+
+const isMobile = computed(() => {
+  return settingsStore.mode !== 'pc';
+});
+
+const settingComponents = computed(() => {
+  const normal = [
+    'SettingsMode',
+    'SettingWidthMode',
+    'SettingEnableTransition',
+    'SettingBreadcrumb',
+  ];
+  return excludesComponents(
+    [
+      'SettingThemes',
+      'SettingsMode',
+      'SettingWidthMode',
+      'SettingEnableTransition',
+      'SettingMenu',
+      'SettingTopbar',
+      'SettingTabbar',
+      'SettingToolbar',
+      'SettingBreadcrumb',
+      'SettingPage',
+      'SettingNavSearch',
+      'SettingHome',
+      'SettingCopyright',
+      'SettingOther',
+    ],
+    normal,
+  );
+});
+
+watch(() => settingsStore.settings.menu.menuMode, (value) => {
+  if (value === 'single') {
+    menuStore.setActived(0);
+  }
+  else {
+    menuStore.setActived(route.fullPath);
+  }
+});
+
+const { copy, copied, isSupported } = useClipboard();
+
+watch(copied, (val) => {
+  if (val) {
+    Message.success('复制成功，请粘贴到 src/settings.ts 文件中！', {
+      zIndex: 2000,
+    });
+  }
+});
+
+function handleCopy() {
+  copy(JSON.stringify(settingsStore.settings, null, 2));
+}
+
+function excludesComponents(all: string[], excludes: string[]) {
+  return all.filter((comp) => {
+    if (isMobile.value) {
+      return !excludes.includes(comp);
+    }
+    return comp;
+  });
+}
+</script>
+
+<template>
+  <HSlideover v-model="isShow" title="应用配置">
+    <div class="settong-warp">
+      <div class="rounded-2 bg-rose/20 px-4 py-2 text-sm/6 c-rose">
+        <p class="my-1">
+          应用配置可实时预览效果，但只是临时生效，要想真正应用于项目，可以点击下方的「复制配置」按钮，并将配置粘贴到 src/settings.ts 文件中。
+        </p>
+        <p class="my-1">
+          注意：在生产环境中应关闭该模块。
+        </p>
+      </div>
+      <template v-for="comp in settingComponents" :key="comp">
+        <component :is="comp" />
+      </template>
+    </div>
+    <template v-if="isSupported" #footer>
+      <HButton block @click="handleCopy">
+        <EpDocumentCopy />
+        复制配置
+      </HButton>
+    </template>
+  </HSlideover>
+</template>
+
+<style lang="scss" scoped>
+.settong-warp :deep(.setting-item) {
+  --at-apply:
+    flex
+    items-center
+    justify-between
+    gap-4
+    px-4
+    py-2
+    rounded-2
+    transition;
+
+  &: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;
+
+    i {
+      --at-apply: text-xl text-orange cursor-help;
+    }
+  }
+}
+</style>

package/src/layout/components/SettingBar/components/DayNightToggle.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'DayNightToggle',
+});
+const enabled = defineModel();
+</script>
+
+<template>
+  <div flex justify-center pb-15px>
+    <div class="toggleWrapper">
+      <input
+        id="dn"
+        v-model="enabled"
+        type="checkbox"
+        class="dn"
+      >
+      <label for="dn" class="toggle">
+        <span class="toggle__handler">
+          <span class="crater crater--1" />
+          <span class="crater crater--2" />
+          <span class="crater crater--3" />
+        </span>
+        <span class="star star--1" />
+        <span class="star star--2" />
+        <span class="star star--3" />
+        <span class="star star--4" />
+        <span class="star star--5" />
+        <span class="star star--6" />
+      </label>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.toggleWrapper {
+  overflow: hidden;
+  transform: scale(0.5);
+}
+
+.toggleWrapper input {
+  position: absolute;
+  left: -99em;
+}
+
+.toggle {
+  position: relative;
+  display: inline-block;
+  width: 90px;
+  height: 50px;
+  cursor: pointer;
+  background-color: #83d8ff;
+  border-radius: 84px;
+  transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+
+.toggle::before {
+  position: absolute;
+  top: 15px;
+  left: -50px;
+  font-size: 18px;
+  content: "Day";
+}
+
+.toggle::after {
+  position: absolute;
+  top: 15px;
+  right: -60px;
+  font-size: 18px;
+  color: #384f6d;
+  content: "Night";
+}
+
+.toggle__handler {
+  position: relative;
+  top: 3px;
+  left: 3px;
+  z-index: 1;
+  display: inline-block;
+  width: 44px;
+  height: 44px;
+  background-color: #ffdb98;
+  border-radius: 50px;
+  box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
+  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  transform: rotate(-45deg);
+}
+
+.toggle__handler .crater {
+  position: absolute;
+  background-color: #e8cda5;
+  border-radius: 100%;
+  opacity: 0;
+  transition: opacity 200ms ease-in-out;
+}
+
+.toggle__handler .crater--1 {
+  top: 18px;
+  left: 10px;
+  width: 4px;
+  height: 4px;
+}
+
+.toggle__handler .crater--2 {
+  top: 28px;
+  left: 22px;
+  width: 6px;
+  height: 6px;
+}
+
+.toggle__handler .crater--3 {
+  top: 10px;
+  left: 25px;
+  width: 8px;
+  height: 8px;
+}
+
+.star {
+  position: absolute;
+  background-color: #fff;
+  border-radius: 50%;
+  transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+
+.star--1 {
+  top: 10px;
+  left: 35px;
+  z-index: 0;
+  width: 30px;
+  height: 3px;
+}
+
+.star--2 {
+  top: 18px;
+  left: 28px;
+  z-index: 1;
+  width: 30px;
+  height: 3px;
+}
+
+.star--3 {
+  top: 27px;
+  left: 40px;
+  z-index: 0;
+  width: 30px;
+  height: 3px;
+}
+
+.star--4,
+.star--5,
+.star--6 {
+  opacity: 0;
+  transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+
+.star--4 {
+  top: 16px;
+  left: 11px;
+  z-index: 0;
+  width: 2px;
+  height: 2px;
+  transform: translate3d(3px, 0, 0);
+}
+
+.star--5 {
+  top: 32px;
+  left: 17px;
+  z-index: 0;
+  width: 3px;
+  height: 3px;
+  transform: translate3d(3px, 0, 0);
+}
+
+.star--6 {
+  top: 36px;
+  left: 28px;
+  z-index: 0;
+  width: 2px;
+  height: 2px;
+  transform: translate3d(3px, 0, 0);
+}
+
+input:checked + .toggle {
+  background-color: #749dd6;
+}
+
+input:checked + .toggle::before {
+  color: #749ed7;
+}
+
+input:checked + .toggle::after {
+  color: #fff;
+}
+
+input:checked + .toggle .toggle__handler {
+  background-color: #ffe5b5;
+  transform: translate3d(40px, 0, 0) rotate(0);
+}
+
+input:checked + .toggle .toggle__handler .crater {
+  opacity: 1;
+}
+
+input:checked + .toggle .star--1 {
+  width: 2px;
+  height: 2px;
+}
+
+input:checked + .toggle .star--2 {
+  width: 4px;
+  height: 4px;
+  transform: translate3d(-5px, 0, 0);
+}
+
+input:checked + .toggle .star--3 {
+  width: 2px;
+  height: 2px;
+  transform: translate3d(-7px, 0, 0);
+}
+
+input:checked + .toggle .star--4,
+input:checked + .toggle .star--5,
+input:checked + .toggle .star--6 {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+}
+
+input:checked + .toggle .star--4 {
+  transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+
+input:checked + .toggle .star--5 {
+  transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+
+input:checked + .toggle .star--6 {
+  transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+</style>

package/src/layout/components/SettingBar/components/SettingBreadcrumb.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useContext } from '../../../composables/useContext';
+
+defineOptions({
+  name: 'SettingBreadcrumb',
+});
+const { settingsStore } = useContext();
+const { breadcrumb, menu } = toRefs(settingsStore.settings);
+</script>
+
+<template>
+  <HDivider title="面包屑导航">
+    <div class="setting-item">
+      <div class="label">
+        是否启用
+      </div>
+      <HToggle v-model="breadcrumb.enable" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        风格
+      </div>
+      <HCheckList
+        v-model="breadcrumb.style"
+        :options="[
+          { label: '默认', value: '' },
+          { label: '现代', value: 'modern' },
+        ]"
+        :disabled="!breadcrumb.enable"
+      />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        是否显示主导航
+      </div>
+      <HToggle
+        v-model="breadcrumb.enableMainMenu"
+        :disabled="!breadcrumb.enable || ['single'].includes(menu.menuMode)"
+      />
+    </div>
+  </HDivider>
+</template>