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

- 在 App.vue 中添加主题切换按钮和逻辑 - 新增 global.css 和 theme.css 文件，统一全局样式和主题样式 - 更新 LoginPage、RegisterPage 和 HomePage 的样式，适配新主题 - 实现暗黑模式下的样式调整
2025-07-31 10:38:51 +08:00
parent e0a99235ec
commit b22fc82432
8 changed files with 524 additions and 111 deletions
--- a/biji-qianduan/src/App.vue
+++ b/biji-qianduan/src/App.vue
@@ -3,21 +3,65 @@
 <template>
  <div id="app">
    <router-view></router-view>
+    <div class="theme-switcher" @click="toggleTheme" :title="`切换到${theme === 'light' ? '深色' : '浅色'}主题`">
+      <span v-if="theme === 'light'">🌙</span>
+      <span v-else>☀️</span>
+    </div>
  </div>
 </template>

 <script setup>
-// 这里可以添加全局逻辑
+import { ref, onMounted, watchEffect } from 'vue';
+
+const theme = ref('light');
+
+const toggleTheme = () => {
+  theme.value = theme.value === 'light' ? 'dark' : 'light';
+  localStorage.setItem('theme', theme.value);
+};
+
+onMounted(() => {
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme) {
+    theme.value = savedTheme;
+  } else {
+    // 如果没有保存的主题，则根据系统设置初始化
+    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    theme.value = prefersDark ? 'dark' : 'light';
+  }
+});
+
+watchEffect(() => {
+  document.documentElement.className = theme.value === 'dark' ? 'dark-theme' : '';
+});
 </script>

 <style>
-/* 全局样式 */
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-  margin: 0;
-  padding: 0;
+.theme-switcher {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: var(--bg-color-secondary);
+  box-shadow: var(--box-shadow);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 24px;
+  user-select: none;
+  transition: all var(--transition-duration) ease;
+  z-index: 1000;
+}
+
+.theme-switcher:hover {
+  transform: scale(1.1);
+  box-shadow: var(--box-shadow-dark);
+}
+
+.theme-switcher:active {
+  transform: scale(0.95);
 }
 </style>
--- a/biji-qianduan/src/assets/styles/global.css
+++ b/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;
+}
--- a/biji-qianduan/src/assets/styles/theme.css
+++ b/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);
+}
--- a/biji-qianduan/src/components/HomePage.vue
+++ b/biji-qianduan/src/components/HomePage.vue
@@ -707,30 +707,153 @@ const handleExportMd = () => {
 };
 </script>

+<style>
+/* 对话框全局样式覆盖 */
+.el-dialog {
+  background-color: var(--bg-color-tertiary) !important;
+  border-radius: 12px !important;
+  box-shadow: var(--box-shadow-dark) !important;
+  animation: fadeIn 0.3s ease-out, slideInUp 0.3s ease-out;
+}
+
+.el-dialog__header {
+  padding: 20px 20px 10px !important;
+  margin-right: 0 !important;
+  border-bottom: 1px solid var(--border-color-light);
+}
+
+.el-dialog__title {
+  color: var(--text-color) !important;
+  font-weight: 600;
+}
+
+.el-dialog__body {
+  padding: 25px 20px !important;
+  color: var(--text-color-secondary);
+}
+
+.el-dialog__footer {
+  padding: 10px 20px 20px !important;
+  border-top: 1px solid var(--border-color-light);
+}
+
+/* Vditor 暗黑模式适配 */
+.dark-theme .vditor {
+  --panel-background-color: var(--bg-color-secondary) !important;
+  --textarea-background-color: var(--bg-color) !important;
+  --toolbar-background-color: var(--bg-color-tertiary) !important;
+  --border-color: var(--border-color) !important;
+  color: var(--text-color) !important;
+}
+.dark-theme .vditor-toolbar,
+.dark-theme .vditor-content,
+.dark-theme .vditor-preview {
+  background-color: var(--bg-color) !important;
+}
+.dark-theme .vditor-toolbar__item:hover,
+.dark-theme .vditor-toolbar__item--current {
+  background-color: var(--primary-color-light) !important;
+}
+</style>
+
 <style scoped>
 .home-page {
  height: 100vh;
-  background-color: #f5f7fa;
+  background-color: var(--bg-color-secondary);
+  overflow: hidden;
 }

