@pubinfo-nightly/core 2025.11.14

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

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import RiQuestionLine from '~icons/ri/question-line';
+import { useContext } from '../../../composables/useContext';
+
+defineOptions({
+  name: 'SettingMenu',
+});
+const { settingsStore } = useContext();
+const menu = toRef(settingsStore.settings, 'menu');
+</script>
+
+<template>
+  <HDivider title="导航栏">
+    <div class="setting-item">
+      <div class="label">
+        主导航切换跳转
+        <HTooltip
+          text="开启该功能后，切换主导航时，页面自动跳转至该主导航下，次导航里第一个导航"
+        >
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HToggle
+        v-model="menu.switchMainMenuAndPageJump"
+        :disabled="['single', 'only-side', 'only-head'].includes(menu.menuMode)"
+      />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        次导航自动隐藏
+        <HTooltip
+          text="开启该功能后，切换主导航时，如果次导航里只有一个导航时，则自动隐藏"
+        >
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HToggle
+        v-model="menu.subMenuOnlyOneHide"
+        :disabled="['single', 'only-side', 'only-head'].includes(menu.menuMode)"
+      />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        次导航保持展开一个
+        <HTooltip
+          text="开启该功能后，次导航只保持单个菜单的展开"
+        >
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HToggle
+        v-model="menu.subMenuUniqueOpened"
+        :disabled="['only-side', 'only-head'].includes(menu.menuMode)"
+      />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        次导航是否折叠
+      </div>
+      <HToggle
+        v-model="menu.subMenuCollapse"
+        :disabled="['only-side', 'only-head'].includes(menu.menuMode)"
+      />
+    </div>
+    <div
+      v-if="settingsStore.mode === 'pc'"
+      class="setting-item"
+    >
+      <div class="label">
+        显示次导航折叠按钮
+      </div>
+      <HToggle
+        v-model="menu.enableSubMenuCollapseButton"
+        :disabled="['only-side', 'only-head'].includes(menu.menuMode)"
+      />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        是否圆角
+      </div>
+      <HToggle v-model="menu.isRounded" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        激活风格
+      </div>
+      <HCheckList
+        v-model="menu.menuActiveStyle"
+        :options="[
+          { icon: 'i-jam-stop-sign', value: '' },
+          { icon: ['head', 'only-head'].includes(menu.menuMode) ? 'i-ep-caret-top' : 'i-ep-caret-left', value: 'arrow' },
+          { icon: ['side', 'only-side'].includes(menu.menuMode) ? 'i-tabler-minus-vertical' : 'i-tabler-minus', value: 'line' },
+          { icon: 'i-icon-park-outline-dot', value: 'dot' },
+        ]"
+        :disabled="menu.menuMode === 'single'"
+      />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        是否启用快捷键
+      </div>
+      <HToggle
+        v-model="menu.enableHotkeys"
+        :disabled="['single', 'only-side', 'only-head'].includes(menu.menuMode)"
+      />
+    </div>
+  </HDivider>
+</template>

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

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { useContext } from '../../../composables/useContext';
+
+defineOptions({
+  name: 'SettingMode',
+});
+const { settingsStore } = useContext();
+const menu = toRef(settingsStore.settings.menu, 'menuMode');
+
+const modeSide = reactive<
+  {
+    describe: string
+    placement: string
+    active: Settings.menu['menuMode']
+  }[]
+>([
+  {
+    describe: '侧边栏模式 (含主导航)',
+    placement: 'bottom',
+    active: 'side',
+  },
+  {
+    describe: '顶部模式',
+    placement: 'bottom',
+    active: 'head',
+  },
+  {
+    describe: '侧边栏模式 (不含主导航)',
+    placement: 'bottom',
+    active: 'single',
+  },
+  {
+    describe: '侧边栏精简模式',
+    placement: 'bottom',
+    active: 'only-side',
+  },
+  {
+    describe: '顶部精简模式',
+    placement: 'bottom',
+    active: 'only-head',
+  },
+]);
+function clickHandle(item: Settings.menu['menuMode']) {
+  if (item) {
+    menu.value = item;
+  }
+}
+</script>
+
+<template>
+  <HDivider title="导航栏模式">
+    <div class="menu-mode">
+      <template v-for="mode in modeSide" :key="mode.active">
+        <HTooltip
+          :text="mode.describe"
+          :placement="mode.placement"
+          :delay="500"
+        >
+          <div
+            class="mode"
+            :class="[menu === mode.active ? 'active' : '', `mode-${mode.active}`]"
+            @click="clickHandle(mode.active)"
+          >
+            <div class="mode-container" />
+          </div>
+        </HTooltip>
+      </template>
+    </div>
+  </HDivider>
+</template>
+
+<style scoped>
+.menu-mode {
+  --at-apply: flex items-center justify-center gap-4 pb-4;
+}
+
+.menu-mode .mode {
+  --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition;
+}
+
+.menu-mode .mode.active {
+  --at-apply: ring-ui-primary ring-2;
+}
+
+.menu-mode .mode::before,
+.menu-mode .mode::after,
+.menu-mode .mode .mode-container {
+  --at-apply: absolute pointer-events-none;
+}
+
+.menu-mode .mode::before {
+  --at-apply: content-empty bg-ui-primary;
+}
+
+.menu-mode .mode::after {
+  --at-apply: content-empty bg-ui-primary/60;
+}
+
+.menu-mode .mode .mode-container {
+  --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
+}
+
+.menu-mode .mode .mode-container::before {
+  --at-apply: content-empty absolute w-full h-full;
+}
+
+.menu-mode .mode-side::before {
+  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+}
+
+.menu-mode .mode-side::after {
+  --at-apply: top-2 bottom-2 left-4.5 w-3;
+}
+
+.menu-mode .mode-side .mode-container {
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
+}
+
+.menu-mode .mode-head::before {
+  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+}
+
+.menu-mode .mode-head::after {
+  --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
+}
+
+.menu-mode .mode-head .mode-container {
+  --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
+}
+
+.menu-mode .mode-single::after {
+  --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
+}
+
+.menu-mode .mode-single .mode-container {
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
+}
+
+.menu-mode .mode-only-side::before {
+  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+}
+
+.menu-mode .mode-only-side .mode-container {
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-4.5 rounded-tr-1 rounded-br-1;
+}
+
+.menu-mode .mode-only-head::before {
+  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+}
+
+.menu-mode .mode-only-head .mode-container {
+  --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-2 rounded-bl-1 rounded-br-1;
+}
+</style>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import RiQuestionLine from '~icons/ri/question-line';
+import { useContext } from '../../../composables/useContext';
+
+defineOptions({
+  name: 'SettingNavSearch',
+});
+const { settingsStore } = useContext();
+const navSearch = toRef(settingsStore.settings, 'navSearch');
+</script>
+
+<template>
+  <HDivider title="导航搜索">
+    <div class="setting-item">
+      <div class="label">
+        是否启用
+        <HTooltip text="对导航进行快捷搜索">
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HToggle v-model="navSearch.enable" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        是否启用快捷键
+      </div>
+      <HToggle v-model="navSearch.enableHotkeys" :disabled="!navSearch.enable" />
+    </div>
+  </HDivider>
+</template>

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import RiQuestionLine from '~icons/ri/question-line';
+import { useContext } from '../../../composables/useContext';
+
+defineOptions({
+  name: 'SettingOther',
+});
+const { settingsStore } = useContext();
+const {
+  enablePermission,
+  enableProgress,
+  enableDynamicTitle,
+  storagePrefix,
+} = toRefs(settingsStore.settings.app);
+</script>
+
+<template>
+  <HDivider title="其它">
+    <div class="setting-item">
+      <div class="label">
+        是否启用权限
+      </div>
+      <HToggle v-model="enablePermission" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        载入进度条
+        <HTooltip text="该功能开启时，跳转路由会看到页面顶部有进度条">
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HToggle v-model="enableProgress" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        动态标题
+        <HTooltip text="该功能开启时，页面标题会显示当前路由标题，格式为“页面标题 - 网站名称”；关闭时则显示网站名称，网站名称在项目根目录下 .env.* 文件里配置">
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HToggle v-model="enableDynamicTitle" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        Storage 前缀
+        <HTooltip text="localStorage 和 sessionStorage 的字段前缀">
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HInput v-model="storagePrefix" />
+    </div>
+  </HDivider>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useContext } from '../../../composables/useContext';
+
+defineOptions({
+  name: 'SettingPage',
+});
+const { settingsStore } = useContext();
+const mainPage = toRef(settingsStore.settings, 'mainPage');
+</script>
+
+<template>
+  <HDivider title="页面">
+    <div class="setting-item">
+      <div class="label">
+        是否启用快捷键
+      </div>
+      <HToggle v-model="mainPage.enableHotkeys" />
+    </div>
+  </HDivider>
+</template>

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

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import RiQuestionLine from '~icons/ri/question-line';
+import { useContext } from '../../../composables/useContext';
+
+defineOptions({
+  name: 'SettingTabbar',
+});
+const { settingsStore } = useContext();
+const tabbar = toRef(settingsStore.settings, 'tabbar');
+</script>
+
+<template>
+  <HDivider title="标签栏">
+    <div class="setting-item">
+      <div class="label">
+        是否启用
+      </div>
+      <HToggle v-model="tabbar.enable" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        风格
+      </div>
+      <HCheckList
+        v-model="tabbar.style"
+        :options="[
+          { label: '时尚', value: 'fashion' },
+          { label: '卡片', value: 'card' },
+          { label: '方块', value: 'square' },
+        ]"
+        :disabled="!tabbar.enable"
+      />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        是否显示图标
+      </div>
+      <HToggle v-model="tabbar.enableIcon" :disabled="!tabbar.enable" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        标签页合并规则
+      </div>
+      <HSelect
+        v-model="tabbar.mergeTabsBy"
+        :options="[
+          { label: '不合并', value: '' },
+          { label: '根据 activeMenu 合并', value: 'activeMenu' },
+          { label: '根据路由名称合并', value: 'routeName' },
+        ]"
+        :disabled="!tabbar.enable"
+      />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        是否启用记忆功能
+        <HTooltip text="开启该功能后，非固定和非常驻的标签页将在本次会话窗口中始终存在，刷新浏览器或重新登录时不会丢失">
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HToggle v-model="tabbar.enableMemory" :disabled="!tabbar.enable" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        是否启用快捷键
+      </div>
+      <HToggle v-model="tabbar.enableHotkeys" :disabled="!tabbar.enable" />
+    </div>
+  </HDivider>
+</template>

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

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import type { colorScheme, cssVarKey } from '@pubinfo-nightly/config/themes';
+import { getThemes } from '@pubinfo-nightly/config/themes';
+import JamBookmarkF from '~icons/jam/bookmark-f';
+import PajamasCheckCircleFilled from '~icons/pajamas/check-circle-filled';
+import { useTheme } from '@/features/composables';
+import { useContext } from '../../../composables/useContext';
+import DayNightToggle from './DayNightToggle.vue';
+
+interface ThemeListCard {
+  label: string
+  value: colorScheme
+  colors: string[]
+  name?: string
+}
+
+defineOptions({
+  name: 'SettingThemes',
+});
+const { isDark } = useTheme();
+const { settingsStore } = useContext();
+const app = toRef(settingsStore.settings, 'app');
+
+const benchmark: cssVarKey[] = [
+  '--ui-primary',
+  '--ui-text',
+  '--g-bg',
+  '--g-header-bg',
+  '--g-main-sidebar-bg',
+  '--g-sub-sidebar-bg',
+];
+
+const themeList = computed<ThemeListCard[]>(() => {
+  const themes = getThemes();
+
+  return Object.keys(themes).map((key) => {
+    const value = themes[key];
+    const colors = benchmark.map((cssVar) => {
+      const cssValue = value[cssVar].startsWith('#')
+        ? value[cssVar]
+        : `rgb(${value[cssVar]})`;
+      return cssValue;
+    });
+    const name = themes[key].label;
+    return {
+      label: key,
+      value,
+      colors,
+      name,
+    };
+  }).filter(cssVarScheme =>
+    cssVarScheme.value['color-scheme'] === app.value.colorScheme,
+  );
+});
+
+function clickHandle(item: ThemeListCard) {
+  const label = item.label;
+  if (isDark.value) {
+    app.value.darkTheme = label;
+  }
+  else {
+    app.value.lightTheme = label;
+  }
+}
+</script>
+
+<template>
+  <HDivider title="颜色主题风格">
+    <div>
+      <DayNightToggle v-model="isDark" />
+    </div>
+    <div class="themes">
+      <div
+        v-for="item in themeList"
+        :key="item.label"
+        class="theme"
+        :class="{ active: isDark ? app.darkTheme === item.label : app.lightTheme === item.label }"
+        @click="clickHandle(item)"
+      >
+        <div
+          class="theme-type"
+          flex
+          items-center
+        >
+          <span :style="{ color: item.colors.at(0) }" mr-5px>
+            <JamBookmarkF />
+          </span>
+          <span :style="{ color: item.colors.at(0) }" text-sm>
+            {{ item.name || item.label }}
+          </span>
+        </div>
+        <div class="theme-point">
+          <template v-for="color in item.colors" :key="color">
+            <div class="point" :style="{ backgroundColor: color }" />
+          </template>
+        </div>
+        <div class="explosion">
+          <PajamasCheckCircleFilled />
+        </div>
+      </div>
+    </div>
+  </HDivider>
+</template>
+
+<style scoped>
+.divider {
+  --at-apply:
+    flex
+    items-center
+    justify-between
+    gap-4
+    my-4
+    whitespace-nowrap
+    text-sm
+    font-500;
+}
+
+.divider::before,
+.divider::after {
+  --at-apply:
+    content-empty
+    w-full
+    h-1px
+    bg-stone-2
+    dark:bg-stone-6;
+}
+
+.themes {
+  --at-apply: box-border grid grid-cols-[repeat(3,125px)] gap-[15px] w-full;
+}
+
+.themes .theme {
+  --at-apply: relative box-border h-[78px] text-white cursor-pointer bg-[#f7f8f9] dark:bg-dark-2
+  transition-all duration-[0.2s] ease-[ease-in-out] mb-[15px] p-[15px] rounded-xl shadow;
+}
+
+.themes .theme:hover {
+  transform: scale(1.05);
+}
+
+.themes .theme .explosion {
+  --at-apply: bg-ui-primary absolute z-[1] flex items-center justify-center w-6 h-6
+  transition-all duration-[0.3s] origin-center rounded-[50%] scale-0 -right-2.5 -top-2.5;
+}
+
+.themes .theme.active {
+  box-shadow: 0 0 0 4px rgb(var(--ui-primary));
+}
+
+.themes .theme.active .explosion {
+  transform: scale(1);
+}
+
+.themes .theme .theme-type {
+  --at-apply: w-full h-4 mt-5px pb-10px;
+}
+
+.themes .theme .theme-point {
+  --at-apply: grid grid-cols-[repeat(6,15px)] w-full h-5;
+}
+
+.themes .theme .theme-point .point {
+  --at-apply: box-border w-5 h-5 mr-[5px] rounded-[50%]
+  border-2 border-solid border-white
+  shadow shadow-stone-4 dark:shadow-stone-8;
+}
+</style>

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import RiQuestionLine from '~icons/ri/question-line';
+import { useContext } from '../../../composables/useContext';
+
+defineOptions({
+  name: 'SettingToolbar',
+});
+const { settingsStore } = useContext();
+const toolbar = toRef(settingsStore.settings, 'toolbar');
+</script>
+
+<template>
+  <HDivider title="工具栏">
+    <div class="setting-item">
+      <div class="label">
+        通知中心
+        <HTooltip text="该功能具体业务功能需自行开发，框架仅提供示例模版">
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HToggle v-model="toolbar.enableNotification" />
+    </div>
+    <div v-if="settingsStore.mode === 'pc'" class="setting-item">
+      <div class="label">
+        全屏
+      </div>
+      <HToggle v-model="toolbar.enableFullscreen" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        页面刷新
+        <HTooltip text="使用框架内提供的刷新功能进行页面刷新">
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HToggle v-model="toolbar.enablePageReload" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        颜色主题
+        <HTooltip text="开启后可在明亮/暗黑模式中切换">
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HToggle v-model="toolbar.enableColorScheme" />
+    </div>
+  </HDivider>
+</template>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import RiQuestionLine from '~icons/ri/question-line';
+import { useContext } from '../../../composables/useContext';
+
+defineOptions({
+  name: 'SettingTopbar',
+});
+const { settingsStore } = useContext();
+const { topbar, tabbar } = toRefs(settingsStore.settings);
+</script>
+
+<template>
+  <HDivider title="顶栏">
+    <div class="setting-item">
+      <div class="label">
+        模式
+      </div>
+      <HCheckList
+        v-model="topbar.mode"
+        :options="[
+          { label: '静止', value: 'static' },
+          { label: '固定', value: 'fixed' },
+          { label: '粘性', value: 'sticky' },
+        ]"
+      />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        展示切换
+        <HTooltip text="切换标签栏和工具栏的展示顺序">
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HToggle v-model="topbar.switchTabbarAndToolbar" :disabled="!tabbar.enable" />
+    </div>
+  </HDivider>
+</template>