chore：分支9 切换的新分支，把4个推荐码样式改了，但不完全可以

components-diy/diy-recommend-code.vue

@@ -43,21 +43,22 @@
       <!-- ============ 预设 1：Gradient 渐变风格（默认） ============ -->
       <view v-else-if="stylePreset === 'gradient'" class="style-gradient" :style="gradientStyle">
         <view class="rc-header">
-          <text class="rc-title" :style="{ color: value.titleColor || '#ffffff' }">{{ value.title || '我的推荐码' }}</text>
+          <text class="rc-title" :style="{ color: value.titleColor || '#5C3D1E' }">{{ value.title || '我的推荐码' }}</text>
         </view>
-        <view class="rc-code-box" @tap="copyRecommendCode">
-          <text class="rc-prefix" :style="{ color: 'rgba(255,255,255,0.7)' }">推荐码</text>
-          <text class="rc-code" :style="codeTextStyle">{{ code || '暂无' }}</text>
-          <text class="rc-copy" :style="mainBtnBgStyle(true)">复制</text>
+        <view class="rc-code-box rc-code-gradient" @tap="copyRecommendCode">
+          <text class="rc-code rc-code-gradient-text" :style="codeTextStyle">{{ code || '暂无' }}</text>
+        </view>
+        <!-- 复制链接按钮：在推荐码下方居中，白色背景 -->
+        <view class="rc-copy-link-row rc-copy-link-gradient">
+          <view class="rc-btn rc-btn-copy rc-btn-copy-gradient" :style="gradientCopyLinkStyle" @tap="copyLink" :disabled="loadingCode">
+            <text>{{ value.placeholderCopyText || '立即分享链接' }}</text>
+          </view>
         </view>
         <view class="rc-action-bar">
           <view v-if="isFeatureOn(value.showButton)" class="rc-btn rc-btn-share"
                 :style="mainBtnBgStyle()" @tap="onShareClick" open-type="share">
             <text>{{ value.buttonText || '立即分享' }}</text>
           </view>
-          <view class="rc-btn rc-btn-copy" :style="secondaryBtnStyle" @tap="copyLink" :disabled="secondaryBtnStyle">
-            <text>{{ value.placeholderCopyText || '复制链接' }}</text>
-          </view>
           <view v-if="isFeatureOn(value.allowRegenerate)" class="rc-btn rc-btn-regenerate"
                 :style="secondaryBtnStyle" @tap="regenerate">
             <text>{{ value.placeholderRegenerateText || '换一个新码' }}</text>
@@ -70,7 +71,7 @@
         <!-- showQR：是否显示二维码 -->
         <view v-if="isFeatureOn(value.showQR)" class="rc-qr-row">
           <image :src="qrcodeRenderUrl" mode="aspectFit" class="rc-qr-img" />
-          <text class="rc-qr-tip" :style="{ color: 'rgba(255,255,255,0.8)' }">
+          <text class="rc-qr-tip" :style="{ color: 'rgba(92,61,30,0.8)' }">
             {{ value.posterQrTip || '扫码进入并填写入驻信息' }}
           </text>
         </view>
@@ -79,11 +80,11 @@
       <!-- ============ 预设 2：Minimal 极简风格（纯色 + 边框） ============ -->
       <view v-else-if="stylePreset === 'minimal'" class="style-minimal" :style="minimalStyle">
         <view class="rc-header">
-          <text class="rc-title" :style="{ color: value.titleColor || '#333333' }">{{ value.title || '我的推荐码' }}</text>
+          <text class="rc-title" :style="{ color: value.titleColor || '#5C3D1E' }">{{ value.title || '我的推荐码' }}</text>
         </view>
         <view class="rc-code-box rc-code-minimal" @tap="copyRecommendCode" :style="minimalCodeBoxStyle">
           <text class="rc-code rc-code-minimal-text" :style="codeTextStyle">{{ code || '暂无' }}</text>
