feat: 消息ui优化

Yi.Ai.Vue3/src/pages/chat/styles/bubble.scss

@@ -0,0 +1,169 @@
+// 气泡列表相关样式 (需要 :deep 穿透)
+
+// 基础气泡列表样式
+@mixin bubble-list-base {
+  :deep(.el-bubble-list) {
+    padding-top: 24px;
+
+    @media (max-width: 768px) {
+      padding-top: 16px;
+    }
+  }
+}
+
+// 气泡基础样式
+@mixin bubble-base {
+  :deep(.el-bubble) {
+    padding: 0 12px 24px;
+
+    // 隐藏头像
+    .el-avatar {
+      display: none !important;
+    }
+
+    // 用户消息样式
+    &[class*="end"] {
+      width: 100%;
+      max-width: 100%;
+
+      .el-bubble-content-wrapper {
+        flex: none;
+        max-width: fit-content;
+      }
+
+      .el-bubble-content {
+        width: fit-content;
+        max-width: 100%;
+      }
+    }
+
+    @media (max-width: 768px) {
+      padding: 0 8px 16px;
+    }
+
+    @media (max-width: 480px) {
+      padding: 0 6px;
+      padding-bottom: 12px;
+    }
+  }
+}
+
+// AI消息样式
+@mixin bubble-ai-style {
+  :deep(.el-bubble[class*="start"]) {
+    width: 100%;
+    max-width: 100%;
+
+    .el-bubble-content-wrapper {
+      flex: auto;
+    }
+
+    .el-bubble-content {
+      width: 100%;
+      max-width: 100%;
+      padding: 0;
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+    }
+  }
+}
+
+// 用户编辑模式样式
+@mixin bubble-edit-mode {
+  :deep(.el-bubble[class*="end"]) {
+    &:has(.edit-message-wrapper-full) {
+      .el-bubble-content-wrapper {
+        flex: auto;
+        max-width: 100%;
+      }
+
+      .el-bubble-content {
+        width: 100%;
+        max-width: 100%;
+      }
+    }
+  }
+}
+
+// 删除模式气泡样式
+@mixin bubble-delete-mode {
+  :deep(.el-bubble-list.delete-mode) {
+    .el-bubble {
+      &[class*="end"] .el-bubble-content-wrapper {
+        flex: auto;
+        max-width: 100%;
+      }
+
+      .el-bubble-content {
+        position: relative;
+        min-height: 44px;
+        padding: 12px 16px;
+        background-color: #f5f7fa;
+        border: 1px solid transparent;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+
+        &:hover {
+          background-color: #e8f0fe;
+          border-color: #c6dafc;
+        }
+      }
+
+      &:has(.el-checkbox.is-checked) .el-bubble-content {
+        background-color: #d2e3fc;
+        border-color: #8ab4f8;
+      }
+    }
+
+    .delete-checkbox-inline {
+      position: absolute;
+      left: 12px;
+      top: 12px;
+      z-index: 2;
+
+      :deep(.el-checkbox) {
+        --el-checkbox-input-height: 20px;
+        --el-checkbox-input-width: 20px;
+      }
+    }
+
+    .ai-content-wrapper,
+    .user-content-wrapper {
+      margin-left: 36px;
+      width: calc(100% - 36px);
+    }
+
+    .user-content-wrapper {
+      align-items: flex-start;
+
+      .edit-message-wrapper-full {
+        width: 100%;
+        max-width: 100%;
+      }
+    }
+  }
+}
+
+// Typewriter 样式
+@mixin typewriter-style {
+  :deep(.el-typewriter) {
+    overflow: hidden;
+    border-radius: 12px;
+  }
+}
+
+// Markdown 容器样式
+@mixin markdown-container {
+  :deep(.elx-xmarkdown-container) {
+    padding: 8px 4px;
+  }
+}
+
+// 代码块头部样式
+@mixin code-header {
+  :deep(.markdown-elxLanguage-header-div) {
+    top: -25px !important;
+  }
+}