@pubinfo-pr/core 0.221.3 → 0.222.1

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

@@ -45,83 +45,180 @@ const { show } = useLayoutVisible();
 <style scoped>
 [data-app-width-mode="center"] header,
 [data-app-width-mode="center-max-width"] header {
-  --at-apply: w-[--g-app-width] max-w-full;
+  width: var(--g-app-width);
+  max-width: 100%;
 }
 
 header {
-  --at-apply: fixed top-0 right-0 left-0 z-1000 flex items-center w-full h-[--g-header-height] mx-auto my-0 px-5 py-0 text-[--g-header-color] bg-[--g-header-bg];
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--g-header-height);
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 1.25rem; /* 20px */
+  padding-right: 1.25rem; /* 20px */
+  padding-top: 0;
+  padding-bottom: 0;
+  color: var(--g-header-color);
+  background-color: var(--g-header-bg);
   transition: background-color 0.3s;
 }
 
 .header-container {
-  --at-apply: flex items-center justify-between w-[--g-header-width] h-full mx-auto my-0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: var(--g-header-width);
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 :deep(.main) {
-  --at-apply: flex flex-[auto] flex-nowrap items-center w-0 h-full;
+  display: flex;
+  flex: auto;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 0;
+  height: 100%;
 }
 
 :deep(.main .menu-active-arrow .item-container::before),
 :deep(.main .menu-active-arrow .menu-item::before) {
-  --at-apply: absolute -translate-x-2/4 w-0 h-0 content-empty border-b-[color:var(--g-header-bg)] opacity-0 transition-all duration-[0.3s] border-b-[5px] border-x-[5px] border-x-transparent border-solid left-2/4 bottom-0;
+  position: absolute;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  content: "";
+  border-bottom-color: var(--g-header-bg);
+  opacity: 0;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-duration: 0.3s;
+  border-bottom-width: 5px;
+  border-left-width: 5px;
+  border-right-width: 5px;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-style: solid;
+  left: 50%;
+  bottom: 0;
 }
 
 :deep(.main .menu-active-arrow .item-container.active::before),
 :deep(.main .menu-active-arrow .menu-item.active::before) {
-  --at-apply: bottom-2 op-100;
+  bottom: 0.5rem; /* 8px */
+  opacity: 1;
 }
 
 :deep(.main .menu-active-line .item-container::before),
 :deep(.main .menu-active-line .menu-item::before) {
-  --at-apply: absolute -translate-x-2/4 w-0 h-1 content-empty bg-[--g-header-menu-active-bg] opacity-0 transition-all duration-[0.3s] rounded-sm left-2/4 bottom-1.5;
+  position: absolute;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0.25rem; /* 4px */
+  content: "";
+  background-color: var(--g-header-menu-active-bg);
+  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: 50%;
+  bottom: 0.375rem; /* 6px */
   box-shadow: 0 0 0 1px var(--g-header-bg);
 }
 
 :deep(.main .menu-active-line .item-container.active::before),
 :deep(.main .menu-active-line .menu-item.active::before) {
-  --at-apply: w-5 op-100;
+  width: 1.25rem; /* 20px */
+  opacity: 1;
 }
 
 :deep(.main .menu-active-dot .item-container::before),
 :deep(.main .menu-active-dot .menu-item::before) {
-  --at-apply: absolute -translate-x-2/4 w-2.5 h-2.5 content-empty bg-[--g-header-menu-active-bg]
-  opacity-0 transition-all duration-[0.3s] rounded-[50%] left-2/4 bottom-0;
+  position: absolute;
+  transform: translateX(-50%);
+  content: "";
+  background-color: var(--g-header-menu-active-bg);
+  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: 50%;
+  bottom: 0;
+  width: 0.625rem;
+  height: 0.625rem;
   box-shadow: 0 0 0 1px var(--g-main-sidebar-bg);
 }
 
 :deep(.main .menu-active-dot .item-container.active::before),
 :deep(.main .menu-active-dot .menu-item.active::before) {
-  --at-apply: bottom-1 op-100;
+  bottom: 0.25rem; /* 4px */
+  opacity: 1;
 }
 
 :deep(.menu-container) {
-  --at-apply: flex-1 h-full overflow-x-auto mx-[30px] my-0 px-5 py-0;
+  flex: 1 1 0%;
+  height: 100%;
+  overflow-x: auto;
+  margin-left: 30px;
+  margin-right: 30px;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 1.25rem; /* 20px */
+  padding-right: 1.25rem; /* 20px */
+  padding-top: 0;
+  padding-bottom: 0;
   scrollbar-width: none;
   mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
 }
 
 :deep(.menu-container::-webkit-scrollbar) {
-  --at-apply: hidden;
+  display: none;
 }
 
 :deep(.menu-container.nothin) {
-  --at-apply: flex;
+  display: flex;
 }
 
 :deep(.menu-container .menu-item-container-layout) {
-  --at-apply: flex flex-row w-auto;
+  display: flex;
+  flex-direction: row;
+  width: auto;
 }
 
 :deep(.menu) {
-  --at-apply: inline-flex h-full bg-[--g-header-bg];
+  display: inline-flex;
+  height: 100%;
+  background-color: var(--g-header-bg);
 }
 
 :deep(.menu .menu-item .v-popper--theme-not-cursor) {
-  --at-apply: h-full;
+  height: 100%;
 }
 
 :deep(.menu .menu-item .menu-item-container) {
-  --at-apply: px-1.5 py-0 text-[--g-header-menu-color] bg-[--g-header-menu-bg];
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  color: var(--g-header-menu-color);
+  background-color: var(--g-header-menu-bg);
 }
 
 :deep(.menu .menu-item .menu-item-container:hover) {
@@ -134,7 +231,7 @@ header {
 }
 
 :deep(.menu .menu-item.is-dev .menu-item-container) {
-  --at-apply: cursor-not-allowed;
+  cursor: not-allowed;
 }
 
 :deep(.menu .menu-item.is-dev .menu-item-container i) {
@@ -142,7 +239,7 @@ header {
 }
 
 :deep(.menu .menu-item.is-dev .menu-item-container span) {
-  --at-apply: op-80;
+  opacity: 0.8;
 }
 
 :deep(.menu .menu-item.active .menu-item-container) {
@@ -151,7 +248,7 @@ header {
 }
 
 :deep(.tools) {
-  --at-apply: p-0;
+  padding: 0;
 }
 
 :deep(.tools .buttons .item .icon) {
@@ -159,7 +256,7 @@ header {
 }
 
 :deep(.tools .user-container) {
-  --at-apply: text-16px;
+  font-size: 16px;
   color: var(--g-header-color);
 }
 

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

@@ -50,6 +50,9 @@ const to = computed(() => {
 
 <style scoped>
 span {
-  --at-apply: text-2xl text-[--g-header-color] tracking-px;
+  font-size: 1.5rem; /* 24px */
+  line-height: 2rem; /* 32px */
+  color: var(--g-header-color) /* var(--g-header-color) */;
+  letter-spacing: 1px;
 }
 </style>

package/src/built-in/layout-component/components/Menu/item.vue

@@ -171,28 +171,51 @@ defineExpose({
 
 <style scoped>
 .badge :deep(> span) {
-  --at-apply: right-0;
+  right: 0;
   left: initial !important;
 }
 
 .sharp-corner {
-  --at-apply: relative ml-1 w-[10px];
+  position: relative;
+  margin-left: 0.25rem; /* 4px */
+  width: 10px;
 }
 
 .sharp-corner::before {
-  --at-apply: absolute h-1.5px w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px];
+  position: absolute;
+  height: 1.5px;
+  width: 6px;
+  background-color: currentColor /* currentColor */;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  content: "";
+  transform: translateY(-1px);
 }
 
 .sharp-corner::after {
-  --at-apply: absolute h-1.5px w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px];
+  position: absolute;
+  height: 1.5px;
+  width: 6px;
+  background-color: currentColor /* currentColor */;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  content: "";
+  transform: translateY(-1px);
 }
 
 .sub-sidebar-container .menu-item-container-layout:has(.system-point) {
-  --at-apply: relative;
+  position: relative;
 }
 
 .sub-sidebar-container .menu-item-container-layout:has(.system-point)::before {
-  --at-apply: absolute w-1.5 h-1.5 content-empty rounded-[50%] left-3;
+  position: absolute;
+  width: 0.375rem; /* 6px */
+  height: 0.375rem; /* 6px */
+  content: "";
+  border-radius: 50%;
+  left: 0.75rem; /* 12px */
   background: var(--g-sub-sidebar-menu-active-color);
 }
 </style>

package/src/built-in/layout-component/components/SettingBar/AppSetting.vue

@@ -111,7 +111,7 @@ function excludesComponents(all: string[], excludes: string[]) {
       </template>
     </div>
     <template v-if="isSupported" #footer>
-      <HButton block @click="handleCopy">
+      <HButton class="block" @click="handleCopy">
         <EpDocumentCopy />
         复制配置
       </HButton>
@@ -121,26 +121,46 @@ function excludesComponents(all: string[], excludes: string[]) {
 
 <style scoped>
 :deep(.setting-item) {
-  --at-apply:
-    flex
-    items-center
-    justify-between
-    gap-4
-    px-4
-    py-2
-    rounded-2
-    transition;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 1rem; /* 16px */
+  padding-right: 1rem; /* 16px */
+  transition-property: color, background-color, border-color,
+    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
+    backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  gap: 1rem; /* 16px */
+  padding-top: 0.5rem; /* 8px */
+  padding-bottom: 0.5rem; /* 8px */
+  border-radius: 0.5rem; /* 8px */
 }
 
 :deep(.setting-item:hover) {
-  --at-apply: bg-stone-1 dark:bg-stone-1 dark:bg-stone-9;
+  & {
+    background-color: #f5f5f4;
+  }
+  .dark & {
+    background-color: #f5f5f4;
+    background-color: #1c1917;
+  }
 }
 
 :deep(.setting-item .label) {
-  --at-apply: flex items-center flex-shrink-0 gap-2 text-sm;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 0.5rem; /* 8px */
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.25rem; /* 20px */
 }
 
 :deep(.setting-item .label i) {
-  --at-apply: text-xl text-orange cursor-help;
+  font-size: 1.25rem; /* 20px */
+  line-height: 1.75rem; /* 28px */
+  --un-text-opacity: 1;
+  color: #fb923c;
+  cursor: help;
 }
 </style>

package/src/built-in/layout-component/components/SettingBar/components/DayNightToggle.vue

@@ -33,103 +33,191 @@ const enabled = defineModel();
 
 <style scoped>
 .toggleWrapper {
-  --at-apply: overflow-hidden;
+  overflow: hidden;
   transform: scale(0.5);
 }
 
 .toggleWrapper input {
-  --at-apply: absolute left-[-99em];
+  position: absolute;
+  left: -99em;
 }
 
 .toggle {
-  --at-apply: relative inline-block w-[90px] h-[50px] cursor-pointer bg-[#83d8ff] rounded-[84px];
+  position: relative;
+  display: inline-block;
+  width: 90px;
+  height: 50px;
+  cursor: pointer;
+  --un-bg-opacity: 1;
+  background-color: #83d8ff;
+  border-radius: 84px;
   transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }
 
 .toggle::before {
-  --at-apply: absolute left-[-50px] text-lg content-["Day"] top-[15px];;
+  position: absolute;
+  left: -50px;
+  font-size: 1.125rem; /* 18px */
+  line-height: 1.75rem; /* 28px */
+  content: "Day";
+  top: 15px;
 }
 
 .toggle::after {
-  --at-apply: absolute right-[-60px] text-lg text-[#384f6d] content-["Night"] top-[15px];
+  position: absolute;
+  right: -60px;
+  font-size: 1.125rem; /* 18px */
+  line-height: 1.75rem; /* 28px */
+  --un-text-opacity: 1;
+  color: #384f6d;
+  content: "Night";
+  top: 15px;
 }
 
 .toggle__handler {
-  --at-apply: relative z-[1] inline-block w-11 h-11 bg-[#ffdb98] rounded-[50px] left-[3px] top-[3px];
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  width: 2.75rem; /* 44px */
+  height: 2.75rem; /* 44px */
+  --un-bg-opacity: 1;
+  background-color: #ffdb98;
+  border-radius: 50px;
+  left: 3px;
+  top: 3px;
   box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
   transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
   transform: rotate(-45deg);
 }
 
 .toggle__handler .crater {
-  --at-apply: absolute bg-[#e8cda5] opacity-0 transition-opacity duration-200 ease-[ease-in-out] rounded-[100%];
+  position: absolute;
+  background-color: #e8cda5;
+  opacity: 0;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-duration: 200ms;
+  transition-timing-function: ease-in-out;
+  border-radius: 100%;
 }
 
 .toggle__handler .crater--1 {
-  --at-apply: w-1 h-1 left-2.5 top-[18px];
+  width: 0.25rem; /* 4px */
+  height: 0.25rem; /* 4px */
+  left: 0.625rem; /* 10px */
+  top: 18px;
 }
 .toggle__handler .crater--2 {
-  --at-apply: w-1.5 h-1.5 left-[22px] top-7;
+  width: 0.375rem; /* 6px */
+  height: 0.375rem; /* 6px */
+  left: 22px;
+  top: 1.75rem; /* 28px */
 }
 .toggle__handler .crater--3 {
-  --at-apply: w-2 h-2 left-[25px] top-2.5;
+  width: 0.5rem; /* 8px */
+  height: 0.5rem; /* 8px */
+  left: 25px;
+  top: 0.625rem; /* 10px */
 }
 
 .star {
-  --at-apply: absolute bg-white transition-all duration-300 ease-[cubic-bezier(0.445,0.05,0.55,0.95)] rounded-[50%];
+  position: absolute;
+  background-color: #fff;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+  border-radius: 50%;
 }
 .star--1 {
-  --at-apply: z-0 w-[30px] h-[3px] left-[35px] top-2.5;
+  z-index: 0;
+  width: 30px;
+  height: 3px;
+  left: 35px;
+  top: 0.625rem; /* 10px */
 }
 .star--2 {
-  --at-apply: z-[1] w-[30px] h-[3px] left-7 top-[18px];
+  z-index: 1;
+  width: 30px;
+  height: 3px;
+  left: 1.75rem; /* 28px */
+  top: 18px;
 }
 .star--3 {
-  --at-apply: z-0 w-[30px] h-[3px] left-10 top-[27px];
+  z-index: 0;
+  width: 30px;
+  height: 3px;
+  left: 2.5rem; /* 40px */
+  top: 27px;
 }
 .star--4,
 .star--5,
 .star--6 {
-  --at-apply: opacity-0;
+  opacity: 0;
   transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
 }
 .star--4 {
-  --at-apply: z-0 w-0.5 h-0.5 left-[11px] top-4;
+  z-index: 0;
+  width: 0.125rem; /* 2px */
+  height: 0.125rem; /* 2px */
+  left: 11px;
+  top: 1rem; /* 16px */
   transform: translate3d(3px, 0, 0);
 }
 .star--5 {
-  --at-apply: z-0 w-[3px] h-[3px] left-[17px] top-8;
+  z-index: 0;
+  width: 3px;
+  height: 3px;
+  left: 17px;
+  top: 2rem; /* 32px */
   transform: translate3d(3px, 0, 0);
 }
 .star--6 {
-  --at-apply: z-0 w-0.5 h-0.5 left-7 top-9;
+  z-index: 0;
+  width: 0.125rem; /* 2px */
+  height: 0.125rem; /* 2px */
+  left: 1.75rem; /* 28px */
+  top: 2.25rem; /* 36px */
   transform: translate3d(3px, 0, 0);
 }
 input:checked + .toggle {
-  --at-apply: bg-[#749dd6] before:text-[#749ed7] after:text-white;
+  & {
+    background-color: #749dd6;
+  }
+  &::after {
+    color: #fff;
+  }
+  &::before {
+    color: #749ed7;
+  }
 }
 input:checked + .toggle .toggle__handler {
-  --at-apply: bg-[#ffe5b5];
+  background-color: #ffe5b5;
   transform: translate3d(40px, 0, 0) rotate(0);
 }
 input:checked + .toggle .toggle__handler .crater {
-  --at-apply: opacity-100;
+  opacity: 1;
 }
 input:checked + .toggle .star--1 {
-  --at-apply: w-0.5 h-0.5;
+  width: 0.125rem; /* 2px */
+  height: 0.125rem; /* 2px */
 }
 input:checked + .toggle .star--2 {
-  --at-apply: w-1 h-1;
+  width: 0.25rem; /* 4px */
+  height: 0.25rem; /* 4px */
   transform: translate3d(-5px, 0, 0);
 }
 input:checked + .toggle .star--3 {
-  --at-apply: w-0.5 h-0.5;
+  width: 0.125rem; /* 2px */
+  height: 0.125rem; /* 2px */
   transform: translate3d(-7px, 0, 0);
 }
 input:checked + .toggle .star--4,
 input:checked + .toggle .star--5,
 input:checked + .toggle .star--6 {
-  --at-apply: opacity-100;
+  opacity: 1;
   transform: translate3d(0, 0, 0);
 }
 input:checked + .toggle .star--4 {

package/src/built-in/layout-component/components/SettingBar/components/SettingEnableTransition.vue

@@ -73,19 +73,72 @@ const transitionModeList = reactive<
 
 <style scoped>
 .transition-mode {
-  --at-apply: flex items-center justify-center gap-4 pb-4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem; /* 16px */
+  padding-bottom: 1rem; /* 16px */
 }
 
 .transition-mode .mode {
-  --at-apply: relative flex items-center justify-center w-14 h-10 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer;
+  & {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3.5rem; /* 56px */
+    height: 2.5rem; /* 40px */
+    border-radius: 0.5rem; /* 8px */
+    --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 */;
+    cursor: pointer;
+  }
+  .dark & {
+    --un-ring-opacity: 1;
+    --un-ring-color: rgb(68 64 60 / var(--un-ring-opacity)) /* #44403c */;
+  }
 }
 
 .transition-mode .mode.active {
-  --at-apply: ring-ui-primary ring-2;
+  --un-ring-opacity: 1;
+  --un-ring-color: rgb(var(--ui-primary) / var(--un-ring-opacity))
+    /* rgb(var(--ui-primary)) */;
+  --un-ring-width: 2px;
+  --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);
 }
 
 .transition-mode .mode::after {
-  --at-apply: content-empty absolute w-3/5 h-3/5 top-1/5 left-1/5 rounded-2 bg-stone-2 dark:bg-stone-9 transition;
+  content: "";
+  position: absolute;
+  width: 60%;
+  height: 60%;
+  top: 20%;
+  left: 20%;
+  border-radius: 0.5rem; /* 8px */
+  background-color: #e7e5e4;
+  transition-property: color, background-color, border-color,
+    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
+    backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.dark .transition-mode .mode::after {
+  background-color: #1c1917;
 }
 
 .transition-mode .mode.mode-fade::after {