@hlw-uni/mp-vue 2.1.59 → 2.1.69

package/src/components/hlw-add-mini/index.vue

@@ -1,137 +1,207 @@
 <template>
-	<view v-if="props.show" class="hlw-add-mini" :style="{ top }">
-		<view class="hlw-add-mini__arrow" />
-		<view class="hlw-add-mini__content">
-			<view class="hlw-add-mini__text">
-				<view class="hlw-add-mini__title">{{ props.title }}</view>
-				<view v-if="props.desc" class="hlw-add-mini__desc">{{ props.desc }}</view>
-			</view>
-			<view class="hlw-add-mini__close" @tap="close">×</view>
-		</view>
-	</view>
+    <view v-if="props.show" class="hlw-add-mini" :style="{ top }">
+        <view class="hlw-add-mini__arrow" :style="arrowStyle" />
+        <view class="hlw-add-mini__content">
+            <view class="hlw-add-mini__text">
+                <view class="hlw-add-mini__title">{{ props.title }}</view>
+                <view v-if="props.desc" class="hlw-add-mini__desc">{{ props.desc }}</view>
+            </view>
+            <view class="hlw-add-mini__close" @tap="close">×</view>
+        </view>
+    </view>
 </template>
 
 <script setup lang="ts">
 /**
  * HlwAddMini - 添加小程序提示气泡组件
- * 
+ *
  * 用于提示用户点击右上角将当前小程序“添加到我的小程序”中，以提升用户留存。
  * 会根据是否为自定义导航栏（custom），自动调整气泡浮动位置（避开胶囊按钮与状态栏）。
  */
-import { computed } from "vue";
+import { computed, ref, onMounted } from "vue";
 import { useDevice } from "../../composables/device";
 
 defineOptions({ name: "HlwAddMini" });
 
 interface Props {
-	/** 是否显示提示气泡 */
-	show?: boolean;
-	/** 页面导航栏样式：default (系统默认) | custom (自定义导航) */
-	navigationStyle?: "default" | "custom";
-	/** 气泡主标题文字 */
-	title?: string;
-	/** 气泡副标题/描述文字 */
-	desc?: string;
+    /** 是否显示提示气泡 */
+    show?: boolean;
+    /** 气泡主标题文字 */
+    title?: string;
+    /** 气泡副标题/描述文字 */
+    desc?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-	show: false,
-	navigationStyle: "default",
-	title: "添加到我的小程序",
-	desc: "点击右上角 ··· 添加",
+    show: false,
+    title: "添加到我的小程序",
+    desc: "点击右上角 ··· 添加",
 });
 
 const emit = defineEmits<{
-	/** 点击关闭按钮时触发 */
-	close: []
+    /** 点击关闭按钮时触发 */
+    close: [];
 }>();
 
 // 从 useDevice 获取缓存的设备系统信息，规避在 computed 中频繁调用同步系统 API 的性能问题
 const { info } = useDevice();
 
