From 28af2df093d811f04905ed36ca02154742e96f2a Mon Sep 17 00:00:00 2001
From: SikongJueluo <selfconfusion@gmail.com>
Date: Sat, 12 Jul 2025 18:24:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=B7=A5=E7=A8=8B?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=9A=84=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
 =?UTF-8?q?=EF=BC=8C=E5=8C=85=E6=8B=AC=E5=88=A0=E9=99=A4=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E4=B8=8D=E5=BF=85=E8=A6=81=E7=9A=84=E5=85=83=E7=B4=A0=EF=BC=8C?=
 =?UTF-8?q?=E5=90=8C=E6=97=B6=E4=BD=BF=E7=94=A8storage=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E4=B8=80=E4=BA=9B=E7=95=8C=E9=9D=A2=E5=8F=82=E6=95=B0=E6=96=B9?=
 =?UTF-8?q?=E4=BE=BF=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Project/BottomBar.vue          |  61 ++-
 src/views/Project/Index.vue              |  53 ++-
 src/views/Project/Oscilloscope.vue       | 171 +------
 src/views/Project/RequestBoardDialog.vue |  36 +-
 src/views/Project/VideoStream.vue        | 540 +++++++++++------------
 5 files changed, 387 insertions(+), 474 deletions(-)

diff --git a/src/views/Project/BottomBar.vue b/src/views/Project/BottomBar.vue
index a2252dd..ec525cd 100644
--- a/src/views/Project/BottomBar.vue
+++ b/src/views/Project/BottomBar.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="h-full flex flex-col">
-    <div class="tabs tabs-box flex-shrink-0">
+  <div class="h-full flex flex-col gap-7">
+    <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>
diff --git a/src/views/Project/Index.vue b/src/views/Project/Index.vue
index 7593874..3b721a9 100644
--- a/src/views/Project/Index.vue
+++ b/src/views/Project/Index.vue
@@ -5,17 +5,24 @@
         id="splitter-group-v"
         direction="vertical"
         class="w-full h-full"
+        @layout="handleVerticalSplitterResize"
       >
-        <SplitterPanel id="splitter-group-v-panel-project">
+        <!-- 使用 v-show 替代 v-if -->
+        <SplitterPanel 
+          v-show="!isBottomBarFullscreen"
+          id="splitter-group-v-panel-project"
+          :default-size="verticalSplitterSize"
+        >
           <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"
-          :min-size="15"
-          class="w-full overflow-hidden"
+          :default-size="isBottomBarFullscreen ? 100 : (100 - verticalSplitterSize)"
+          :min-size="isBottomBarFullscreen ? 100 : 15"
+          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("");
 
 // 切换文档面板和属性面板
diff --git a/src/views/Project/Oscilloscope.vue b/src/views/Project/Oscilloscope.vue
index aaa8530..61617b2 100644
--- a/src/views/Project/Oscilloscope.vue
+++ b/src/views/Project/Oscilloscope.vue
@@ -1,53 +1,5 @@
 <template>
-  <div
-    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="bg-base-100 flex flex-col">
     <!-- 波形展示 -->
     <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 { useStorage } from "@vueuse/core";
