feat: 新增 RTSP 畫面到 Dashboard Modals

2025-09-16 11:23:05 +08:00 · 2025-09-16 11:23:05 +08:00 · aa7a136937
commit aa7a136937
parent 0999f8000a
9 changed files with 392 additions and 147 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -21,6 +21,7 @@
        "dayjs": "^1.11.10",
        "echarts": "^5.4.3",
        "flag-icons": "^7.2.3",
+        "hls.js": "^1.6.12",
        "jquery-ui": "^1.14.1",
        "json-schema-generator": "^2.0.6",
        "mqtt": "^5.10.3",
@ -3056,6 +3057,12 @@
      "integrity": "sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==",
      "license": "MIT"
    },
+    "node_modules/hls.js": {
+      "version": "1.6.12",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.12.tgz",
+      "integrity": "sha512-Pz+7IzvkbAht/zXvwLzA/stUHNqztqKvlLbfpq6ZYU68+gZ+CZMlsbQBPUviRap+3IQ41E39ke7Ia+yvhsehEQ==",
+      "license": "Apache-2.0"
+    },
    "node_modules/htmlparser2": {
      "version": "3.10.1",
      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
--- a/package.json
+++ b/package.json
@ -22,6 +22,7 @@
    "dayjs": "^1.11.10",
    "echarts": "^5.4.3",
    "flag-icons": "^7.2.3",
+    "hls.js": "^1.6.12",
    "jquery-ui": "^1.14.1",
    "json-schema-generator": "^2.0.6",
    "mqtt": "^5.10.3",
--- a/src/config/cn.json
+++ b/src/config/cn.json
@ -207,6 +207,9 @@
    "completed": "已完成",
    "worker_id": "工作人员编号",
    "notice": "注意事项",
+    "video_storage_location": "告警影片儲存位置",
+    "copy": "复制",
+    "copied": "已复制！",
    "result_description": "结果描述",
    "upload_file": "上传文件",
    "enable": "启用",
--- a/src/config/tw.json
+++ b/src/config/tw.json
@ -207,6 +207,9 @@
    "completed": "已完成",
    "worker_id": "工作人員編號",
    "notice": "注意事項",
+    "video_storage_location": "告警影片儲存位置",
+    "copy": "複製",
+    "copied": "已複製！",
    "result_description": "結果描述",
    "upload_file": "上傳檔案",
    "enable": "啟用",
--- a/src/config/us.json
+++ b/src/config/us.json
@ -207,6 +207,9 @@
    "completed": "Completed",
    "worker_id": "Worker ID",
    "notice": "Notice",
+    "video_storage_location": "video storage location",
+    "copy": "Copy",
+    "copied": "Copied!",
    "result_description": "Result Description",
    "upload_file": "Upload File",
    "enable": "Enable",
@ -419,12 +422,11 @@
    "json_format_text": "Please paste JSON format data",
    "json_click_text": "Please enter JSON on the left and click the conversion button"
  },
-"rtsp": {
-      "title": "Media Streaming",
-      "start": "Start Detection",
-      "stop": "Stop Detection",
-      "selectPath": "Select Save Path",
-      "displayArea": "RTSP Display Area"
-    }
-
+  "rtsp": {
+    "title": "Media Streaming",
+    "start": "Start Detection",
+    "stop": "Stop Detection",
+    "selectPath": "Select Save Path",
+    "displayArea": "RTSP Display Area"
+  }
 }
--- a/src/views/alert/components/AlertQuery/AlertTableModal.vue
+++ b/src/views/alert/components/AlertQuery/AlertTableModal.vue
@ -1,5 +1,5 @@
 <script setup>
-import { ref, defineProps, watch, inject } from "vue";
+import { ref, defineProps, watch, inject, nextTick } from "vue";
 import dayjs from "dayjs";
 import { postOperationRecord } from "@/apis/alert";
 import * as yup from "yup";
@ -153,6 +153,28 @@ watch(
  },
  { immediate: true }
 );
