@hlw-uni/mp-vue 1.0.19 → 1.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -9,6 +9,8 @@ export interface HlwMenuItem {
9
9
  label: string;
10
10
  /** 跳转路径,有值则用 navigator 包裹 */
11
11
  url?: string;
12
+ /** 右侧纯文字说明(列表模式),如版本号、状态文字 */
13
+ value?: string;
12
14
  /** 右侧标签文字(列表模式)/ 角标文字(宫格模式) */
13
15
  tag?: string;
14
16
  /** 标签主题色 */
package/dist/index.js CHANGED
@@ -310,23 +310,31 @@
310
310
  const _hoisted_3$2 = { class: "hlw-menu-left" };
311
311
  const _hoisted_4$1 = { class: "hlw-menu-label" };
312
312
  const _hoisted_5$1 = { class: "hlw-menu-right" };
313
- const _hoisted_6$1 = ["onClick"];
314
- const _hoisted_7$1 = { class: "hlw-menu-left" };
315
- const _hoisted_8 = { class: "hlw-menu-label" };
316
- const _hoisted_9 = { class: "hlw-menu-right" };
317
- const _hoisted_10 = {
313
+ const _hoisted_6$1 = {
318
314
  key: 0,
319
- class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"
315
+ class: "hlw-menu-value"
320
316
  };
317
+ const _hoisted_7$1 = ["onClick"];
318
+ const _hoisted_8 = { class: "hlw-menu-left" };
319
+ const _hoisted_9 = { class: "hlw-menu-label" };
320
+ const _hoisted_10 = { class: "hlw-menu-right" };
321
321
  const _hoisted_11 = {
322
+ key: 0,
323
+ class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"
324
+ };
325
+ const _hoisted_12 = {
326
+ key: 1,
327
+ class: "hlw-menu-value"
328
+ };
329
+ const _hoisted_13 = {
322
330
  key: 2,
323
331
  class: "hlw-menu-divider"
324
332
  };
325
- const _hoisted_12 = { class: "hlw-menu-grid-icon-wrap" };
326
- const _hoisted_13 = { class: "hlw-menu-grid-label" };
327
- const _hoisted_14 = ["onClick"];
328
- const _hoisted_15 = { class: "hlw-menu-grid-icon-wrap" };
329
- const _hoisted_16 = { class: "hlw-menu-grid-label" };
333
+ const _hoisted_14 = { class: "hlw-menu-grid-icon-wrap" };
334
+ const _hoisted_15 = { class: "hlw-menu-grid-label" };
335
+ const _hoisted_16 = ["onClick"];
336
+ const _hoisted_17 = { class: "hlw-menu-grid-icon-wrap" };
337
+ const _hoisted_18 = { class: "hlw-menu-grid-label" };
330
338
  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
331
339
  __name: "index",
332
340
  props: {
@@ -373,8 +381,9 @@
373
381
  vue.createElementVNode("text", _hoisted_4$1, vue.toDisplayString(item.label), 1)
374
382
  ]),
375
383
  vue.createElementVNode("view", _hoisted_5$1, [
384
+ item.value ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_6$1, vue.toDisplayString(item.value), 1)) : vue.createCommentVNode("", true),
376
385
  item.tag ? (vue.openBlock(), vue.createElementBlock("text", {
377
- key: 0,
386
+ key: 1,
378
387
  class: vue.normalizeClass(["hlw-menu-tag", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
379
388
  }, vue.toDisplayString(item.tag), 3)) : vue.createCommentVNode("", true),
380
389
  _cache[0] || (_cache[0] = vue.createElementVNode("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" }, null, -1))
@@ -387,7 +396,7 @@
387
396
  "hover-class": "hlw-menu-item--active",
388
397
  onClick: ($event) => handleClick(item)
389
398
  }, [
390
- vue.createElementVNode("view", _hoisted_7$1, [
399
+ vue.createElementVNode("view", _hoisted_8, [
391
400
  vue.createElementVNode("view", {
392
401
  class: vue.normalizeClass(["hlw-menu-icon", `hlw-menu-icon--${item.iconTheme || "slate"}`])
393
402
  }, [
@@ -395,18 +404,19 @@
395
404
  class: vue.normalizeClass(item.icon)
396
405
  }, null, 2)
397
406
  ], 2),
398
- vue.createElementVNode("text", _hoisted_8, vue.toDisplayString(item.label), 1)
407
+ vue.createElementVNode("text", _hoisted_9, vue.toDisplayString(item.label), 1)
399
408
  ]),
400
- vue.createElementVNode("view", _hoisted_9, [
401
- item.loading ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_10)) : vue.createCommentVNode("", true),
409
+ vue.createElementVNode("view", _hoisted_10, [
410
+ item.loading ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_11)) : vue.createCommentVNode("", true),
411
+ item.value ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_12, vue.toDisplayString(item.value), 1)) : vue.createCommentVNode("", true),
402
412
  item.tag ? (vue.openBlock(), vue.createElementBlock("text", {
403
- key: 1,
413
+ key: 2,
404
414
  class: vue.normalizeClass(["hlw-menu-tag", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
405
415
  }, vue.toDisplayString(item.tag), 3)) : vue.createCommentVNode("", true),
406
416
  _cache[1] || (_cache[1] = vue.createElementVNode("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" }, null, -1))
407
417
  ])
