From afede790479ca18ac7eaf0c0275e713785373899 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Sat, 8 Aug 2026 09:36:57 +0800
Subject: [PATCH] =?UTF-8?q?fix(diy-recommend-code):=20=E5=B0=8F=E7=A8=8B?=
 =?UTF-8?q?=E5=BA=8F=20button=20=E8=B7=AF=E5=BE=84=E5=90=8C=E6=AD=A5?=
 =?UTF-8?q?=E9=87=87=E7=94=A8=E5=8F=8C=E5=B1=82=E5=B1=85=E4=B8=AD=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

之前 H5 路径（v-else-if 走 view）已修复为双层结构
（外层 text-align:center + 内层 inline-block），但小程序/APP
路径仍保留旧的「display:flex + width:100% + height:80rpx +
box-shadow」组合，在 webview 中可能存在同样问题。

为了让小程序下居中也稳定，4 个预设的 <button open-type="share">
也改为双层结构：
- 外层 button: text-align:center;background:transparent;
  border:none;padding:0;line-height:normal;
  保留 open-type="share" 让微信小程序原生分享能力依然有效
- 内层 view: display:inline-block; 自带 padding+渐变+阴影样式

horizontal 预设的 button (行 298) 是水平按钮行右侧窄按钮，
额外加 display:inline-block 让其按内容撑开（不被推到 100% 宽）。

这样：
- H5: view fallback（text-align:center）→ 居中
- 小程序: button + 内联 view（双层结构）→ 居中
- APP: 与小程序走同一份代码 → 居中

注意：本次修改的 HTML 结构对小程序的 onShareAppMessage 钩子
无影响（uniapp 仍按 v-if 条件编译 + open-type="share" 自动桥接）。
---
 components-diy/diy-recommend-code.vue | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/components-diy/diy-recommend-code.vue b/components-diy/diy-recommend-code.vue
index fe0d151..1b845a3 100644
--- a/components-diy/diy-recommend-code.vue
+++ b/components-diy/diy-recommend-code.vue
@@ -113,8 +113,10 @@
       <!-- 立即分享链接按钮：黄橙渐变，胶囊形圆角，紧凑布局
            固定走 linear-gradient，不读 diyData.buttonBgColor（避免被后端默认色覆盖）
            H5 端用 view 触发（避免 button 默认样式），小程序/APP 端保留 button 以触发 open-type=share -->
