workcase web ai聊天

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

@@ -365,6 +365,20 @@ $brand-color-hover: #004488;
     margin: 0 auto;
     padding: 24px 16px;
 
+    .chat-header {
+        text-align: center;
+        padding: 16px 0 24px;
+        border-bottom: 1px solid #f1f5f9;
+        margin-bottom: 24px;
+
+        .chat-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: #1e293b;
+            margin: 0;
+        }
+    }
+
     .message-row {
         display: flex;
         gap: 12px;
@@ -421,6 +435,31 @@ $brand-color-hover: #004488;
             word-wrap: break-word;
         }
 
+        .typing-cursor {
+            display: inline-block;
+            animation: blink 0.8s infinite;
+            color: $brand-color;
+            font-weight: bold;
+        }
+
+        .loading-dots {
+            display: flex;
+            gap: 4px;
+            padding: 4px 0;
+
+            span {
+                width: 6px;
+                height: 6px;
+                background: #94a3b8;
+                border-radius: 50%;
+                animation: bounce 1.4s infinite ease-in-out both;
+
+                &:nth-child(1) { animation-delay: -0.32s; }
+                &:nth-child(2) { animation-delay: -0.16s; }
+                &:nth-child(3) { animation-delay: 0s; }
+            }
+        }
+
         .message-time {
             font-size: 12px;
             color: #94a3b8;
@@ -429,6 +468,16 @@ $brand-color-hover: #004488;
     }
 }
 
+@keyframes blink {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+}
+
+@keyframes bounce {
+    0%, 80%, 100% { transform: scale(0); }
+    40% { transform: scale(1); }
+}
+
 // ==================== 快捷命令栏 ====================
 .quick-bar {
     padding: 8px 16px;