优化串词成文的单词列表页面

word-app/src/app/word-story/word-story.page.html

@@ -1,4 +1,6 @@
-<ion-content class="word-story-content" [class.has-bottom-bar]="showExerciseView">
+<ion-content class="word-story-content"
+             [class.has-bottom-bar]="showExerciseView"
+             [class.has-fixed-bottom-bar]="!isGenerating && !storyResponse && !showExerciseView">
   <div class="ocean-bg"></div>
   
   <div class="word-story-container" [class.exercise-mode]="showExerciseView">
@@ -295,4 +297,4 @@
   <div class="exercise-score-bar" *ngIf="showExerciseView && exerciseStory && isAllBlanksFilled() && !scoreResult">
     <button type="button" class="score-btn" (click)="goToScore()">去评分</button>
   </div>
-</ion-footer>
+</ion-footer>

word-app/src/app/word-story/word-story.page.scss

@@ -9,6 +9,12 @@ $pearl: #FFFFFF;            // 珍珠白
 $coral: #FF7043;            // 珊瑚橙（点缀）
 $seaweed: #4CAF50;          // 海藻绿（点缀）
 
+// 让页面根背景跟 ion-content 一致，避免 footer 透明时露出黑底
+:host {
+  background: $ocean-foam;
+  --ion-background-color: #{$ocean-foam};
+}
+
 .word-story-content {
   --background: #{$ocean-foam};
   position: relative;
@@ -21,6 +27,11 @@ $seaweed: #4CAF50;          // 海藻绿（点缀）
     --padding-bottom: 0;
   }
 
+  // 非做题模式：底部操作栏是 fixed，需要给内容留空间避免遮挡
+  &.has-fixed-bottom-bar {
+    --padding-bottom: 130px; // 让列表最后一项不被遮挡，并留出更舒适间距
+  }
+
   // 海洋背景装饰
   .ocean-bg {
     position: fixed;
@@ -451,41 +462,6 @@ $seaweed: #4CAF50;          // 海藻绿（点缀）
         font-size: 1.2rem;
       }
     }
-
-    // 去做题按钮
-    .go-exercise-btn {
-      position: absolute;
-      bottom: -150px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 88vw;
-      max-width: 420px;
-      min-width: 280px;
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 10px;
-      padding: 14px 24px;
-      border-radius: 999px;
-      border: none;
-      font-size: 1.1rem;
-      font-weight: 600;
-      color: $pearl;
-      background: linear-gradient(135deg, $ocean-mid 0%, $ocean-deep 100%);
-      box-shadow: 0 4px 16px rgba(2, 136, 209, 0.35);
-      cursor: pointer;
-      transition: all 0.25s ease;
-
-      ion-icon {
-        font-size: 1.4rem;
-      }
-
-      &:active {
-        transform: translateX(-50%) scale(0.96);
-        box-shadow: 0 2px 10px rgba(2, 136, 209, 0.3);
-      }
-    }
   }
 
   // 故事已生成标题
@@ -525,7 +501,7 @@ $seaweed: #4CAF50;          // 海藻绿（点缀）
 
   // 占位div，用于撑开底部空间
   .exercise-bottom-placeholder {
-    height: 0; // 底部已移到 ion-footer，不再需要占位
+    height: 0;
     width: 100%;
     flex-shrink: 0;
   }
@@ -765,105 +741,6 @@ $seaweed: #4CAF50;          // 海藻绿（点缀）
     font-weight: 600;
   }
 
-  /* ==================== 底部操作栏 ==================== */
-  .bottom-bar {
-    position: static;
-
-    .bottom-wave {
-      height: 30px;
-      overflow: hidden;
-
-      svg {
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
-    }
-
-    .bottom-content {
-      background: $pearl;
-      padding: 16px 20px 24px;
-      border-top: 3px solid $ocean-deep; // 与选项池上边框一致
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 16px;
-      box-shadow: 0 -4px 20px rgba(1, 87, 155, 0.08);
-
-      .hint-section {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        flex: 1;
-
-        .hint-icon {
-          font-size: 1.8rem;
-          color: $ocean-light;
-        }
-
-        .hint-text {
-          .hint-title {
-            margin: 0 0 2px 0;
-            font-size: 0.95rem;
-            color: $ocean-deep;
-            font-weight: 700;
-          }
-
-          .hint-sub {
-            margin: 0;
-            font-size: 0.8rem;
-            color: #90A4AE;
-          }
-        }
-      }
-
-      .generate-btn {
-        display: flex;
-        align-items: center;
-        gap: 9px;
-        padding: 14px 28px;
-        border-radius: 16px;
-        border: none;
-        font-size: 1rem;
-        font-weight: 600;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        white-space: nowrap;
-        
-        background: #ECEFF1;
-        color: #90A4AE;
-
-        .btn-icon {
-          font-size: 1.2rem;
-        }
-
-        &.active {
-          background: linear-gradient(135deg, $ocean-mid 0%, $ocean-deep 100%);
-          color: $pearl;
-          box-shadow: 0 4px 15px rgba(2, 136, 209, 0.35);
-
-          &:active {
-            transform: scale(0.95);
-            box-shadow: 0 2px 8px rgba(2, 136, 209, 0.25);
-          }
-        }
-
-        &:disabled {
-          cursor: not-allowed;
-        }
-      }
-    }
-  }
-
-  // ion-footer 中的去做题按钮容器
-  .go-exercise-footer {
-    background: $pearl;
-    padding: 12px 16px 16px;
-    border-top: 3px solid $ocean-deep;
-    display: flex;
-    justify-content: center;
-  }
-
   /* ==================== 弹窗样式 ==================== */
   .wizard-modal-overlay {
     position: fixed;
@@ -1079,8 +956,20 @@ $seaweed: #4CAF50;          // 海藻绿（点缀）
 // ==================== 底部（ion-footer）样式 ====================
 // ion-footer 不在 .word-story-content 内，底栏样式在这里补齐
 .word-story-footer {
+  // 让 footer 本身透明，避免底部出现黑条
+  background: transparent;
+  --background: transparent;
+
+  &::part(background) {
+    background: transparent;
+  }
+  // 非做题模式底部操作栏 - 直接从原代码提取
   .bottom-bar {
-    position: static;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
 
     .bottom-wave {
       height: 30px;
@@ -1141,6 +1030,8 @@ $seaweed: #4CAF50;          // 海藻绿（点缀）
         cursor: pointer;
         transition: all 0.3s ease;
         white-space: nowrap;
+        
+        // 默认状态
         background: #ECEFF1;
         color: #90A4AE;
 
@@ -1166,6 +1057,7 @@ $seaweed: #4CAF50;          // 海藻绿（点缀）
     }
   }
 
+  // 已生成 & 非做题：去做题按钮（固定在底部，不遮挡内容）
   .go-exercise-footer {
     background: $pearl;
     padding: 12px 16px 16px;
@@ -1204,6 +1096,7 @@ $seaweed: #4CAF50;          // 海藻绿（点缀）
     }
   }
 
+  // 做题模式：底部选项池
   .exercise-bottom-bar {
     background: $pearl;
     padding: 12px 16px 16px;
@@ -1214,6 +1107,7 @@ $seaweed: #4CAF50;          // 海藻绿（点缀）
     min-height: 90px;
   }
 
+  // 做题模式：去评分按钮栏
   .exercise-score-bar {
     background: $pearl;
     padding: 12px 16px 20px;