feat: 优化工程页面的用户体验，包括删除一些不必要的元素，同时使用storage保存一些界面参数方便用户体验

src/views/Project/BottomBar.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="h-full flex flex-col">
+  <div class="h-full flex flex-col gap-7">
-    <div class="tabs tabs-box flex-shrink-0">
+    <div class="tabs tabs-box flex-shrink-0 shadow-xl">
       <label class="tab">
         <input
           type="radio"
@@ -32,7 +32,17 @@
         <SquareActivityIcon class="icon" />
         示波器
       </label>
+      <!-- 全屏按钮 -->
+      <button
+        class="fullscreen-btn ml-auto btn btn-ghost btn-sm"
+        @click="toggleFullscreen"
+        :title="isFullscreen ? '退出全屏' : '全屏'"
+      >
+        <MaximizeIcon v-if="!isFullscreen" class="icon" />
+        <MinimizeIcon v-else class="icon" />
+      </button>
     </div>
+    <!-- 主页面 -->
     <div class="flex-1 overflow-hidden">
       <div v-if="checkID === 1" class="h-full overflow-y-auto"></div>
       <div v-else-if="checkID === 2" class="h-full overflow-y-auto">
@@ -44,21 +54,52 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
-import { VideoIcon, SquareActivityIcon, TerminalIcon } from "lucide-vue-next";
+import {
+  VideoIcon,
+  SquareActivityIcon,
+  TerminalIcon,
+  MaximizeIcon,
+  MinimizeIcon,
+} from "lucide-vue-next";
 import VideoStreamView from "@/views/Project/VideoStream.vue";
 import OscilloscopeView from "@/views/Project/Oscilloscope.vue";
 import { isNull, toNumber } from "lodash";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
 const checkID = ref(1);
 
+// 定义事件
+const emit = defineEmits<{
+  toggleFullscreen: [];
+}>();
+
+// 接收父组件传递的全屏状态
+const props = defineProps<{
+  isFullscreen?: boolean;
+}>();
+
+const isFullscreen = ref(props.isFullscreen || false);
+
+// 监听props变化
+watch(
+  () => props.isFullscreen,
+  (newVal) => {
+    isFullscreen.value = newVal || false;
+  },
+);
+
 function handleTabChange(event: Event) {
   const target = event.currentTarget as HTMLInputElement;
   if (isNull(target)) return;
 
   checkID.value = toNumber(target.id);
 }
+
+function toggleFullscreen() {
+  emit("toggleFullscreen");
+}
 </script>
 
 <style scoped lang="postcss">
