From 2e2a6165127b3328f8ed01ba1c13d53cc2aacde8 Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Sun, 1 Feb 2026 09:21:43 +0800
Subject: [PATCH] fix: msg

---
 pages/make/index.vue | 572 ++++++++++++++++++++++++-------------------
 1 file changed, 319 insertions(+), 253 deletions(-)

diff --git a/pages/make/index.vue b/pages/make/index.vue
index d916880..aea7b4b 100644
--- a/pages/make/index.vue
+++ b/pages/make/index.vue
@@ -1,5 +1,27 @@
 <template>
   <view class="make-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
+    <!-- 顶部步骤条 -->
+    <view class="top-steps">
+      <view class="step-bar">
+        <view
+          v-for="(tool, idx) in tools"
+          :key="idx"
+          class="step-item"
+          :class="{ active: activeTool === tool.type }"
+          @tap="openTool(tool.type)"
+        >
+          <view class="step-num-wrap">
+            <view class="step-line" v-if="idx > 0"></view>
+            <view class="step-num">
+              <text v-if="activeTool === tool.type && showPanel">{{ tool.icon }}</text>
+              <text v-else>{{ tool.step }}</text>
+            </view>
+          </view>
+          <text class="step-text">{{ tool.text }}</text>
+        </view>
+      </view>
+    </view>
+
     <!-- 预览卡片 -->
     <view class="card-preview">
       <image
@@ -22,7 +44,7 @@
         />
         <view
           class="bubble"
-          @tap="activeTool = 'text'"
+          @tap="openTool('text')"
           :style="{
             marginTop: 230 + bubbleOffsetY + 'rpx',
             maxWidth: bubbleMaxWidth + 80 + 'rpx',
@@ -57,11 +79,8 @@
       <text>分享或保存即可去除水印</text>
     </view>
 
-    <!-- 编辑工具区 -->
-    <view class="editor-panel">
-      <view class="drag-handle"></view>
-
-      <!-- 主操作按钮 -->
+    <!-- 底部固定按钮 -->
+    <view class="bottom-actions-fixed">
       <view class="main-actions">
         <button class="btn secondary" @tap="preview">
           <uni-icons type="cloud-download" size="20" color="#888"></uni-icons>
@@ -76,26 +95,13 @@
           <view>分享给好友</view>
         </button>
       </view>
+    </view>
 
-      <!-- 功能入口 (步骤条式) -->
-      <view class="step-bar">
-        <view
-          v-for="(tool, idx) in tools"
-          :key="idx"
-          class="step-item"
-          :class="{ active: activeTool === tool.type }"
-          @tap="activeTool = tool.type"
-        >
-          <view class="step-num-wrap">
-            <view class="step-line" v-if="idx > 0"></view>
-            <view class="step-num">
-              <text v-if="activeTool === tool.type">{{ tool.icon }}</text>
-              <text v-else>{{ tool.step }}</text>
-            </view>
-          </view>
-          <text class="step-text">{{ tool.text }}</text>
-        </view>
-      </view>
+    <!-- 弹出编辑面板 -->
+    <view class="panel-container" :class="{ show: showPanel }">
+      <view class="panel-mask" @tap="closePanel"></view>
+      <view class="panel-content" :class="{ 'glass-effect': activeTool === 'text' || activeTool === 'position' }">
+        <view class="panel-handle" @tap="closePanel"></view>
 
       <!-- 标题选择区 -->
       <view v-if="activeTool === 'title'" class="section">
@@ -154,231 +160,230 @@
           />
         </view>
 
-        <!-- 下一步引导 -->
-        <view class="next-step-tip" @tap="activeTool = 'template'">
-          <text>选好标题了，去选模板</text>
-          <uni-icons type="arrow-right" size="14" color="#ff3b30"></uni-icons>
-        </view>
-      </view>
-
-      <!-- 模板区 -->
-      <view v-if="activeTool === 'template'" class="section">
-        <view class="section-title">
-          <text>热门模板</text>
-        </view>
-        <view class="tpl-scroll">
-          <view class="tpl-grid">
-            <view
-              v-for="(tpl, i) in templates"
-              :key="i"
-              class="tpl-card"
-              :class="{ selected: tpl?.id === currentTemplate?.id }"
-              @tap="applyTemplate(tpl)"
-            >
-              <image :src="tpl.imageUrl" class="tpl-cover" mode="aspectFill" />
-              <view class="tpl-name">{{ tpl.name }}</view>
-              <view v-if="tpl?.id === currentTemplate?.id" class="tpl-check"
-                >✔</view
-              >
-            </view>
+          <!-- 下一步引导 -->
+          <view class="next-step-tip" @tap="openTool('title')">
+            <text>选好标题了，去选模板</text>
+            <uni-icons type="arrow-right" size="14" color="#ff3b30"></uni-icons>
           </view>
