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

style: 重新调整结构

Browse Source
This commit is contained in:
SikongJueluo
2025-07-11 17:31:49 +08:00
parent b4bb563782
commit eedec80927
8 changed files with 55 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/FunctionBar.vue
View File

@@ -1,70 +0,0 @@
<template>
<div class="h-full flex flex-col">
<div class="tabs tabs-box flex-shrink-0">
<label class="tab">
<input
type="radio"
name="function-bar"
id="1"
checked
@change="handleTabChange"
/>
<TerminalIcon class="icon" />
日志终端
</label>
<label class="tab">
<input
type="radio"
name="function-bar"
id="2"
@change="handleTabChange"
/>
<VideoIcon class="icon" />
HTTP视频流
</label>
<label class="tab">
<input
type="radio"
name="function-bar"
id="3"
@change="handleTabChange"
/>
<SquareActivityIcon class="icon" />
示波器
</label>
</div>
<div class="flex-1 overflow-hidden">
<div v-if="checkID === 1" class="h-full overflow-y-auto"></div>
<div v-else-if="checkID === 2" class="h-full overflow-y-auto">
<VideoStreamView />
</div>
<div v-else-if="checkID === 3" class="h-full overflow-y-auto">
<OscilloscopeView />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { VideoIcon, SquareActivityIcon, TerminalIcon } from "lucide-vue-next";
import VideoStreamView from "@/views/VideoStreamView.vue";
import OscilloscopeView from "@/views/OscilloscopeView.vue";
import { isNull, toNumber } from "lodash";
import { ref } from "vue";
const checkID = ref(1);
function handleTabChange(event: Event) {
const target = event.currentTarget as HTMLInputElement;
if (isNull(target)) return;
checkID.value = toNumber(target.id);
}
</script>
<style scoped>
@import "../assets/main.css";
.icon {
@apply h-4 w-4 opacity-70 mr-1.5;
}
</style>

11
src/components/Navbar.vue
View File

@@ -83,14 +83,10 @@
tabindex="0"
role="button"
class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300 flex items-center gap-2"
@click="isUserMenuOpen = !isUserMenuOpen"
>
<User class="h-5 w-5" />
<span class="font-medium">{{ userName }}</span>
<ChevronDownIcon
class="icon"
:class="{ 'rotate-180': isUserMenuOpen }"
/>
<ChevronDownIcon class="icon transition-transform duration-300 dropdown-icon" />
</div>
<ul
tabindex="0"
@@ -196,4 +192,9 @@ onMounted(() => {
.icon {
@apply h-5 w-5 opacity-70;
}
.dropdown[open] .dropdown-icon,
.dropdown:focus-within .dropdown-icon {
transform: rotate(180deg);
}
</style>