@hlw-uni/mp-vue 1.0.12 → 1.0.13

package/dist/index.d.ts

@@ -7,6 +7,8 @@ export { default as HlwCard } from './components/hlw-card/index.vue';
 export { default as HlwEmpty } from './components/hlw-empty/index.vue';
 export { default as HlwHeader } from './components/hlw-header/index.vue';
 export { default as HlwLoading } from './components/hlw-loading/index.vue';
+export { default as HlwMenu } from './components/hlw-menu/index.vue';
+export type { HlwMenuItem } from './components/hlw-menu/index.vue';
 export { default as HlwMenuList } from './components/hlw-menu-list/index.vue';
 export { default as HlwPage } from './components/hlw-page/index.vue';
 export type { MenuItem } from './components/hlw-menu-list/types';

package/dist/index.js

@@ -2,7 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.HlwUniVue = {}, global.vue));
 })(this, function(exports2, vue) {
   "use strict";
-  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "HlwAd" },
     __name: "index",
     props: {
@@ -33,13 +33,13 @@
       };
     }
   });
-  const _hoisted_1$6 = ["src"];
-  const _hoisted_2$6 = {
+  const _hoisted_1$7 = ["src"];
+  const _hoisted_2$7 = {
     key: 1,
     class: "hlw-avatar__placeholder"
   };
-  const _hoisted_3$4 = { class: "hlw-avatar__initial" };
-  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_3$5 = { class: "hlw-avatar__initial" };
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     __name: "index",
     props: {
       src: {},
@@ -64,8 +64,8 @@
             src: __props.src,
             mode: "aspectFill",
             onError: _cache[0] || (_cache[0] = ($event) => loadError.value = true)
-          }, null, 40, _hoisted_1$6)) : (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$6, [
-            vue.createElementVNode("text", _hoisted_3$4, vue.toDisplayString(initial.value), 1)
+          }, null, 40, _hoisted_1$7)) : (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$7, [
+            vue.createElementVNode("text", _hoisted_3$5, vue.toDisplayString(initial.value), 1)
           ]))
         ], 2);
       };
@@ -78,13 +78,13 @@
     }
     return target;
   };
-  const index$6 = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-7e8f98a5"]]);
-  const _hoisted_1$5 = { class: "hlw-card" };
-  const _hoisted_2$5 = {
+  const index$7 = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-7e8f98a5"]]);
+  const _hoisted_1$6 = { class: "hlw-card" };
+  const _hoisted_2$6 = {
     key: 0,
     class: "hlw-card-header"
   };
-  const _hoisted_3$3 = { class: "flex items-center justify-between px-5 py-4 border-0 border-b border-dashed border-slate-200 bg-slate-50/30" };
+  const _hoisted_3$4 = { class: "flex items-center justify-between px-5 py-4 border-0 border-b border-dashed border-slate-200 bg-slate-50/30" };
   const _hoisted_4$2 = { key: 0 };
   const _hoisted_5$1 = { class: "text-sm font-bold text-slate-800 flex items-center gap-2 tracking-wide" };
   const _hoisted_6$1 = { key: 1 };
@@ -93,7 +93,7 @@
     class: "text-[10px] text-slate-400 bg-slate-50 px-2 py-1 rounded border border-slate-100 tracking-wide"
   };
   const _hoisted_8 = { class: "hlw-card-body" };
