@pubinfo-pr/core 0.222.3 → 0.223.1

package/src/built-in/layout-component/components/Sidebar/MainSidebar.vue

@@ -90,10 +90,7 @@ function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
 
 <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);
@@ -102,126 +99,75 @@ function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
 }
 
 .sidebar-logo {
-  background-color: var(--g-main-sidebar-bg) /* var(--g-main-sidebar-bg) */;
+  --at-apply: bg-[--g-main-sidebar-bg];
   transition: background-color 0.3s;
 }
 
 :deep(.menu-item-container-layout) {
-  display: flex;
-  flex-direction: column;
-  width: auto;
+  --at-apply: flex flex-col w-auto;
 }
 
 :deep(.menu-item-container-layout) .title {
-  display: none;
+  --at-apply: hidden;
 }
 
 /* 菜单激活样式 */
 .menu-active-arrow .item-container::before,
 .menu-active-arrow :deep(.menu-item::before) {
-  content: "";
-  position: absolute;
-  top: 50%;
-  width: 0;
-  height: 0;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  transition-duration: 0.3s;
-  right: -5px;
-  opacity: 0;
-  border-top-style: solid;
-  border-right-style: solid;
-  border-bottom-style: solid;
-  border-top-color: transparent;
-  border-right-color: var(--g-main-sidebar-bg);
-  border-bottom-color: transparent;
-  border-top-width: 5px;
-  border-right-width: 5px;
-  border-bottom-width: 5px;
-  transform: translateY(-50%);
+  --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-active-arrow .item-container.active::before,
 .menu-active-arrow :deep(.menu-item.active::before) {
-  right: 0.5rem; /* 8px */
-  opacity: 1;
+  --at-apply: right-2 op-100;
 }
 
 .menu-active-line .item-container::before,
 .menu-active-line :deep(.menu-item::before) {
-  content: "";
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 0.25rem; /* 4px */
-  height: 0;
-  opacity: 0;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  transition-duration: 0.3s;
-  border-radius: 0.125rem; /* 2px */
-  left: 6px;
-  background-color: var(--g-main-sidebar-menu-active-bg);
+  --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) {
-  height: 1.25rem; /* 20px */
-  opacity: 1;
+  --at-apply: h-5 op-100;
 }
 
 .menu-active-dot .item-container::before,
 .menu-active-dot :deep(.menu-item::before) {
-  background-color: var(--g-main-sidebar-menu-active-bg);
-  content: "";
-  position: absolute;
-  transform: translateY(-50%);
-  width: 0.625rem; /* 10px */
-  height: 0.625rem; /* 10px */
-  opacity: 0;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  transition-duration: 0.3s;
-  border-radius: 50%;
-  left: 0;
-  top: 50%;
+  --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) {
-  left: 0.25rem; /* 4px */
-  opacity: 1;
+  --at-apply: left-1 op-100;
 }
 
 .menu {
-  flex: 1 1 0%;
-  width: initial;
-  overscroll-behavior: contain;
+  --at-apply: flex-1 w-[initial] overscroll-contain;
   overflow: hidden auto;
   scrollbar-width: none;
 }
 
 .menu::-webkit-scrollbar {
-  display: none;
+  --at-apply: hidden;
 }
 
 .menu :deep(.menu-item) .menu-item-container {
-  height: 50px;
-  padding-left: 5px;
-  padding-right: 5px;
-  padding-top: 0;
-  padding-bottom: 0;
-  color: var(--g-main-sidebar-menu-color);
-  background-color: var(--g-main-sidebar-menu-bg);
+  --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 {
-  transform: scaleX(1) scaleY(1);
+  --at-apply: scale-100;
   font-size: 24px !important;
 }
 

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

@@ -85,14 +85,8 @@ function onSidebarScroll(e: Event) {
 
 <style lang="css" scoped>
 .sub-sidebar-container {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  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;
 }
 
@@ -101,15 +95,15 @@ function onSidebarScroll(e: Event) {
 }
 
 .sub-sidebar-container.is-collapse .sidebar-logo:not(.sidebar-logo-bg) {
-  display: none;
+  --at-apply: hidden;
 }
 
 .sub-sidebar-container.is-collapse .sidebar-logo :deep(span) {
-  display: none;
+  --at-apply: hidden;
 }
 
 .sidebar-logo {
-  background-color: var(--g-sub-sidebar-bg);
+  --at-apply: bg-[--g-sub-sidebar-bg];
   transition: background-color 0.3s;
 }
 
@@ -122,7 +116,7 @@ function onSidebarScroll(e: Event) {
 }
 
 .sub-sidebar {
-  flex: 1 1 0%;
+  --at-apply: flex-1;
   overflow: hidden auto;
   overscroll-behavior: contain;
   scrollbar-width: none;
@@ -130,7 +124,7 @@ function onSidebarScroll(e: Event) {
 }
 
 .sub-sidebar::-webkit-scrollbar {
-  display: none;
+  --at-apply: hidden;
 }
 
 .sub-sidebar.shadow {
@@ -138,7 +132,7 @@ function onSidebarScroll(e: Event) {
 }
 
 .menu {
-  width: 100%;
+  --at-apply: w-full;
 }
 
 /* 次侧边栏动画 */
@@ -148,11 +142,11 @@ function onSidebarScroll(e: Event) {
 
 .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

@@ -6,10 +6,10 @@
 
 <style scoped>
 :deep(.breadcrumb-item):first-child .separator {
-  display: none;
+  --at-apply: hidden;
 }
 
 :deep(.breadcrumb-item):last-child .text {
-  opacity: 1;
+  --at-apply: op-100;
 }
 </style>

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

@@ -81,40 +81,19 @@ function toggleColorScheme(event: MouseEvent) {
 
 <style scoped>
 .animate-icon {
-  position: relative;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  display: inline-block;
-  vertical-align: middle;
+  --at-apply: relative size-[20px] rounded-1/2 inline-block align-middle;
   box-shadow: inset 6px -6px 0 0 #fff; /* 比例缩小 */
   transition: box-shadow 0.5s ease 0s, transform 0.4s ease 0.1s;
   transform: scale(1) rotate(-2deg);
 }
 
 .animate-icon::before {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  content: "";
-  border-radius: inherit;
-  left: 0;
-  top: 0;
-  display: block;
+  --at-apply: absolute size-[20px] content-empty rounded-[inherit] left-0 top-0 block;
   transition: background 0.3s ease;
 }
 
 .animate-icon::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0.25rem; /* 4px */
-  height: 0.25rem; /* 4px */
-  margin-left: -0.125rem; /* -2px */
-  margin-top: -0.125rem; /* -2px */
-  border-radius: 50%;
-  content: "";
-  display: block;
+  --at-apply: absolute top-1/2 left-1/2 size-1 -ml-0.5 -mt-0.5 rounded-[50%] content-empty block;
   box-shadow:
     0 -12px 0 #ffce6e,
     0 12px 0 #ffce6e,
@@ -129,8 +108,7 @@ function toggleColorScheme(event: MouseEvent) {
 }
 
 .animate-icon-day {
-  width: 1.25rem; /* 20px */
-  height: 1.25rem; /* 20px */
+  --at-apply: size-5;
   box-shadow: inset 10px -10px 0 0 #fff; /* 缩小后的太阳核心 */
   transition: transform 0.3s ease 0.1s, box-shadow 0.2s ease 0s;
   transform: scale(0.5) rotate(0deg);