@hlw-uni/mp-vue 1.0.34 → 1.1.0

package/dist/style.css

@@ -32,7 +32,87 @@
 }
 .hlw-avatar--large  .hlw-avatar__initial[data-v-89dcbc96] { font-size: var(--font-xl, 40rpx);
 }
-
+.hlw-btn[data-v-199073be] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  border: none;
+  font-weight: 500;
+  line-height: 1;
+  transition: opacity 0.2s;
+}
+.hlw-btn[data-v-199073be]::after {
+  display: none;
+}
+.hlw-btn[data-v-199073be]:active {
+  opacity: 0.7;
+}
+.hlw-btn--primary[data-v-199073be] {
+  background: var(--primary-color);
+  color: #fff;
+}
+.hlw-btn--outline[data-v-199073be] {
+  background: transparent;
+  color: var(--primary-color);
+  border: 2rpx solid var(--primary-color);
+}
+.hlw-btn--text[data-v-199073be] {
+  background: transparent;
+  color: var(--primary-color);
+}
+.hlw-btn--ghost[data-v-199073be] {
+  background: transparent;
+  color: #fff;
+  border: 2rpx solid rgba(255, 255, 255, 0.6);
+}
+.hlw-btn--small[data-v-199073be] {
+  padding: 8rpx 20rpx;
+  font-size: var(--font-xs, 20rpx);
+  border-radius: var(--radius-sm, 8rpx);
+}
+.hlw-btn--medium[data-v-199073be] {
+  padding: 16rpx 32rpx;
+  font-size: var(--font-sm, 24rpx);
+  border-radius: var(--radius-md, 16rpx);
+}
+.hlw-btn--large[data-v-199073be] {
+  padding: 24rpx 48rpx;
+  font-size: var(--font-base, 28rpx);
+  border-radius: var(--radius-md, 16rpx);
+}
+.hlw-btn--block[data-v-199073be] {
+  display: flex;
+  width: 100%;
+}
+.hlw-btn--round[data-v-199073be] {
+  border-radius: 999rpx;
+}
+.hlw-btn--disabled[data-v-199073be] {
+  opacity: 0.4;
+}
+.hlw-btn--disabled[data-v-199073be]:active {
+  opacity: 0.4;
+}
+.hlw-btn--loading[data-v-199073be] {
+  opacity: 0.7;
+}
+.hlw-btn-icon[data-v-199073be] {
+  font-size: 1.1em;
+}
+.hlw-btn-spinner[data-v-199073be] {
+  width: 28rpx;
+  height: 28rpx;
+  border: 3rpx solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: hlw-spin-199073be 0.6s linear infinite;
+}
+@keyframes hlw-spin-199073be {
+to {
+    transform: rotate(360deg);
+}
+}
 .hlw-card[data-v-cf55252e] {
   width: 100%;
   background: #fff;
@@ -121,6 +201,80 @@
 .hlw-card-footer-right[data-v-cf55252e] {
   flex-shrink: 0;
   margin-left: 16rpx;
+}.hlw-cell[data-v-2bd8c24d] {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 32rpx;
+  background: #fff;
+  gap: 20rpx;
+}
+.hlw-cell--border[data-v-2bd8c24d] {
+  border-bottom: 1rpx solid var(--border-color-light, #f1f5f9);
+}
+.hlw-cell--border[data-v-2bd8c24d]:last-child {
+  border-bottom: none;
+}
+.hlw-cell--hover[data-v-2bd8c24d] {
+  background: #f8fafc;
+}
+.hlw-cell-icon[data-v-2bd8c24d] {
+  font-size: var(--font-lg, 36rpx);
+  color: var(--primary-color, #3b82f6);
+  flex-shrink: 0;
+}
+.hlw-cell-body[data-v-2bd8c24d] {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.hlw-cell-title[data-v-2bd8c24d] {
+  font-size: var(--font-base, 28rpx);
+  color: #1e293b;
+}
+.hlw-cell-label[data-v-2bd8c24d] {
+  font-size: var(--font-xs, 20rpx);
+  color: #94a3b8;
+  margin-top: 4rpx;
+}
+.hlw-cell-value[data-v-2bd8c24d] {
+  font-size: var(--font-sm, 24rpx);
+  color: #94a3b8;
+  flex-shrink: 0;
+}
+.hlw-cell-arrow[data-v-2bd8c24d] {
+  width: 16rpx;
+  height: 16rpx;
+  border-top: 3rpx solid #c0c4cc;
+  border-right: 3rpx solid #c0c4cc;
+  transform: rotate(45deg);
+  flex-shrink: 0;
+}.hlw-divider[data-v-e34c6f87] {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 0;
+}
+.hlw-divider-line[data-v-e34c6f87] {
+  flex: 1;
+  height: 1rpx;
+  background: var(--border-color, #e2e8f0);
+}
+.hlw-divider--dashed .hlw-divider-line[data-v-e34c6f87] {
+  background: none;
+  border-top: 1rpx dashed var(--border-color, #e2e8f0);
+}
+.hlw-divider-text[data-v-e34c6f87] {
+  padding: 0 24rpx;
+  font-size: var(--font-xs, 20rpx);
+  color: #94a3b8;
+  white-space: nowrap;
+}
+.hlw-divider--left .hlw-divider-line[data-v-e34c6f87]:first-child {
+  max-width: 60rpx;
+}
+.hlw-divider--right .hlw-divider-line[data-v-e34c6f87]:last-child {
+  max-width: 60rpx;
 }
 .hlw-empty[data-v-08b8d8fe] {
     display: flex;
@@ -439,6 +593,121 @@ from {
 to {
     transform: rotate(360deg);
 }
+}.hlw-modal-mask[data-v-fa78c7c6] {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  animation: hlw-fade-in-fa78c7c6 0.2s;
+}
+.hlw-modal[data-v-fa78c7c6] {
+  width: 80%;
+  max-width: 600rpx;
+  background: #fff;
+  border-radius: var(--radius-xl, 32rpx);
+  overflow: hidden;
+  animation: hlw-scale-in-fa78c7c6 0.25s ease;
+}
+.hlw-modal-title[data-v-fa78c7c6] {
+  padding: 40rpx 32rpx 0;
+  text-align: center;
+  font-size: var(--font-md, 32rpx);
+  font-weight: 600;
+  color: #1e293b;
+}
+.hlw-modal-body[data-v-fa78c7c6] {
+  padding: 32rpx;
+  font-size: var(--font-base, 28rpx);
+  color: #475569;
+  text-align: center;
+  line-height: 1.6;
+}
+.hlw-modal-footer[data-v-fa78c7c6] {
+  display: flex;
+  border-top: 1rpx solid var(--border-color-light, #f1f5f9);
+}
+.hlw-modal-btn[data-v-fa78c7c6] {
+  flex: 1;
+  padding: 24rpx 0;
+  text-align: center;
+  font-size: var(--font-base, 28rpx);
+  font-weight: 500;
+}
+.hlw-modal-btn[data-v-fa78c7c6]:active {
+  background: #f8fafc;
+}
+.hlw-modal-btn--cancel[data-v-fa78c7c6] {
+  color: #64748b;
+  border-right: 1rpx solid var(--border-color-light, #f1f5f9);
+}
+.hlw-modal-btn--confirm[data-v-fa78c7c6] {
+  color: var(--primary-color, #3b82f6);
+}
+@keyframes hlw-fade-in-fa78c7c6 {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@keyframes hlw-scale-in-fa78c7c6 {
+from {
+    transform: scale(0.9);
+    opacity: 0;
+}
+to {
+    transform: scale(1);
+    opacity: 1;
+}
+}.hlw-notice[data-v-e3f87071] {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 24rpx;
+  gap: 12rpx;
+  font-size: var(--font-sm, 24rpx);
+}
+.hlw-notice-left-icon[data-v-e3f87071] {
+  flex-shrink: 0;
+  font-size: var(--font-base, 28rpx);
+}
+.hlw-notice-wrap[data-v-e3f87071] {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.hlw-notice-scroll[data-v-e3f87071] {
+  display: inline-block;
+  white-space: nowrap;
+  animation: hlw-notice-scroll-e3f87071 linear infinite;
+  padding-left: 100%;
+}
+.hlw-notice-text[data-v-e3f87071] {
+  display: inline;
+}
+.hlw-notice-text--ellipsis[data-v-e3f87071] {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.hlw-notice-close[data-v-e3f87071] {
+  flex-shrink: 0;
+  font-size: 32rpx;
+  line-height: 1;
+  opacity: 0.6;
+  padding: 0 4rpx;
+}
+@keyframes hlw-notice-scroll-e3f87071 {
+0% {
+    transform: translateX(0);
+}
+100% {
+    transform: translateX(-100%);
+}
 }.hlw-page[data-v-d8833363] {
   width: 100%;
   height: 100vh;
@@ -456,4 +725,281 @@ to {
 }
 .hlw-page-footer[data-v-d8833363] {
   flex-shrink: 0;
+}.hlw-popup-mask[data-v-a6f8d1a5] {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  animation: hlw-fade-in-a6f8d1a5 0.25s;
+}
+.hlw-popup[data-v-a6f8d1a5] {
+  position: fixed;
+  z-index: 1001;
+  background: #fff;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.hlw-popup--bottom[data-v-a6f8d1a5] {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-height: 80vh;
+  transform: translateY(100%);
+}
+.hlw-popup--bottom.hlw-popup--show[data-v-a6f8d1a5] {
+  transform: translateY(0);
+}
+.hlw-popup--bottom.hlw-popup--round[data-v-a6f8d1a5] {
+  border-radius: var(--radius-xl, 32rpx) var(--radius-xl, 32rpx) 0 0;
+}
+.hlw-popup--top[data-v-a6f8d1a5] {
+  left: 0;
+  right: 0;
+  top: 0;
+  max-height: 80vh;
+  transform: translateY(-100%);
+}
+.hlw-popup--top.hlw-popup--show[data-v-a6f8d1a5] {
+  transform: translateY(0);
+}
+.hlw-popup--top.hlw-popup--round[data-v-a6f8d1a5] {
+  border-radius: 0 0 var(--radius-xl, 32rpx) var(--radius-xl, 32rpx);
+}
+.hlw-popup--center[data-v-a6f8d1a5] {
+  left: 50%;
+  top: 50%;
+  width: 80%;
+  transform: translate(-50%, -50%) scale(0.9);
+  opacity: 0;
+  border-radius: var(--radius-xl, 32rpx);
+}
+.hlw-popup--center.hlw-popup--show[data-v-a6f8d1a5] {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+}
+.hlw-popup-header[data-v-a6f8d1a5] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 28rpx 32rpx;
+  border-bottom: 1rpx solid var(--border-color-light, #f1f5f9);
+}
+.hlw-popup-title[data-v-a6f8d1a5] {
+  font-size: var(--font-md, 32rpx);
+  font-weight: 600;
+  color: #1e293b;
+}
+.hlw-popup-close[data-v-a6f8d1a5] {
+  font-size: 40rpx;
+  color: #94a3b8;
+  line-height: 1;
+  padding: 0 8rpx;
+}
+@keyframes hlw-fade-in-a6f8d1a5 {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}.hlw-search[data-v-761affc9] {
+  padding: 16rpx 24rpx;
+}
+.hlw-search-box[data-v-761affc9] {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  padding: 12rpx 24rpx;
+  background: #f1f5f9;
+  border-radius: var(--radius-md, 16rpx);
+}
+.hlw-search-box--round[data-v-761affc9] {
+  border-radius: 999rpx;
+}
+.hlw-search-icon[data-v-761affc9] {
+  font-size: var(--font-sm, 24rpx);
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+.hlw-search-input[data-v-761affc9] {
+  flex: 1;
+  font-size: var(--font-sm, 24rpx);
+  color: #1e293b;
+  min-height: 40rpx;
+}
+.hlw-search-clear[data-v-761affc9] {
+  font-size: 32rpx;
+  color: #94a3b8;
+  line-height: 1;
+  flex-shrink: 0;
+  padding: 0 4rpx;
+}.hlw-skeleton[data-v-c2d1fca4] {
+  display: flex;
+  gap: 24rpx;
+  padding: 24rpx;
+}
+.hlw-skeleton-avatar[data-v-c2d1fca4] {
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: #e2e8f0;
+}
+.hlw-skeleton-avatar--small[data-v-c2d1fca4] {
+  width: 56rpx;
+  height: 56rpx;
+}
+.hlw-skeleton-avatar--medium[data-v-c2d1fca4] {
+  width: 80rpx;
+  height: 80rpx;
+}
+.hlw-skeleton-avatar--large[data-v-c2d1fca4] {
+  width: 120rpx;
+  height: 120rpx;
+}
+.hlw-skeleton-content[data-v-c2d1fca4] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+.hlw-skeleton-title[data-v-c2d1fca4] {
+  width: 40%;
+  height: 32rpx;
+  border-radius: 6rpx;
+  background: #e2e8f0;
+}
+.hlw-skeleton-row[data-v-c2d1fca4] {
+  height: 24rpx;
+  border-radius: 6rpx;
+  background: #e2e8f0;
+}
+.hlw-skeleton--animate .hlw-skeleton-avatar[data-v-c2d1fca4],
+.hlw-skeleton--animate .hlw-skeleton-title[data-v-c2d1fca4],
+.hlw-skeleton--animate .hlw-skeleton-row[data-v-c2d1fca4] {
+  animation: hlw-skeleton-pulse-c2d1fca4 1.5s ease-in-out infinite;
+}
+@keyframes hlw-skeleton-pulse-c2d1fca4 {
+0% {
+    opacity: 1;
+}
+50% {
+    opacity: 0.4;
+}
+100% {
+    opacity: 1;
+}
+}.hlw-tabs[data-v-f6f0b949] {
+  background: #fff;
+  white-space: nowrap;
+}
+.hlw-tabs-wrap[data-v-f6f0b949] {
+  display: inline-flex;
+  min-width: 100%;
+}
+.hlw-tab[data-v-f6f0b949] {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24rpx 28rpx;
+  gap: 6rpx;
+  transition: color 0.2s;
+}
+.hlw-tab--active .hlw-tab-text[data-v-f6f0b949] {
+  color: var(--primary-color, #3b82f6);
+  font-weight: 600;
+}
+.hlw-tab-text[data-v-f6f0b949] {
+  font-size: var(--font-base, 28rpx);
+  color: #64748b;
+}
+.hlw-tab-badge[data-v-f6f0b949] {
+  padding: 0 8rpx;
+  min-width: 28rpx;
+  height: 28rpx;
+  line-height: 28rpx;
+  font-size: 18rpx;
+  text-align: center;
+  color: #fff;
+  background: #ef4444;
+  border-radius: 999rpx;
+}
+.hlw-tab-line[data-v-f6f0b949] {
+  position: absolute;
+  bottom: 4rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 6rpx;
+  border-radius: 6rpx;
+  background: var(--primary-color, #3b82f6);
+  transition: width 0.2s;
+}.hlw-tag[data-v-42e75bd0] {
+  display: inline-flex;
+  align-items: center;
+  gap: 4rpx;
+  font-weight: 500;
+  border: 2rpx solid transparent;
+}
+.hlw-tag--medium[data-v-42e75bd0] {
+  padding: 4rpx 16rpx;
+  font-size: var(--font-xs, 20rpx);
+  border-radius: var(--radius-sm, 8rpx);
+}
+.hlw-tag--small[data-v-42e75bd0] {
+  padding: 2rpx 10rpx;
+  font-size: 18rpx;
+  border-radius: 6rpx;
+}
+.hlw-tag--round[data-v-42e75bd0] {
+  border-radius: 999rpx;
+}
+.hlw-tag--primary[data-v-42e75bd0] {
+  background: var(--primary-color, #3b82f6);
+  color: #fff;
+  border-color: var(--primary-color, #3b82f6);
+}
+.hlw-tag--primary.hlw-tag--plain[data-v-42e75bd0] {
+  background: transparent;
+  color: var(--primary-color, #3b82f6);
+}
+.hlw-tag--success[data-v-42e75bd0] {
+  background: #10b981;
+  color: #fff;
+  border-color: #10b981;
+}
+.hlw-tag--success.hlw-tag--plain[data-v-42e75bd0] {
+  background: transparent;
+  color: #10b981;
+}
+.hlw-tag--warning[data-v-42e75bd0] {
+  background: #f59e0b;
+  color: #fff;
+  border-color: #f59e0b;
+}
+.hlw-tag--warning.hlw-tag--plain[data-v-42e75bd0] {
+  background: transparent;
+  color: #f59e0b;
+}
+.hlw-tag--danger[data-v-42e75bd0] {
+  background: #ef4444;
+  color: #fff;
+  border-color: #ef4444;
+}
+.hlw-tag--danger.hlw-tag--plain[data-v-42e75bd0] {
+  background: transparent;
+  color: #ef4444;
+}
+.hlw-tag--info[data-v-42e75bd0] {
+  background: #64748b;
+  color: #fff;
+  border-color: #64748b;
+}
+.hlw-tag--info.hlw-tag--plain[data-v-42e75bd0] {
+  background: transparent;
+  color: #64748b;
+}
+.hlw-tag-close[data-v-42e75bd0] {
+  font-size: 1.2em;
+  line-height: 1;
+  margin-left: 2rpx;
+  opacity: 0.8;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "1.0.34",
+    "version": "1.1.0",
     "description": "hlw-uni Vue 组件库 — 供小程序业务方使用的 UI 组件集合",
     "main": "src/index.ts",
     "module": "src/index.ts",
@@ -26,19 +26,19 @@
         "access": "public"
     },
     "peerDependencies": {
-        "vue": ">=3.4.0",
-        "pinia": ">=2.0.0"
+        "pinia": ">=2.0.0",
+        "vue": ">=3.4.0"
     },
     "devDependencies": {
-        "@dcloudio/types": "^3.4.8",
-        "@types/node": "^20.11.0",
-        "@vitejs/plugin-vue": "^5.0.0",
-        "typescript": "^4.9.4",
+        "@dcloudio/types": "^3.4.30",
+        "@types/node": "^20.19.39",
+        "@vitejs/plugin-vue": "^5.2.4",
+        "typescript": "^4.9.5",
         "vite": "5.2.8",
         "vite-plugin-dts": "^4.5.4",
-        "vue": "^3.4.0"
+        "vue": "^3.5.32"
     },
     "dependencies": {
-        "@hlw-uni/mp-core": "^1.0.10"
+        "@hlw-uni/mp-core": "^1.0.28"
     }
 }

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

@@ -0,0 +1,116 @@
+<template>
+    <button
+        class="hlw-btn"
+        :class="[
+            `hlw-btn--${type}`,
+            `hlw-btn--${size}`,
+            { 'hlw-btn--block': block, 'hlw-btn--round': round, 'hlw-btn--disabled': disabled, 'hlw-btn--loading': loading },
+        ]"
+        :disabled="disabled || loading"
+        :open-type="openType"
+        @tap="$emit('click')"
+    >
+        <view v-if="loading" class="hlw-btn-spinner" />
+        <view v-else-if="icon" :class="icon" class="hlw-btn-icon" />
+        <slot />
+    </button>
+</template>
+
+<script setup lang="ts">
+interface Props {
+    type?: "primary" | "outline" | "text" | "ghost";
+    size?: "small" | "medium" | "large";
+    loading?: boolean;
+    disabled?: boolean;
+    block?: boolean;
+    round?: boolean;
+    icon?: string;
+    openType?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+    type: "primary",
+    size: "medium",
+    loading: false,
+    disabled: false,
+    block: false,
+    round: false,
+    icon: "",
+    openType: "",
+});
+
+defineEmits<{ click: [] }>();
+</script>
+
+<style lang="scss" scoped>
+.hlw-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8rpx;
+    border: none;
+    font-weight: 500;
+    line-height: 1;
+    transition: opacity 0.2s;
+
+    &::after { display: none; }
+    &:active { opacity: 0.7; }
+
+    &--primary {
+        background: var(--primary-color);
+        color: #fff;
+    }
+    &--outline {
+        background: transparent;
+        color: var(--primary-color);
+        border: 2rpx solid var(--primary-color);
+    }
+    &--text {
+        background: transparent;
+        color: var(--primary-color);
+    }
+    &--ghost {
+        background: transparent;
+        color: #fff;
+        border: 2rpx solid rgba(255, 255, 255, 0.6);
+    }
+
+    &--small {
+        padding: 8rpx 20rpx;
+        font-size: var(--font-xs, 20rpx);
+        border-radius: var(--radius-sm, 8rpx);
+    }
+    &--medium {
+        padding: 16rpx 32rpx;
+        font-size: var(--font-sm, 24rpx);
+        border-radius: var(--radius-md, 16rpx);
+    }
+    &--large {
+        padding: 24rpx 48rpx;
+        font-size: var(--font-base, 28rpx);
+        border-radius: var(--radius-md, 16rpx);
+    }
+
+    &--block { display: flex; width: 100%; }
+    &--round { border-radius: 999rpx; }
+    &--disabled { opacity: 0.4; &:active { opacity: 0.4; } }
+    &--loading { opacity: 0.7; }
+}
+
+.hlw-btn-icon {
+    font-size: 1.1em;
+}
+
+.hlw-btn-spinner {
+    width: 28rpx;
+    height: 28rpx;
+    border: 3rpx solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: hlw-spin 0.6s linear infinite;
+}
+
+@keyframes hlw-spin {
+    to { transform: rotate(360deg); }
+}
+</style>