-          <text class="rc-copy rc-copy-minimal" :style="minimalCopyBtnStyle">{{ value.placeholderCopyText || '复制链接' }}</text>
+          <text class="rc-copy rc-copy-minimal" :style="minimalCopyBtnStyle">{{ value.placeholderCopyText || '立即分享链接' }}</text>
         </view>
         <view class="rc-action-bar rc-action-minimal">
           <button v-if="isFeatureOn(value.showButton)" class="rc-btn rc-btn-share rc-btn-share-minimal"
@@ -100,22 +101,22 @@
         </view>
         <view v-if="isFeatureOn(value.showQR)" class="rc-qr-row rc-qr-minimal">
           <image :src="qrcodeRenderUrl" mode="aspectFit" class="rc-qr-img rc-qr-minimal-img" />
-          <text class="rc-qr-tip rc-qr-tip-minimal" :style="{ color: '#999999' }">
+          <text class="rc-qr-tip rc-qr-tip-minimal" :style="{ color: '#8B7355' }">
             {{ value.posterQrTip || '扫码进入并填写入驻信息' }}
           </text>
         </view>
       </view>
 
       <!-- ============ 预设 3：Card 金色边框卡片风格 ============ -->
-      <view v-else class="style-card" :style="cardStyleBox">
-        <view class="rc-accent-bar" :style="{ background: value.accentColor || '#FFD700' }"></view>
+      <view v-else-if="stylePreset === 'card'" class="style-card" :style="cardStyleBox">
+        <view class="rc-accent-bar" :style="{ background: value.accentColor || '#F0C040' }"></view>
         <view class="rc-header rc-header-card">
-          <text class="rc-title" :style="{ color: value.titleColor || '#333333' }">{{ value.title || '我的推荐码' }}</text>
+          <text class="rc-title" :style="{ color: value.titleColor || '#B8860B' }">{{ value.title || '我的推荐码' }}</text>
         </view>
         <view class="rc-code-box rc-code-card" @tap="copyRecommendCode">
           <text class="rc-code" :style="codeTextStyle">{{ code || '暂无' }}</text>
-          <view class="rc-copy rc-copy-card" :style="{ background: value.accentColor || '#FFD700', color: '#4b3600' }">
-            <text>复制</text>
+          <view class="rc-copy rc-copy-card rc-copy-link-card" :style="{ background: value.accentColor || '#DAA520', color: '#FFFFFF' }" @tap.stop="copyLink">
+            <text>{{ value.placeholderCopyText || '立即分享链接' }}</text>
           </view>
         </view>
         <view class="rc-action-bar rc-action-card">
@@ -123,9 +124,6 @@
                   :style="mainBtnBgStyle()" @tap="onShareClick" open-type="share">
             <text>{{ value.buttonText || '立即分享' }}</text>
           </button>
-         <view class="rc-btn rc-btn-copy" :style="secondaryBtnStyle" @tap="copyLink" :disabled="loadingCode">
-            <text>{{ value.placeholderCopyText || '复制链接' }}</text>
-          </view>
           <view v-if="isFeatureOn(value.allowRegenerate)" class="rc-btn rc-btn-regenerate"
                 :style="secondaryBtnStyle" @tap="regenerate">
             <text>{{ value.placeholderRegenerateText || '换一个新码' }}</text>
@@ -135,10 +133,46 @@
           <text class="rc-link-text" @tap="copyLink">{{ formatShareLink }}</text>
         </view>
         <view v-if="isFeatureOn(value.showQR)" class="rc-qr-row rc-qr-card">
-          <view class="rc-qr-wrap-card" :style="{ borderColor: value.accentColor || '#FFD700' }">
+          <view class="rc-qr-wrap-card" :style="{ borderColor: value.accentColor || '#F0C040' }">
             <image :src="qrcodeRenderUrl" mode="aspectFit" class="rc-qr-img rc-qr-card-img" />
           </view>
