@pubinfo/core 2.0.0-beta.1

package/src/layout/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/layout/components/SettingBar/components/SettingEnableTransition.vue

@@ -0,0 +1,215 @@
+<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 lang="scss" scoped>
+.transition-mode {
+  --at-apply: flex items-center justify-center gap-4 pb-4;
+
+  .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;
+
+    &.active {
+      --at-apply: ring-ui-primary ring-2;
+    }
+
+    &::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;
+    }
+
+    &.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;
+        }
+      }
+    }
+
+    &.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;
+        }
+      }
+    }
+
+    &.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;
+        }
+      }
+    }
+
+    &.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;
+        }
+      }
+    }
+
+    &.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/layout/components/SettingBar/components/SettingHome.vue

@@ -0,0 +1,33 @@
+<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">
+        主页名称
+        <HTooltip text="开启国际化时，该设置无效">
+          <RiQuestionLine />
+        </HTooltip>
+      </div>
+      <HInput v-model="home.title" :disabled="toolbar.enableI18n" />
+    </div>
+  </HDivider>
+</template>

package/src/layout/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/layout/components/SettingBar/components/SettingMode.vue

@@ -0,0 +1,164 @@
+<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 lang="scss">
+.menu-mode {
+  --at-apply: flex items-center justify-center gap-4 pb-4;
+
+  .mode {
+    --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition;
+
+    &.active {
+      --at-apply: ring-ui-primary ring-2;
+    }
+
+    &::before,
+    &::after,
+    .mode-container {
+      --at-apply: absolute pointer-events-none;
+    }
+
+    &::before {
+      --at-apply: content-empty bg-ui-primary;
+    }
+
+    &::after {
+      --at-apply: content-empty bg-ui-primary/60;
+    }
+
+    .mode-container {
+      --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
+
+      &::before {
+        --at-apply: content-empty absolute w-full h-full;
+      }
+    }
+
+    &-side {
+      &::before {
+        --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+      }
+
+      &::after {
+        --at-apply: top-2 bottom-2 left-4.5 w-3;
+      }
+
+      .mode-container {
+        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
+      }
+    }
+
+    &-head {
+      &::before {
+        --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+      }
+
+      &::after {
+        --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
+      }
+
+      .mode-container {
+        --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
+      }
+    }
+
+    &-single {
+      &::after {
+        --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
+      }
+
+      .mode-container {
+        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
+      }
+    }
+
+    &-only-side {
+      &::before {
+        --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+      }
+
+      .mode-container {
+        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-4.5 rounded-tr-1 rounded-br-1;
+      }
+    }
+
+    &-only-head {
+      &::before {
+        --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+      }
+
+      .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/layout/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/layout/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/layout/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>