fix: step

pages/make/index.vue

@@ -54,33 +54,23 @@
     <view class="editor-panel">
       <view class="drag-handle"></view>
 
-      <!-- 底部操作 -->
-      <view class="bottom-actions">
-        <button class="btn secondary" @tap="preview">
-          <uni-icons type="cloud-download" size="20" color="#888"></uni-icons>
-          <view>保存</view>
-        </button>
-        <button open-type="share" class="btn primary">
-          <uni-icons
-            type="paperplane-filled"
-            size="20"
-            color="#fff"
-          ></uni-icons>
-          <view>分享给好友</view>
-        </button>
-      </view>
-
-      <!-- 功能入口 -->
-      <view class="tools">
+      <!-- 功能入口 (步骤条式) -->
+      <view class="step-bar">
         <view
           v-for="(tool, idx) in tools"
           :key="idx"
-          class="tool-item"
+          class="step-item"
           :class="{ active: activeTool === tool.type }"
           @tap="activeTool = tool.type"
         >
-          <view class="tool-icon">{{ tool.icon }}</view>
-          <text class="tool-text">{{ tool.text }}</text>
+          <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>
 
@@ -112,6 +102,11 @@
             >没有更多了</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>
 
       <!-- 文字编辑 -->
@@ -235,6 +230,12 @@
             </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>
 
       <!-- 位置调整 -->
@@ -292,6 +293,22 @@
           <button class="btn" @tap="toggleAvatarDecor">切换挂饰</button>
         </view>
       </view>
+
+      <!-- 底部操作 -->
+      <view class="bottom-actions">
+        <button class="btn secondary" @tap="preview">
+          <uni-icons type="cloud-download" size="20" color="#888"></uni-icons>
+          <view>保存</view>
+        </button>
+        <button open-type="share" class="btn primary">
+          <uni-icons
+            type="paperplane-filled"
+            size="20"
+            color="#fff"
+          ></uni-icons>
+          <view>分享给好友</view>
+        </button>
+      </view>
     </view>
 
     <canvas
@@ -585,10 +602,9 @@ const selectGreeting = (text) => {
 };
 
 const tools = [
-  { type: "template", text: "模板", icon: "▦" },
-  { type: "text", text: "文字", icon: "文" },
-  { type: "position", text: "位置", icon: "图" },
-  // { type: "avatar", text: "头像挂饰", icon: "饰" },
+  { type: "template", text: "1. 选模板", icon: "🎨", step: 1 },
+  { type: "text", text: "2. 改文字", icon: "✍️", step: 2 },
+  { type: "position", text: "3. 调位置", icon: "🎯", step: 3 },
 ];
 const activeTool = ref("template");
 
@@ -1110,36 +1126,84 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
   margin: 12rpx auto;
 }
 
-/* 工具入口 */
-.tools {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  padding: 16rpx 24rpx 8rpx;
+/* 步骤条工具 */
+.step-bar {
+  display: flex;
+  justify-content: space-between;
+  padding: 30rpx 60rpx 10rpx;
+  position: relative;
 }
-.tool-item {
+.step-item {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 14rpx 0;
-  border-radius: 18rpx;
-  color: #666;
+  flex: 1;
+  position: relative;
+  z-index: 1;
 }
-.tool-item.active {
-  background: #fff6f5;
-  color: #ff3b30;
+.step-num-wrap {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  margin-bottom: 12rpx;
 }
-.tool-icon {
-  width: 64rpx;
-  height: 64rpx;
-  border-radius: 16rpx;
-  background: #fafafa;
+.step-line {
+  position: absolute;
+  right: 50%;
+  top: 30rpx;
+  width: 100%;
+  height: 2rpx;
+  background: #eee;
+  z-index: -1;
+}
+.step-num {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  background: #f5f5f5;
+  color: #999;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 8rpx;
+  font-size: 26rpx;
+  font-weight: bold;
+  border: 4rpx solid #fff;
+  transition: all 0.3s;
 }
-.tool-text {
-  font-size: 22rpx;
+.step-item.active .step-num {
+  background: #ff3b30;
+  color: #fff;
+  transform: scale(1.1);
+  box-shadow: 0 4rpx 12rpx rgba(255, 59, 48, 0.3);
+}
+.step-text {
+  font-size: 24rpx;
+  color: #999;
+  font-weight: 500;
+  transition: all 0.3s;
+}
+.step-item.active .step-text {
+  color: #ff3b30;
+  font-weight: bold;
+}
+
+/* 下一步引导 */
+.next-step-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20rpx 0;
+  margin: 10rpx 24rpx 20rpx;
+  background: #fff6f5;
+  border-radius: 12rpx;
+  color: #ff3b30;
+  font-size: 24rpx;
+  font-weight: 500;
+}
+.next-step-tip text {
+  margin-right: 8rpx;
 }
 
 /* 模板区 */