408
- ], 8, _hoisted_6$1)),
409
- index2 < visibleItems.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_11)) : vue.createCommentVNode("", true)
418
+ ], 8, _hoisted_7$1)),
419
+ index2 < visibleItems.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_13)) : vue.createCommentVNode("", true)
410
420
  ], 64);
411
421
  }), 128)) : (vue.openBlock(), vue.createElementBlock("view", {
412
422
  key: 3,
@@ -422,7 +432,7 @@
422
432
  "hover-class": "hlw-menu-grid-item--active"
423
433
  }, {
424
434
  default: vue.withCtx(() => [
425
- vue.createElementVNode("view", _hoisted_12, [
435
+ vue.createElementVNode("view", _hoisted_14, [
426
436
  vue.createElementVNode("view", {
427
437
  class: vue.normalizeClass(["hlw-menu-icon hlw-menu-icon--grid", `hlw-menu-icon--${item.iconTheme || "slate"}`])
428
438
  }, [
@@ -435,7 +445,7 @@
435
445
  class: vue.normalizeClass(["hlw-menu-badge", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
436
446
  }, vue.toDisplayString(item.tag), 3)) : vue.createCommentVNode("", true)
437
447
  ]),
438
- vue.createElementVNode("text", _hoisted_13, vue.toDisplayString(item.label), 1)
448
+ vue.createElementVNode("text", _hoisted_15, vue.toDisplayString(item.label), 1)
439
449
  ]),
440
450
  _: 2
441
451
  }, 1032, ["url"])) : (vue.openBlock(), vue.createElementBlock("view", {
@@ -444,7 +454,7 @@
444
454
  "hover-class": "hlw-menu-grid-item--active",
445
455
  onClick: ($event) => handleClick(item)
446
456
  }, [
447
- vue.createElementVNode("view", _hoisted_15, [
457
+ vue.createElementVNode("view", _hoisted_17, [
448
458
  vue.createElementVNode("view", {
449
459
  class: vue.normalizeClass(["hlw-menu-icon hlw-menu-icon--grid", `hlw-menu-icon--${item.iconTheme || "slate"}`])
450
460
  }, [
@@ -457,8 +467,8 @@
457
467
  class: vue.normalizeClass(["hlw-menu-badge", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
458
468
  }, vue.toDisplayString(item.tag), 3)) : vue.createCommentVNode("", true)
459
469
  ]),
460
- vue.createElementVNode("text", _hoisted_16, vue.toDisplayString(item.label), 1)
461
- ], 8, _hoisted_14))
470
+ vue.createElementVNode("text", _hoisted_18, vue.toDisplayString(item.label), 1)
471
+ ], 8, _hoisted_16))
462
472
  ], 64);
463
473
  }), 128))
464
474
  ], 4))
@@ -466,7 +476,7 @@
466
476
  };
467
477
  }
468
478
  });
469
- const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-05c3313f"]]);
479
+ const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-1e8beec7"]]);
470
480
  const _hoisted_1$1 = { class: "hlw-menu-list" };
471
481
  const _hoisted_2$1 = ["onTap"];
472
482
  const _hoisted_3$1 = { class: "hlw-menu-list__left" };
