add bun backend and add upload bitstream component

src/components/Sidebar.vue

@@ -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"
   }
 }
 

src/components/UploadCard.vue

@@ -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>