feat:添加按钮点击效果

eslint.config.js

@@ -5,7 +5,12 @@ import pluginJs from '@eslint/js';
 import pluginPrettier from 'eslint-plugin-prettier';
 
 export default tseslint.config(
-    { ignores: ['dist'] },
+    { 
+        ignores: ['dist'], 
+        ignorePatterns: [
+            "**/*.wxs" // 忽略所有 wxs 文件
+        ] 
+    },
     {
         extends: [js.configs.recommended, ...tseslint.configs.recommended],
         files: ['**/*.{ts,tsx}'],

miniprogram/components/color-picker/color-picker.less

@@ -16,14 +16,14 @@
             font-size: 32rpx;
             color: #141414;
             font-weight: bold;
-            margin-bottom: 30rpx;
+            // margin-bottom: 30rpx;
         }
 
         .color-options-title {
             width: 100%;
             height: 1rpx;
             position: relative;
-            padding: 20rpx 0;
+            padding: 30rpx 0;
 
             .color-options-title-text {
                 position: absolute;

miniprogram/components/color-picker/color-picker.ts

@@ -19,7 +19,7 @@ Component({
      * 组件的初始数据
      */
     data: {
-        WATER_COLORS: WATER_COLORS,
+        extended24Colors: WATER_COLORS.extended24,
     },
     lifetimes: {
         attached() {},
@@ -34,11 +34,14 @@ Component({
 
         onSelectColor(e: WechatMiniprogram.TouchEvent) {
             const { color } = e.currentTarget.dataset;
-            console.log('Selected color:', color);
             this.setData({
                 currentColor: color,
             });
-            this.triggerEvent('onSelectColor', { color });
+        },
+
+        onChange(e: WechatMiniprogram.TouchEvent) {
+            const { currentColor } = this.data;
+            this.triggerEvent('onChange', { color: currentColor });
         },
     },
 });

miniprogram/components/color-picker/color-picker.wxml

@@ -4,7 +4,7 @@
     custom-class="color-picker-popup">
     <view class="color-picker-container">
         <text class="color-picker-title">选择颜色</text>
-        <view class="color-options-title">
+        <!-- <view class="color-options-title">
             <text class="color-options-title-text">基础12色</text>
             <view class="color-options-title-line"></view>
         </view>
@@ -20,9 +20,9 @@
         <view class="color-options-title">
             <text class="color-options-title-text">扩展24色</text>
             <view class="color-options-title-line"></view>
-        </view>
+        </view> -->
         <view class="color-options">
-            <block wx:for="{{WATER_COLORS.extended24}}" wx:key="index">
+            <block wx:for="{{extended24Colors}}" wx:key="index">
                 <view
                     class="color-option {{item.hex === currentColor ? 'selected' : ''}}"
                     style="background-color: {{item.hex}};"
@@ -32,7 +32,7 @@
         </view>
         <view class="btn-area">
             <!-- <view class="btn-yellow">确认选择</view> -->
-            <toy-button type="primary" bind:click="" width="400rpx">
+            <toy-button type="primary" bind:click="onChange" width="400rpx">
                 确认选择
             </toy-button>
         </view>

miniprogram/constants/index.ts

@@ -39,7 +39,7 @@ export const WATER_COLORS = {
         { name: '棕色', hex: '#A52A2A' },
         { name: '深棕色', hex: '#8B4513' },
         { name: '灰色', hex: '#808080' },
-        { name: '白色', hex: '#FFFFFF' },
+        { name: '银灰色', hex: '#C0C0C0' },
         { name: '米色', hex: '#F5F5DC' },
         { name: '黑色', hex: '#000000' },
     ],

miniprogram/pages/index/index.less

@@ -68,6 +68,7 @@ page {
     background-color: #fff;
     box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25);
     padding-top: 24rpx;
+    box-sizing: border-box;
 }
 
 

miniprogram/pages/index/index.ts

@@ -13,7 +13,6 @@ Page({
         showColorPopup: false,
         currentKey: 0,
         currentColor: '',
-        WATER_COLORS: WATER_COLORS,
     },
 
     onReady() {
@@ -68,27 +67,24 @@ Page({
 
     tapCard(e: WechatMiniprogram.TouchEvent) {
         const { url } = e.currentTarget.dataset;
-        console.log('navigateTo url:', url);
         wx.navigateTo({ url });
     },
 
     onConfirmInput(e: WechatMiniprogram.Input) {
         const { value } = e.detail;
         const characters = value.split('');
-        const shuffledColors = [...WATER_COLORS.basic12].sort(
+        const shuffledColors = [...WATER_COLORS.extended24].sort(
             () => Math.random() - 0.5,
         );
         const updatedCardList = characters.map((char, index) => ({
             color: shuffledColors[index % shuffledColors.length].hex,
             word: char,
         }));
-        console.log('updatedCardList', updatedCardList);
         this.drawCanvas(updatedCardList);
     },
 
     deleteWordCard(e: WechatMiniprogram.CustomEvent) {
         const { key, word } = e.detail;
-        console.log('deleteWordCard key:', key, 'word:', word);
         const { cardList } = this.data;
         const updatedCardList = cardList.filter((_, index) => index !== key);
 
@@ -131,7 +127,6 @@ Page({
 
     onColorTap(e: WechatMiniprogram.CustomEvent) {
         const { key, word, color } = e.detail;
-        console.log('onColorTap key:', key, 'word:', word, 'color:', color);
         this.setData({
             showColorPopup: true,
             currentKey: key,
@@ -146,4 +141,14 @@ Page({
             currentColor: '',
         });
     },
+
+    onChangeColor(e: WechatMiniprogram.CustomEvent) {
+        const { color } = e.detail;
+        const { currentKey, cardList } = this.data;
+        cardList[currentKey].color = color;
+        this.setData({
+            showColorPopup: false,
+            cardList,
+        });
+    },
 });

miniprogram/pages/index/index.wxml

@@ -41,7 +41,8 @@
     <color-picker
         show="{{showColorPopup}}"
         currentColor="{{currentColor}}"
-        bind:onClose="onCloseColorPopup" />
+        bind:onClose="onCloseColorPopup"
+        bind:onChange="onChangeColor" />
 </view>
 <view class="btn-area">
     <toy-button
@@ -53,4 +54,12 @@
         icon-class-prefix="toy-icon">
         下载打印
     </toy-button>
+    <!-- <toy-button
+        type="green"
+        width="680rpx"
+        disabled="{{cardList.length <= 0}}"
+        icon="download"
+        icon-class-prefix="toy-icon">
+        下载打印
+    </toy-button> -->
 </view>

miniprogram/service/textDrawService.ts

@@ -19,7 +19,6 @@ function calculateCircleCenters(
         const requiredSpace = 2 * radius * circleCount;
         const spaceBetween =
             (availableWidth - requiredSpace) / (circleCount - 1);
-        console.log('spaceBetween---:', spaceBetween);
 
         if (spaceBetween > maxSpacing) {
             // 超过最大间距时，固定间距并居中对齐

miniprogram/ui/button/button.less

@@ -22,6 +22,11 @@
             background: rgba(255, 215, 25, 0.5);
             box-shadow: 0px 10rpx 4rpx rgba(219, 185, 23, 0.5);
         }
+
+        &.active {
+            transform: translateY(10rpx);
+            box-shadow: 0 0 0 rgba(219, 185, 23, 0.5); /* 阴影效果 */
+        }
     }
 
     &--green {
@@ -32,10 +37,16 @@
             background: rgba(147, 211, 51, 0.5);
             box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 0.5);
         }
+
+        &.active {
+            transform: translateY(10rpx);
+            box-shadow: 0 0 0 rgba(121, 185, 21, 0.5); /* 阴影效果 */
+        }
     }
 
     .loading-class,
     &__icon {
         margin-right: 24rpx;
     }
+    
 }

miniprogram/ui/button/button.wxml

@@ -1,7 +1,12 @@
 <wxs src="../wxs/base.wxs" module="Utils" />
+<wxs module="wxs" src="./button.wxs"></wxs>
+<!-- <view class="keyboard" bind:touchstart="{{wxs.keypadTouchStart}}" bind:touchend="{{wxs.keypadTouchEnd}}"> -->
 
 <button
+    data-id="test-toy-button-id"
     class="toy-button toy-button--{{type}} {{ disabled ? 'toy-button--disabled' : '' }} {{Utils.classNames({disabled: disabled, loading: loading })}}"
+    data-disabled="{{disabled}}"
+    data-loading="{{loading}}"
     style="{{style}};{{width ? 'width:' + width + ';' : ''}};{{height ? 'height:' + height + ';' : ''}}"
     session-from="{{ sessionFrom }}"
     send-message-title="{{ sendMessageTitle }}"
@@ -10,7 +15,9 @@
     show-message-card="{{ showMessageCard }}"
     app-parameter="{{ appParameter }}"
     aria-label="{{ ariaLabel }}"
-    bindtap="{{ disabled || loading ? '' : 'onClick' }}"
+    bind:touchstart="{{wxs.touchStart}}"
+    bind:touchend="{{wxs.touchEnd}}"
+    bind:tap="{{ disabled || loading ? '' : 'onClick'}}"
     bindgetuserinfo="onGetUserInfo"
     bindcontact="onContact"
     bindgetphonenumber="onGetPhoneNumber"

miniprogram/ui/button/button.wxs

@@ -0,0 +1,23 @@
+module.exports = {
+    touchStart: function (event, ownerInstance) {
+        var instance = event.instance;
+        var dataSet = instance.getDataset();
+        var disabled = dataSet.disabled;
+        var loading = dataSet.loading;
+
+        if (instance && !disabled && !loading) {
+            instance.addClass('active')
+        }
+    },
+
+    touchEnd: function (event, ownerInstance) {
+        var instance = event.instance
+        var dataSet = instance.getDataset();
+        var disabled = dataSet.disabled;
+        var loading = dataSet.loading;
+        
+        if (instance && !disabled && !loading) {
+            instance.removeClass('active')
+        }
+    },
+};