feat(frontend): 实现主题切换功能并优化全局样式

- 在 App.vue 中添加主题切换按钮和逻辑
- 新增 global.css 和 theme.css 文件，统一全局样式和主题样式
- 更新 LoginPage、RegisterPage 和 HomePage 的样式，适配新主题
- 实现暗黑模式下的样式调整

biji-qianduan/src/assets/styles/global.css

@@ -0,0 +1,85 @@
+/* assets/styles/global.css */
+@import './theme.css';
+
+/* 全局基础样式 */
+body {
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition: background-color var(--transition-duration), color var(--transition-duration);
+}
+
+/* 滚动条美化 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--border-color);
+  border-radius: 3px;
+  transition: background-color var(--transition-duration);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--text-color-secondary);
+}
+
+/* 基础动画 Keyframes */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInDown {
+    from {
+        transform: translateY(-20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideInLeft {
+    from {
+        transform: translateX(-20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* 可复用的动画类 */
+.fade-in {
+  animation: fadeIn var(--transition-duration) ease-in-out;
+}
+
+.slide-in-up {
+  animation: slideInUp var(--transition-duration) ease-in-out;
+}

biji-qianduan/src/assets/styles/theme.css

@@ -0,0 +1,47 @@
+/* assets/styles/theme.css */
+
+/* 默认浅色主题 */
+:root {
+  --bg-color: #ffffff;
+  --bg-color-secondary: #f7f8fa;
+  --bg-color-tertiary: #eff2f5;
+  --text-color: #303133;
+  --text-color-secondary: #606266;
+  --text-color-placeholder: #a8abb2;
+  --border-color: #dcdfe6;
+  --border-color-light: #e4e7ed;
+  --primary-color: #409eff;
+  --primary-color-light: #ecf5ff;
+  --danger-color: #f56c6c;
+  --success-color: #67c23a;
+  --warning-color: #e6a23c;
+  --info-color: #909399;
+
+  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.08);
+  --box-shadow-dark: 0 4px 16px rgba(0, 0, 0, 0.15);
+
+  --transition-duration: 0.3s;
+}
+
+/* 深色主题 */
+.dark-theme {
+  --bg-color: #141414;
+  --bg-color-secondary: #1a1a1a;
+  --bg-color-tertiary: #222222;
+  --text-color: #e5e5e5;
+  --text-color-secondary: #a3a3a3;
+  --text-color-placeholder: #5c5c5c;
+  --border-color: #3a3a3a;
+  --border-color-light: #2a2a2a;
+  --primary-color: #409eff;
+  --primary-color-light: #26334f;
+  --danger-color: #f56c6c;
+  --success-color: #67c23a;
+  --warning-color: #e6a23c;
+  --info-color: #909399;
+
+  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
+  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.25);
+  --box-shadow-dark: 0 4px 16px rgba(0, 0, 0, 0.4);
+}