@pubinfo/core 2.0.0-beta.1

package/src/layout/components/Sidebar/MainSidebar.vue

@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import { PubinfoIcon } from '@/components';
+import { useContext } from '../../composables/useContext';
+import useMenu from '../../composables/useMenu';
+import Logo from '../Logo/index.vue';
+import Menu from '../Menu/index.vue';
+
+defineOptions({
+  name: 'MainSidebar',
+});
+
+const route = useRoute();
+
+const { settingsStore, menuStore, generateI18nTitle } = useContext();
+const { switchTo } = useMenu();
+
+function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
+  let name;
+  if ((!isActive && icon) || (isActive && !activeIcon)) {
+    name = icon;
+  }
+  else if (isActive && activeIcon) {
+    name = activeIcon;
+  }
+  return name;
+}
+</script>
+
+<template>
+  <Transition name="main-sidebar">
+    <div v-if="['side', 'only-side'].includes(settingsStore.settings.menu.menuMode) || (settingsStore.mode === 'mobile' && settingsStore.settings.menu.menuMode !== 'single')" class="main-sidebar-container">
+      <Logo :show-title="false" class="sidebar-logo" />
+      <!-- 侧边栏模式（含主导航） -->
+      <div
+        v-if="settingsStore.settings.menu.menuMode === 'side' || (settingsStore.mode === 'mobile' && settingsStore.settings.menu.menuMode !== 'single')"
+        class="menu flex flex-col of-hidden transition-all"
+        :class="{
+          [`menu-active-${settingsStore.settings.menu.menuActiveStyle}`]: settingsStore.settings.menu.menuActiveStyle !== '',
+        }"
+      >
+        <template v-for="(item, index) in menuStore.allMenus" :key="index">
+          <div
+            class="menu-item relative transition-all"
+            :class="{
+              'active': index === menuStore.actived,
+              'px-2 py-1': settingsStore.settings.menu.isRounded,
+            }"
+          >
+            <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 py-4 text-[var(--g-main-sidebar-menu-color)] transition-all hover:(bg-[var(--g-main-sidebar-menu-hover-bg)] text-[var(--g-main-sidebar-menu-hover-color)]) px-2!"
+              :class="{
+                'text-[var(--g-main-sidebar-menu-active-color)]! bg-[var(--g-main-sidebar-menu-active-bg)]!': index === menuStore.actived,
+                'rounded-2': settingsStore.settings.menu.isRounded,
+              }"
+              :title="generateI18nTitle(item.meta?.i18n, item.meta?.title)"
+              @click="switchTo(index, item)"
+            >
+              <div class="w-full inline-flex flex-1 flex-col items-center justify-center gap-[2px]">
+                <PubinfoIcon
+                  v-if="iconName(index === menuStore.actived, item.meta?.icon, item.meta?.activeIcon)"
+                  :name="iconName(index === menuStore.actived, item.meta?.icon, item.meta?.activeIcon)!"
+                  :size="20"
+                  class="menu-item-container-icon transition-transform group-hover:scale-120"
+                />
+                <!-- 不需要title? -->
+                <!-- <span class="w-full flex-1 truncate text-center text-sm transition-height transition-opacity transition-width">
+                  {{ generateI18nTitle(item.meta?.i18n, item.meta?.title) }}
+                </span> -->
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+      <!-- 侧边栏精简模式 -->
+      <Menu
+        v-else-if="settingsStore.settings.menu.menuMode === 'only-side'"
+        :menu="menuStore.allMenus"
+        :value="route.meta.activeMenu || route.path"
+        show-collapse-name
+        collapse
+        :rounded="settingsStore.settings.menu.isRounded"
+        class="menu"
+        :class="{
+          [`menu-active-${settingsStore.settings.menu.menuActiveStyle}`]: settingsStore.settings.menu.menuActiveStyle !== '',
+        }"
+      />
+    </div>
+  </Transition>
+</template>
+
+<style lang="scss" scoped>
+.main-sidebar-container {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  width: var(--g-main-sidebar-width);
+  color: var(--g-main-sidebar-menu-color);
+  background-color: var(--g-main-sidebar-bg);
+  box-shadow: 1px 0 0 0 var(--g-border-color);
+  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+
+  .sidebar-logo {
+    background-color: var(--g-main-sidebar-bg);
+    transition: background-color 0.3s;
+  }
+
+  :deep(.menu-item-container-layout) {
+    display: flex;
+    flex-direction: row;
+    width: auto;
+
+    .title {
+      display: none;
+    }
+  }
+
+  .menu-active {
+    &-arrow {
+      .item-container::before,
+      :deep(.menu-item::before) {
+        right: -5px;
+        width: 0;
+        height: 0;
+        content: "";
+        border-top: 5px solid transparent;
+        border-right: 5px solid var(--g-main-sidebar-bg);
+        border-bottom: 5px solid transparent;
+        opacity: 0;
+        transition: all 0.3s;
+
+        @include position-center(y);
+      }
+
+      .item-container.active::before,
+      :deep(.menu-item.active::before) {
+        right: 8px;
+        opacity: 1;
+      }
+    }
+
+    &-line {
+      .item-container::before,
+      :deep(.menu-item::before) {
+        left: 6px;
+        width: 4px;
+        height: 0;
+        content: "";
+        background-color: var(--g-main-sidebar-menu-active-bg);
+        border-radius: 2px;
+        box-shadow: 0 0 0 1px var(--g-main-sidebar-bg);
+        opacity: 0;
+        transition: all 0.3s;
+
+        @include position-center(y);
+      }
+
+      .item-container.active::before,
+      :deep(.menu-item.active::before) {
+        height: 20px;
+        opacity: 1;
+      }
+    }
+
+    &-dot {
+      .item-container::before,
+      :deep(.menu-item::before) {
+        left: 0;
+        width: 10px;
+        height: 10px;
+        content: "";
+        background-color: var(--g-main-sidebar-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(y);
+      }
+
+      .item-container.active::before,
+      :deep(.menu-item.active::before) {
+        left: 4px;
+        opacity: 1;
+      }
+    }
+  }
+
+  .menu {
+    flex: 1;
+    width: initial;
+    overflow: hidden auto;
+    overscroll-behavior: contain;
+
+    // firefox隐藏滚动条
+    scrollbar-width: none;
+
+    // chrome隐藏滚动条
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    :deep(.menu-item) {
+      .menu-item-container {
+        height: 50px;
+        padding: 0 5px;
+        color: var(--g-main-sidebar-menu-color);
+        background-color: var(--g-main-sidebar-menu-bg);
+
+        .menu-item-container-icon {
+          font-size: 24px !important;
+          transform: scale(1);
+        }
+      }
+
+      &:hover .menu-item-container {
+        color: var(--g-main-sidebar-menu-hover-color);
+        background-color: var(--g-main-sidebar-menu-hover-bg);
+      }
+
+      &.active .menu-item-container {
+        color: var(--g-main-sidebar-menu-active-color) !important;
+        background-color: var(--g-main-sidebar-menu-active-bg) !important;
+      }
+    }
+  }
+}
+
+// 主侧边栏动画
+.main-sidebar-enter-active,
+.main-sidebar-leave-active {
+  transition: 0.3s;
+}
+
+.main-sidebar-enter-from,
+.main-sidebar-leave-to {
+  transform: translateX(calc(var(--g-main-sidebar-width) * -1));
+}
+</style>

package/src/layout/components/Sidebar/SubSidebar.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { useContext } from '../../composables/useContext';
+import Logo from '../Logo/index.vue';
+import Menu from '../Menu/index.vue';
+
+defineOptions({
+  name: 'SubSidebar',
+});
+
+const route = useRoute();
+
+const { settingsStore, menuStore } = useContext();
+
+const sidebarScrollTop = ref(0);
+
+function onSidebarScroll(e: Event) {
+  sidebarScrollTop.value = (e.target as HTMLElement).scrollTop;
+}
+
+const enableSidebar = computed(() => {
+  return settingsStore.mode === 'mobile' || (
+    ['side', 'head', 'single'].includes(settingsStore.settings.menu.menuMode)
+    && menuStore.sidebarMenus.length !== 0
+    && !(
+      settingsStore.settings.menu.subMenuOnlyOneHide
+      && menuStore.sidebarMenus.length === 1
+      && (
+        !menuStore.sidebarMenus[0].children
+        || menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
+      )
+    )
+  );
+});
+</script>
+
+<template>
+  <div
+    v-if="enableSidebar"
+    class="sub-sidebar-container"
+    :class="{
+      'is-collapse': settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse,
+    }"
+  >
+    <Logo
+      :show-logo="settingsStore.settings.menu.menuMode === 'single'"
+      class="sidebar-logo"
+      :class="{
+        'sidebar-logo-bg': settingsStore.settings.menu.menuMode === 'single',
+      }"
+    />
+    <div
+      class="sub-sidebar flex-1 transition-shadow-300"
+      :class="{
+        shadow: sidebarScrollTop,
+      }"
+      @scroll="onSidebarScroll"
+    >
+      <TransitionGroup name="sub-sidebar">
+        <template v-for="(mainItem, mainIndex) in menuStore.allMenus" :key="mainIndex">
+          <div v-if="settingsStore.settings.menu.menuMode === 'single'">
+            <Menu
+              :menu="mainItem.children"
+              :value="route.meta.activeMenu || route.path"
+              :default-openeds="menuStore.defaultOpenedPaths"
+              :accordion="settingsStore.settings.menu.subMenuUniqueOpened"
+              :collapse="settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse"
+              :rounded="settingsStore.settings.menu.isRounded"
+              class="menu"
+            />
+          </div>
+          <template v-else>
+            <div v-show="mainIndex === menuStore.actived">
+              <Menu
+                :menu="mainItem.children"
+                :value="route.meta.activeMenu || route.path"
+                :default-openeds="menuStore.defaultOpenedPaths"
+                :accordion="settingsStore.settings.menu.subMenuUniqueOpened"
+                :collapse="settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse"
+                :rounded="settingsStore.settings.menu.isRounded"
+                class="menu"
+              />
+            </div>
+          </template>
+        </template>
+      </TransitionGroup>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sub-sidebar-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  width: var(--g-sub-sidebar-width);
+  background-color: var(--g-sub-sidebar-bg);
+  transition: background-color 0.3s, left 0.3s, width 0.3s;
+
+  &.is-collapse {
+    width: var(--g-sub-sidebar-collapse-width);
+
+    .sidebar-logo {
+      &:not(.sidebar-logo-bg) {
+        display: none;
+      }
+
+      :deep(span) {
+        display: none;
+      }
+    }
+  }
+
+  .sidebar-logo {
+    background-color: var(--g-sub-sidebar-bg);
+    transition: background-color 0.3s;
+
+    &.sidebar-logo-bg {
+      background-color: var(--g-sub-sidebar-logo-bg);
+
+      :deep(span) {
+        color: var(--g-sub-sidebar-logo-color);
+      }
+    }
+  }
+
+  .sub-sidebar {
+    overflow: hidden auto;
+    overscroll-behavior: contain;
+
+    // firefox隐藏滚动条
+    scrollbar-width: none;
+
+    // chrome隐藏滚动条
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &.shadow {
+      box-shadow: inset 0 10px 10px -10px var(--g-box-shadow-color);
+    }
+  }
+
+  .menu {
+    width: 100%;
+  }
+}
+
+// 次侧边栏动画
+.sub-sidebar-enter-active {
+  transition: 0.2s;
+}
+
+.sub-sidebar-enter-from,
+.sub-sidebar-leave-active {
+  opacity: 0;
+  transform: translateY(30px) skewY(10deg);
+}
+
+.sub-sidebar-leave-active {
+  position: absolute;
+}
+</style>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import MainSidebar from './MainSidebar.vue';
+import SubSidebar from './SubSidebar.vue';
+
+defineOptions({
+  name: 'Sidebar',
+});
+</script>
+
+<template>
+  <MainSidebar />
+  <SubSidebar />
+</template>