+/* --- Sidebar --- */
 .sidebar {
-  background: #fff;
-  border-right: 1px solid #e6e6e6;
+  background: var(--bg-color);
+  border-right: 1px solid var(--border-color-light);
  display: flex;
  flex-direction: column;
-  transition: width 0.3s;
+  transition: width var(--transition-duration) ease;
 }

 .sidebar-header {
  padding: 15px;
  display: flex;
-  justify-content: space-between;
+  justify-content: center;
  align-items: center;
-  border-bottom: 1px solid #ebeef5;
+  border-bottom: 1px solid var(--border-color-light);
+  flex-shrink: 0;
 }

+.sidebar-header span {
+  color: var(--text-color);
+  font-size: 16px;
+}
+
+.sidebar-header .el-button {
+  transition: all var(--transition-duration) ease;
+}
+.sidebar-header .el-button:hover {
+  transform: scale(1.1);
+}
+
+.el-menu-vertical-demo {
+  flex: 1;
+  overflow-y: auto;
+  border-right: none;
+  background-color: transparent;
+  padding: 8px;
+}
+
+:deep(.el-sub-menu__title),
+.el-menu-item {
+  border-radius: 6px;
+  margin-bottom: 4px;
+  color: var(--text-color-secondary);
+  transition: all var(--transition-duration) ease;
+}
+
+:deep(.el-sub-menu__title:hover),
+.el-menu-item:hover {
+  background-color: var(--bg-color-tertiary);
+  color: var(--text-color);
+}
+
+.el-menu-item.is-active {
+  background-color: var(--primary-color-light);
+  color: var(--primary-color) !important;
+  font-weight: bold;
+}
+
+.menu-item-title {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.menu-item-title span {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.edit-icon {
+  cursor: pointer;
+  margin-left: 8px;
+  opacity: 0;
+  transition: opacity var(--transition-duration) ease;
+  color: var(--text-color-secondary);
+}
+.edit-icon:hover {
+  color: var(--primary-color);
+}
+
+.el-sub-menu__title:hover .edit-icon,
+.el-menu-item:hover .edit-icon,
+.preview-title:hover .edit-icon {
+  opacity: 1;
+}
+
+/* --- Content Area --- */
 .content {
-  padding: 20px;
+  padding: 24px;
  height: 100vh;
  overflow-y: auto;
 }
@@ -739,109 +862,128 @@ const handleExportMd = () => {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 24px;
+}
+
+.header h1 {
+  color: var(--text-color);
+  font-size: 28px;
+  font-weight: 600;
 }

 .actions {
  display: flex;
-  gap: 10px;
+  align-items: center;
+  gap: 12px;
 }

-.upload-btn {
-  display: inline-block;
+.actions span {
+  color: var(--text-color-secondary);
+  font-size: 14px;
+}
+
+.search-input {
+  width: 240px;
 }

 .file-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 15px;
+  gap: 20px;
 }

 .file-item {
  cursor: pointer;
-  transition: all 0.3s;
+  border-radius: 8px;
+  border: 1px solid var(--border-color-light);
+  background-color: var(--bg-color);
+  box-shadow: var(--box-shadow-light);
+  transition: all var(--transition-duration) ease;
+  animation: slideInUp 0.4s ease-out;
 }

 .file-item:hover {
  transform: translateY(-5px);
+  box-shadow: var(--box-shadow);
+  border-color: var(--primary-color);
 }

 .file-title {
  font-size: 16px;
  font-weight: 500;
+  color: var(--text-color);
+  padding: 20px;
 }

+/* --- File Preview --- */
 .file-preview {
  height: 100%;
  display: flex;
  flex-direction: column;
+  background-color: var(--bg-color);
+  border-radius: 8px;
+  box-shadow: var(--box-shadow);
+  overflow: hidden;
+  animation: fadeIn 0.5s;
 }

 .preview-header {
  display: flex;
-  margin-bottom: 10px;
+  padding: 12px 20px;
  justify-content: space-between;
  align-items: center;
-}
-
-.markdown-preview {
-  flex: 1;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  padding: 20px;
-  background: #fff;
-}
-
-.save-status {
-  margin-left: 10px;
-  font-size: 14px;
-  color: #909399;
-}
-
-.menu-item-title {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  justify-content: space-between;
-}
-
-.edit-icon {
-  cursor: pointer;
-  margin-left: 8px;
-  display: none;
-}
-
-.el-sub-menu__title:hover .edit-icon,
-.preview-title:hover .edit-icon {
-  display: inline-block;
+  border-bottom: 1px solid var(--border-color-light);
+  flex-shrink: 0;
 }

 .preview-title {
  display: flex;
  align-items: center;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-color);
 }

-.el-menu-vertical-demo {
+.preview-title .edit-icon {
+  margin-left: 12px;
+}
+
+.markdown-preview, .vditor {
  flex: 1;
+  padding: 20px;
+  background: var(--bg-color);
+  border: none;
  overflow-y: auto;
-  border-right: none;
 }

-.el-menu-vertical-demo:not(.el-menu--collapse) {
-  width: 100%;
+.save-status {
+  margin-left: 10px;
+  font-size: 14px;
+  color: var(--text-color-placeholder);
+  transition: all var(--transition-duration) ease;
+}
+.save-status:not(:empty) {
+  animation: fadeIn 0.5s;
 }

+/* --- Responsive --- */
@media (max-width: 768px) {
  .sidebar {
-    display: none;
+    position: absolute;
+    z-index: 1001;
+    box-shadow: var(--box-shadow-dark);
+  }
+  .sidebar:not(.el-aside--collapse) {
+    width: 250px;
  }
-
  .content {
-    padding: 10px;
+    padding: 15px;
  }
-
  .file-list {
    grid-template-columns: 1fr;
  }
+  .header h1 {
+    font-size: 22px;
+  }
 }
 </style>
--- a/biji-qianduan/src/components/LoginPage.vue
+++ b/biji-qianduan/src/components/LoginPage.vue
@@ -66,15 +66,59 @@ const goToRegister = () => {
  justify-content: center;
  align-items: center;
  height: 100vh;
-  background-color: #f5f7fa;
+  background-color: var(--bg-color-secondary);
+  background-image: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-color-secondary) 100%);
 }

 .login-card {
-  width: 400px;
+  width: 420px;
+  padding: 20px 30px;
+  border-radius: 12px;
+  background-color: var(--bg-color);
+  box-shadow: var(--box-shadow-dark);
+  border: 1px solid var(--border-color);
+  animation: slideInDown 0.5s ease-out;
+  overflow: hidden;
 }

 .card-header {
  text-align: center;
-  font-size: 20px;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--text-color);
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid var(--border-color-light);
+}
+
+.el-form-item {
+  margin-bottom: 25px;
+}
+
+.el-button {
+  width: 100%;
+  transition: all var(--transition-duration) ease;
+}
+
+.el-button--primary {
+    height: 40px;
+}
+
+.el-button--primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(64, 158, 255, 0.4);
+}
+
+.el-button:last-child {
+  margin-left: 0;
+  margin-top: 10px;
+  color: var(--text-color-secondary);
+  border: none;
+  background: none;
+}
+
+.el-button:last-child:hover {
+  color: var(--primary-color);
+  background-color: var(--primary-color-light);
 }
 </style>