-          <view v-if="loadingTemplates" class="loading-more">加载中...</view>
-          <view
-            v-else-if="!hasMoreTemplates && templates.length > 0"
-            class="no-more"
-            >没有更多了</view
-          >
-        </view>
-        <!-- 下一步引导 -->
-        <view class="next-step-tip" @tap="activeTool = 'text'">
-          <text>选好模板了，去修改文字</text>
-          <uni-icons type="arrow-right" size="14" color="#ff3b30"></uni-icons>
-        </view>
-      </view>
-
-      <!-- 文字编辑 -->
-      <view v-if="activeTool === 'text'" class="section text-edit-section">
-        <!-- 祝贺对象 -->
-        <view class="form-item">
-          <text class="label">祝贺对象</text>
-          <input
-            class="input-box"
-            v-model="targetName"
-            placeholder="请输入称呼"
-            placeholder-style="color:#ccc"
-            maxlength="5"
-          />
         </view>
 
-        <!-- 祝福语库 -->
-        <view class="form-item">
-          <view class="label-row">
-            <text class="label">祝福语库</text>
-            <view class="refresh-btn" @tap="refreshGreetings">
-              <text class="refresh-icon">↻</text> 换一批
-            </view>
+        <!-- 模板区 -->
+        <view v-if="activeTool === 'template'" class="section">
+          <view class="section-title">
+            <text>热门模板</text>
           </view>
-          <scroll-view scroll-x class="greeting-scroll" show-scrollbar="false">
-            <view class="greeting-list">
+          <view class="tpl-scroll">
+            <view class="tpl-grid">
               <view
-                v-for="(text, index) in displayedGreetings"
-                :key="index"
-                class="greeting-card"
-                :class="{ active: blessingText === text.content }"
-                @tap="selectGreeting(text)"
+                v-for="(tpl, i) in templates"
+                :key="i"
+                class="tpl-card"
+                :class="{ selected: tpl?.id === currentTemplate?.id }"
+                @tap="applyTemplate(tpl)"
               >
-                <text class="greeting-text">{{ text.content }}</text>
-                <view
-                  v-if="blessingText.content === text.content"
-                  class="check-mark"
+                <image :src="tpl.imageUrl" class="tpl-cover" mode="aspectFill" />
+                <view class="tpl-name">{{ tpl.name }}</view>
+                <view v-if="tpl?.id === currentTemplate?.id" class="tpl-check"
                   >✔</view
                 >
               </view>
             </view>
-          </scroll-view>
+            <view v-if="loadingTemplates" class="loading-more">加载中...</view>
+            <view
+              v-else-if="!hasMoreTemplates && templates.length > 0"
+              class="no-more"
+              >没有更多了</view
+            >
+          </view>
+          <!-- 下一步引导 -->
+          <view class="next-step-tip" @tap="openTool('title')">
+            <text>选好模板了，去选标题</text>
+            <uni-icons type="arrow-right" size="14" color="#ff3b30"></uni-icons>
+          </view>
         </view>
 
-        <!-- 署名 -->
-        <view class="form-item">
-          <text class="label">署名</text>
-          <view class="input-wrapper">
+        <!-- 文字编辑 -->
+        <view v-if="activeTool === 'text'" class="section text-edit-section">
+          <!-- 祝贺对象 -->
+          <view class="form-item">
+            <text class="label">祝贺对象</text>
             <input
               class="input-box"
-              v-model="signatureName"
-              placeholder="请输入署名"
+              v-model="targetName"
+              placeholder="请输入称呼"
               placeholder-style="color:#ccc"
               maxlength="5"
             />
-            <text class="edit-icon">✎</text>
           </view>
-        </view>
 
-        <!-- 字体选择 -->
-        <view class="form-item">
-          <text class="label">字体样式</text>
-          <scroll-view scroll-x class="font-scroll" show-scrollbar="false">
-            <view class="font-list">
-              <view
-                v-for="(font, index) in fontList"
-                :key="index"
-                class="font-item"
-                :class="{ active: selectedFont.family === font.family }"
-                @tap="changeFont(font)"
-              >
-                <text :style="{ fontFamily: font.family }">{{
-                  font.name
-                }}</text>
+          <!-- 祝福语库 -->
+          <view class="form-item">
+            <view class="label-row">
+              <text class="label">祝福语库</text>
+              <view class="refresh-btn" @tap="refreshGreetings">
+                <text class="refresh-icon">↻</text> 换一批
               </view>
             </view>
