Explorar el Código

fix(frontend): 分享海报移除模板/背景色选择行并上移画布

E2E Test Bot hace 1 semana
padre
commit
4cdc515d79
Se han modificado 1 ficheros con 6 adiciones y 125 borrados
  1. 6 125
      cfc-frontend/components/ContentSharePoster.vue

+ 6 - 125
cfc-frontend/components/ContentSharePoster.vue

@@ -2,50 +2,6 @@
   <view class="poster-overlay" v-if="show" @click.self="$emit('close')">
     <view class="poster-container">
       <canvas canvas-id="contentPosterCanvas" class="poster-canvas" id="contentPosterCanvas"></canvas>
-      <!-- 模板选择 -->
-      <view class="poster-tpl-row">
-        <view class="tpl-label">海报模板</view>
-        <view class="tpl-options">
-          <view
-            class="tpl-option"
-            :class="{ 'tpl-active': template === 'gradient' }"
-            @click="switchTemplate('gradient')"
-          >
-            <view class="tpl-dot tpl-dot-grad"></view>
-            <text class="tpl-text">渐变</text>
-          </view>
-          <view
-            class="tpl-option"
-            :class="{ 'tpl-active': template === 'minimal' }"
-            @click="switchTemplate('minimal')"
-          >
-            <view class="tpl-dot tpl-dot-dark"></view>
-            <text class="tpl-text">深色</text>
-          </view>
-          <view
-            class="tpl-option"
-            :class="{ 'tpl-active': template === 'card' }"
-            @click="switchTemplate('card')"
-          >
-            <view class="tpl-dot tpl-dot-light"></view>
-            <text class="tpl-text">卡片</text>
-          </view>
-        </view>
-      </view>
-      <!-- 背景颜色选择(渐变模板可用) -->
-      <view class="poster-bg-row" v-if="template === 'gradient'">
-        <view class="tpl-label">背景色</view>
-        <view class="bg-options">
-          <view
-            v-for="(c, i) in bgColors"
-            :key="i"
-            class="bg-option"
-            :class="{ 'bg-active': bgColor === c }"
-            :style="{ background: c }"
-            @click="switchBgColor(c)"
-          ></view>
-        </view>
-      </view>
       <view class="poster-actions">
         <button class="poster-btn save" @click="savePoster">保存到相册</button>
       </view>
@@ -89,10 +45,7 @@ export default {
     }
   },
   data() {
-    return {
-      // 可选的背景色(渐变模板下展示)
-      bgColors: ['#FF8C42', '#6366F1', '#F59E0B', '#10B981', '#FF6B9D', '#1E293B', '#FFFFFF']
-    }
+    return {}
   },
   methods: {
     getColors() {
@@ -143,7 +96,7 @@ export default {
           var scaleY = 1
           if (rect && rect.width && rect.height) {
             scaleX = rect.width / 500
-            scaleY = rect.height / 633
+            scaleY = rect.height / 800
           }
           self._renderPoster(scaleX, scaleY)
         })
@@ -624,27 +577,12 @@ export default {
       ctx.closePath()
     },
 
-    switchTemplate(tpl) {
-      this.$emit('update:template', tpl)
-      var self = this
-      this.$nextTick(function() {
-        setTimeout(self.drawPoster.bind(self), 100)
-      })
-    },
-    switchBgColor(color) {
-      this.$emit('update:bgColor', color)
-      var self = this
-      this.$nextTick(function() {
-        setTimeout(self.drawPoster.bind(self), 100)
-      })
-    },
-
     savePoster() {
       var self = this
       uni.canvasToTempFilePath({
         canvasId: 'contentPosterCanvas',
         destWidth: 500,
-        destHeight: 633,
+        destHeight: 800,
         success: function(res) {
           uni.saveImageToPhotosAlbum({
             filePath: res.tempFilePath,
@@ -699,7 +637,8 @@ export default {
 }
 .poster-canvas {
   width: 620rpx;
-  height: 792rpx;
+  height: 992rpx;
+  margin-bottom: 80rpx;
   border-radius: 16rpx;
 }
 .poster-actions {
@@ -723,63 +662,5 @@ export default {
   font-weight: 600;
 }
 .poster-btn.save:active { opacity: 0.85; }
-.poster-tpl-row {
-  display: flex;
-  align-items: center;
-  margin: 12rpx 0;
-  font-size: 24rpx;
-}
-.tpl-label {
-  margin-right: 20rpx;
-  color: #666;
-}
-.tpl-options {
-  display: flex;
-}
-.tpl-option {
-  flex: 1;
-  margin: 0 4rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-}
-.tpl-dot {
-  width: 24rpx;
-  height: 24rpx;
-  border-radius: 999rpx;
-  margin-bottom: 4rpx;
-}
-.tpl-dot-grad { background: linear-gradient(135deg, #FF8C42, #EA580C); }
-.tpl-dot-dark { background: #1E293B; }
-.tpl-dot-light { background: #FFFFFF; }
-.tpl-text {
-  font-size: 14rpx;
-  text-align: center;
-  color: #666;
-}
-.tpl-active .tpl-text { color: #F97316; }
 
-.poster-bg-row {
-  display: flex;
-  align-items: center;
-  margin: 12rpx 0;
-  font-size: 24rpx;
-}
-.bg-label {
-  margin-right: 20rpx;
-  color: #666;
-}
-.bg-options {
-  display: flex;
-}
-.bg-option {
-  width: 32rpx;
-  height: 32rpx;
-  border-radius: 999rpx;
-  margin: 0 4rpx;
-  cursor: pointer;
-}
-.bg-active {
-  border: 2rpx solid #F97316;
-}</style>
+</style>