@hlw-uni/mp-vue 1.0.14 → 1.0.16

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

@@ -1,19 +1,21 @@
+export type HlwMenuIconTheme = "orange" | "purple" | "cyan" | "emerald" | "slate" | "wechat" | "rose" | "blue" | "red";
+export type HlwMenuTagTheme = "orange" | "red" | "wechat" | "rose" | "blue";
 export interface HlwMenuItem {
     /** 图标 class，如 'i-fa6-solid-gear' */
     icon: string;
     /** 图标主题色 */
-    iconTheme?: "orange" | "purple" | "cyan" | "emerald" | "slate" | "wechat" | "rose" | "blue" | "red";
+    iconTheme?: HlwMenuIconTheme;
     /** 菜单文字 */
     label: string;
     /** 跳转路径，有值则用 navigator 包裹 */
     url?: string;
-    /** 右侧标签文字 */
+    /** 右侧标签文字（列表模式）/ 角标文字（宫格模式） */
     tag?: string;
     /** 标签主题色 */
-    tagTheme?: "orange" | "red" | "wechat" | "rose" | "blue";
+    tagTheme?: HlwMenuTagTheme;
     /** 标签是否闪烁 */
     tagPulse?: boolean;
-    /** 加载中状态 */
+    /** 加载中状态（列表模式） */
     loading?: boolean;
     /** 是否显示，默认 true */
     visible?: boolean;

package/dist/index.js

@@ -300,25 +300,37 @@
   });
   const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-14242381"]]);
   const _hoisted_1$2 = { class: "hlw-menu" };
