Merge branch 'master' of ssh://git.swordlost.top:222/SikongJueluo/FPGA_WebLab into dpp

src/App.vue

@@ -1,6 +1,7 @@
 <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";
 
 const theme = useThemeStore();
@@ -15,14 +16,21 @@ const items = [
 <template>
   <div :data-theme="theme.currentTheme">
     <header class="relative">
-      <div class="fixed left-0 top-0 z-50">
+      <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">
+      <div>
+        <p>Copyright © 2023 - All right reserved by OurEDA</p>
+      </div>
+    </footer>
   </div>
 </template>
 

src/components/Navbar.vue

@@ -2,7 +2,7 @@
   <div class="navbar bg-base-100 shadow-sm">
     <div class="navbar-start">
       <div class="dropdown">
-        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+        <div tabindex="0" role="button" class="btn btn-ghost hidden">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
           </svg>
@@ -19,25 +19,13 @@
           <li><a>Item 3</a></li>
         </ul>
       </div>
-      <a class="btn btn-ghost text-xl">daisyUI</a>
     </div>
-    <div class="navbar-center hidden lg:flex">
-      <ul class="menu menu-horizontal px-1">
-        <li><a>Item 1</a></li>
-        <li>
-          <details>
-            <summary>Parent</summary>
-            <ul class="p-2">
-              <li><a>Submenu 1</a></li>
-              <li><a>Submenu 2</a></li>
-            </ul>
-          </details>
-        </li>
-        <li><a>Item 3</a></li>
-      </ul>
+    <div class="navbar-center lg:flex">
+      <a class="btn btn-ghost text-xl">FPGA Web Lab</a>
     </div>
     <div class="navbar-end">
-      <a class="btn">Button</a>
+      <a class="btn btn-soft w-20 mx-10">注册</a>
+      <a class="btn btn-primary w-25">登录</a>
     </div>
   </div>
 </template>

src/router/index.ts

@@ -4,9 +4,10 @@ import UserView from "../views/UserView.vue";
 import TestView from "../views/TestView.vue";
 import JtagTest from "../views/JtagTest.vue";
 import ProjectView from "../views/ProjectView.vue";
+import HomeView from "@/views/HomeView.vue";
 
 const routes = [
-  { path: "/", redirect: "/user" },
+  { path: "/", name: "Home", component: HomeView },
   { path: "/login", name: "Login", component: LoginView },
   { path: "/user", name: "User", component: UserView },
   { path: "/test", name: "Test", component: TestView },

src/views/HomeView.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="bg-base-200 min-h-screen">
+    <main class="hero min-h-screen bg-base-200">
+      <div class="hero-content flex-col lg:flex-row-reverse">
+        <img src="https://placehold.co/600x400" class="max-w-sm rounded-lg shadow-2xl" />
+        <div>
+          <h1 class="text-5xl font-bold">Welcome to FPGA Web Lab!</h1>
+          <p class="py-6">
+            Prototype and simulate electronic circuits in your browser.
+          </p>
+          <button class="btn btn-primary">Get Started</button>
+        </div>
+      </div>
+    </main>
+
+    <div class="fixed bottom-10 right-10 btn btn-circle">
+      <ThemeControlButton class=""></ThemeControlButton>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ThemeControlButton from "@/components/ThemeControlButton.vue";
+import "@/router";
+</script>
+
+<style scoped lang="postcss">
+@import "../assets/main.css";
+</style>

src/views/JtagTest.vue

@@ -3,13 +3,39 @@
     <div class="h-full w-32"></div>
 
     <div class="h-full w-[70%] shadow-2xl flex">
-      
       <button class="btn btn-primary h-10 w-30">获取ID Code</button>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from "vue";
+
+const eventSource = ref<EventSource>();
+
+const initSource = () => {
+  eventSource.value = new EventSource("http://localhost:500/api/log/example");
+
+  eventSource.value.onmessage = (event) => {
+    console.log("收到消息内容是:", event.data);
+  };
+
+  eventSource.value.onerror = (error) => {
+    console.error("SSE 连接出错：", error);
+    eventSource.value!.close();
+  };
+};
+
+onMounted(() => {
+  initSource();
+});
+
+onUnmounted(() => {
+  if (eventSource) {
+    eventSource.value?.close();
+  }
+});
+</script>
 
 <style scoped lang="postcss">
 @import "../assets/main.css";