SikongJueluo
/
FPGA_WebLab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finish sidebar router push

This commit is contained in:
SikongJueluo 2025-04-05 20:49:50 +08:00
parent 20d4fa12d8
commit 292c73e757
No known key found for this signature in database
8 changed files with 102 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.vue
View File

@ -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>

81
src/components/Sidebar.vue
View File

@ -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'"
@click="toggleSidebar">
<svg t="1741694970690" :class="isClose ? 'rotate-0' : 'rotate-540'" class="icon" viewBox="0 0 1024 1024"
<button class="btn btn-square rounded-lg p-2 m-3 fixed"
:class="sidebar.isClose ? 'left-7 top-23' : 'left-60 top-7'" @click="sidebar.toggleSidebar">
<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">
<a>
<li v-for="item in props.items" class="text-xl my-1">
<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 = [
{ id: 1, icon: iconMenu, msg: "btn1" },
{ id: 2, icon: iconMenu, msg: "btn2" },
{ id: 3, icon: iconMenu, msg: "btn3" },
{ id: 4, icon: iconMenu, msg: "btn4" },
];
type Item = {
id: number;
icon: string;
text: string;
page: string;
};
function closeSidebar() {
isClose.value = true;
console.info("Close sidebar");
interface Props {
items?: Array<Item>;
}
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"
}
}
const props = withDefaults(defineProps<Props>(), {
items: () => [
{ id: 1, icon: iconMenu, text: "btn1", page: "/" },
{ id: 2, icon: iconMenu, text: "btn2", page: "/" },
{ id: 3, icon: iconMenu, text: "btn3", page: "/" },
{ id: 4, icon: iconMenu, text: "btn4", page: "/" },
],
});
</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;

21
src/components/equipments/Switch.vue
View File

@ -46,30 +46,31 @@
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { computed, ref } from "vue";
interface Props {
width?: string | number
height?: string | number
width?: 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">

16
src/router/index.ts
View File

@ -1,18 +1,20 @@
import { createMemoryHistory, createRouter } from 'vue-router'
import LoginView from "@/views/LoginView.vue"
import UserView from '@/views/UserView.vue'
import TestView from '@/views/TestView.vue'
import { createMemoryHistory, createRouter } from "vue-router";
import LoginView from "../views/LoginView.vue";
import UserView from "../views/UserView.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;

29
src/stores/sidebar.ts
View File

@ -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 }
})

12
src/views/JtagTest.vue Normal file
View File

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

2
src/views/LoginView.vue
View File

@ -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>

2
src/views/TestView.vue
View File

@ -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>