-  const _hoisted_2$2 = { class: "hlw-menu-left" };
-  const _hoisted_3$2 = { class: "hlw-menu-label" };
-  const _hoisted_4$1 = { class: "hlw-menu-right" };
-  const _hoisted_5$1 = ["onClick"];
-  const _hoisted_6$1 = { class: "hlw-menu-left" };
-  const _hoisted_7$1 = { class: "hlw-menu-label" };
-  const _hoisted_8 = { class: "hlw-menu-right" };
-  const _hoisted_9 = {
+  const _hoisted_2$2 = {
     key: 0,
-    class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"
+    class: "hlw-menu-title"
   };
+  const _hoisted_3$2 = { class: "hlw-menu-left" };
+  const _hoisted_4$1 = { class: "hlw-menu-label" };
+  const _hoisted_5$1 = { class: "hlw-menu-right" };
+  const _hoisted_6$1 = ["onClick"];
+  const _hoisted_7$1 = { class: "hlw-menu-left" };
+  const _hoisted_8 = { class: "hlw-menu-label" };
+  const _hoisted_9 = { class: "hlw-menu-right" };
   const _hoisted_10 = {
+    key: 0,
+    class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"
+  };
+  const _hoisted_11 = {
     key: 2,
     class: "hlw-menu-divider"
   };
+  const _hoisted_12 = { class: "hlw-menu-grid-icon-wrap" };
+  const _hoisted_13 = { class: "hlw-menu-grid-label" };
+  const _hoisted_14 = ["onClick"];
+  const _hoisted_15 = { class: "hlw-menu-grid-icon-wrap" };
+  const _hoisted_16 = { class: "hlw-menu-grid-label" };
   const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     __name: "index",
     props: {
-      items: {}
+      items: {},
+      title: { default: "" },
+      mode: { default: "list" },
+      columns: { default: 4 }
     },
     emits: ["click"],
     setup(__props, { emit: __emit }) {
@@ -331,7 +343,10 @@
       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) => {
+          props.title ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$2, [
+            vue.createElementVNode("text", null, vue.toDisplayString(props.title), 1)
+          ])) : vue.createCommentVNode("", true),
+          props.mode === "list" ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, 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,
@@ -340,7 +355,7 @@
                 "hover-class": "hlw-menu-item--active"
               }, {
                 default: vue.withCtx(() => [
-                  vue.createElementVNode("view", _hoisted_2$2, [
+                  vue.createElementVNode("view", _hoisted_3$2, [
                     vue.createElementVNode("view", {
                       class: vue.normalizeClass(["hlw-menu-icon", `hlw-menu-icon--${item.iconTheme || "slate"}`])
                     }, [
@@ -348,9 +363,9 @@
                         class: vue.normalizeClass(item.icon)
                       }, null, 2)
                     ], 2),
-                    vue.createElementVNode("text", _hoisted_3$2, vue.toDisplayString(item.label), 1)
+                    vue.createElementVNode("text", _hoisted_4$1, vue.toDisplayString(item.label), 1)
                   ]),
-                  vue.createElementVNode("view", _hoisted_4$1, [
+                  vue.createElementVNode("view", _hoisted_5$1, [
                     item.tag ? (vue.openBlock(), vue.createElementBlock("text", {
                       key: 0,
                       class: vue.normalizeClass(["hlw-menu-tag", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
@@ -365,7 +380,7 @@
                 "hover-class": "hlw-menu-item--active",
                 onClick: ($event) => handleClick(item)
               }, [
-                vue.createElementVNode("view", _hoisted_6$1, [
+                vue.createElementVNode("view", _hoisted_7$1, [
                   vue.createElementVNode("view", {
                     class: vue.normalizeClass(["hlw-menu-icon", `hlw-menu-icon--${item.iconTheme || "slate"}`])
                   }, [
@@ -373,25 +388,78 @@
                       class: vue.normalizeClass(item.icon)
                     }, null, 2)
                   ], 2),
-                  vue.createElementVNode("text", _hoisted_7$1, vue.toDisplayString(item.label), 1)
+                  vue.createElementVNode("text", _hoisted_8, vue.toDisplayString(item.label), 1)
                 ]),
-                vue.createElementVNode("view", _hoisted_8, [
-                  item.loading ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_9)) : vue.createCommentVNode("", true),
+                vue.createElementVNode("view", _hoisted_9, [
+                  item.loading ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_10)) : vue.createCommentVNode("", true),
                   item.tag ? (vue.openBlock(), vue.createElementBlock("text", {
                     key: 1,
                     class: vue.normalizeClass(["hlw-menu-tag", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
                   }, vue.toDisplayString(item.tag), 3)) : vue.createCommentVNode("", true),
                   _cache[1] || (_cache[1] = vue.createElementVNode("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" }, null, -1))
                 ])
-              ], 8, _hoisted_5$1)),
-              index2 < visibleItems.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_10)) : vue.createCommentVNode("", true)
+              ], 8, _hoisted_6$1)),
+              index2 < visibleItems.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_11)) : vue.createCommentVNode("", true)
             ], 64);
-          }), 128))
+          }), 128)) : (vue.openBlock(), vue.createElementBlock("view", {
+            key: 2,
+            class: "hlw-menu-grid",
+            style: vue.normalizeStyle({ gridTemplateColumns: `repeat(${props.columns}, 1fr)` })
+          }, [
+            (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-grid-item",
+                  "hover-class": "hlw-menu-grid-item--active"
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createElementVNode("view", _hoisted_12, [
+                      vue.createElementVNode("view", {
+                        class: vue.normalizeClass(["hlw-menu-icon hlw-menu-icon--grid", `hlw-menu-icon--${item.iconTheme || "slate"}`])
+                      }, [
+                        vue.createElementVNode("text", {
+                          class: vue.normalizeClass(item.icon)
+                        }, null, 2)
+                      ], 2),
+                      item.tag ? (vue.openBlock(), vue.createElementBlock("text", {
+                        key: 0,
+                        class: vue.normalizeClass(["hlw-menu-badge", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
+                      }, vue.toDisplayString(item.tag), 3)) : vue.createCommentVNode("", true)
+                    ]),
+                    vue.createElementVNode("text", _hoisted_13, vue.toDisplayString(item.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["url"])) : (vue.openBlock(), vue.createElementBlock("view", {
+                  key: 1,
+                  class: "hlw-menu-grid-item",
+                  "hover-class": "hlw-menu-grid-item--active",
+                  onClick: ($event) => handleClick(item)
+                }, [
+                  vue.createElementVNode("view", _hoisted_15, [
+                    vue.createElementVNode("view", {
+                      class: vue.normalizeClass(["hlw-menu-icon hlw-menu-icon--grid", `hlw-menu-icon--${item.iconTheme || "slate"}`])
+                    }, [
+                      vue.createElementVNode("text", {
+                        class: vue.normalizeClass(item.icon)
+                      }, null, 2)
+                    ], 2),
+                    item.tag ? (vue.openBlock(), vue.createElementBlock("text", {
+                      key: 0,
+                      class: vue.normalizeClass(["hlw-menu-badge", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
+                    }, vue.toDisplayString(item.tag), 3)) : vue.createCommentVNode("", true)
+                  ]),
+                  vue.createElementVNode("text", _hoisted_16, vue.toDisplayString(item.label), 1)
+                ], 8, _hoisted_14))
+              ], 64);
+            }), 128))
+          ], 4))
         ]);
       };
     }
   });