-import { z } from "zod";
-import {
-  Settings,
-  Save,
-  RotateCcw,
-  Activity,
-} from "lucide-vue-next";
+import { 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({
-  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 },
-);
+// 使用全局设备配置
+const equipments = useEquipments();
 </script>
diff --git a/src/views/Project/RequestBoardDialog.vue b/src/views/Project/RequestBoardDialog.vue
index 9723921..febe502 100644
--- a/src/views/Project/RequestBoardDialog.vue
+++ b/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;
diff --git a/src/views/Project/VideoStream.vue b/src/views/Project/VideoStream.vue
index 62b2cfb..764a4e2 100644
--- a/src/views/Project/VideoStream.vue
+++ b/src/views/Project/VideoStream.vue
@@ -1,294 +1,292 @@
 <template>
-  <div class="min-h-screen bg-base-100">
-    <div class="p-6">
-      <!-- 控制面板 -->
-      <div class="card bg-base-200 shadow-xl">
-        <div class="card-body">
-          <h2 class="card-title text-primary">
-            <Settings class="w-6 h-6" />
-            控制面板
-          </h2>
+  <div class="bg-base-100 flex flex-col gap-7">
+    <!-- 控制面板 -->
+    <div class="card bg-base-200 shadow-xl">
+      <div class="card-body">
+        <h2 class="card-title text-primary">
+          <Settings class="w-6 h-6" />
+          控制面板
+        </h2>
 
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <!-- 服务状态 -->
-            <div class="stats shadow">
-              <div class="stat">
-                <div class="stat-figure text-primary">
-                  <div
-                    class="badge"
-                    :class="
-                      statusInfo.isRunning ? 'badge-success' : 'badge-error'
-                    "
-                  >
-                    {{ statusInfo.isRunning ? "运行中" : "已停止" }}
-                  </div>
-                </div>
-                <div class="stat-title">服务状态</div>
-                <div class="stat-value text-primary">HTTP</div>
-                <div class="stat-desc">端口: {{ statusInfo.serverPort }}</div>
-              </div>
-            </div>
-
-            <!-- 流信息 -->
-            <div class="stats shadow">
-              <div class="stat">
-                <div class="stat-figure text-secondary">
-                  <Video class="w-8 h-8" />
-                </div>
-                <div class="stat-title">视频规格</div>
-                <div class="stat-value text-secondary">
-                  {{ streamInfo.frameWidth }}×{{ streamInfo.frameHeight }}
-                </div>
-                <div class="stat-desc">{{ streamInfo.frameRate }} FPS</div>
-              </div>
-            </div>
-
-            <!-- 连接数 -->
-            <div class="stats shadow">
-              <div class="stat">
-                <div class="stat-figure text-accent">
-                  <Users class="w-8 h-8" />
-                </div>
-                <div class="stat-title">连接数</div>
-                <div class="stat-value text-accent">
-                  {{ statusInfo.connectedClients }}
-                </div>
-                <div class="stat-desc">
-                  <div class="dropdown dropdown-hover">
-                    <div
-                      tabindex="0"
-                      role="button"
-                      class="text-xs underline cursor-help"
-                    >
-                      查看客户端
-                    </div>
-                    <ul
-                      tabindex="0"
-                      class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52"
-                    >
-                      <li
-                        v-for="(client, index) in statusInfo.clientEndpoints"
-                        :key="index"
-                        class="text-xs"
-                      >
-                        <a>{{ client }}</a>
-                      </li>
-                      <li
-                        v-if="
-                          !statusInfo.clientEndpoints ||
-                          statusInfo.clientEndpoints.length === 0
-                        "
-                      >
-                        <a class="text-xs opacity-50">无活跃连接</a>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 操作按钮 -->
-          <div class="card-actions justify-end mt-4">
-            <button
-              class="btn btn-outline btn-primary"
-              @click="configCamera"
-              :dsiabled="configing"
-            >
-              <RefreshCw v-if="configing" class="animate-spin h-4 w-4 mr-2" />
-              <CogIcon v-else class="h-4 w-4 mr-2" />
-              {{ configing ? "配置中..." : "配置摄像头" }}
-            </button>
-            <button
-              class="btn btn-outline btn-primary"
-              @click="refreshStatus"
-              :disabled="loading"
-            >
-              <RefreshCw v-if="loading" class="animate-spin h-4 w-4 mr-2" />
-              <RefreshCw v-else class="h-4 w-4 mr-2" />
-              {{ loading ? "刷新中..." : "刷新状态" }}
-            </button>
-            <button
-              class="btn btn-primary"
-              @click="testConnection"
-              :disabled="testing"
-            >
-              <RefreshCw v-if="testing" class="animate-spin h-4 w-4 mr-2" />
-              <TestTube v-else class="h-4 w-4 mr-2" />
-              {{ testing ? "测试中..." : "测试连接" }}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- 视频预览区域 -->
-      <div class="card bg-base-200 shadow-xl">
-        <div class="card-body">
-          <h2 class="card-title text-primary">
-            <Video class="w-6 h-6" />
-            视频预览
-          </h2>
-
-          <div
-            class="relative bg-black rounded-lg overflow-hidden"
-            style="aspect-ratio: 4/3"
-          >
-            <!-- 视频播放器 - 使用img标签直接显示MJPEG流 -->
-            <div
-              v-show="isPlaying"
-              class="w-full h-full flex items-center justify-center"
-            >
-              <img
-                :src="currentVideoSource"
-                alt="视频流"
-                class="max-w-full max-h-full object-contain"
-                @error="handleVideoError"
-                @load="handleVideoLoad"
-              />
-            </div>
-
-            <!-- 错误信息显示 -->
-            <div
-              v-if="hasVideoError"
-              class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70"
-            >
-              <div class="card bg-error text-white shadow-lg w-full max-w-lg">
-                <div class="card-body">
-                  <h3 class="card-title flex items-center gap-2">
-                    <AlertTriangle class="h-6 w-6" />
-                    视频流加载失败
-                  </h3>
-                  <p>无法连接到视频服务器，请检查以下内容：</p>
-                  <ul class="list-disc list-inside">
-                    <li>视频流服务是否已启动</li>
-                    <li>网络连接是否正常</li>
-                    <li>端口 {{ statusInfo.serverPort }} 是否可访问</li>
-                  </ul>
-                  <div class="card-actions justify-end mt-2">
-                    <button
-                      class="btn btn-sm btn-outline btn-primary"
-                      @click="tryReconnect"
-                    >
-                      重试连接
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- 占位符 -->
-            <div
-              v-show="!isPlaying && !hasVideoError"
-              class="absolute inset-0 flex items-center justify-center text-white"
-            >
-              <div class="text-center">
-                <Video class="w-16 h-16 mx-auto mb-4 opacity-50" />
-                <p class="text-lg opacity-75">{{ videoStatus }}</p>
-                <p class="text-sm opacity-60 mt-2">
-                  点击"播放视频流"按钮开始查看实时视频
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <!-- 视频控制 -->
-          <div class="flex justify-between items-center mt-4">
-            <div class="text-sm text-base-content/70">
-              流地址:
-              <code class="bg-base-300 px-2 py-1 rounded">{{
-                streamInfo.mjpegUrl
-              }}</code>
-            </div>
-            <div class="space-x-2">
-              <div class="dropdown dropdown-hover dropdown-top dropdown-end">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <!-- 服务状态 -->
+          <div class="stats shadow">
+            <div class="stat bg-base-100">
+              <div class="stat-figure text-primary">
                 <div
-                  tabindex="0"
-                  role="button"
-                  class="btn btn-sm btn-outline btn-accent"
+                  class="badge"
+                  :class="
+                    statusInfo.isRunning ? 'badge-success' : 'badge-error'
+                  "
                 >
-                  <MoreHorizontal class="w-4 h-4 mr-1" />
-                  更多功能
+                  {{ statusInfo.isRunning ? "运行中" : "已停止" }}
+                </div>
+              </div>
+              <div class="stat-title">服务状态</div>
+              <div class="stat-value text-primary">HTTP</div>
+              <div class="stat-desc">端口: {{ statusInfo.serverPort }}</div>
+            </div>
+          </div>
+
+          <!-- 流信息 -->
+          <div class="stats shadow">
+            <div class="stat bg-base-100">
+              <div class="stat-figure text-secondary">
+                <Video class="w-8 h-8" />
+              </div>
+              <div class="stat-title">视频规格</div>
+              <div class="stat-value text-secondary">
+                {{ streamInfo.frameWidth }}×{{ streamInfo.frameHeight }}
+              </div>
+              <div class="stat-desc">{{ streamInfo.frameRate }} FPS</div>
+            </div>
+          </div>
+
+          <!-- 连接数 -->
+          <div class="stats shadow">
+            <div class="stat bg-base-100 relative">
+              <div class="stat-figure text-accent">
+                <Users class="w-8 h-8" />
+              </div>
+              <div class="stat-title">连接数</div>
+              <div class="stat-value text-accent">
+                {{ statusInfo.connectedClients }}
+              </div>
+              <div class="stat-desc">
+                <div class="dropdown dropdown-hover dropdown-top">
+                  <div
+                    tabindex="0"
+                    role="button"
+                    class="text-xs underline cursor-help"
+                  >
+                    查看客户端
+                  </div>
+                  <ul
+                    tabindex="0"
+                    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 class="break-all">{{ client }}</a>
+                    </li>
+                    <li
+                      v-if="
+                        !statusInfo.clientEndpoints ||
+                        statusInfo.clientEndpoints.length === 0
+                      "
+                    >
+                      <a class="text-xs opacity-50">无活跃连接</a>
+                    </li>
+                  </ul>
                 </div>
-                <ul
-                  tabindex="0"
-                  class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52"
-                >
-                  <li>
-                    <a @click="openInNewTab(streamInfo.htmlUrl)">
-                      <ExternalLink class="w-4 h-4" />
-                      在新标签打开视频页面
-                    </a>
-                  </li>
-                  <li>
-                    <a @click="takeSnapshot">
-                      <Camera class="w-4 h-4" />
-                      获取并下载快照
-                    </a>
-                  </li>
-                  <li>
-                    <a @click="copyToClipboard(streamInfo.mjpegUrl)">
-                      <Copy class="w-4 h-4" />
-                      复制MJPEG地址
-                    </a>
-                  </li>
-                </ul>
               </div>
-              <button
-                class="btn btn-success btn-sm"
-                @click="startStream"
-                :disabled="isPlaying"
-              >
-                <Play class="w-4 h-4 mr-1" />
-                播放视频流
-              </button>
-              <button
-                class="btn btn-error btn-sm"
-                @click="stopStream"
-                :disabled="!isPlaying"
-              >
-                <Square class="w-4 h-4 mr-1" />
-                停止视频流
-              </button>
             </div>
           </div>
         </div>
+
+        <!-- 操作按钮 -->
+        <div class="card-actions justify-end mt-4">
+          <button
+            class="btn btn-outline btn-primary"
+            @click="configCamera"
+            :dsiabled="configing"
+          >
+            <RefreshCw v-if="configing" class="animate-spin h-4 w-4 mr-2" />
+            <CogIcon v-else class="h-4 w-4 mr-2" />
+            {{ configing ? "配置中..." : "配置摄像头" }}
+          </button>
+          <button
+            class="btn btn-outline btn-primary"
+            @click="refreshStatus"
+            :disabled="loading"
+          >
+            <RefreshCw v-if="loading" class="animate-spin h-4 w-4 mr-2" />
+            <RefreshCw v-else class="h-4 w-4 mr-2" />
+            {{ loading ? "刷新中..." : "刷新状态" }}
+          </button>
+          <button
+            class="btn btn-primary"
+            @click="testConnection"
+            :disabled="testing"
+          >
+            <RefreshCw v-if="testing" class="animate-spin h-4 w-4 mr-2" />
+            <TestTube v-else class="h-4 w-4 mr-2" />
+            {{ testing ? "测试中..." : "测试连接" }}
+          </button>
+        </div>
       </div>
+    </div>
 
-      <!-- 日志区域 -->
-      <div class="card bg-base-200 shadow-xl">
-        <div class="card-body">
-          <h2 class="card-title text-primary">
-            <FileText class="w-6 h-6" />
-            操作日志
-          </h2>
+    <!-- 视频预览区域 -->
+    <div class="card bg-base-200 shadow-xl">
+      <div class="card-body">
+        <h2 class="card-title text-primary">
+          <Video class="w-6 h-6" />
+          视频预览
+        </h2>
 
-          <div class="bg-base-300 rounded-lg p-4 h-48 overflow-y-auto">
-            <div
-              v-for="(log, index) in logs"
-              :key="index"
-              class="text-sm font-mono mb-1"
-            >
-              <span class="text-base-content/50"
-                >[{{ formatTime(log.time) }}]</span
-              >
-              <span :class="getLogClass(log.level)">{{ log.message }}</span>
-            </div>
-            <div
-              v-if="logs.length === 0"
-              class="text-base-content/50 text-center py-8"
-            >
-              暂无日志记录
+        <div
+          class="relative bg-black rounded-lg overflow-hidden"
+          style="aspect-ratio: 4/3"
+        >
+          <!-- 视频播放器 - 使用img标签直接显示MJPEG流 -->
+          <div
+            v-show="isPlaying"
+            class="w-full h-full flex items-center justify-center"
+          >
+            <img
+              :src="currentVideoSource"
+              alt="视频流"
+              class="max-w-full max-h-full object-contain"
+              @error="handleVideoError"
+              @load="handleVideoLoad"
+            />
+          </div>
+
+          <!-- 错误信息显示 -->
+          <div
+            v-if="hasVideoError"
+            class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70"
+          >
+            <div class="card bg-error text-white shadow-lg w-full max-w-lg">
+              <div class="card-body">
+                <h3 class="card-title flex items-center gap-2">
+                  <AlertTriangle class="h-6 w-6" />
+                  视频流加载失败
+                </h3>
+                <p>无法连接到视频服务器，请检查以下内容：</p>
+                <ul class="list-disc list-inside">
+                  <li>视频流服务是否已启动</li>
+                  <li>网络连接是否正常</li>
+                  <li>端口 {{ statusInfo.serverPort }} 是否可访问</li>
+                </ul>
+                <div class="card-actions justify-end mt-2">
+                  <button
+                    class="btn btn-sm btn-outline btn-primary"
+                    @click="tryReconnect"
+                  >
+                    重试连接
+                  </button>
+                </div>
+              </div>
             </div>
           </div>
 
-          <div class="card-actions justify-end mt-2">
-            <button class="btn btn-outline btn-sm" @click="clearLogs">
-              清空日志
+          <!-- 占位符 -->
+          <div
+            v-show="!isPlaying && !hasVideoError"
+            class="absolute inset-0 flex items-center justify-center text-white"
+          >
+            <div class="text-center">
+              <Video class="w-16 h-16 mx-auto mb-4 opacity-50" />
+              <p class="text-lg opacity-75">{{ videoStatus }}</p>
+              <p class="text-sm opacity-60 mt-2">
+                点击"播放视频流"按钮开始查看实时视频
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- 视频控制 -->
+        <div class="flex justify-between items-center mt-4">
+          <div class="text-sm text-base-content/70">
+            流地址:
+            <code class="bg-base-300 px-2 py-1 rounded">{{
+              streamInfo.mjpegUrl
+            }}</code>
+          </div>
+          <div class="space-x-2">
+            <div class="dropdown dropdown-hover dropdown-top dropdown-end">
+              <div
+                tabindex="0"
+                role="button"
+                class="btn btn-sm btn-outline btn-accent"
+              >
+                <MoreHorizontal class="w-4 h-4 mr-1" />
+                更多功能
+              </div>
+              <ul
+                tabindex="0"
+                class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52"
+              >
+                <li>
+                  <a @click="openInNewTab(streamInfo.htmlUrl)">
+                    <ExternalLink class="w-4 h-4" />
+                    在新标签打开视频页面
+                  </a>
+                </li>
+                <li>
+                  <a @click="takeSnapshot">
+                    <Camera class="w-4 h-4" />
+                    获取并下载快照
+                  </a>
+                </li>
+                <li>
+                  <a @click="copyToClipboard(streamInfo.mjpegUrl)">
+                    <Copy class="w-4 h-4" />
+                    复制MJPEG地址
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <button
+              class="btn btn-success btn-sm"
+              @click="startStream"
+              :disabled="isPlaying"
+            >
+              <Play class="w-4 h-4 mr-1" />
+              播放视频流
+            </button>
+            <button
+              class="btn btn-error btn-sm"
+              @click="stopStream"
+              :disabled="!isPlaying"
+            >
+              <Square class="w-4 h-4 mr-1" />
+              停止视频流
             </button>
           </div>
         </div>
       </div>
     </div>
+
+    <!-- 日志区域 -->
+    <div class="card bg-base-200 shadow-xl">
+      <div class="card-body">
+        <h2 class="card-title text-primary">
+          <FileText class="w-6 h-6" />
+          操作日志
+        </h2>
+
+        <div class="bg-base-300 rounded-lg p-4 h-48 overflow-y-auto">
+          <div
+            v-for="(log, index) in logs"
+            :key="index"
+            class="text-sm font-mono mb-1"
+          >
+            <span class="text-base-content/50"
+              >[{{ formatTime(log.time) }}]</span
+            >
+            <span :class="getLogClass(log.level)">{{ log.message }}</span>
+          </div>
+          <div
+            v-if="logs.length === 0"
+            class="text-base-content/50 text-center py-8"
+          >
+            暂无日志记录
+          </div>
+        </div>
+
+        <div class="card-actions justify-end mt-2">
+          <button class="btn btn-outline btn-sm" @click="clearLogs">
+            清空日志
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>