feat: 调整路由，实现页面跳转

src/App.vue

@@ -86,7 +86,7 @@ useAlertProvider();
       class="footer footer-center p-4 bg-base-300 text-base-content"
     >
       <div>
-        <p>Copyright © 2023 - All right reserved by OurEDA</p>
+        <p>Copyright © 2025 - All right reserved by OurEDA</p>
       </div>
     </footer>
   </div>

src/router/index.ts

@@ -14,8 +14,9 @@ const router = createRouter({
     { path: "/login", name: "login", component: AuthView },
     { path: "/project", name: "project", component: ProjectView },
     { path: "/test", name: "test", component: TestView },
-    { path: "/user", name: "user", component: UserView },
-    { path: "/exam", name: "exam", component: ExamView },
+    { path: "/user/:page?", name: "user", component: UserView },
+    { path: "/exam/:examId?", name: "exam", component: ExamView },
+    { path: "/exam", redirect: "/exam/" },
     { path: "/markdown", name: "markdown", component: MarkdownEditor },
   ],
 });

src/views/Exam/Index.vue

@@ -172,6 +172,7 @@
     <!-- 创建实验模态框 -->
     <ExamEditModal
       ref="examEditModalRef"
+      v-model:is-show-modal="showEditModal"
       @edit-finished="handleEditExamFinished"
     />
   </div>
@@ -179,18 +180,22 @@
 
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { AuthManager } from "@/utils/AuthManager";
 import { ExamClient, type ExamInfo } from "@/APIClient";
 import { formatDate } from "@/utils/Common";
 import ExamInfoModal from "./ExamInfoModal.vue";
 import ExamEditModal from "./ExamEditModal.vue";
-import router from "@/router";
 import { EditIcon } from "lucide-vue-next";
 import { templateRef } from "@vueuse/core";
+import { isArray, isNull } from "lodash";
+import { watch } from "vue";
+import { watchEffect } from "vue";
+
+const router = useRouter();
+const route = useRoute();
 
 // 响应式数据
-const route = useRoute();
 const exams = ref<ExamInfo[]>([]);
 const selectedExam = ref<ExamInfo | null>(null);
 const loading = ref(false);
@@ -200,6 +205,26 @@ const isAdmin = ref(false);
 // Modal
 const examEditModalRef = templateRef("examEditModalRef");
 const showInfoModal = ref(false);
