feat: 调整首页组件目录结构

pages/index/components/chat/ChatMainList/styles/index.scss

@@ -0,0 +1,155 @@
+.chat-container {
+  width: 100vw;
+  height: 100vh;
+  background-color: #e9f3f7;
+
+  display: flex;
+  flex-direction: column;
+  overflow: hidden !important;
+  position: relative;
+  /* 确保在键盘弹起时布局正确 */
+  box-sizing: border-box;
+
+  .chat-container-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 0;
+    height: 270px;
+    background: linear-gradient(180deg, #42adf9 0%, #6cd1ff 51%, #e9f3f7 99%);
+  }
+
+  .chat-content {
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    z-index: 1;
+    overflow: hidden;
+  }
+
+  .chat-container-top-bannar {
+    width: 100vw;
+    flex-shrink: 0;
+    touch-action: none;
+  }
+
+  .area-msg-list {
+    width: 100vw;
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+    height: 0;
+    padding: 4px 0 0;
+    overscroll-behavior: contain; /* 阻止滚动穿透 */
+    -webkit-overflow-scrolling: touch;
+
+    display: flex;
+    flex-direction: column;
+
+    .message-item-ai {
+      display: flex;
+      justify-content: flex-start;
+    }
+
+    .message-item-mine {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    .message-item-other {
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+
+.footer-area {
+  width: 100vw;
+  flex-shrink: 0;
+  padding: 4px 0 20px 0; /* 直接设置20px底部安全距离 */
+  background-color: #e9f3f7;
+  touch-action: pan-x;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: fit-content;
+  /* 安卓键盘适配 - 使用相对定位配合adjustPan */
+  position: relative;
+  z-index: 1;
+  transition: padding-bottom 0.3s ease;
+  /* 确保输入区域始终可见 */
+  // transform: translateZ(0);
+  // -webkit-transform: translateZ(0);
+}
+
+.area-input {
+  display: flex;
+  align-items: center;
+  border-radius: 22px;
+  background-color: #ffffff;
+  box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
+  margin: 0 12px;
+
+  .input-container-voice {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    flex-shrink: 0;
+    align-self: flex-end;
+
+    image {
+      width: 22px;
+      height: 22px;
+    }
+  }
+
+  .input-container-send {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    flex-shrink: 0;
+    align-self: flex-end;
+
+    image {
+      width: 28px;
+      height: 28px;
+    }
+  }
+
+  .textarea {
+    flex: 1;
+    max-height: 92px;
+    min-height: 22px;
+    font-size: 16px;
+    line-height: 22px;
+    margin-bottom: 2px;
+    align-items: center;
+  }
+}
+
+// 打字机光标闪烁动画
+.typing-cursor {
+  display: inline-block;
+  color: #42adf9;
+  font-weight: bold;
+  font-size: 1.2em;
+  animation: blink 1s infinite;
+  margin-left: 2px;
+}
+
+@keyframes blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}