-          </scroll-view>
-        </view>
+            <scroll-view scroll-x class="greeting-scroll" show-scrollbar="false">
+              <view class="greeting-list">
+                <view
+                  v-for="(text, index) in displayedGreetings"
+                  :key="index"
+                  class="greeting-card"
+                  :class="{ active: blessingText.content === text.content }"
+                  @tap="selectGreeting(text)"
+                >
+                  <text class="greeting-text">{{ text.content }}</text>
+                  <view
+                    v-if="blessingText.content === text.content"
+                    class="check-mark"
+                    >✔</view
+                  >
+                </view>
+              </view>
+            </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>
-          <view class="color-list">
-            <view
-              v-for="(color, index) in textColors"
-              :key="index"
-              class="color-item"
-              :style="{ background: color }"
-              @tap="selectedColor = color"
-            >
-              <view v-if="selectedColor === color" class="color-check">✔</view>
+          <!-- 署名 -->
+          <view class="form-item">
+            <text class="label">署名</text>
+            <view class="input-wrapper">
+              <input
+                class="input-box"
+                v-model="signatureName"
+                placeholder="请输入署名"
+                placeholder-style="color:#ccc"
+                maxlength="5"
+              />
+              <text class="edit-icon">✎</text>
             </view>
           </view>
+
+          <!-- 字体选择 -->
+          <view class="form-item">
+            <text class="label">字体样式</text>
+            <scroll-view scroll-x class="font-scroll" show-scrollbar="false">
+              <view class="font-list">
+                <view
+                  v-for="(font, index) in fontList"
+                  :key="index"
+                  class="font-item"
+                  :class="{ active: selectedFont.family === font.family }"
+                  @tap="changeFont(font)"
+                >
+                  <text :style="{ fontFamily: font.family }">{{
+                    font.name
+                  }}</text>
+                </view>
+              </view>
+            </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>
+            <view class="color-list">
+              <view
+                v-for="(color, index) in textColors"
+                :key="index"
+                class="color-item"
+                :style="{ background: color }"
+                @tap="selectedColor = color"
+              >
+                <view v-if="selectedColor === color" class="color-check">✔</view>
+              </view>
+            </view>
+          </view>
+
+          <!-- 下一步引导 -->
+          <view class="next-step-tip" @tap="openTool('position')">
+            <text>文字改好了，去调位置</text>
+            <uni-icons type="arrow-right" size="14" color="#ff3b30"></uni-icons>
+          </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 v-if="activeTool === 'position'" class="section position-section">
+          <view class="section-title">
+            <text>调整位置</text>
+          </view>
+
+          <view class="form-item" style="margin-top: 20rpx;">
+            <text class="label">祝福语气泡 (上下)</text>
+            <slider
+              :value="bubbleOffsetY"
+              min="-200"
+              max="400"
+              show-value
+              @change="(e) => (bubbleOffsetY = e.detail.value)"
+              activeColor="#ff3b30"
+            />
+          </view>
+
+          <view class="form-item">
+            <text class="label">祝福语气泡宽度</text>
+            <slider
+              :value="bubbleMaxWidth"
+              min="200"
+              max="460"
+              show-value
+              @change="(e) => (bubbleMaxWidth = e.detail.value)"
+              activeColor="#ff3b30"
+            />
+          </view>
+
+          <view class="form-item">
+            <text class="label">个人信息 (上下)</text>
+            <slider
+              :value="userOffsetY"
+              min="-100"
+              max="200"
+              show-value
+              @change="(e) => (userOffsetY = e.detail.value)"
+              activeColor="#ff3b30"
+            />
+          </view>
+
+          <view class="form-item">
+            <text class="label">个人信息 (左右)</text>
+            <slider
+              :value="userOffsetX"
+              min="-100"
+              max="100"
+              show-value
+              @change="(e) => (userOffsetX = e.detail.value)"
+              activeColor="#ff3b30"
+            />
+          </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>
-
-        <!-- 下一步引导 -->
-        <view class="next-step-tip" @tap="activeTool = 'position'">
-          <text>文字写好了，去微调位置</text>
-          <uni-icons type="arrow-right" size="14" color="#ff3b30"></uni-icons>
-        </view>
-      </view>
-
-      <!-- 位置调整 -->
-      <view v-if="activeTool === 'position'" class="section position-section">
-        <view class="form-item">
-          <text class="label">祝福语位置 (上下)</text>
-          <slider
-            :value="bubbleOffsetY"
-            min="-200"
-            max="200"
-            show-value
-            @change="(e) => (bubbleOffsetY = e.detail.value)"
-            activeColor="#ff3b30"
-          />
-        </view>
-        <view class="form-item">
-          <text class="label">祝福语宽度</text>
-          <slider
-            :value="bubbleMaxWidth"
-            min="200"
-            max="460"
-            show-value
-            @change="(e) => (bubbleMaxWidth = e.detail.value)"
-            activeColor="#ff3b30"
-          />
-        </view>
-        <view class="form-item">
-          <text class="label">署名位置 (左右)</text>
-          <slider
-            :value="userOffsetX"
-            min="-200"
-            max="200"
-            show-value
-            @change="(e) => (userOffsetX = e.detail.value)"
-            activeColor="#ff3b30"
-          />
-        </view>
-        <view class="form-item">
-          <text class="label">署名位置 (上下)</text>
-          <slider
-            :value="userOffsetY"
-            min="-200"
-            max="200"
-            show-value
-            @change="(e) => (userOffsetY = e.detail.value)"
-            activeColor="#ff3b30"
-          />
-        </view>
-      </view>
-
-      <!-- 头像挂饰 -->
-      <view v-if="activeTool === 'avatar'" class="section">
-        <view class="section-title"><text>头像挂饰</text></view>
-        <view class="row">
-          <button class="btn" @tap="toggleAvatarDecor">切换挂饰</button>
-        </view>
       </view>
     </view>
 
