@pubinfo-pr/core 0.222.4 → 0.224.1

package/src/built-in/layout-component/components/Topbar/Tabbar/MoreAction.vue

@@ -220,39 +220,20 @@ function getSafeIconColor(options: ResolvedIconOptions): string | undefined {
 
 <style>
 .tabbar-dropdown .quick-button {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-top: 15px;
-  padding-bottom: 0.625rem; /* 10px */
-  padding-left: 15px;
-  padding-right: 15px;
+  --at-apply: flex items-center justify-between pt-[15px] pb-2.5 px-[15px];
 }
 
 .tabbar-dropdown .quick-button .button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  background-color: var(--g-bg);
-  transition-duration: 0.3s;
-  width: 2rem; /* 32px */
-  height: 2rem; /* 32px */
-  transition-property: color, background-color, border-color,
-    text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  border-radius: 5px;
-  outline: none;
-  border-width: 0px;
+  --at-apply: flex items-center justify-center w-8 h-8 cursor-pointer bg-[--g-bg]
+  transition-[colors] duration-[0.3s] rounded-[5px] border-0 [outline:none];
 }
 
 .tabbar-dropdown .quick-button .button:hover:not(:disabled) {
-  color: rgb(var(--ui-primary));
+  --at-apply: text-ui-primary;
 }
 
 .tabbar-dropdown .quick-button .button:disabled {
-  cursor: not-allowed;
+  --at-apply: cursor-not-allowed;
 }
 
 .tabbar-dropdown .quick-button .button i {
@@ -260,11 +241,7 @@ function getSafeIconColor(options: ResolvedIconOptions): string | undefined {
 }
 
 .tabbar-dropdown .tabs {
-  width: 200px;
-  padding-top: 0;
-  padding-bottom: 0.625rem; /* 10px */
-  padding-left: 0;
-  padding-right: 0;
+  --at-apply: w-200px pt-0 pb-2.5 px-0;
 }
 
 .tabbar-dropdown .tabs:not(.dragging) .tab:hover:not(.actived) {
@@ -272,22 +249,11 @@ function getSafeIconColor(options: ResolvedIconOptions): string | undefined {
 }
 
 .tabbar-dropdown .tabs:not(.dragging) .tab:hover .action-icon {
-  opacity: 1;
+  --at-apply: op-100;
 }
 
 .tabbar-dropdown .tabs .tab {
-  position: relative;
-  height: 30px;
-  background-color: var(--g-container-bg);
-  margin-left: 15px;
-  margin-right: 15px;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-left: 5px;
-  padding-right: 5px;
-  padding-top: 0;
-  padding-bottom: 0;
-  border-radius: 5px;
+  --at-apply: relative h-[30px] bg-[--g-container-bg] mx-[15px] my-0 px-[5px] py-0 rounded-[5px];
   width: calc(100% - 30px);
   transition: background-color 0.3s;
 }
@@ -297,7 +263,7 @@ function getSafeIconColor(options: ResolvedIconOptions): string | undefined {
 }
 
 .tabbar-dropdown .tabs .tab.ghost {
-  opacity: 0;
+  --at-apply: op-0;
 }
 
 .tabbar-dropdown .tabs .tab:hover .title {
@@ -312,17 +278,8 @@ function getSafeIconColor(options: ResolvedIconOptions): string | undefined {
 }
 
 .tabbar-dropdown .tabs .tab .title {
-  position: relative;
-  display: flex;
-  gap: 5px;
-  align-items: center;
-  height: 100%;
-  overflow: hidden;
-  font-size: 0.875rem; /* 14px */
-  line-height: 1.25rem; /* 20px */
-  white-space: nowrap;
-  cursor: pointer;
-  opacity: 0.7;
+  --at-apply: relative flex gap-[5px] items-center
+  h-full overflow-hidden text-sm whitespace-nowrap cursor-pointer opacity-70;
 
   mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
   transition: all 0.3s;
@@ -338,20 +295,8 @@ function getSafeIconColor(options: ResolvedIconOptions): string | undefined {
 }
 
 .tabbar-dropdown .tabs .tab .action-icon {
-  position: absolute;
-  z-index: 10;
-  width: 1.5em;
-  height: 1.5em;
-  color: var(--g-tabbar-tab-color);
-  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%;
-  top: 50%;
-  font-size: 8px;
-  margin-top: -0.375rem;
+  --at-apply: absolute z-10 w-[1.5em] h-[1.5em] text-[8px] text-[--g-tabbar-tab-color]
+  opacity-0 transition-all duration-[0.3s] -mt-1.5 rounded-[50%] top-2/4;
   inset-inline-end: 6px;
   pointer-events: all;
 }

package/src/built-in/layout-component/components/Topbar/Tabbar/index.vue

@@ -430,96 +430,54 @@ onUnmounted(() => {
 
 <style>
 .tabbar-contextmenu .mx-context-menu {
-  & {
-    position: fixed;
-    --un-ring-width: 1px;
-    --un-ring-offset-shadow: var(--un-ring-inset) 0 0 0
-      var(--un-ring-offset-width) var(--un-ring-offset-color);
-    --un-ring-shadow: var(--un-ring-inset) 0 0 0
-      calc(var(--un-ring-width) + var(--un-ring-offset-width))
-      var(--un-ring-color);
-    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
-      var(--un-shadow);
-    --un-ring-opacity: 1;
-    --un-ring-color: rgb(231 229 228 / var(--un-ring-opacity)) /* #e7e5e4 */;
-    --un-shadow: var(--un-shadow-inset) 0 25px 50px -12px var(--un-shadow-color, rgb(0
-            0 0 / 0.25));
-    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
-      var(--un-shadow);
-    background-color: var(--g-container-bg) /* var(--g-container-bg) */;
-  }
-  .dark & {
-    --un-ring-opacity: 1;
-    --un-ring-color: rgb(68 64 60 / var(--un-ring-opacity)) /* #44403c */;
-  }
+  --at-apply: fixed ring-1 ring-stone-2 dark-ring-stone-7 shadow-2xl bg-[--g-container-bg];
 }
 
 .tabbar-contextmenu .mx-context-menu .mx-context-menu-items .mx-context-menu-item {
-  transition-property: background-color;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+  --at-apply: transition-background-color;
+
 }
 
 .tabbar-contextmenu .mx-context-menu .mx-context-menu-items .mx-context-menu-item:not(.disabled):hover {
-  & {
-    cursor: pointer;
-    --un-bg-opacity: 1;
-    background-color: rgb(245 245 244 / var(--un-bg-opacity)) /* #f5f5f4 */;
-  }
-  .dark & {
-    --un-bg-opacity: 1;
-    background-color: rgb(28 25 23 / var(--un-bg-opacity)) /* #1c1917 */;
-  }
+  --at-apply: cursor-pointer bg-stone-1 dark:bg-stone-9;
 }
 
 .tabbar-contextmenu .mx-context-menu .mx-context-menu-items .mx-context-menu-item span {
-  color: initial;
+  --at-apply: text-initial;
 }
 
 .tabbar-contextmenu .mx-context-menu .mx-context-menu-items .mx-context-menu-item .icon {
-  color: initial;
+  --at-apply: text-initial;
 }
 
 .tabbar-contextmenu .mx-context-menu .mx-context-menu-items .mx-context-menu-item.disabled span,
 .tabbar-contextmenu .mx-context-menu .mx-context-menu-items .mx-context-menu-item.disabled .icon {
-  opacity: 0.25;
+  --at-apply: op-25;
 }
 
 .tabbar-contextmenu .mx-context-menu .mx-context-menu-item-sperator {
-  background-color: var(--g-container-bg) /* var(--g-container-bg) */;
+  --at-apply: bg-[--g-container-bg];
 }
 
 .tabbar-contextmenu .mx-context-menu .mx-context-menu-item-sperator::after {
-  --un-bg-opacity: 1;
-  background-color: rgb(231 229 228 / var(--un-bg-opacity)) /* #e7e5e4 */;
-}
-
-.dark .tabbar-contextmenu .mx-context-menu .mx-context-menu-item-sperator::after {
-  --un-bg-opacity: 1;
-  background-color: rgb(68 64 60 / var(--un-bg-opacity)) /* #44403c */;
+  --at-apply: bg-stone-2 dark-bg-stone-7;;
 }
 </style>
 
 <style scoped>
 .tabbar-container {
-  position: relative;
-  height: var(--g-tabbar-height);
-  background-color: var(--g-bg) /* var(--g-bg) */;
+  --at-apply: relative h-[--g-tabbar-height] bg-[--g-bg];
   transition: background-color 0.3s;
 }
 
 .tabs {
-  position: absolute;
-  right: 0;
-  left: 0;
-  overflow-y: hidden;
-  white-space: nowrap;
+  --at-apply: absolute right-0 left-0 overflow-y-hidden whitespace-nowrap;
   padding-inline-end: 50px;
   scrollbar-width: none;
 }
 
 .tabs::-webkit-scrollbar {
-  display: none;
+  --at-apply: hidden;
 }
 
 .tabs.tabs-ontop {
@@ -528,30 +486,27 @@ onUnmounted(() => {
 }
 
 .tab-container {
-  display: inline-block;
+  --at-apply: inline-block;
 }
 
 .tab-container::after {
-  position: absolute;
-  bottom: 0;
-  z-index: 10;
-  content: "";
+  --at-apply: absolute bottom-0 z-10 content-empty;
   inset-inline-start: v-bind(activePseudoTabStart);
   width: v-bind(activePseudoTabWidth);
   transition: width 0.3s, inset-inline-start 0.3s;
 }
 
 .tab-container:not(.dragging) .tab:not(.actived):hover {
-  z-index: 3;
+  --at-apply: z-3;
 }
 
 .tab-container:not(.dragging) .tab:not(.actived):hover::before,
 .tab-container:not(.dragging) .tab:not(.actived):hover::after {
-  content: none;
+  --at-apply: content-none;
 }
 
 .tab-container:not(.dragging) .tab:not(.actived):hover + .tab .tab-dividers::before {
-  opacity: 0;
+  --at-apply: op-0;
 }
 
 .tab-container:not(.dragging) .tab:not(.actived):hover .tab-content .title,
@@ -564,34 +519,27 @@ onUnmounted(() => {
 }
 
 .tab {
-  position: relative;
-  display: inline-block;
-  cursor: pointer;
-  pointer-events: none;
-  height: var(--g-tabbar-height);
-  min-width: var(--g-tabbar-tab-min-width);
-  max-width: var(--g-tabbar-tab-max-width);
-  vertical-align: bottom;
-  font-size: 14px;
+  --at-apply: relative inline-block text-14px cursor-pointer pointer-events-none
+  min-w-[--g-tabbar-tab-min-width] max-w-[--g-tabbar-tab-max-width] h-[--g-tabbar-height]
+  align-bottom;
   line-height: calc(var(--g-tabbar-height) - 2px);
 }
 
 .tab * {
-  -webkit-user-select: none;
-  user-select: none;
+  --at-apply: select-none;
 }
 
 .tab.actived {
-  z-index: 5;
+  --at-apply: z-5;
 }
 
 .tab.actived::before,
 .tab.actived::after {
-  content: none;
+  --at-apply: content-none;
 }
 
 .tab.actived + .tab .tab-dividers::before {
-  opacity: 0;
+  --at-apply: op-0;
 }
 
 .tab.actived .tab-content .title,
@@ -608,62 +556,34 @@ onUnmounted(() => {
 }
 
 .tab-dividers {
-  position: absolute;
-  z-index: 0;
-  height: 0.875rem; /* 14px */
-  transform: translateY(-50%);
-  top: 50%;
+  --at-apply: absolute z-0 h-3.5 -translate-y-2/4 top-2/4;
   inset-inline: -1px;
 }
 
 .tab-dividers::before {
-  position: absolute;
-  display: block;
-  width: 1px;
-  content: "";
-  opacity: 1;
-  top: 0;
-  bottom: 0;
-  background-color: var(--g-tabbar-dividers-bg);
+  --at-apply: absolute block w-px content-empty opacity-100 inset-y-0
+  bg-[--g-tabbar-dividers-bg];
 
   inset-inline-start: 1px;
   transition: opacity 0.2s ease, background-color 0.3s;
 }
 
 .tab:first-child .tab-dividers::before {
-  opacity: 0;
+  --at-apply: op-0;
 }
 
 .tab-background {
-  position: absolute;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  left: 0;
-  top: 0;
+  --at-apply: absolute z-0 w-full h-full pointer-events-none left-0 top-0;
   transition: opacity 0.3s, background-color 0.3s;
 }
 
 .tab-content {
-  display: flex;
-  width: 100%;
-  height: 100%;
+  --at-apply: flex size-full;
   pointer-events: all;
 }
 
 .tab-content .title {
-  display: flex;
-  flex: 1 1 0%;
-  gap: 5px;
-  align-items: center;
-  height: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  padding-left: 0.625rem; /* 10px */
-  padding-right: 0.625rem; /* 10px */
-  padding-top: 0;
-  padding-bottom: 0;
+  --at-apply: flex flex-1 gap-[5px] items-center h-full overflow-hidden whitespace-nowrap px-2.5 py-0;
   margin-inline-end: 10px;
   color: var(--g-tabbar-tab-color);
   mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
@@ -683,19 +603,8 @@ onUnmounted(() => {
 }
 
 .tab-content .action-icon {
-  position: absolute;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: translateY(-50%);
-  border-radius: 50%;
-  top: 50%;
-  width: 1.5em;
-  height: 1.5em;
-  color: var(--g-tabbar-tab-color);
-  font-size: 0.75rem; /* 12px */
-  line-height: 1rem; /* 16px */
+  --at-apply: absolute z-10 flex items-center justify-center w-[1.5em] h-[1.5em]
+  text-xs text-[--g-tabbar-tab-color] -translate-y-2/4 rounded-[50%] top-2/4;
   inset-inline-end: 0.5em;
 }
 
@@ -705,33 +614,19 @@ onUnmounted(() => {
 }
 
 .tab-content .hotkey-number {
-  position: absolute;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5em;
-  height: 1.5em;
-  font-size: 0.75rem; /* 12px */
-  line-height: 1rem; /* 16px */
-  transform: translateY(-50%);
-  border-radius: 50%;
-  top: 50%;
-  color: var(--g-tabbar-tab-color);
-  background-color: var(--g-bg);
-  right: 0.5em;
+  --at-apply: absolute z-10 flex items-center justify-center w-[1.5em] h-[1.5em]
+  text-xs -translate-y-2/4 rounded-[50%] right-[0.5em] top-2/4
+  text-[--g-tabbar-tab-color] bg-[--g-bg];
   box-shadow: 0 0 0 1px var(--g-border-color);
 }
 
 .tab-content .drag-handle {
-  position: absolute;
-  inset: 0;
-  z-index: 9;
+  --at-apply: absolute inset-0 z-9;
 }
 
 /* Fashion 风格样式 */
 .tabs.tabs-fashion {
-  bottom: 0;
+  --at-apply: bottom-0;
 }
 
 .tabs.tabs-fashion .tab-container:not(.dragging) .tab:not(.actived):hover .tab-background::before,
@@ -759,12 +654,7 @@ onUnmounted(() => {
 
 .tabs.tabs-fashion .tab-background::before,
 .tabs.tabs-fashion .tab-background::after {
-  position: absolute;
-  bottom: 0;
-  width: 1.25rem; /* 20px */
-  height: 1.25rem; /* 20px */
-  content: "";
-  border-radius: 9999px;
+  --at-apply: absolute bottom-0 size-5 content-empty rounded-full;
   box-shadow: 0 0 0 20px transparent;
   transition: box-shadow 0.3s;
 }
@@ -786,64 +676,46 @@ onUnmounted(() => {
 
 /* Card 风格样式 */
 .tabs.tabs-card .tab {
-  margin-left: 5px;
-  margin-right: 0;
-  margin-top: 5px;
-  margin-bottom: 5px;
+  --at-apply: ml-[5px] mr-0 my-[5px];
   height: calc(var(--g-tabbar-height) - 10px);
 }
 
 .tabs.tabs-card .tab .tab-dividers {
-  display: none;
+  --at-apply: hidden;
 }
 
 .tabs.tabs-card .tab-background {
-  border-radius: 5px;
+  --at-apply: rounded-5px;
 }
 
 /* Square 风格样式 */
 .tabs.tabs-square .tab-container::after {
-  background-color: rgb(var(--ui-primary));
-  height: 0.125rem; /* 2px */
+  --at-apply: bg-ui-primary h-0.5;
 }
 
 .tabs.tabs-square .tab-container:has(> .tab.tab-ontop)::after {
-  top: 0;
-  bottom: unset;
+  --at-apply: top-0 bottom-unset;
 }
 
 .tabs.tabs-square .tab-container:has(> .tab.tab-ontop) .tab .tab-background {
-  top: 0;
-  bottom: unset;
+  --at-apply: top-0 bottom-unset;
 }
 
 .tabs.tabs-square .tab:not(.actived):hover .tab-background {
-  height: 100%;
+  --at-apply: h-full;
 }
 
 .tabs.tabs-square .tab .tab-background {
-  top: unset;
-  bottom: 0;
-  height: 0;
-  background-color: var(--g-tabbar-tab-hover-bg);
+  --at-apply: top-unset bottom-0 h-0 bg-[--g-tabbar-tab-hover-bg];
   transition: height 0.3s;
 }
 
 .tabs.tabs-square .tab.actived .tab-background {
-  height: 100%;
-  background-color: var(--g-container-bg);
+  --at-apply: h-full bg-[--g-container-bg];
 }
 
 .more-action {
-  position: absolute;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 50px;
-  height: 100%;
-  right: 0;
-  top: 0;
+  --at-apply: absolute z-10 flex items-center justify-center w-[50px] h-full right-0 top-0;
   background-image: linear-gradient(to right, transparent, var(--g-bg));
 }
 

package/src/built-in/layout-component/components/Topbar/Toolbar/Favorites.vue

@@ -122,11 +122,11 @@ watch(favoritesContainerRef, (newSortableContainer) => {
 
 <style scoped>
 :deep([data-overlayscrollbars-viewport]) {
-  overscroll-behavior: contain;
+  --at-apply: overscroll-contain;
 }
 
 .draggable-ghost {
-  opacity: 0;
+  --at-apply: op-0;
 }
 
 .name {

package/src/built-in/layout-component/components/Topbar/Toolbar/index.vue

@@ -262,75 +262,42 @@ function onSelect(node: RouteRecordRaw, index: number) {
 
 <style scoped>
 .toolbar-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: var(--g-container-bg);
-  transition-duration: 0.3s;
-  height: var(--g-toolbar-height);
-  transition-property: background-color;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+  --at-apply: flex items-center justify-between h-[--g-toolbar-height]
+  bg-[--g-container-bg] transition-[background-color] duration-[0.3s];
 }
 
 .left-box {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  padding-left: 0.625rem; /* 10px */
-  padding-right: 50px;
+  --at-apply: flex items-center overflow-hidden pl-2.5 pr-[50px];
   mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 50px), transparent);
 }
 
 .breadcrumb {
-  padding-left: 10px;
-  white-space: normal;
+  --at-apply: pl-10px whitespace-normal;
 }
 
 .breadcrumb.breadcrumb-modern :deep(.breadcrumb-item) .text {
-  & {
-    background-color: rgb(0 0 0 / 0.05) /* #000 */;
-    padding-left: 1rem; /* 16px */
-    padding-right: 1rem; /* 16px */
-    padding-top: 0.375rem; /* 6px */
-    padding-bottom: 0.375rem; /* 6px */
-    background-color: rgb(231 229 228 / 0.8) /* #e7e5e4 */;
-    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
-  }
-  .dark & {
-    background-color: rgb(41 37 36 / 0.8) /* #292524 */;
-  }
+  --at-apply: bg-black/5 px-4 py-1.5 bg-stone-2/80 dark:bg-stone-8/80;
+  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
 }
 
 .breadcrumb.breadcrumb-modern :deep(.breadcrumb-item) .text.is-link:hover {
-  & {
-    background-color: #e7e5e4;
-  }
-  .dark & {
-    background-color: #292524;
-  }
+  --at-apply: bg-stone-2 dark:bg-stone-8;
 }
 
 .breadcrumb.breadcrumb-modern :deep(.breadcrumb-item):first-child .text {
-  padding-left: 0.75rem; /* 12px */
+  --at-apply: pl-3;
   clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
   border-radius: 6px 0 0 6px;
 }
 
 .breadcrumb.breadcrumb-modern :deep(.breadcrumb-item):last-child:not(:first-child) .text {
-  & {
-    background-color: #e7e5e4;
-    padding-left: 0.75rem; /* 12px */
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
-    border-radius: 0 6px 6px 0;
-  }
-  .dark & {
-    background-color: #292524;
-  }
+  --at-apply: bg-stone-2 dark:bg-stone-8 pl-3;
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
+  border-radius: 0 6px 6px 0;
 }
 
 .breadcrumb.breadcrumb-modern :deep(.breadcrumb-item) .separator {
-  display: none;
+  --at-apply: hidden;
 }
 
 /* 面包屑动画 */