@hlw-uni/mp-vue 2.1.32 → 2.1.34

package/package.json

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

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

@@ -90,7 +90,7 @@ interface Props {
     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, 1rpx);
+        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, 1rpx);
+        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, 1rpx);
+        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, 1rpx);
+        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, 1rpx);
+        border-left-style: var(--card-border-style, solid);
+        border-left-color: var(--card-border-color, #e2e8f0);
     }
 }
 

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

@@ -2,7 +2,7 @@
     <view class="hlw-card-header" :class="{ 'hlw-card-header--divider': divider }">
         <view class="hlw-card-header__left">
             <slot name="left">
-                <view v-if="icon" class="hlw-card-header__icon-box">
+                <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>
@@ -71,6 +71,21 @@ const slots = useSlots();
 
 const hasRight = computed(() => !!(slots.right || props.extra));
 
+const iconToneClass = computed(() => {
+    const value = props.icon;
+    if (value.includes("text-rose") || value.includes("text-red")) return "rose";
+    if (value.includes("text-emerald") || value.includes("text-green")) return "emerald";
+    if (value.includes("text-blue")) return "blue";
+    if (value.includes("text-sky")) return "sky";
+    if (value.includes("text-cyan")) return "cyan";
+    if (value.includes("text-purple")) return "purple";
+    if (value.includes("text-pink")) return "pink";
+    if (value.includes("text-yellow") || value.includes("text-amber")) return "amber";
+    return "indigo";
+});
+
+const iconBoxClass = computed(() => `hlw-card-header__icon-box--${iconToneClass.value}`);
+
 defineOptions({
     name: "HlwCardHeader",
 });
@@ -85,9 +100,6 @@ defineOptions({
     padding: 32rpx 24rpx;
     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 {
@@ -108,15 +120,49 @@ defineOptions({
     width: 56rpx;
     height: 56rpx;
     border-radius: var(--radius-md, 16rpx);
-    background: #eef2ff;
-    color: #6366f1;
     display: flex;
     align-items: center;
     justify-content: center;
+
+    &--indigo {
+        background: #eef2ff;
+    }
+
+    &--rose {
+        background: #fff1f2;
+    }
+
+    &--emerald {
+        background: #ecfdf5;
+    }
+
+    &--blue {
+        background: #eff6ff;
+    }
+
+    &--sky {
+        background: #f0f9ff;
+    }
+
+    &--cyan {
+        background: #ecfeff;
+    }
+
+    &--purple {
+        background: #faf5ff;
+    }
+
+    &--pink {
+        background: #fdf2f8;
+    }
+
+    &--amber {
+        background: #fffbeb;
+    }
 }
 
 .hlw-card-header__icon {
-    font-size: 22rpx;
+    font-size: 20rpx;
 }
 
 .hlw-card-header__title {