@hlw-uni/mp-vue 2.1.33 → 2.1.35

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "2.1.33",
+    "version": "2.1.35",
     "description": "hlw-uni 小程序运行时 — Vue 组件 + composables + theme + http + 工具集（合并自原 mp-core）",
     "main": "dist/index.js",
     "module": "dist/index.mjs",

package/src/components/hlw-back-top/index.vue

@@ -113,7 +113,6 @@ defineOptions({
     align-items: center;
     justify-content: center;
     color: var(--text-secondary, #475569);
-    box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.12);
 }
 
 .hlw-back-top--hover {

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

@@ -425,18 +425,18 @@ defineOptions({
 /* 浮动触发按钮 */
 .trigger {
     position: fixed;
-    right: 30rpx;
+    right: 32rpx;
     bottom: 40rpx;
     z-index: 100;
     width: 66rpx;
     height: 66rpx;
-    background: #1e293b;
-    color: #ffffff;
+    background: rgba(248, 250, 252, 0.96);
+    color: #64748b;
     border-radius: 50%;
+    border: 1rpx solid rgba(148, 163, 184, 0.32);
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.24);
 }
 
 .trigger--hover {
@@ -544,12 +544,11 @@ defineOptions({
     bottom: 50rpx;
     padding: 16rpx 26rpx;
     background: rgba(255, 255, 255, 0.96);
-    border-radius: 10rpx;
+    border-radius: 16rpx;
     display: flex;
     flex-direction: column;
     gap: 12rpx;
     pointer-events: auto;
-    box-shadow: 0 8rpx 32rpx rgba(15, 23, 42, 0.18);
 }
 
 /* 模式行 */

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

@@ -84,13 +84,13 @@ interface Props {
     borderColor?: string;
     /** 边框线型：solid（默认）/ dashed / dotted / double */
     borderStyle?: "solid" | "dashed" | "dotted" | "double";
-    /** 边框宽度，CSS 长度值，默认 `1rpx` */
+    /** 边框宽度，CSS 长度值，默认 `0.5rpx` */
     borderWidth?: string;
     /** 圆角大小，对应 CSS 变量体系 */
     radius?: "none" | "sm" | "md" | "lg" | "xl";
     /** 头部与内容之间是否显示虚线分隔，有 #header slot 时默认 true */
     divider?: boolean;
-    /** body 是否有内边距，默认 true */
+    /** body 是否有内边距，默认 false */
     padding?: boolean;
 }
 
@@ -101,7 +101,7 @@ const props = withDefaults(defineProps<Props>(), {
     borderWidth: "",
     radius: "xl",
     divider: undefined,
-    padding: true,
+    padding: false,
 });
 
 const rootStyle = computed<Record<string, string>>(() => {
@@ -156,6 +156,7 @@ const showDivider = computed(() => {
 <style lang="scss" scoped>
 .hlw-card {
     width: 100%;
+    position: relative;
     background: #fff;
     overflow: hidden;
 
@@ -168,36 +169,31 @@ const showDivider = computed(() => {
 
     /* 边框 — width / style / color 全部走 CSS 变量，未设置时回落 */
     &--bordered {
-        border:
-            var(--card-border-width, 1rpx)
-            var(--card-border-style, solid)
-            var(--card-border-color, var(--border-color, #e2e8f0));
+        border-width: var(--card-border-width, 0.5rpx);
+        border-style: var(--card-border-style, solid);
+        border-color: var(--card-border-color, #e2e8f0);
     }
 
     /* 边框 — 单边 */
     &--border-top {
-        border-top:
-            var(--card-border-width, 1rpx)
-            var(--card-border-style, solid)
-            var(--card-border-color, var(--border-color, #e2e8f0));
+        border-top-width: var(--card-border-width, 0.5rpx);
+        border-top-style: var(--card-border-style, solid);
+        border-top-color: var(--card-border-color, #e2e8f0);
     }
     &--border-right {
-        border-right:
-            var(--card-border-width, 1rpx)
-            var(--card-border-style, solid)
-            var(--card-border-color, var(--border-color, #e2e8f0));
+        border-right-width: var(--card-border-width, 0.5rpx);
+        border-right-style: var(--card-border-style, solid);
+        border-right-color: var(--card-border-color, #e2e8f0);
     }
     &--border-bottom {
-        border-bottom:
-            var(--card-border-width, 1rpx)
-            var(--card-border-style, solid)
-            var(--card-border-color, var(--border-color, #e2e8f0));
+        border-bottom-width: var(--card-border-width, 0.5rpx);
+        border-bottom-style: var(--card-border-style, solid);
+        border-bottom-color: var(--card-border-color, #e2e8f0);
     }
     &--border-left {
-        border-left:
-            var(--card-border-width, 1rpx)
-            var(--card-border-style, solid)
-            var(--card-border-color, var(--border-color, #e2e8f0));
+        border-left-width: var(--card-border-width, 0.5rpx);
+        border-left-style: var(--card-border-style, solid);
+        border-left-color: var(--card-border-color, #e2e8f0);
     }
 }
 

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

@@ -1,16 +1,20 @@
 <template>
-    <view class="hlw-card-header" :class="{ 'hlw-card-header--divider': divider }">
+    <view
+        class="hlw-card-header"
+        :class="{ 'hlw-card-header--divider': divider }"
+        :style="headerStyle"
+    >
         <view class="hlw-card-header__left">
             <slot name="left">
                 <view v-if="icon" class="hlw-card-header__icon-box" :class="iconBoxClass">
                     <text class="hlw-card-header__icon" :class="icon" />
                 </view>
-                <text v-if="title" class="hlw-card-header__title">{{ title }}</text>
+                <text v-if="title" class="hlw-card-header__title" :style="titleStyle">{{ title }}</text>
             </slot>
         </view>
         <view v-if="hasRight" class="hlw-card-header__right">
             <slot name="right">
-                <text v-if="extra" class="hlw-card-header__extra">{{ extra }}</text>
+                <text v-if="descText" class="hlw-card-header__desc" :style="descStyle">{{ descText }}</text>
             </slot>
         </view>
     </view>
@@ -27,7 +31,7 @@ import { computed, useSlots } from "vue";
  * @example A. 直接当 <hlw-card> 的 default slot 子元素（注意把 hlw-card 的 padding 关掉，否则会双重 padding）
  * ```vue
  * <hlw-card :padding="false">
- *     <hlw-card-header title="标题" icon="i-fa6-solid-heart-pulse text-rose-500" extra="副标题" />
+ *     <hlw-card-header title="标题" icon="i-fa6-solid-heart-pulse text-rose-500" desc="副标题" />
  *     <view style="padding: 24rpx 28rpx">body</view>
  * </hlw-card>
  * ```
@@ -36,7 +40,7 @@ import { computed, useSlots } from "vue";
  * ```vue
  * <hlw-card>
  *     <template #header>
- *         <hlw-card-header title="标题" icon="i-fa6-solid-star" extra="副标题" />
+ *         <hlw-card-header title="标题" icon="i-fa6-solid-star" desc="副标题" />
  *     </template>
  *     body
  * </hlw-card>
@@ -54,22 +58,62 @@ interface Props {
     title?: string;
     /** 图标 class（iconify 或自定义），如 `"i-fa6-solid-heart-pulse text-rose-500"` */
     icon?: string;
-    /** 右侧附加文字（无 right slot 时显示） */
+    /** 右侧描述文字（无 right slot 时显示） */
+    desc?: string;
+    /** @deprecated 请使用 desc */
     extra?: string;
+    /** 标题字号，支持 CSS 变量，如 `var(--font-md)` */
+    titleSize?: string;
+    /** 标题颜色 */
+    titleColor?: string;
+    /** 标题字重 */
+    titleWeight?: string | number;
+    /** 描述字号，支持 CSS 变量，如 `var(--font-xs)` */
+    descSize?: string;
+    /** 描述颜色 */
+    descColor?: string;
+    /** 描述字重 */
+    descWeight?: string | number;
     /** 是否在头部底部显示虚线分隔线，默认 false。线型由 CSS 变量 `--card-header-divider-style`（默认 dashed）控制 */
     divider?: boolean;
+    /** 头部背景色，如 `#f8fafc` / `rgba(248, 250, 252, 0.3)` */
+    bgColor?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     title: "",
     icon: "",
+    desc: "",
     extra: "",
+    titleSize: "var(--font-30)",
+    titleColor: "",
+    titleWeight: "",
+    descSize: "var(--font-xs)",
+    descColor: "",
+    descWeight: "",
     divider: false,
+    bgColor: "",
 });
 
 const slots = useSlots();
 
-const hasRight = computed(() => !!(slots.right || props.extra));
+const descText = computed(() => props.desc || props.extra);
+
+const hasRight = computed(() => !!(slots.right || descText.value));
+
+const headerStyle = computed(() => (props.bgColor ? { backgroundColor: props.bgColor } : {}));
+
+const titleStyle = computed(() => ({
+    fontSize: props.titleSize,
+    ...(props.titleColor ? { color: props.titleColor } : {}),
+    ...(props.titleWeight ? { fontWeight: String(props.titleWeight) } : {}),
+}));
+
+const descStyle = computed(() => ({
+    fontSize: props.descSize,
+    ...(props.descColor ? { color: props.descColor } : {}),
+    ...(props.descWeight ? { fontWeight: String(props.descWeight) } : {}),
+}));
 
 const iconToneClass = computed(() => {
     const value = props.icon;
@@ -97,12 +141,9 @@ defineOptions({
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 32rpx 24rpx;
+    padding: 26rpx 26rpx;
     box-sizing: border-box;
 
-    &--divider {
-        border-bottom: var(--card-header-divider-width, 1rpx) var(--card-header-divider-style, dashed) var(--card-header-divider-color, var(--border-color, #e2e8f0));
-    }
 }
 
 .hlw-card-header__left {
@@ -165,22 +206,22 @@ defineOptions({
 }
 
 .hlw-card-header__icon {
-    font-size: 20rpx;
+    font-size: var(--font-xs);
 }
 
 .hlw-card-header__title {
-    font-size: 30rpx;
+    font-size: var(--font-base);
     font-weight: 500;
     color: var(--text-primary, #1e293b);
     letter-spacing: 1rpx;
 }
 
-.hlw-card-header__extra {
+.hlw-card-header__desc {
     padding: 4rpx 16rpx;
     border-radius: var(--radius-sm, 8rpx);
     background: rgba(241, 245, 249, 0.8);
     color: var(--text-muted, #64748b);
-    font-size: 20rpx;
+    font-size: var(--font-xs);
     font-weight: 400;
 }
 </style>