@hlw-uni/mp-vue 2.1.71 → 2.1.98

package/src/components/{hlw-custom/hlw-custom.vue → hlw-custom-service/hlw-custom-service.vue}

@@ -4,15 +4,8 @@
             <text class="contact-title">{{ title }}</text>
             <text class="contact-desc">{{ desc }}</text>
         </view>
-        <button
-            class="contact-button"
-            open-type="contact"
-            :send-message-title="resolvedContact.title"
-            :send-message-path="resolvedContact.path"
-            :send-message-img="resolvedContact.img"
-            :show-message-card="resolvedContact.show"
-        >
-            <text class="i-ri-customer-service-line contact-button-icon" />
+        <button class="contact-button" open-type="contact" :send-message-title="resolvedContact.title" :send-message-path="resolvedContact.path" :send-message-img="resolvedContact.img" :show-message-card="resolvedContact.show">
+            <span class="iconfont icon-service" />
             <text class="contact-button-text">{{ resolvedBtnTitle }}</text>
         </button>
     </view>
@@ -21,6 +14,30 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+/**
+ * HlwCustomService — 客服卡片自定义组件
+ *
+ * 用于引导用户点击联系微信客服，支持配置标题、描述、按钮文案及原生客服卡片参数。
+ *
+ * @props
+ *   title      - 客服卡片主标题
+ *   desc       - 客服卡片描述/说明文字
+ *   btn_title  - 客服按钮文案，默认 "联系客服"
+ *   contact    - 微信原生客服卡片配置项
+ *
+ * @example
+ * ```vue
+ * <HlwCustomService
+ *     title="专属客服"
+ *     desc="遇到问题？点击咨询您的专属客服"
+ *     btn_title="去咨询"
+ *     :contact="{ send_message_title: '咨询标题' }"
+ * />
+ * ```
+ */
+
+defineOptions({ name: "HlwCustomService" });
+
 interface ContactConfig {
     send_message_title?: string;
     send_message_path?: string;
@@ -38,7 +55,7 @@ const props = withDefaults(
     {
         btn_title: "",
         contact: () => ({}),
-    }
+    },
 );
 
 const resolvedBtnTitle = computed(() => {
@@ -106,11 +123,6 @@ const resolvedContact = computed(() => {
     line-height: 68rpx;
 }
 
-.contact-button-icon {
-    width: var(--font-sm);
-    height: var(--font-sm);
-}
-
 .contact-button-text {
     color: inherit;
     font-size: var(--font-sm);

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

@@ -8,6 +8,20 @@
 </template>
 
 <script setup lang="ts">
+/**
+ * HlwEmpty — 空状态组件
+ *
+ * 用于页面或区域无数据时的占位展示，支持自定义提示文本和占位图片。
+ *
+ * @props
+ *   text  - 占位提示文案，默认 "暂无数据"
+ *   image - 占位图地址，未提供时默认渲染原生盒子 icon
+ *
+ * @example
+ * ```vue
+ * <HlwEmpty text="空空如也，快去添加内容吧" />
+ * ```
+ */
 defineProps<{
     text?: string;
     image?: string;

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

@@ -9,7 +9,7 @@
                 <!-- 返回按钮 -->
                 <view class="header-back" @click="handleBack">
                     <slot name="back-icon">
-                        <text class="i-fa6-solid-chevron-left header-back-icon"></text>
+                        <span class="i-fa6-solid-chevron-left header-back-icon"></span>
                     </slot>
                 </view>
 

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

@@ -9,17 +9,18 @@
         <!-- 列表模式 -->
         <template v-if="props.mode === 'list'">
             <template v-for="(item, index) in visibleItems" :key="index">
-                <navigator v-if="item.url" :url="item.url" class="hlw-menu-item" hover-class="hlw-menu-item--active">
+                <navigator v-if="item.url" :url="item.url" animation-type="none" class="hlw-menu-item" hover-class="hlw-menu-item--active">
                     <view class="hlw-menu-left">
                         <view class="hlw-menu-icon" :class="`hlw-menu-icon--${item.iconTheme || 'slate'}`">
-                            <text :class="item.icon"></text>
+                            <image v-if="isImageIcon(item.icon)" :src="item.icon" class="hlw-menu-icon-img" mode="aspectFit" />
+                            <span v-else :class="item.icon"></span>
                         </view>
                         <text class="hlw-menu-label">{{ item.label }}</text>
                     </view>
                     <view class="hlw-menu-right">
                         <text v-if="item.value" class="hlw-menu-value">{{ item.value }}</text>
                         <text v-if="item.tag" class="hlw-menu-tag" :class="[`hlw-menu-tag--${item.tagTheme || 'rose'}`, item.tagPulse ? 'hlw-menu-tag-pulse' : '']">{{ item.tag }}</text>
-                        <text class="i-fa6-solid-chevron-right hlw-menu-arrow"></text>
+                        <span class="i-fa6-solid-chevron-right hlw-menu-arrow"></span>
                     </view>
                 </navigator>
 
@@ -39,30 +40,32 @@
                 >
                     <view class="hlw-menu-left">
                         <view class="hlw-menu-icon" :class="`hlw-menu-icon--${item.iconTheme || 'slate'}`">
-                            <text :class="item.icon"></text>
+                            <image v-if="isImageIcon(item.icon)" :src="item.icon" class="hlw-menu-icon-img" mode="aspectFit" />
+                            <span v-else :class="item.icon"></span>
                         </view>
                         <text class="hlw-menu-label">{{ item.label }}</text>
                     </view>
                     <view class="hlw-menu-right">
-                        <text v-if="item.loading" class="i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"></text>
+                        <span v-if="item.loading" class="i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"></span>
                         <text v-if="item.value" class="hlw-menu-value">{{ item.value }}</text>
                         <text v-if="item.tag" class="hlw-menu-tag" :class="[`hlw-menu-tag--${item.tagTheme || 'rose'}`, item.tagPulse ? 'hlw-menu-tag-pulse' : '']">{{ item.tag }}</text>
-                        <text class="i-fa6-solid-chevron-right hlw-menu-arrow"></text>
+                        <span class="i-fa6-solid-chevron-right hlw-menu-arrow"></span>
                     </view>
                 </button>
 
                 <view v-else class="hlw-menu-item" hover-class="hlw-menu-item--active" @click="handleClick(item)">
                     <view class="hlw-menu-left">
                         <view class="hlw-menu-icon" :class="`hlw-menu-icon--${item.iconTheme || 'slate'}`">
-                            <text :class="item.icon"></text>
+                            <image v-if="isImageIcon(item.icon)" :src="item.icon" class="hlw-menu-icon-img" mode="aspectFit" />
+                            <span v-else :class="item.icon"></span>
                         </view>
                         <text class="hlw-menu-label">{{ item.label }}</text>
                     </view>
                     <view class="hlw-menu-right">
-                        <text v-if="item.loading" class="i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"></text>
+                        <span v-if="item.loading" class="i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"></span>
                         <text v-if="item.value" class="hlw-menu-value">{{ item.value }}</text>
                         <text v-if="item.tag" class="hlw-menu-tag" :class="[`hlw-menu-tag--${item.tagTheme || 'rose'}`, item.tagPulse ? 'hlw-menu-tag-pulse' : '']">{{ item.tag }}</text>
-                        <text class="i-fa6-solid-chevron-right hlw-menu-arrow"></text>
+                        <span class="i-fa6-solid-chevron-right hlw-menu-arrow"></span>
                     </view>
                 </view>
 
@@ -73,10 +76,11 @@
         <!-- 宫格模式 -->
         <view v-else class="hlw-menu-grid" :style="{ gridTemplateColumns: `repeat(${props.columns}, 1fr)` }">
             <template v-for="(item, index) in visibleItems" :key="index">
-                <navigator v-if="item.url" :url="item.url" class="hlw-menu-grid-item" hover-class="hlw-menu-grid-item--active">
+                <navigator v-if="item.url" :url="item.url" animation-type="none" class="hlw-menu-grid-item" hover-class="hlw-menu-grid-item--active">
                     <view class="hlw-menu-grid-icon-wrap">
                         <view class="hlw-menu-icon hlw-menu-icon--grid" :class="`hlw-menu-icon--${item.iconTheme || 'slate'}`">
-                            <text :class="item.icon"></text>
+                            <image v-if="isImageIcon(item.icon)" :src="item.icon" class="hlw-menu-icon-img" mode="aspectFit" />
+                            <span v-else :class="item.icon"></span>
                         </view>
                         <text v-if="item.tag" class="hlw-menu-badge" :class="[`hlw-menu-tag--${item.tagTheme || 'rose'}`, item.tagPulse ? 'hlw-menu-tag-pulse' : '']">{{ item.tag }}</text>
                     </view>
@@ -86,7 +90,8 @@
                 <view v-else class="hlw-menu-grid-item" hover-class="hlw-menu-grid-item--active" @click="handleClick(item)">
                     <view class="hlw-menu-grid-icon-wrap">
                         <view class="hlw-menu-icon hlw-menu-icon--grid" :class="`hlw-menu-icon--${item.iconTheme || 'slate'}`">
-                            <text :class="item.icon"></text>
+                            <image v-if="isImageIcon(item.icon)" :src="item.icon" class="hlw-menu-icon-img" mode="aspectFit" />
+                            <span v-else :class="item.icon"></span>
                         </view>
                         <text v-if="item.tag" class="hlw-menu-badge" :class="[`hlw-menu-tag--${item.tagTheme || 'rose'}`, item.tagPulse ? 'hlw-menu-tag-pulse' : '']">{{ item.tag }}</text>
                     </view>
@@ -179,6 +184,11 @@ const emit = defineEmits<{
     getphonenumber: [item: HlwMenuItem, event: unknown];
 }>();
 
+const isImageIcon = (icon?: string) => {
+    if (!icon) return false;
+    return icon.startsWith("http") || icon.startsWith("/") || icon.startsWith(".") || icon.includes("/");
+};
+
 const visibleItems = computed(() => props.items.filter((item) => item.visible !== false));
 
 const handleClick = (item: HlwMenuItem) => {
@@ -196,13 +206,13 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
 
 <style lang="scss" scoped>
 .hlw-menu {
-    --hlw-menu-icon-size: var(--font-sm, 24rpx);
-    --hlw-menu-icon-box-size: calc(var(--hlw-menu-icon-size) + 40rpx);
-    --hlw-menu-grid-icon-size: var(--font-lg, 36rpx);
+    --hlw-menu-icon-size: var(--font-md, 32rpx);
+    --hlw-menu-icon-box-size: var(--hlw-menu-icon-size);
+    --hlw-menu-grid-icon-size: var(--font-xl, 40rpx);
     --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: 1rpx solid var(--border-color, #e2e8f0);
+    border: 1rpx solid var(--border-color-light, #ececec);
     overflow: hidden;
     width: 100%;
 
@@ -224,7 +234,7 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
 
 .hlw-menu-title-divider {
     height: 0;
-    border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
+    border-bottom: 1rpx dashed var(--border-color-light, #ececec);
 }
 
 /* ========== 列表模式 ========== */
@@ -232,7 +242,7 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 24rpx 32rpx;
+    padding: 32rpx 36rpx;
 
     &--active {
         background: var(--surface-card-muted, #f8fafc);
@@ -246,7 +256,7 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
     justify-content: space-between;
     width: 100%;
     margin: 0;
-    padding: 24rpx 32rpx;
+    padding: 32rpx 36rpx;
     background: transparent;
     color: inherit;
     font-size: inherit;
@@ -264,15 +274,15 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
 }
 
 .hlw-menu-divider {
-    margin: 0 32rpx;
+    margin: 0 36rpx;
     height: 0;
-    border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
+    border-bottom: 1rpx dashed var(--border-color-light, #ececec);
 }
 
 .hlw-menu-left {
     display: flex;
     align-items: center;
-    gap: 24rpx;
+    gap: 20rpx;
 }
 
 .hlw-menu-right {
@@ -328,13 +338,14 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
 .hlw-menu-icon {
     width: var(--hlw-menu-icon-box-size);
     height: var(--hlw-menu-icon-box-size);
-    border-radius: var(--radius-md, 16rpx);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 
-    text {
+    text,
+    span,
+    .hlw-menu-icon-img {
         width: var(--hlw-menu-icon-size);
         height: var(--hlw-menu-icon-size);
         font-size: var(--hlw-menu-icon-size);
@@ -344,8 +355,9 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
     &--grid {
         width: var(--hlw-menu-grid-icon-box-size);
         height: var(--hlw-menu-grid-icon-box-size);
-        border-radius: var(--radius-lg, 24rpx);
-        text {
+        text,
+        span,
+        .hlw-menu-icon-img {
             width: var(--hlw-menu-grid-icon-size);
             height: var(--hlw-menu-grid-icon-size);
             font-size: var(--hlw-menu-grid-icon-size);
@@ -354,48 +366,39 @@ const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
     }
 
     &--orange {
-        background: #fff7ed;
         color: #f97316;
     }
     &--purple {
-        background: #faf5ff;
         color: #a855f7;
     }
     &--wechat {
-        background: #f0fdf4;
         color: #07c160;
     }
     &--cyan {
-        background: #ecfeff;
         color: #06b6d4;
     }
     &--emerald {
-        background: #ecfdf5;
         color: #10b981;
     }
     &--slate {
-        background: #f1f5f9;
         color: #64748b;
     }
     &--rose {
-        background: #fff1f2;
         color: #f43f5e;
     }
     &--blue {
-        background: var(--primary-light, rgba(76, 68, 239, 0.12));
         color: var(--primary-color, #3b82f6);
     }
     &--red {
-        background: #fef2f2;
         color: #ef4444;
     }
 }
 
 /* ========== 标签 / 角标 ========== */
 .hlw-menu-label {
-    font-size: var(--font-base, 28rpx);
-    font-weight: 500;
+    font-size: var(--font-26, 26rpx);
     color: var(--text-secondary, #334155);
+    letter-spacing: 1rpx;
 }
 
 .hlw-menu-value {

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

@@ -3,7 +3,7 @@
         <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>
+                <span class="i-fa6-solid-chevron-left icon-left"></span>
             </view>
             <text class="title">{{ title }}</text>
         </view>
@@ -15,6 +15,21 @@
 </template>
 
 <script lang="ts" setup>
+/**
+ * HlwNavBar — 自定义导航栏组件
+ *
+ * 自适应状态栏高度与胶囊按钮，完美替代微信小程序原生导航栏。支持不同主题配色、返回按钮及自适应高度。
+ *
+ * @props
+ *   title   - 导航栏标题文字
+ *   isBack  - 是否显示返回按钮，默认 false；点击自动回退或回到首页
+ *   isBar   - 是否占用状态栏高度，默认 false
+ *
+ * @example
+ * ```vue
+ * <hlw-nav-bar title="设置中心" is-back />
+ * ```
+ */
 import { computed, ref } from "vue";
 import { useTheme } from "@/core";
 
@@ -82,11 +97,11 @@ function tapBack() {
         border-bottom: var(--navbar-border-bottom, 1rpx solid #e7e7e7);
 
         .title {
-            color: var(--font-color, #303048);
+            color: var(--text-primary, #303048);
         }
 
         .icon-left {
-            color: var(--font-color, #303048);
+            color: var(--text-primary, #303048);
         }
     }
 
@@ -96,11 +111,11 @@ function tapBack() {
         border-bottom: 1rpx solid rgba(226, 232, 240, 0);
 
         .title {
-            color: var(--font-color, #303048);
+            color: var(--text-primary, #303048);
         }
 
         .icon-left {
-            color: var(--font-color, #303048);
+            color: var(--text-primary, #303048);
         }
     }
 
@@ -154,9 +169,9 @@ function tapBack() {
         }
 
         .title {
-            font-size: var(--navbar-font-size, 26rpx);
-            letter-spacing: 1rpx;
-            font-weight: normal;
+            font-size: var(--font-md, var(--navbar-font-size, 32rpx));
+            letter-spacing: 2rpx;
+            font-weight: 500;
         }
     }
 

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

@@ -0,0 +1,185 @@
+<template>
+    <view class="hlw-nickname" @tap="openDialog">
+        <slot>
+            <text class="hlw-nickname__text">{{ props.text || '微信用户' }}</text>
+        </slot>
+
+        <!-- 修改昵称弹窗 -->
+        <root-portal v-if="showEditNicknameDialog">
+            <view class="nickname-modal" @tap="closeDialog">
+                <view class="nickname-dialog" @tap.stop>
+                    <view class="dialog-title">修改昵称</view>
+                    <view class="dialog-input-wrapper">
+                        <input 
+                            class="dialog-input" 
+                            type="nickname" 
+                            v-model="tempNickname" 
+                            placeholder="请输入或获取微信昵称" 
+                            @blur="onNicknameBlur"
+                            @input="onNicknameInput"
+                        />
+                    </view>
+                    <view class="dialog-actions">
+                        <button class="dialog-btn cancel-btn" @tap="closeDialog">取消</button>
+                        <button class="dialog-btn confirm-btn" @tap="confirmNickname">确定</button>
+                    </view>
+                </view>
+            </view>
+        </root-portal>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+defineOptions({ name: "HlwNickname" });
+
+interface Props {
+    /** 当前展示的昵称 */
+    text?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    text: "",
+});
+
+const emit = defineEmits<{
+    (e: "onNick", nickname: string): void;
+}>();
+
+const showEditNicknameDialog = ref(false);
+const tempNickname = ref("");
+
+function openDialog() {
+    tempNickname.value = props.text || "";
+    showEditNicknameDialog.value = true;
+}
+
+function closeDialog() {
+    showEditNicknameDialog.value = false;
+}
+
+function onNicknameInput(e: any) {
+    tempNickname.value = e.detail?.value || "";
+}
+
+function onNicknameBlur(e: any) {
+    // 微信小程序特有：点击键盘上方微信昵称 suggestion 时，会触发 blur 并带上值
+    const value = e.detail?.value || "";
+    if (value) {
+        tempNickname.value = value;
+    }
+}
+
+function confirmNickname() {
+    const nickname = tempNickname.value?.trim();
+    if (!nickname) {
+        hlw.$msg.toast("昵称不能为空");
+        return;
+    }
+    if (nickname.length > 20) {
+        hlw.$msg.toast("昵称长度不能超过 20 个字符");
+        return;
+    }
+    emit("onNick", nickname);
+    closeDialog();
+}
+</script>
+
+<style scoped>
+.hlw-nickname {
+    display: inline-block;
+}
+
+/* 弹窗遮罩 */
+.nickname-modal {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(8rpx);
+    animation: fadeIn 0.2s ease-out;
+}
+
+/* 弹窗主体 */
+.nickname-dialog {
+    width: 600rpx;
+    padding: 40rpx;
+    border-radius: 24rpx;
+    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);
+}
+
+.dialog-title {
+    margin-bottom: 30rpx;
+    color: #1e293b;
+    text-align: center;
+    font-size: 32rpx;
+    font-weight: 600;
+    letter-spacing: 1rpx;
+}
+
+.dialog-input-wrapper {
+    margin-bottom: 40rpx;
+    padding: 20rpx 24rpx;
+    border: 2rpx solid #e2e8f0;
+    border-radius: 16rpx;
+    background: #f8fafc;
+}
+
+.dialog-input {
+    width: 100%;
+    height: 48rpx;
+    color: #1e293b;
+    font-size: 28rpx;
+    text-align: left;
+}
+
+.dialog-actions {
+    display: flex;
+    gap: 20rpx;
+}
+
+.dialog-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 80rpx;
+    margin: 0;
+    font-size: 28rpx;
+    font-weight: 500;
+    border-radius: 16rpx;
+}
+
+.dialog-btn::after {
+    border: 0;
+}
+
+.cancel-btn {
+    background: #f1f5f9;
+    color: #64748b;
+}
+
+.confirm-btn {
+    background: #3b82f6;
+    color: #ffffff;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes scaleIn {
+    from { transform: scale(0.9); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+}
+</style>

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

@@ -13,6 +13,29 @@
 </template>
 
 <script setup lang="ts">
+/**
+ * HlwNoticeBar — 滚动通告栏
+ *
+ * 用于显示重要广播、紧急通告或系统消息。支持横向无缝滚动播放、可关闭状态及自定义图标/色彩。
+ *
+ * @props
+ *   text       - 通告文本内容
+ *   scrollable - 是否开启滚动播放，默认 true
+ *   closable   - 是否显示关闭按钮，默认 false
+ *   color      - 文字颜色，默认 "#ed6a0c"
+ *   background - 背景颜色，默认 "#fffbe8"
+ *   speed      - 滚动速度（每秒像素数），默认 60
+ *   leftIcon   - 左侧自定义图标 class，默认喇叭图标
+ *
+ * @events
+ *   close - 点击关闭按钮时触发
+ *   click - 点击通告内容区时触发
+ *
+ * @example
+ * ```vue
+ * <HlwNoticeBar text="系统将于今晚24点停机维护，给您带来的不便敬请谅解！" closable />
+ * ```
+ */
 import { computed, ref } from "vue";
 
 interface Props {