-          <text class="rc-qr-tip rc-qr-tip-card" :style="{ color: '#666666' }">
+          <text class="rc-qr-tip rc-qr-tip-card" :style="{ color: '#B8860B' }">
+            {{ value.posterQrTip || '扫码进入并填写入驻信息' }}
+          </text>
+        </view>
+      </view>
+
+      <!-- ============ 预设 4：Bookgold 金棕风格 ============ -->
+      <view v-else-if="stylePreset === 'bookgold'" class="style-bookgold" :style="bookGoldStyle">
+        <view class="rc-header rc-header-bookgold">
+          <text class="rc-title" :style="{ color: value.titleColor || '#FFFFFF' }">{{ value.title || '我的推荐码' }}</text>
+        </view>
+        <view class="rc-code-box rc-code-bookgold" @tap="copyRecommendCode" :style="bookGoldCodeBoxStyle">
+          <text class="rc-prefix" :style="{ color: 'rgba(255,255,255,0.7)' }">推荐码</text>
+          <text class="rc-code" :style="codeTextStyle">{{ code || '暂无' }}</text>
+          <text class="rc-copy rc-copy-bookgold" :style="bookGoldCopyBtnStyle">复制</text>
+        </view>
+        <view class="rc-action-bar rc-action-bookgold">
+          <view v-if="isFeatureOn(value.showButton)" class="rc-btn rc-btn-share rc-btn-share-bookgold"
+                :style="mainBtnBgStyle()" @tap="onShareClick" open-type="share">
+            <text>{{ value.buttonText || '立即分享' }}</text>
+          </view>
+          <view class="rc-btn rc-btn-copy" :style="secondaryBtnStyle" @tap="copyLink" :disabled="secondaryBtnStyle">
+            <text>{{ value.placeholderCopyText || '立即分享链接' }}</text>
+          </view>
+          <view v-if="isFeatureOn(value.allowRegenerate)" class="rc-btn rc-btn-regenerate"
+                :style="secondaryBtnStyle" @tap="regenerate">
+            <text>{{ value.placeholderRegenerateText || '换一个新码' }}</text>
+          </view>
+        </view>
+        <!-- showLink：是否显示分享链接文字 -->
+        <view v-if="isFeatureOn(value.showLink)" class="rc-link-row rc-link-bookgold">
+          <text class="rc-link-text" @tap="copyLink">{{ formatShareLink}}</text>
+        </view>
+        <!-- showQR：是否显示二维码 -->
+        <view v-if="isFeatureOn(value.showQR)" class="rc-qr-row rc-qr-bookgold">
+          <image :src="qrcodeRenderUrl" mode="aspectFit" class="rc-qr-img rc-qr-bookgold-img" />
+          <text class="rc-qr-tip rc-qr-tip-bookgold" :style="{ color: '#E8DDD0' }">
             {{ value.posterQrTip || '扫码进入并填写入驻信息' }}
           </text>
         </view>
@@ -286,10 +320,10 @@ export default {
       return merged;
     },
     stylePreset() {
-      const s = String(this.nc.stylePreset || 'gradient').toLowerCase();
-      if (['minimal', 'card'].includes(s)) return s;
-      return 'gradient';
-    },
+         const s = String(this.nc.stylePreset || 'gradient').toLowerCase();
+         if (['minimal', 'card', 'bookgold'].includes(s)) return s;
+         return 'gradient';
+       },
     requireConsentComputed() {
       return this.isFeatureOn(this.nc.requireConsent);
     },
@@ -329,26 +363,62 @@ export default {
       ].join('');
     },
     /* ---------- 三套容器样式 ---------- */