--- a/biji-qianduan/src/components/RegisterPage.vue
+++ b/biji-qianduan/src/components/RegisterPage.vue
@@ -80,15 +80,59 @@ const goToLogin = () => {
  justify-content: center;
  align-items: center;
  height: 100vh;
-  background-color: #f5f7fa;
+  background-color: var(--bg-color-secondary);
+  background-image: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-color-secondary) 100%);
 }

 .register-card {
-  width: 400px;
+  width: 420px;
+  padding: 20px 30px;
+  border-radius: 12px;
+  background-color: var(--bg-color);
+  box-shadow: var(--box-shadow-dark);
+  border: 1px solid var(--border-color);
+  animation: slideInDown 0.5s ease-out;
+  overflow: hidden;
 }

 .card-header {
  text-align: center;
-  font-size: 20px;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--text-color);
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid var(--border-color-light);
+}
+
+.el-form-item {
+  margin-bottom: 25px;
+}
+
+.el-button {
+  width: 100%;
+  transition: all var(--transition-duration) ease;
+}
+
+.el-button--primary {
+    height: 40px;
+}
+
+.el-button--primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(64, 158, 255, 0.4);
+}
+
+.el-button:last-child {
+  margin-left: 0;
+  margin-top: 10px;
+  color: var(--text-color-secondary);
+  border: none;
+  background: none;
+}
+
+.el-button:last-child:hover {
+  color: var(--primary-color);
+  background-color: var(--primary-color-light);
 }
 </style>
--- a/biji-qianduan/src/main.js
+++ b/biji-qianduan/src/main.js
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import './assets/styles/global.css'
 import App from './App.vue'
 import router from './router/'
 import ElementPlus from 'element-plus'