-const top = computed(() =>
-	props.navigationStyle === "custom" ? `${info.status_bar_height + 48}px` : "12px"
-);
+const isCustomNav = ref(false);
+
+onMounted(() => {
+    // 1. 全局配置探测（针对全局自定义导航样式，可立即识别，免去生命周期时序竞态问题）
+    try {
+        if (typeof __wxConfig !== "undefined") {
+            // @ts-ignore
+            const globalStyle = __wxConfig.globalStyle?.navigationStyle || __wxConfig.global?.window?.navigationStyle;
+            if (globalStyle === "custom") {
+                isCustomNav.value = true;
+                return;
+            }
+        }
+    } catch (e) {
+        // 容错
+    }
+
+    // 2. 延迟探测（避开组件挂载时 getCurrentPages 尚未完全初始化的竞态，并且使用非破坏性读取）
+    setTimeout(() => {
+        try {
+            const pages = getCurrentPages();
+            if (pages && pages.length > 0) {
+                const page = pages[pages.length - 1];
+                // @ts-ignore - 微信小程序原生属性或 uni-app 底层元数据配置
+                const style = page.__wxConfig?.navigationStyle || page?.$page?.meta?.navigationStyle;
+                if (style === "custom") {
+                    isCustomNav.value = true;
+                }
+            }
+        } catch (e) {
+            // 容错
+        }
+    }, 100);
+});
+
+const top = computed(() => {
+    if (isCustomNav.value) {
+        try {
+            const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+            if (menuButtonInfo && menuButtonInfo.bottom > 0) {
+                // 胶囊底部高度 + 16px 作为气泡定位的顶部基准，保证指向绝对精确且避开胶囊
+                return `${menuButtonInfo.bottom + 16}px`;
+            }
+        } catch (e) {
+            // 跨端环境不支持或报错时，执行安全降级计算
+        }
+        return `${info.status_bar_height + 50}px`;
+    }
+    return "12px";
+});
+
+const arrowStyle = computed(() => {
+    try {
+        const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+        if (menuButtonInfo && menuButtonInfo.width > 0) {
+            // 胶囊左边缘 + 胶囊宽度的 28% (即三点按钮的中心点)
+            const dotsCenterX = menuButtonInfo.left + menuButtonInfo.width * 0.28;
+            // 屏幕宽度 - 胶囊三点中心点 = 三点中心点到屏幕右边缘的像素距离
+            const arrowRightPx = info.window_width - dotsCenterX;
+            // 气泡右边缘到屏幕右边缘的像素距离 (22rpx)
+            const bubbleRightPx = uni.upx2px(22);
+            // 箭头相对于气泡右侧边缘的像素偏移 (再减去箭头自身半宽 12rpx 对应的 px 像素)
+            const arrowHalfWidthPx = uni.upx2px(12);
+            const rightOffset = arrowRightPx - bubbleRightPx - arrowHalfWidthPx;
+
+            return {
+                right: `${rightOffset}px`,
+            };
+        }
+    } catch (e) {
+        // 容错降级
+    }
+    return {};
+});
 
 /**
  * 触发关闭气泡事件。
  */
 function close() {
-	emit("close");
+    emit("close");
 }
 </script>
 
 <style lang="scss" scoped>
 .hlw-add-mini {
-	position: fixed;
-	right: 22rpx;
-	z-index: 32;
-	width: 340rpx;
-	animation: hlw-add-mini-in 0.22s ease-out both;
+    position: fixed;
+    right: 22rpx;
+    z-index: 99999;
+    width: 340rpx;
+    animation: hlw-add-mini-in 0.22s ease-out both;
 }
 
 .hlw-add-mini__arrow {
-	position: absolute;
-	right: 56rpx;
-	top: -10rpx;
-	width: 20rpx;
-	height: 20rpx;
-	background: rgba(17, 24, 39, 0.82);
-	transform: rotate(45deg);
+    position: absolute;
+    right: 92rpx;
+    top: -13rpx;
+    width: 0;
+    height: 0;
+    z-index: 99999;
+    border-left: 12rpx solid transparent;
+    border-right: 12rpx solid transparent;
+    border-bottom: 14rpx solid rgba(17, 24, 39, 0.82);
 }
 
 .hlw-add-mini__content {
-	display: flex;
-	align-items: center;
-	gap: 12rpx;
-	padding: 16rpx 14rpx 16rpx 20rpx;
-	border-radius: 14rpx;
-	background: rgba(17, 24, 39, 0.82);
-	box-shadow: 0 12rpx 34rpx rgba(15, 23, 42, 0.22);
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+    padding: 16rpx 14rpx 16rpx 20rpx;
+    border-radius: 14rpx;
+    background: rgba(17, 24, 39, 0.82);
+    box-shadow: 0 12rpx 34rpx rgba(15, 23, 42, 0.22);
 }
 
 .hlw-add-mini__text {
-	flex: 1;
-	min-width: 0;
+    flex: 1;
+    min-width: 0;
 }
 
 .hlw-add-mini__title {
-	color: #ffffff;
-	font-size: 25rpx;
-	font-weight: 400;
-	line-height: 1.3;
+    color: #ffffff;
+    font-size: 25rpx;
+    font-weight: 400;
+    line-height: 1.3;
     letter-spacing: 1rpx;
 }
 
 .hlw-add-mini__desc {
-	margin-top: 4rpx;
-	color: rgba(255, 255, 255, 0.72);
-	font-size: 21rpx;
-	line-height: 1.3;
+    margin-top: 4rpx;
+    color: rgba(255, 255, 255, 0.72);
+    font-size: 21rpx;
+    line-height: 1.3;
     letter-spacing: 1rpx;
 }
 
 .hlw-add-mini__close {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-	width: 36rpx;
-	height: 36rpx;
-	color: rgba(255, 255, 255, 0.72);
-	font-size: 30rpx;
-	line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 36rpx;
+    height: 36rpx;
+    color: rgba(255, 255, 255, 0.72);
+    font-size: 30rpx;
+    line-height: 1;
 }
 
 @keyframes hlw-add-mini-in {
-	0% {
-		opacity: 0;
-		transform: translateY(-8rpx);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateY(0);
-	}
+    0% {
+        opacity: 0;
+        transform: translateY(-8rpx);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 </style>

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

@@ -1,12 +1,6 @@
 <template>
     <view :class="`hlw-avatar hlw-avatar--${size ?? 'medium'}`" :style="avatarStyle">
-        <image
-            v-if="src && !loadError"
-            class="hlw-avatar__image"
-            :src="src"
-            mode="aspectFill"
-            @error="loadError = true"
-        />
+        <image v-if="src && !loadError" class="hlw-avatar__image" :src="src" mode="aspectFill" @error="loadError = true" />
         <view v-else class="hlw-avatar__placeholder">
             <text class="hlw-avatar__initial">{{ initial }}</text>
         </view>
@@ -30,12 +24,12 @@
  * <HlwAvatar src="/avatar.png" name="张三" size="large" />
  * ```
  */
-import { ref, computed } from 'vue';
+import { ref, computed } from "vue";
 
 const props = defineProps<{
     src?: string;
     name?: string;
-    size?: 'small' | 'medium' | 'large';
+    size?: "small" | "medium" | "large";
     border?: number;
 }>();
 
@@ -43,11 +37,11 @@ const loadError = ref(false);
 const avatarStyle = computed(() => {
     const border = Math.max(0, Number(props.border ?? 0));
     return {
-        border: border > 0 ? `${border}px solid #fff` : '0',
+        border: border > 0 ? `${border}px solid #fff` : "0",
     };
 });
 const initial = computed(() => {
-    if (!props.name) return '?';
+    if (!props.name) return "?";
     return props.name.charAt(0).toUpperCase();
 });
 </script>
