AI 对话web、wx优化

urbanLifelineWeb/packages/workcase/src/views/public/AIChat/AIChatView.scss

@@ -386,15 +386,18 @@ $brand-color-hover: #004488;
         &.user {
             flex-direction: row-reverse;
 
+            .message-content {
+                align-items: flex-end;
+            }
+
             .message-bubble {
                 background: $brand-color;
                 color: #fff;
                 border-radius: 16px 16px 4px 16px;
+            }
 
-                .message-time {
-                    text-align: right;
-                    color: rgba(255, 255, 255, 0.7);
-                }
+            .message-time {
+                text-align: right;
             }
         }
     }
@@ -419,8 +422,18 @@ $brand-color-hover: #004488;
         }
     }
 
-    .message-bubble {
+    .message-content {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
         max-width: 80%;
+
+        &.user {
+            align-items: flex-end;
+        }
+    }
+
+    .message-bubble {
         padding: 12px 16px;
         border-radius: 16px 16px 16px 4px;
         background: #fff;
@@ -458,11 +471,17 @@ $brand-color-hover: #004488;
                 &:nth-child(3) { animation-delay: 0s; }
             }
         }
+    }
 
+    .message-time {
+        font-size: 12px;
+        color: #94a3b8;
+    }
+
+    // 用户消息气泡中的样式
+    .message-row.user .message-bubble {
         .message-time {
-            font-size: 12px;
-            color: #94a3b8;
-            margin-top: 8px;
+            color: rgba(255, 255, 255, 0.7);
         }
     }
 }
@@ -538,11 +557,14 @@ $brand-color-hover: #004488;
     }
 
     .input-row {
+        display: flex;
+        align-items: flex-end;
+        gap: 8px;
         padding: 12px 16px;
     }
 
     .chat-textarea {
-        width: 100%;
+        flex: 1;
         border: none;
         outline: none;
         resize: none;
@@ -551,25 +573,13 @@ $brand-color-hover: #004488;
         background: transparent;
         line-height: 1.5;
         max-height: 120px;
+        min-height: 24px;
 
         &::placeholder {
             color: #94a3b8;
         }
     }
 
-    .toolbar-row {
-        padding: 12px 16px;
-        display: flex;
-        justify-content: flex-end;
-        border-top: 1px solid #f8fafc;
-    }
-
-    .toolbar-actions {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-
     .tool-btn {
         padding: 8px;
         color: #94a3b8;
@@ -578,11 +588,21 @@ $brand-color-hover: #004488;
         border-radius: 8px;
         cursor: pointer;
         transition: all 0.2s;
+        flex-shrink: 0;
 
         &:hover {
             color: #64748b;
             background: #f1f5f9;
         }
+
+        &.uploading {
+            cursor: not-allowed;
+            opacity: 0.6;
+        }
+
+        .spin {
+            animation: spin 1s linear infinite;
+        }
     }
 
     .send-btn {
@@ -593,6 +613,7 @@ $brand-color-hover: #004488;
         border-radius: 12px;
         cursor: not-allowed;
         transition: all 0.2s;
+        flex-shrink: 0;
 
         &.active {
             background: $brand-color;
@@ -717,3 +738,137 @@ $brand-color-hover: #004488;
         text-decoration: underline;
     }
 }
+
+// ==================== 文件上传相关样式 ====================
+.uploaded-files {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 12px 16px;
+    border-bottom: 1px solid #f1f5f9;
+}
+
+.uploaded-file-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    max-width: 200px;
+
+    .file-preview {
+        width: 32px;
+        height: 32px;
+        border-radius: 4px;
+        overflow: hidden;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &.image {
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+        }
+
+        &.document {
+            background: $brand-color-light;
+            color: $brand-color;
+        }
+    }
+
+    .file-name {
+        flex: 1;
+        font-size: 12px;
+        color: #374151;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .remove-file-btn {
+        padding: 4px;
+        color: #94a3b8;
+        background: transparent;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.2s;
+        flex-shrink: 0;
+
+        &:hover {
+            color: #ef4444;
+            background: #fef2f2;
+        }
+    }
+}
+
+// 消息气泡外的文件样式
+.message-files {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.message-file-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 10px;
+    max-width: 220px;
+    text-decoration: none;
+    color: #374151;
+    transition: all 0.2s;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+
+    &:hover {
+        border-color: $brand-color;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .file-preview {
+        width: 36px;
+        height: 36px;
+        border-radius: 6px;
+        overflow: hidden;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &.image {
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+        }
+
+        &.document {
+            background: $brand-color-light;
+            color: $brand-color;
+        }
+    }
+
+    .file-name {
+        flex: 1;
+        font-size: 13px;
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}