Server: finish jtag controller; Web: finish sibebar animation
This commit is contained in:
10
src/App.vue
10
src/App.vue
@@ -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 />
|
||||
|
11
src/components/PopButton.vue
Normal file
11
src/components/PopButton.vue
Normal 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>
|
@@ -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>
|
||||
|
@@ -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
0
src/stores/sidebar.ts
Normal 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>
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user