@pubinfo/core 2.0.0-beta.9 → 2.0.0-rc.2

package/src/{layout → built-in/layout-component}/components/Menu/item.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import type { SubMenuItemProps } from './types';
-import { PubinfoIcon } from '@/components';
+import { PubinfoIcon } from '@/features/components';
 import { useContext } from '../../composables/useContext';
 import { rootMenuInjectionKey } from './types';
 
+defineOptions({
+  name: 'MenuItem',
+});
+
 const props = withDefaults(
   defineProps<SubMenuItemProps>(),
   {
@@ -128,39 +132,30 @@ defineExpose({
   </div>
 </template>
 
-<style lang="scss" scoped>
-.badge {
-  :deep(> span) {
-    right: 0;
-    left: initial !important;
-  }
+<style scoped>
+.badge :deep(> span) {
+  --at-apply: right-0;
+  left: initial !important;
 }
 
 .sharp-corner {
   --at-apply: relative ml-1 w-[10px];
+}
 
-  &::before {
-    --at-apply: absolute h-1.5px w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px];
-  }
+.sharp-corner::before {
+  --at-apply: absolute h-1.5px w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px];
+}
 
-  &::after {
-    --at-apply: absolute h-1.5px w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px];
-  }
+.sharp-corner::after {
+  --at-apply: absolute h-1.5px w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px];
 }
 
-.sub-sidebar-container {
-  .menu-item-container-layout:has(.system-point) {
-    position: relative;
-
-    &::before {
-      position: absolute;
-      left: 12px;
-      width: 6px;
-      height: 6px;
-      content: "";
-      background: var(--g-sub-sidebar-menu-active-color);
-      border-radius: 50%;
-    }
-  }
+.sub-sidebar-container .menu-item-container-layout:has(.system-point) {
+  --at-apply: relative;
+}
+
+.sub-sidebar-container .menu-item-container-layout:has(.system-point)::before {
+  --at-apply: absolute w-1.5 h-1.5 content-empty rounded-[50%] left-3;
+  background: var(--g-sub-sidebar-menu-active-color);
 }
 </style>

package/src/{layout → built-in/layout-component}/components/Menu/types.ts

@@ -1,5 +1,5 @@
 import type { Menu } from '#/menu';
-import { createInjectionKey } from '@/utils';
+import { createInjectionKey } from '../../utils';
 
 export interface MenuItem {
   index: string

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

@@ -119,8 +119,8 @@ function excludesComponents(all: string[], excludes: string[]) {
   </HSlideover>
 </template>
 
-<style lang="scss" scoped>
-.settong-warp :deep(.setting-item) {
+<style scoped>
+:deep(.setting-item) {
   --at-apply:
     flex
     items-center
@@ -130,17 +130,17 @@ function excludesComponents(all: string[], excludes: string[]) {
     py-2
     rounded-2
     transition;
+}
 
-  &:hover {
-    --at-apply: bg-stone-1 dark:bg-stone-1 dark:bg-stone-9;
-  }
+:deep(.setting-item:hover) {
+  --at-apply: bg-stone-1 dark:bg-stone-1 dark:bg-stone-9;
+}
 
-  .label {
-    --at-apply: flex items-center flex-shrink-0 gap-2 text-sm;
+:deep(.setting-item .label) {
+  --at-apply: flex items-center flex-shrink-0 gap-2 text-sm;
+}
 
-    i {
-      --at-apply: text-xl text-orange cursor-help;
-    }
-  }
+:deep(.setting-item .label i) {
+  --at-apply: text-xl text-orange cursor-help;
 }
 </style>

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

@@ -31,207 +31,113 @@ const enabled = defineModel();
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .toggleWrapper {
-  overflow: hidden;
+  --at-apply: overflow-hidden;
   transform: scale(0.5);
 }
 
 .toggleWrapper input {
-  position: absolute;
-  left: -99em;
+  --at-apply: absolute left-[-99em];
 }
 
 .toggle {
-  position: relative;
-  display: inline-block;
-  width: 90px;
-  height: 50px;
-  cursor: pointer;
-  background-color: #83d8ff;
-  border-radius: 84px;
+  --at-apply: relative inline-block w-[90px] h-[50px] cursor-pointer bg-[#83d8ff] rounded-[84px];
   transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }
 
 .toggle::before {
-  position: absolute;
-  top: 15px;
-  left: -50px;
-  font-size: 18px;
-  content: "Day";
+  --at-apply: absolute left-[-50px] text-lg content-["Day"] top-[15px];;
 }
 
 .toggle::after {
-  position: absolute;
-  top: 15px;
-  right: -60px;
-  font-size: 18px;
-  color: #384f6d;
-  content: "Night";
+  --at-apply: absolute right-[-60px] text-lg text-[#384f6d] content-["Night"] top-[15px];
 }
 
 .toggle__handler {
-  position: relative;
-  top: 3px;
-  left: 3px;
-  z-index: 1;
-  display: inline-block;
-  width: 44px;
-  height: 44px;
-  background-color: #ffdb98;
-  border-radius: 50px;
+  --at-apply: relative z-[1] inline-block w-11 h-11 bg-[#ffdb98] rounded-[50px] left-[3px] top-[3px];
   box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
   transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
   transform: rotate(-45deg);
 }
 
 .toggle__handler .crater {
-  position: absolute;
-  background-color: #e8cda5;
-  border-radius: 100%;
-  opacity: 0;
-  transition: opacity 200ms ease-in-out;
+  --at-apply: absolute bg-[#e8cda5] opacity-0 transition-opacity duration-200 ease-[ease-in-out] rounded-[100%];
 }
 
 .toggle__handler .crater--1 {
-  top: 18px;
-  left: 10px;
-  width: 4px;
-  height: 4px;
+  --at-apply: w-1 h-1 left-2.5 top-[18px];
 }
-
 .toggle__handler .crater--2 {
-  top: 28px;
-  left: 22px;
-  width: 6px;
-  height: 6px;
+  --at-apply: w-1.5 h-1.5 left-[22px] top-7;
 }
-
 .toggle__handler .crater--3 {
-  top: 10px;
-  left: 25px;
-  width: 8px;
-  height: 8px;
+  --at-apply: w-2 h-2 left-[25px] top-2.5;
 }
 
 .star {
-  position: absolute;
-  background-color: #fff;
-  border-radius: 50%;
-  transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+  --at-apply: absolute bg-white transition-all duration-300 ease-[cubic-bezier(0.445,0.05,0.55,0.95)] rounded-[50%];
 }
-
 .star--1 {
-  top: 10px;
-  left: 35px;
-  z-index: 0;
-  width: 30px;
-  height: 3px;
+  --at-apply: z-0 w-[30px] h-[3px] left-[35px] top-2.5;
 }
-
 .star--2 {
-  top: 18px;
-  left: 28px;
-  z-index: 1;
-  width: 30px;
-  height: 3px;
+  --at-apply: z-[1] w-[30px] h-[3px] left-7 top-[18px];
 }
-
 .star--3 {
-  top: 27px;
-  left: 40px;
-  z-index: 0;
-  width: 30px;
-  height: 3px;
+  --at-apply: z-0 w-[30px] h-[3px] left-10 top-[27px];
 }
-
 .star--4,
 .star--5,
 .star--6 {
-  opacity: 0;
+  --at-apply: opacity-0;
   transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }
-
 .star--4 {
-  top: 16px;
-  left: 11px;
-  z-index: 0;
-  width: 2px;
-  height: 2px;
+  --at-apply: z-0 w-0.5 h-0.5 left-[11px] top-4;
   transform: translate3d(3px, 0, 0);
 }
-
 .star--5 {
-  top: 32px;
-  left: 17px;
-  z-index: 0;
-  width: 3px;
-  height: 3px;
+  --at-apply: z-0 w-[3px] h-[3px] left-[17px] top-8;
   transform: translate3d(3px, 0, 0);
 }
-
 .star--6 {
-  top: 36px;
-  left: 28px;
-  z-index: 0;
-  width: 2px;
-  height: 2px;
+  --at-apply: z-0 w-0.5 h-0.5 left-7 top-9;
   transform: translate3d(3px, 0, 0);
 }
-
 input:checked + .toggle {
-  background-color: #749dd6;
-}
-
-input:checked + .toggle::before {
-  color: #749ed7;
+  --at-apply: bg-[#749dd6] before:text-[#749ed7] after:text-white;
 }
-
-input:checked + .toggle::after {
-  color: #fff;
-}
-
 input:checked + .toggle .toggle__handler {
-  background-color: #ffe5b5;
+  --at-apply: bg-[#ffe5b5];
   transform: translate3d(40px, 0, 0) rotate(0);
 }
-
 input:checked + .toggle .toggle__handler .crater {
-  opacity: 1;
+  --at-apply: opacity-100;
 }
-
 input:checked + .toggle .star--1 {
-  width: 2px;
-  height: 2px;
+  --at-apply: w-0.5 h-0.5;
 }
-
 input:checked + .toggle .star--2 {
-  width: 4px;
-  height: 4px;
+  --at-apply: w-1 h-1;
   transform: translate3d(-5px, 0, 0);
 }
-
 input:checked + .toggle .star--3 {
-  width: 2px;
-  height: 2px;
+  --at-apply: w-0.5 h-0.5;
   transform: translate3d(-7px, 0, 0);
 }
-
 input:checked + .toggle .star--4,
 input:checked + .toggle .star--5,
 input:checked + .toggle .star--6 {
-  opacity: 1;
+  --at-apply: opacity-100;
   transform: translate3d(0, 0, 0);
 }
-
 input:checked + .toggle .star--4 {
   transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }
-
 input:checked + .toggle .star--5 {
   transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }
-
 input:checked + .toggle .star--6 {
   transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }

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

@@ -0,0 +1,190 @@
+<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 scoped>
+.transition-mode {
+  --at-apply: flex items-center justify-center gap-4 pb-4;
+}
+
+.transition-mode .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;
+}
+
+.transition-mode .mode.active {
+  --at-apply: ring-ui-primary ring-2;
+}
+
+.transition-mode .mode::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;
+}
+
+.transition-mode .mode.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;
+  }
+}
+
+.transition-mode .mode.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;
+  }
+}
+
+.transition-mode .mode.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;
+  }
+}
+
+.transition-mode .mode.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;
+  }
+}
+
+.transition-mode .mode.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/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>