feat:重构按钮和icon组件

2026-04-07 17:23:05 +08:00
parent 672d457a35
commit 653737c481
95 changed files with 3261 additions and 1342 deletions
@@ -0,0 +1,194 @@
+@button-default-height: 92rpx;
+@button-border-radius: 32rpx;
+@button-default-font-size: 30rpx;
+@button-default-color: #fff;
+@button-transition: 0.18s ease;
+@button-shadow-primary: 0 8rpx 20rpx rgba(255, 215, 0, 0.22);
+@button-shadow-green: 0 8rpx 20rpx rgba(156, 211, 67, 0.22);
+@button-shadow-white: 0 6rpx 16rpx rgba(50, 46, 37, 0.08);
+@button-shadow-pressed: 0 4rpx 10rpx rgba(50, 46, 37, 0.1);
+@button-disabled-bg: #ece6da;
+@button-disabled-color: #b8b2a6;
+
+wx-button:not([size=mini]) {
+    margin-left: auto;
+    margin-right: auto;
+    width: auto;
+}
+
+.toy-button {
+    --button-bg: #f0e7d6;
+    --button-color: @button-default-color;
+    --button-border-color: transparent;
+    --button-shadow: none;
+
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 180rpx;
+    height: @button-default-height;
+    line-height: 1;
+    padding: 0 28rpx;
+    border-radius: @button-border-radius;
+    border: 2rpx solid var(--button-border-color);
+    background: var(--button-bg);
+    color: var(--button-color);
+    box-shadow: var(--button-shadow);
+    font-size: @button-default-font-size;
+    font-weight: 700;
+    letter-spacing: 0.5rpx;
+    text-align: center;
+    cursor: pointer;
+    transition:
+        transform @button-transition,
+        box-shadow @button-transition,
+        background-color @button-transition,
+        border-color @button-transition,
+        color @button-transition,
+        opacity @button-transition;
+
+    &::after {
+        border: none;
+    }
+
+    &--default {
+        --button-bg: #f0e7d6;
+        --button-color: #322e25;
+        --button-border-color: #e5dcc9;
+        --button-shadow: @button-shadow-white;
+    }
+
+    &--large {
+        width: 100%;
+    }
+
+    &--small {
+        min-width: 136rpx;
+        height: 72rpx;
+        padding: 0 20rpx;
+        border-radius: 20rpx;
+        font-size: 26rpx;
+    }
+
+    &--mini {
+        min-width: 96rpx;
+        height: 56rpx;
+        padding: 0 16rpx;
+        border-radius: 18rpx;
+        font-size: 24rpx;
+    }
+
+    &--primary {
+        --button-bg: #ffd700;
+        --button-color: #6c5a00;
+        --button-shadow: @button-shadow-primary;
+    }
+
+    &--green,
+    &--secondary {
+        --button-bg: #9cd343;
+        --button-color: #ffffff;
+        --button-shadow: @button-shadow-green;
+    }
+
+    &--white {
+        --button-bg: rgba(255, 255, 255, 0.96);
+        --button-color: #322e25;
+        --button-border-color: #ebe3d2;
+        --button-shadow: @button-shadow-white;
+    }
+
+    &.plain.toy-button--white {
+        --button-bg: transparent;
+        --button-color: #ffffff;
+        --button-border-color: rgba(255, 255, 255, 0.92);
+        --button-shadow: none;
+    }
+
+    &.disabled {
+        --button-bg: @button-disabled-bg !important;
+        --button-color: @button-disabled-color !important;
+        --button-border-color: transparent !important;
+        --button-shadow: none !important;
+        opacity: 1;
+    }
+
+    &.loading {
+        opacity: 0.92;
+    }
+
+    &.active {
+        transform: scale(0.95);
+        box-shadow: @button-shadow-pressed;
+    }
+
+    &--flat {
+        min-width: 0;
+        padding: 0 24rpx;
+        border-width: 0;
+        border-radius: 32rpx;
+
+        &.toy-button--green,
+        &.toy-button--secondary {
+            --button-bg: #9cd343;
+            --button-color: #ffffff;
+            --button-shadow: 0 4rpx 12rpx rgba(50, 46, 37, 0.08);
+            font-weight: 700;
+        }
+
+        &.toy-button--primary {
+            --button-bg: #ffd700;
+            --button-color: #6c5a00;
+            --button-shadow: 0 8rpx 18rpx rgba(108, 90, 0, 0.12);
+            font-weight: 800;
+        }
+
+        &.toy-button--white {
+            --button-bg: rgba(255, 255, 255, 0.96);
+            --button-color: #322e25;
+            --button-shadow: 0 4rpx 12rpx rgba(50, 46, 37, 0.08);
+        }
+
+        &.toy-button--white.plain {
+            --button-bg: transparent;
+            --button-color: #ffffff;
+            --button-shadow: none;
+            border-width: 2rpx;
+        }
+
+        &.active {
+            transform: scale(0.95);
+        }
+
+        &.disabled {
+            --button-bg: #e6e0d4 !important;
+            --button-color: #b8b2a6 !important;
+            --button-shadow: none !important;
+        }
+    }
+
+    .loading-class,
+    &__icon {
+        margin-right: 12rpx;
+        flex-shrink: 0;
+    }
+
+    &__spinner {
+        box-sizing: border-box;
+        border-radius: 50%;
+        border-width: 4rpx;
+        border-style: solid;
+        animation: toy-button-spin 0.8s linear infinite;
+    }
+}
+
+@keyframes toy-button-spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}