@@ -67,4 +108,16 @@ function handleTabChange(event: Event) {
 .icon {
   @apply h-4 w-4 opacity-70 mr-1.5;
 }
+
+.tabs {
+  @apply relative flex items-center;
+}
+
+.fullscreen-btn {
+  @apply flex items-center justify-center p-2 rounded-lg transition-colors;
+}
+
+.fullscreen-btn .icon {
+  @apply mr-0;
+}
 </style>

src/views/Project/Index.vue

@@ -5,17 +5,24 @@
         id="splitter-group-v"
         direction="vertical"
         class="w-full h-full"
+        @layout="handleVerticalSplitterResize"
+      >
+        <!-- 使用 v-show 替代 v-if -->
+        <SplitterPanel 
+          v-show="!isBottomBarFullscreen"
+          id="splitter-group-v-panel-project"
+          :default-size="verticalSplitterSize"
         >
-        <SplitterPanel id="splitter-group-v-panel-project">
           <SplitterGroup
             id="splitter-group-h"
             direction="horizontal"
             class="w-full h-full"
+            @layout="handleHorizontalSplitterResize"
           >
             <!-- 左侧图形化区域 -->
             <SplitterPanel
               id="splitter-group-h-panel-canvas"
-              :default-size="60"
+              :default-size="horizontalSplitterSize"
               :min-size="30"
               class="relative bg-base-200 overflow-hidden h-full"
             >
@@ -60,7 +67,9 @@
           </SplitterGroup>
         </SplitterPanel>
 
+        <!-- 分割线也使用 v-show -->
         <SplitterResizeHandle
+          v-show="!isBottomBarFullscreen"
           id="splitter-group-v-resize-handle"
           class="h-2 bg-base-100 hover:bg-primary hover:opacity-70 transition-colors"
         />
@@ -68,11 +77,14 @@
         <!-- 功能底栏 -->
         <SplitterPanel
           id="splitter-group-v-panel-bar"
-          :default-size="20"
+          :default-size="isBottomBarFullscreen ? 100 : (100 - verticalSplitterSize)"
-          :min-size="15"
+          :min-size="isBottomBarFullscreen ? 100 : 15"
-          class="w-full overflow-hidden"
+          class="w-full overflow-hidden px-5 pt-3"
         >
-          <BottomBar class="mx-4 mt-1" />
+          <BottomBar 
+            :isFullscreen="isBottomBarFullscreen"
+            @toggle-fullscreen="handleToggleBottomBarFullscreen"
+          />
         </SplitterPanel>
       </SplitterGroup>
     </div>
@@ -97,6 +109,7 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
+import { useLocalStorage } from '@vueuse/core'; // 添加VueUse导入
 import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from "reka-ui";
 import DiagramCanvas from "@/components/LabCanvas/DiagramCanvas.vue";
 import ComponentSelector from "@/components/LabCanvas/ComponentSelector.vue";
@@ -123,11 +136,37 @@ const equipments = useEquipments();
 
 const alert = useAlertStore();
 
+// --- 使用VueUse保存分栏状态 ---
+// 左右分栏比例（默认60%）
+const horizontalSplitterSize = useLocalStorage('project-horizontal-splitter-size', 60);
+// 上下分栏比例（默认80%）
+const verticalSplitterSize = useLocalStorage('project-vertical-splitter-size', 80);
+// 底栏全屏状态
+const isBottomBarFullscreen = useLocalStorage('project-bottom-bar-fullscreen', false);
+// 文档面板显示状态
+const showDocPanel = useLocalStorage('project-show-doc-panel', false);
+
+function handleToggleBottomBarFullscreen() {
+  isBottomBarFullscreen.value = !isBottomBarFullscreen.value;
+}
+
+// --- 处理分栏大小变化 ---
+function handleHorizontalSplitterResize(sizes: number[]) {
+  if (sizes && sizes.length > 0) {
+    horizontalSplitterSize.value = sizes[0];
+  }
+}
+
+function handleVerticalSplitterResize(sizes: number[]) {
+  if (sizes && sizes.length > 0) {
+    verticalSplitterSize.value = sizes[0];
+  }
+}
+
 // --- 实验板申请对话框 ---
 const showRequestBoardDialog = ref(false);
 
 // --- 文档面板控制 ---
-const showDocPanel = ref(false);
 const documentContent = ref("");
 
 // 切换文档面板和属性面板

src/views/Project/Oscilloscope.vue

@@ -1,53 +1,5 @@
 <template>
-  <div
+  <div class="bg-base-100 flex flex-col">
-    class="min-h-screen bg-base-100 flex flex-col p-6 space-y-6 "
-  >
-    <!-- 设置 -->
-    <div class="card bg-base-200 shadow-xl">
-      <div class="card-body">
-        <h2 class="card-title">
-          <Settings class="w-5 h-5" />
-          示波器配置
-        </h2>
-
-        <div class="flex flex-row justify-around gap-4">
-          <div class="grow">
-            <IpInputField
-              v-model="tempConfig.ip"
-              required
-            />
-          </div>
-
-          <div class="grow">
-            <PortInputField
-              v-model="tempConfig.port"
-              required
-            />
-          </div>
-        </div>
-
-        <div class="card-actions justify-end mt-4">
-          <button
-            class="btn btn-ghost"
-            @click="resetConfig"
-            :disabled="isDefault"
-          >
-            <RotateCcw class="w-4 h-4" />
-            重置
-          </button>
-          <button
-            class="btn btn-primary"
-            @click="saveConfig"
-            :disabled="!isValidConfig || !hasChanges"
-            :class="{ loading: isSaving }"
-          >
-            <Save class="w-4 h-4" v-if="!isSaving" />
-            保存配置
-          </button>
-        </div>
-      </div>
-    </div>
-
     <!-- 波形展示 -->
     <div class="card bg-base-200 shadow-xl">
       <div class="card-body">
@@ -62,123 +14,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, reactive, watch } from "vue";
+import { Activity } from "lucide-vue-next";
-import { useStorage } from "@vueuse/core";
-import { z } from "zod";
-import {
-  Settings,
-  Save,
-  RotateCcw,
-  Activity,
-} from "lucide-vue-next";
 import { WaveformDisplay, generateTestData } from "@/components/Oscilloscope";
-import { IpInputField, PortInputField } from "@/components/InputField";
+import { useEquipments } from "@/stores/equipments";
 
