更新了一些功能（媒体预览有bug）

src/style.css

@@ -27,6 +27,10 @@
   --message-text-received: #212529;
   --input-bg: #ffffff;
   --header-bg: #ffffff;
+
+  /* 亮色模式背景装饰 */
+  --bg-pattern: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.03"><rect width="100" height="100" fill="none"/><circle cx="50" cy="50" r="2" fill="%234361ee"/></svg>');
+  --chat-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
 }
 
 [data-theme="dark"] {
@@ -44,6 +48,10 @@
   --message-text-received: #ffffff;
   --input-bg: #2d2d2d;
   --header-bg: #2d2d2d;
+
+  /* 暗色模式背景装饰 */
+  --bg-pattern: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.05"><rect width="100" height="100" fill="none"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%234cc9f0" stroke-width="0.5"/></svg>');
+  --chat-bg: linear-gradient(135deg, #111827 0%, #1f2937 100%);
 }
 
 /* 全局样式 */
@@ -56,6 +64,30 @@ body {
   margin: 0;
   padding: 0;
   transition: all 0.3s ease;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+/* 主应用背景 */
+#app {
+  background: var(--chat-bg);
+  background-image: var(--bg-pattern);
+  background-size: 200px 200px;
+  min-height: 100vh;
+}
+
+/* 聊天区域背景 */
+.chat-area {
+  background: var(--bg-primary);
+  background-image: var(--bg-pattern);
+  background-size: 150px 150px;
+}
+
+/* 消息列表背景 */
+.message-list-background {
+  background: var(--bg-secondary);
+  background-image: var(--bg-pattern);
+  background-size: 100px 100px;
 }
 
 /* 滚动条样式 */
@@ -184,6 +216,24 @@ body {
   animation: pulse 1s infinite;
 }
 
+/* 渐变动画 */
+@keyframes gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.gradient-animated {
+  background-size: 200% 200%;
+  animation: gradient-shift 3s ease infinite;
+}
+
 /* 响应式设计 */
 @media (max-width: 1024px) {
   .chat-container {
@@ -202,4 +252,47 @@ body {
   .chat-area {
     min-width: 400px;
   }
+
+  #app {
+    background-size: 150px 150px;
+  }
+}
+
+/* 自定义组件样式 */
+.custom-input,
+.custom-textarea {
+  background: var(--input-bg);
+  border-color: var(--border-color);
+  color: var(--text-primary);
+}
+
+.custom-input:focus,
+.custom-textarea:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
+}
+
+/* 卡片样式 */
+.card {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 2px 8px var(--shadow);
+}
+
+/* 按钮样式 */
+.btn-primary {
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  color: white;
+  border: none;
+  transition: all 0.3s ease;
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
+}
+
+/* 主题切换动画 */
+* {
+  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
 }