@@ -735,6 +740,16 @@ const tools = [
   { type: "position", text: "4. 调位置", icon: "🎯", step: 4 },
 ];
 const activeTool = ref("template");
+const showPanel = ref(false);
+
+const openTool = (toolType) => {
+  activeTool.value = toolType;
+  showPanel.value = true;
+};
+
+const closePanel = () => {
+  showPanel.value = false;
+};
 
 const templates = ref([]);
 
@@ -1106,14 +1121,9 @@ function drawUserBubble(ctx, options) {
 
 function drawRoundRect(ctx, x, y, w, h, r, color) {
   ctx.beginPath();
-  //   ctx.setFillStyle(color)
-  ctx.fillStyle = "rgba(255,255,255,0.18)";
-  ctx.fill();
-
-  // 描边（非常关键）
+  ctx.fillStyle = color || "rgba(255,255,255,0.18)";
   ctx.strokeStyle = "rgba(255,255,255,0.35)";
   ctx.lineWidth = 1;
-  ctx.stroke();
 
   ctx.moveTo(x + r, y);
   ctx.lineTo(x + w - r, y);
@@ -1136,11 +1146,19 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
   box-sizing: border-box;
 }
 
+/* 顶部提示 */
+.tip-line {
+  text-align: center;
+  color: #999;
+  font-size: 22rpx;
+  margin-bottom: 140rpx; /* 为底部固定按钮留出空间 */
+}
+
 /* 卡片预览 */
 .card-preview {
-  margin: 24rpx auto;
-  height: 960rpx;
-  width: 540rpx;
+  margin: 30rpx auto 20rpx;
+  height: 900rpx;
+  width: 506rpx; /* 保持 9:16 比例并稍微缩小一点 */
   border-radius: 30rpx;
   overflow: hidden;
   position: relative;
@@ -1229,36 +1247,84 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
   opacity: 0.6;
 }
 
-/* 顶部提示 */
-.tip-line {
-  text-align: center;
-  color: #999;
-  font-size: 22rpx;
-}
-
-/* 编辑工具区 */
-.editor-panel {
-  margin: 20rpx 24rpx 40rpx;
-  border-radius: 30rpx 30rpx 0 0;
+/* 顶部步骤条 */
+.top-steps {
   background: #fff;
-  box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.06);
-  padding-bottom: env(safe-area-inset-bottom);
+  padding: 10rpx 0;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+  position: relative;
+  z-index: 10;
 }
-.drag-handle {
-  width: 120rpx;
-  height: 8rpx;
-  border-radius: 999rpx;
-  background: #eee;
-  margin: 12rpx auto;
-}
-
-/* 步骤条工具 */
 .step-bar {
   display: flex;
   justify-content: space-between;
-  padding: 20rpx 60rpx 10rpx;
+  padding: 10rpx 40rpx;
   position: relative;
 }
+
+/* 底部固定按钮 */
+.bottom-actions-fixed {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  padding-bottom: env(safe-area-inset-bottom);
+  z-index: 90;
+  box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.05);
+}
+
+/* 弹出编辑面板 */
+.panel-container {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  visibility: hidden;
+  pointer-events: none;
+  transition: all 0.3s;
+}
+.panel-container.show {
+  visibility: visible;
+  pointer-events: auto;
+}
+.panel-mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.panel-container.show .panel-mask {
+  opacity: 1;
+}
+.panel-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  border-radius: 40rpx 40rpx 0 0;
+  padding: 30rpx 40rpx calc(40rpx + env(safe-area-inset-bottom));
+  transform: translateY(100%);
+  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+  max-height: 80vh;
+  overflow-y: auto;
+}
+.panel-container.show .panel-content {
+  transform: translateY(0);
+}
+.panel-content.glass-effect {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(20rpx);
+  -webkit-backdrop-filter: blur(20rpx);
+}
+.panel-handle {
+  width: 80rpx;
+  height: 8rpx;
+  background: #ddd;
+  border-radius: 4rpx;
+  margin: 0 auto 30rpx;
+}
 .step-item {
   display: flex;
   flex-direction: column;