-// 配置类型定义
+// 使用全局设备配置
-const configSchema = z.object({
+const equipments = useEquipments();
-  ip: z
-    .string()
-    .ip({ version: "v4", message: "请输入有效的IPv4地址" })
-    .min(1, "请输入IP地址"),
-  port: z
-    .number()
-    .int("端口必须是整数")
-    .min(1, "端口必须大于0")
-    .max(65535, "端口必须小于等于65535"),
-});
-
-type OscilloscopeConfig = z.infer<typeof configSchema>;
-
-// 默认配置
-const defaultConfig: OscilloscopeConfig = {
-  ip: "192.168.1.100",
-  port: 8080,
-};
-
-// 使用 VueUse 存储配置
-const config = useStorage<OscilloscopeConfig>(
-  "oscilloscope-config",
-  defaultConfig,
-  localStorage,
-  {
-    serializer: {
-      read: (value: string) => {
-        try {
-          const parsed = JSON.parse(value);
-          const result = configSchema.safeParse(parsed);
-          return result.success ? result.data : defaultConfig;
-        } catch {
-          return defaultConfig;
-        }
-      },
-      write: (value: OscilloscopeConfig) => JSON.stringify(value),
-    },
-  },
-);
-
-// 临时配置（用于编辑）
-const tempConfig = reactive<OscilloscopeConfig>({
-  ip: config.value.ip,
-  port: config.value.port,
-});
-
-// 状态管理
-const isSaving = ref(false);
-
-// 检查配置是否有效 - 简化版本，因为验证现在在组件内部
-const isValidConfig = computed(() => {
-  return tempConfig.ip && tempConfig.port && 
-         tempConfig.port >= 1 && tempConfig.port <= 65535 &&
-         /^(\d{1,3}\.){3}\d{1,3}$/.test(tempConfig.ip);
-});
-
-// 检查是否有更改
-const hasChanges = computed(() => {
-  return (
-    tempConfig.ip !== config.value.ip || tempConfig.port !== config.value.port
-  );
-});
-
-const isDefault = computed(() => {
-  return (
-    defaultConfig.ip === tempConfig.ip && defaultConfig.port === tempConfig.port
-  );
-});
-
-// 保存配置
-const saveConfig = async () => {
-  if (!isValidConfig.value) return;
-
-  isSaving.value = true;
-
-  try {
-    // 模拟保存延迟
-    await new Promise((resolve) => setTimeout(resolve, 500));
-
-    config.value = {
-      ip: tempConfig.ip,
-      port: tempConfig.port,
-    };
-  } catch (error) {
-    console.error("保存配置失败:", error);
-  } finally {
-    isSaving.value = false;
-  }
-};
-
-// 重置配置
-const resetConfig = () => {
-  tempConfig.ip = defaultConfig.ip;
-  tempConfig.port = defaultConfig.port;
-};
-
-// 监听存储的配置变化，同步到临时配置
-watch(
-  config,
-  (newConfig) => {
-    tempConfig.ip = newConfig.ip;
-    tempConfig.port = newConfig.port;
-  },
-  { deep: true },
-);
 </script>

src/views/Project/RequestBoardDialog.vue

@@ -40,11 +40,6 @@
         </div>
 
         <div v-else-if="hasBoard" class="space-y-4">
-          <div class="alert alert-success">
-            <CheckCircle class="shrink-0 h-6 w-6" />
-            <span>实验板绑定成功！</span>
-          </div>
-
           <div class="bg-base-200 p-4 rounded">
             <h3 class="font-semibold mb-2">实验板信息</h3>
             <div class="space-y-1 text-sm">
@@ -57,12 +52,6 @@
                 <span class="font-medium">地址:</span>
                 {{ boardInfo?.ipAddr }}:{{ boardInfo?.port }}
               </p>
-              <p>
-                <span class="font-medium">状态:</span>
-                <span class="badge badge-success">{{
-                  boardInfo?.status === 1 ? "可用" : "忙碌"
-                }}</span>
-              </p>
             </div>
           </div>
 
@@ -76,11 +65,6 @@
             </button>
           </div>
         </div>
-
-        <div v-if="error" class="alert alert-error mt-4">
-          <XCircle class="shrink-0 h-6 w-6" />
-          <span>{{ error }}</span>
-        </div>
       </div>
     </div>
   </div>
@@ -88,8 +72,9 @@
 
 <script setup lang="ts">
 import { ref, watch } from "vue";