+const showEditModal = ref(false);
+
+watch(
+  () => showInfoModal.value,
+  () => {
+    if (isNull(selectedExam.value) || showInfoModal.value == false) {
+      router.replace({ path: "/exam" });
+    } else {
+      router.replace({ path: `/exam/${selectedExam.value.id}` });
+    }
+  },
+);
+
+watchEffect(() => {
+  if (showEditModal.value) {
+    router.replace({ path: `/exam/edit` });
+  } else {
+    router.replace({ path: `/exam` });
+  }
+});
 
 async function refreshExams() {
   loading.value = true;
@@ -251,9 +276,17 @@ onMounted(async () => {
   isAdmin.value = await AuthManager.isAdminAuthenticated();
 
   await refreshExams();
+});
 
+onMounted(async () => {
   // 处理路由参数，如果有examId则自动打开该实验的详情模态框
-  const examId = route.query.examId as string;
+  const examId = route.params.examId as string;
+  if (examId === "") return;
+
+  if (isArray(examId)) return;
+
+  if (examId === "edit") showEditModal.value = true;
+
   if (examId) {
     await viewExam(examId);
   }

src/views/User/BoardTable.vue

@@ -2,18 +2,19 @@
   <div class="flex flex-row justify-between items-center">
     <h1 class="text-3xl font-bold mb-6">FPGA 设备管理</h1>
     <div>
-      <button 
-        class="btn btn-ghost group" 
-        @click="tableManager.getAllBoards"
-      >
-        <RefreshCw class="w-4 h-4 mr-2 transition-transform duration-300 group-hover:rotate-180" />
+      <button class="btn btn-ghost group" @click="tableManager.getAllBoards">
+        <RefreshCw
+          class="w-4 h-4 mr-2 transition-transform duration-300 group-hover:rotate-180"
+        />
         刷新
       </button>
       <button
         class="btn btn-ghost text-error hover:underline group"
         @click="tableManager.toggleEditMode"
       >
-        <Edit class="w-4 h-4 mr-2 transition-transform duration-200 group-hover:scale-110" />
+        <Edit
+          class="w-4 h-4 mr-2 transition-transform duration-200 group-hover:scale-110"
+        />
         编辑
       </button>
     </div>
@@ -25,14 +26,14 @@
       <div class="flex items-center my-2 gap-4">
         <input
           type="text"
-          placeholder="筛选 IP 地址..."
+          placeholder="筛选名称..."
           class="input input-bordered max-w-sm"
           :value="
-            tableManager.getColumnByKey('devAddr')?.getFilterValue() as string
+            tableManager.getColumnByKey('boardName')?.getFilterValue() as string
           "
           @input="
             tableManager
-              .getColumnByKey('devAddr')
+              .getColumnByKey('boardName')
               ?.setFilterValue(($event.target as HTMLInputElement).value)
           "
         />
@@ -85,7 +86,9 @@
             :disabled="!tableManager.isEditMode.value"
             @click="showAddBoardDialog = true"
           >
-            <Plus class="w-4 h-4 mr-2 transition-transform duration-200 group-hover:scale-110" />
+            <Plus
+              class="w-4 h-4 mr-2 transition-transform duration-200 group-hover:scale-110"
+            />
             新增实验板
           </button>
 
@@ -94,7 +97,9 @@
             :disabled="!tableManager.isEditMode.value"
             @click="tableManager.deleteSelectedBoards"
           >
-            <Trash2 class="w-4 h-4 mr-2 transition-transform duration-200 group-hover:scale-110 group-hover:animate-pulse" />
+            <Trash2
+              class="w-4 h-4 mr-2 transition-transform duration-200 group-hover:scale-110 group-hover:animate-pulse"
+            />
             删除选中
           </button>
         </div>

src/views/User/Index.vue

@@ -35,6 +35,11 @@ import { toNumber } from "lodash";
 import { onMounted, ref } from "vue";
 import { AuthManager } from "@/utils/AuthManager";
 import UserInfo from "./UserInfo.vue";
+import { useRoute, useRouter } from "vue-router";
+import { isArray } from "@vue/shared";
+
+const route = useRoute();
+const router = useRouter();
 
 const activePage = ref(1);
 const isAdmin = ref(false);
@@ -42,15 +47,37 @@ const isAdmin = ref(false);
 function setActivePage(event: Event) {
   const target = event.currentTarget as HTMLLinkElement;
   const newPage = toNumber(target.id);
+  if (newPage === activePage.value) return;
 
   // 如果用户不是管理员但试图访问管理员页面，则忽略
   if (newPage === 100 && !isAdmin.value) {
     return;
   }
 
+  if (newPage == 1) {
+    router.push({ path: "/user/info" });
+  } else if (newPage == 2) {
+    router.push({ path: "/user/admin/users" });
+  } else if (newPage == 100) {
+    router.push({ path: "/user/admin/boards" });
+  }
   activePage.value = newPage;
 }
 
+onMounted(() => {
+  const page = route.params.page;
+
+  if (page === "info") {
+    activePage.value = 1;
+  } else if (isArray(page) && page[0] === "admin" && page[1] === "users") {
+    activePage.value = 2;
+  } else if (isArray(page) && page[0] === "admin" && page[1] === "boards") {
+    activePage.value = 100;
+  } else {
+    router.push({ path: "/user/info" });
+  }
+});
+
 onMounted(async () => {
   try {
     // 首先验证用户是否已登录