@@ -60,9 +54,18 @@ const initial = computed(() => {
     flex-shrink: 0;
 }
 
-.hlw-avatar--small  { width: 56rpx;  height: 56rpx; }
-.hlw-avatar--medium { width: 80rpx;  height: 80rpx; }
-.hlw-avatar--large  { width: 120rpx; height: 120rpx; }
+.hlw-avatar--small {
+    width: 56rpx;
+    height: 56rpx;
+}
+.hlw-avatar--medium {
+    width: 80rpx;
+    height: 80rpx;
+}
+.hlw-avatar--large {
+    width: 120rpx;
+    height: 120rpx;
+}
 
 .hlw-avatar__image {
     width: 100%;
@@ -72,18 +75,23 @@ const initial = computed(() => {
 .hlw-avatar__placeholder {
     width: 100%;
     height: 100%;
-    background: #07c160;
+    background: #f1f5f9;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .hlw-avatar__initial {
-    color: #fff;
-    font-weight: bold;
+    color: #94a3b8;
 }
 
-.hlw-avatar--small  .hlw-avatar__initial { font-size: var(--font-xs, 20rpx); }
-.hlw-avatar--medium .hlw-avatar__initial { font-size: var(--font-base, 28rpx); }
-.hlw-avatar--large  .hlw-avatar__initial { font-size: var(--font-xl, 40rpx); }
+.hlw-avatar--small .hlw-avatar__initial {
+    font-size: var(--font-xs, 20rpx);
+}
+.hlw-avatar--medium .hlw-avatar__initial {
+    font-size: var(--font-base, 28rpx);
+}
+.hlw-avatar--large .hlw-avatar__initial {
+    font-size: var(--font-xl, 40rpx);
+}
 </style>

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

@@ -207,6 +207,9 @@ defineOptions({
 
 .hlw-card-header__icon {
     font-size: var(--font-xs);
+    width: var(--font-xs);
+    height: var(--font-xs);
+    display: inline-block;
 }
 
 .hlw-card-header__title {

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

@@ -105,6 +105,12 @@ defineEmits<{ click: [] }>();
     font-size: var(--font-lg, 36rpx);
     color: var(--primary-color, #3b82f6);
     flex-shrink: 0;
+
+    view {
+        width: var(--font-lg, 36rpx);
+        height: var(--font-lg, 36rpx);
+        display: inline-block;
+    }
 }
 
 .hlw-cell-body {

package/src/components/hlw-custom/hlw-custom.vue

@@ -12,7 +12,7 @@
             :send-message-img="resolvedContact.img"
             :show-message-card="resolvedContact.show"
         >
-            <text class="iconfont icon-service" />
+            <text class="i-ri-customer-service-line contact-button-icon" />
             <text class="contact-button-text">{{ resolvedBtnTitle }}</text>
         </button>
     </view>
@@ -64,7 +64,7 @@ const resolvedContact = computed(() => {
     padding: var(--card-padding);
     border: 1rpx solid var(--border-color-light);
     border-radius: var(--card-radius);
-    background: linear-gradient(135deg, #ffffff 0%, rgba(49, 118, 255, 0.05) 100%);
+    background: linear-gradient(135deg, #ffffff 0%, var(--primary-light, rgba(76, 68, 239, 0.05)) 100%);
 }
 
 .contact-copy {
@@ -100,14 +100,15 @@ const resolvedContact = computed(() => {
     flex-shrink: 0;
     margin: 0;
     border-radius: var(--radius-full);
-    background: #3176ff;
+    background: var(--primary-color, #3b82f6);
     color: #ffffff;
     font: inherit;
     line-height: 68rpx;
 }
 
-.contact-button .iconfont {
-    font-size: var(--font-sm);
+.contact-button-icon {
+    width: var(--font-sm);
+    height: var(--font-sm);
 }
 
 .contact-button-text {

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

@@ -335,7 +335,10 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
     flex-shrink: 0;
 
     text {
+        width: var(--hlw-menu-icon-size);
+        height: var(--hlw-menu-icon-size);
         font-size: var(--hlw-menu-icon-size);
+        display: inline-block;
     }
 
     &--grid {
@@ -343,7 +346,10 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
         height: var(--hlw-menu-grid-icon-box-size);
         border-radius: var(--radius-lg, 24rpx);
         text {
+            width: var(--hlw-menu-grid-icon-size);
+            height: var(--hlw-menu-grid-icon-size);
             font-size: var(--hlw-menu-grid-icon-size);
+            display: inline-block;
         }
     }
 
@@ -376,8 +382,8 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
         color: #f43f5e;
     }
     &--blue {
-        background: #eff6ff;
-        color: #3b82f6;
+        background: var(--primary-light, rgba(76, 68, 239, 0.12));
+        color: var(--primary-color, #3b82f6);
     }
     &--red {
         background: #fef2f2;
@@ -418,7 +424,7 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
     background: #f43f5e;
 }
 .hlw-menu-tag--blue {
-    background: #3b82f6;
+    background: var(--primary-color, #3b82f6);
 }
 
 .hlw-menu-tag-pulse {

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

@@ -0,0 +1,181 @@
+<template>
+    <view class="navbar" :class="theme">
+        <view :style="bar_style"></view>
+        <view class="header" :style="{ height: header_height + 'px' }">
+            <view @tap="tapBack" class="left" v-if="props.isBack">
+                <text class="i-fa6-solid-chevron-left icon-left"></text>
+            </view>
+            <text class="title">{{ title }}</text>
+        </view>
+        <view class="status-bar" v-if="theme === 'color-theme'">
+            <view class="within"></view>
+        </view>
+    </view>
+    <view :style="{ height: navbar_height + 'px' }"></view>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { useTheme } from "@/core";
+
+const { theme } = useTheme();
+
+const statusBarHeight: number = uni.getSystemInfoSync()?.statusBarHeight || 0;
+const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+
+const props = defineProps({
+    isBar: {
+        type: Boolean,
+        default: false,
+    },
+    title: {
+        type: String,
+        default: "",
+    },
+    isBack: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const bar_style = computed(() => {
+    const style = {
+        height: statusBarHeight + "px",
+    };
+    return style;
+});
+let status_bar_height = 0;
+if (props.isBar) {
+    status_bar_height = 15;
+}
+
+const header_height = ref<number>(menuButtonInfo.bottom - statusBarHeight + 6);
+const navbar_height = ref(header_height.value + statusBarHeight);
+const status_bar_height_style = `${status_bar_height}px`;
+
+function tapBack() {
+    uni.navigateBack({
+        fail: (err) => {
+            uni.reLaunch({
+                url: "/pages/index/index",
+            });
+        },
+    });
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    width: 750rpx;
+    z-index: 999;
+    border-bottom: 1rpx solid rgba(226, 232, 240, 0);
+    transition:
+        background-color 0.2s ease,
+        border-bottom 0.2s ease;
+
+    /* 白色主题：白色导航栏，下方加一条灰色的细边框 */
+    &.white-theme {
+        background-color: var(--navbar-bg-color, #ffffff);
+        border-bottom: var(--navbar-border-bottom, 1rpx solid #e7e7e7);
+
+        .title {
+            color: var(--font-color, #303048);
+        }
+
+        .icon-left {
+            color: var(--font-color, #303048);
+        }
+    }
+
+    /* 简洁主题：背景色与页面全局背景色一致，无明显界限，无边框 */
+    &.light-theme {
+        background-color: var(--bg-page, #f8f8f8);
+        border-bottom: 1rpx solid rgba(226, 232, 240, 0);
+
+        .title {
+            color: var(--font-color, #303048);
+        }
+
+        .icon-left {
+            color: var(--font-color, #303048);
+        }
+    }
+
+    /* 单色主题：纯主题色导航栏，无边框，无圆角 */
+    &.mono-theme {
+        background-color: var(--primary-color, #3b82f6);
+        border-bottom: 1rpx solid rgba(226, 232, 240, 0);
+
+        .title {
+            color: #ffffff;
+        }
+
+        .icon-left {
+            color: #ffffff;
+        }
+    }
+
+    /* 颜色主题：导航栏使用立体光影感的主题色渐变背景（反向：左上偏深，右下偏亮），下方带有白色圆角过渡 */
+    &.color-theme {
+        background: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.15) 100%), var(--primary-color, #3b82f6);
+        border-bottom: 1rpx solid rgba(226, 232, 240, 0);
+
+        .title {
+            color: #ffffff;
+        }
+
+        .icon-left {
+            color: #ffffff;
+        }
+    }
+
+    .header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        .left {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            left: 0rpx;
+            width: 100rpx;
+            height: 100%;
+
+            .icon-left {
+                font-size: 30rpx;
+            }
+        }
+
+        .title {
+            font-size: var(--navbar-font-size, 26rpx);
+            letter-spacing: 1rpx;
+            font-weight: normal;
+        }
+    }
+
+    .status-bar {
+        background-color: transparent;
+        height: v-bind(status_bar_height_style);
+        width: 750rpx;
+        position: relative;
+
+        .within {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 750rpx;
+            height: calc(v-bind(status_bar_height_style) + 2rpx);
+            background-color: var(--bg-color, var(--bg-page, #f8f8f8));
+            border-top-left-radius: var(--status-bar-border, var(--card-radius, 32rpx));
+            border-top-right-radius: var(--status-bar-border, var(--card-radius, 32rpx));
+        }
+    }
+}
+</style>