@hlw-uni/mp-vue 2.3.9 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "2.3.9",
+    "version": "2.5.1",
     "description": "hlw-uni工具集",
     "main": "dist/index.js",
     "module": "dist/index.mjs",

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

@@ -86,12 +86,12 @@ const initial = computed(() => {
 }
 
 .hlw-avatar--small .hlw-avatar__initial {
-    font-size: var(--font-xs, 20rpx);
+    font-size: var(--font-xs, 22rpx);
 }
 .hlw-avatar--medium .hlw-avatar__initial {
-    font-size: var(--font-base, 28rpx);
+    font-size: var(--font-base, 30rpx);
 }
 .hlw-avatar--large .hlw-avatar__initial {
-    font-size: var(--font-xl, 40rpx);
+    font-size: var(--font-xl, 42rpx);
 }
 </style>

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

@@ -209,21 +209,21 @@ $semantic-colors: (
     &--small {
         min-height: 56rpx;
         padding: 12rpx 20rpx;
-        font-size: var(--font-xs, 20rpx);
+        font-size: var(--font-xs, 22rpx);
         border-radius: var(--radius-sm, 8rpx);
     }
 
     &--medium {
         min-height: 72rpx;
         padding: 18rpx 32rpx;
-        font-size: var(--font-sm, 24rpx);
+        font-size: var(--font-sm, 26rpx);
         border-radius: var(--radius-md, 16rpx);
     }
 
     &--large {
         min-height: 88rpx;
         padding: 22rpx 48rpx;
-        font-size: var(--font-base, 28rpx);
+        font-size: var(--font-base, 30rpx);
         border-radius: var(--radius-md, 16rpx);
     }
 

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

@@ -164,7 +164,7 @@ const showDivider = computed(() => {
     &--radius-none { border-radius: 0; }
     &--radius-sm   { border-radius: var(--radius-sm, 8rpx); }
     &--radius-md   { border-radius: var(--radius-md, 16rpx); }
-    &--radius-lg   { border-radius: var(--radius-lg, 24rpx); }
+    &--radius-lg   { border-radius: var(--radius-lg, 30rpx); }
     &--radius-xl   { border-radius: var(--radius-xl, 32rpx); }
 
     /* 边框 — width / style / color 全部走 CSS 变量，未设置时回落 */

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

@@ -102,13 +102,13 @@ defineEmits<{ click: [] }>();
 }
 
 .hlw-cell-icon {
-    font-size: var(--font-lg, 36rpx);
+    font-size: var(--font-lg, 38rpx);
     color: var(--primary-color, #3b82f6);
     flex-shrink: 0;
 
     view {
-        width: var(--font-lg, 36rpx);
-        height: var(--font-lg, 36rpx);
+        width: var(--font-lg, 38rpx);
+        height: var(--font-lg, 38rpx);
         display: inline-block;
     }
 }
@@ -122,18 +122,18 @@ defineEmits<{ click: [] }>();
 }
 
 .hlw-cell-title {
-    font-size: var(--font-base, 28rpx);
+    font-size: var(--font-base, 30rpx);
     color: #1e293b;
 }
 
 .hlw-cell-label {
-    font-size: var(--font-xs, 20rpx);
+    font-size: var(--font-xs, 22rpx);
     color: #94a3b8;
     margin-top: 4rpx;
 }
 
 .hlw-cell-value {
-    font-size: var(--font-sm, 24rpx);
+    font-size: var(--font-sm, 26rpx);
     color: #94a3b8;
     flex-shrink: 0;
 }

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

@@ -50,7 +50,7 @@ defineProps<{
 }
 
 .hlw-empty__text {
-    font-size: var(--font-base, 28rpx);
+    font-size: var(--font-base, 30rpx);
     color: #bbb;
 }
 </style>

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

@@ -206,12 +206,12 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
 
 <style lang="scss" scoped>
 .hlw-menu {
-    --hlw-menu-icon-size: var(--font-md, 32rpx);
+    --hlw-menu-icon-size: var(--font-md, 34rpx);
     --hlw-menu-icon-box-size: var(--hlw-menu-icon-size);
-    --hlw-menu-grid-icon-size: var(--font-xl, 40rpx);
+    --hlw-menu-grid-icon-size: var(--font-xl, 42rpx);
     --hlw-menu-grid-icon-box-size: calc(var(--hlw-menu-grid-icon-size) + 52rpx);
     background: var(--surface-card, #ffffff);
-    border-radius: var(--radius-lg, 24rpx);
+    border-radius: var(--radius-lg, 30rpx);
     border: 1rpx solid var(--border-color-light, #ececec);
     overflow: hidden;
     width: 100%;
@@ -225,7 +225,7 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
 .hlw-menu-title {
     padding: 24rpx 32rpx;
     text {
-        font-size: var(--font-sm, 24rpx);
+        font-size: var(--font-sm, 26rpx);
         font-weight: 600;
         color: var(--text-subtle, #94a3b8);
         letter-spacing: 1rpx;
@@ -318,7 +318,7 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
     position: absolute;
     top: 0;
     right: -8rpx;
-    font-size: var(--font-xs, 20rpx);
+    font-size: var(--font-xs, 22rpx);
     color: #fff;
     padding: 0 8rpx;
     border-radius: 9999rpx;
@@ -329,7 +329,7 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
 }
 
 .hlw-menu-grid-label {
-    font-size: var(--font-sm, 24rpx);
+    font-size: var(--font-sm, 26rpx);
     color: var(--text-secondary, #334155);
     text-align: center;
 }
@@ -402,12 +402,12 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
 }
 
 .hlw-menu-value {
-    font-size: var(--font-sm, 24rpx);
+    font-size: var(--font-sm, 26rpx);
     color: var(--text-subtle, #94a3b8);
 }
 
 .hlw-menu-tag {
-    font-size: var(--font-xs, 20rpx);
+    font-size: var(--font-xs, 22rpx);
     color: #fff;
     padding: 2rpx 12rpx;
     border-radius: 9999rpx;
@@ -446,14 +446,14 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
 
 .hlw-menu-arrow {
     color: var(--text-disabled, #d1d5db);
-    font-size: var(--font-sm, 24rpx);
+    font-size: var(--font-sm, 26rpx);
 }
 .hlw-menu-spin {
     animation: icon-spin 1s linear infinite;
 }
 .hlw-menu-muted {
     color: var(--text-subtle, #94a3b8);
-    font-size: var(--font-sm, 24rpx);
+    font-size: var(--font-sm, 26rpx);
 }
 
 @keyframes icon-spin {

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

@@ -91,13 +91,13 @@ function onCancel() {
 .hlw-modal-title {
     padding: 40rpx 32rpx 0;
     text-align: center;
-    font-size: var(--font-md, 32rpx);
+    font-size: var(--font-md, 34rpx);
     font-weight: 600;
     color: var(--text-primary, #1e293b);
 }
 
 .hlw-modal-body {
-    font-size: var(--font-base, 28rpx);
+    font-size: var(--font-base, 30rpx);
     color: var(--text-secondary, #475569);
     text-align: center;
     line-height: 1.6;
@@ -112,7 +112,7 @@ function onCancel() {
     flex: 1;
     padding: 24rpx 0;
     text-align: center;
-    font-size: var(--font-base, 28rpx);
+    font-size: var(--font-base, 30rpx);
     font-weight: 500;
 
     &:active { background: var(--surface-card-muted, #f8fafc); }

package/src/components/hlw-nav-bar/index.vue

@@ -161,7 +161,7 @@ function tapBack() {
         }
 
         .title {
-            font-size: var(--navbar-font-size, var(--font-md, 32rpx));
+            font-size: var(--navbar-font-size, var(--font-md, 34rpx));
             font-family: var(--navbar-font-family, inherit);
             letter-spacing: 3rpx;
             font-weight: 500;

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

@@ -111,7 +111,7 @@ function confirmNickname() {
 .nickname-dialog {
     width: 600rpx;
     padding: 40rpx;
-    border-radius: 24rpx;
+    border-radius: var(--radius-lg, 30rpx);
     background: #ffffff;
     box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.25);
     animation: scaleIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -121,7 +121,7 @@ function confirmNickname() {
     margin-bottom: 30rpx;
     color: #1e293b;
     text-align: center;
-    font-size: 32rpx;
+    font-size: var(--font-md, 34rpx);
     font-weight: 600;
     letter-spacing: 1rpx;
 }
@@ -130,7 +130,7 @@ function confirmNickname() {
     margin-bottom: 40rpx;
     padding: 20rpx 24rpx;
     border: 2rpx solid #e2e8f0;
-    border-radius: 16rpx;
+    border-radius: var(--radius-md, 16rpx);
     background: #f8fafc;
 }
 
@@ -138,7 +138,7 @@ function confirmNickname() {
     width: 100%;
     height: 48rpx;
     color: #1e293b;
-    font-size: 28rpx;
+    font-size: var(--font-base, 30rpx);
     text-align: left;
 }
 
@@ -154,9 +154,9 @@ function confirmNickname() {
     justify-content: center;
     height: 80rpx;
     margin: 0;
-    font-size: 28rpx;
+    font-size: var(--font-base, 30rpx);
     font-weight: 500;
-    border-radius: 16rpx;
+    border-radius: var(--radius-md, 16rpx);
 }
 
 .dialog-btn::after {

package/src/components/hlw-notice-bar/index.vue

@@ -75,12 +75,12 @@ function onClose() {
     align-items: center;
     padding: 16rpx 24rpx;
     gap: 12rpx;
-    font-size: var(--font-sm, 24rpx);
+    font-size: var(--font-sm, 26rpx);
 }
 
 .hlw-notice-left-icon {
     flex-shrink: 0;
-    font-size: var(--font-base, 28rpx);
+    font-size: var(--font-base, 30rpx);
 }
 
 .hlw-notice-wrap {
@@ -109,7 +109,7 @@ function onClose() {
 
 .hlw-notice-close {
     flex-shrink: 0;
-    font-size: 28rpx;
+    font-size: var(--font-base, 30rpx);
     line-height: 1;
     opacity: 0.6;
     padding: 4rpx;

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

@@ -213,7 +213,7 @@ function onCancel() {
 
 .hlw-notice-btn-text {
     color: #ffffff;
-    font-size: var(--font-base, 28rpx);
+    font-size: var(--font-base, 30rpx);
     font-weight: 600;
     letter-spacing: 1rpx;
 }
@@ -231,7 +231,7 @@ function onCancel() {
 }
 
 .hlw-notice-dismiss-text {
-    font-size: var(--font-xs, 24rpx);
+    font-size: var(--font-xs, 26rpx);
     color: var(--text-muted, #8e8e93);
     font-weight: 500;
 }

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

@@ -1,5 +1,5 @@
 <template>
-    <view :class="[fontSizeClass, fontFamilyClass]" :style="pageStyle">
+    <view class="hlw-page-container" :class="[fontSizeClass, fontFamilyClass]" :style="pageStyle">
         <hlw-nav-bar v-if="props.isNav" 
                      :is-back="props.isBack" 
                      :title="title" 
@@ -10,8 +10,29 @@
                      :title-weight="props.titleWeight"
                      :border="props.border">
         </hlw-nav-bar>
-        <slot></slot>
-        <view class="h-[60rpx]"></view>
+
+        <!-- 上插槽 -->
+        <view class="hlw-page-top">
+            <slot name="top"></slot>
+        </view>
+
+        <!-- 内容插槽 scroll-view -->
+        <scroll-view 
+            class="hlw-page-content"
+            scroll-y
+            :refresher-enabled="props.refresherEnabled"
+            :refresher-triggered="props.refresherTriggered"
+            @refresherrefresh="onRefresh"
+            @scrolltolower="onScrollToLower"
+        >
+            <slot></slot>
+            <view class="h-[60rpx]"></view>
+        </scroll-view>
+
+        <!-- 下插槽 -->
+        <view class="hlw-page-bottom">
+            <slot name="bottom"></slot>
+        </view>
     </view>
 </template>
 
@@ -32,16 +53,25 @@
  *   titleStyle  - 标题字体样式
  *   titleWeight - 标题字重
  *   border      - 是否显示自定义导航栏的下边框（下划线），默认 true
+ *   refresherEnabled    - 是否开启下拉刷新，默认 false
+ *   refresherTriggered  - 设置当前下拉刷新状态，true 表示下拉刷新已被触发，false 表示下拉刷新未被触发
  *
  * @example
  * ```vue
  * <hlw-page is-nav is-back title="个人中心">
- *     <view>页面内容...</view>
+ *     <template #top>
+ *         <view>固定在顶部的内容...</view>
+ *     </template>
+ *     <view>滚动的内容...</view>
+ *     <template #bottom>
+ *         <view>固定在底部的内容...</view>
+ *     </template>
  * </hlw-page>
  * ```
  */
 import { useTheme } from "@/core";
 import { ref, computed } from "vue";
+
 const { fontSizeClass, fontFamilyClass } = useTheme();
 
 const props = defineProps({
@@ -80,9 +110,19 @@ const props = defineProps({
     border: {
         type: Boolean,
         default: true,
+    },
+    refresherEnabled: {
+        type: Boolean,
+        default: false,
+    },
+    refresherTriggered: {
+        type: Boolean,
+        default: false,
     }
 });
 
+const emit = defineEmits(["refresh", "scrolltolower"]);
+
 const title = ref(props.title);
 
 const navbarHeight = computed(() => {
@@ -105,44 +145,75 @@ const pageStyle = computed(() => {
         "--navbar-height": `${navbarHeight.value}px`,
     };
 });
+
+function onRefresh() {
+    emit("refresh");
+}
+
+function onScrollToLower() {
+    emit("scrolltolower");
+}
 </script>
 
 <style lang="scss">
+.hlw-page-container {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+
+.hlw-page-top {
+    flex-shrink: 0;
+}
+
+.hlw-page-content {
+    flex: 1;
+    height: 0;
+    min-height: 0;
+    width: 100%;
+}
+
+.hlw-page-bottom {
+    flex-shrink: 0;
+}
+
 /* 全局系统字体大小缩放配置 */
 .font-size-small {
-    --font-xs: 18rpx;
-    --font-sm: 22rpx;
-    --font-base: 24rpx;
-    --font-md: 28rpx;
-    --font-lg: 32rpx;
-    --font-xl: 36rpx;
+    --font-xs: 20rpx;
+    --font-sm: 24rpx;
+    --font-base: 26rpx;
+    --font-md: 30rpx;
+    --font-lg: 34rpx;
+    --font-xl: 38rpx;
 }
 
 .font-size-standard {
-    --font-xs: 20rpx;
-    --font-sm: 24rpx;
-    --font-base: 28rpx;
-    --font-md: 32rpx;
-    --font-lg: 36rpx;
-    --font-xl: 40rpx;
+    --font-xs: 22rpx;
+    --font-sm: 26rpx;
+    --font-base: 30rpx;
+    --font-md: 34rpx;
+    --font-lg: 38rpx;
+    --font-xl: 42rpx;
 }
 
 .font-size-large {
-    --font-xs: 22rpx;
-    --font-sm: 28rpx;
-    --font-base: 32rpx;
-    --font-md: 36rpx;
-    --font-lg: 40rpx;
-    --font-xl: 44rpx;
+    --font-xs: 24rpx;
+    --font-sm: 30rpx;
+    --font-base: 34rpx;
+    --font-md: 38rpx;
+    --font-lg: 42rpx;
+    --font-xl: 46rpx;
 }
 
 .font-size-extra-large {
-    --font-xs: 24rpx;
-    --font-sm: 32rpx;
-    --font-base: 36rpx;
-    --font-md: 40rpx;
-    --font-lg: 44rpx;
-    --font-xl: 48rpx;
+    --font-xs: 26rpx;
+    --font-sm: 34rpx;
+    --font-base: 38rpx;
+    --font-md: 42rpx;
+    --font-lg: 46rpx;
+    --font-xl: 50rpx;
 }
 
 /* 全局字体样式配置 */

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

@@ -120,13 +120,13 @@ function onClose() {
 }
 
 .hlw-popup-title {
-    font-size: var(--font-md, 32rpx);
+    font-size: var(--font-md, 34rpx);
     font-weight: 600;
     color: #1e293b;
 }
 
 .hlw-popup-close {
-    font-size: 32rpx;
+    font-size: var(--font-md, 34rpx);
     color: #94a3b8;
     line-height: 1;
     padding: 4rpx;

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

@@ -98,20 +98,20 @@ function onClear() {
 }
 
 .hlw-search-icon {
-    font-size: var(--font-sm, 24rpx);
+    font-size: var(--font-sm, 26rpx);
     flex-shrink: 0;
     opacity: 0.5;
 }
 
 .hlw-search-input {
     flex: 1;
-    font-size: var(--font-sm, 24rpx);
+    font-size: var(--font-sm, 26rpx);
     color: #1e293b;
     min-height: 40rpx;
 }
 
 .hlw-search-clear {
-    font-size: 28rpx;
+    font-size: var(--font-base, 30rpx);
     color: #94a3b8;
     line-height: 1;
     flex-shrink: 0;

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

@@ -211,7 +211,7 @@ onBeforeUnmount(() => {
 }
 
 .hlw-sheet-title {
-    font-size: var(--font-md, 32rpx);
+    font-size: var(--font-md, 34rpx);
     font-weight: 700;
     color: var(--text-primary, #0f172a);
 }
@@ -228,7 +228,7 @@ onBeforeUnmount(() => {
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: var(--font-sm, 24rpx);
+    font-size: var(--font-sm, 26rpx);
     transition: background 0.2s ease;
 
     &:active {
@@ -265,7 +265,7 @@ onBeforeUnmount(() => {
 }
 
 .hlw-sheet-cta-text {
-    font-size: var(--font-sm, 24rpx);
+    font-size: var(--font-sm, 26rpx);
     font-weight: 400;
     color: #ffffff;
     letter-spacing: 0.5rpx;

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

@@ -118,7 +118,7 @@ function onChange(index: number) {
 }
 
 .hlw-tab-text {
-    font-size: var(--font-base, 28rpx);
+    font-size: var(--font-base, 30rpx);
     color: #64748b;
     transition: color 0.2s;
 }

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

@@ -87,7 +87,7 @@ $colors: (
     &--medium {
         min-height: 36rpx;
         padding: 4rpx 16rpx;
-        font-size: var(--font-xs, 20rpx);
+        font-size: var(--font-xs, 22rpx);
         border-radius: var(--radius-sm, 8rpx);
     }