package/dist/index.mjs CHANGED
@@ -307,23 +307,31 @@ const _hoisted_2$2 = {
307
307
  const _hoisted_3$2 = { class: "hlw-menu-left" };
308
308
  const _hoisted_4$1 = { class: "hlw-menu-label" };
309
309
  const _hoisted_5$1 = { class: "hlw-menu-right" };
310
- const _hoisted_6$1 = ["onClick"];
311
- const _hoisted_7$1 = { class: "hlw-menu-left" };
312
- const _hoisted_8 = { class: "hlw-menu-label" };
313
- const _hoisted_9 = { class: "hlw-menu-right" };
314
- const _hoisted_10 = {
310
+ const _hoisted_6$1 = {
315
311
  key: 0,
316
- class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"
312
+ class: "hlw-menu-value"
317
313
  };
314
+ const _hoisted_7$1 = ["onClick"];
315
+ const _hoisted_8 = { class: "hlw-menu-left" };
316
+ const _hoisted_9 = { class: "hlw-menu-label" };
317
+ const _hoisted_10 = { class: "hlw-menu-right" };
318
318
  const _hoisted_11 = {
319
+ key: 0,
320
+ class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"
321
+ };
322
+ const _hoisted_12 = {
323
+ key: 1,
324
+ class: "hlw-menu-value"
325
+ };
326
+ const _hoisted_13 = {
319
327
  key: 2,
320
328
  class: "hlw-menu-divider"
321
329
  };
322
- const _hoisted_12 = { class: "hlw-menu-grid-icon-wrap" };
323
- const _hoisted_13 = { class: "hlw-menu-grid-label" };
324
- const _hoisted_14 = ["onClick"];
325
- const _hoisted_15 = { class: "hlw-menu-grid-icon-wrap" };
326
- const _hoisted_16 = { class: "hlw-menu-grid-label" };
330
+ const _hoisted_14 = { class: "hlw-menu-grid-icon-wrap" };
331
+ const _hoisted_15 = { class: "hlw-menu-grid-label" };
332
+ const _hoisted_16 = ["onClick"];
333
+ const _hoisted_17 = { class: "hlw-menu-grid-icon-wrap" };
334
+ const _hoisted_18 = { class: "hlw-menu-grid-label" };
327
335
  const _sfc_main$2 = /* @__PURE__ */ defineComponent({
328
336
  __name: "index",
329
337
  props: {
@@ -370,8 +378,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
370
378
  createElementVNode("text", _hoisted_4$1, toDisplayString(item.label), 1)
371
379
  ]),
372
380
  createElementVNode("view", _hoisted_5$1, [
381
+ item.value ? (openBlock(), createElementBlock("text", _hoisted_6$1, toDisplayString(item.value), 1)) : createCommentVNode("", true),
373
382
  item.tag ? (openBlock(), createElementBlock("text", {
374
- key: 0,
383
+ key: 1,
375
384
  class: normalizeClass(["hlw-menu-tag", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
376
385
  }, toDisplayString(item.tag), 3)) : createCommentVNode("", true),
377
386
  _cache[0] || (_cache[0] = createElementVNode("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" }, null, -1))
@@ -384,7 +393,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
384
393
  "hover-class": "hlw-menu-item--active",
385
394
  onClick: ($event) => handleClick(item)
386
395
  }, [
387
- createElementVNode("view", _hoisted_7$1, [
396
+ createElementVNode("view", _hoisted_8, [
388
397
  createElementVNode("view", {
389
398
  class: normalizeClass(["hlw-menu-icon", `hlw-menu-icon--${item.iconTheme || "slate"}`])
390
399
  }, [
@@ -392,18 +401,19 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
392
401
  class: normalizeClass(item.icon)
393
402
  }, null, 2)
394
403
  ], 2),
395
- createElementVNode("text", _hoisted_8, toDisplayString(item.label), 1)
404
+ createElementVNode("text", _hoisted_9, toDisplayString(item.label), 1)
396
405
  ]),
397
- createElementVNode("view", _hoisted_9, [
398
- item.loading ? (openBlock(), createElementBlock("text", _hoisted_10)) : createCommentVNode("", true),
406
+ createElementVNode("view", _hoisted_10, [
407
+ item.loading ? (openBlock(), createElementBlock("text", _hoisted_11)) : createCommentVNode("", true),
408
+ item.value ? (openBlock(), createElementBlock("text", _hoisted_12, toDisplayString(item.value), 1)) : createCommentVNode("", true),
399
409
  item.tag ? (openBlock(), createElementBlock("text", {
400
- key: 1,
410
+ key: 2,
401
411
  class: normalizeClass(["hlw-menu-tag", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
402
412
  }, toDisplayString(item.tag), 3)) : createCommentVNode("", true),
403
413
  _cache[1] || (_cache[1] = createElementVNode("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" }, null, -1))
404
414
  ])
405
- ], 8, _hoisted_6$1)),
406
- index2 < visibleItems.value.length - 1 ? (openBlock(), createElementBlock("view", _hoisted_11)) : createCommentVNode("", true)
415
+ ], 8, _hoisted_7$1)),
416
+ index2 < visibleItems.value.length - 1 ? (openBlock(), createElementBlock("view", _hoisted_13)) : createCommentVNode("", true)
407
417
  ], 64);
408
418
  }), 128)) : (openBlock(), createElementBlock("view", {
409
419
  key: 3,
@@ -419,7 +429,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
419
429
  "hover-class": "hlw-menu-grid-item--active"
420
430
  }, {
421
431
  default: withCtx(() => [
422
- createElementVNode("view", _hoisted_12, [
432
+ createElementVNode("view", _hoisted_14, [
423
433
  createElementVNode("view", {
424
434
  class: normalizeClass(["hlw-menu-icon hlw-menu-icon--grid", `hlw-menu-icon--${item.iconTheme || "slate"}`])
425
435
  }, [
@@ -432,7 +442,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
432
442
  class: normalizeClass(["hlw-menu-badge", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
433
443
  }, toDisplayString(item.tag), 3)) : createCommentVNode("", true)
434
444
  ]),
435
- createElementVNode("text", _hoisted_13, toDisplayString(item.label), 1)
445
+ createElementVNode("text", _hoisted_15, toDisplayString(item.label), 1)
436
446
  ]),
437
447
  _: 2
438
448
  }, 1032, ["url"])) : (openBlock(), createElementBlock("view", {
@@ -441,7 +451,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
441
451
  "hover-class": "hlw-menu-grid-item--active",
442
452
  onClick: ($event) => handleClick(item)
443
453
  }, [
444
- createElementVNode("view", _hoisted_15, [
454
+ createElementVNode("view", _hoisted_17, [
445
455
  createElementVNode("view", {
446
456
  class: normalizeClass(["hlw-menu-icon hlw-menu-icon--grid", `hlw-menu-icon--${item.iconTheme || "slate"}`])
447
457
  }, [
@@ -454,8 +464,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
454
464
  class: normalizeClass(["hlw-menu-badge", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
455
465
  }, toDisplayString(item.tag), 3)) : createCommentVNode("", true)
456
466
  ]),
457
- createElementVNode("text", _hoisted_16, toDisplayString(item.label), 1)
458
- ], 8, _hoisted_14))
467
+ createElementVNode("text", _hoisted_18, toDisplayString(item.label), 1)
468
+ ], 8, _hoisted_16))
459
469
  ], 64);
460
470
  }), 128))
