@hlw-uni/mp-vue 1.1.1 → 1.1.3

package/dist/style.css

@@ -594,7 +594,7 @@ from {
 to {
     transform: rotate(360deg);
 }
-}.hlw-modal-mask[data-v-397b9549] {
+}.hlw-modal-mask[data-v-91d9e108] {
   position: fixed;
   inset: 0;
   display: flex;
@@ -602,52 +602,52 @@ to {
   justify-content: center;
   background: rgba(0, 0, 0, 0.5);
   z-index: 1000;
-  animation: hlw-fade-in-397b9549 0.2s;
+  animation: hlw-fade-in-91d9e108 0.2s;
 }
-.hlw-modal[data-v-397b9549] {
+.hlw-modal[data-v-91d9e108] {
   width: 80%;
   max-width: 600rpx;
   background: #fff;
   border-radius: var(--radius-xl, 32rpx);
   overflow: hidden;
-  animation: hlw-scale-in-397b9549 0.25s ease;
+  animation: hlw-scale-in-91d9e108 0.25s ease;
 }
-.hlw-modal-title[data-v-397b9549] {
+.hlw-modal-title[data-v-91d9e108] {
   padding: 40rpx 32rpx 0;
   text-align: center;
   font-size: var(--font-md, 32rpx);
   font-weight: 600;
   color: #1e293b;
 }
-.hlw-modal-body[data-v-397b9549] {
+.hlw-modal-body[data-v-91d9e108] {
   padding: 32rpx;
   font-size: var(--font-base, 28rpx);
   color: #475569;
   text-align: center;
   line-height: 1.6;
 }
-.hlw-modal-footer[data-v-397b9549] {
+.hlw-modal-footer[data-v-91d9e108] {
   display: flex;
   border-top: 1rpx solid var(--border-color-light, #f1f5f9);
 }
-.hlw-modal-btn[data-v-397b9549] {
+.hlw-modal-btn[data-v-91d9e108] {
   flex: 1;
   padding: 24rpx 0;
   text-align: center;
   font-size: var(--font-base, 28rpx);
   font-weight: 500;
 }
-.hlw-modal-btn[data-v-397b9549]:active {
+.hlw-modal-btn[data-v-91d9e108]:active {
   background: #f8fafc;
 }
-.hlw-modal-btn--cancel[data-v-397b9549] {
+.hlw-modal-btn--cancel[data-v-91d9e108] {
   color: #64748b;
   border-right: 1rpx solid var(--border-color-light, #f1f5f9);
 }
-.hlw-modal-btn--confirm[data-v-397b9549] {
+.hlw-modal-btn--confirm[data-v-91d9e108] {
   color: var(--primary-color, #3b82f6);
 }
-@keyframes hlw-fade-in-397b9549 {
+@keyframes hlw-fade-in-91d9e108 {
 from {
     opacity: 0;
 }
@@ -655,7 +655,7 @@ to {
     opacity: 1;
 }
 }
-@keyframes hlw-scale-in-397b9549 {
+@keyframes hlw-scale-in-91d9e108 {
 from {
     transform: scale(0.9);
     opacity: 0;
@@ -709,97 +709,112 @@ to {
 100% {
     transform: translateX(-100%);
 }
-}.hlw-page[data-v-0cf37585] {
+}.hlw-page[data-v-01bb7796] {
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-.hlw-page-header[data-v-0cf37585] {
+.hlw-page-header[data-v-01bb7796] {
   flex-shrink: 0;
 }
-.hlw-page-content[data-v-0cf37585] {
+.hlw-page-content[data-v-01bb7796] {
   flex: 1;
   height: 0;
   width: 100%;
 }
-.hlw-page-footer[data-v-0cf37585] {
+.hlw-page-footer[data-v-01bb7796] {
   flex-shrink: 0;
-}.hlw-popup-mask[data-v-2d71ef9b] {
+}.hlw-popup-mask[data-v-be12aee0] {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 1000;
-  animation: hlw-fade-in-2d71ef9b 0.25s;
+  animation: hlw-fade-in-be12aee0 0.25s;
 }
-.hlw-popup[data-v-2d71ef9b] {
+.hlw-popup[data-v-be12aee0] {
   position: fixed;
   z-index: 1001;
   background: #fff;
-  transition: transform 0.3s ease, opacity 0.3s ease;
 }
-.hlw-popup--bottom[data-v-2d71ef9b] {
+.hlw-popup--bottom[data-v-be12aee0] {
   left: 0;
   right: 0;
   bottom: 0;
   max-height: 80vh;
-  transform: translateY(100%);
+  animation: hlw-popup-slide-up-be12aee0 0.25s ease;
 }
-.hlw-popup--bottom.hlw-popup--show[data-v-2d71ef9b] {
-  transform: translateY(0);
-}
-.hlw-popup--bottom.hlw-popup--round[data-v-2d71ef9b] {
+.hlw-popup--bottom.hlw-popup--round[data-v-be12aee0] {
   border-radius: var(--radius-xl, 32rpx) var(--radius-xl, 32rpx) 0 0;
 }
-.hlw-popup--top[data-v-2d71ef9b] {
+.hlw-popup--top[data-v-be12aee0] {
   left: 0;
   right: 0;
   top: 0;
   max-height: 80vh;
-  transform: translateY(-100%);
-}
-.hlw-popup--top.hlw-popup--show[data-v-2d71ef9b] {
-  transform: translateY(0);
+  animation: hlw-popup-slide-down-be12aee0 0.25s ease;
 }
-.hlw-popup--top.hlw-popup--round[data-v-2d71ef9b] {
+.hlw-popup--top.hlw-popup--round[data-v-be12aee0] {
   border-radius: 0 0 var(--radius-xl, 32rpx) var(--radius-xl, 32rpx);
 }
-.hlw-popup--center[data-v-2d71ef9b] {
+.hlw-popup--center[data-v-be12aee0] {
   left: 50%;
   top: 50%;
   width: 80%;
-  transform: translate(-50%, -50%) scale(0.9);
-  opacity: 0;
+  transform: translate(-50%, -50%);
   border-radius: var(--radius-xl, 32rpx);
+  animation: hlw-popup-scale-in-be12aee0 0.22s ease;
 }
-.hlw-popup--center.hlw-popup--show[data-v-2d71ef9b] {
-  transform: translate(-50%, -50%) scale(1);
-  opacity: 1;
-}
-.hlw-popup-header[data-v-2d71ef9b] {
+.hlw-popup-header[data-v-be12aee0] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 28rpx 32rpx;
   border-bottom: 1rpx solid var(--border-color-light, #f1f5f9);
 }
-.hlw-popup-title[data-v-2d71ef9b] {
+.hlw-popup-title[data-v-be12aee0] {
   font-size: var(--font-md, 32rpx);
   font-weight: 600;
   color: #1e293b;
 }
-.hlw-popup-close[data-v-2d71ef9b] {
+.hlw-popup-close[data-v-be12aee0] {
   font-size: 32rpx;
   color: #94a3b8;
   line-height: 1;
   padding: 4rpx;
 }
-@keyframes hlw-fade-in-2d71ef9b {
+@keyframes hlw-fade-in-be12aee0 {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@keyframes hlw-popup-slide-up-be12aee0 {
+from {
+    transform: translateY(100%);
+}
+to {
+    transform: translateY(0);
+}
+}
+@keyframes hlw-popup-slide-down-be12aee0 {
+from {
+    transform: translateY(-100%);
+}
+to {
+    transform: translateY(0);
+}
+}
+@keyframes hlw-popup-scale-in-be12aee0 {
 from {
+    transform: translate(-50%, -50%) scale(0.92);
     opacity: 0;
 }
 to {
+    transform: translate(-50%, -50%) scale(1);
     opacity: 1;
 }
 }.hlw-search[data-v-4fe1bfab] {
@@ -933,74 +948,87 @@ to {
   border-radius: 6rpx;
   background: var(--primary-color, #3b82f6);
   transition: width 0.2s;
-}.hlw-tag[data-v-fd774288] {
+}.hlw-tag[data-v-a407a3ce] {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
+  vertical-align: middle;
   gap: 4rpx;
   font-weight: 500;
+  line-height: 1.2;
   border: 2rpx solid transparent;
+  box-sizing: border-box;
 }
-.hlw-tag--medium[data-v-fd774288] {
+.hlw-tag--medium[data-v-a407a3ce] {
+  min-height: 36rpx;
   padding: 4rpx 16rpx;
   font-size: var(--font-xs, 20rpx);
   border-radius: var(--radius-sm, 8rpx);
 }
-.hlw-tag--small[data-v-fd774288] {
+.hlw-tag--small[data-v-a407a3ce] {
+  min-height: 28rpx;
   padding: 2rpx 10rpx;
   font-size: 18rpx;
   border-radius: 6rpx;
 }
-.hlw-tag--round[data-v-fd774288] {
+.hlw-tag--round[data-v-a407a3ce] {
   border-radius: 999rpx;
 }
-.hlw-tag--primary[data-v-fd774288] {
+.hlw-tag--primary[data-v-a407a3ce] {
   background: var(--primary-color, #3b82f6);
   color: #fff;
   border-color: var(--primary-color, #3b82f6);
 }
-.hlw-tag--primary.hlw-tag--plain[data-v-fd774288] {
+.hlw-tag--primary.hlw-tag--plain[data-v-a407a3ce] {
   background: transparent;
   color: var(--primary-color, #3b82f6);
 }
-.hlw-tag--success[data-v-fd774288] {
+.hlw-tag--success[data-v-a407a3ce] {
   background: #10b981;
   color: #fff;
   border-color: #10b981;
 }
-.hlw-tag--success.hlw-tag--plain[data-v-fd774288] {
+.hlw-tag--success.hlw-tag--plain[data-v-a407a3ce] {
   background: transparent;
   color: #10b981;
 }
-.hlw-tag--warning[data-v-fd774288] {
+.hlw-tag--warning[data-v-a407a3ce] {
   background: #f59e0b;
   color: #fff;
   border-color: #f59e0b;
 }
-.hlw-tag--warning.hlw-tag--plain[data-v-fd774288] {
+.hlw-tag--warning.hlw-tag--plain[data-v-a407a3ce] {
   background: transparent;
   color: #f59e0b;
 }
-.hlw-tag--danger[data-v-fd774288] {
+.hlw-tag--danger[data-v-a407a3ce] {
   background: #ef4444;
   color: #fff;
   border-color: #ef4444;
 }
-.hlw-tag--danger.hlw-tag--plain[data-v-fd774288] {
+.hlw-tag--danger.hlw-tag--plain[data-v-a407a3ce] {
   background: transparent;
   color: #ef4444;
 }
-.hlw-tag--info[data-v-fd774288] {
+.hlw-tag--info[data-v-a407a3ce] {
   background: #64748b;
   color: #fff;
   border-color: #64748b;
 }
-.hlw-tag--info.hlw-tag--plain[data-v-fd774288] {
+.hlw-tag--info.hlw-tag--plain[data-v-a407a3ce] {
   background: transparent;
   color: #64748b;
 }
-.hlw-tag-close[data-v-fd774288] {
+.hlw-tag-text[data-v-a407a3ce] {
+  display: block;
+  line-height: 1.2;
+}
+.hlw-tag-close[data-v-a407a3ce] {
   font-size: 1em;
   line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   margin-left: 2rpx;
   opacity: 0.8;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "1.1.1",
+    "version": "1.1.3",
     "description": "hlw-uni Vue 组件库 — 供小程序业务方使用的 UI 组件集合",
     "main": "src/index.ts",
     "module": "src/index.ts",

package/src/components/hlw-modal/index.vue

@@ -1,14 +1,22 @@
 <template>
     <view v-if="show" class="hlw-modal-mask" @tap.self="onMask">
-        <view class="hlw-modal" :class="{ 'hlw-modal--show': show }">
+        <view class="hlw-modal" :class="{ 'hlw-modal--show': show }" @tap.stop>
             <view v-if="title" class="hlw-modal-title">{{ title }}</view>
             <view class="hlw-modal-body">
                 <slot />
             </view>
             <slot name="footer">
                 <view class="hlw-modal-footer">
-                    <view v-if="showCancel" class="hlw-modal-btn hlw-modal-btn--cancel" @tap="onCancel">{{ cancelText }}</view>
-                    <view class="hlw-modal-btn hlw-modal-btn--confirm" @tap="onConfirm">{{ confirmText }}</view>
+                    <view
+                        v-if="showCancel"
+                        class="hlw-modal-btn hlw-modal-btn--cancel"
+                        @tap.stop="onCancel"
+                    >
+                        {{ cancelText }}
+                    </view>
+                    <view class="hlw-modal-btn hlw-modal-btn--confirm" @tap.stop="onConfirm">
+                        {{ confirmText }}
+                    </view>
                 </view>
             </slot>
         </view>
@@ -16,36 +24,6 @@
 </template>
 
 <script setup lang="ts">
-/**
- * HlwModal — 模态弹窗
- *
- * 比 uni.showModal 更灵活：支持插槽自定义内容和底部按钮。
- * 使用 v-model:show 控制显隐。
- *
- * @props
- *   show        - 是否显示，支持 v-model:show
- *   title       - 标题文字
- *   showCancel  - 是否显示取消按钮，默认 true
- *   confirmText - 确认按钮文字，默认 "确定"
- *   cancelText  - 取消按钮文字，默认 "取消"
- *   closeOnMask - 点击蒙层是否关闭，默认 true
- *
- * @events
- *   update:show - 显隐状态变更
- *   confirm     - 点击确认
- *   cancel      - 点击取消
- *
- * @slots
- *   default - 弹窗内容
- *   footer  - 自定义底部按钮区域（覆盖默认确认/取消）
- *
- * @example
- * ```vue
- * <HlwModal v-model:show="visible" title="提示" @confirm="onOk">
- *   <text>确定要删除吗？</text>
- * </HlwModal>
- * ```
- */
 interface Props {
     show?: boolean;
     title?: string;
@@ -55,7 +33,7 @@ interface Props {
     closeOnMask?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
     show: false,
     title: "",
     showCancel: true,
@@ -71,6 +49,7 @@ function close() {
 }
 
 function onMask() {
+    if (!props.closeOnMask) return;
     close();
 }
 
@@ -140,6 +119,7 @@ function onCancel() {
         color: #64748b;
         border-right: 1rpx solid var(--border-color-light, #f1f5f9);
     }
+
     &--confirm {
         color: var(--primary-color, #3b82f6);
     }

package/src/components/hlw-page/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="hlw-page">
+    <view class="hlw-page" :style="themePageStyle">
         <view class="hlw-page-header">
             <slot name="header">
                 <hlw-header
@@ -16,6 +16,7 @@
             :enable-flex="true"
             :enhanced="true"
             :show-scrollbar="false"
+            :style="themePageStyle"
         >
             <slot></slot>
         </scroll-view>
@@ -26,6 +27,7 @@
 </template>
 
 <script setup lang="ts">
+import { useThemePageStyle } from "../../composables/theme";
 /**
  * HlwPage — 页面布局容器
  *
@@ -61,6 +63,8 @@ const props = withDefaults(defineProps<Props>(), {
     isBack: false,
     bgClass: "",
 });
+
+const { themePageStyle } = useThemePageStyle();
 </script>
 
 <style lang="scss" scoped>

package/src/components/hlw-popup/index.vue

@@ -1,12 +1,18 @@
 <template>
-    <view v-if="show" class="hlw-popup-mask" @tap.self="onClose" />
-    <view class="hlw-popup" :class="[`hlw-popup--${position}`, { 'hlw-popup--show': show, 'hlw-popup--round': round }]">
-        <view v-if="title || closable" class="hlw-popup-header">
-            <text class="hlw-popup-title">{{ title }}</text>
-            <view v-if="closable" class="hlw-popup-close i-fa6-solid-xmark" @tap="onClose" />
+    <template v-if="show">
+        <view class="hlw-popup-mask" @tap.self="onClose" />
+        <view
+            class="hlw-popup"
+            :class="[`hlw-popup--${position}`, { 'hlw-popup--round': round }]"
+            @tap.stop
+        >
+            <view v-if="title || closable" class="hlw-popup-header">
+                <text class="hlw-popup-title">{{ title }}</text>
+                <view v-if="closable" class="hlw-popup-close i-fa6-solid-xmark" @tap="onClose" />
+            </view>
+            <slot />
         </view>
-        <slot />
-    </view>
+    </template>
 </template>
 
 <script setup lang="ts">
@@ -47,16 +53,17 @@ function onClose() {
     position: fixed;
     z-index: 1001;
     background: #fff;
-    transition: transform 0.3s ease, opacity 0.3s ease;
 
     &--bottom {
         left: 0;
         right: 0;
         bottom: 0;
         max-height: 80vh;
-        transform: translateY(100%);
-        &.hlw-popup--show { transform: translateY(0); }
-        &.hlw-popup--round { border-radius: var(--radius-xl, 32rpx) var(--radius-xl, 32rpx) 0 0; }
+        animation: hlw-popup-slide-up 0.25s ease;
+
+        &.hlw-popup--round {
+            border-radius: var(--radius-xl, 32rpx) var(--radius-xl, 32rpx) 0 0;
+        }
     }
 
     &--top {
@@ -64,19 +71,20 @@ function onClose() {
         right: 0;
         top: 0;
         max-height: 80vh;
-        transform: translateY(-100%);
-        &.hlw-popup--show { transform: translateY(0); }
-        &.hlw-popup--round { border-radius: 0 0 var(--radius-xl, 32rpx) var(--radius-xl, 32rpx); }
+        animation: hlw-popup-slide-down 0.25s ease;
+
+        &.hlw-popup--round {
+            border-radius: 0 0 var(--radius-xl, 32rpx) var(--radius-xl, 32rpx);
+        }
     }
 
     &--center {
         left: 50%;
         top: 50%;
         width: 80%;
-        transform: translate(-50%, -50%) scale(0.9);
-        opacity: 0;
+        transform: translate(-50%, -50%);
         border-radius: var(--radius-xl, 32rpx);
-        &.hlw-popup--show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+        animation: hlw-popup-scale-in 0.22s ease;
     }
 }
 
@@ -105,4 +113,19 @@ function onClose() {
     from { opacity: 0; }
     to { opacity: 1; }
 }
+
+@keyframes hlw-popup-slide-up {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+}
+
+@keyframes hlw-popup-slide-down {
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+}
+
+@keyframes hlw-popup-scale-in {
+    from { transform: translate(-50%, -50%) scale(0.92); opacity: 0; }
+    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+}
 </style>

package/src/components/hlw-tag/index.vue

@@ -5,7 +5,7 @@
         :style="customStyle"
         @tap="$emit('click')"
     >
-        <slot />
+        <text class="hlw-tag-text"><slot /></text>
         <view v-if="closable" class="hlw-tag-close i-fa6-solid-xmark" @tap.stop="$emit('close')" />
     </view>
 </template>
@@ -53,12 +53,28 @@ $colors: (
 .hlw-tag {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
+    vertical-align: middle;
     gap: 4rpx;
     font-weight: 500;
+    line-height: 1.2;
     border: 2rpx solid transparent;
+    box-sizing: border-box;
+
+    &--medium {
+        min-height: 36rpx;
+        padding: 4rpx 16rpx;
+        font-size: var(--font-xs, 20rpx);
+        border-radius: var(--radius-sm, 8rpx);
+    }
+
+    &--small {
+        min-height: 28rpx;
+        padding: 2rpx 10rpx;
+        font-size: 18rpx;
+        border-radius: 6rpx;
+    }
 
-    &--medium { padding: 4rpx 16rpx; font-size: var(--font-xs, 20rpx); border-radius: var(--radius-sm, 8rpx); }
-    &--small { padding: 2rpx 10rpx; font-size: 18rpx; border-radius: 6rpx; }
     &--round { border-radius: 999rpx; }
 
     @each $name, $c in $colors {
@@ -67,9 +83,17 @@ $colors: (
     }
 }
 
+.hlw-tag-text {
+    display: block;
+    line-height: 1.2;
+}
+
 .hlw-tag-close {
     font-size: 1em;
     line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     margin-left: 2rpx;
     opacity: 0.8;
 }