add bun backend and add upload bitstream component

This commit is contained in:
2025-03-18 17:28:21 +08:00
parent 4980b84da6
commit d766e2ae6a
13 changed files with 178 additions and 17 deletions

View File

@@ -1,8 +1,15 @@
<template>
<div :class="themeSidebar">
<div class="card-body flex">
<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">
<!-- Avatar and Name -->
<div class="flex items-center">
<div :class="['flex', 'items-center', isClose ? 'flex-col' : '']">
<!-- Img -->
<div class="avatar h-10">
<div class="rounded-full">
@@ -15,7 +22,7 @@
</div>
<!-- Toggle Button -->
<button class="btn btn-square rounded-lg p-2" @click="toggleSidebar">
<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>
</div>
@@ -51,7 +58,7 @@
<script setup lang="ts">
import iconMenu from "../assets/menu.svg"
import { useThemeStore } from "@/stores/theme";
import { ref } from "vue";
import { computed, ref } from "vue";
import ThemeControlButton from "./ThemeControlButton.vue";
import ThemeControlToggle from "./ThemeControlToggle.vue";
@@ -65,7 +72,16 @@ const items = [
{ id: 4, icon: iconMenu, msg: "btn4" },
]
const themeSidebar = ref("card-dash sidebar-base sidebar-open")
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;
@@ -80,11 +96,11 @@ function openSidebar() {
function toggleSidebar() {
if (isClose.value) {
openSidebar()
themeSidebar.value = "card-dash sidebar-base sidebar-open"
// themeSidebar.value = "card-dash sidebar-base sidebar-open"
}
else {
closeSidebar()
themeSidebar.value = "card-dash sidebar-base sidebar-close"
// themeSidebar.value = "card-dash sidebar-base sidebar-close"
}
}

View File

@@ -0,0 +1,52 @@
<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>
<!-- 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>
</fieldset>
<!-- Upload Button -->
<div class="card-actions">
<button @click="uploadBitStream" class="btn btn-primary grow">上传</button>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
var bitstream = null;
function handleFileChange(event: Event): void {
const target = event.target as HTMLInputElement;
const file = target.files?.[0]; // 获取选中的第一个文件
if (!file) {
console.error('未选择文件');
return;
}
bitstream = file;
console.log(bitstream);
}
function uploadBitStream() {
}
function checkFileType(file: File) {
}
</script>
<style scoped lang="postcss">
@import "../assets/main.css";
</style>

View File

@@ -8,3 +8,5 @@ import router from './router'
const app = createApp(App).use(router).use(createPinia()).mount('#app')
console.log()

View File

@@ -1,13 +1,13 @@
import { createMemoryHistory, createRouter } from 'vue-router'
import LoginView from "@/views/LoginView.vue"
import UserView from '@/views/UserView.vue'
import TestSVG from '@/views/TestSVG.vue'
import TestView from '@/views/TestView.vue'
const routes = [
{ path: "/", redirect: "/user" },
{ path: "/login", name: "Login", component: LoginView },
{ path: "/user", name: "User", component: UserView },
{ path: "/test", name: "Test", component: TestSVG },
{ path: "/test", name: "Test", component: TestView },
]
const router = createRouter({

View File

@@ -1,12 +1,18 @@
<template>
<main>
<div class="w-full h-full">
<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>
</main>
</template>
<script setup lang="ts">
import UploadCard from '@/components/UploadCard.vue';
import Sidebar from '../components/Sidebar.vue'
</script>