@pubinfo/core 2.0.0-beta.1

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

@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import type { colorScheme, cssVarKey } from '@pubinfo/config/themes';
+import { useTheme } from '@/composables';
+import { themes } from '@pubinfo/config/themes';
+import JamBookmarkF from '~icons/jam/bookmark-f';
+import PajamasCheckCircleFilled from '~icons/pajamas/check-circle-filled';
+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[]>(() =>
+  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 lang="scss" scoped>
+.divider {
+  --at-apply:
+    flex
+    items-center
+    justify-between
+    gap-4
+    my-4
+    whitespace-nowrap
+    text-sm
+    font-500;
+
+  &::before,
+  &::after {
+    --at-apply:
+      content-empty
+      w-full
+      h-1px
+      bg-stone-2
+      dark:bg-stone-6;
+  }
+}
+
+.themes {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(3, 125px);
+  grid-gap: 15px;
+  width: 100%;
+
+  .theme {
+    position: relative;
+    box-sizing: border-box;
+    height: 78px;
+    padding: 15px;
+    margin-bottom: 15px;
+    color: #fff;
+    cursor: pointer;
+    background-color: #f7f8f9;
+    border-radius: 12px;
+    transition: all 0.2s ease-in-out;
+
+    --at-apply: shadow dark:bg-dark-2;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+
+    .explosion {
+      position: absolute;
+      top: -10px;
+      right: -10px;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      background-color: rgb(var(--ui-primary));
+      border-radius: 50%;
+      transition: all 0.3s;
+      transform: scale(0);
+      transform-origin: center;
+    }
+
+    &.active {
+      box-shadow: 0 0 0 4px rgb(var(--ui-primary));
+
+      .explosion {
+        transform: scale(1);
+      }
+    }
+
+    .theme-type {
+      width: 100%;
+      height: 16px;
+      margin-top: 5px;
+      margin-bottom: 10px;
+    }
+
+    .theme-point {
+      display: grid;
+      grid-template-columns: repeat(6, 15px);
+      width: 100%;
+      height: 20px;
+
+      .point {
+        box-sizing: border-box;
+        width: 20px;
+        height: 20px;
+        margin-right: 5px;
+        border: 2px solid #fff;
+        border-radius: 50%;
+
+        --at-apply: shadow shadow-stone-4 dark:shadow-stone-8;
+      }
+    }
+  }
+}
+</style>

package/src/layout/components/SettingBar/components/SettingToolbar.vue

@@ -0,0 +1,54 @@
+<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 class="setting-item">
+      <div class="label">
+        国际化
+      </div>
+      <HToggle v-model="toolbar.enableI18n" />
+    </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/layout/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>

package/src/layout/components/SettingBar/components/SettingWidthMode.vue

@@ -0,0 +1,149 @@
+<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 lang="scss" scoped>
+.app-width-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 of-hidden;
+
+    &.active {
+      --at-apply: ring-ui-primary ring-2;
+    }
+
+    &-adaption {
+      &::before {
+        --at-apply: content-empty absolute w-full h-full bg-stone-1 dark:bg-stone-9;
+      }
+
+      .left,
+      .right {
+        --at-apply: absolute top-1/2 -translate-y-1/2;
+      }
+
+      .left {
+        --at-apply: left-1;
+      }
+
+      .right {
+        --at-apply: right-1;
+      }
+    }
+
+    &-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;
+      }
+
+      .left,
+      .right {
+        --at-apply: absolute top-1/2 -translate-y-1/2;
+      }
+
+      .left {
+        --at-apply: left-0.5;
+      }
+
+      .right {
+        --at-apply: right-0.5;
+      }
+    }
+
+    &-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;
+      }
+    }
+
+    &-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;
+      }
+
+      .left,
+      .right {
+        --at-apply: absolute top-1/2 -translate-y-1/2;
+      }
+
+      .left {
+        --at-apply: left-2.5;
+      }
+
+      .right {
+        --at-apply: right-2.5;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,112 @@
+<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 lang="scss" scoped>
+.app-setting-warp {
+  position: relative;
+  position: fixed;
+  top: calc(50%);
+  right: 10px;
+  z-index: 10;
+
+  .vue-devtools__anchor--glowing {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 160px;
+    height: 160px;
+    pointer-events: none;
+    background-image: linear-gradient(45deg, #00dc82, #36e4da, #0047e1);
+    filter: blur(60px);
+    border-radius: 9999px;
+    opacity: 0;
+    transition: all 1s ease;
+    transform: translate(-25%, -25%);
+  }
+
+  &:hover {
+    .vue-devtools__anchor--glowing {
+      opacity: 0.7;
+    }
+  }
+}
+
+.app-setting {
+  --at-apply: text-white dark:text-dark bg-ui-primary;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  width: 30px;
+  height: 76px;
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 30px;
+
+  .app-setting-item {
+    display: flex;
+    flex: auto;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 0;
+  }
+
+  .divider {
+    width: 10px;
+    height: 1px;
+    background-color: darken($color: #fff, $amount: 30%);
+  }
+
+  .icon {
+    animation: rotate 5s linear infinite;
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+</style>