Initial commit: finish basic WebUI interface

2026-03-09 21:17:22 +08:00
parent d2a2a4de36
commit 2f6cfe7704
23 changed files with 5028 additions and 1 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,110 @@
+<template>
+    <div :class="{ 'dark-mode': isDarkMode }">
+        <router-view />
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, watch, provide } from 'vue';
+
+export default {
+    name: 'App',
+    setup() {
+        const isDarkMode = ref(false);
+
+        // 检查本地存储中的主题设置
+        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);
+
+        return {
+            isDarkMode,
+            toggleTheme
+        };
+    }
+};
+</script>
+
+<style>
+* {
+    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);
+    color: var(--text-color);
+    transition: background-color 0.3s, color 0.3s;
+}
+
+#app {
+    width: 100%;
+    min-height: 100vh;
+}
+
+mark {
+    background-color: var(--mark-bg);
+    padding: 0 2px;
+}
+</style>