-  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     ...{
       options: {
         styleIsolation: "shared",
@@ -109,10 +109,10 @@
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1$5, [
-          _ctx.$slots.header || __props.title || __props.icon || _ctx.$slots["header-left"] || _ctx.$slots["header-right"] ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$5, [
+        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1$6, [
+          _ctx.$slots.header || __props.title || __props.icon || _ctx.$slots["header-left"] || _ctx.$slots["header-right"] ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$6, [
             vue.renderSlot(_ctx.$slots, "header", {}, () => [
-              vue.createElementVNode("view", _hoisted_3$3, [
+              vue.createElementVNode("view", _hoisted_3$4, [
                 _ctx.$slots["header-left"] || __props.title || __props.icon ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_4$2, [
                   vue.renderSlot(_ctx.$slots, "header-left", {}, () => [
                     vue.createElementVNode("view", _hoisted_5$1, [
@@ -139,15 +139,15 @@
       };
     }
   });
-  const index$5 = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-787fc3a7"]]);
-  const _hoisted_1$4 = { class: "hlw-empty" };
-  const _hoisted_2$4 = ["src"];
-  const _hoisted_3$2 = {
+  const index$6 = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-787fc3a7"]]);
+  const _hoisted_1$5 = { class: "hlw-empty" };
+  const _hoisted_2$5 = ["src"];
+  const _hoisted_3$3 = {
     key: 1,
     class: "hlw-empty__icon"
   };
   const _hoisted_4$1 = { class: "hlw-empty__text" };
-  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     __name: "index",
     props: {
       text: {},
@@ -155,29 +155,29 @@
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1$4, [
+        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1$5, [
           __props.image ? (vue.openBlock(), vue.createElementBlock("image", {
             key: 0,
             class: "hlw-empty__image",
             src: __props.image,
             mode: "aspectFit"
-          }, null, 8, _hoisted_2$4)) : (vue.openBlock(), vue.createElementBlock("text", _hoisted_3$2, "📦")),
+          }, null, 8, _hoisted_2$5)) : (vue.openBlock(), vue.createElementBlock("text", _hoisted_3$3, "📦")),
           vue.createElementVNode("text", _hoisted_4$1, vue.toDisplayString(__props.text || "暂无数据"), 1),
           vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]);
       };
     }
   });
-  const index$4 = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-72364322"]]);
-  const _hoisted_1$3 = {
+  const index$5 = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-72364322"]]);
+  const _hoisted_1$4 = {
     key: 0,
     class: "header-placeholder"
   };
-  const _hoisted_2$3 = {
+  const _hoisted_2$4 = {
     key: 0,
     class: "header-title header-title--center"
   };
-  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     __name: "index",
     props: {
       extraHeight: { default: 0 },
@@ -264,9 +264,9 @@
                   }, vue.toDisplayString(props.title), 5)
                 ], true)
               ], 2),
-              props.titleAlign === "center" ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_1$3)) : vue.createCommentVNode("", true)
+              props.titleAlign === "center" ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_1$4)) : vue.createCommentVNode("", true)
             ], 64)) : vue.renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
-              props.title ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$3, [
+              props.title ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$4, [
                 vue.createElementVNode("text", {
                   class: "header-title-text",
                   style: vue.normalizeStyle(titleStyle.value)
@@ -278,27 +278,111 @@
       };
     }
   });
