feat: 添加暗黑主题支持

Author: dalaolala

frontend/src/components/QuickSftpFileManager.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sftp-file-manager">
+  <div class="sftp-file-manager" :class="{ 'dark-theme': isDark }">
     <!-- 顶部工具栏 -->
     <div class="toolbar">
       <div class="toolbar-buttons">
@@ -176,12 +176,17 @@
 
 <script setup>
 import { ref, onMounted, computed, watch } from 'vue';
+import { storeToRefs } from 'pinia';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { VueMonacoEditor } from '@guolao/vue-monaco-editor';
 import { 
   ArrowUp, Refresh, FolderAdd, Upload, Delete, Loading, 
   Folder, Document, Right
 } from '@element-plus/icons-vue'
+import { useThemeStore } from '@/stores/theme'
+
+const themeStore = useThemeStore()
+const { isDark } = storeToRefs(themeStore)
 
 const props = defineProps({
   sftp: {
@@ -445,6 +450,11 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   color: #303133;
+  transition: all 0.3s ease;
+}
+
+.dark-theme .sftp-file-manager {
+  color: #ffffff;
 }
 
 .toolbar {
@@ -454,6 +464,12 @@ onMounted(() => {
   gap: 10px;
   align-items: center;
   flex-wrap: wrap;
+  transition: all 0.3s ease;
+}
+
+.dark-theme .toolbar {
+  background-color: rgba(30, 30, 30, 0.8);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
 }
 
 .toolbar-buttons {
@@ -508,20 +524,40 @@ onMounted(() => {
   background-color: #ffffff;
 }
 
+.dark-theme .file-item {
+  background-color: rgba(255, 255, 255, 0.08);
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
 .file-item:hover {
   background-color: #f5f7fa;
   border-color: #e4e7ed;
 }
 
+.dark-theme .file-item:hover {
+  background-color: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
 .file-item.selected {
   background-color: #ecf5ff;
   border-color: #409eff;
 }
 
+.dark-theme .file-item.selected {
+  background-color: rgba(0, 122, 255, 0.2);
+  border-color: #007AFF;
+}
+
 .file-item.directory {
   font-weight: bold;
 }
 
+.dark-theme .file-item.directory .file-name {
+  color: #ffffff;
+}
+
 .file-icon {
   margin-right: 10px;
   font-size: 20px;
@@ -538,13 +574,21 @@ onMounted(() => {
   color: #303133;
 }
 
+.dark-theme .file-name {
+  color: #ffffff !important;
+}
+
 .file-details {
   display: flex;
   gap: 15px;
   font-size: 12px;
   color: #606266;
 }
 
+.dark-theme .file-details {
+  color: #98989d;
+}
+
 .file-actions {
   opacity: 0;
   transition: opacity 0.2s;
@@ -560,6 +604,10 @@ onMounted(() => {
   color: #909399;
 }
 
+.dark-theme .empty-directory {
+  color: #98989d;
+}
+
 .editor-container {
   height: 600px;
   display: flex;
@@ -572,6 +620,13 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  transition: all 0.3s ease;
+}
+
+.dark-theme .editor-header {
+  background-color: rgba(30, 30, 30, 0.8);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  color: #ffffff;
 }
 
 .file-editor-monaco {

frontend/src/components/ThemeToggle.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-tooltip :content="isDark ? '切换到亮色模式' : '切换到暗黑模式'" placement="bottom">
+    <el-button
+      class="theme-toggle-btn"
+      :class="{ 'dark': isDark }"
+      text
+      circle
+      size="small"
+      @click.stop="toggleTheme"
+    >
+      <el-icon v-if="isDark"><Sunny /></el-icon>
+      <el-icon v-else><Moon /></el-icon>
+    </el-button>
+  </el-tooltip>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import { Sunny, Moon } from '@element-plus/icons-vue'
+import { useThemeStore } from '@/stores/theme'
+
+const themeStore = useThemeStore()
+const { isDark } = storeToRefs(themeStore)
+
+const toggleTheme = () => {
+  console.log('Toggle theme clicked, current isDark:', isDark.value)
+  themeStore.toggleTheme()
+  console.log('After toggle, isDark:', isDark.value)
+}
+</script>
+
+<style scoped>
+.theme-toggle-btn {
+  color: #007AFF;
+  background-color: rgba(0, 122, 255, 0.08);
+  border: 1px solid rgba(0, 122, 255, 0.2);
+  transition: all 0.2s ease;
+  width: 32px !important;
+  height: 32px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.theme-toggle-btn:hover {
+  color: #ffffff;
+  background-color: #007AFF;
+  border-color: #007AFF;
+  transform: scale(1.05);
+  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
+}
+
+.theme-toggle-btn:active {
+  transform: scale(0.95);
+}
+
+.theme-toggle-btn.dark {
+  color: #007AFF;
+  background-color: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(0, 122, 255, 0.4);
+}
+
+.theme-toggle-btn.dark:hover {
+  color: #ffffff;
+  background-color: #007AFF;
+  border-color: #007AFF;
+  transform: scale(1.05);
+  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4);
+}
+</style>

frontend/src/stores/theme.js

@@ -0,0 +1,49 @@
+import { defineStore } from 'pinia'
+import { ref, watch } from 'vue'
+
+export const useThemeStore = defineStore('theme', () => {
+  const THEME_KEY = 'webssh_theme'
+  const THEME_VERSION_KEY = 'webssh_theme_version'
+  const CURRENT_VERSION = '1.0' // 版本号,用于重置主题设置
+
+  // 检查版本,如果版本不一致则重置为亮色模式
+  const savedVersion = localStorage.getItem(THEME_VERSION_KEY)
+  const shouldResetTheme = savedVersion !== CURRENT_VERSION
+
+  // 从 localStorage 读取主题设置，默认为 'light'
+  const savedTheme = shouldResetTheme ? 'light' : (localStorage.getItem(THEME_KEY) || 'light')
+  const isDark = ref(savedTheme === 'dark')
+
+  // 保存版本号
+  if (shouldResetTheme) {
+    localStorage.setItem(THEME_VERSION_KEY, CURRENT_VERSION)
+    localStorage.setItem(THEME_KEY, 'light')
+  }
+
+  // 切换主题
+  const toggleTheme = () => {
+    isDark.value = !isDark.value
+  }
+
+  // 设置主题
+  const setTheme = (dark) => {
+    isDark.value = dark
+  }
+
+  // 监听主题变化，保存到 localStorage 并更新 document class
+  watch(isDark, (newVal) => {
+    localStorage.setItem(THEME_KEY, newVal ? 'dark' : 'light')
+
+    if (newVal) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }, { immediate: true })
+
+  return {
+    isDark,
+    toggleTheme,
+    setTheme
+  }
+})