-  const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-ff3b3322"]]);
+  const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-3081ac3b"]]);
   const _hoisted_1$1 = { class: "hlw-menu-list" };
   const _hoisted_2$1 = ["onTap"];
   const _hoisted_3$1 = { class: "hlw-menu-list__left" };

package/dist/index.mjs

@@ -297,25 +297,37 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 });
 const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-14242381"]]);
 const _hoisted_1$2 = { class: "hlw-menu" };
-const _hoisted_2$2 = { class: "hlw-menu-left" };
-const _hoisted_3$2 = { class: "hlw-menu-label" };
-const _hoisted_4$1 = { class: "hlw-menu-right" };
-const _hoisted_5$1 = ["onClick"];
-const _hoisted_6$1 = { class: "hlw-menu-left" };
-const _hoisted_7$1 = { class: "hlw-menu-label" };
-const _hoisted_8 = { class: "hlw-menu-right" };
-const _hoisted_9 = {
+const _hoisted_2$2 = {
   key: 0,
-  class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"
+  class: "hlw-menu-title"
 };
+const _hoisted_3$2 = { class: "hlw-menu-left" };
+const _hoisted_4$1 = { class: "hlw-menu-label" };
+const _hoisted_5$1 = { class: "hlw-menu-right" };
+const _hoisted_6$1 = ["onClick"];
+const _hoisted_7$1 = { class: "hlw-menu-left" };
+const _hoisted_8 = { class: "hlw-menu-label" };
+const _hoisted_9 = { class: "hlw-menu-right" };
 const _hoisted_10 = {
+  key: 0,
+  class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"
+};
+const _hoisted_11 = {
   key: 2,
   class: "hlw-menu-divider"
 };
+const _hoisted_12 = { class: "hlw-menu-grid-icon-wrap" };
+const _hoisted_13 = { class: "hlw-menu-grid-label" };
+const _hoisted_14 = ["onClick"];
+const _hoisted_15 = { class: "hlw-menu-grid-icon-wrap" };
+const _hoisted_16 = { class: "hlw-menu-grid-label" };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
-    items: {}
+    items: {},
+    title: { default: "" },
+    mode: { default: "list" },
+    columns: { default: 4 }
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
@@ -328,7 +340,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     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) => {
+        props.title ? (openBlock(), createElementBlock("view", _hoisted_2$2, [
+          createElementVNode("text", null, toDisplayString(props.title), 1)
+        ])) : createCommentVNode("", true),
+        props.mode === "list" ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(visibleItems.value, (item, index2) => {
           return openBlock(), createElementBlock(Fragment, { key: index2 }, [
             item.url ? (openBlock(), createBlock(_component_navigator, {
               key: 0,
@@ -337,7 +352,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               "hover-class": "hlw-menu-item--active"
             }, {
               default: withCtx(() => [
-                createElementVNode("view", _hoisted_2$2, [
+                createElementVNode("view", _hoisted_3$2, [
                   createElementVNode("view", {
                     class: normalizeClass(["hlw-menu-icon", `hlw-menu-icon--${item.iconTheme || "slate"}`])
                   }, [
@@ -345,9 +360,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                       class: normalizeClass(item.icon)
                     }, null, 2)
                   ], 2),
-                  createElementVNode("text", _hoisted_3$2, toDisplayString(item.label), 1)
+                  createElementVNode("text", _hoisted_4$1, toDisplayString(item.label), 1)
                 ]),
-                createElementVNode("view", _hoisted_4$1, [
+                createElementVNode("view", _hoisted_5$1, [
                   item.tag ? (openBlock(), createElementBlock("text", {
                     key: 0,
                     class: normalizeClass(["hlw-menu-tag", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
@@ -362,7 +377,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               "hover-class": "hlw-menu-item--active",
               onClick: ($event) => handleClick(item)
             }, [
-              createElementVNode("view", _hoisted_6$1, [
+              createElementVNode("view", _hoisted_7$1, [
                 createElementVNode("view", {
                   class: normalizeClass(["hlw-menu-icon", `hlw-menu-icon--${item.iconTheme || "slate"}`])
                 }, [
@@ -370,25 +385,78 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     class: normalizeClass(item.icon)
                   }, null, 2)
                 ], 2),
-                createElementVNode("text", _hoisted_7$1, toDisplayString(item.label), 1)
+                createElementVNode("text", _hoisted_8, toDisplayString(item.label), 1)
               ]),
-              createElementVNode("view", _hoisted_8, [
-                item.loading ? (openBlock(), createElementBlock("text", _hoisted_9)) : createCommentVNode("", true),
+              createElementVNode("view", _hoisted_9, [
+                item.loading ? (openBlock(), createElementBlock("text", _hoisted_10)) : createCommentVNode("", true),
                 item.tag ? (openBlock(), createElementBlock("text", {
                   key: 1,
                   class: normalizeClass(["hlw-menu-tag", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
                 }, toDisplayString(item.tag), 3)) : createCommentVNode("", true),
                 _cache[1] || (_cache[1] = createElementVNode("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" }, null, -1))
               ])
-            ], 8, _hoisted_5$1)),
-            index2 < visibleItems.value.length - 1 ? (openBlock(), createElementBlock("view", _hoisted_10)) : createCommentVNode("", true)
+            ], 8, _hoisted_6$1)),
+            index2 < visibleItems.value.length - 1 ? (openBlock(), createElementBlock("view", _hoisted_11)) : createCommentVNode("", true)
           ], 64);
-        }), 128))
+        }), 128)) : (openBlock(), createElementBlock("view", {
+          key: 2,
+          class: "hlw-menu-grid",
+          style: normalizeStyle({ gridTemplateColumns: `repeat(${props.columns}, 1fr)` })
+        }, [
+          (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-grid-item",
+                "hover-class": "hlw-menu-grid-item--active"
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("view", _hoisted_12, [
+                    createElementVNode("view", {
+                      class: normalizeClass(["hlw-menu-icon hlw-menu-icon--grid", `hlw-menu-icon--${item.iconTheme || "slate"}`])
+                    }, [
+                      createElementVNode("text", {
+                        class: normalizeClass(item.icon)
+                      }, null, 2)
+                    ], 2),
+                    item.tag ? (openBlock(), createElementBlock("text", {
+                      key: 0,
+                      class: normalizeClass(["hlw-menu-badge", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
+                    }, toDisplayString(item.tag), 3)) : createCommentVNode("", true)
+                  ]),
+                  createElementVNode("text", _hoisted_13, toDisplayString(item.label), 1)
+                ]),
+                _: 2
+              }, 1032, ["url"])) : (openBlock(), createElementBlock("view", {
+                key: 1,
+                class: "hlw-menu-grid-item",
+                "hover-class": "hlw-menu-grid-item--active",
+                onClick: ($event) => handleClick(item)
+              }, [
+                createElementVNode("view", _hoisted_15, [
+                  createElementVNode("view", {
+                    class: normalizeClass(["hlw-menu-icon hlw-menu-icon--grid", `hlw-menu-icon--${item.iconTheme || "slate"}`])
+                  }, [
+                    createElementVNode("text", {
+                      class: normalizeClass(item.icon)
+                    }, null, 2)
+                  ], 2),
+                  item.tag ? (openBlock(), createElementBlock("text", {
+                    key: 0,
+                    class: normalizeClass(["hlw-menu-badge", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
+                  }, toDisplayString(item.tag), 3)) : createCommentVNode("", true)
+                ]),
+                createElementVNode("text", _hoisted_16, toDisplayString(item.label), 1)
+              ], 8, _hoisted_14))
+            ], 64);
+          }), 128))
+        ], 4))
       ]);
     };
   }
 });
