@pubinfo/core 2.0.0-beta.1

package/src/layout/components/Header/index.vue

@@ -0,0 +1,263 @@
+<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 lang="scss" scoped>
+[data-app-width-mode="center"],
+[data-app-width-mode="center-max-width"] {
+  header {
+    width: var(--g-app-width);
+    max-width: 100%;
+  }
+}
+
+header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--g-header-height);
+  padding: 0 20px;
+  margin: 0 auto;
+  color: var(--g-header-color);
+  background-color: var(--g-header-bg);
+  // box-shadow: -1px 0 0 0 var(--g-border-color), 1px 0 0 0 var(--g-border-color), 0 1px 0 0 var(--g-border-color);
+  transition: background-color 0.3s;
+
+  .header-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: var(--g-header-width);
+    height: 100%;
+    margin: 0 auto;
+
+    :deep(.main) {
+      display: flex;
+      flex: auto;
+      flex-wrap: nowrap;
+      align-items: center;
+      width: 0;
+      height: 100%;
+
+      .menu-active {
+        &-arrow {
+          .item-container::before,
+          .menu-item::before {
+            bottom: 0;
+            width: 0;
+            height: 0;
+            content: "";
+            border-right: 5px solid transparent;
+            border-bottom: 5px solid var(--g-header-bg);
+            border-left: 5px solid transparent;
+            opacity: 0;
+            transition: all 0.3s;
+
+            @include position-center(x);
+          }
+
+          .item-container.active::before,
+          .menu-item.active::before {
+            bottom: 8px;
+            opacity: 1;
+          }
+        }
+
+        &-line {
+          .item-container::before,
+          .menu-item::before {
+            bottom: 6px;
+            width: 0;
+            height: 4px;
+            content: "";
+            background-color: var(--g-header-menu-active-bg);
+            border-radius: 2px;
+            box-shadow: 0 0 0 1px var(--g-header-bg);
+            opacity: 0;
+            transition: all 0.3s;
+
+            @include position-center(x);
+          }
+
+          .item-container.active::before,
+          .menu-item.active::before {
+            width: 20px;
+            opacity: 1;
+          }
+        }
+
+        &-dot {
+          .item-container::before,
+          .menu-item::before {
+            bottom: 0;
+            width: 10px;
+            height: 10px;
+            content: "";
+            background-color: var(--g-header-menu-active-bg);
+            border-radius: 50%;
+            box-shadow: 0 0 0 1px var(--g-main-sidebar-bg);
+            opacity: 0;
+            transition: all 0.3s;
+
+            @include position-center(x);
+          }
+
+          .item-container.active::before,
+          .menu-item.active::before {
+            bottom: 4px;
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: $g-header-width) {
+    .header-container {
+      width: 100%;
+    }
+  }
+
+  :deep(.menu-container) {
+    flex: 1;
+    height: 100%;
+    padding: 0 20px;
+    margin: 0 30px;
+    overflow-x: auto;
+
+    // firefox隐藏滚动条
+    scrollbar-width: none;
+    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
+
+    // chrome隐藏滚动条
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &.nothin {
+      display: flex;
+    }
+
+    .menu-item-container-layout {
+      display: flex;
+      flex-direction: row;
+      width: auto;
+    }
+  }
+
+  :deep(.menu) {
+    display: inline-flex;
+    height: 100%;
+    background-color: var(--g-header-bg);
+
+    .menu-item {
+      .v-popper--theme-not-cursor {
+        height: 100%;
+      }
+
+      .menu-item-container {
+        padding: 0 6px;
+        color: var(--g-header-menu-color);
+        background-color: var(--g-header-menu-bg);
+
+        &:hover {
+          color: var(--g-header-menu-hover-color);
+          background-color: var(--g-header-menu-hover-bg);
+        }
+
+        .menu-item-container-icon {
+          transform: scale(1);
+        }
+
+        svg {
+          color: transparent;
+        }
+      }
+
+      &.is-dev {
+        .menu-item-container {
+          cursor: not-allowed;
+
+          i {
+            filter: grayscale(100%);
+          }
+
+          span {
+            opacity: 0.8;
+          }
+        }
+      }
+
+      &.active .menu-item-container {
+        color: var(--g-header-menu-active-color);
+        background-color: var(--g-header-menu-active-bg);
+      }
+    }
+  }
+
+  :deep(.tools) {
+    padding: 0;
+
+    .buttons .item .icon {
+      color: var(--g-header-color);
+    }
+
+    .user-container {
+      font-size: 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/components/Logo/index.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { PubinfoIcon } from '@/components';
+import { useContext } from '../../composables/useContext';
+
+defineOptions({
+  name: 'Logo',
+});
+
+withDefaults(
+  defineProps<{
+    name?: string
+    showLogo?: boolean
+    showTitle?: boolean
+  }>(),
+  {
+    name: 'logo',
+    showLogo: true,
+    showTitle: true,
+  },
+);
+
+const { settingsStore, appTitle } = useContext();
+
+const to = computed(() => {
+  return {
+    ...(settingsStore.settings.home.enable && { name: 'Home' }),
+  };
+});
+</script>
+
+<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="{ 'cursor-pointer': settingsStore.settings.home.enable }"
+  >
+    <PubinfoIcon
+      v-if="showLogo"
+      :name="name"
+      :size="30"
+      color="transparent"
+    />
+    <span v-if="showTitle" class="title block truncate">
+      <slot>
+        {{ appTitle }}
+      </slot>
+    </span>
+  </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;
+}
+
+span {
+  font-size: 24px;
+  color: var(--g-header-color);
+  letter-spacing: 1px;
+}
+</style>

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

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import type { MenuInjection, MenuProps } from './types';
+import { message } from 'ant-design-vue';
+import Item from './item.vue';
+import SubMenu from './sub.vue';
+import { rootMenuInjectionKey } from './types';
+
+defineOptions({
+  name: 'MainMenu',
+});
+
+const props = withDefaults(
+  defineProps<MenuProps>(),
+  {
+    accordion: true,
+    defaultOpeneds: () => [],
+    mode: 'vertical',
+    collapse: false,
+    showCollapseName: false,
+    rounded: false,
+  },
+);
+
+const router = useRouter();
+
+const activeIndex = ref<MenuInjection['activeIndex']>(props.value);
+const items = ref<MenuInjection['items']>({});
+const subMenus = ref<MenuInjection['subMenus']>({});
+const openedMenus = ref<MenuInjection['openedMenus']>(props.defaultOpeneds.slice(0));
+const mouseInMenu = ref<MenuInjection['mouseInMenu']>([]);
+const isMenuPopup = computed<MenuInjection['isMenuPopup']>(() => {
+  return props.mode === 'horizontal' || (props.mode === 'vertical' && props.collapse);
+});
+
+// 解析传入的 menu 数据，并保存到 items 和 subMenus 对象中
+function initItems(menu: MenuProps['menu'], parentPaths: string[] = []) {
+  menu.forEach((item) => {
+    const index = item.path ?? JSON.stringify(item);
+    if (item.children) {
+      const indexPath = [...parentPaths, index];
+      subMenus.value[index] = {
+        index,
+        indexPath,
+        active: false,
+      };
+      initItems(item.children, indexPath);
+    }
+    else {
+      items.value[index] = {
+        index,
+        indexPath: parentPaths,
+      };
+    }
+  });
+}
+
+const openMenu: MenuInjection['openMenu'] = (index, indexPath) => {
+  if (openedMenus.value.includes(index)) {
+    return;
+  }
+  if (props.accordion) {
+    openedMenus.value = openedMenus.value.filter(key => indexPath.includes(key));
+  }
+  openedMenus.value.push(index);
+};
+const closeMenu: MenuInjection['closeMenu'] = (index) => {
+  if (Array.isArray(index)) {
+    nextTick(() => {
+      closeMenu(index.at(-1)!);
+      if (index.length > 1) {
+        closeMenu(index.slice(0, -1));
+      }
+    });
+    return;
+  }
+  Object.keys(subMenus.value).forEach((item) => {
+    if (subMenus.value[item].indexPath.includes(index)) {
+      openedMenus.value = openedMenus.value.filter(item => item !== index);
+    }
+  });
+};
+
+function setSubMenusActive(index: string) {
+  Object.keys(subMenus.value).forEach((index) => {
+    subMenus.value[index].active = false;
+  });
+  items.value[index]?.indexPath.forEach((index) => {
+    subMenus.value[index].active = true;
+  });
+}
+
+const handleMenuItemClick: MenuInjection['handleMenuItemClick'] = (index, meta) => {
+  if (meta?.isDev) {
+    message.info('暂未上线，敬请期待！');
+    return;
+  }
+  if (props.mode === 'horizontal' || props.collapse) {
+    openedMenus.value = [];
+  }
+  setSubMenusActive(index);
+  if (meta?.link) {
+    window.open(meta.link);
+    return;
+  }
+  router.push(index);
+};
+const handleSubMenuClick: MenuInjection['handleSubMenuClick'] = (index, indexPath) => {
+  if (openedMenus.value.includes(index)) {
+    closeMenu(index);
+  }
+  else {
+    openMenu(index, indexPath);
+  }
+};
+
+function initMenu() {
+  const activeItem = activeIndex.value && items.value[activeIndex.value];
+  setSubMenusActive(activeIndex.value);
+  if (!activeItem || props.collapse) {
+    return;
+  }
+  // 展开该菜单项的路径上所有子菜单
+  activeItem.indexPath.forEach((index) => {
+    const subMenu = subMenus.value[index];
+    if (subMenu) {
+      openMenu(index, subMenu.indexPath);
+    }
+  });
+}
+
+watch(() => props.menu, (val) => {
+  initItems(val);
+  initMenu();
+}, {
+  deep: true,
+  immediate: true,
+});
+
+watch(() => props.value, (currentValue) => {
+  if (!items.value[currentValue]) {
+    activeIndex.value = '';
+  }
+  const item = items.value[currentValue] || (activeIndex.value && items.value[activeIndex.value]) || items.value[props.value];
+  if (item) {
+    activeIndex.value = item.index;
+  }
+  else {
+    activeIndex.value = currentValue;
+  }
+  initMenu();
+});
+
+watch(() => props.collapse, (value) => {
+  if (value) {
+    openedMenus.value = [];
+  }
+  initMenu();
+});
+
+provide(rootMenuInjectionKey, reactive({
+  props,
+  items,
+  subMenus,
+  activeIndex,
+  openedMenus,
+  mouseInMenu,
+  isMenuPopup,
+  openMenu,
+  closeMenu,
+  handleMenuItemClick,
+  handleSubMenuClick,
+}));
+</script>
+
+<template>
+  <div
+    class="flex flex-col of-hidden transition-all"
+    :class="{
+      'w-[200px]': !isMenuPopup && props.mode === 'vertical',
+      'w-[64px]': isMenuPopup && props.mode === 'vertical',
+      'h-[80px]': props.mode === 'horizontal',
+      'flex-row! w-auto': isMenuPopup && props.mode === 'horizontal',
+    }"
+  >
+    <template v-for="(item, index) in menu" :key="index">
+      <SubMenu v-if="item.children?.length" :menu="item" :unique-key="[item.path ?? JSON.stringify(item)]" />
+      <Item
+        v-else
+        :item="item"
+        :unique-key="[item.path ?? JSON.stringify(item)]"
+        @click="handleMenuItemClick(item.path ?? JSON.stringify(item), item.meta)"
+      />
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import type { SubMenuItemProps } from './types';
+import { PubinfoIcon } from '@/components';
+import { useContext } from '../../composables/useContext';
+import { rootMenuInjectionKey } from './types';
+
+const props = withDefaults(
+  defineProps<SubMenuItemProps>(),
+  {
+    level: 0,
+    subMenu: false,
+    expand: false,
+  },
+);
+
+const rootMenu = inject(rootMenuInjectionKey)!;
+const { generateI18nTitle } = useContext();
+
+const itemRef = ref<HTMLElement>();
+
+const isActived = computed(() => {
+  return props.subMenu
+    ? rootMenu.subMenus[props.uniqueKey[props.uniqueKey.length - 1]]?.active
+    : rootMenu.activeIndex === props.uniqueKey[props.uniqueKey.length - 1];
+});
+
+const isItemActive = computed(() => {
+  return isActived.value && (!props.subMenu || rootMenu.isMenuPopup);
+});
+
+const icon = computed(() => {
+  let icon;
+  if (props.item.meta?.icon) {
+    icon = props.item.meta.icon;
+  }
+  if (isActived.value) {
+    if (props.item.meta?.activeIcon === 'system-point') {
+      icon = 'system-point';
+    }
+    else if (props.item.meta?.activeIcon) {
+      icon = props.item.meta.activeIcon;
+    }
+  }
+  return icon;
+});
+
+// 缩进样式
+const indentStyle = computed(() => {
+  return !rootMenu.isMenuPopup
+    ? `padding-left: ${32 * (props.level ?? 0)}px`
+    : '';
+});
+
+defineExpose({
+  ref: itemRef,
+});
+</script>
+
+<template>
+  <div
+    ref="itemRef"
+    class="menu-item relative transition-all"
+    :class="{
+      'active': isItemActive,
+      'px-2 py-1': rootMenu.props.rounded,
+      'px-1! py-2!': rootMenu.props.rounded && rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'horizontal',
+    }"
+  >
+    <div
+      class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-14px text-[var(--g-sub-sidebar-menu-color)] transition-all hover:(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])"
+      :class="{
+        'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
+        'rounded-2': rootMenu.props.rounded,
+        'px-2!': rootMenu.isMenuPopup && level === 0,
+        'py-3!': rootMenu.props.rounded && rootMenu.isMenuPopup && level !== 0,
+      }"
+      :title="generateI18nTitle(item.meta?.i18n, item.meta?.title)"
+    >
+      <div
+        class="menu-item-container-layout inline-flex flex-1 items-center justify-center gap-[12px]"
+        :class="{
+          'flex-col gap-none': rootMenu.isMenuPopup && level === 0,
+          'flex-col gap-[2px]!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
+          'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
+          'w-[50px]': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'horizontal',
+        }"
+        :style="indentStyle"
+      >
+        <!-- 特殊化处理，有些时候想要的是一个点 -->
+        <PubinfoIcon
+          v-if="icon && icon !== 'system-point'"
+          :name="icon"
+          :size="20"
+          class="menu-item-container-icon transition-transform group-hover:scale-115"
+        />
+        <span
+          v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)"
+          class="title w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width"
+          :class="{
+            'opacity-0 w-0 h-0': rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName,
+            'w-full text-center': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
+            'system-point': icon === 'system-point' && isItemActive,
+          }"
+        >
+          {{ generateI18nTitle(item.meta?.i18n, item.meta?.title) }}
+        </span>
+        <HBadge
+          v-if="item.meta?.badge"
+          :value="typeof item.meta.badge === 'function' ? item.meta.badge() : item.meta.badge"
+          class="badge"
+          :class="{
+            'opacity-0': rootMenu.isMenuPopup && level === 0,
+          }"
+        />
+      </div>
+      <i
+        v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)"
+        class="sharp-corner"
+        :class="[
+          expand
+            ? 'before:-rotate-45 before:-translate-x-[2px] after:rotate-45 after:translate-x-[2px]'
+            : 'before:rotate-45 before:-translate-x-[2px] after:-rotate-45 after:translate-x-[2px] ',
+          rootMenu.isMenuPopup && level === 0 && 'opacity-0',
+          rootMenu.isMenuPopup && level !== 0 && '-rotate-90 -top-[1.5px]',
+        ]"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.badge {
+  :deep(> span) {
+    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];
+  }
+
+  &::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%;
+    }
+  }
+}
+</style>