@pubinfo/core 2.0.0-beta.31 → 2.0.0-beta.32

package/src/layout/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 { getThemes } from '@pubinfo/config/themes';
 import JamBookmarkF from '~icons/jam/bookmark-f';
 import PajamasCheckCircleFilled from '~icons/pajamas/check-circle-filled';
+import { useTheme } from '@/composables';
 import { useContext } from '../../../composables/useContext';
 import DayNightToggle from './DayNightToggle.vue';
 
@@ -102,7 +102,7 @@ function clickHandle(item: ThemeListCard) {
   </HDivider>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .divider {
   --at-apply:
     flex
@@ -113,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/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/layout/components/SettingBar/index.vue

@@ -36,79 +36,46 @@ const [open, setOpen] = useToggle(false);
   </div>
 </template>
 
-<style lang="scss" scoped>
-@use "sass:color";
-
+<style scoped>
 .app-setting-warp {
-  position: relative;
-  position: fixed;
-  top: calc(50%);
-  right: 10px;
-  z-index: 10;
+  --at-apply: relative fixed top-1/2 right-10px z-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%);
-  }
+.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);
+}
 
-  &:hover {
-    .vue-devtools__anchor--glowing {
-      opacity: 0.7;
-    }
-  }
+.app-setting-warp:hover .vue-devtools__anchor--glowing {
+  --at-apply: op-70;
 }
 
 .app-setting {
-  --at-apply: text-white dark:text-dark bg-ui-primary;
+  --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];
+}
 
-  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 .app-setting-item {
+  --at-apply: flex flex-[auto] items-center justify-center w-full h-0;
+}
 
-  .app-setting-item {
-    display: flex;
-    flex: auto;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 0;
-  }
+.app-setting .divider {
+  --at-apply: w-10px h-px bg-[#b3b3b3];
+}
 
-  .divider {
-    width: 10px;
-    height: 1px;
-    background-color: color.scale($color: #fff, $lightness: -30%)
-  }
+.app-setting .icon {
+  animation: rotate 5s linear infinite;
+}
 
-  .icon {
-    animation: rotate 5s linear infinite;
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
   }
-
-  @keyframes rotate {
-    from {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(360deg);
-    }
+  to {
+    transform: rotate(360deg);
   }
 }
 </style>

package/src/layout/components/Sidebar/MainSidebar.vue

@@ -86,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;