finish sidebar router push

src/App.vue

@@ -1,15 +1,21 @@
 <script setup lang="ts">
+import iconMenu from "./assets/menu.svg";
 import Sidebar from "./components/Sidebar.vue";
 import { useThemeStore } from "./stores/theme";
 
 const theme = useThemeStore();
+const items = [
+  { id: 1, icon: iconMenu, text: "用户界面", page: "/user" },
+  { id: 2, icon: iconMenu, text: "Component Test", page: "/test" },
+  { id: 3, icon: iconMenu, text: "Jtag Test", page: "/test/jtag" },
+];
 </script>
 
 <template>
   <div :data-theme="theme.currentTheme">
     <header class="relative">
       <div class="fixed left-0 top-0 z-50">
-        <Sidebar />
+        <Sidebar :items="items" />
       </div>
     </header>
 

src/components/Sidebar.vue

@@ -1,26 +1,26 @@
 <template>
-  <div class="card card-dash sidebar-base" :class="[isClose ? 'w-31' : 'w-80']">
+  <div class="card card-dash shadow-xl h-screen" :class="[sidebar.isClose ? 'w-31' : 'w-80']">
     <div class="card-body flex relative transition-all duration-500 ease-in-out">
       <!-- Avatar and Name -->
-      <div class="relative" :class="isClose ? 'h-50' : 'h-20'">
+      <div class="relative" :class="sidebar.isClose ? 'h-50' : 'h-20'">
         <!-- Img -->
-        <div class="avatar h-10 fixed top-10" :class="isClose ? 'left-10' : 'left-7'">
+        <div class="avatar h-10 fixed top-10" :class="sidebar.isClose ? 'left-10' : 'left-7'">
           <div class="rounded-full">
             <img src="../assets/user.svg" alt="User" />
           </div>
         </div>
         <!-- Text -->
         <Transition>
-          <div v-if="!isClose" class="mx-5 grow fixed left-20 top-11">
+          <div v-if="!sidebar.isClose" class="mx-5 grow fixed left-20 top-11">
             <label class="text-2xl">用户名</label>
           </div>
         </Transition>
       </div>
 
       <!-- Toggle Button -->
-      <button class="btn btn-square rounded-lg p-2 m-3 fixed" :class="isClose ? 'left-7 top-23' : 'left-60 top-7'"
+      <button class="btn btn-square rounded-lg p-2 m-3 fixed"
-        @click="toggleSidebar">
+        :class="sidebar.isClose ? 'left-7 top-23' : 'left-60 top-7'" @click="sidebar.toggleSidebar">
-        <svg t="1741694970690" :class="isClose ? 'rotate-0' : 'rotate-540'" class="icon" viewBox="0 0 1024 1024"
+        <svg t="1741694970690" :class="sidebar.isClose ? 'rotate-0' : 'rotate-540'" class="icon" viewBox="0 0 1024 1024"
           version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4546" xmlns:xlink="http://www.w3.org/1999/xlink"
           width="200" height="200">
           <path
@@ -32,8 +32,8 @@
       <div class="divider"></div>
 
       <ul class="menu h-full w-full">
-        <li v-for="item in items" class="text-xl my-1">
+        <li v-for="item in props.items" class="text-xl my-1">
-          <a>
+          <a @click="router.push(item.page)">
             <svg t="1741694797806" class="icon h-[1.5em] w-[1.5em] opacity-50 mx-1" viewBox="0 0 1024 1024"
               version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2622" xmlns:xlink="http://www.w3.org/1999/xlink"
               width="200" height="200">
@@ -45,7 +45,7 @@
                 p-id="2626"></path>
             </svg>
             <Transition>
-              <p v-if="!isClose">{{ item.msg }}</p>
+              <p class="break-keep" v-if="!sidebar.isClose">{{ item.text }}</p>
             </Transition>
           </a>
         </li>
@@ -58,10 +58,10 @@
           <a @click="theme.toggleTheme" class="text-xl">
             <ThemeControlButton />
             <Transition>
-              <p v-if="!isClose" class="break-keep">改变主题</p>
+              <p v-if="!sidebar.isClose" class="break-keep">改变主题</p>
             </Transition>
             <Transition>
-              <ThemeControlToggle v-if="!isClose" />
+              <ThemeControlToggle v-if="!sidebar.isClose" />
             </Transition>
           </a>
         </li>
@@ -72,40 +72,35 @@
 
 <script setup lang="ts">
 import iconMenu from "../assets/menu.svg";
+import "../router";
 import { useThemeStore } from "@/stores/theme";
-import { computed, ref } from "vue";
+import { useSidebarStore } from "@/stores/sidebar";
 import ThemeControlButton from "./ThemeControlButton.vue";
 import ThemeControlToggle from "./ThemeControlToggle.vue";
+import router from "../router";
 
 const theme = useThemeStore();
-const isClose = ref(false);
+const sidebar = useSidebarStore();
 
-const items = [
+type Item = {
-  { id: 1, icon: iconMenu, msg: "btn1" },
+  id: number;
-  { id: 2, icon: iconMenu, msg: "btn2" },
+  icon: string;
-  { id: 3, icon: iconMenu, msg: "btn3" },
+  text: string;
-  { id: 4, icon: iconMenu, msg: "btn4" },
+  page: string;
-];
+};
 
