feat: remake most of forntend

src/App.vue

@@ -1,39 +1,56 @@
 <script setup lang="ts">
-import iconMenu from "./assets/menu.svg";
-import Sidebar from "./components/Sidebar.vue";
 import Navbar from "./components/Navbar.vue";
-import { useThemeStore } from "./stores/theme";
+import { ref, provide, onMounted } from "vue";
 
-const theme = useThemeStore();
-const items = [
-  { id: 1, icon: iconMenu, text: "用户界面", page: "/user" },
-  { id: 2, icon: iconMenu, text: "ComponentTest", page: "/test" },
-  { id: 3, icon: iconMenu, text: "JtagTest", page: "/test/jtag" },
-  { id: 4, icon: iconMenu, text: "工程界面", page: "/project" }, // 新增工程界面入口
-];
+// 主题切换状态管理
+const isDarkMode = ref(window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+// 初始化主题设置
+onMounted(() => {
+  // 应用初始主题
+  applyTheme();
+  
+  // 监听系统主题变化
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+    // 跟随系统变化
+    isDarkMode.value = e.matches;
+    applyTheme();
+  });
+});
+
+// 应用主题到文档
+const applyTheme = () => {
+  document.documentElement.setAttribute('data-theme', isDarkMode.value ? 'night' : 'winter');
+};
+
+// 切换主题
+const toggleTheme = () => {
+  isDarkMode.value = !isDarkMode.value;
+  applyTheme();
+};
+
+// 提供主题状态和切换方法给子组件
+provide('theme', {
+  isDarkMode,
+  toggleTheme
+});
 </script>
 
 <template>
-  <div :data-theme="theme.currentTheme">
+  <div>
     <header class="relative">
-      <div class="fixed left-0 top-0 z-50 hidden">
-        <Sidebar :items="items" />
-      </div>
       <Navbar></Navbar>
     </header>
 
     <main>
       <RouterView />
-    </main>
-
-    <footer class="footer footer-center p-4 bg-base-300 text-base-content">
+    </main>    <footer class="footer footer-center p-4 bg-base-300 text-base-content">
       <div>
         <p>Copyright © 2023 - All right reserved by OurEDA</p>
       </div>
-    </footer>
-  </div>
+    </footer>  </div>
 </template>
 
 <style scoped>
-@import "./assets/main.css";
+/* 特定于App.vue的样式 */
 </style>