Server: finish jtag controller; Web: finish sibebar animation

This commit is contained in:
2025-04-05 19:41:56 +08:00
parent 342a5a2436
commit 20d4fa12d8
15 changed files with 336 additions and 168 deletions

View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import Sidebar from "./components/Sidebar.vue";
import { useThemeStore } from "./stores/theme";
const theme = useThemeStore();
@@ -6,12 +7,11 @@ const theme = useThemeStore();
<template>
<div :data-theme="theme.currentTheme">
<header>
<RouterLink to="/user"> Go to User</RouterLink>
<RouterLink to="/login"> Go to Login</RouterLink>
<router-link to="/test"> Go to Test</router-link>
<header class="relative">
<div class="fixed left-0 top-0 z-50">
<Sidebar />
</div>
</header>
<div></div>
<main>
<RouterView />

View File

@@ -0,0 +1,11 @@
<template>
<button class="btn transition-transform duration-150 ease-in-out hover:scale-120">
Button A
</button>
</template>
<script lang="ts" setup></script>
<style scoped lang="postcss">
@import "@/assets/main.css";
</style>

View File

@@ -1,123 +1,139 @@
<template>
<div :class="[
'card-dash',
'sidebar-base',
'transition-all',
'duration-500',
'ease-in-out',
isClose ? 'sidebar-close' : 'sidebar-open',
]">
<div class="card-body flex transition-all duration-500 ease-in-out">
<div class="card card-dash sidebar-base" :class="[isClose ? 'w-31' : 'w-80']">
<div class="card-body flex relative transition-all duration-500 ease-in-out">
<!-- Avatar and Name -->
<div :class="['flex', 'items-center', isClose ? 'flex-col' : '']">
<div class="relative" :class="isClose ? 'h-50' : 'h-20'">
<!-- Img -->
<div class="avatar h-10">
<div class="avatar h-10 fixed top-10" :class="isClose ? 'left-10' : 'left-7'">
<div class="rounded-full">
<img src="../assets/user.svg" alt="User" />
</div>
</div>
<!-- Text -->
<div v-if="!isClose" class="mx-5 grow">
<label class="text-2xl">用户名</label>
</div>
<!-- Toggle Button -->
<button class="btn btn-square rounded-lg p-2 m-3" @click="toggleSidebar">
<img src="../assets/left.svg" alt="Menu Button" class="opacity-50">
</button>
<Transition>
<div v-if="!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"
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
d="M803.758 514.017c-0.001-0.311-0.013-0.622-0.018-0.933-0.162-23.974-9.386-47.811-27.743-65.903-0.084-0.082-0.172-0.157-0.256-0.239-0.154-0.154-0.296-0.315-0.451-0.468L417.861 94.096c-37.685-37.153-99.034-37.476-136.331-0.718-37.297 36.758-36.979 97.231 0.707 134.384l290.361 286.257-290.362 286.257c-37.685 37.153-38.004 97.625-0.707 134.383 37.297 36.758 98.646 36.435 136.331-0.718l357.43-352.378c0.155-0.153 0.297-0.314 0.451-0.468 0.084-0.082 0.172-0.157 0.256-0.239 18.354-18.089 27.578-41.922 27.743-65.892 0.004-0.315 0.017-0.631 0.018-0.947z"
:fill="theme.isLightTheme() ? '#828282' : '#C0C3C8'" p-id="4547"></path>
</svg>
</button>
<div class="divider"></div>
<ul class="menu h-full w-full">
<li v-for="item in items" class="text-lg my-1">
<li v-for="item in items" class="text-xl my-1">
<a>
<img class="h-[1.5em] opacity-50 mx-1" :src="item.icon" alt="An icon" />
<p v-if="!isClose">{{ item.msg }}</p>
<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">
<path d="M192 192m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2623"></path>
<path d="M192 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2624"></path>
<path d="M192 832m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2625"></path>
<path
d="M864 160H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h512c17.7 0 32-14.3 32-32s-14.3-32-32-32zM864 480H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h512c17.7 0 32-14.3 32-32s-14.3-32-32-32zM864 800H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h512c17.7 0 32-14.3 32-32s-14.3-32-32-32z"
p-id="2626"></path>
</svg>
<Transition>
<p v-if="!isClose">{{ item.msg }}</p>
</Transition>
</a>
</li>
</ul>
<div class="divider"></div>
<ul class="menu w-full">
<li class="mb-5">
<li>
<a @click="theme.toggleTheme" class="text-xl">
<ThemeControlButton />
<p v-if="!isClose">改变主题</p>
<ThemeControlToggle v-if="!isClose" />
<Transition>
<p v-if="!isClose" class="break-keep">改变主题</p>
</Transition>
<Transition>
<ThemeControlToggle v-if="!isClose" />
</Transition>
</a>
</li>
</ul>
</div>
</div>
</template>
<script setup lang="ts">
import iconMenu from "../assets/menu.svg"
import iconMenu from "../assets/menu.svg";
import { useThemeStore } from "@/stores/theme";
import { computed, ref } from "vue";
import ThemeControlButton from "./ThemeControlButton.vue";
import ThemeControlToggle from "./ThemeControlToggle.vue";
const theme = useThemeStore()
const isClose = ref(false)
const theme = useThemeStore();
const isClose = ref(false);
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" },
]
const themeSidebar = computed(() => {
return [
"card-dash",
"sidebar-base",
"transition",
"duration-300",
"ease-in-out",
isClose.value ? "sidebar-close" : "sidebar-open",
]
})
];
function closeSidebar() {
isClose.value = true;
console.info("Close sidebar")
console.info("Close sidebar");
}
function openSidebar() {
isClose.value = false;
console.info("Open sidebar")
console.info("Open sidebar");
}
function toggleSidebar() {
if (isClose.value) {
openSidebar()
openSidebar();
// themeSidebar.value = "card-dash sidebar-base sidebar-open"
}
else {
closeSidebar()
} else {
closeSidebar();
// themeSidebar.value = "card-dash sidebar-base sidebar-close"
}
}
</script>
<style scoped lang="postcss">
@reference "../assets/main.css";
* {
@apply transition-all duration-500 ease-in-out;
}
.sidebar-base {
@apply card shadow-xl h-screen;
@apply shadow-xl h-screen;
}
.sidebar-open {
@apply w-80
@apply w-80;
}
.sidebar-close {
@apply w-31
@apply w-31;
}
.v-enter-active,
.v-leave-active {
transition: opacity 0.3s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>

View File

@@ -1,29 +1,31 @@
<template>
<div class="card card-dash shadow-xl w-90 h-60">
<div class="card-body flex">
<!-- Title -->
<h1 class="card-title place-self-center font-bold text-2xl">上传比特流文件</h1>
<h1 class="card-title place-self-center font-bold text-2xl">
上传比特流文件
</h1>
<!-- Input File -->
<fieldset class="fieldset w-full">
<legend class="fieldset-legend text-sm">选择或拖拽上传文件</legend>
<input type="file" class="file-input" @change="handleFileChange" />
<label class="fieldset-label">Max size 2MB</label>
<label class="fieldset-label">文件最大容量: 2MB</label>
</fieldset>
<!-- Upload Button -->
<div class="card-actions">
<button @click="uploadBitStream" class="btn btn-primary grow">上传</button>
<button @click="uploadBitStream" class="btn btn-primary grow">
上传
</button>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { client } from '@/client';
import { TRPCClientError } from '@trpc/client';
import { client } from "@/client";
import { TRPCClientError } from "@trpc/client";
var bitstream = null;
@@ -32,7 +34,7 @@ function handleFileChange(event: Event): void {
const file = target.files?.[0]; // 获取选中的第一个文件
if (!file) {
console.error('未选择文件');
console.error("未选择文件");
return;
}
@@ -45,22 +47,18 @@ async function uploadBitStream() {
try {
const serverStatus = await client.api.status.query();
if (serverStatus != "OK") {
throw new Error("Server Busy...")
throw new Error("Server Busy...");
}
} catch (error) {
if (error instanceof TRPCClientError) {
console.error("Can't connect to Server!")
console.error("Can't connect to Server!");
} else {
console.error(error)
console.error(error);
}
}
}
function checkFileType(file: File) {
}
function checkFileType(file: File) { }
</script>
<style scoped lang="postcss">

0
src/stores/sidebar.ts Normal file
View File

View File

@@ -2,16 +2,16 @@
<div class="w-screen h-screen">
<!-- <Switch width="720" height="720" /> -->
<MechanicalButton width="720" height="720" />
<PopButton></PopButton>
</div>
</template>
<script setup lang="ts">
import MechanicalButton from '@/components/equipments/MechanicalButton.vue';
import Switch from '@/components/equipments/Switch.vue';
import PopButton from "@/components/PopButton.vue";
// import MechanicalButton from "@/components/equipments/MechanicalButton.vue";
// import Switch from "@/components/equipments/Switch.vue";
</script>
<style scoped lang="postcss">
@import "../assets/main.css"
@import "../assets/main.css";
</style>

View File

@@ -1,10 +1,6 @@
<template>
<header>
</header>
<header></header>
<main class="relative">
<div class="fixed left-0 top-0 z-50">
<Sidebar />
</div>
<div class="w-screen h-screen flex items-center justify-center">
<UploadCard />
</div>
@@ -12,10 +8,10 @@
</template>
<script setup lang="ts">
import UploadCard from '@/components/UploadCard.vue';
import Sidebar from '../components/Sidebar.vue'
import UploadCard from "@/components/UploadCard.vue";
import Sidebar from "../components/Sidebar.vue";
</script>
<style scoped>
@import "../assets/main.css"
@import "../assets/main.css";
</style>