+
+const videoLocation = ref("https://your-video-storage-path.com/alert-video");
+const showTooltip = ref(false);
+const hasCopiedOnce = ref(false);
+
+async function copyToClipboard() {
+  const text = videoLocation.value;
+  try {
+    await navigator.clipboard.writeText(text);
+
+    // 確保 tooltip 每次都重新觸發
+    showTooltip.value = false;
+    await nextTick();
+    showTooltip.value = true;
+
+    setTimeout(() => {
+      showTooltip.value = false;
+    }, 1500);
+  } catch (err) {
+    console.error("複製失敗:", err);
+  }
+}
 </script>

 <template>
@ -163,7 +185,11 @@ watch(
    width="710"
  >
    <template #modalContent>
-      <form ref="form" class="mt-5 w-full flex flex-wrap justify-between">
+      <form
+        ref="form"
+        class="mt-5 w-full flex flex-wrap justify-between"
+        @submit.prevent
+      >
        <Input
          v-if="formState && formState.formId"
          class="my-2"
@ -286,9 +312,48 @@ watch(
            </span></template
          >
        </Select>
+
+        <!-- 注意事項 -->
        <Textarea :value="formState" name="notice" class="w-full my-2">
          <template #topLeft>{{ $t("alert.notice") }}</template>
        </Textarea>
+
+        <!-- 告警影片儲存位置-->
+        <div class="my-4 w-full">
+          <label class="text-lg">
+            {{ $t("alert.video_storage_location") }}
+          </label>
+          <div class="flex items-center gap-3">
+            <Input
+              class="flex-1"
+              name="videoLocation"
+              :value="videoLocation"
+              readonly
+            />
+            <div class="relative inline-flex items-center">
+              <button
+                type="button"
+                class="btn btn-success"
+                @click.stop="copyToClipboard"
+              >
+                {{ $t("alert.copy") }}
+              </button>
+
+              <transition name="fade">
+                <span
+                  v-if="showTooltip"
+                  class="absolute left-full ml-4 top-1/2 -translate-y-1/2 text-white text-xs px-2 py-1 bg-gray-800 rounded shadow whitespace-nowrap"
+                  role="status"
+                  aria-live="polite"
+                >
+                  {{ $t("alert.copied") }}
+                </span>
+              </transition>
+            </div>
+          </div>
+        </div>
+
+        <!-- 結果描述 -->
        <Textarea :value="formState" name="description" class="w-full my-2">
          <template #topLeft>{{ $t("alert.result_description") }}</template>
        </Textarea>
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@ -100,6 +100,8 @@ const getData = async () => {
            buying_date: device.buying_date,
            created_at: device.created_at,
            bgSize: 50,
+            is_rtsp: device.is_rtsp === true,
+            rtsp_url: device.rtsp_url || "",
          },
        ];
      });
--- a/src/views/dashboard/components/DashboardEffectScatterModal.vue
+++ b/src/views/dashboard/components/DashboardEffectScatterModal.vue
@ -6,10 +6,7 @@ import { useI18n } from "vue-i18n";
 import { twMerge } from "tailwind-merge";

 const { t } = useI18n();