package/src/layout/components/Tools/Breadcrumb/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="flex items-center text-sm">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.breadcrumb-item) {
+  &:first-child {
+    .separator {
+      display: none;
+    }
+  }
+
+  &:last-child {
+    .text {
+      opacity: 1;
+    }
+  }
+}
+</style>

package/src/layout/components/Tools/Breadcrumb/item.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router';
+
+const props = withDefaults(
+  defineProps<{
+    to?: RouteLocationRaw
+    replace?: boolean
+    separator?: string
+  }>(),
+  {
+    separator: '/',
+  },
+);
+
+const router = useRouter();
+
+function onClick() {
+  if (props.to) {
+    if (props.replace) {
+      router.replace(props.to);
+    }
+    else {
+      router.push(props.to);
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="breadcrumb-item flex items-center text-dark dark:text-white">
+    <span class="separator mx-2">
+      {{ separator }}
+    </span>
+    <span
+      class="text flex items-center opacity-60"
+      :class="{
+        'is-link cursor-pointer transition-opacity hover:opacity-100': !!props.to,
+      }"
+      @click="onClick"
+    >
+      <slot />
+    </span>
+  </div>
+</template>

package/src/layout/components/Tools/DayNightSwitch.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { useContext } from '../../composables/useContext';
+
+defineOptions({
+  name: 'DayNightSwitch',
+});
+
+const { settingsStore } = useContext();
+</script>
+
+<template>
+  <label v-if="settingsStore.settings.toolbar.enableColorScheme" class="day-night">
+    <div
+      class="animate-icon"
+      :class="{
+        'animate-icon-day': settingsStore.settings.app.colorScheme !== 'dark',
+      }"
+    />
+  </label>
+</template>
+
+<style lang="scss" scoped>
+$night-btn: #fff;
+$day-btn: #ffce6e;
+
+.day-night {
+  width: 44px;
+  height: 44px;
+  cursor: pointer;
+  transform: scale(0.45);
+
+  .animate-icon {
+    position: relative;
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    box-shadow: inset 16px -16px 0 0 $night-btn;
+    transition: box-shadow 0.5s ease 0s, transform 0.4s ease 0.1s;
+    transform: scale(1) rotate(-2deg);
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: inherit;
+      height: inherit;
+      content: "";
+      border-radius: inherit;
+      transition: background 0.3s ease;
+    }
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 8px;
+      height: 8px;
+      margin: -4px 0 0 -4px;
+      content: "";
+      border-radius: 50%;
+      box-shadow:
+        0 -23px 0 $day-btn,
+        0 23px 0 $day-btn,
+        23px 0 0 $day-btn,
+        -23px 0 0 $day-btn,
+        15px 15px 0 $day-btn,
+        -15px 15px 0 $day-btn,
+        15px -15px 0 $day-btn,
+        -15px -15px 0 $day-btn;
+      transition: all 0.3s ease;
+      transform: scale(0);
+    }
+  }
+
+  .animate-icon-day {
+    width: 44px;
+    height: 44px;
+    box-shadow: inset 32px -32px 0 0 $night-btn;
+    transition: transform 0.3s ease 0.1s, box-shadow 0.2s ease 0s;
+    transform: scale(0.5) rotate(0deg);
+
+    &::before {
+      background: $day-btn;
+      transition: background 0.3s ease 0.1s;
+    }
+
+    &::after {
+      transition: transform 0.5s ease 0.15s;
+      transform: scale(1.5);
+    }
+  }
+}
+</style>