-  const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-9a6c839c"]]);
-  const _hoisted_1$2 = { class: "hlw-loading" };
-  const _hoisted_2$2 = {
+  const index$4 = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-9a6c839c"]]);
+  const _hoisted_1$3 = { class: "hlw-loading" };
+  const _hoisted_2$3 = {
     key: 0,
     class: "hlw-loading__text"
   };
-  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     __name: "index",
     props: {
       text: {}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1$2, [
+        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1$3, [
           _cache[0] || (_cache[0] = vue.createElementVNode("view", { class: "hlw-loading__spinner" }, null, -1)),
-          __props.text ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_2$2, vue.toDisplayString(__props.text), 1)) : vue.createCommentVNode("", true)
+          __props.text ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_2$3, vue.toDisplayString(__props.text), 1)) : vue.createCommentVNode("", true)
+        ]);
+      };
+    }
+  });
+  const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-14242381"]]);
+  const _hoisted_1$2 = { class: "hlw-menu" };
+  const _hoisted_2$2 = ["onClick"];
+  const _hoisted_3$2 = {
+    key: 2,
+    class: "hlw-menu-divider"
+  };
+  const HlwMenuItemContent = vue.defineComponent({
+    name: "HlwMenuItemContent",
+    props: {
+      item: { type: Object, required: true }
+    },
+    setup(props) {
+      return () => {
+        const item = props.item;
+        return vue.h("view", { class: "hlw-menu-item-inner" }, [
+          // 左侧
+          vue.h("view", { class: "hlw-menu-left" }, [
+            vue.h("view", { class: `hlw-menu-icon hlw-menu-icon--${item.iconTheme || "slate"}` }, [
+              vue.h("text", { class: item.icon })
+            ]),
+            vue.h("text", { class: "hlw-menu-label" }, item.label)
+          ]),
+          // 右侧
+          vue.h("view", { class: "hlw-menu-right" }, [
+            item.loading ? vue.h("text", { class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted" }) : null,
+            item.tag ? vue.h(
+              "text",
+              { class: `hlw-menu-tag hlw-menu-tag--${item.tagTheme || "rose"} ${item.tagPulse ? "hlw-menu-tag-pulse" : ""}` },
+              item.tag
+            ) : null,
+            vue.h("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" })
+          ])
+        ]);
+      };
+    }
+  });
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+    __name: "index",
+    props: {
+      items: {}
+    },
+    emits: ["click"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const visibleItems = vue.computed(() => props.items.filter((item) => item.visible !== false));
+      const handleClick = (item) => {
+        emit("click", item);
+      };
+      return (_ctx, _cache) => {
+        const _component_navigator = vue.resolveComponent("navigator");
+        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1$2, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleItems.value, (item, index2) => {
+            return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index2 }, [
+              item.url ? (vue.openBlock(), vue.createBlock(_component_navigator, {
+                key: 0,
+                url: item.url,
+                class: "hlw-menu-item",
+                "hover-class": "hlw-menu-item--active"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "item", { item }, () => [
+                    vue.createVNode(vue.unref(HlwMenuItemContent), { item }, null, 8, ["item"])
+                  ], true)
+                ]),
+                _: 2
+              }, 1032, ["url"])) : (vue.openBlock(), vue.createElementBlock("view", {
+                key: 1,
+                class: "hlw-menu-item",
+                "hover-class": "hlw-menu-item--active",
+                onClick: ($event) => handleClick(item)
+              }, [
+                vue.renderSlot(_ctx.$slots, "item", { item }, () => [
+                  vue.createVNode(vue.unref(HlwMenuItemContent), { item }, null, 8, ["item"])
+                ], true)
+              ], 8, _hoisted_2$2)),
+              index2 < visibleItems.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_3$2)) : vue.createCommentVNode("", true)
+            ], 64);
+          }), 128))
         ]);
       };
     }
   });
-  const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-14242381"]]);
+  const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-48deaf95"]]);
   const _hoisted_1$1 = { class: "hlw-menu-list" };
   const _hoisted_2$1 = ["onTap"];
   const _hoisted_3$1 = { class: "hlw-menu-list__left" };
@@ -396,12 +480,13 @@
     }
   });
   const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-155bc02a"]]);
-  exports2.HlwAd = _sfc_main$7;
-  exports2.HlwAvatar = index$6;
-  exports2.HlwCard = index$5;
-  exports2.HlwEmpty = index$4;
-  exports2.HlwHeader = index$3;
-  exports2.HlwLoading = index$2;
+  exports2.HlwAd = _sfc_main$8;
+  exports2.HlwAvatar = index$7;
+  exports2.HlwCard = index$6;
+  exports2.HlwEmpty = index$5;
+  exports2.HlwHeader = index$4;
+  exports2.HlwLoading = index$3;
+  exports2.HlwMenu = index$2;
   exports2.HlwMenuList = index$1;
   exports2.HlwPage = index;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { defineComponent, resolveComponent, openBlock, createBlock, ref, computed, createElementBlock, normalizeClass, createElementVNode, toDisplayString, renderSlot, createCommentVNode, useSlots, normalizeStyle, unref, Fragment, renderList, createVNode, withCtx } from "vue";
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+import { defineComponent, resolveComponent, openBlock, createBlock, ref, computed, createElementBlock, normalizeClass, createElementVNode, toDisplayString, renderSlot, createCommentVNode, useSlots, normalizeStyle, unref, Fragment, h, renderList, withCtx, createVNode } from "vue";
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...{ name: "HlwAd" },
   __name: "index",
   props: {
@@ -30,13 +30,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$6 = ["src"];
-const _hoisted_2$6 = {
+const _hoisted_1$7 = ["src"];
+const _hoisted_2$7 = {
   key: 1,
   class: "hlw-avatar__placeholder"
 };
-const _hoisted_3$4 = { class: "hlw-avatar__initial" };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_3$5 = { class: "hlw-avatar__initial" };
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     src: {},
@@ -61,8 +61,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           src: __props.src,
           mode: "aspectFill",
           onError: _cache[0] || (_cache[0] = ($event) => loadError.value = true)
-        }, null, 40, _hoisted_1$6)) : (openBlock(), createElementBlock("view", _hoisted_2$6, [
-          createElementVNode("text", _hoisted_3$4, toDisplayString(initial.value), 1)
+        }, null, 40, _hoisted_1$7)) : (openBlock(), createElementBlock("view", _hoisted_2$7, [
+          createElementVNode("text", _hoisted_3$5, toDisplayString(initial.value), 1)
         ]))
       ], 2);
     };
