Przeglądaj źródła

feat(create-book): 将试试示例提示框移到输入框下方

原结构:试试示例 → 输入框 → AI推荐按钮
新结构:输入框 → 试试示例 → AI推荐按钮

理由:用户先看到输入框聚焦核心任务,遇到空白时再看示例获取灵感,
比放在上方引导效果更自然,也避免初始页面太长。

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
MyFramework User 1 miesiąc temu
rodzic
commit
5689fdf41e
1 zmienionych plików z 17 dodań i 17 usunięć
  1. 17 17
      my-uniapp-vue3/src/pages/book-generator/create.vue

+ 17 - 17
my-uniapp-vue3/src/pages/book-generator/create.vue

@@ -15,22 +15,6 @@
 
       <!-- ===== 区域 1:描述你想要的书籍 ===== -->
       <view class="card hero-card">
-        <!-- 示例提示词(轮播展示) -->
-        <view class="examples-row">
-          <text class="examples-label">试试:</text>
-          <view class="example-chips">
-            <view
-              :key="currentExampleIndex"
-              class="example-chip example-chip-fade"
-              @click="useCurrentExample"
-            >
-              <text class="example-chip-icon">✨</text>
-              <text class="example-chip-text">{{ examplePrompts[currentExampleIndex] }}</text>
-              <text class="example-chip-hint">点击填入</text>
-            </view>
-          </view>
-        </view>
-
         <!-- 文本域 -->
         <view class="textarea-wrapper">
           <textarea
@@ -47,6 +31,22 @@
           </view>
         </view>
 
+        <!-- 示例提示词(轮播展示,放在输入框下方) -->
+        <view class="examples-row">
+          <text class="examples-label">试试:</text>
+          <view class="example-chips">
+            <view
+              :key="currentExampleIndex"
+              class="example-chip example-chip-fade"
+              @click="useCurrentExample"
+            >
+              <text class="example-chip-icon">✨</text>
+              <text class="example-chip-text">{{ examplePrompts[currentExampleIndex] }}</text>
+              <text class="example-chip-hint">点击填入</text>
+            </view>
+          </view>
+        </view>
+
         <!-- AI 智能推荐按钮 -->
         <view v-if="!isEditMode" class="ai-btn-row">
           <button
@@ -968,7 +968,7 @@ onLoad(async (query: any) => {
 .hero-card { background: linear-gradient(180deg, #ffffff 0%, #fefefe 100%); }
 
 /* 示例提示词(轮播卡片) */
-.examples-row { display: flex; align-items: flex-start; gap: 12rpx; margin-bottom: 20rpx; }
+.examples-row { display: flex; align-items: flex-start; gap: 12rpx; margin-top: 18rpx; margin-bottom: 20rpx; }
 .examples-label { font-size: 22rpx; color: #9ca3af; flex-shrink: 0; padding-top: 12rpx; }
 .example-chips { display: flex; flex: 1; min-width: 0; }