package/src/layout/components/Tools/HotkeysIntro.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { useToggle } from '@vueuse/core';
+import { useContext } from '../../composables/useContext';
+
+defineOptions({
+  name: 'HotkeysIntro',
+});
+
+const [isShow, toggle] = useToggle(false);
+
+const { settingsStore } = useContext();
+
+defineExpose({
+  open: () => toggle(),
+});
+</script>
+
+<template>
+  <HDialog v-model="isShow" title="快捷键介绍">
+    <div class="px-4">
+      <div class="grid gap-2 md:grid-cols-2">
+        <div>
+          <h2 class="m-0 text-lg font-bold">
+            全局
+          </h2>
+          <ul class="list-none pl-4 text-sm">
+            <li class="py-1">
+              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
+              <HKbd>I</HKbd>
+              查看系统信息
+            </li>
+            <li v-if="settingsStore.settings.navSearch.enable && settingsStore.settings.navSearch.enableHotkeys" class="py-1">
+              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
+              <HKbd>S</HKbd>
+              唤起导航搜索
+            </li>
+          </ul>
+        </div>
+        <div v-if="settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.menuMode)">
+          <h2 class="m-0 text-lg font-bold">
+            主导航
+          </h2>
+          <ul class="list-none pl-4 text-sm">
+            <li class="py-1">
+              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
+              <HKbd>`</HKbd>
+              激活下一个主导航
+            </li>
+          </ul>
+        </div>
+        <div v-if="settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.enableHotkeys">
+          <h2 class="m-0 text-lg font-bold">
+            标签栏
+          </h2>
+          <ul class="list-none pl-4 text-sm">
+            <li class="py-1">
+              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
+              <HKbd>←</HKbd>
+              切换到上一个标签页
+            </li>
+            <li class="py-1">
+              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
+              <HKbd>→</HKbd>
+              切换到下一个标签页
+            </li>
+            <li class="py-1">
+              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
+              <HKbd>W</HKbd>
+              关闭当前标签页
+            </li>
+            <li class="py-1">
+              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
+              <HKbd>1~9</HKbd>
+              切换到第 n 个标签页
+            </li>
+            <li class="py-1">
+              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
+              <HKbd>0</HKbd>
+              切换到最后一个标签页
+            </li>
+          </ul>
+        </div>
+        <div v-if="settingsStore.settings.mainPage.enableHotkeys">
+          <h2 class="m-0 text-lg font-bold">
+            页面
+          </h2>
+          <ul class="list-none pl-4 text-sm">
+            <li class="py-1">
+              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
+              <HKbd>↑</HKbd>
+              最大化
+            </li>
+            <li class="py-1">
+              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
+              <HKbd>↓</HKbd>
+              退出最大化
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </HDialog>
+</template>