@pubinfo-nightly/core 2025.11.14

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useSettingsStore, useTabbarStore } from '@/features/stores';
+
+defineOptions({
+  name: 'NotAllowed',
+});
+
+const route = useRoute();
+
+const settingsStore = useSettingsStore();
+const tabbarStore = useTabbarStore();
+
+onMounted(() => {
+  if (settingsStore.settings.tabbar.enable) {
+    tabbarStore.remove(route.meta.activeMenu || route.fullPath);
+  }
+});
+</script>
+
+<template>
+  <div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg:flex-row -translate-x-50% -translate-y-50% lg:gap-12">
+    <div class="noPermissionIcon w-300px h-300px lg:w-400px lg:h-400px" />
+    <div class="flex flex-col gap-4">
+      <h1 class="m-0 text-6xl font-sans dark:text-[#C9D6EF]">
+        403
+      </h1>
+      <div class="desc mx-0 text-xl text-stone-5 dark:text-[#C9D6EF]">
+        抱歉，你无权访问该页面
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.noPermissionIcon {
+  background: url("../../assets/images/403.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+[data-theme="dark"] .noPermissionIcon {
+  background: url("../../assets/images/403_dark.svg") no-repeat;
+  background-size: 100% 100%;
+}
+</style>

package/src/built-in/layout-component/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 scoped>
+:deep(.setting-item) {
+  --at-apply:
+    flex
+    items-center
+    justify-between
+    gap-4
+    px-4
+    py-2
+    rounded-2
+    transition;
+}
+
+:deep(.setting-item:hover) {
+  --at-apply: bg-stone-1 dark:bg-stone-1 dark:bg-stone-9;
+}
+
+:deep(.setting-item .label) {
+  --at-apply: flex items-center flex-shrink-0 gap-2 text-sm;
+}
+
+:deep(.setting-item .label i) {
+  --at-apply: text-xl text-orange cursor-help;
+}
+</style>

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

@@ -0,0 +1,144 @@
+<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>
+.toggleWrapper {
+  --at-apply: overflow-hidden;
+  transform: scale(0.5);
+}
+
+.toggleWrapper input {
+  --at-apply: absolute left-[-99em];
+}
+
+.toggle {
+  --at-apply: relative inline-block w-[90px] h-[50px] cursor-pointer bg-[#83d8ff] rounded-[84px];
+  transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+
+.toggle::before {
+  --at-apply: absolute left-[-50px] text-lg content-["Day"] top-[15px];;
+}
+
+.toggle::after {
+  --at-apply: absolute right-[-60px] text-lg text-[#384f6d] content-["Night"] top-[15px];
+}
+
+.toggle__handler {
+  --at-apply: relative z-[1] inline-block w-11 h-11 bg-[#ffdb98] rounded-[50px] left-[3px] top-[3px];
+  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 {
+  --at-apply: absolute bg-[#e8cda5] opacity-0 transition-opacity duration-200 ease-[ease-in-out] rounded-[100%];
+}
+
+.toggle__handler .crater--1 {
+  --at-apply: w-1 h-1 left-2.5 top-[18px];
+}
+.toggle__handler .crater--2 {
+  --at-apply: w-1.5 h-1.5 left-[22px] top-7;
+}
+.toggle__handler .crater--3 {
+  --at-apply: w-2 h-2 left-[25px] top-2.5;
+}
+
+.star {
+  --at-apply: absolute bg-white transition-all duration-300 ease-[cubic-bezier(0.445,0.05,0.55,0.95)] rounded-[50%];
+}
+.star--1 {
+  --at-apply: z-0 w-[30px] h-[3px] left-[35px] top-2.5;
+}
+.star--2 {
+  --at-apply: z-[1] w-[30px] h-[3px] left-7 top-[18px];
+}
+.star--3 {
+  --at-apply: z-0 w-[30px] h-[3px] left-10 top-[27px];
+}
+.star--4,
+.star--5,
+.star--6 {
+  --at-apply: opacity-0;
+  transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+.star--4 {
+  --at-apply: z-0 w-0.5 h-0.5 left-[11px] top-4;
+  transform: translate3d(3px, 0, 0);
+}
+.star--5 {
+  --at-apply: z-0 w-[3px] h-[3px] left-[17px] top-8;
+  transform: translate3d(3px, 0, 0);
+}
+.star--6 {
+  --at-apply: z-0 w-0.5 h-0.5 left-7 top-9;
+  transform: translate3d(3px, 0, 0);
+}
+input:checked + .toggle {
+  --at-apply: bg-[#749dd6] before:text-[#749ed7] after:text-white;
+}
+input:checked + .toggle .toggle__handler {
+  --at-apply: bg-[#ffe5b5];
+  transform: translate3d(40px, 0, 0) rotate(0);
+}
+input:checked + .toggle .toggle__handler .crater {
+  --at-apply: opacity-100;
+}
+input:checked + .toggle .star--1 {
+  --at-apply: w-0.5 h-0.5;
+}
+input:checked + .toggle .star--2 {
+  --at-apply: w-1 h-1;
+  transform: translate3d(-5px, 0, 0);
+}
+input:checked + .toggle .star--3 {
+  --at-apply: w-0.5 h-0.5;
+  transform: translate3d(-7px, 0, 0);
+}
+input:checked + .toggle .star--4,
+input:checked + .toggle .star--5,
+input:checked + .toggle .star--6 {
+  --at-apply: opacity-100;
+  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/built-in/layout-component/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>

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useContext } from '../../../composables/useContext';
+
+defineOptions({
+  name: 'SettingCopyright',
+});
+const { settingsStore } = useContext();
+const copyright = toRef(settingsStore.settings, 'copyright');
+</script>
+
+<template>
+  <HDivider title="底部版权">
+    <div class="setting-item">
+      <div class="label">
+        是否启用
+      </div>
+      <HToggle v-model="copyright.enable" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        日期
+      </div>
+      <HInput v-model="copyright.dates" :disabled="!copyright.enable" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        公司
+      </div>
+      <HInput v-model="copyright.company" :disabled="!copyright.enable" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        网址
+      </div>
+      <HInput v-model="copyright.website" :disabled="!copyright.enable" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        备案
+      </div>
+      <HInput v-model="copyright.beian" :disabled="!copyright.enable" />
+    </div>
+  </HDivider>
+</template>

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

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { useContext } from '../../../composables/useContext';
+
+defineOptions({
+  name: 'SettingEnableTransition',
+});
+const { settingsStore } = useContext();
+
+const { enableTransition, transitionMode } = toRefs(settingsStore.settings.mainPage);
+
+function clickHandle(item: Settings.mainPage['transitionMode']) {
+  if (item) {
+    transitionMode.value = item;
+  }
+}
+const transitionModeList = reactive<
+  {
+    describe: string
+    active: Settings.mainPage['transitionMode']
+    class: string
+  }[]
+>([
+  {
+    describe: '淡入淡出',
+    active: 'fade',
+    class: 'mode-fade',
+  },
+  {
+    describe: '向左滑动',
+    active: 'slide-left',
+    class: 'mode-slide-left',
+  },
+  {
+    describe: '向右滑动',
+    active: 'slide-right',
+    class: 'mode-slide-right',
+  },
+  {
+    describe: '向上滑动',
+    active: 'slide-top',
+    class: 'mode-slide-top',
+  },
+  {
+    describe: '向下滑动',
+    active: 'slide-bottom',
+    class: 'mode-slide-bottom',
+  },
+]);
+</script>
+
+<template>
+  <HDivider title="页面切换动画">
+    <div class="flex items-center justify-center pb-4">
+      <HToggle v-model="enableTransition" />
+    </div>
+    <div v-if="enableTransition" class="transition-mode">
+      <HTooltip
+        v-for="(transition, index) in transitionModeList"
+        :key="index"
+        :text="transition.describe"
+        placement="bottom"
+        :delay="500"
+      >
+        <div
+          class="mode"
+          :class="[transitionMode === transition.active ? 'active' : '', transition.class]"
+          @click="clickHandle(transition.active)"
+        />
+      </HTooltip>
+    </div>
+  </HDivider>
+</template>
+
+<style scoped>
+.transition-mode {
+  --at-apply: flex items-center justify-center gap-4 pb-4;
+}
+
+.transition-mode .mode {
+  --at-apply: relative flex items-center justify-center w-14 h-10 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer;
+}
+
+.transition-mode .mode.active {
+  --at-apply: ring-ui-primary ring-2;
+}
+
+.transition-mode .mode::after {
+  --at-apply: content-empty absolute w-3/5 h-3/5 top-1/5 left-1/5 rounded-2 bg-stone-2 dark:bg-stone-9 transition;
+}
+
+.transition-mode .mode.mode-fade::after {
+  animation: transition-mode-fade-after 1.5s infinite;
+}
+
+@keyframes transition-mode-fade-after {
+  0% {
+    opacity: 1;
+  }
+  30%, 35% {
+    opacity: 0;
+  }
+  65% {
+    opacity: 1;
+  }
+}
+
+.transition-mode .mode.mode-slide-left::after {
+  animation: transition-mode-slide-left 1.5s infinite;
+}
+
+@keyframes transition-mode-slide-left {
+  0% {
+    opacity: 1;
+  }
+  30% {
+    opacity: 0;
+    transform: translate(-30%, 0);
+  }
+  35% {
+    opacity: 0;
+    transform: translate(30%, 0);
+  }
+  65% {
+    opacity: 1;
+  }
+}
+
+.transition-mode .mode.mode-slide-right::after {
+  animation: transition-mode-slide-right 1.5s infinite;
+}
+
+@keyframes transition-mode-slide-right {
+  0% {
+    opacity: 1;
+  }
+  30% {
+    opacity: 0;
+    transform: translate(30%, 0);
+  }
+  35% {
+    opacity: 0;
+    transform: translate(-30%, 0);
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.transition-mode .mode.mode-slide-top::after {
+  animation: transition-mode-slide-top 1.5s infinite;
+}
+
+@keyframes transition-mode-slide-top {
+  0% {
+    opacity: 1;
+  }
+  30% {
+    opacity: 0;
+    transform: translate(0, -30%);
+  }
+  35% {
+    opacity: 0;
+    transform: translate(0, 30%);
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.transition-mode .mode.mode-slide-bottom::after {
+  animation: transition-mode-slide-bottom 1.5s infinite;
+}
+
+@keyframes transition-mode-slide-bottom {
+  0% {
+    opacity: 1;
+  }
+  30% {
+    opacity: 0;
+    transform: translate(0, 30%);
+  }
+  35% {
+    opacity: 0;
+    transform: translate(0, -30%);
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import RiQuestionLine from '~icons/ri/question-line';
+import { useContext } from '../../../composables/useContext';
+
+defineOptions({
+  name: 'SettingHome',
+});
+const { settingsStore } = useContext();
+const { home, toolbar } = toRefs(settingsStore.settings);
+</script>
+
+<template>
+  <HDivider title="主页">
+    <div class="setting-item">
+      <div class="label">
+        是否启用
+        <HTooltip text="该功能开启时，登录成功默认进入主页，反之则默认进入导航栏里第一个导航页面">
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HToggle v-model="home.enable" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        主页名称
+      </div>
+      <HInput v-model="home.title" />
+    </div>
+  </HDivider>
+</template>