@pubinfo-pr/core 0.222.3 → 0.223.1

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

@@ -71,187 +71,84 @@ function clickHandle(item: Settings.menu['menuMode']) {
 
 <style scoped>
 .menu-mode {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem; /* 16px */
-  padding-bottom: 1rem; /* 16px */
+  --at-apply: flex items-center justify-center gap-4 pb-4;
 }
 
 .menu-mode .mode {
-  & {
-    position: relative;
-    width: 4rem; /* 64px */
-    height: 3rem; /* 48px */
-    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;
-    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 & {
-    --un-ring-opacity: 1;
-    --un-ring-color: rgb(68 64 60 / var(--un-ring-opacity)) /* #44403c */;
-  }
+  --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition;
 }
 
 .menu-mode .mode.active {
-  --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);
+  --at-apply: ring-ui-primary ring-2;
 }
 
 .menu-mode .mode::before,
 .menu-mode .mode::after,
 .menu-mode .mode .mode-container {
-  position: absolute;
-  pointer-events: none;
+  --at-apply: absolute pointer-events-none;
 }
 
 .menu-mode .mode::before {
-  content: "";
-  background-color: rgb(var(--ui-primary));
+  --at-apply: content-empty bg-ui-primary;
 }
 
 .menu-mode .mode::after {
-  content: "";
-  background-color: rgb(var(--ui-primary) / 0.6);
+  --at-apply: content-empty bg-ui-primary/60;
 }
 
 .menu-mode .mode .mode-container {
-  background-color: rgb(var(--ui-primary) / 0.2);
-  border-style: dashed;
-  border-color: rgb(var(--ui-primary));
+  --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
 }
 
 .menu-mode .mode .mode-container::before {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
+  --at-apply: content-empty absolute w-full h-full;
 }
 
 .menu-mode .mode-side::before {
-  top: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 0.5rem; /* 8px */
-  width: 0.5rem; /* 8px */
-  border-top-left-radius: 0.25rem; /* 4px */
-  border-bottom-left-radius: 0.25rem; /* 4px */
+  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
 }
 
 .menu-mode .mode-side::after {
-  top: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 1.125rem; /* 18px */
-  width: 0.75rem; /* 12px */
+  --at-apply: top-2 bottom-2 left-4.5 w-3;
 }
 
 .menu-mode .mode-side .mode-container {
-  top: 0.5rem; /* 8px */
-  right: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 2rem; /* 32px */
-  border-top-right-radius: 0.25rem; /* 4px */
-  border-bottom-right-radius: 0.25rem; /* 4px */
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
 }
 
 .menu-mode .mode-head::before {
-  top: 0.5rem; /* 8px */
-  left: 0.5rem; /* 8px */
-  right: 0.5rem; /* 8px */
-  height: 0.5rem; /* 8px */
-  border-top-left-radius: 0.25rem; /* 4px */
-  border-top-right-radius: 0.25rem; /* 4px */
+  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
 }
 
 .menu-mode .mode-head::after {
-  top: 1.125rem; /* 18px */
-  left: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  width: 0.75rem; /* 12px */
-  border-bottom-left-radius: 0.25rem; /* 4px */
+  --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
 }
 
 .menu-mode .mode-head .mode-container {
-  top: 1.125rem; /* 18px */
-  right: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 1.375rem; /* 22px */
-  border-bottom-right-radius: 0.25rem; /* 4px */
+  --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
 }
 
 .menu-mode .mode-single::after {
-  top: 0.5rem; /* 8px */
-  left: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  width: 0.75rem; /* 12px */
-  border-top-left-radius: 0.25rem; /* 4px */
-  border-bottom-left-radius: 0.25rem; /* 4px */
+  --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
 }
 
 .menu-mode .mode-single .mode-container {
-  top: 0.5rem; /* 8px */
-  right: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 1.375rem; /* 22px */
-  border-top-right-radius: 0.25rem; /* 4px */
-  border-bottom-right-radius: 0.25rem; /* 4px */
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
 }
 
 .menu-mode .mode-only-side::before {
-  top: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 0.5rem; /* 8px */
-  width: 0.5rem; /* 8px */
-  border-top-left-radius: 0.25rem; /* 4px */
-  border-bottom-left-radius: 0.25rem; /* 4px */
+  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
 }
 
 .menu-mode .mode-only-side .mode-container {
-  top: 0.5rem; /* 8px */
-  right: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 1.125rem; /* 18px */
-  border-top-right-radius: 0.25rem; /* 4px */
-  border-bottom-right-radius: 0.25rem; /* 4px */
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-4.5 rounded-tr-1 rounded-br-1;
 }
 
 .menu-mode .mode-only-head::before {
-  top: 0.5rem; /* 8px */
-  left: 0.5rem; /* 8px */
-  right: 0.5rem; /* 8px */
-  height: 0.5rem; /* 8px */
-  border-top-left-radius: 0.25rem; /* 4px */
-  border-top-right-radius: 0.25rem; /* 4px */
+  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
 }
 
 .menu-mode .mode-only-head .mode-container {
-  top: 1.125rem; /* 18px */
-  right: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 0.5rem; /* 8px */
-  border-bottom-left-radius: 0.25rem; /* 4px */
-  border-bottom-right-radius: 0.25rem; /* 4px */
+  --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-2 rounded-bl-1 rounded-br-1;
 }
 </style>

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

@@ -104,64 +104,34 @@ function clickHandle(item: ThemeListCard) {
 
 <style scoped>
 .divider {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem; /* 16px */
-  margin-top: 1rem; /* 16px */
-  margin-bottom: 1rem; /* 16px */
-  font-size: 0.875rem; /* 14px */
-  line-height: 1.25rem; /* 20px */
-  white-space: nowrap;
-  font-weight: 500;
+  --at-apply:
+    flex
+    items-center
+    justify-between
+    gap-4
+    my-4
+    whitespace-nowrap
+    text-sm
+    font-500;
 }
 
 .divider::before,
 .divider::after {
-  content: "";
-  width: 100%;
-  background-color: #e7e5e4;
-  height: 1px;
-}
-
-.dark .divider::before,
-.dark .divider::after {
-  background-color: #57534e;
+  --at-apply:
+    content-empty
+    w-full
+    h-1px
+    bg-stone-2
+    dark:bg-stone-6;
 }
 
 .themes {
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: repeat(3, 125px);
-  gap: 15px;
-  width: 100%;
+  --at-apply: box-border grid grid-cols-[repeat(3,125px)] gap-[15px] w-full;
 }
 
 .themes .theme {
-  & {
-    position: relative;
-    box-sizing: border-box;
-    color: white;
-    cursor: pointer;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-    transition-timing-function: ease-in-out;
-    margin-bottom: 15px;
-    height: 78px;
-    background-color: #f7f8f9;
-    transition-duration: 0.2s;
-    padding: 15px;
-    border-radius: 0.75rem; /* 12px */
-    --un-shadow: var(--un-shadow-inset) 0 1px 3px 0
-        var(--un-shadow-color, rgb(0 0 0 / 0.1)),
-      var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
-      var(--un-shadow);
-  }
-  .dark & {
-    background-color: #323232;
-  }
+  --at-apply: relative box-border h-[78px] text-white cursor-pointer bg-[#f7f8f9] dark:bg-dark-2
+  transition-all duration-[0.2s] ease-[ease-in-out] mb-[15px] p-[15px] rounded-xl shadow;
 }
 
 .themes .theme:hover {
@@ -169,30 +139,8 @@ function clickHandle(item: ThemeListCard) {
 }
 
 .themes .theme .explosion {
-  background-color: rgb(var(--ui-primary));
-  position: absolute;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  transition-duration: 0.3s;
-  border-radius: 50%;
-  width: 1.5rem; /* 24px */
-  height: 1.5rem; /* 24px */
-  transform-origin: center;
-  --un-scale-x: 0;
-  --un-scale-y: 0;
-  transform: translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
-    translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
-    rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
-    rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y))
-    scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y))
-    scaleZ(var(--un-scale-z));
-  right: -0.625rem; /* -10px */
-  top: -0.625rem; /* -10px */
+  --at-apply: bg-ui-primary absolute z-[1] flex items-center justify-center w-6 h-6
+  transition-all duration-[0.3s] origin-center rounded-[50%] scale-0 -right-2.5 -top-2.5;
 }
 
 .themes .theme.active {
@@ -204,41 +152,16 @@ function clickHandle(item: ThemeListCard) {
 }
 
 .themes .theme .theme-type {
-  width: 100%;
-  height: 1rem; /* 16px */
-  margin-top: 5px;
-  padding-bottom: 10px;
+  --at-apply: w-full h-4 mt-5px pb-10px;
 }
 
 .themes .theme .theme-point {
-  display: grid;
-  grid-template-columns: repeat(6, 15px);
-  width: 100%;
-  height: 1.25rem; /* 20px */
+  --at-apply: grid grid-cols-[repeat(6,15px)] w-full h-5;
 }
 
 .themes .theme .theme-point .point {
-  & {
-    box-sizing: border-box;
-    width: 1.25rem; /* 20px */
-    height: 1.25rem; /* 20px */
-    border-radius: 50%;
-    border-width: 2px;
-    border-style: solid;
-    --un-border-opacity: 1;
-    border-color: rgb(255 255 255 / var(--un-border-opacity));
-    --un-shadow: var(--un-shadow-inset) 0 1px 3px 0
-        var(--un-shadow-color, rgb(0 0 0 / 0.1)),
-      var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
-      var(--un-shadow);
-    margin-right: 5px;
-    --un-shadow-opacity: 1;
-    --un-shadow-color: rgb(168 162 158 / var(--un-shadow-opacity)) /* #a8a29e */;
-  }
-  .dark & {
-    --un-shadow-opacity: 1;
-    --un-shadow-color: rgb(41 37 36 / var(--un-shadow-opacity)) /* #292524 */;
-  }
+  --at-apply: box-border w-5 h-5 mr-[5px] rounded-[50%]
+  border-2 border-solid border-white
+  shadow shadow-stone-4 dark:shadow-stone-8;
 }
 </style>

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

@@ -73,153 +73,69 @@ function clickHandle(item: Settings.layout['widthMode']) {
 
 <style scoped>
 .app-width-mode {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem; /* 16px */
-  padding-bottom: 1rem; /* 16px */
+  --at-apply: flex items-center justify-center gap-4 pb-4;
 }
 
 .app-width-mode .mode {
-  & {
-    position: relative;
-    width: 4rem; /* 64px */
-    height: 3rem; /* 48px */
-    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;
-    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;
-    overflow: hidden;
-  }
-  .dark & {
-    --un-ring-opacity: 1;
-    --un-ring-color: rgb(68 64 60 / var(--un-ring-opacity)) /* #44403c */;
-  }
+  --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition of-hidden;
 }
 
 .app-width-mode .mode.active {
-  --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);
+  --at-apply: ring-ui-primary ring-2;
 }
 
 .app-width-mode .mode-adaption::before {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: #f5f5f4;
-}
-
-.dark .app-width-mode .mode-adaption::before {
-  background-color: #1c1917;
+  --at-apply: content-empty absolute w-full h-full bg-stone-1 dark:bg-stone-9;
 }
 
 .app-width-mode .mode-adaption .left,
 .app-width-mode .mode-adaption .right {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
+  --at-apply: absolute top-1/2 -translate-y-1/2;
 }
 
 .app-width-mode .mode-adaption .left {
-  left: 0.25rem;
+  --at-apply: left-1;
 }
 
 .app-width-mode .mode-adaption .right {
-  right: 0.25rem;
+  --at-apply: right-1;
 }
 
 .app-width-mode .mode-adaption-min-width::before {
-  content: "";
-  position: absolute;
-  width: 50%;
-  height: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: #f5f5f4;
-}
-
-.dark .app-width-mode .mode-adaption-min-width::before {
-  background-color: #1c1917;
+  --at-apply: content-empty absolute w-1/2 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
 }
 
 .app-width-mode .mode-adaption-min-width .left,
 .app-width-mode .mode-adaption-min-width .right {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
+  --at-apply: absolute top-1/2 -translate-y-1/2;
 }
 
 .app-width-mode .mode-adaption-min-width .left {
-  left: 0.125rem; /* 2px */
+  --at-apply: left-0.5;
 }
 
 .app-width-mode .mode-adaption-min-width .right {
-  right: 0.125rem; /* 2px */
+  --at-apply: right-0.5;
 }
 
 .app-width-mode .mode-center::before {
-  content: "";
-  position: absolute;
-  width: 60%;
-  height: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: #f5f5f4;
-}
-
-.dark .app-width-mode .mode-center::before {
-  background-color: #1c1917;
+  --at-apply: content-empty absolute w-3/5 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
 }
 
 .app-width-mode .mode-center-max-width::before {
-  content: "";
-  position: absolute;
-  width: 60%;
-  height: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: #f5f5f4;
-}
-
-.dark .app-width-mode .mode-center-max-width::before {
-  background-color: #1c1917;
+  --at-apply: content-empty absolute w-3/5 h-full left-1/2 -translate-x-1/2 bg-stone-1 dark:bg-stone-9;
 }
 
 .app-width-mode .mode-center-max-width .left,
 .app-width-mode .mode-center-max-width .right {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50);
+  --at-apply: absolute top-1/2 -translate-y-1/2;
 }
 
 .app-width-mode .mode-center-max-width .left {
-  left: 0.625rem;
+  --at-apply: left-2.5;
 }
 
 .app-width-mode .mode-center-max-width .right {
-  right: 0.625rem;
+  --at-apply: right-2.5;
 }
 </style>

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

