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

package/src/layout/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/layout/components/Tools/Breadcrumb/index.vue

@@ -4,18 +4,12 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-:deep(.breadcrumb-item) {
-  &:first-child {
-    .separator {
-      display: none;
-    }
-  }
+<style scoped>
+:deep(.breadcrumb-item):first-child .separator {
+  --at-apply: hidden;
+}
 
-  &:last-child {
-    .text {
-      opacity: 1;
-    }
-  }
+:deep(.breadcrumb-item):last-child .text {
+  --at-apply: op-100;
 }
 </style>

package/src/layout/components/Tools/DayNightSwitch.vue

@@ -19,75 +19,52 @@ const { settingsStore } = useContext();
   </label>
 </template>
 
-<style lang="scss" scoped>
-$night-btn: #fff;
-$day-btn: #ffce6e;
-
+<style scoped>
 .day-night {
-  width: 44px;
-  height: 44px;
-  cursor: pointer;
-  transform: scale(0.45);
+  --at-apply: size-11 cursor-pointer scale-45;
+}
 
-  .animate-icon {
-    position: relative;
-    width: 38px;
-    height: 38px;
-    border-radius: 50%;
-    box-shadow: inset 16px -16px 0 0 $night-btn;
-    transition: box-shadow 0.5s ease 0s, transform 0.4s ease 0.1s;
-    transform: scale(1) rotate(-2deg);
+.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);
+}
 
-    &::before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: inherit;
-      height: inherit;
-      content: "";
-      border-radius: inherit;
-      transition: background 0.3s ease;
-    }
+.animate-icon::before {
+  --at-apply: absolute w-[inherit] h-[inherit] content-empty rounded-[inherit] left-0 top-0;
+  transition: background 0.3s ease;
+}
 
-    &::after {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 8px;
-      height: 8px;
-      margin: -4px 0 0 -4px;
-      content: "";
-      border-radius: 50%;
-      box-shadow:
-        0 -23px 0 $day-btn,
-        0 23px 0 $day-btn,
-        23px 0 0 $day-btn,
-        -23px 0 0 $day-btn,
-        15px 15px 0 $day-btn,
-        -15px 15px 0 $day-btn,
-        15px -15px 0 $day-btn,
-        -15px -15px 0 $day-btn;
-      transition: all 0.3s ease;
-      transform: scale(0);
-    }
-  }
+.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 {
-    width: 44px;
-    height: 44px;
-    box-shadow: inset 32px -32px 0 0 $night-btn;
-    transition: transform 0.3s ease 0.1s, box-shadow 0.2s ease 0s;
-    transform: scale(0.5) rotate(0deg);
+.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);
+}
 
-    &::before {
-      background: $day-btn;
-      transition: background 0.3s ease 0.1s;
-    }
+.animate-icon-day::before {
+  background: #ffce6e;
+  transition: background 0.3s ease 0.1s;
+}
 
-    &::after {
-      transition: transform 0.5s ease 0.15s;
-      transform: scale(1.5);
-    }
-  }
+.animate-icon-day::after {
+  transition: transform 0.5s ease 0.15s;
+  transform: scale(1.5);
 }
 </style>