@hlw-uni/mp-vue 1.1.18 → 1.1.20

package/dist/components/hlw-menu/types.d.ts

@@ -50,4 +50,38 @@ export interface HlwMenuItem {
      * @default true
      */
     visible?: boolean;
+    /**
+     * 微信小程序 `<button open-type>` 能力。设置后菜单项用 `<button>` 渲染，
+     * 支持触发客服会话、获取手机号、分享等原生能力。
+     *
+     * 常用值：
+     * - `contact` — 打开客服会话（需在后台配置客服）
+     * - `share` — 触发分享
+     * - `getPhoneNumber` — 获取手机号
+     * - `launchApp` — 打开 App（仅 App 内）
+     *
+     * 参考：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
+     */
+    openType?: string;
+    /**
+     * 会话来源，`openType="contact"` 时有效。
+     */
+    sessionFrom?: string;
+    /**
+     * 会话内消息卡片标题，`openType="contact"` 时有效。
+     */
+    sendMessageTitle?: string;
+    /**
+     * 会话内消息卡片点击跳转小程序路径，`openType="contact"` 时有效。
+     */
+    sendMessagePath?: string;
+    /**
+     * 会话内消息卡片图片，`openType="contact"` 时有效。
+     */
+    sendMessageImg?: string;
+    /**
+     * 是否显示会话内消息卡片，`openType="contact"` 时有效。
+     * @default false
+     */
+    showMessageCard?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "1.1.18",
+    "version": "1.1.20",
     "description": "hlw-uni Vue 组件库 — 供小程序业务方使用的 UI 组件集合",
     "main": "dist/index.js",
     "module": "dist/index.mjs",

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

@@ -23,6 +23,34 @@
                     </view>
                 </navigator>
 
+                <button
+                    v-else-if="item.openType"
+                    class="hlw-menu-item hlw-menu-item-btn"
+                    hover-class="hlw-menu-item--active"
+                    :open-type="item.openType"
+                    :session-from="item.sessionFrom"
+                    :send-message-title="item.sendMessageTitle"
+                    :send-message-path="item.sendMessagePath"
+                    :send-message-img="item.sendMessageImg"
+                    :show-message-card="item.showMessageCard"
+                    @click="handleClick(item)"
+                    @contact="handleContact(item, $event)"
+                    @getphonenumber="handleGetPhoneNumber(item, $event)"
+                >
+                    <view class="hlw-menu-left">
+                        <view class="hlw-menu-icon" :class="`hlw-menu-icon--${item.iconTheme || 'slate'}`">
+                            <text :class="item.icon"></text>
+                        </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>
+                        <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>
+                    </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'}`">
@@ -141,6 +169,14 @@ const emit = defineEmits<{
      * @param item 被点击的菜单项
      */
     click: [item: HlwMenuItem];
+    /**
+     * `openType="contact"` 的菜单项，打开客服会话时触发。
+     */
+    contact: [item: HlwMenuItem, event: unknown];
+    /**
+     * `openType="getPhoneNumber"` 的菜单项，获取手机号回调时触发。
+     */
+    getphonenumber: [item: HlwMenuItem, event: unknown];
 }>();
 
 const visibleItems = computed(() => props.items.filter((item) => item.visible !== false));
@@ -148,6 +184,14 @@ const visibleItems = computed(() => props.items.filter((item) => item.visible !=
 const handleClick = (item: HlwMenuItem) => {
     emit("click", item);
 };
+
+const handleContact = (item: HlwMenuItem, event: unknown) => {
+    emit("contact", item, event);
+};
+
+const handleGetPhoneNumber = (item: HlwMenuItem, event: unknown) => {
+    emit("getphonenumber", item, event);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -195,6 +239,30 @@ const handleClick = (item: HlwMenuItem) => {
     }
 }
 
+/* open-type button 模式：去除微信 button 原生样式，对齐 .hlw-menu-item 布局 */
+.hlw-menu-item-btn {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    margin: 0;
+    padding: 24rpx 32rpx;
+    background: transparent;
+    color: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    border-radius: 0;
+    border: none;
+    text-align: left;
+    box-sizing: border-box;
+
+    &::after {
+        border: none;
+        display: none;
+    }
+}
+
 .hlw-menu-divider {
     margin: 0 32rpx;
     height: 0;

package/src/components/hlw-menu/types.ts

@@ -52,4 +52,38 @@ export interface HlwMenuItem {
      * @default true
      */
     visible?: boolean;
+    /**
+     * 微信小程序 `<button open-type>` 能力。设置后菜单项用 `<button>` 渲染，
+     * 支持触发客服会话、获取手机号、分享等原生能力。
+     *
+     * 常用值：
+     * - `contact` — 打开客服会话（需在后台配置客服）
+     * - `share` — 触发分享
+     * - `getPhoneNumber` — 获取手机号
+     * - `launchApp` — 打开 App（仅 App 内）
+     *
+     * 参考：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
+     */
+    openType?: string;
+    /**
+     * 会话来源，`openType="contact"` 时有效。
+     */
+    sessionFrom?: string;
+    /**
+     * 会话内消息卡片标题，`openType="contact"` 时有效。
+     */
+    sendMessageTitle?: string;
+    /**
+     * 会话内消息卡片点击跳转小程序路径，`openType="contact"` 时有效。
+     */
+    sendMessagePath?: string;
+    /**
+     * 会话内消息卡片图片，`openType="contact"` 时有效。
+     */
+    sendMessageImg?: string;
+    /**
+     * 是否显示会话内消息卡片，`openType="contact"` 时有效。
+     * @default false
+     */
+    showMessageCard?: boolean;
 }