-      <button v-if="value.showShareButton !== false && !isH5Platform" open-type="share" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '80rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'linear-gradient(90deg,#FFC107 0%,#FF8F00 100%)', borderRadius: '40rpx', boxShadow: '0 4rpx 12rpx rgba(255,143,0,0.3)', position: 'relative', zIndex: '1', border: 'none', lineHeight: '1' }">
-        <text :style="{ fontSize: '28rpx', fontWeight: '700', color: '#FFFFFF' }">📤 {{ value.buttonText || '立即分享' }}</text>
+      <button v-if="value.showShareButton !== false && !isH5Platform" open-type="share" @tap="onShareClick" style="margin-top:16rpx;text-align:center;background:transparent;border:none;padding:0;line-height:normal;">
+        <view style="display:inline-block;height:80rpx;line-height:80rpx;padding:0 40rpx;background:linear-gradient(90deg,#FFC107 0%,#FF8F00 100%);border-radius:40rpx;box-shadow:0 4rpx 12rpx rgba(255,143,0,0.3);box-sizing:border-box;">
+          <text style="font-size:28rpx;font-weight:700;color:#FFFFFF;">📤 {{ value.buttonText || '立即分享' }}</text>
+        </view>
       </button>
       <view v-else-if="value.showShareButton !== false" @tap="onShareClick" style="margin-top:16rpx;text-align:center;">
         <view style="display:inline-block;height:80rpx;line-height:80rpx;padding:0 40rpx;background:linear-gradient(90deg,#FFC107 0%,#FF8F00 100%);border-radius:40rpx;box-shadow:0 4rpx 12rpx rgba(255,143,0,0.3);box-sizing:border-box;">
@@ -181,8 +183,10 @@
       <!-- 立即分享链接按钮：红橙渐变胶囊全宽铺满，触发微信原生分享
            固定走 linear-gradient，不读 diyData.buttonBgColor
            H5 端用 view 触发（避免 button 默认样式），小程序/APP 端保留 button 触发 open-type=share -->
-      <button v-if="value.showShareButton !== false && !isH5Platform" open-type="share" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '76rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'linear-gradient(90deg,#FF6B6B 0%,#FF4444 100%)', borderRadius: '38rpx', boxShadow: '0 4rpx 12rpx rgba(255,68,68,0.3)', position: 'relative', zIndex: '1', border: 'none', lineHeight: '1' }">
-        <text :style="{ fontSize: '27rpx', fontWeight: '700', color: '#FFFFFF' }">📤 {{ value.buttonText || '立即分享' }}</text>
+      <button v-if="value.showShareButton !== false && !isH5Platform" open-type="share" @tap="onShareClick" style="margin-top:16rpx;text-align:center;background:transparent;border:none;padding:0;line-height:normal;">
+        <view style="display:inline-block;height:76rpx;line-height:76rpx;padding:0 40rpx;background:linear-gradient(90deg,#FF6B6B 0%,#FF4444 100%);border-radius:38rpx;box-shadow:0 4rpx 12rpx rgba(255,68,68,0.3);box-sizing:border-box;">
+          <text style="font-size:27rpx;font-weight:700;color:#FFFFFF;">📤 {{ value.buttonText || '立即分享' }}</text>
+        </view>
       </button>
       <view v-else-if="value.showShareButton !== false" @tap="onShareClick" style="margin-top:16rpx;text-align:center;">
         <view style="display:inline-block;height:76rpx;line-height:76rpx;padding:0 40rpx;background:linear-gradient(90deg,#FF6B6B 0%,#FF4444 100%);border-radius:38rpx;box-shadow:0 4rpx 12rpx rgba(255,68,68,0.3);box-sizing:border-box;">
@@ -234,8 +238,10 @@
       </view>
       <!-- 立即分享链接按钮：Card 风格固定「白底红边框」设计，不读 buttonBgColor
            H5 端改用 view 触发（避免 <button> 默认样式影响），小程序/APP 端保留 button 以触发 open-type=share -->
-      <button v-if="value.showShareButton !== false && !isH5Platform" open-type="share" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '76rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#FF6B6B'), borderRadius: '38rpx', position: 'relative', zIndex: '1', lineHeight: '1' }">
-        <text :style="{ fontSize: '27rpx', fontWeight: '600', color: value.codeColor || '#FF6B6B' }">📤 {{ value.buttonText || '立即分享' }}</text>
+      <button v-if="value.showShareButton !== false && !isH5Platform" open-type="share" @tap="onShareClick" style="margin-top:16rpx;text-align:center;background:transparent;border:none;padding:0;line-height:normal;">
+        <view style="display:inline-block;height:76rpx;line-height:76rpx;padding:0 40rpx;background:#FFFFFF;border:2rpx solid #FF6B6B;border-radius:38rpx;box-sizing:border-box;">
+          <text style="font-size:27rpx;font-weight:600;color:#FF6B6B;">📤 {{ value.buttonText || '立即分享' }}</text>
+        </view>
       </button>
       <view v-else-if="value.showShareButton !== false" @tap="onShareClick" style="margin-top:16rpx;text-align:center;">
         <view style="display:inline-block;height:76rpx;line-height:76rpx;padding:0 40rpx;background:#FFFFFF;border:2rpx solid #FF6B6B;border-radius:38rpx;box-sizing:border-box;">
@@ -289,8 +295,10 @@
           </view>
           <!-- 右下角：立即分享链接按钮（黄橙渐变胶囊，靠右，触发微信原生分享）
                H5 端用 view 触发，小程序/APP 端保留 button 以触发 open-type=share -->
-          <button v-if="value.showShareButton !== false && !isH5Platform" open-type="share" @tap="onShareClick" :style="{ height: '72rpx', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'linear-gradient(90deg,#FFC107 0%,#FF8F00 100%)', borderRadius: '36rpx', padding: '0 40rpx', boxShadow: '0 4rpx 12rpx rgba(255,143,0,0.3)', marginBottom: '-4rpx', border: 'none', lineHeight: '1' }">
-            <text :style="{ fontSize: '27rpx', fontWeight: '700', color: '#FFFFFF' }">📤 {{ value.buttonText || '立即分享' }}</text>
+          <button v-if="value.showShareButton !== false && !isH5Platform" open-type="share" @tap="onShareClick" style="text-align:center;background:transparent;border:none;padding:0;line-height:normal;display:inline-block;">
+            <view style="display:inline-block;height:72rpx;line-height:72rpx;padding:0 40rpx;background:linear-gradient(90deg,#FFC107 0%,#FF8F00 100%);border-radius:36rpx;box-shadow:0 4rpx 12rpx rgba(255,143,0,0.3);box-sizing:border-box;">
+              <text style="font-size:27rpx;font-weight:700;color:#FFFFFF;">📤 {{ value.buttonText || '立即分享' }}</text>
+            </view>
           </button>
           <view v-else-if="value.showShareButton !== false" @tap="onShareClick" :style="{ height: '72rpx', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'linear-gradient(90deg,#FFC107 0%,#FF8F00 100%)', borderRadius: '36rpx', padding: '0 40rpx', boxShadow: '0 4rpx 12rpx rgba(255,143,0,0.3)', marginBottom: '-4rpx', lineHeight: '1', boxSizing: 'border-box' }">
             <text :style="{ fontSize: '27rpx', fontWeight: '700', color: '#FFFFFF' }">📤 {{ nc.buttonText || '立即分享' }}</text>