@pubinfo-pr/core 0.221.3 → 0.222.2

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

@@ -90,7 +90,10 @@ function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
 
 <style scoped>
 .main-sidebar-container {
-  --at-apply: relative z-1 flex flex-col;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
   width: var(--g-main-sidebar-width);
   color: var(--g-main-sidebar-menu-color);
   background-color: var(--g-main-sidebar-bg);
@@ -99,75 +102,126 @@ function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
 }
 
 .sidebar-logo {
-  --at-apply: bg-[--g-main-sidebar-bg];
+  background-color: var(--g-main-sidebar-bg) /* var(--g-main-sidebar-bg) */;
   transition: background-color 0.3s;
 }
 
 :deep(.menu-item-container-layout) {
-  --at-apply: flex flex-col w-auto;
+  display: flex;
+  flex-direction: column;
+  width: auto;
 }
 
 :deep(.menu-item-container-layout) .title {
-  --at-apply: hidden;
+  display: none;
 }
 
 /* 菜单激活样式 */
 .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];
+  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%);
 }
 
 .menu-active-arrow .item-container.active::before,
 .menu-active-arrow :deep(.menu-item.active::before) {
-  --at-apply: right-2 op-100;
+  right: 0.5rem; /* 8px */
+  opacity: 1;
 }
 
 .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;
+  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);
   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;
+  height: 1.25rem; /* 20px */
+  opacity: 1;
 }
 
 .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;
+  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%;
   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;
+  left: 0.25rem; /* 4px */
+  opacity: 1;
 }
 
 .menu {
-  --at-apply: flex-1 w-[initial] overscroll-contain;
+  flex: 1 1 0%;
+  width: initial;
+  overscroll-behavior: contain;
   overflow: hidden auto;
   scrollbar-width: none;
 }
 
 .menu::-webkit-scrollbar {
-  --at-apply: hidden;
+  display: none;
 }
 
 .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];
+  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);
 }
 
 .menu :deep(.menu-item) .menu-item-container .menu-item-container-icon {
-  --at-apply: scale-100;
+  transform: scaleX(1) scaleY(1);
   font-size: 24px !important;
 }
 

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

@@ -85,8 +85,14 @@ function onSidebarScroll(e: Event) {
 
 <style lang="css" scoped>
 .sub-sidebar-container {
-  --at-apply: absolute flex flex-col left-0 inset-y-0
-  w-[--g-sub-sidebar-width] bg-[--g-sub-sidebar-bg];
+  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);
   transition: background-color 0.3s, left 0.3s, width 0.3s;
 }
 
@@ -95,15 +101,15 @@ function onSidebarScroll(e: Event) {
 }
 
 .sub-sidebar-container.is-collapse .sidebar-logo:not(.sidebar-logo-bg) {
-  --at-apply: hidden;
+  display: none;
 }
 
 .sub-sidebar-container.is-collapse .sidebar-logo :deep(span) {
-  --at-apply: hidden;
+  display: none;
 }
 
 .sidebar-logo {
-  --at-apply: bg-[--g-sub-sidebar-bg];
+  background-color: var(--g-sub-sidebar-bg);
   transition: background-color 0.3s;
 }
 
@@ -116,7 +122,7 @@ function onSidebarScroll(e: Event) {
 }
 
 .sub-sidebar {
-  --at-apply: flex-1;
+  flex: 1 1 0%;
   overflow: hidden auto;
   overscroll-behavior: contain;
   scrollbar-width: none;
@@ -124,7 +130,7 @@ function onSidebarScroll(e: Event) {
 }
 
 .sub-sidebar::-webkit-scrollbar {
-  --at-apply: hidden;
+  display: none;
 }
 
 .sub-sidebar.shadow {
@@ -132,7 +138,7 @@ function onSidebarScroll(e: Event) {
 }
 
 .menu {
-  --at-apply: w-full;
+  width: 100%;
 }
 
 /* 次侧边栏动画 */
@@ -142,11 +148,11 @@ function onSidebarScroll(e: Event) {
 
 .sub-sidebar-enter-from,
 .sub-sidebar-leave-active {
-  --at-apply: op-0;
+  opacity: 0;
   transform: translateY(30px) skewY(10deg);
 }
 
 .sub-sidebar-leave-active {
-  --at-apply: absolute;
+  position: 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 {
-  --at-apply: hidden;
+  display: none;
 }
 
 :deep(.breadcrumb-item):last-child .text {
-  --at-apply: op-100;
+  opacity: 1;
 }
 </style>

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

@@ -81,19 +81,40 @@ function toggleColorScheme(event: MouseEvent) {
 
 <style scoped>
 .animate-icon {
-  --at-apply: relative size-[20px] rounded-1/2 inline-block align-middle;
+  position: relative;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: inline-block;
+  vertical-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 {
-  --at-apply: absolute size-[20px] content-empty rounded-[inherit] left-0 top-0 block;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  content: "";
+  border-radius: inherit;
+  left: 0;
+  top: 0;
+  display: block;
   transition: background 0.3s ease;
 }
 
 .animate-icon::after {
-  --at-apply: absolute top-1/2 left-1/2 size-1 -ml-0.5 -mt-0.5 rounded-[50%] content-empty block;
+  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;
   box-shadow:
     0 -12px 0 #ffce6e,
     0 12px 0 #ffce6e,
@@ -108,7 +129,8 @@ function toggleColorScheme(event: MouseEvent) {
 }
 
 .animate-icon-day {
-  --at-apply: size-5;
+  width: 1.25rem; /* 20px */
+  height: 1.25rem; /* 20px */
   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);