@pubinfo/core 2.0.0-beta.8 → 2.0.0-rc.1

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { colorScheme, cssVarKey } from '@pubinfo/config/themes';
-import { useTheme } from '@/composables';
-import { themes } from '@pubinfo/config/themes';
+import { getThemes } from '@pubinfo/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';
 
@@ -30,8 +30,10 @@ const benchmark: cssVarKey[] = [
   '--g-sub-sidebar-bg',
 ];
 
-const themeList = computed<ThemeListCard[]>(() =>
-  Object.keys(themes).map((key) => {
+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('#')
@@ -48,8 +50,8 @@ const themeList = computed<ThemeListCard[]>(() =>
     };
   }).filter(cssVarScheme =>
     cssVarScheme.value['color-scheme'] === app.value.colorScheme,
-  ),
-);
+  );
+});
 
 function clickHandle(item: ThemeListCard) {
   const label = item.label;
@@ -100,7 +102,7 @@ function clickHandle(item: ThemeListCard) {
   </HDivider>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .divider {
   --at-apply:
     flex
@@ -111,92 +113,55 @@ function clickHandle(item: ThemeListCard) {
     whitespace-nowrap
     text-sm
     font-500;
+}
 
-  &::before,
-  &::after {
-    --at-apply:
-      content-empty
-      w-full
-      h-1px
-      bg-stone-2
-      dark:bg-stone-6;
-  }
+.divider::before,
+.divider::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;
-      }
-    }
-  }
+  --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/{layout → built-in/layout-component}/components/SettingBar/components/SettingWidthMode.vue

@@ -71,79 +71,71 @@ function clickHandle(item: Settings.layout['widthMode']) {
   </HDivider>
 </template>
 
-<style lang="scss" scoped>
+<style 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;
-      }
-    }
-  }
+.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/{layout → built-in/layout-component}/components/Sidebar/MainSidebar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PubinfoIcon } from '@/components';
+import { PubinfoIcon } from '@/features/components';
 import { useContext } from '../../composables/useContext';
 import useMenu from '../../composables/useMenu';
 import Logo from '../Logo/index.vue';
@@ -15,14 +15,11 @@ const { settingsStore, menuStore, generateI18nTitle } = useContext();
 const { switchTo } = useMenu();
 
 function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
-  let name;
-  if ((!isActive && icon) || (isActive && !activeIcon)) {
-    name = icon;
+  if (isActive && activeIcon) {
+    return activeIcon;
   }
-  else if (isActive && activeIcon) {
-    name = activeIcon;
-  }
-  return name;
+
+  return icon;
 }
 </script>
 
@@ -47,7 +44,7 @@ function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
             }"
           >
             <div
-              v-if="(item.children && item.children.length !== 0) || item?.meta?.isDev"
+              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,
@@ -89,145 +86,100 @@ function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
   </Transition>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .main-sidebar-container {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
+  --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 {
-    background-color: var(--g-main-sidebar-bg);
-    transition: background-color 0.3s;
-  }
+.sidebar-logo {
+  --at-apply: bg-[--g-main-sidebar-bg];
+  transition: background-color 0.3s;
+}
 
-  :deep(.menu-item-container-layout) {
-    display: flex;
-    flex-direction: row;
-    width: auto;
+:deep(.menu-item-container-layout) {
+  --at-apply: flex flex-col w-auto;
+}
 
-    .title {
-      display: none;
-    }
-  }
+:deep(.menu-item-container-layout) .title {
+  --at-apply: hidden;
+}
 
-  .menu-active {
-    &-arrow {
-      .item-container::before,
-      :deep(.menu-item::before) {
-        right: -5px;
-        width: 0;
-        height: 0;
-        content: "";
-        border-top: 5px solid transparent;
-        border-right: 5px solid var(--g-main-sidebar-bg);
-        border-bottom: 5px solid transparent;
-        opacity: 0;
-        transition: all 0.3s;
-
-        @include position-center(y);
-      }
-
-      .item-container.active::before,
-      :deep(.menu-item.active::before) {
-        right: 8px;
-        opacity: 1;
-      }
-    }
-
-    &-line {
-      .item-container::before,
-      :deep(.menu-item::before) {
-        left: 6px;
-        width: 4px;
-        height: 0;
-        content: "";
-        background-color: var(--g-main-sidebar-menu-active-bg);
-        border-radius: 2px;
-        box-shadow: 0 0 0 1px var(--g-main-sidebar-bg);
-        opacity: 0;
-        transition: all 0.3s;
-
-        @include position-center(y);
-      }
-
-      .item-container.active::before,
-      :deep(.menu-item.active::before) {
-        height: 20px;
-        opacity: 1;
-      }
-    }
-
-    &-dot {
-      .item-container::before,
-      :deep(.menu-item::before) {
-        left: 0;
-        width: 10px;
-        height: 10px;
-        content: "";
-        background-color: var(--g-main-sidebar-menu-active-bg);
-        border-radius: 50%;
-        box-shadow: 0 0 0 1px var(--g-main-sidebar-bg);
-        opacity: 0;
-        transition: all 0.3s;
-
-        @include position-center(y);
-      }
-
-      .item-container.active::before,
-      :deep(.menu-item.active::before) {
-        left: 4px;
-        opacity: 1;
-      }
-    }
-  }
+/* 菜单激活样式 */
+.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 {
-    flex: 1;
-    width: initial;
-    overflow: hidden auto;
-    overscroll-behavior: contain;
-
-    // firefox隐藏滚动条
-    scrollbar-width: none;
-
-    // chrome隐藏滚动条
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    :deep(.menu-item) {
-      .menu-item-container {
-        height: 50px;
-        padding: 0 5px;
-        color: var(--g-main-sidebar-menu-color);
-        background-color: var(--g-main-sidebar-menu-bg);
-
-        .menu-item-container-icon {
-          font-size: 24px !important;
-          transform: scale(1);
-        }
-      }
-
-      &:hover .menu-item-container {
-        color: var(--g-main-sidebar-menu-hover-color);
-        background-color: var(--g-main-sidebar-menu-hover-bg);
-      }
-
-      &.active .menu-item-container {
-        color: var(--g-main-sidebar-menu-active-color) !important;
-        background-color: var(--g-main-sidebar-menu-active-bg) !important;
-      }
-    }
-  }
+.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;