461
471
  ], 4))
@@ -463,7 +473,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
463
473
  };
464
474
  }
465
475
  });
466
- const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-05c3313f"]]);
476
+ const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-1e8beec7"]]);
467
477
  const _hoisted_1$1 = { class: "hlw-menu-list" };
468
478
  const _hoisted_2$1 = ["onTap"];
469
479
  const _hoisted_3$1 = { class: "hlw-menu-list__left" };
package/dist/style.css CHANGED
@@ -145,78 +145,78 @@ to { transform: rotate(360deg);
145
145
  color: #999;
146
146
  }
147
147
 
148
- .hlw-menu[data-v-05c3313f] {
148
+ .hlw-menu[data-v-1e8beec7] {
149
149
  background: #fff;
150
150
  border-radius: var(--radius-lg, 24rpx);
151
151
  border: 1rpx solid var(--border-color, #e2e8f0);
152
152
  overflow: hidden;
153
153
  width: 100%;
154
154
  }
155
- .hlw-menu--no-border[data-v-05c3313f] {
155
+ .hlw-menu--no-border[data-v-1e8beec7] {
156
156
  border: none;
157
157
  }
158
158
 
159
159
  /* 标题 */
160
- .hlw-menu-title[data-v-05c3313f] {
160
+ .hlw-menu-title[data-v-1e8beec7] {
161
161
  padding: 24rpx 32rpx;
162
162
  }
163
- .hlw-menu-title text[data-v-05c3313f] {
163
+ .hlw-menu-title text[data-v-1e8beec7] {
164
164
  font-size: 24rpx;
165
165
  font-weight: 600;
166
166
  color: #94a3b8;
167
167
  letter-spacing: 1rpx;
168
168
  }
169
- .hlw-menu-title-divider[data-v-05c3313f] {
169
+ .hlw-menu-title-divider[data-v-1e8beec7] {
170
170
  height: 0;
171
171
  border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
172
172
  }
173
173
 
174
174
  /* ========== 列表模式 ========== */
175
- .hlw-menu-item[data-v-05c3313f] {
175
+ .hlw-menu-item[data-v-1e8beec7] {
176
176
  display: flex;
177
177
  align-items: center;
178
178
  justify-content: space-between;
179
179
  padding: 24rpx 32rpx;
180
180
  }
181
- .hlw-menu-item--active[data-v-05c3313f] {
181
+ .hlw-menu-item--active[data-v-1e8beec7] {
182
182
  background: #f8fafc;
183
183
  }
184
- .hlw-menu-divider[data-v-05c3313f] {
184
+ .hlw-menu-divider[data-v-1e8beec7] {
185
185
  margin: 0 32rpx;
186
186
  height: 0;
187
187
  border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
188
188
  }
189
- .hlw-menu-left[data-v-05c3313f] {
189
+ .hlw-menu-left[data-v-1e8beec7] {
190
190
  display: flex;
191
191
  align-items: center;
192
192
  gap: 24rpx;
193
193
  }
194
- .hlw-menu-right[data-v-05c3313f] {
194
+ .hlw-menu-right[data-v-1e8beec7] {
195
195
  display: flex;
196
196
  align-items: center;
197
197
  gap: 16rpx;
198
198
  }
199
199
 
200
200
  /* ========== 宫格模式 ========== */
201
- .hlw-menu-grid[data-v-05c3313f] {
201
+ .hlw-menu-grid[data-v-1e8beec7] {
202
202
  display: grid;
203
- padding: 16rpx 0 24rpx;
203
+ padding: 6rpx 0 24rpx;
204
204
  }
205
- .hlw-menu-grid-item[data-v-05c3313f] {
205
+ .hlw-menu-grid-item[data-v-1e8beec7] {
206
206
  display: flex;
207
207
  flex-direction: column;
208
208
  align-items: center;
209
- gap: 12rpx;
210
- padding: 16rpx 8rpx;
209
+ gap: 10rpx;
210
+ padding: 12rpx 8rpx;
211
211
  }
212
- .hlw-menu-grid-item--active[data-v-05c3313f] {
212
+ .hlw-menu-grid-item--active[data-v-1e8beec7] {
213
213
  background: #f8fafc;
214
214
  }
215
- .hlw-menu-grid-icon-wrap[data-v-05c3313f] {
215
+ .hlw-menu-grid-icon-wrap[data-v-1e8beec7] {
216
216
  position: relative;
217
217
  padding-top: 20rpx; /* 预留徽标空间,保证所有格子图标水平对齐 */
218
218
  }
219
- .hlw-menu-badge[data-v-05c3313f] {
219
+ .hlw-menu-badge[data-v-1e8beec7] {
220
220
  position: absolute;
221
221
  top: 0;
222
222
  right: -8rpx;
@@ -229,14 +229,14 @@ to { transform: rotate(360deg);
229
229
  line-height: 28rpx;
230
230
  height: 28rpx;
231
231
  }
232
- .hlw-menu-grid-label[data-v-05c3313f] {
232
+ .hlw-menu-grid-label[data-v-1e8beec7] {
233
233
  font-size: 24rpx;
234
234
  color: #334155;
235
235
  text-align: center;
236
236
  }
237
237
 
238
238
  /* ========== 图标 ========== */
239
- .hlw-menu-icon[data-v-05c3313f] {
239
+ .hlw-menu-icon[data-v-1e8beec7] {
240
240
  width: 64rpx;
241
241
  height: 64rpx;
242
242
  border-radius: var(--radius-md, 16rpx);
@@ -245,86 +245,90 @@ to { transform: rotate(360deg);
245
245
  justify-content: center;
246
246
  flex-shrink: 0;
247
247
  }
248
- .hlw-menu-icon text[data-v-05c3313f] {
248
+ .hlw-menu-icon text[data-v-1e8beec7] {
249
249
  font-size: 20rpx;
250
250
  }
251
- .hlw-menu-icon--grid[data-v-05c3313f] {
251
+ .hlw-menu-icon--grid[data-v-1e8beec7] {
252
252
  width: 88rpx;
253
253
  height: 88rpx;
254
254
  border-radius: var(--radius-lg, 24rpx);
255
255
  }
256
- .hlw-menu-icon--grid text[data-v-05c3313f] {
256
+ .hlw-menu-icon--grid text[data-v-1e8beec7] {
257
257
  font-size: 32rpx;
258
258
  }
259
- .hlw-menu-icon--orange[data-v-05c3313f] {
259
+ .hlw-menu-icon--orange[data-v-1e8beec7] {
260
260
  background: #fff7ed;
261
261
  color: #f97316;
262
262
  }
263
- .hlw-menu-icon--purple[data-v-05c3313f] {
263
+ .hlw-menu-icon--purple[data-v-1e8beec7] {
264
264
  background: #faf5ff;
265
265
  color: #a855f7;
266
266
  }
267
- .hlw-menu-icon--wechat[data-v-05c3313f] {
267
+ .hlw-menu-icon--wechat[data-v-1e8beec7] {
268
268
  background: #f0fdf4;
269
269
  color: #07c160;
270
270
  }
271
- .hlw-menu-icon--cyan[data-v-05c3313f] {
271
+ .hlw-menu-icon--cyan[data-v-1e8beec7] {
272
272
  background: #ecfeff;
273
273
  color: #06b6d4;
274
274
  }
275
- .hlw-menu-icon--emerald[data-v-05c3313f] {
275
+ .hlw-menu-icon--emerald[data-v-1e8beec7] {
276
276
  background: #ecfdf5;
277
277
  color: #10b981;
278
278
  }
279
- .hlw-menu-icon--slate[data-v-05c3313f] {
279
+ .hlw-menu-icon--slate[data-v-1e8beec7] {
280
280
  background: #f1f5f9;
281
281
  color: #64748b;
282
282
  }
283
- .hlw-menu-icon--rose[data-v-05c3313f] {
283
+ .hlw-menu-icon--rose[data-v-1e8beec7] {
284
284
  background: #fff1f2;
285
285
  color: #f43f5e;
286
286
  }
287
- .hlw-menu-icon--blue[data-v-05c3313f] {
287
+ .hlw-menu-icon--blue[data-v-1e8beec7] {
288
288
  background: #eff6ff;
289
289
  color: #3b82f6;
290
290
  }
291
- .hlw-menu-icon--red[data-v-05c3313f] {
291
+ .hlw-menu-icon--red[data-v-1e8beec7] {
292
292
  background: #fef2f2;
293
293
  color: #ef4444;
294
294
  }
295
295
 
296
296
  /* ========== 标签 / 角标 ========== */
297
- .hlw-menu-label[data-v-05c3313f] {
297
+ .hlw-menu-label[data-v-1e8beec7] {
298
298
  font-size: 28rpx;
299
299
  font-weight: 500;
300
300
  color: #334155;
301
301
  }
302
- .hlw-menu-tag[data-v-05c3313f] {
302
+ .hlw-menu-value[data-v-1e8beec7] {
303
+ font-size: 26rpx;
304
+ color: #94a3b8;
305
+ }
306
+ .hlw-menu-tag[data-v-1e8beec7] {
303
307
  font-size: 20rpx;
304
308
  color: #fff;
305
309
  padding: 2rpx 12rpx;
306
310
  border-radius: 9999rpx;
307
311
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
308
312
  }
309
- .hlw-menu-tag--orange[data-v-05c3313f] {
313
+ .hlw-menu-tag--orange[data-v-1e8beec7] {
310
314
  background: #fb923c;
311
315
  }
312
- .hlw-menu-tag--red[data-v-05c3313f] {
316
+ .hlw-menu-tag--red[data-v-1e8beec7] {
313
317
  background: #ef4444;
314
318
  }
315
- .hlw-menu-tag--wechat[data-v-05c3313f] {
319
+ .hlw-menu-tag--wechat[data-v-1e8beec7] {
316
320
  background: #07c160;
317
321
  }
318
- .hlw-menu-tag--rose[data-v-05c3313f] {
322
+ .hlw-menu-tag--rose[data-v-1e8beec7] {
319
323
  background: #f43f5e;
320
324
  }
321
- .hlw-menu-tag--blue[data-v-05c3313f] {
325
+ .hlw-menu-tag--blue[data-v-1e8beec7] {
322
326
  background: #3b82f6;
323
327
  }
324
- .hlw-menu-tag-pulse[data-v-05c3313f] {
325
- animation: tag-pulse-05c3313f 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
328
+ .hlw-menu-tag-pulse[data-v-1e8beec7] {
329
+ animation: tag-pulse-1e8beec7 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
326
330
  }
327
- @keyframes tag-pulse-05c3313f {
331
+ @keyframes tag-pulse-1e8beec7 {
328
332
  0%, 100% {
329
333
  opacity: 1;
330
334
  }
@@ -332,18 +336,18 @@ to { transform: rotate(360deg);
332
336
  opacity: 0.5;
333
337
  }
334
338
  }
335
- .hlw-menu-arrow[data-v-05c3313f] {
339
+ .hlw-menu-arrow[data-v-1e8beec7] {
336
340
  color: #d1d5db;
337
341
  font-size: 20rpx;
338
342
  }
339
- .hlw-menu-spin[data-v-05c3313f] {
340
- animation: icon-spin-05c3313f 1s linear infinite;
343
+ .hlw-menu-spin[data-v-1e8beec7] {
344
+ animation: icon-spin-1e8beec7 1s linear infinite;
341
345
  }
342
- .hlw-menu-muted[data-v-05c3313f] {
346
+ .hlw-menu-muted[data-v-1e8beec7] {
343
347
  color: #94a3b8;
344
348
  font-size: 20rpx;
345
349
  }
346
- @keyframes icon-spin-05c3313f {
350
+ @keyframes icon-spin-1e8beec7 {
347
351
  from {
348
352
  transform: rotate(0deg);
349
353
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hlw-uni/mp-vue",
3
- "version": "1.0.19",
3
+ "version": "1.0.21",
4
4
  "description": "hlw-uni Vue 组件库 — 供小程序业务方使用的 UI 组件集合",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -17,6 +17,7 @@
17
17
  <text class="hlw-menu-label">{{ item.label }}</text>
18
18
  </view>
19
19
  <view class="hlw-menu-right">
20
+ <text v-if="item.value" class="hlw-menu-value">{{ item.value }}</text>
20
21
  <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>
21
22
  <text class="i-fa6-solid-chevron-right hlw-menu-arrow"></text>
22
23
  </view>
@@ -31,6 +32,7 @@
31
32
  </view>
32
33
  <view class="hlw-menu-right">
33
34
  <text v-if="item.loading" class="i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"></text>
35
+ <text v-if="item.value" class="hlw-menu-value">{{ item.value }}</text>
34
36
  <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>
35
37
  <text class="i-fa6-solid-chevron-right hlw-menu-arrow"></text>
36
38
  </view>
@@ -164,15 +166,15 @@ const handleClick = (item: HlwMenuItem) => {
164
166
  /* ========== 宫格模式 ========== */
165
167
  .hlw-menu-grid {
166
168
  display: grid;
167
- padding: 16rpx 0 24rpx;
169
+ padding: 6rpx 0 24rpx;
168
170
  }
169
171
 
170
172
  .hlw-menu-grid-item {
171
173
  display: flex;
172
174
  flex-direction: column;
173
175
  align-items: center;
174
- gap: 12rpx;
175
- padding: 16rpx 8rpx;
176
+ gap: 10rpx;
177
+ padding: 12rpx 8rpx;
176
178
 
177
179
  &--active {
178
180
  background: #f8fafc;
@@ -214,24 +216,55 @@ const handleClick = (item: HlwMenuItem) => {
214
216
  justify-content: center;
215
217
  flex-shrink: 0;
216
218
 
217
- text { font-size: 20rpx; }
219
+ text {
220
+ font-size: 20rpx;
221
+ }
218
222
 
219
223
  &--grid {
220
224
  width: 88rpx;
221
225
  height: 88rpx;
222
226
  border-radius: var(--radius-lg, 24rpx);
223
- text { font-size: 32rpx; }
227
+ text {
228
+ font-size: 32rpx;
229
+ }
224
230
  }
225
231
 
226
- &--orange { background: #fff7ed; color: #f97316; }
227
- &--purple { background: #faf5ff; color: #a855f7; }
228
- &--wechat { background: #f0fdf4; color: #07c160; }
229
- &--cyan { background: #ecfeff; color: #06b6d4; }
230
- &--emerald { background: #ecfdf5; color: #10b981; }
231
- &--slate { background: #f1f5f9; color: #64748b; }
232
- &--rose { background: #fff1f2; color: #f43f5e; }
233
- &--blue { background: #eff6ff; color: #3b82f6; }
234
- &--red { background: #fef2f2; color: #ef4444; }
232
+ &--orange {
233
+ background: #fff7ed;
234
+ color: #f97316;
235
+ }
236
+ &--purple {
237
+ background: #faf5ff;
238
+ color: #a855f7;
239
+ }
240
+ &--wechat {
241
+ background: #f0fdf4;
242
+ color: #07c160;
243
+ }
244
+ &--cyan {
245
+ background: #ecfeff;
246
+ color: #06b6d4;
247
+ }
248
+ &--emerald {
249
+ background: #ecfdf5;
250
+ color: #10b981;
251
+ }
252
+ &--slate {
253
+ background: #f1f5f9;
254
+ color: #64748b;
255
+ }
256
+ &--rose {
257
+ background: #fff1f2;
258
+ color: #f43f5e;
259
+ }
260
+ &--blue {
261
+ background: #eff6ff;
262
+ color: #3b82f6;
263
+ }
264
+ &--red {
265
+ background: #fef2f2;
266
+ color: #ef4444;
267
+ }
235
268
  }
236
269
 
237
270
  /* ========== 标签 / 角标 ========== */
@@ -241,6 +274,11 @@ const handleClick = (item: HlwMenuItem) => {
241
274
  color: #334155;
242
275
  }
243
276
 
277
+ .hlw-menu-value {
278
+ font-size: 26rpx;
279
+ color: #94a3b8;
280
+ }
281
+
244
282
  .hlw-menu-tag {
245
283
  font-size: 20rpx;
246
284
  color: #fff;
@@ -249,27 +287,54 @@ const handleClick = (item: HlwMenuItem) => {
249
287
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
250
288
  }
251
289
 
252
- .hlw-menu-tag--orange { background: #fb923c; }
253
- .hlw-menu-tag--red { background: #ef4444; }
254
- .hlw-menu-tag--wechat { background: #07c160; }
255
- .hlw-menu-tag--rose { background: #f43f5e; }
256
- .hlw-menu-tag--blue { background: #3b82f6; }
290
+ .hlw-menu-tag--orange {
291
+ background: #fb923c;
292
+ }
293
+ .hlw-menu-tag--red {
294
+ background: #ef4444;
295
+ }
296
+ .hlw-menu-tag--wechat {
297
+ background: #07c160;
298
+ }
299
+ .hlw-menu-tag--rose {
300
+ background: #f43f5e;
301
+ }
302
+ .hlw-menu-tag--blue {
303
+ background: #3b82f6;
304
+ }
257
305
 
258
306
  .hlw-menu-tag-pulse {
259
307
  animation: tag-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
260
308
  }
261
309
 
262
310
  @keyframes tag-pulse {
263
- 0%, 100% { opacity: 1; }
264
- 50% { opacity: 0.5; }
311
+ 0%,
312
+ 100% {
313
+ opacity: 1;
314
+ }
315
+ 50% {
316
+ opacity: 0.5;
317
+ }
265
318
  }
266
319
 
267
- .hlw-menu-arrow { color: #d1d5db; font-size: 20rpx; }
268
- .hlw-menu-spin { animation: icon-spin 1s linear infinite; }
269
- .hlw-menu-muted { color: #94a3b8; font-size: 20rpx; }
320
+ .hlw-menu-arrow {
321
+ color: #d1d5db;
322
+ font-size: 20rpx;
323
+ }
324
+ .hlw-menu-spin {
325
+ animation: icon-spin 1s linear infinite;
326
+ }
327
+ .hlw-menu-muted {
328
+ color: #94a3b8;
329
+ font-size: 20rpx;
330
+ }
270
331
 
271
332
  @keyframes icon-spin {
272
- from { transform: rotate(0deg); }
273
- to { transform: rotate(360deg); }
333
+ from {
334
+ transform: rotate(0deg);
335
+ }
336
+ to {
337
+ transform: rotate(360deg);
338
+ }
274
339
  }
275
340
  </style>
@@ -10,6 +10,8 @@ export interface HlwMenuItem {
10
10
  label: string;
11
11
  /** 跳转路径,有值则用 navigator 包裹 */
12
12
  url?: string;
13
+ /** 右侧纯文字说明(列表模式),如版本号、状态文字 */
14
+ value?: string;
13
15
  /** 右侧标签文字(列表模式)/ 角标文字(宫格模式) */
14
16
  tag?: string;
15
17
  /** 标签主题色 */