@@ -75,13 +75,13 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const index$6 = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-7e8f98a5"]]);
-const _hoisted_1$5 = { class: "hlw-card" };
-const _hoisted_2$5 = {
+const index$7 = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-7e8f98a5"]]);
+const _hoisted_1$6 = { class: "hlw-card" };
+const _hoisted_2$6 = {
   key: 0,
   class: "hlw-card-header"
 };
-const _hoisted_3$3 = { class: "flex items-center justify-between px-5 py-4 border-0 border-b border-dashed border-slate-200 bg-slate-50/30" };
+const _hoisted_3$4 = { class: "flex items-center justify-between px-5 py-4 border-0 border-b border-dashed border-slate-200 bg-slate-50/30" };
 const _hoisted_4$2 = { key: 0 };
 const _hoisted_5$1 = { class: "text-sm font-bold text-slate-800 flex items-center gap-2 tracking-wide" };
 const _hoisted_6$1 = { key: 1 };
@@ -90,7 +90,7 @@ const _hoisted_7$1 = {
   class: "text-[10px] text-slate-400 bg-slate-50 px-2 py-1 rounded border border-slate-100 tracking-wide"
 };
 const _hoisted_8 = { class: "hlw-card-body" };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   ...{
     options: {
       styleIsolation: "shared",
@@ -106,10 +106,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("view", _hoisted_1$5, [
-        _ctx.$slots.header || __props.title || __props.icon || _ctx.$slots["header-left"] || _ctx.$slots["header-right"] ? (openBlock(), createElementBlock("view", _hoisted_2$5, [
+      return openBlock(), createElementBlock("view", _hoisted_1$6, [
+        _ctx.$slots.header || __props.title || __props.icon || _ctx.$slots["header-left"] || _ctx.$slots["header-right"] ? (openBlock(), createElementBlock("view", _hoisted_2$6, [
           renderSlot(_ctx.$slots, "header", {}, () => [
-            createElementVNode("view", _hoisted_3$3, [
+            createElementVNode("view", _hoisted_3$4, [
               _ctx.$slots["header-left"] || __props.title || __props.icon ? (openBlock(), createElementBlock("view", _hoisted_4$2, [
                 renderSlot(_ctx.$slots, "header-left", {}, () => [
                   createElementVNode("view", _hoisted_5$1, [
@@ -136,15 +136,15 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const index$5 = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-787fc3a7"]]);
-const _hoisted_1$4 = { class: "hlw-empty" };
-const _hoisted_2$4 = ["src"];
-const _hoisted_3$2 = {
+const index$6 = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-787fc3a7"]]);
+const _hoisted_1$5 = { class: "hlw-empty" };
+const _hoisted_2$5 = ["src"];
+const _hoisted_3$3 = {
   key: 1,
   class: "hlw-empty__icon"
 };
 const _hoisted_4$1 = { class: "hlw-empty__text" };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     text: {},
@@ -152,29 +152,29 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("view", _hoisted_1$4, [
+      return openBlock(), createElementBlock("view", _hoisted_1$5, [
         __props.image ? (openBlock(), createElementBlock("image", {
           key: 0,
           class: "hlw-empty__image",
           src: __props.image,
           mode: "aspectFit"
-        }, null, 8, _hoisted_2$4)) : (openBlock(), createElementBlock("text", _hoisted_3$2, "📦")),
+        }, null, 8, _hoisted_2$5)) : (openBlock(), createElementBlock("text", _hoisted_3$3, "📦")),
         createElementVNode("text", _hoisted_4$1, toDisplayString(__props.text || "暂无数据"), 1),
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ]);
     };
   }
 });
-const index$4 = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-72364322"]]);
-const _hoisted_1$3 = {
+const index$5 = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-72364322"]]);
+const _hoisted_1$4 = {
   key: 0,
   class: "header-placeholder"
 };
-const _hoisted_2$3 = {
+const _hoisted_2$4 = {
   key: 0,
   class: "header-title header-title--center"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     extraHeight: { default: 0 },
@@ -261,9 +261,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                 }, toDisplayString(props.title), 5)
               ], true)
             ], 2),
-            props.titleAlign === "center" ? (openBlock(), createElementBlock("view", _hoisted_1$3)) : createCommentVNode("", true)
+            props.titleAlign === "center" ? (openBlock(), createElementBlock("view", _hoisted_1$4)) : createCommentVNode("", true)
           ], 64)) : renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
-            props.title ? (openBlock(), createElementBlock("view", _hoisted_2$3, [
+            props.title ? (openBlock(), createElementBlock("view", _hoisted_2$4, [
               createElementVNode("text", {
                 class: "header-title-text",
                 style: normalizeStyle(titleStyle.value)
@@ -275,27 +275,111 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-9a6c839c"]]);
-const _hoisted_1$2 = { class: "hlw-loading" };
-const _hoisted_2$2 = {
+const index$4 = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-9a6c839c"]]);
+const _hoisted_1$3 = { class: "hlw-loading" };
+const _hoisted_2$3 = {
   key: 0,
   class: "hlw-loading__text"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     text: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("view", _hoisted_1$2, [
+      return openBlock(), createElementBlock("view", _hoisted_1$3, [
         _cache[0] || (_cache[0] = createElementVNode("view", { class: "hlw-loading__spinner" }, null, -1)),
-        __props.text ? (openBlock(), createElementBlock("text", _hoisted_2$2, toDisplayString(__props.text), 1)) : createCommentVNode("", true)
+        __props.text ? (openBlock(), createElementBlock("text", _hoisted_2$3, toDisplayString(__props.text), 1)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-14242381"]]);
+const _hoisted_1$2 = { class: "hlw-menu" };
+const _hoisted_2$2 = ["onClick"];
+const _hoisted_3$2 = {
+  key: 2,
+  class: "hlw-menu-divider"
+};
+const HlwMenuItemContent = defineComponent({
+  name: "HlwMenuItemContent",
+  props: {
+    item: { type: Object, required: true }
+  },
+  setup(props) {
+    return () => {
+      const item = props.item;
+      return h("view", { class: "hlw-menu-item-inner" }, [
+        // 左侧
+        h("view", { class: "hlw-menu-left" }, [
+          h("view", { class: `hlw-menu-icon hlw-menu-icon--${item.iconTheme || "slate"}` }, [
+            h("text", { class: item.icon })
+          ]),
+          h("text", { class: "hlw-menu-label" }, item.label)
+        ]),
+        // 右侧
+        h("view", { class: "hlw-menu-right" }, [
+          item.loading ? h("text", { class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted" }) : null,
+          item.tag ? h(
+            "text",
+            { class: `hlw-menu-tag hlw-menu-tag--${item.tagTheme || "rose"} ${item.tagPulse ? "hlw-menu-tag-pulse" : ""}` },
+            item.tag
+          ) : null,
+          h("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" })
+        ])
+      ]);
+    };
+  }
+});
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    items: {}
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const visibleItems = computed(() => props.items.filter((item) => item.visible !== false));
+    const handleClick = (item) => {
+      emit("click", item);
+    };
+    return (_ctx, _cache) => {
+      const _component_navigator = resolveComponent("navigator");
+      return openBlock(), createElementBlock("view", _hoisted_1$2, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(visibleItems.value, (item, index2) => {
+          return openBlock(), createElementBlock(Fragment, { key: index2 }, [
+            item.url ? (openBlock(), createBlock(_component_navigator, {
+              key: 0,
+              url: item.url,
+              class: "hlw-menu-item",
+              "hover-class": "hlw-menu-item--active"
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "item", { item }, () => [
+                  createVNode(unref(HlwMenuItemContent), { item }, null, 8, ["item"])
+                ], true)
+              ]),
+              _: 2
+            }, 1032, ["url"])) : (openBlock(), createElementBlock("view", {
+              key: 1,
+              class: "hlw-menu-item",
+              "hover-class": "hlw-menu-item--active",
+              onClick: ($event) => handleClick(item)
+            }, [
+              renderSlot(_ctx.$slots, "item", { item }, () => [
+                createVNode(unref(HlwMenuItemContent), { item }, null, 8, ["item"])
+              ], true)
+            ], 8, _hoisted_2$2)),
+            index2 < visibleItems.value.length - 1 ? (openBlock(), createElementBlock("view", _hoisted_3$2)) : createCommentVNode("", true)
+          ], 64);
+        }), 128))
       ]);
     };
   }
 });
-const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-14242381"]]);
+const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-48deaf95"]]);
 const _hoisted_1$1 = { class: "hlw-menu-list" };
 const _hoisted_2$1 = ["onTap"];
 const _hoisted_3$1 = { class: "hlw-menu-list__left" };
@@ -394,12 +478,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-155bc02a"]]);
 export {
-  _sfc_main$7 as HlwAd,
-  index$6 as HlwAvatar,
-  index$5 as HlwCard,
-  index$4 as HlwEmpty,
-  index$3 as HlwHeader,
-  index$2 as HlwLoading,
+  _sfc_main$8 as HlwAd,
+  index$7 as HlwAvatar,
+  index$6 as HlwCard,
+  index$5 as HlwEmpty,
+  index$4 as HlwHeader,
+  index$3 as HlwLoading,
+  index$2 as HlwMenu,
   index$1 as HlwMenuList,
   index as HlwPage
 };

package/dist/style.css

@@ -1,4 +1,4 @@
-
+@charset "UTF-8";
 .hlw-avatar[data-v-7e8f98a5] {
     border-radius: 50%;
     overflow: hidden;
@@ -145,6 +145,150 @@ to { transform: rotate(360deg);
     color: #999;
 }
 
+.hlw-menu[data-v-48deaf95] {
+  background: #fff;
+  border-radius: var(--radius-lg, 24rpx);
+  border: 1rpx solid var(--border-color, #e2e8f0);
+  overflow: hidden;
+  width: 100%;
+  padding: 8rpx 0;
+}
+.hlw-menu-item[data-v-48deaf95] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16rpx 32rpx;
+}
+.hlw-menu-item--active[data-v-48deaf95] {
+  background: #f8fafc;
+}
+.hlw-menu-divider[data-v-48deaf95] {
+  margin: 8rpx 0;
+  height: 0;
+  border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
+}
+
+/* 下面的样式供 HlwMenuItemContent 内部渲染用（非 scoped） */.hlw-menu-item-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.hlw-menu-left {
+  display: flex;
+  align-items: center;
+  gap: 24rpx;
+}
+.hlw-menu-right {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+.hlw-menu-icon {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: var(--radius-md, 16rpx);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.hlw-menu-icon text {
+  font-size: 20rpx;
+}
+.hlw-menu-icon--orange {
+  background: #fff7ed;
+  color: #f97316;
+}
+.hlw-menu-icon--purple {
+  background: #faf5ff;
+  color: #a855f7;
+}
+.hlw-menu-icon--wechat {
+  background: #f0fdf4;
+  color: #07C160;
+}
+.hlw-menu-icon--cyan {
+  background: #ecfeff;
+  color: #06b6d4;
+}
+.hlw-menu-icon--emerald {
+  background: #ecfdf5;
+  color: #10b981;
+}
+.hlw-menu-icon--slate {
+  background: #f1f5f9;
+  color: #64748b;
+}
+.hlw-menu-icon--rose {
+  background: #fff1f2;
+  color: #f43f5e;
+}
+.hlw-menu-icon--blue {
+  background: #eff6ff;
+  color: #3b82f6;
+}
+.hlw-menu-icon--red {
+  background: #fef2f2;
+  color: #ef4444;
+}
+.hlw-menu-label {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #334155;
+}
+.hlw-menu-tag {
+  font-size: 20rpx;
+  color: #fff;
+  padding: 2rpx 12rpx;
+  border-radius: 9999rpx;
+  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+}
+.hlw-menu-tag--orange {
+  background: #fb923c;
+}
+.hlw-menu-tag--red {
+  background: #ef4444;
+}
+.hlw-menu-tag--wechat {
+  background: #07C160;
+}
+.hlw-menu-tag--rose {
+  background: #f43f5e;
+}
+.hlw-menu-tag--blue {
+  background: #3b82f6;
+}
+.hlw-menu-tag-pulse {
+  animation: hlw-menu-tag-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+@keyframes hlw-menu-tag-pulse {
+0%, 100% {
+    opacity: 1;
+}
+50% {
+    opacity: 0.5;
+}
+}
+.hlw-menu-arrow {
+  color: #d1d5db;
+  font-size: 20rpx;
+}
+.hlw-menu-spin {
+  animation: hlw-menu-spin 1s linear infinite;
+}
+.hlw-menu-muted {
+  color: #94a3b8;
+  font-size: 20rpx;
+}
+@keyframes hlw-menu-spin {
+from {
+    transform: rotate(0deg);
+}
+to {
+    transform: rotate(360deg);
+}
+}
 .hlw-menu-list[data-v-e465b0b4] {
     background: #fff;
     border-radius: 16rpx;

package/package.json

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

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

@@ -0,0 +1,221 @@
+<template>
+    <view class="hlw-menu">
+        <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">
+                <slot name="item" :item="item">
+                    <hlw-menu-item-content :item="item" />
+                </slot>
+            </navigator>
+            <view v-else class="hlw-menu-item" hover-class="hlw-menu-item--active" @click="handleClick(item)">
+                <slot name="item" :item="item">
+                    <hlw-menu-item-content :item="item" />
+                </slot>
+            </view>
+            <view v-if="index < visibleItems.length - 1" class="hlw-menu-divider"></view>
+        </template>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+export interface HlwMenuItem {
+    /** 图标 class，如 'i-fa6-solid-gear' */
+    icon: string;
+    /** 图标主题色 */
+    iconTheme?: "orange" | "purple" | "cyan" | "emerald" | "slate" | "wechat" | "rose" | "blue" | "red";
+    /** 菜单文字 */
+    label: string;
+    /** 跳转路径，有值则用 navigator 包裹 */
+    url?: string;
+    /** 右侧标签文字 */
+    tag?: string;
+    /** 标签主题色 */
+    tagTheme?: "orange" | "red" | "wechat" | "rose" | "blue";
+    /** 标签是否闪烁 */
+    tagPulse?: boolean;
+    /** 加载中状态（右侧显示 loading 图标） */
+    loading?: boolean;
+    /** 是否显示，默认 true */
+    visible?: boolean;
+}
+
+interface Props {
+    items: HlwMenuItem[];
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+    click: [item: HlwMenuItem];
+}>();
+
+const visibleItems = computed(() => props.items.filter((item) => item.visible !== false));
+
+const handleClick = (item: HlwMenuItem) => {
+    emit("click", item);
+};
+</script>
+
+<!-- 子组件：菜单项内容（内部使用） -->
+<script lang="ts">
+// 注册内部组件
+import { defineComponent, h } from "vue";
+
+const HlwMenuItemContent = defineComponent({
+    name: "HlwMenuItemContent",
+    props: {
+        item: { type: Object, required: true },
+    },
+    setup(props) {
+        return () => {
+            const item = props.item as import("./index.vue").HlwMenuItem;
+            return h("view", { class: "hlw-menu-item-inner" }, [
+                // 左侧
+                h("view", { class: "hlw-menu-left" }, [
+                    h("view", { class: `hlw-menu-icon hlw-menu-icon--${item.iconTheme || "slate"}` }, [
+                        h("text", { class: item.icon }),
+                    ]),
+                    h("text", { class: "hlw-menu-label" }, item.label),
+                ]),
+                // 右侧
+                h("view", { class: "hlw-menu-right" }, [
+                    item.loading
+                        ? h("text", { class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted" })
+                        : null,
+                    item.tag
+                        ? h(
+                              "text",
+                              { class: `hlw-menu-tag hlw-menu-tag--${item.tagTheme || "rose"} ${item.tagPulse ? "hlw-menu-tag-pulse" : ""}` },
+                              item.tag,
+                          )
+                        : null,
+                    h("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" }),
+                ]),
+            ]);
+        };
+    },
+});
+
+export { HlwMenuItemContent };
+</script>
+
+<style lang="scss" scoped>
+.hlw-menu {
+    background: #fff;
+    border-radius: var(--radius-lg, 24rpx);
+    border: 1rpx solid var(--border-color, #e2e8f0);
+    overflow: hidden;
+    width: 100%;
+    padding: 8rpx 0;
+}
+
+.hlw-menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16rpx 32rpx;
+
+    &--active {
+        background: #f8fafc;
+    }
+}
+
+.hlw-menu-divider {
+    margin: 8rpx 0;
+    height: 0;
+    border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
+}
+
+/* 下面的样式供 HlwMenuItemContent 内部渲染用（非 scoped） */
+</style>
+
+<style lang="scss">
+.hlw-menu-item-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.hlw-menu-left {
+    display: flex;
+    align-items: center;
+    gap: 24rpx;
+}
+
+.hlw-menu-right {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+}
+
+.hlw-menu-icon {
+    width: 64rpx;
+    height: 64rpx;
+    border-radius: var(--radius-md, 16rpx);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    text { font-size: 20rpx; }
+
+    &--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: #eff6ff; color: #3b82f6; }
+    &--red     { background: #fef2f2; color: #ef4444; }
+}
+
+.hlw-menu-label {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #334155;
+}
+
+.hlw-menu-tag {
+    font-size: 20rpx;
+    color: #fff;
+    padding: 2rpx 12rpx;
+    border-radius: 9999rpx;
+    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+
+    &--orange { background: #fb923c; }
+    &--red    { background: #ef4444; }
+    &--wechat { background: #07C160; }
+    &--rose   { background: #f43f5e; }
+    &--blue   { background: #3b82f6; }
+}
+
+.hlw-menu-tag-pulse {
+    animation: hlw-menu-tag-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes hlw-menu-tag-pulse {
+    0%, 100% { opacity: 1; }
+    50%       { opacity: 0.5; }
+}
+
+.hlw-menu-arrow {
+    color: #d1d5db;
+    font-size: 20rpx;
+}
+
+.hlw-menu-spin {
+    animation: hlw-menu-spin 1s linear infinite;
+}
+
+.hlw-menu-muted {
+    color: #94a3b8;
+    font-size: 20rpx;
+}
+
+@keyframes hlw-menu-spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+}
+</style>

package/src/index.ts

@@ -8,6 +8,8 @@ export { default as HlwCard } from './components/hlw-card/index.vue';
 export { default as HlwEmpty } from './components/hlw-empty/index.vue';
 export { default as HlwHeader } from './components/hlw-header/index.vue';
 export { default as HlwLoading } from './components/hlw-loading/index.vue';
+export { default as HlwMenu } from './components/hlw-menu/index.vue';
+export type { HlwMenuItem } from './components/hlw-menu/index.vue';
 export { default as HlwMenuList } from './components/hlw-menu-list/index.vue';
 export { default as HlwPage } from './components/hlw-page/index.vue';
 export type { MenuItem } from './components/hlw-menu-list/types';