-    gradientStyle() {
-      const v = this.nc;
-      const start = v.bgColorStart || '#3B82F6';
-      const end = v.bgColorEnd || '#1E40AF';
-      return this.cardBaseStyle + [
-        `background:linear-gradient(135deg, ${start} 0%, ${end} 100%);`,
-        'box-shadow:0 12rpx 36rpx rgba(0,0,0,0.12);'
-      ].join('');
-    },
+   gradientStyle() {
+     const v = this.nc;
+     // 奶油米色背景
+     return this.cardBaseStyle + [
+       `background:#FDF6ED;`,
+       'box-shadow:0 12rpx 36rpx rgba(92,61,30,0.08);'
+     ].join('');
+   },
+   /* 预设1专用：复制链接按钮白色背景样式 */
+   gradientCopyLinkStyle() {
+     const v = this.nc;
+     return [
+       `background:#FFFFFF;`,
+       `color:#5C3D1E;`,
+       `border-radius:40rpx;`,
+       `padding:14rpx 56rpx;`,
+       'font-size:26rpx;font-weight:600;',
+       'box-shadow:0 4rpx 12rpx rgba(92,61,30,0.1);'
+     ].join('');
+   },
+    bookGoldStyle() {
+         const v = this.nc;
+         return this.cardBaseStyle + [
+           `background:linear-gradient(135deg, #C4A882 0%, #A68B6A 100%);`, // 参考图Taupe棕褐渐变
+           'box-shadow:0 12rpx 36rpx rgba(166,139,106,0.15);',
+           'border-radius:24rpx;'
+         ].join('');
+       },
+       bookGoldCodeBoxStyle() {
+         const v = this.nc;
+         return [
+           `background:rgba(255,255,255,0.12);`,
+           `border-radius:${this.px2rpx(v.borderRadius)}rpx;`,
+           'margin-top:28rpx;'
+         ].join('');
+       },
+       bookGoldCopyBtnStyle() {
+         const v = this.nc;
+         return [
+           `background:#B8A08A;`, // 灰褐金按钮
+           `color:#ffffff;`,
+           `border-radius:40rpx;`,
+           `font-size:24rpx;padding:10rpx 24rpx;`
+         ].join('');
+       },
     minimalStyle() {
       const v = this.nc;
       return this.cardBaseStyle + [
-        `background:${v.bgColor || '#FFFFFF'};`,
-        `border:2rpx solid ${v.borderColor || '#E5E7EB'};`
+        `background:${v.bgColor || '#FDF6ED'};`,
+        `border:2rpx solid ${v.borderColor || '#E8D5C0'};`
       ].join('');
     },
     minimalCodeBoxStyle() {
       const v = this.nc;
       return [
-        `border:2rpx dashed ${v.codeColor || '#E4393C'};`,
+        `border:2rpx dashed ${v.codeColor || '#6B4423'};`,
         `border-radius:${this.px2rpx(Math.max(4, (Number(v.borderRadius) || 8) - 4))}rpx;`,
         'margin-top:28rpx;'
       ].join('');
@@ -356,17 +426,17 @@ export default {
     minimalCopyBtnStyle() {
       const v = this.nc;
       return [
-        `background:${v.buttonBgColor || '#E4393C'};`,
+        `background:${v.buttonBgColor || '#6B4423'};`,
         `color:${v.buttonTextColor || '#FFFFFF'};`,
         `border-radius:${this.px2rpx(v.borderRadius)}rpx;`,
-        `font-size:24rpx;padding:10rpx 24rpx;`
+        `font-size:24rpx;padding:14rpx 24rpx;`
       ].join('');
     },
     cardStyleBox() {
       const v = this.nc;
       return this.cardBaseStyle + [
-        `background:${v.bgColor || '#FFFFFF'};`,
-        `border:2rpx solid ${v.accentColor || '#FFD700'};`,
+        `background:${v.bgColor || '#FFE4B5'};`,
+        `border:2rpx solid ${v.accentColor || '#F0C040'};`,
         'box-shadow:0 10rpx 30rpx rgba(0,0,0,0.08);',
         'position:relative;overflow:hidden;'
       ].join('');
@@ -375,7 +445,7 @@ export default {
     codeTextStyle() {
       const v = this.nc;
       return [
-        `color:${v.codeColor || '#E4393C'};`,
+        `color:${v.codeColor || (this.stylePreset === 'bookgold' ? '#FFFFFF' : (this.stylePreset === 'card' ? '#B8860B' : '#5C3D1E'))};`,
         `font-size:${this.px2rpx(v.codeFontSize)}rpx;`,
         `letter-spacing:${this.px2rpx(1)}rpx;`,
         'font-weight:800;',
@@ -386,9 +456,12 @@ export default {
     
     secondaryBtnStyle() {
       const v = this.nc;
+      const sp = this.stylePreset;
+      const secBg = sp === 'gradient' ? 'rgba(92,61,30,0.08)' : (sp === 'bookgold' ? 'rgba(255,255,255,0.12)' : (sp === 'card' ? 'rgba(184,134,11,0.08)' : 'rgba(92,61,30,0.06)'));
+      const secColor = sp === 'gradient' ? '#5C3D1E' : (sp === 'bookgold' ? '#FFFFFF' : (sp === 'card' ? '#B8860B' : '#5C3D1E'));
       return [
-        'background:rgba(0,0,0,0.06);',
-        `color:${this.stylePreset === 'gradient' ? '#ffffff' : (v.titleColor || '#333333')};`,
+        `background:${secBg};`,
+        `color:${secColor};`,
         `border-radius:${this.px2rpx(v.borderRadius)}rpx;`,
         `padding:${this.px2rpx(Math.round((Number(v.padding) || 16) * 0.55))}rpx ${this.px2rpx(Math.round((Number(v.padding) || 16) * 0.9))}rpx;`,
         'font-size:24rpx;font-weight:600;'
@@ -397,7 +470,7 @@ export default {
     consentBtnStyle() {
       const v = this.nc;
       return [
-        `background:linear-gradient(135deg, ${v.bgColorStart || '#3B82F6'} 0%, ${v.bgColorEnd || '#1E40AF'} 100%);`,
+        `background:linear-gradient(135deg, ${v.bgColorStart || '#FFD699'} 0%, ${v.bgColorEnd || '#FFB84D'} 100%);`,
         `color:${v.buttonTextColor || '#FFFFFF'};`,
         `border-radius:${this.px2rpx(Math.max(12, Number(v.borderRadius) || 8))}rpx;`,
         `padding:${this.px2rpx(Math.round((Number(v.padding) || 16) * 0.9))}rpx ${this.px2rpx(Math.round((Number(v.padding) || 16) * 2))}rpx;`,
@@ -528,8 +601,11 @@ export default {
      */
 	 mainBtnBgStyle(isCopyMini) {
 	    const v = this.nc;
-	    const bg = isCopyMini ? 'rgba(255,255,255,0.92)' : (v.buttonBgColor || '#E4393C');
-	    const color = isCopyMini ? (v.buttonBgColor || '#E4393C') : (v.buttonTextColor || '#FFFFFF');
+	    const sp = this.stylePreset;
+	    const presetBtnColors = { gradient: '#FF9933', minimal: '#6B4423', card: '#DAA520', bookgold: '#B8A08A' };
+	    const defaultBtnBg = presetBtnColors[sp] || '#FF9933';
+	    const bg = isCopyMini ? 'rgba(255,255,255,0.92)' : (v.buttonBgColor || defaultBtnBg);
+	    const color = isCopyMini ? (v.buttonBgColor || defaultBtnBg) : (v.buttonTextColor || '#FFFFFF');
 	    return [
 	      `background:${bg};`,
 	      `color:${color};`,
@@ -1072,12 +1148,16 @@ onShareClick() {
       border-radius: 16rpx;
       background: rgba(255,255,255,0.08);
     }
-    &.rc-link-minimal .rc-link-text,
+    &.rc-link-minimal .rc-link-text {
+        color: #8B7355;
+        background: rgba(92,61,30,0.04);
+        opacity: 1;
+      }
     &.rc-link-card .rc-link-text {
-      color: #666666;
-      background: #F3F4F6;
-      opacity: 1;
-    }
+        color: #B8860B;
+        background: rgba(184,134,11,0.06);
+        opacity: 1;
+      }
   }
   .rc-qr-row {
     margin-top: 36rpx;
@@ -1100,14 +1180,14 @@ onShareClick() {
     &.rc-qr-minimal {
       align-items: flex-start;
       gap: 12rpx;
-      .rc-qr-minimal-img { border: 2rpx solid #F3F4F6; }
+      .rc-qr-minimal-img { border: 2rpx solid #E8D5C0; }
       .rc-qr-tip-minimal { text-align: left; max-width: 500rpx; }
     }
     &.rc-qr-card {
       gap: 20rpx;
       .rc-qr-wrap-card {
         border-radius: 20rpx;
-        border: 4rpx solid #FFD700;
+        border: 4rpx solid #F0C040;
         padding: 16rpx;
         background: #ffffff;
         .rc-qr-card-img { width: 260rpx; height: 260rpx; border-radius: 12rpx; }
@@ -1120,11 +1200,28 @@ onShareClick() {
   .style-gradient {
     box-sizing: border-box;
     width: 100%;
-    .rc-header .rc-title { color: #ffffff; }
-    .rc-code-box {
-      background: rgba(0,0,0,0.16);
-      .rc-prefix { color: rgba(255,255,255,0.7); }
-      .rc-code { color: #ffffff; }
+    .rc-header .rc-title { color: #5C3D1E; }
+    .rc-code-gradient {
+      background: transparent;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 36rpx 30rpx;
+      .rc-code-gradient-text {
+        text-align: center;
+        letter-spacing: 4rpx;
+      }
+    }
+    .rc-copy-link-gradient {
+      margin-top: 24rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    }
+    .rc-link-row .rc-link-text {
+      background: rgba(92,61,30,0.08);
+      color: #5C3D1E;
     }
   }
 
@@ -1137,8 +1234,15 @@ onShareClick() {
       border-style: dashed;
       padding: 22rpx 26rpx;
       gap: 16rpx;
-      .rc-code-minimal-text { text-align: center; letter-spacing: 4rpx; }
-      .rc-copy-minimal { font-size: 22rpx; }
+      align-items: center;
+      .rc-code-minimal-text { text-align: center; letter-spacing: 4rpx; line-height: 1; }
+      .rc-copy-minimal {
+        font-size: 22rpx;
+        line-height: 1;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
     .rc-action-minimal { justify-content: space-between; }
   }
@@ -1154,7 +1258,7 @@ onShareClick() {
     }
     .rc-header-card { margin-top: 8rpx; }
     .rc-code-card {
-      background: #FAFAFA;
+      background: rgba(184,134,11,0.04);
       padding: 28rpx 32rpx;
       gap: 16rpx;
       border-radius: 20rpx;
@@ -1162,10 +1266,56 @@ onShareClick() {
         padding: 14rpx 30rpx;
         font-weight: 700;
         font-size: 24rpx;
+        cursor: pointer;
+        transition: opacity 0.2s ease, transform 0.15s ease;
+        &:active { opacity: 0.9; transform: scale(0.98); }
       }
     }
     .rc-action-card { justify-content: flex-start; }
   }
+
+  /* ===== 预设 4：bookgold 金棕风格 ===== */
+  .style-bookgold {
+    box-sizing: border-box;
+    width: 100%;
+    .rc-header-bookgold {
+      .rc-title {
+        color: #FFFFFF;
+      }
+    }
+    .rc-code-bookgold {
+      background: rgba(255,255,255,0.12);
+      .rc-prefix {
+        color: rgba(255,255,255,0.7);
+      }
+      .rc-copy-bookgold {
+        background: #B8A08A;
+        color: #fff;
+      }
+    }
+    .rc-action-bookgold {
+      justify-content: flex-start;
+      .rc-btn-share-bookgold {
+        background: #B8A08A;
+        color: #fff;
+      }
+    }
+    .rc-link-bookgold {
+      .rc-link-text {
+        background: rgba(255,255,255,0.08);
+        color: #E8DDD0;
+      }
+    }
+    .rc-qr-bookgold {
+      .rc-qr-bookgold-img {
+        border: 3rpx solid #D4C4B0;
+        border-radius: 16rpx;
+      }
+      .rc-qr-tip-bookgold {
+        color: #E8DDD0;
+      }
+    }
+  }
 }
 </style>