【m】优化拆分，拆分为多个脚本

WebApp/client/public/onebyone/style.css

@@ -52,6 +52,7 @@ body {
 
 .chat-bubble {
     animation: messageSlide 0.3s ease-out;
+    margin-bottom: 12px;
 }
 
 @keyframes messageSlide {
@@ -59,6 +60,80 @@ body {
     to { opacity: 1; transform: translateX(0); }
 }
 
+/* 消息样式 */
+.message-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 4px;
+}
+
+.message-header img {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.message-sender {
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.message-time {
+    font-size: 12px;
+    color: #94a3b8;
+}
+
+.message-content {
+    padding: 8px 16px;
+    border-radius: 8px;
+    font-size: 14px;
+    max-width: 70%;
+}
+
+/* 系统消息 */
+.message-system .message-sender {
+    color: #60a5fa;
+}
+
+.message-system .message-content {
+    background-color: rgba(30, 64, 175, 0.3);
+    color: #ffffff;
+}
+
+/* 对方消息 */
+.message-other .message-sender {
+    color: #a5b4fc;
+}
+
+.message-other .message-content {
+    background-color: #1e293b;
+    color: #ffffff;
+    border-top-left-radius: 0;
+}
+
+/* 自己的消息 */
+.message-self {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.message-self .message-header {
+    flex-direction: row-reverse;
+}
+
+.message-self .message-sender {
+    color: #4ade80;
+}
+
+.message-self .message-content {
+    background-color: #4f46e5;
+    color: #ffffff;
+    border-top-right-radius: 0;
+}
+
 .custom-scrollbar::-webkit-scrollbar {
     width: 6px;
 }
@@ -104,7 +179,7 @@ body {
     to { opacity: 1; transform: scale(1); }
 }
 
-/* 数据绑定标记 - 开发调试时显示 */
+/* 数据绑定标记 - 开发调试时显示
 [data-field]::after {
     content: attr(data-field);
     position: absolute;
@@ -122,4 +197,4 @@ body {
     white-space: nowrap;
 }
 [data-field]:hover::after { opacity: 1; }
-[data-field] { position: relative; }
+[data-field] { position: relative; }*/