fix: userInfo position

pages/make/index.vue

@@ -61,7 +61,13 @@
             >{{ targetName + "\n  " + blessingText.content }}</text
           >
         </view>
-        <view class="user" :style="{ left: 160 + userOffsetX + 'rpx', bottom: 40 - userOffsetY + 'rpx' }">
+        <view
+          class="user"
+          :style="{ left: 160 + userOffsetX + 'rpx', bottom: 40 - userOffsetY + 'rpx' }"
+          @touchstart.stop="handleUserTouchStart"
+          @touchmove.stop="handleUserTouchMove"
+          @touchend.stop="handleUserTouchEnd"
+        >
           <image class="avatar" :src="userAvatar" mode="aspectFill" />
           <view class="user-info">
             <text class="user-name" :style="{ color: signatureColor }">{{
@@ -76,6 +82,10 @@
     </view>
 
     <view class="tip-line">
+      <view class="interaction-tip">
+        <uni-icons type="hand-up" size="14" color="#ff3b30"></uni-icons>
+        <text>点击标题或个人信息可拖动，双指可缩放标题</text>
+      </view>
       <text>分享或保存即可去除水印</text>
     </view>
 
@@ -125,41 +135,6 @@
           <view v-else-if="!hasMoreTitles && titles.length > 0" class="no-more">没有更多了</view>
         </view>
 
-        <!-- 标题位置调整 -->
-        <view class="form-item" style="margin-top: 20rpx;">
-          <text class="label">标题位置 (上下)</text>
-          <slider
-            :value="titleOffsetY"
-            min="-100"
-            max="300"
-            show-value
-            @change="(e) => (titleOffsetY = e.detail.value)"
-            activeColor="#ff3b30"
-          />
-        </view>
-        <view class="form-item">
-          <text class="label">标题位置 (左右)</text>
-          <slider
-            :value="titleOffsetX"
-            min="-200"
-            max="200"
-            show-value
-            @change="(e) => (titleOffsetX = e.detail.value)"
-            activeColor="#ff3b30"
-          />
-        </view>
-        <view class="form-item">
-          <text class="label">标题缩放</text>
-          <slider
-            :value="titleScale * 100"
-            min="50"
-            max="150"
-            show-value
-            @change="(e) => (titleScale = e.detail.value / 100)"
-            activeColor="#ff3b30"
-          />
-        </view>
-
         </view>
 
         <!-- 模板区 -->
@@ -334,8 +309,8 @@
             <text class="label">个人信息 (上下)</text>
             <slider
               :value="userOffsetY"
-              min="-100"
+              min="-300"
-              max="200"
+              max="600"
               show-value
               @change="(e) => (userOffsetY = e.detail.value)"
               activeColor="#ff3b30"
@@ -346,8 +321,8 @@
             <text class="label">个人信息 (左右)</text>
             <slider
               :value="userOffsetX"
-              min="-100"
+              min="-200"
-              max="100"
+              max="400"
               show-value
               @change="(e) => (userOffsetX = e.detail.value)"
               activeColor="#ff3b30"
@@ -464,6 +439,38 @@ const handleTitleTouchEnd = () => {
   startTouches = [];
 };
 
+// 个人信息触摸交互相关
+let startUserTouches = [];
+let initialUserState = {
+  offsetX: 0,
+  offsetY: 0,
+};
+
+const handleUserTouchStart = (e) => {
+  startUserTouches = e.touches;
+  initialUserState = {
+    offsetX: userOffsetX.value,
+    offsetY: userOffsetY.value,
+  };
+};
+
+const handleUserTouchEnd = () => {
+  startUserTouches = [];
+};
+
+const handleUserTouchMove = (e) => {
+  if (!startUserTouches.length) return;
+
+  if (e.touches.length === 1 && startUserTouches.length === 1) {
+    // 单指拖拽
+    const moveX = e.touches[0].clientX - startUserTouches[0].clientX;
+    const moveY = e.touches[0].clientY - startUserTouches[0].clientY;
+
+    userOffsetX.value = initialUserState.offsetX + moveX * pxToRpx;
+    userOffsetY.value = initialUserState.offsetY + moveY * pxToRpx;
+  }
+};
+
 const handleTitleTouchMove = (e) => {
   if (!currentTitle.value || !startTouches.length) return;
 
@@ -1242,6 +1249,20 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
   margin-bottom: 140rpx; /* 为底部固定按钮留出空间 */
 }
 
+.interaction-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  color: #ff3b30;
+  font-size: 24rpx;
+  font-weight: 500;
+  margin-bottom: 12rpx;
+  background: rgba(255, 59, 48, 0.05);
+  padding: 8rpx 0;
+  border-radius: 8rpx;
+}
+
 /* 卡片预览 */
 .card-preview {
   margin: 30rpx auto 20rpx;