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

finish sidebar router push

Browse Source
This commit is contained in:
SikongJueluo
2025-04-05 20:49:50 +08:00
parent 20d4fa12d8
commit 292c73e757
8 changed files with 102 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;