@pubinfo-nightly/core 2025.11.14

package/src/built-in/layout-component/components/SettingBar/components/SettingWidthMode.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import EpBack from '~icons/ep/back';
+import EpRight from '~icons/ep/right';
+import { useContext } from '../../../composables/useContext';
+
+defineOptions({
+  name: 'SettingWidthMode',
+});
+const { settingsStore } = useContext();
+
+const widthMode = toRef(settingsStore.settings.layout, 'widthMode');
+
+const widthModeList = reactive<
+  {
+    describe: string
+    active: Settings.layout['widthMode']
+    class: string
+  }[]
+>([
+  {
+    describe: '自适应',
+    active: 'adaption',
+    class: 'mode-adaption',
+  },
+  {
+    describe: '自适应 (有最小宽度)',
+    active: 'adaption-min-width',
+    class: 'mode-adaption-min-width',
+  },
+  {
+    describe: '定宽居中',
+    active: 'center',
+    class: 'mode-center',
+  },
+  {
+    describe: '定宽居中 (有最大宽度)',
+    active: 'center-max-width',
+    class: 'mode-center-max-width',
+  },
+]);
+
+function clickHandle(item: Settings.layout['widthMode']) {
+  if (item) {
+    widthMode.value = item;
+  }
+}
+</script>
+
+<template>
+  <HDivider title="页宽模式">
+    <div class="app-width-mode">
+      <template v-for="mode in widthModeList" :key="mode.active">
+        <HTooltip
+          :text="mode.describe"
+          placement="bottom"
+          :delay="500"
+        >
+          <div
+            class="mode"
+            :class="[mode.class, widthMode === mode.active ? 'active' : '']"
+            @click="clickHandle(mode.active)"
+          >
+            <template v-if="mode.active !== 'center'">
+              <EpBack class="left" />
+              <EpRight class="right" />
+            </template>
+          </div>
+        </HTooltip>
+      </template>
+    </div>
+  </HDivider>
+</template>
+
+<style scoped>
+.app-width-mode {
+  --at-apply: flex items-center justify-center gap-4 pb-4;
+}
+
+.app-width-mode .mode {
+  --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition of-hidden;
+}
+
+.app-width-mode .mode.active {
+  --at-apply: ring-ui-primary ring-2;
+}
+
+.app-width-mode .mode-adaption::before {
+  --at-apply: content-empty absolute w-full h-full bg-stone-1 dark:bg-stone-9;
+}
+
+.app-width-mode .mode-adaption .left,
+.app-width-mode .mode-adaption .right {
+  --at-apply: absolute top-1/2 -translate-y-1/2;
+}
+
+.app-width-mode .mode-adaption .left {
+  --at-apply: left-1;
+}
+
+.app-width-mode .mode-adaption .right {
+  --at-apply: right-1;
+}
+
+.app-width-mode .mode-adaption-min-width::before {
+  --at-apply: content-empty absolute w-1/2 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
+}
+
+.app-width-mode .mode-adaption-min-width .left,
+.app-width-mode .mode-adaption-min-width .right {
+  --at-apply: absolute top-1/2 -translate-y-1/2;
+}
+
+.app-width-mode .mode-adaption-min-width .left {
+  --at-apply: left-0.5;
+}
+
+.app-width-mode .mode-adaption-min-width .right {
+  --at-apply: right-0.5;
+}
+
+.app-width-mode .mode-center::before {
+  --at-apply: content-empty absolute w-3/5 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
+}
+
+.app-width-mode .mode-center-max-width::before {
+  --at-apply: content-empty absolute w-3/5 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
+}
+
+.app-width-mode .mode-center-max-width .left,
+.app-width-mode .mode-center-max-width .right {
+  --at-apply: absolute top-1/2 -translate-y-1/2;
+}
+
+.app-width-mode .mode-center-max-width .left {
+  --at-apply: left-2.5;
+}
+
+.app-width-mode .mode-center-max-width .right {
+  --at-apply: right-2.5;
+}
+</style>

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

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { useToggle } from '@vueuse/core';
+import AntDesignSettingTwotone from '~icons/ant-design/setting-twotone';
+import LetsIconsBookOpenDuotoneLine from '~icons/lets-icons/book-open-duotone-line';
+import { useContext } from '../../composables/useContext';
+
+defineOptions({
+  name: 'SettingBar',
+});
+
+const AppSetting = defineAsyncComponent(() => import('./AppSetting.vue'));
+
+const { settingsStore, isDev } = useContext();
+
+function openDocs() {
+  window.open('http://124.223.184.245:10000/docs/');
+}
+
+const [open, setOpen] = useToggle(false);
+</script>
+
+<template>
+  <div v-if="settingsStore.settings.app.enableAppSetting && isDev" class="app-setting-warp">
+    <div class="app-setting">
+      <div class="app-setting-item" @click="setOpen()">
+        <AntDesignSettingTwotone class="icon" text="18px" />
+      </div>
+      <div class="divider" />
+      <div class="app-setting-item">
+        <LetsIconsBookOpenDuotoneLine text="18px" @click="openDocs" />
+      </div>
+    </div>
+    <div class="vue-devtools__anchor--glowing" />
+
+    <AppSetting v-model:open="open" />
+  </div>
+</template>
+
+<style scoped>
+.app-setting-warp {
+  --at-apply: relative fixed top-1/2 right-10px z-10;
+}
+
+.app-setting-warp .vue-devtools__anchor--glowing {
+  --at-apply: absolute z-[-1] w-40 h-40 pointer-events-none blur-[60px] opacity-0
+  transition-all duration-[1s] ease-[ease] -translate-x-1/4 -translate-y-1/4
+  rounded-full left-0 top-0;
+  background-image: linear-gradient(45deg, #00dc82, #36e4da, #0047e1);
+}
+
+.app-setting-warp:hover .vue-devtools__anchor--glowing {
+  --at-apply: op-70;
+}
+
+.app-setting {
+  --at-apply: text-white dark:text-dark bg-ui-primary
+  flex flex-col items-center justify-between w-[30px] h-[76px]
+  text-sm cursor-pointer rounded-[30px];
+}
+
+.app-setting .app-setting-item {
+  --at-apply: flex flex-[auto] items-center justify-center w-full h-0;
+}
+
+.app-setting .divider {
+  --at-apply: w-10px h-px bg-[#b3b3b3];
+}
+
+.app-setting .icon {
+  animation: rotate 5s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/built-in/layout-component/components/Sidebar/MainSidebar.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { PubinfoIcon } from '@/features/components';
+import { useContext } from '../../composables/useContext';
+import { useLayoutVisible } from '../../composables/useLayoutVisible';
+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, generateTitle } = useContext();
+const { switchTo } = useMenu();
+const { show } = useLayoutVisible();
+
+function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
+  if (isActive && activeIcon) {
+    return activeIcon;
+  }
+
+  return icon;
+}
+</script>
+
+<template>
+  <Transition name="main-sidebar">
+    <div v-if="show.mainSidebar" 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) && item?.meta?.sidebar !== false"
+              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="generateTitle(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">
+                  {{ generateTitle(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 scoped>
+.main-sidebar-container {
+  --at-apply: relative z-1 flex flex-col;
+  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 {
+  --at-apply: bg-[--g-main-sidebar-bg];
+  transition: background-color 0.3s;
+}
+
+:deep(.menu-item-container-layout) {
+  --at-apply: flex flex-col w-auto;
+}
+
+:deep(.menu-item-container-layout) .title {
+  --at-apply: hidden;
+}
+
+/* 菜单激活样式 */
+.menu-active-arrow .item-container::before,
+.menu-active-arrow :deep(.menu-item::before) {
+  --at-apply: content-empty absolute top-1/2 right-[-5px] w-0 h-0 op-0
+  border-t-5px border-t-solid border-t-transparent
+  border-r-5px border-r-solid border-r-[--g-main-sidebar-bg]
+  border-b-5px border-b-solid border-b-transparent
+  -translate-y-2/4 transition-all duration-[0.3s];
+}
+
+.menu-active-arrow .item-container.active::before,
+.menu-active-arrow :deep(.menu-item.active::before) {
+  --at-apply: right-2 op-100;
+}
+
+.menu-active-line .item-container::before,
+.menu-active-line :deep(.menu-item::before) {
+  --at-apply: content-empty absolute top-1/2 left-6px -translate-y-2/4 w-1 h-0
+  bg-[--g-main-sidebar-menu-active-bg] opacity-0 transition-all duration-[0.3s]
+  rounded-sm;
+  box-shadow: 0 0 0 1px var(--g-main-sidebar-bg);
+}
+
+.menu-active-line .item-container.active::before,
+.menu-active-line :deep(.menu-item.active::before) {
+  --at-apply: h-5 op-100;
+}
+
+.menu-active-dot .item-container::before,
+.menu-active-dot :deep(.menu-item::before) {
+  --at-apply: bg-[--g-main-sidebar-menu-active-bg] content-empty
+  absolute -translate-y-2/4 w-2.5 h-2.5 opacity-0 transition-all
+  duration-[0.3s] rounded-[50%] left-0 top-2/4;
+  box-shadow: 0 0 0 1px var(--g-main-sidebar-bg);
+}
+
+.menu-active-dot .item-container.active::before,
+.menu-active-dot :deep(.menu-item.active::before) {
+  --at-apply: left-1 op-100;
+}
+
+.menu {
+  --at-apply: flex-1 w-[initial] overscroll-contain;
+  overflow: hidden auto;
+  scrollbar-width: none;
+}
+
+.menu::-webkit-scrollbar {
+  --at-apply: hidden;
+}
+
+.menu :deep(.menu-item) .menu-item-container {
+  --at-apply: h-[50px] px-5px py-0 text-[--g-main-sidebar-menu-color] bg-[--g-main-sidebar-menu-bg];
+}
+
+.menu :deep(.menu-item) .menu-item-container .menu-item-container-icon {
+  --at-apply: scale-100;
+  font-size: 24px !important;
+}
+
+.menu :deep(.menu-item):hover .menu-item-container {
+  color: var(--g-main-sidebar-menu-hover-color);
+  background-color: var(--g-main-sidebar-menu-hover-bg);
+}
+
+.menu :deep(.menu-item).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/built-in/layout-component/components/Sidebar/SubSidebar.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { useContext } from '../../composables/useContext';
+import { useLayoutVisible } from '../../composables/useLayoutVisible';
+import Logo from '../Logo/index.vue';
+import Menu from '../Menu/index.vue';
+
+defineOptions({
+  name: 'SubSidebar',
+});
+
+withDefaults(
+  defineProps<{
+    showAllMenus?: boolean
+  }>(),
+  {
+    showAllMenus: false,
+  },
+);
+
+const route = useRoute();
+
+const { settingsStore, menuStore } = useContext();
+const { show } = useLayoutVisible();
+
+const sidebarScrollTop = ref(0);
+
+function onSidebarScroll(e: Event) {
+  sidebarScrollTop.value = (e.target as HTMLElement).scrollTop;
+}
+</script>
+
+<template>
+  <div
+    v-if="show.subSidebar"
+    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' || showAllMenus">
+            <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="css" scoped>
+.sub-sidebar-container {
+  --at-apply: absolute flex flex-col left-0 inset-y-0
+  w-[--g-sub-sidebar-width] bg-[--g-sub-sidebar-bg];
+  transition: background-color 0.3s, left 0.3s, width 0.3s;
+}
+
+.sub-sidebar-container.is-collapse {
+  width: var(--g-sub-sidebar-collapse-width);
+}
+
+.sub-sidebar-container.is-collapse .sidebar-logo:not(.sidebar-logo-bg) {
+  --at-apply: hidden;
+}
+
+.sub-sidebar-container.is-collapse .sidebar-logo :deep(span) {
+  --at-apply: hidden;
+}
+
+.sidebar-logo {
+  --at-apply: bg-[--g-sub-sidebar-bg];
+  transition: background-color 0.3s;
+}
+
+.sidebar-logo.sidebar-logo-bg {
+  background-color: var(--g-sub-sidebar-logo-bg);
+}
+
+.sidebar-logo.sidebar-logo-bg :deep(span) {
+  color: var(--g-sub-sidebar-logo-color);
+}
+
+.sub-sidebar {
+  --at-apply: flex-1;
+  overflow: hidden auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  transition: box-shadow 0.3s;
+}
+
+.sub-sidebar::-webkit-scrollbar {
+  --at-apply: hidden;
+}
+
+.sub-sidebar.shadow {
+  box-shadow: inset 0 10px 10px -10px var(--g-box-shadow-color);
+}
+
+.menu {
+  --at-apply: w-full;
+}
+
+/* 次侧边栏动画 */
+.sub-sidebar-enter-active {
+  transition: 0.2s;
+}
+
+.sub-sidebar-enter-from,
+.sub-sidebar-leave-active {
+  --at-apply: op-0;
+  transform: translateY(30px) skewY(10deg);
+}
+
+.sub-sidebar-leave-active {
+  --at-apply: absolute;
+}
+</style>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useContext } from '../../composables/useContext';
+import MainSidebar from './MainSidebar.vue';
+import SubSidebar from './SubSidebar.vue';
+
+defineOptions({
+  name: 'LayoutSidebar',
+});
+
+withDefaults(
+  defineProps<{
+    showAllMenus?: boolean
+  }>(),
+  {
+    showAllMenus: false,
+  },
+);
+
+const { settingsStore } = useContext();
+
+defineExpose({
+  toggleSidebarCollapse: () => settingsStore.toggleSidebarCollapse(),
+});
+</script>
+
+<template>
+  <MainSidebar />
+  <SubSidebar :show-all-menus="showAllMenus" />
+</template>

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

@@ -0,0 +1,15 @@
+<template>
+  <div class="flex items-center text-sm">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+:deep(.breadcrumb-item):first-child .separator {
+  --at-apply: hidden;
+}
+
+:deep(.breadcrumb-item):last-child .text {
+  --at-apply: op-100;
+}
+</style>

package/src/built-in/layout-component/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>