fix: card content font size

pages/make/index.vue

@@ -22,6 +22,8 @@
             :style="{
               color: selectedColor,
               fontFamily: selectedFont.family,
+              fontSize: fontSize + 'rpx',
+              lineHeight: fontSize * 1.5 + 'rpx',
             }"
             >{{ targetName + "\n  " + blessingText }}</text
           >
@@ -29,8 +31,12 @@
         <view class="user" :style="{ left: 160 + userOffsetX + 'rpx' }">
           <image class="avatar" :src="userAvatar" mode="aspectFill" />
           <view class="user-info">
-            <text class="user-name">{{ signatureName }}</text>
-            <text class="user-desc">送上祝福</text>
+            <text class="user-name" :style="{ color: signatureColor }">{{
+              signatureName
+            }}</text>
+            <text class="user-desc" :style="{ color: signatureColor }"
+              >送上祝福</text
+            >
           </view>
         </view>
       </view>
@@ -114,6 +120,7 @@
             v-model="targetName"
             placeholder="请输入称呼"
             placeholder-style="color:#ccc"
+            maxlength="5"
           />
         </view>
 
@@ -150,6 +157,7 @@
               v-model="signatureName"
               placeholder="请输入署名"
               placeholder-style="color:#ccc"
+              maxlength="5"
             />
             <text class="edit-icon">✎</text>
           </view>
@@ -175,9 +183,22 @@
           </scroll-view>
         </view>
 
+        <!-- 字体大小 -->
+        <view class="form-item">
+          <text class="label">字体大小</text>
+          <slider
+            :value="fontSize"
+            min="24"
+            max="64"
+            show-value
+            @change="(e) => (fontSize = e.detail.value)"
+            activeColor="#ff3b30"
+          />
+        </view>
+
         <!-- 文字颜色 -->
         <view class="form-item">
-          <text class="label">文字颜色</text>
+          <text class="label">祝福语颜色</text>
           <view class="color-list">
             <view
               v-for="(color, index) in textColors"
@@ -190,6 +211,22 @@
             </view>
           </view>
         </view>
+
+        <!-- 署名颜色 -->
+        <view class="form-item">
+          <text class="label">署名颜色</text>
+          <view class="color-list">
+            <view
+              v-for="(color, index) in textColors"
+              :key="index"
+              class="color-item"
+              :style="{ background: color }"
+              @tap="signatureColor = color"
+            >
+              <view v-if="signatureColor === color" class="color-check">✔</view>
+            </view>
+          </view>
+        </view>
       </view>
 
       <!-- 位置调整 -->
@@ -262,9 +299,23 @@ const userAvatar = ref(
 );
 
 const blessingText = ref("");
+const fontSize = ref(32);
 
-const textColors = ["#ffffff", "#ff3b30", "#F5A623", "#8B572A", "#000000"];
+const textColors = [
+  "#ffffff",
+  "#000000",
+  "#ff3b30",
+  "#F5A623",
+  "#8B572A",
+  "#D0021B",
+  "#F8E71C",
+  "#7ED321",
+  "#4A90E2",
+  "#9013FE",
+  "#FFC0CB",
+];
 const selectedColor = ref("#ffffff");
+const signatureColor = ref("#ffffff");
 
 const fontList = [
   { name: "默认", family: "PingFang SC", url: "" },
@@ -578,8 +629,8 @@ const saveByCanvas = async (save = true) => {
             x: 70,
             y: 260 + bubbleOffsetY.value,
             maxWidth: 400,
-            fontSize: 32,
-            lineHeight: 46,
+            fontSize: fontSize.value,
+            lineHeight: fontSize.value * 1.5,
             backgroundColor: "rgba(255,255,255,0.85)",
             textColor: selectedColor.value,
             fontFamily: selectedFont.value.family,
@@ -591,6 +642,7 @@ const saveByCanvas = async (save = true) => {
             avatarImg: avatarImg, // 传入 Image 对象
             username: signatureName.value,
             desc: "送上祝福",
+            textColor: signatureColor.value,
           });
 
           // 6️⃣ 输出
@@ -1143,6 +1195,7 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
 .color-list {
   display: flex;
   gap: 20rpx;
+  flex-wrap: wrap;
 }
 .color-item {
   width: 64rpx;