@@ -38,86 +38,32 @@ const [open, setOpen] = useToggle(false);
 
 <style scoped>
 .app-setting-warp {
-  position: relative;
-  position: fixed;
-  top: 50%;
-  right: 10px;
-  z-index: 10;
+  --at-apply: relative fixed top-1/2 right-10px z-10;
 }
 
 .app-setting-warp .vue-devtools__anchor--glowing {
-  position: absolute;
-  opacity: 0;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  left: 0;
-  top: 0;
-  pointer-events: none;
-  z-index: -1;
-  width: 10rem; /* 160px */
-  height: 10rem; /* 160px */
-  --un-blur: blur(60px);
-  filter: var(--un-blur) var(--un-brightness) var(--un-contrast)
-    var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate)
-    var(--un-invert) var(--un-saturate) var(--un-sepia);
-  transition-duration: 1s;
-  transition-timing-function: ease;
-  border-radius: 9999px;
-  --un-translate-x: -25%;
-  transform: translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
-    translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
-    rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
-    rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y))
-    scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y))
-    scaleZ(var(--un-scale-z));
-  --un-translate-y: -25%;
-  transform: translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
-    translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
-    rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
-    rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y))
-    scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y))
-    scaleZ(var(--un-scale-z));
+  --at-apply: absolute z-[-1] w-40 h-40 pointer-events-none blur-[60px] opacity-0
+  transition-all duration-[1s] ease-[ease] -translate-x-1/4 -translate-y-1/4
+  rounded-full left-0 top-0;
   background-image: linear-gradient(45deg, #00dc82, #36e4da, #0047e1);
 }
 
 .app-setting-warp:hover .vue-devtools__anchor--glowing {
-  opacity: 0.7;
+  --at-apply: op-70;
 }
 
 .app-setting {
-  & {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 0.875rem; /* 14px */
-    line-height: 1.25rem; /* 20px */
-    cursor: pointer;
-    width: 30px;
-    height: 76px;
-    border-radius: 30px;
-    color: #fff;
-    background-color: rgb(var(--ui-primary));
-  }
-  .dark & {
-    color: #222222;
-  }
+  --at-apply: text-white dark:text-dark bg-ui-primary
+  flex flex-col items-center justify-between w-[30px] h-[76px]
+  text-sm cursor-pointer rounded-[30px];
 }
 
 .app-setting .app-setting-item {
-  display: flex;
-  flex: auto;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 0;
+  --at-apply: flex flex-[auto] items-center justify-center w-full h-0;
 }
 
 .app-setting .divider {
-  width: 10px;
-  height: 1px;
-  background-color: #b3b3b3;
+  --at-apply: w-10px h-px bg-[#b3b3b3];
 }
 
 .app-setting .icon {