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

package/src/{layout → built-in/layout-component}/components/Sidebar/SubSidebar.vue

@@ -87,79 +87,70 @@ const enableSidebar = computed(() => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
 .sub-sidebar-container {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  width: var(--g-sub-sidebar-width);
-  background-color: var(--g-sub-sidebar-bg);
+  --at-apply: absolute flex flex-col left-0 inset-y-0
+  w-[--g-sub-sidebar-width] bg-[--g-sub-sidebar-bg];
   transition: background-color 0.3s, left 0.3s, width 0.3s;
+}
+
+.sub-sidebar-container.is-collapse {
+  width: var(--g-sub-sidebar-collapse-width);
+}
+
+.sub-sidebar-container.is-collapse .sidebar-logo:not(.sidebar-logo-bg) {
+  --at-apply: hidden;
+}
+
+.sub-sidebar-container.is-collapse .sidebar-logo :deep(span) {
+  --at-apply: hidden;
+}
+
+.sidebar-logo {
+  --at-apply: bg-[--g-sub-sidebar-bg];
+  transition: background-color 0.3s;
+}
+
+.sidebar-logo.sidebar-logo-bg {
+  background-color: var(--g-sub-sidebar-logo-bg);
+}
+
+.sidebar-logo.sidebar-logo-bg :deep(span) {
+  color: var(--g-sub-sidebar-logo-color);
+}
+
+.sub-sidebar {
+  --at-apply: flex-1;
+  overflow: hidden auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  transition: box-shadow 0.3s;
+}
+
+.sub-sidebar::-webkit-scrollbar {
+  --at-apply: hidden;
+}
+
+.sub-sidebar.shadow {
+  box-shadow: inset 0 10px 10px -10px var(--g-box-shadow-color);
+}
 
-  &.is-collapse {
-    width: var(--g-sub-sidebar-collapse-width);
-
-    .sidebar-logo {
-      &:not(.sidebar-logo-bg) {
-        display: none;
-      }
-
-      :deep(span) {
-        display: none;
-      }
-    }
-  }
-
-  .sidebar-logo {
-    background-color: var(--g-sub-sidebar-bg);
-    transition: background-color 0.3s;
-
-    &.sidebar-logo-bg {
-      background-color: var(--g-sub-sidebar-logo-bg);
-
-      :deep(span) {
-        color: var(--g-sub-sidebar-logo-color);
-      }
-    }
-  }
-
-  .sub-sidebar {
-    overflow: hidden auto;
-    overscroll-behavior: contain;
-
-    // firefox隐藏滚动条
-    scrollbar-width: none;
-
-    // chrome隐藏滚动条
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    &.shadow {
-      box-shadow: inset 0 10px 10px -10px var(--g-box-shadow-color);
-    }
-  }
-
-  .menu {
-    width: 100%;
-  }
+.menu {
+  --at-apply: w-full;
 }
 
-// 次侧边栏动画
+/* 次侧边栏动画 */
 .sub-sidebar-enter-active {
   transition: 0.2s;
 }
 
 .sub-sidebar-enter-from,
 .sub-sidebar-leave-active {
-  opacity: 0;
+  --at-apply: op-0;
   transform: translateY(30px) skewY(10deg);
 }
 
 .sub-sidebar-leave-active {
-  position: absolute;
+  --at-apply: absolute;
 }
 </style>

package/src/built-in/layout-component/components/Tools/Breadcrumb/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="flex items-center text-sm">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+:deep(.breadcrumb-item):first-child .separator {
+  --at-apply: hidden;
+}
+
+:deep(.breadcrumb-item):last-child .text {
+  --at-apply: op-100;
+}
+</style>

package/src/built-in/layout-component/components/Tools/DayNightSwitch.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useContext } from '../../composables/useContext';
+
+defineOptions({
+  name: 'DayNightSwitch',
+});
+
+const { settingsStore } = useContext();
+</script>
+
+<template>
+  <label v-if="settingsStore.settings.toolbar.enableColorScheme" class="day-night">
+    <div
+      class="animate-icon"
+      :class="{
+        'animate-icon-day': settingsStore.settings.app.colorScheme !== 'dark',
+      }"
+    />
+  </label>
+</template>
+
+<style scoped>
+.day-night {
+  --at-apply: size-11 cursor-pointer scale-45;
+}
+
+.animate-icon {
+  --at-apply: relative size-38px rounded-1/2 ;
+  box-shadow: inset 16px -16px 0 0 #fff;
+  transition: box-shadow 0.5s ease 0s, transform 0.4s ease 0.1s;
+  transform: scale(1) rotate(-2deg);
+}
+
+.animate-icon::before {
+  --at-apply: absolute w-[inherit] h-[inherit] content-empty rounded-[inherit] left-0 top-0;
+  transition: background 0.3s ease;
+}
+
+.animate-icon::after {
+  --at-apply: absolute top-1/2 left-1/2 size-2 -ml-1 mr-0 -mt-1 mb-0 rounded-[50%] content-empty;
+  box-shadow:
+    0 -23px 0 #ffce6e,
+    0 23px 0 #ffce6e,
+    23px 0 0 #ffce6e,
+    -23px 0 0 #ffce6e,
+    15px 15px 0 #ffce6e,
+    -15px 15px 0 #ffce6e,
+    15px -15px 0 #ffce6e,
+    -15px -15px 0 #ffce6e;
+  transition: all 0.3s ease;
+  transform: scale(0);
+}
+
+.animate-icon-day {
+  --at-apply: size-11;
+  box-shadow: inset 32px -32px 0 0 #fff;
+  transition: transform 0.3s ease 0.1s, box-shadow 0.2s ease 0s;
+  transform: scale(0.5) rotate(0deg);
+}
+
+.animate-icon-day::before {
+  background: #ffce6e;
+  transition: background 0.3s ease 0.1s;
+}
+
+.animate-icon-day::after {
+  transition: transform 0.5s ease 0.15s;
+  transform: scale(1.5);
+}
+</style>