-const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-ff3b3322"]]);
+const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-3081ac3b"]]);
 const _hoisted_1$1 = { class: "hlw-menu-list" };
 const _hoisted_2$1 = ["onTap"];
 const _hoisted_3$1 = { class: "hlw-menu-list__left" };

package/dist/style.css

@@ -1,4 +1,4 @@
-
+@charset "UTF-8";
 .hlw-avatar[data-v-7e8f98a5] {
     border-radius: 50%;
     overflow: hidden;
@@ -144,39 +144,92 @@ to { transform: rotate(360deg);
     font-size: 26rpx;
     color: #999;
 }
-.hlw-menu[data-v-ff3b3322] {
+
+.hlw-menu[data-v-3081ac3b] {
   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-ff3b3322] {
+
+/* 标题 */
+.hlw-menu-title[data-v-3081ac3b] {
+  padding: 24rpx 32rpx 0;
+}
+.hlw-menu-title text[data-v-3081ac3b] {
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #94a3b8;
+  letter-spacing: 1rpx;
+}
+
+/* ========== 列表模式 ========== */
+.hlw-menu-item[data-v-3081ac3b] {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16rpx 32rpx;
+  padding: 24rpx 32rpx;
 }
-.hlw-menu-item--active[data-v-ff3b3322] {
+.hlw-menu-item--active[data-v-3081ac3b] {
   background: #f8fafc;
 }
-.hlw-menu-divider[data-v-ff3b3322] {
-  margin: 8rpx 0;
+.hlw-menu-divider[data-v-3081ac3b] {
+  margin: 0 32rpx;
   height: 0;
   border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
 }
-.hlw-menu-left[data-v-ff3b3322] {
+.hlw-menu-left[data-v-3081ac3b] {
   display: flex;
   align-items: center;
   gap: 24rpx;
 }
-.hlw-menu-right[data-v-ff3b3322] {
+.hlw-menu-right[data-v-3081ac3b] {
   display: flex;
   align-items: center;
   gap: 16rpx;
 }
-.hlw-menu-icon[data-v-ff3b3322] {
+
+/* ========== 宫格模式 ========== */
+.hlw-menu-grid[data-v-3081ac3b] {
+  display: grid;
+  padding: 16rpx 0 24rpx;
+}
+.hlw-menu-grid-item[data-v-3081ac3b] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12rpx;
+  padding: 16rpx 8rpx;
+}
+.hlw-menu-grid-item--active[data-v-3081ac3b] {
+  background: #f8fafc;
+}
+.hlw-menu-grid-icon-wrap[data-v-3081ac3b] {
+  position: relative;
+  padding-top: 20rpx; /* 预留徽标空间，保证所有格子图标水平对齐 */
+}
+.hlw-menu-badge[data-v-3081ac3b] {
+  position: absolute;
+  top: 0;
+  right: -8rpx;
+  font-size: 18rpx;
+  color: #fff;
+  padding: 0 8rpx;
+  border-radius: 9999rpx;
+  min-width: 28rpx;
+  text-align: center;
+  line-height: 28rpx;
+  height: 28rpx;
+}
+.hlw-menu-grid-label[data-v-3081ac3b] {
+  font-size: 24rpx;
+  color: #334155;
+  text-align: center;
+}
+
+/* ========== 图标 ========== */
+.hlw-menu-icon[data-v-3081ac3b] {
   width: 64rpx;
   height: 64rpx;
   border-radius: var(--radius-md, 16rpx);
@@ -185,76 +238,86 @@ to { transform: rotate(360deg);
   justify-content: center;
   flex-shrink: 0;
 }
-.hlw-menu-icon text[data-v-ff3b3322] {
+.hlw-menu-icon text[data-v-3081ac3b] {
   font-size: 20rpx;
 }
-.hlw-menu-icon--orange[data-v-ff3b3322] {
+.hlw-menu-icon--grid[data-v-3081ac3b] {
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: var(--radius-lg, 24rpx);
+}
+.hlw-menu-icon--grid text[data-v-3081ac3b] {
+  font-size: 32rpx;
+}
+.hlw-menu-icon--orange[data-v-3081ac3b] {
   background: #fff7ed;
   color: #f97316;
 }
-.hlw-menu-icon--purple[data-v-ff3b3322] {
+.hlw-menu-icon--purple[data-v-3081ac3b] {
   background: #faf5ff;
   color: #a855f7;
 }
-.hlw-menu-icon--wechat[data-v-ff3b3322] {
+.hlw-menu-icon--wechat[data-v-3081ac3b] {
   background: #f0fdf4;
-  color: #07C160;
+  color: #07c160;
 }
-.hlw-menu-icon--cyan[data-v-ff3b3322] {
+.hlw-menu-icon--cyan[data-v-3081ac3b] {
   background: #ecfeff;
   color: #06b6d4;
 }
-.hlw-menu-icon--emerald[data-v-ff3b3322] {
+.hlw-menu-icon--emerald[data-v-3081ac3b] {
   background: #ecfdf5;
   color: #10b981;
 }
-.hlw-menu-icon--slate[data-v-ff3b3322] {
+.hlw-menu-icon--slate[data-v-3081ac3b] {
   background: #f1f5f9;
   color: #64748b;
 }
-.hlw-menu-icon--rose[data-v-ff3b3322] {
+.hlw-menu-icon--rose[data-v-3081ac3b] {
   background: #fff1f2;
   color: #f43f5e;
 }
-.hlw-menu-icon--blue[data-v-ff3b3322] {
+.hlw-menu-icon--blue[data-v-3081ac3b] {
   background: #eff6ff;
   color: #3b82f6;
 }
-.hlw-menu-icon--red[data-v-ff3b3322] {
+.hlw-menu-icon--red[data-v-3081ac3b] {
   background: #fef2f2;
   color: #ef4444;
 }
-.hlw-menu-label[data-v-ff3b3322] {
+
+/* ========== 标签 / 角标 ========== */
+.hlw-menu-label[data-v-3081ac3b] {
   font-size: 28rpx;
   font-weight: 500;
   color: #334155;
 }
-.hlw-menu-tag[data-v-ff3b3322] {
+.hlw-menu-tag[data-v-3081ac3b] {
   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[data-v-ff3b3322] {
+.hlw-menu-tag--orange[data-v-3081ac3b] {
   background: #fb923c;
 }
-.hlw-menu-tag--red[data-v-ff3b3322] {
+.hlw-menu-tag--red[data-v-3081ac3b] {
   background: #ef4444;
 }
-.hlw-menu-tag--wechat[data-v-ff3b3322] {
-  background: #07C160;
+.hlw-menu-tag--wechat[data-v-3081ac3b] {
+  background: #07c160;
 }
-.hlw-menu-tag--rose[data-v-ff3b3322] {
+.hlw-menu-tag--rose[data-v-3081ac3b] {
   background: #f43f5e;
 }
-.hlw-menu-tag--blue[data-v-ff3b3322] {
+.hlw-menu-tag--blue[data-v-3081ac3b] {
   background: #3b82f6;
 }
-.hlw-menu-tag-pulse[data-v-ff3b3322] {
-  animation: tag-pulse-ff3b3322 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+.hlw-menu-tag-pulse[data-v-3081ac3b] {
+  animation: tag-pulse-3081ac3b 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
-@keyframes tag-pulse-ff3b3322 {
+@keyframes tag-pulse-3081ac3b {
 0%, 100% {
     opacity: 1;
 }
@@ -262,18 +325,18 @@ to { transform: rotate(360deg);
     opacity: 0.5;
 }
 }
-.hlw-menu-arrow[data-v-ff3b3322] {
+.hlw-menu-arrow[data-v-3081ac3b] {
   color: #d1d5db;
   font-size: 20rpx;
 }
-.hlw-menu-spin[data-v-ff3b3322] {
-  animation: icon-spin-ff3b3322 1s linear infinite;
+.hlw-menu-spin[data-v-3081ac3b] {
+  animation: icon-spin-3081ac3b 1s linear infinite;
 }
-.hlw-menu-muted[data-v-ff3b3322] {
+.hlw-menu-muted[data-v-3081ac3b] {
   color: #94a3b8;
   font-size: 20rpx;
 }
-@keyframes icon-spin-ff3b3322 {
+@keyframes icon-spin-3081ac3b {
 from {
     transform: rotate(0deg);
 }

package/package.json

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

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

@@ -1,35 +1,68 @@
 <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">
-                <view class="hlw-menu-left">
-                    <view class="hlw-menu-icon" :class="`hlw-menu-icon--${item.iconTheme || 'slate'}`">
-                        <text :class="item.icon"></text>
+        <!-- 标题 -->
+        <view v-if="props.title" class="hlw-menu-title">
+            <text>{{ props.title }}</text>
+        </view>
+
+        <!-- 列表模式 -->
+        <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">
+                    <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>
-                    <text class="hlw-menu-label">{{ item.label }}</text>
-                </view>
-                <view class="hlw-menu-right">
-                    <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>
-            </navigator>
+                    <view class="hlw-menu-right">
+                        <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>
+                </navigator>
 
-            <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>
+                <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>
+                        </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.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>
-                    <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.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>
-            </view>
 
-            <view v-if="index < visibleItems.length - 1" class="hlw-menu-divider"></view>
+                <view v-if="index < visibleItems.length - 1" class="hlw-menu-divider"></view>
+            </template>
         </template>
+
+        <!-- 宫格模式 -->
+        <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">
+                    <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>
+                        </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>
+                    <text class="hlw-menu-grid-label">{{ item.label }}</text>
+                </navigator>
+
+                <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>
+                        </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>
+                    <text class="hlw-menu-grid-label">{{ item.label }}</text>
+                </view>
+            </template>
+        </view>
     </view>
 </template>
 
@@ -40,9 +73,20 @@ export type { HlwMenuItem } from "./types";
 
 interface Props {
     items: HlwMenuItem[];
+    /** 标题 */
+    title?: string;
+    /** 布局模式，默认 list */
+    mode?: "list" | "grid";
+    /** 宫格列数，默认 4 */
+    columns?: number;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    title: "",
+    mode: "list",
+    columns: 4,
+});
+
 const emit = defineEmits<{
     click: [item: HlwMenuItem];
 }>();
@@ -61,14 +105,25 @@ const handleClick = (item: HlwMenuItem) => {
     border: 1rpx solid var(--border-color, #e2e8f0);
     overflow: hidden;
     width: 100%;
-    padding: 8rpx 0;
 }
 
+/* 标题 */
+.hlw-menu-title {
+    padding: 24rpx 32rpx 0;
+    text {
+        font-size: 24rpx;
+        font-weight: 600;
+        color: #94a3b8;
+        letter-spacing: 1rpx;
+    }
+}
+
+/* ========== 列表模式 ========== */
 .hlw-menu-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 16rpx 32rpx;
+    padding: 24rpx 32rpx;
 
     &--active {
         background: #f8fafc;
@@ -76,7 +131,7 @@ const handleClick = (item: HlwMenuItem) => {
 }
 
 .hlw-menu-divider {
-    margin: 8rpx 0;
+    margin: 0 32rpx;
     height: 0;
     border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
 }
@@ -93,6 +148,50 @@ const handleClick = (item: HlwMenuItem) => {
     gap: 16rpx;
 }
 
+/* ========== 宫格模式 ========== */
+.hlw-menu-grid {
+    display: grid;
+    padding: 16rpx 0 24rpx;
+}
+
+.hlw-menu-grid-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12rpx;
+    padding: 16rpx 8rpx;
+
+    &--active {
+        background: #f8fafc;
+    }
+}
+
+.hlw-menu-grid-icon-wrap {
+    position: relative;
+    padding-top: 20rpx; /* 预留徽标空间，保证所有格子图标水平对齐 */
+}
+
+.hlw-menu-badge {
+    position: absolute;
+    top: 0;
+    right: -8rpx;
+    font-size: 18rpx;
+    color: #fff;
+    padding: 0 8rpx;
+    border-radius: 9999rpx;
+    min-width: 28rpx;
+    text-align: center;
+    line-height: 28rpx;
+    height: 28rpx;
+}
+
+.hlw-menu-grid-label {
+    font-size: 24rpx;
+    color: #334155;
+    text-align: center;
+}
+
+/* ========== 图标 ========== */
 .hlw-menu-icon {
     width: 64rpx;
     height: 64rpx;
@@ -104,9 +203,16 @@ const handleClick = (item: HlwMenuItem) => {
 
     text { font-size: 20rpx; }
 
+    &--grid {
+        width: 88rpx;
+        height: 88rpx;
+        border-radius: var(--radius-lg, 24rpx);
+        text { font-size: 32rpx; }
+    }
+
     &--orange  { background: #fff7ed; color: #f97316; }
     &--purple  { background: #faf5ff; color: #a855f7; }
-    &--wechat  { background: #f0fdf4; color: #07C160; }
+    &--wechat  { background: #f0fdf4; color: #07c160; }
     &--cyan    { background: #ecfeff; color: #06b6d4; }
     &--emerald { background: #ecfdf5; color: #10b981; }
     &--slate   { background: #f1f5f9; color: #64748b; }
@@ -115,6 +221,7 @@ const handleClick = (item: HlwMenuItem) => {
     &--red     { background: #fef2f2; color: #ef4444; }
 }
 
+/* ========== 标签 / 角标 ========== */
 .hlw-menu-label {
     font-size: 28rpx;
     font-weight: 500;
@@ -127,14 +234,14 @@ const handleClick = (item: HlwMenuItem) => {
     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--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: tag-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
@@ -144,19 +251,9 @@ const handleClick = (item: HlwMenuItem) => {
     50%       { opacity: 0.5; }
 }
 
-.hlw-menu-arrow {
-    color: #d1d5db;
-    font-size: 20rpx;
-}
-
-.hlw-menu-spin {
-    animation: icon-spin 1s linear infinite;
-}
-
-.hlw-menu-muted {
-    color: #94a3b8;
-    font-size: 20rpx;
-}
+.hlw-menu-arrow { color: #d1d5db; font-size: 20rpx; }
+.hlw-menu-spin  { animation: icon-spin 1s linear infinite; }
+.hlw-menu-muted { color: #94a3b8; font-size: 20rpx; }
 
 @keyframes icon-spin {
     from { transform: rotate(0deg); }

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

@@ -1,19 +1,22 @@
+export type HlwMenuIconTheme = "orange" | "purple" | "cyan" | "emerald" | "slate" | "wechat" | "rose" | "blue" | "red";
+export type HlwMenuTagTheme = "orange" | "red" | "wechat" | "rose" | "blue";
+
 export interface HlwMenuItem {
     /** 图标 class，如 'i-fa6-solid-gear' */
     icon: string;
     /** 图标主题色 */
-    iconTheme?: "orange" | "purple" | "cyan" | "emerald" | "slate" | "wechat" | "rose" | "blue" | "red";
+    iconTheme?: HlwMenuIconTheme;
     /** 菜单文字 */
     label: string;
     /** 跳转路径，有值则用 navigator 包裹 */
     url?: string;
-    /** 右侧标签文字 */
+    /** 右侧标签文字（列表模式）/ 角标文字（宫格模式） */
     tag?: string;
     /** 标签主题色 */
-    tagTheme?: "orange" | "red" | "wechat" | "rose" | "blue";
+    tagTheme?: HlwMenuTagTheme;
     /** 标签是否闪烁 */
     tagPulse?: boolean;
-    /** 加载中状态 */
+    /** 加载中状态（列表模式） */
     loading?: boolean;
     /** 是否显示，默认 true */
     visible?: boolean;