-const currentTab = ref("desktop");
-const changeOpenKey = (key) => {
-  currentTab.value = key;
-};
+
 const props = defineProps({
  data: {
    type: Object,
@ -17,6 +14,16 @@ const props = defineProps({
  },
 });

+const isRtsp = computed(() => props.data?.is_rtsp === true);
+
+const monitorUrl = computed(() => props.data?.rtsp_url || "");
+
+// ------ tab 狀態 / 控制（非 RTSP 時使用）------
+const currentTab = ref("desktop");
+const changeOpenKey = (key) => {
+  currentTab.value = key;
+};
+
 const modal = ref(null);

 // 當 data 有值時自動開啟 modal
@ -24,15 +31,23 @@ watch(
  () => props.data,
  (newData) => {
    if (newData) {
+      console.log("[props.data] =\n", JSON.stringify(props.data, null, 2));
      dashboard_effectScatter_modal.showModal();
+      if (!isRtsp.value) currentTab.value = "desktop";
+      console.debug(
+        "[Modal Debug] is_rtsp:",
+        newData.is_rtsp,
+        "monitorUrl:",
+        monitorUrl.value
+      );
    }
  },
  { immediate: true }
 );

-// 關閉 modal 的處理函數
+// 關閉 modal
 const handleCancel = () => {
-  currentTab.value = "desktop"; // 重置到 desktop tab
+  currentTab.value = "desktop";
  dashboard_effectScatter_modal.close();
 };
 </script>
@ -45,41 +60,233 @@ const handleCancel = () => {
    :onCancel="handleCancel"
    :width="600"
    :draggable="true"
+    modalClass="max-h-[80vh]"
  >
+    <!-- 標題列：RTSP 不顯示分頁鈕；非 RTSP 顯示分頁鈕 -->
    <template #modalTitle>
-      <section class="flex flex-col h-[60vh] gap-4">
-        <!-- 標題固定高度 -->
-        <div class="flex items-center justify-between h-10">
-          <span>{{ props.data?.full_name }}</span>
-          <div class="flex items-center space-x-2">
+      <div class="flex items-center justify-between">
+        <span>{{ props.data?.full_name }}</span>
+
+        <div class="flex items-center space-x-2">
+          <template v-if="!isRtsp">
            <button
              type="button"
-              class="btn-link btn-text-without-border px-2"
-              @click="handleCancel"
+              class="text-base btn-link btn-text-without-border px-2"
+              @click="() => changeOpenKey('desktop')"
            >
              <font-awesome-icon
-                :icon="['fas', 'times']"
-                class="text-[#a5abb1]"
+                :icon="['fas', 'desktop']"
+                size="lg"
+                :class="
+                  twMerge(
+                    currentTab === 'desktop' ? 'text-success' : 'text-[#a5abb1]'
+                  )
+                "
              />
            </button>
-          </div>
+            <button
+              type="button"
+              class="text-base btn-link btn-text-without-border px-2"
+              @click="() => changeOpenKey('image')"
+            >
+              <font-awesome-icon
+                :icon="['fas', 'image']"
+                size="lg"
+                :class="
+                  twMerge(
+                    currentTab === 'image' ? 'text-success' : 'text-[#a5abb1]'
+                  )
+                "
+              />
+            </button>
+            <button
+              type="button"
+              class="text-base btn-link btn-text-without-border px-2"
+              @click="() => changeOpenKey('cog')"
+            >
+              <font-awesome-icon
+                :icon="['fas', 'cog']"
+                size="lg"
+                :class="
+                  twMerge(
+                    currentTab === 'cog' ? 'text-success' : 'text-[#a5abb1]'
+                  )
+                "
+              />
+            </button>
+            <button
+              type="button"
+              class="text-base btn-link btn-text-without-border px-2"
+              @click="() => changeOpenKey('chart')"
+            >
+              <font-awesome-icon
+                :icon="['fas', 'chart-line']"
+                size="lg"
+                :class="
+                  twMerge(
+                    currentTab === 'chart' ? 'text-success' : 'text-[#a5abb1]'
+                  )
+                "
+              />
+            </button>
+          </template>
+
+          <button
+            type="button"
+            class="btn-link btn-text-without-border px-2"
+            @click="handleCancel"
+          >
+            <font-awesome-icon
+              :icon="['fas', 'times']"
+              class="text-[#a5abb1]"
+            />
+          </button>
+        </div>
+      </div>
+    </template>
+
+    <template #modalContent>
+      <!-- RTSP，顯示 iframe -->
+      <div v-if="isRtsp" class="h-[60vh] py-4">
+        <div class="relative bg-black rounded h-full overflow-hidden">
+          <iframe
+            :src="monitorUrl"
+            class="absolute inset-0 w-full h-full"
+            allow="autoplay; fullscreen; picture-in-picture"
+            referrerpolicy="no-referrer"
+          ></iframe>
+        </div>
+      </div>
+
+      <!-- 非 RTSP，顯示四分頁 -->
+      <div v-else class="space-y-4 py-4">
+        <!-- Desktop Tab - 基本資訊 -->
+        <div v-if="currentTab === 'desktop'" class="grid grid-cols-1 gap-4">
+          <table
+            v-if="props.data?.points && props.data.points.length"
+            class="min-w-full bg-gray-700 border text-gray-100"
+          >
+            <thead>
+              <tr class="bg-gray-600">
+                <th class="p-2 border text-left">名稱</th>
+                <th class="p-2 border text-left">點位</th>
+                <th class="p-2 border text-left">數值</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(point, idx) in props.data.points"
+                :key="idx"
+                class="hover:bg-gray-600"
+              >
+                <td class="p-2 border">{{ point.full_name }}</td>
+                <td class="p-2 py-1 border">{{ point.points }}</td>
+                <td class="p-2 py-1 border">{{ point.value }}</td>
+              </tr>
+            </tbody>
+          </table>
        </div>

-        <!-- 黑底填滿剩下高度 -->
-        <div class="flex-1">
-          <div
-            class="bg-black text-xl font-bold rounded h-full flex justify-center items-center"
-          >
-            {{ $t("rtsp.displayArea") }}
-          </div>
+        <!-- Image Tab - 可視化資訊 -->
+        <div v-if="currentTab === 'image'" class="grid grid-cols-1 gap-4">
+          <table class="min-w-full bg-gray-700 border text-gray-100">
+            <thead>
+              <tr class="bg-gray-600">
+                <th class="p-2 border text-left">項目</th>
+                <th class="p-2 border text-left">內容</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="props.data?.icon" class="hover:bg-gray-600">
+                <td class="p-2 border">設備圖示</td>
+                <td class="p-2 border">
+                  <img
+                    :src="props.data.icon"
+                    alt="設備圖示"
+                    class="w-12 h-12"
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
        </div>
-      </section>
+
+        <!-- chart Tab - 圖表資訊 -->
+        <div v-if="currentTab === 'chart'" class="grid grid-cols-1 gap-4">
+          <DashboardEffectScatterModalChart :data="props.data" />
+        </div>
+
+        <!-- Cog Tab - 完整資料 -->
+        <div v-if="currentTab === 'cog'" class="grid grid-cols-1 gap-4">
+          <table class="min-w-full bg-gray-700 border text-gray-100">
+            <thead>
+              <tr class="bg-gray-600">
+                <th class="p-2 border text-left">項目</th>
+                <th class="p-2 border text-left">內容</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="hover:bg-gray-600">
+                <td class="p-2 border">
+                  {{ $t("assetManagement.device_number") }}
+                </td>
+                <td class="p-2 border">{{ props.data.device_number }}</td>
+              </tr>
+              <tr class="hover:bg-gray-600">
+                <td class="p-2 border">
+                  {{ $t("assetManagement.device_name") }}
+                </td>
+                <td class="p-2 border">{{ props.data.full_name }}</td>
+              </tr>
+              <tr class="hover:bg-gray-600">
+                <td class="p-2 border">{{ $t("assetManagement.floor") }}</td>
+                <td class="p-2 border">{{ props.data.floor }}</td>
+              </tr>
+              <tr class="hover:bg-gray-600">
+                <td class="p-2 border">
+                  {{ $t("assetManagement.device_coordinate") }}
+                </td>
+                <td class="p-2 border">{{ props.data.device_coordinate }}</td>
+              </tr>
+              <tr>
+                <td class="p-2 border">
+                  {{ $t("assetManagement.brand_and_modal") }}
+                </td>
+                <td class="p-2 border">
+                  {{ props.data.brand }} / {{ props.data.device_model }}
+                </td>
+              </tr>
+              <tr>
+                <td class="p-2 border">
+                  {{ $t("assetManagement.company_and_contact") }}
+                </td>
+                <td class="p-2 border">
+                  {{ props.data.operation_name }} /
+                  {{ props.data.operation_contact_person }}
+                </td>
+              </tr>
+              <tr>
+                <td class="p-2 border">
+                  {{ $t("assetManagement.buying_date") }}
+                </td>
+                <td class="p-2 border">{{ props.data.buying_date }}</td>
+              </tr>
+              <tr>
+                <td class="p-2 border">
+                  {{ $t("assetManagement.created_at") }}
+                </td>
+                <td class="p-2 border">{{ props.data.created_at }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
    </template>
  </Modal>
 </template>

 <style lang="scss" scoped>
-/* 專門覆蓋 Modal 裡的 min-h-[200px]，讓高度自動撐開 */
+/* 讓 Modal 內容能撐滿高度 */
 :deep(.min-h-\[200px\]) {
  min-height: 0 !important;
  height: 100%;
--- a/src/views/rtsp/Rtsp.vue
+++ b/src/views/rtsp/Rtsp.vue
@ -1,18 +1,21 @@
 <template>
  <section class="min-h-[600px] h-screen">
    <h1 class="text-2xl font-extrabold mb-2">{{ $t("rtsp.title") }}</h1>
+
    <div class="flex h-[80%] gap-4">
-      <!-- 左側 RTSP 顯示區域 -->
-      <div class="w-1/2 flex flex-col custom-border p-4 mb-4">
-        <div
-          class="flex-1 text-xl font-bold bg-black text-white flex items-center rounded justify-center"
-        >
-          {{ $t("rtsp.displayArea") }}
-        </div>
+      <!-- 左側：即時監控（自動填滿容器） -->
+
+      <div class="relative w-full flex-1 rounded border overflow-hidden">
+        <iframe
+          :src="monitorUrl"
+          class="absolute inset-0 w-full h-full"
+          allow="autoplay; fullscreen; picture-in-picture"
+          referrerpolicy="no-referrer"
+        ></iframe>
      </div>

-      <!-- 右側控制區 -->
-      <aside class="w-1/2 flex flex-col gap-8 p-4">
+      <!-- 右側：開始/結束偵測 + 選擇儲存位置 + 下載進度 -->
+      <aside class="w-1/2 flex flex-col gap-6 p-4">
        <div class="flex gap-3">
          <button
            class="btn btn-add w-40"
@ -20,10 +23,6 @@
            :disabled="isStarting || !dirHandle"
            :title="!dirHandle ? '請先選擇儲存資料夾' : ''"
          >
-            <span
-              v-if="isStarting"
-              class="loading loading-spinner loading-sm mr-2"
-            ></span>
            {{ $t("rtsp.start") }}
          </button>
          <button
@ -31,10 +30,6 @@
            @click="stopDetection"
            :disabled="isStopping"
          >
-            <span
-              v-if="isStopping"
-              class="loading loading-spinner loading-sm mr-2"
-            ></span>
            {{ $t("rtsp.stop") }}
          </button>
        </div>
@ -52,24 +47,27 @@
              class="border border-gray-300 rounded px-3 py-2 flex-1"
            />
          </div>
-        </div>
-        <p v-if="!dirHandle" class="text-sm text-red-400">
-          請先選擇儲存資料夾。
-        </p>
+          <p v-if="!dirHandle" class="text-sm text-red-400">
+            請先選擇儲存資料夾。
+          </p>

-        <!-- 下載進度 -->
-        <div v-if="downloadProgress > 0 && downloadProgress < 100" class="mt-2">
-          <div class="text-sm text-gray-600 mb-1">
-            下載中… {{ Math.floor(downloadProgress) }}%
+          <!-- 下載進度 -->
+          <div
+            v-if="downloadProgress > 0 && downloadProgress < 100"
+            class="mt-2"
+          >
+            <div class="text-sm text-gray-600 mb-1">
+              下載中… {{ Math.floor(downloadProgress) }}%
+            </div>
+            <progress
+              class="progress w-full"
+              :value="downloadProgress"
+              max="100"
+            ></progress>
          </div>
-          <progress
-            class="progress w-full"
-            :value="downloadProgress"
-            max="100"
-          ></progress>
-        </div>

-        <p v-if="message" class="text-sm text-gray-700">{{ message }}</p>
+          <p v-if="message" class="text-sm text-gray-700">{{ message }}</p>
+        </div>
      </aside>
    </div>
  </section>
@ -79,14 +77,23 @@
 import axios from "axios";

 export default {
+  name: "Rtsp",
  data() {
    return {
-      savePath: "",
-      dirHandle: null, // File System Access 的目錄 handle
-      directoryName: "", // 顯示用
-      ws: null, // WebSocket
+      // 即時監控（RTSP 轉播）頁面
+      monitorUrl:
+        "http://192.168.0.219:8026/?url=rtsp://admin02:mjmAdmin_99@192.168.0.200:554/stream1?tcp",
+
+      // 儲存位置
+      dirHandle: /** @type {FileSystemDirectoryHandle|null} */ (null),
+      directoryName: "",
+
+      // 錄製控制
+      ws: null,
      isStarting: false,
      isStopping: false,
+
+      // 下載狀態
      downloadProgress: 0,
      message: "",
    };
@ -98,57 +105,35 @@ export default {
    if (this.ws) this.ws.close();
  },
  methods: {
-    // === 1) WebSocket：接收「結束偵測」事件後自動下載 ===
+    // WebSocket：等待後端通知偵測結束 → 下載檔案
    connectWS() {
-      // 視你的後端實際位址而定（支援 wss）
      const WS_URL =
        location.protocol === "https:"
          ? `wss://${location.host}/ws`
          : `ws://${location.host}/ws`;

      this.ws = new WebSocket(WS_URL);
-
-      this.ws.onopen = () => {
-        // this.message = "WebSocket 已連線";
-      };
-
      this.ws.onmessage = async (evt) => {
        try {
          const payload = JSON.parse(evt.data);
-          // 後端在 RTSP 偵測結束時，推播例如：
-          // { type: 'detection_end', filename: '2025-09-11_141500.mp4' }
          if (payload.type === "detection_end") {
            this.message = "偵測結束，開始下載…";
            await this.downloadAndSave(payload.filename);
          }
-        } catch (e) {
-          // 也可能是純文字訊息
-          console.log("WS message:", evt.data);
+        } catch (_) {
+          // 非 JSON 訊息忽略
        }
      };
-
-      this.ws.onclose = () => {
-        // this.message = "WebSocket 已關閉";
-      };
-
-      this.ws.onerror = (err) => {
-        console.error("WebSocket error", err);
-      };
    },

-    // === 2) 選擇資料夾（可直接寫入）===
+    // 使用者選擇儲存資料夾
    async pickDirectory() {
-      if (!window.showDirectoryPicker) {
-        alert(
-          "此瀏覽器不支援選擇資料夾寫入（請改用 Chrome/Edge，或使用桌面版 Electron/Tauri）。"
-        );
-        return;
-      }
+      if (!window.showDirectoryPicker) return;
      try {
-        this.dirHandle = await window.showDirectoryPicker(); // 需 HTTPS 或 localhost
+        this.dirHandle = await window.showDirectoryPicker();
        this.directoryName = this.dirHandle.name;

-        // 要求寫入權限（可先 query，若不允許就 request）
+        // 申請寫入權限
        const perm = await this.dirHandle.queryPermission({
          mode: "readwrite",
        });
@ -159,7 +144,6 @@ export default {
          if (req !== "granted") {
            this.dirHandle = null;
            this.directoryName = "";
-            alert("未授權寫入權限，無法直接存檔。");
          }
        }
      } catch (err) {
@ -167,69 +151,61 @@ export default {
      }
    },

-    // === 3) 控制：開始/停止偵測 ===
+    // 開始/結束偵測（觸發後端錄製流程）
    async startDetection() {
      if (!this.dirHandle) {
        this.message = "請先選擇儲存資料夾後再開始錄製";
-        alert("請先選擇儲存資料夾後再開始錄製");
        return;
      }
-
      this.isStarting = true;
      try {
        await axios.post("/api/start", {
          suggestedName: this.buildSuggestedName(),
-          // ★（可選）把使用者授權的資料夾名稱傳後端作為紀錄/標記
-          // directoryName: this.directoryName,
        });
-        this.message = "偵測中…";
-      } catch (err) {
-        console.error(err);
-        alert("開始偵測失敗");
+        this.message = "已開始偵測…";
+      } catch (e) {
+        console.error(e);
      } finally {
        this.isStarting = false;
      }
    },
-
    async stopDetection() {
      this.isStopping = true;
      try {
        await axios.post("/api/stop");
        this.message = "已要求結束偵測，等待檔案就緒…";
-        // 等 WS 推播 detection_end 後會自動下載
-      } catch (err) {
-        console.error(err);
-        alert("結束偵測失敗");
+      } catch (e) {
+        console.error(e);
      } finally {
        this.isStopping = false;
      }
    },

-    // === 4) 下載並寫入：優先寫進選擇資料夾；否則退回 a.download ===
+    // 下載並寫入選擇的資料夾（若未選則下載到瀏覽器預設下載夾）
    async downloadAndSave(filenameFromServer) {
      try {
        this.downloadProgress = 1;
-
-        // 先打 /api/download（可接受 ?filename=xxx）
        const response = await axios.get("/api/download", {
          params: filenameFromServer ? { filename: filenameFromServer } : {},
          responseType: "blob",
          onDownloadProgress: (evt) => {
-            if (evt.total) {
+            if (evt.total)
              this.downloadProgress = (evt.loaded / evt.total) * 100;
-            }
          },
        });

        const blob = new Blob([response.data], { type: "video/mp4" });
        const finalName = filenameFromServer || this.buildSuggestedName();

-        // 有授權資料夾 → 直接寫檔
        if (this.dirHandle) {
-          await this.saveBlobToDirectory(blob, finalName);
+          const fileHandle = await this.dirHandle.getFileHandle(finalName, {
+            create: true,
+          });
+          const writable = await fileHandle.createWritable();
+          await writable.write(blob);
+          await writable.close();
          this.message = `已儲存：${finalName}`;
        } else {
-          // 無授權 → 退回 a.download（使用者自行決定位置）
          const url = URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.href = url;
@ -241,42 +217,21 @@ export default {
          this.message = `已下載：${finalName}（至瀏覽器預設下載夾）`;
        }
      } catch (err) {
-        console.error("下載/存檔失敗", err);
-        alert("下載或存檔失敗");
+        console.error("下載失敗", err);
      } finally {
        this.downloadProgress = 0;
      }
    },

-    // === 5) 寫 blob 到已授權的資料夾 ===
-    async saveBlobToDirectory(blob, filename) {
-      // 建立或覆寫檔案
-      const fileHandle = await this.dirHandle.getFileHandle(filename, {
-        create: true,
-      });
-      const writable = await fileHandle.createWritable();
-      await writable.write(blob);
-      await writable.close();
-    },
-
-    // UI 舊法顯示用（無法寫入）
-    handlePathSelect(event) {
-      const files = event.target.files;
-      if (files?.length > 0) {
-        const path = files[0].webkitRelativePath.split("/")[0];
-        this.savePath = path; // 只是一個資料夾名稱，不能當成真實路徑寫入
-      }
-    },
-
+    // 檔名範本
    buildSuggestedName() {
      const ts = new Date();
      const pad = (n) => String(n).padStart(2, "0");
-      const name = `${ts.getFullYear()}-${pad(ts.getMonth() + 1)}-${pad(
+      return `record_${ts.getFullYear()}-${pad(ts.getMonth() + 1)}-${pad(
        ts.getDate()
      )}_${pad(ts.getHours())}${pad(ts.getMinutes())}${pad(
        ts.getSeconds()
      )}.mp4`;
-      return `record_${name}`;
    },
  },
 };