-function closeSidebar() {
+interface Props {
-  isClose.value = true;
+  items?: Array<Item>;
-  console.info("Close sidebar");
 }
 
-function openSidebar() {
+const props = withDefaults(defineProps<Props>(), {
-  isClose.value = false;
+  items: () => [
-  console.info("Open sidebar");
+    { id: 1, icon: iconMenu, text: "btn1", page: "/" },
-}
+    { id: 2, icon: iconMenu, text: "btn2", page: "/" },
-
+    { id: 3, icon: iconMenu, text: "btn3", page: "/" },
-function toggleSidebar() {
+    { id: 4, icon: iconMenu, text: "btn4", page: "/" },
-  if (isClose.value) {
+  ],
-    openSidebar();
+});
-    // themeSidebar.value = "card-dash sidebar-base sidebar-open"
-  } else {
-    closeSidebar();
-    // themeSidebar.value = "card-dash sidebar-base sidebar-close"
-  }
-}
 </script>
 
 <style scoped lang="postcss">
@@ -115,18 +110,6 @@ function toggleSidebar() {
   @apply transition-all duration-500 ease-in-out;
 }
 
-.sidebar-base {
-  @apply shadow-xl h-screen;
-}
-
-.sidebar-open {
-  @apply w-80;
-}
-
-.sidebar-close {
-  @apply w-31;
-}
-
 .v-enter-active,
 .v-leave-active {
   transition: opacity 0.3s ease;

src/components/equipments/Switch.vue

@@ -46,30 +46,31 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, ref } from "vue";
 
 interface Props {
-  width?: string | number
+  width?: string | number;
-  height?: string | number
+  height?: string | number;
 }
 const props = withDefaults(defineProps<Props>(), {
   width: 160,
   height: 160,
-})
+});
 
-const btnStatus = ref([false, false, false, false, false, false])
+const btnStatus = ref([false, false, false, false, false, false]);
 const btnLocation = computed(() => {
-  return btnStatus.value.map((status) => { return status ? 7.025 : 8.325 })
+  return btnStatus.value.map((status) => {
-})
+    return status ? 7.025 : 8.325;
+  });
+});
 
 function setBtnStatus(btnNum: number, isOn: boolean): void {
-  btnStatus.value[btnNum] = isOn
+  btnStatus.value[btnNum] = isOn;
 }
 
 function toggleBtnStatus(btnNum: number): void {
-  btnStatus.value[btnNum] = !btnStatus.value[btnNum]
+  btnStatus.value[btnNum] = !btnStatus.value[btnNum];
 }
-
 </script>
 
 <style scoped lang="postcss">

src/router/index.ts

@@ -1,18 +1,20 @@
-import { createMemoryHistory, createRouter } from 'vue-router'
+import { createMemoryHistory, createRouter } from "vue-router";
-import LoginView from "@/views/LoginView.vue"
+import LoginView from "../views/LoginView.vue";
-import UserView from '@/views/UserView.vue'
+import UserView from "../views/UserView.vue";
-import TestView from '@/views/TestView.vue'
+import TestView from "../views/TestView.vue";
+import JtagTest from "../views/JtagTest.vue";
 
 const routes = [
   { path: "/", redirect: "/user" },
   { path: "/login", name: "Login", component: LoginView },
   { path: "/user", name: "User", component: UserView },
   { path: "/test", name: "Test", component: TestView },
-]
+  { path: "/test/jtag", name:"JtagTest", component: JtagTest}
+];
 
 const router = createRouter({
   history: createMemoryHistory(),
   routes,
-})
+});
 
-export default router
+export default router;

src/stores/sidebar.ts

@@ -0,0 +1,29 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useSidebarStore = defineStore('sidebar', () => {
+  const isClose = ref(false);
+
+  function closeSidebar() {
+    isClose.value = true;
+    console.info("Close sidebar");
+  }
+
+  function openSidebar() {
+    isClose.value = false;
+    console.info("Open sidebar");
+  }
+
+  function toggleSidebar() {
+    if (isClose.value) {
+      openSidebar();
+      // themeSidebar.value = "card-dash sidebar-base sidebar-open"
+    } else {
+      closeSidebar();
+      // themeSidebar.value = "card-dash sidebar-base sidebar-close"
+    }
+  }
+
+  return { isClose, closeSidebar, openSidebar, toggleSidebar }
+})
+

src/views/JtagTest.vue

@@ -0,0 +1,12 @@
+<template>
+  
+</template>
+
+<script lang="ts" setup>
+  
+</script>
+
+<style scoped lang="postcss">
+  
+</style>
+

src/views/LoginView.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import LoginCard from '@/components/LoginCard.vue';
+import LoginCard from "@/components/LoginCard.vue";
 </script>
 
 <style scoped></style>

src/views/TestView.vue

@@ -8,7 +8,7 @@
 
 <script setup lang="ts">
 import PopButton from "@/components/PopButton.vue";
-// import MechanicalButton from "@/components/equipments/MechanicalButton.vue";
+import MechanicalButton from "@/components/equipments/MechanicalButton.vue";
 // import Switch from "@/components/equipments/Switch.vue";
 </script>