首个可运行的版本

frontend/src/assets/styles/global.css

@@ -0,0 +1,93 @@
+/* 青叶全局样式 */
+
+:root {
+  /* 青绿色主题色 */
+  --color-primary: #009688;
+  --color-primary-light: #26A69A;
+  --color-primary-lighter: #80CBC4;
+  --color-primary-lightest: #E0F2F1;
+  --color-primary-dark: #00796B;
+  --color-primary-darker: #004D40;
+
+  /* 背景 */
+  --color-bg: #F5FBF9;
+  --color-surface: #FFFFFF;
+  --color-surface-elevated: #FAFFFE;
+
+  /* 文字 */
+  --color-text-primary: #1A2E2A;
+  --color-text-secondary: #5F7A74;
+  --color-text-hint: #9DB5AE;
+
+  /* 边框 */
+  --color-border: #D4E8E3;
+
+  /* 状态色 */
+  --color-success: #4CAF50;
+  --color-warning: #FF9800;
+  --color-error: #EF5350;
+  --color-unread: #FF6B6B;
+
+  /* 聊天气泡 */
+  --color-bubble-self: #009688;
+  --color-bubble-self-text: #FFFFFF;
+  --color-bubble-other: #E8F5F1;
+  --color-bubble-other-text: #1A2E2A;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--color-text-primary);
+  background-color: var(--color-bg);
+}
+
+#app {
+  height: 100%;
+}
+
+/* 自定义滚动条 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--color-primary-lighter);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-primary-light);
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* 淡入动画 */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+/* 滑入动画 */
+.slide-enter-active, .slide-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.slide-enter-from {
+  transform: translateX(-20px);
+  opacity: 0;
+}
+.slide-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}