修复：AI问答模块

src/pages/ai/index.scss

@@ -23,11 +23,40 @@ html {
     color: white;
     padding: 16px;
     text-align: center;
-    font-size: 1.2rem; // 使用 rem 单位
+    font-size: 1rem; // 使用 rem 单位
     font-weight: bold;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
 
+  .connection-status {
+    background: #fff3cd;
+    border-bottom: 1px solid #ffeaa7;
+    padding: 8px 16px;
+    text-align: center;
+
+    .status-indicator {
+      font-size: 0.9rem;
+      color: #856404;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+
+      &.offline::before {
+        content: '⚠️';
+        font-size: 1rem;
+      }
+
+      .reconnect-button {
+        margin-left: 12px;
+        height: 28px;
+        padding: 0 12px;
+        font-size: 0.8rem;
+        border-radius: 14px;
+      }
+    }
+  }
+
   .chat-container {
     flex: 1;
     display: flex;
@@ -111,8 +140,23 @@ html {
       border-radius: 18px;
       word-wrap: break-word;
       line-height: 1.5;
-      font-size: 1rem; // 使用 rem 单位
+      font-size: .8rem; // 使用 rem 单位
       position: relative;
+      display: flex;
+      align-items: flex-end;
+      gap: 4px;
+
+      .message-text {
+        flex: 1;
+        white-space: pre-wrap;
+      }
+
+      .typing-cursor {
+        color: #666;
+        font-weight: bold;
+        animation: blink 1s infinite;
+        margin-left: 2px;
+      }
 
       .typing-indicator {
         display: flex;
@@ -139,7 +183,7 @@ html {
     padding: 16px;
     border-top: 1px solid #e0e0e0;
     display: flex;
-    align-items: flex-end;
+    align-items: center;
     gap: 12px;
     box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
 
@@ -155,7 +199,7 @@ html {
       padding: 10px 16px;
       border: 1px solid #e0e0e0;
       border-radius: 20px;
-      font-size: 1.2rem; // 使用 rem 单位
+      font-size: 1rem; // 使用 rem 单位
       line-height: 1.8;
       resize: none;
       outline: none;
@@ -202,6 +246,32 @@ html {
         box-shadow: none;
       }
     }
+
+    .stop-button {
+      min-width: 60px;
+      height: 40px;
+      border-radius: 20px;
+      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
+      border: none;
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+      font-size: 0.8rem;
+      padding: 0 12px;
+
+      &:hover {
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
+      }
+
+      &:active {
+        transform: scale(0.95);
+      }
+    }
   }
 
   .quick-questions {
@@ -210,7 +280,7 @@ html {
     border-top: 1px solid #e0e0e0;
 
     .quick-title {
-      font-size: 1rem; // 使用 rem 单位
+      font-size: .8rem; // 使用 rem 单位
       color: #666;
       margin-bottom: 12px;
       display: flex;
@@ -228,7 +298,7 @@ html {
         background: #f9f9f9;
         border: 1px solid #e0e0e0;
         border-radius: 12px;
-        font-size: 1rem; // 使用 rem 单位
+        font-size: .8rem; // 使用 rem 单位
         color: #333;
         cursor: pointer;
         transition: all 0.3s ease;
@@ -259,7 +329,7 @@ html {
     text-align: center;
 
     .empty-icon {
-      font-size: 4rem; // 使用 rem 单位
+      font-size: 3rem; // 使用 rem 单位
       margin-bottom: 16px;
       opacity: 0.5;
     }
@@ -272,7 +342,7 @@ html {
     }
 
     .empty-desc {
-      font-size: 1rem; // 使用 rem 单位
+      font-size: .8rem; // 使用 rem 单位
       color: #666;
       line-height: 1.5;
     }
@@ -300,3 +370,12 @@ html {
     opacity: 1;
   }
 }
+
+@keyframes blink {
+  0%, 50% {
+    opacity: 1;
+  }
+  51%, 100% {
+    opacity: 0;
+  }
+}