feat: 字母描红页样式开发基本完成

miniprogram/components3.0/preview-footer-actions/preview-footer-actions.less

@@ -6,7 +6,8 @@
     bottom: 0;
     width: 100%;
     padding: 0 24rpx;
-    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+    // padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+    padding-bottom: env(safe-area-inset-bottom);
     box-sizing: border-box;
     z-index: 60;
 
@@ -22,23 +23,27 @@
         gap: 16rpx;
     }
 
+    /* flex 子项：占宽比例；min-width:0 避免子项溢出时把 flex 算崩 */
     &__secondary {
-        flex: 4;
+        flex: 3.92;
+        min-width: 0;
     }
 
     &__primary {
-        flex: 6;
+        flex: 6.18;
+        min-width: 0;
     }
 
-    &__secondary .toy-btn,
-    &__primary .toy-btn {
-        width: 100%;
-        height: 88rpx;
+    /*
+     * 以下类通过 toy-button 的 custom-class 作用在内部原生 button 上。
+     * 不能写 &__primary .toy-btn：小程序样式无法穿透进子自定义组件。
+     */
+    .preview-footer-actions__toy-btn {
         border-radius: 28rpx;
         font-size: 30rpx;
     }
 
-    &__primary .toy-btn--primary {
+    .preview-footer-actions__toy-btn--primary {
         box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);
     }
 }

miniprogram/components3.0/preview-footer-actions/preview-footer-actions.ts

@@ -9,12 +9,21 @@ Component({
     properties: {
         primaryText: {
             type: String,
-            value: '保存到作品库',
+            value: '保存到相册',
+        },
+        primaryIcon: {
+            type: String,
+            value: 'download',
         },
         secondaryText: {
             type: String,
             value: '分享',
         },
+        /** 须对应 iconfont 中 toy-icon-{name}；历史上常用 wechat 已映射为 wechat-o */
+        secondaryIcon: {
+            type: String,
+            value: 'line-share',
+        },
         disabled: {
             type: Boolean,
             value: false,
@@ -28,7 +37,31 @@ Component({
             value: 'share',
         },
     },
+    data: {
+        /** 经归一化后的图标名，供 wxml 绑定（避免父级传 wechat 等 iconfont 中不存在的 name） */
+        resolvedSecondaryIcon: 'line-share',
+    },
+    observers: {
+        secondaryIcon() {
+            this.syncSecondaryIconGlyph();
+        },
+    },
+    lifetimes: {
+        attached() {
+            this.syncSecondaryIconGlyph();
+        },
+    },
     methods: {
+        syncSecondaryIconGlyph() {
+            const raw = (this.data.secondaryIcon ?? '').trim();
+            const aliases: Record<string, string> = {
+                wechat: 'wechat-o',
+            };
+            const name = aliases[raw] || raw;
+            this.setData({
+                resolvedSecondaryIcon: name || 'line-share',
+            });
+        },
         onPrimaryTap() {
             if (this.data.disabled || this.data.loading) return;
             this.triggerEvent('primary');

miniprogram/components3.0/preview-footer-actions/preview-footer-actions.wxml

@@ -1,23 +1,33 @@
 <view class="preview-footer-actions">
     <view class="preview-footer-actions__bar">
-        <toy-button
-            class="preview-footer-actions__secondary"
-            type="secondary"
-            icon="line-share"
-            icon-size="40rpx"
-            open-type="{{ shareOpenType }}"
-            bind:click="onSecondaryTap">
-            {{ secondaryText }}
-        </toy-button>
-        <toy-button
-            class="preview-footer-actions__primary"
-            type="primary"
-            icon="download"
-            icon-size="40rpx"
-            disabled="{{ disabled }}"
-            loading="{{ loading }}"
-            bind:click="onPrimaryTap">
-            {{ primaryText }}
-        </toy-button>
+        <view class="preview-footer-actions__secondary">
+            <toy-button
+                type="secondary"
+                icon="{{ resolvedSecondaryIcon }}"
+                icon-size="40rpx"
+                block
+                width="100%"
+                height="88rpx"
+                open-type="{{ shareOpenType }}"
+                custom-class="preview-footer-actions__toy-btn"
+                bind:click="onSecondaryTap">
+                {{ secondaryText }}
+            </toy-button>
+        </view>
+        <view class="preview-footer-actions__primary">
+            <toy-button
+                type="primary"
+                icon="{{ primaryIcon }}"
+                icon-size="40rpx"
+                block
+                width="100%"
+                height="88rpx"
+                disabled="{{ disabled }}"
+                loading="{{ loading }}"
+                custom-class="preview-footer-actions__toy-btn preview-footer-actions__toy-btn--primary"
+                bind:click="onPrimaryTap">
+                {{ primaryText }}
+            </toy-button>
+        </view>
     </view>
 </view>