add bun backend and add upload bitstream component
This commit is contained in:
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
|
52
src/components/UploadCard.vue
Normal file
52
src/components/UploadCard.vue
Normal 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>
|
@@ -8,3 +8,5 @@ import router from './router'
|
||||
|
||||
|
||||
const app = createApp(App).use(router).use(createPinia()).mount('#app')
|
||||
|
||||
console.log()
|
||||
|
@@ -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({
|
||||
|
@@ -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>
|
||||
|
||||
|
Reference in New Issue
Block a user