-import { CheckCircle, XCircle } from "lucide-vue-next";
+import { CheckCircle } from "lucide-vue-next";
 import { AuthManager } from "@/utils/AuthManager";
+import { useAlertStore } from "@/components/Alert";
 import type { Board } from "@/APIClient";
 
 interface Props {
@@ -104,11 +89,12 @@ interface Emits {
 const props = defineProps<Props>();
 const emit = defineEmits<Emits>();
 
+const alert = useAlertStore();
+
 const loading = ref(false);
 const requesting = ref(false);
 const hasBoard = ref(false);
 const boardInfo = ref<Board | null>(null);
-const error = ref<string>("");
 
 // 监听对话框打开状态，自动检查用户信息
 watch(
@@ -123,7 +109,6 @@ watch(
 // 检查用户是否已绑定实验板
 async function checkUserBoard() {
   loading.value = true;
-  error.value = "";
   hasBoard.value = false;
   boardInfo.value = null;
 
@@ -139,12 +124,12 @@ async function checkUserBoard() {
         hasBoard.value = true;
       } catch (boardError) {
         console.error("获取实验板信息失败:", boardError);
-        error.value = "获取实验板信息失败，请重试";
+        alert?.error("获取实验板信息失败，请重试");
       }
     }
   } catch (err) {
     console.error("检查用户信息失败:", err);
-    error.value = "检查用户信息失败，请重试";
+    alert?.error("检查用户信息失败，请重试");
   } finally {
     loading.value = false;
   }
@@ -153,24 +138,23 @@ async function checkUserBoard() {
 // 申请实验板
 async function requestBoard() {
   requesting.value = true;
-  error.value = "";
 
   try {
     const client = AuthManager.createAuthenticatedDataClient();
-    const board = await client.getAvailableBoard();
+    const board = await client.getAvailableBoard(undefined);
 
     if (board) {
       boardInfo.value = board;
       hasBoard.value = true;
     } else {
-      error.value = "当前没有可用的实验板，请稍后重试";
+      alert?.error("当前没有可用的实验板，请稍后重试");
     }
   } catch (err: any) {
     console.error("申请实验板失败:", err);
     if (err.status === 404) {
-      error.value = "当前没有可用的实验板，请稍后重试";
+      alert?.error("当前没有可用的实验板，请稍后重试");
     } else {
-      error.value = "申请实验板失败，请重试";
+      alert?.error("申请实验板失败，请重试");
     }
   } finally {
     requesting.value = false;

src/views/Project/VideoStream.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="min-h-screen bg-base-100">
+  <div class="bg-base-100 flex flex-col gap-7">
-    <div class="p-6">
     <!-- 控制面板 -->
     <div class="card bg-base-200 shadow-xl">
       <div class="card-body">
@@ -12,7 +11,7 @@
         <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
           <!-- 服务状态 -->
           <div class="stats shadow">
-              <div class="stat">
+            <div class="stat bg-base-100">
               <div class="stat-figure text-primary">
                 <div
                   class="badge"
@@ -31,7 +30,7 @@
 
           <!-- 流信息 -->
           <div class="stats shadow">
-              <div class="stat">
+            <div class="stat bg-base-100">
               <div class="stat-figure text-secondary">
                 <Video class="w-8 h-8" />
               </div>
@@ -45,7 +44,7 @@
 
           <!-- 连接数 -->
           <div class="stats shadow">
-              <div class="stat">
+            <div class="stat bg-base-100 relative">
               <div class="stat-figure text-accent">
                 <Users class="w-8 h-8" />
               </div>
@@ -54,7 +53,7 @@
                 {{ statusInfo.connectedClients }}
               </div>
               <div class="stat-desc">
-                  <div class="dropdown dropdown-hover">
+                <div class="dropdown dropdown-hover dropdown-top">
                   <div
                     tabindex="0"
                     role="button"
@@ -64,14 +63,14 @@
                   </div>
                   <ul
                     tabindex="0"
-                      class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52"
+                    class="dropdown-content z-20 menu p-2 shadow bg-base-200 rounded-box w-64 max-h-48 overflow-y-auto"
                   >
                     <li
                       v-for="(client, index) in statusInfo.clientEndpoints"
                       :key="index"
                       class="text-xs"
                     >
-                        <a>{{ client }}</a>
+                      <a class="break-all">{{ client }}</a>
                     </li>
                     <li
                       v-if="
@@ -289,7 +288,6 @@
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script setup lang="ts">