refactor(toggleThemes): move all theme toggle code to toggleThemes.js and all theme related CSS code to themes.css

src/App.vue

@@ -5,46 +5,14 @@
 </template>
 
 <script>
-import { ref, onMounted, watch, provide } from 'vue';
+import { provide } from 'vue';
+import { useTheme } from './utils/toggleThemes';
 
 export default {
     name: 'App',
     setup() {
-        const isDarkMode = ref(false);
+        const { isDarkMode, toggleTheme } = useTheme();
 
-        // 检查本地存储中的主题设置
-        onMounted(() => {
-            const savedTheme = localStorage.getItem('theme');
-            if (savedTheme) {
-                isDarkMode.value = savedTheme === 'dark';
-            } else {
-                // 检测系统主题偏好
-                isDarkMode.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
-            }
-            updateTheme();
-        });
-
-        // 监听主题变化
-        watch(isDarkMode, () => {
-            updateTheme();
-            localStorage.setItem('theme', isDarkMode.value ? 'dark' : 'light');
-        });
-
-        // 更新主题
-        const updateTheme = () => {
-            if (isDarkMode.value) {
-                document.documentElement.classList.add('dark');
-            } else {
-                document.documentElement.classList.remove('dark');
-            }
-        };
-
-        // 暴露方法给子组件
-        const toggleTheme = () => {
-            isDarkMode.value = !isDarkMode.value;
-        };
-
-        // 提供给子组件
         provide('isDarkMode', isDarkMode);
         provide('toggleTheme', toggleTheme);
 
@@ -57,40 +25,14 @@ export default {
 </script>
 
 <style>
+@import './styles/themes.css';
+
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
-:root {
-    --bg-color: #f5f5f5;
-    --text-color: #333;
-    --sidebar-bg: #001529;
-    --sidebar-text: rgba(255, 255, 255, 0.65);
-    --sidebar-text-hover: white;
-    --sidebar-bg-hover: rgba(255, 255, 255, 0.1);
-    --sidebar-active-bg: #667eea;
-    --card-bg: white;
-    --border-color: #e8e8e8;
-    --primary-color: #667eea;
-    --mark-bg: #fffb8f;
-}
-
-.dark {
-    --bg-color: #1a1a1a;
-    --text-color: #e0e0e0;
-    --sidebar-bg: #121212;
-    --sidebar-text: rgba(255, 255, 255, 0.7);
-    --sidebar-text-hover: white;
-    --sidebar-bg-hover: rgba(255, 255, 255, 0.15);
-    --sidebar-active-bg: #7f56d9;
-    --card-bg: #2d2d2d;
-    --border-color: #3d3d3d;
-    --primary-color: #9e77ed;
-    --mark-bg: #4a4a00;
-}
-
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     background-color: var(--bg-color);

src/styles/common.css

@@ -260,6 +260,7 @@
     border-radius: 4px;
     font-size: 12px;
     font-weight: 500;
+    transition: background-color 0.3s, color 0.3s;
 }
 
 .type-badge.superuser {
@@ -277,6 +278,21 @@
     color: #666;
 }
 
+.dark .type-badge.superuser {
+    background: #3a2510;
+    color: #ffb74d;
+}
+
+.dark .type-badge.admin {
+    background: #0d2633;
+    color: #40a9ff;
+}
+
+.dark .type-badge.visitor {
+    background: #2a2a2a;
+    color: #b0b0b0;
+}
+
 .modal-overlay {
     position: fixed;
     top: 0;

src/styles/themes.css

@@ -0,0 +1,27 @@
+:root {
+    --bg-color: #f5f5f5;
+    --text-color: #333;
+    --sidebar-bg: #001529;
+    --sidebar-text: rgba(255, 255, 255, 0.65);
+    --sidebar-text-hover: white;
+    --sidebar-bg-hover: rgba(255, 255, 255, 0.1);
+    --sidebar-active-bg: #667eea;
+    --card-bg: white;
+    --border-color: #e8e8e8;
+    --primary-color: #667eea;
+    --mark-bg: #fffb8f;
+}
+
+.dark {
+    --bg-color: #1a1a1a;
+    --text-color: #e0e0e0;
+    --sidebar-bg: #121212;
+    --sidebar-text: rgba(255, 255, 255, 0.7);
+    --sidebar-text-hover: white;
+    --sidebar-bg-hover: rgba(255, 255, 255, 0.15);
+    --sidebar-active-bg: #7f56d9;
+    --card-bg: #2d2d2d;
+    --border-color: #3d3d3d;
+    --primary-color: #9e77ed;
+    --mark-bg: #4a4a00;
+}

src/utils/toggleThemes.js

@@ -0,0 +1,37 @@
+import { ref, onMounted, watch } from 'vue';
+
+export function useTheme() {
+    const isDarkMode = ref(false);
+
+    const updateTheme = () => {
+        if (isDarkMode.value) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+    };
+
+    onMounted(() => {
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            isDarkMode.value = savedTheme === 'dark';
+        } else {
+            isDarkMode.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        }
+        updateTheme();
+    });
+
+    watch(isDarkMode, () => {
+        updateTheme();
+        localStorage.setItem('theme', isDarkMode.value ? 'dark' : 'light');
+    });
+
+    const toggleTheme = () => {
+        isDarkMode.value = !isDarkMode.value;
+    };
+
+    return {
+        isDarkMode,
+        toggleTheme
+    };
+}

src/views/Users.vue

@@ -222,7 +222,8 @@ export default {
     gap: 20px;
     padding: 12px;
     border-radius: 8px;
-    background-color: #f9f9f9;
+    background-color: var(--card-bg);
+    transition: background-color 0.3s;
 }
 
 .user-info {
@@ -265,7 +266,8 @@ export default {
 }
 
 .meta-label {
-    color: #666;
+    color: var(--text-color);
+    opacity: 0.65;
 }
 
 .meta-value {
@@ -277,4 +279,26 @@ export default {
     display: flex;
     gap: 8px;
 }
+
+.dark .user-item {
+    background-color: var(--card-bg);
+}
+
+.dark .meta-label {
+    color: var(--text-color);
+    opacity: 0.65;
+}
+
+.dark .edit-btn {
+    background: #3d3d3d;
+    color: var(--text-color);
+}
+
+.dark .edit-btn:hover {
+    background: #4d4d4d;
+}
+
+.dark .delete-btn:hover {
+    background: #f04142;
+}
 </style>