@pubinfo-pr/core 0.221.3 → 0.222.1

package/src/built-in/layout-component/components/ui/HToggle.vue

@@ -34,42 +34,88 @@ const enabled = computed({
 
 <style scoped lang="css">
 .switch {
-  --at-apply: cursor-pointer scale-75;
+  cursor: pointer;
+  transform: scaleX(0.75) scaleY(0.75);
 }
 
 .switch input {
-  --at-apply: hidden;
+  display: none;
 }
 
 .switch input + span {
-  --at-apply: relative block w-12 h-7 rounded-14px transition-all duration-300 ease;
+  position: relative;
+  display: block;
+  width: 3rem; /* 48px */
+  height: 1.75rem; /* 28px */
+  border-radius: 14px;
+  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.4, 0, 0.2, 1);
 }
 
 .switch input + span::before,
 .switch input + span::after {
-  --at-apply: absolute block content-empty transition-all duration-300 ease;
+  position: absolute;
+  display: block;
+  content: "";
+  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.4, 0, 0.2, 1);
 }
 
 .switch input + span::before {
-  --at-apply: top-5px left-5px size-18px border-5px border-solid border-white dark:border-dark rounded-9px;
+  top: 5px;
+  left: 5px;
+  width: 18px;
+  height: 18px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: rgb(255 255 255);
+  border-radius: 9px;
+}
+
+.dark .switch input + span::before {
+  border-color: rgb(34 34 34);
 }
 
 .switch input + span::after {
-  --at-apply: top-5px left-32px w-6px h-18px bg-white rounded-4/10 op-0 dark:bg-stone-7;
+  top: 5px;
+  left: 32px;
+  width: 6px;
+  height: 18px;
+  background-color: #FFFFFF;
+  border-radius: 40%;
+  opacity: 0;
   transform-origin: 50% 50%;
 }
 
+.dark .switch input + span::after {
+  background-color: #44403c;
+}
+
 .switch input + span:active {
-  --at-apply: scale-92;
+  transform: scaleX(0.92) scaleY(0.92);
 }
 
 .switch input:checked + span {
-  --at-apply: bg-ui-primary;
+  background-color: rgb(var(--ui-primary));
   box-shadow: 0 8px 16px -1px rgba(var(--ui-primary), 0.2);
 }
 
 .switch input:checked + span::before {
-  --at-apply: w-0 ml-27px bg-white dark:bg-stone-7 border-3px rounded-3px;
+  width: 0;
+  margin-left: 27px;
+  background-color: #FFFFFF;
+  border-width: 3px;
+  border-radius: 3px;
+}
+
+.dark .switch input:checked + span::before {
+  background-color: #44403c;
 }
 
 .switch input:checked + span::after {

package/src/features/components/PassStrengthValidator/index.vue

@@ -154,41 +154,67 @@ watchEffect(() => {
 
 <style scoped>
 .pass-strength-validator {
-  --at-apply: p-15px;
+  padding: 15px;
 }
 
 .pass-strength-validator .title-wrap {
-  --at-apply: text-2xl font-semibold text-[#1677ff] mb-10;
+  font-size: 1.5rem; /* 24px */
+  line-height: 2rem; /* 32px */
+  font-weight: 600;
+  color: #1677ff;
+  margin-bottom: 2.5rem; /* 40px */
 }
 
 .pass-strength-validator .rules-title {
-  --at-apply: text-base font-medium mb-[15px];
+  font-size: 1rem; /* 16px */
+  line-height: 1.5rem; /* 24px */
+  font-weight: 500;
+  margin-bottom: 15px;
 }
 
 .pass-strength-validator.vertical {
-  --at-apply: w-[1130px] pt-[18px] pb-6 px-8;
+  width: 1130px;
+  padding-top: 18px;
+  padding-bottom: 1.5rem; /* 24px */
+  padding-left: 2rem; /* 32px */
+  padding-right: 2rem; /* 32px */
 }
 .pass-strength-validator.vertical .title-wrap {
-  --at-apply: text-base mb-4;
+  font-size: 1rem; /* 16px */
+  line-height: 1.5rem; /* 24px */
+  margin-bottom: 1rem; /* 16px */
 }
 .pass-strength-validator.vertical .rules-wrap {
-  --at-apply: flex;
+  display: flex;
 }
 .pass-strength-validator.vertical .basic-rules,
 .pass-strength-validator.vertical .advanced-rules {
-  --at-apply: relative flex-1;
+  position: relative;
+  flex: 1 1 0%;
 }
 .pass-strength-validator.vertical .basic-rules::after {
-  --at-apply: absolute w-px h-auto content-[""] right-[35px] inset-y-[11px];
+  position: absolute;
+  width: 1px;
+  height: auto;
+  content: "";
+  right: 35px;
+  top: 11px;
+  bottom: 11px;
   background: #e5e6eb;
 }
 .pass-strength-validator.vertical .rules-title {
-  --at-apply: text-sm font-[bold] mb-3.5;
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.25rem; /* 20px */
+  font-family: bold;
+  margin-bottom: 0.875rem; /* 14px */
 }
 
 /* 样式穿透，用于覆盖 ant-design-vue 组件样式 */
 .pass-strength-validator :deep(.ant-divider) {
-  --at-apply: mx-0 my-4;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 1rem; /* 16px */
+  margin-bottom: 1rem; /* 16px */
 }
 
 /* 暗色主题支持 */

package/src/features/components/PassStrengthValidator/rule.vue

@@ -25,15 +25,28 @@ const props = defineProps<{
 
 <style scoped>
 .rule-item {
-  --at-apply: flex flex-row text-sm leading-[19px] px-0 py-2.5;
+  display: flex;
+  flex-direction: row;
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.25rem; /* 20px */
+  line-height: 19px;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0.625rem; /* 10px */
+  padding-bottom: 0.625rem; /* 10px */
 }
 .rule-item .icon {
-  --at-apply: leading-[23px] mr-2.5;
+  line-height: 23px;
+  margin-right: 0.625rem; /* 10px */
 }
 .rule-item.vertical {
-  --at-apply: leading-[18px] text-[#86909c] mb-1.5 p-0;
+  line-height: 18px;
+  color: #86909c;
+  margin-bottom: 0.375rem; /* 6px */
+  padding: 0;
 }
 .rule-item.vertical .icon {
-  --at-apply: leading-[18px] mr-1.5;
+  line-height: 18px;
+  margin-right: 0.375rem; /* 6px */
 }
 </style>