初始化

2025-07-02 16:54:52 +08:00
parent 67f9f51816
commit adf9f73431
29 changed files with 1866 additions and 174 deletions
--- a/src/style.css
+++ b/src/style.css
@@ -1 +1,133 @@
-@import "tailwindcss";
+@import "tailwindcss";
+@import "tailwindcss/utilities";
+
+/* 自定义CSS变量 */
+:root {
+  --primary: #4361ee;
+  --secondary: #3f37c9;
+  --success: #4cc9f0;
+  --light: #f8f9fa;
+  --dark: #212529;
+  --light-blue: #e3f2fd;
+  --light-green: #f1f8e9;
+  --accent: #ff6b6b;
+  --gray: #6c757d;
+
+  /* 亮色模式变量 */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8f9fa;
+  --bg-tertiary: #e9ecef;
+  --text-primary: #212529;
+  --text-secondary: #6c757d;
+  --border-color: #e1e5eb;
+  --shadow: rgba(0, 0, 0, 0.1);
+  --message-bg-sent: linear-gradient(135deg, #4361ee, #3f37c9);
+  --message-bg-received: #ffffff;
+  --message-text-sent: #ffffff;
+  --message-text-received: #212529;
+  --input-bg: #ffffff;
+  --header-bg: #ffffff;
+}
+
+[data-theme="dark"] {
+  /* 暗色模式变量 */
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #2d2d2d;
+  --bg-tertiary: #404040;
+  --text-primary: #ffffff;
+  --text-secondary: #b0b0b0;
+  --border-color: #404040;
+  --shadow: rgba(0, 0, 0, 0.3);
+  --message-bg-sent: linear-gradient(135deg, #4361ee, #3f37c9);
+  --message-bg-received: #2d2d2d;
+  --message-text-sent: #ffffff;
+  --message-text-received: #ffffff;
+  --input-bg: #2d2d2d;
+  --header-bg: #2d2d2d;
+}
+
+/* 全局样式 */
+* {
+  font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    sans-serif;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  transition: all 0.3s ease;
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-tertiary);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--text-secondary);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--primary);
+}
+
+/* Ant Design 组件样式覆盖 */
+.ant-input:focus,
+.ant-input-focused {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
+}
+
+.ant-btn-primary {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+
+.ant-btn-primary:hover {
+  background: var(--secondary);
+  border-color: var(--secondary);
+}
+
+/* 动画 */
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.animate-pulse {
+  animation: pulse 1s infinite;
+}
+
+/* 响应式设计 */
+@media (max-width: 1024px) {
+  .chat-container {
+    margin: 0;
+    border-radius: 0;
+    height: 100vh;
+  }
+}
+
+@media (max-width: 768px) {
+  .friend-list {
+    width: 280px;
+    min-width: 280px;
+  }
+
+  .chat-area {
+    min-width: 400px;
+  }
+}