From ece55949f88d704d044e3722607de0f07139f818 Mon Sep 17 00:00:00 2001
From: liuhaodong <hdlewis@163.com>
Date: Thu, 20 Aug 2026 14:45:05 +0800
Subject: [PATCH] feat: connect device, task, and live views

Wire the frontend to device management, task execution, video downloads, and live session controls.
---
 src/api/live.js               |  17 +++
 src/api/request.js            |   4 +-
 src/components/LivePlayer.vue |  27 +++++
 src/styles/prototype.css      |  12 +-
 src/views/Devices.vue         |  15 +++
 src/views/Media.vue           |  20 +++-
 src/views/Monitor.vue         |  75 +++++++++++-
 src/views/Tasks.vue           | 207 ++++++++++++++++++++++++++++------
 8 files changed, 337 insertions(+), 40 deletions(-)
 create mode 100644 src/api/live.js
 create mode 100644 src/components/LivePlayer.vue

diff --git a/src/api/live.js b/src/api/live.js
new file mode 100644
index 0000000..e7e789c
--- /dev/null
+++ b/src/api/live.js
@@ -0,0 +1,17 @@
+import request from './request'
+
+export function joinLive(dockId, payload = {}) {
+  return request.post(`/v1/live/${dockId}/sessions`, payload)
+}
+
+export function getLivePlayURL(dockId) {
+  return request.get(`/v1/live/${dockId}/play-url`)
+}
+
+export function heartbeatLive(dockId, sessionId) {
+  return request.post(`/v1/live/${dockId}/sessions/${sessionId}/heartbeat`)
+}
+
+export function leaveLive(dockId, sessionId) {
+  return request.delete(`/v1/live/${dockId}/sessions/${sessionId}/viewers/me`)
+}
diff --git a/src/api/request.js b/src/api/request.js
index 79f6090..800152d 100644
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -36,7 +36,9 @@ request.interceptors.response.use(
     } else if (status === 403) {
       useUiStore().toast(data?.msg || '无权限访问')
     } else {
-      useUiStore().toast(data?.msg || error.message || '网络错误')
+      const message = data?.msg || error.message || '网络错误'
+      useUiStore().toast(message)
+      return Promise.reject(new Error(message))
     }
     return Promise.reject(error)
   }
diff --git a/src/components/LivePlayer.vue b/src/components/LivePlayer.vue
new file mode 100644
index 0000000..237c602
--- /dev/null
+++ b/src/components/LivePlayer.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="live-player">
+    <video v-if="playable" ref="video" controls autoplay playsinline :src="playUrl" @error="$emit('error')"></video>
+    <div v-else class="video-empty">
+      <span>{{ message }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  playUrl: { type: String, default: '' },
+  phase: { type: String, default: '' }
+})
+
+defineEmits(['error'])
+
+const playable = computed(() => props.playUrl && !props.playUrl.startsWith('fake://'))
+const message = computed(() => {
+  if (props.phase === 'starting' || props.phase === 'reconnecting') return '正在等待直播流就绪'
+  if (props.phase === 'failed') return '直播启动失败'
+  if (props.playUrl?.startsWith('fake://')) return '控制面已验证，未配置本地媒体流'
+  return '暂无实时视频数据'
+})
+</script>
diff --git a/src/styles/prototype.css b/src/styles/prototype.css
index 34c36f7..8f89650 100644
--- a/src/styles/prototype.css
+++ b/src/styles/prototype.css
@@ -422,7 +422,17 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width:
 .task-schedule-fields[hidden] { display: none; }.task-schedule-fields { margin-top: 2px; }
 .weekday-picker { height: 38px; padding: 3px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; border-radius: 4px; background: #edf1f4; }
 .weekday-picker button { min-width: 0; border-radius: 3px; color: #65737f; background: transparent; font-size: 11px; }.weekday-picker button:hover { color: #2869aa; }.weekday-picker button.active { color: #fff; background: #2c72bd; box-shadow: 0 1px 4px rgba(23,66,108,.18); }
-.task-video-settings { margin: 3px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
+.task-dialog .mode-segment { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.task-dialog .mode-segment button { min-width: 0; padding: 0 4px; white-space: nowrap; }
+.task-dialog .task-schedule-settings { margin-bottom: 3px; }
+.task-dialog .task-schedule-settings > label:last-child { margin-bottom: 12px; }
+.task-dialog .task-schedule-settings label small { color: var(--muted); font-size: 10px; line-height: 1.4; }
+.task-dialog .task-schedule-settings input[type='text'] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+@media (max-width: 560px) {
+  .task-dialog .mode-segment { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; min-height: 72px; }
+  .task-dialog .mode-segment button { min-height: 30px; }
+}
+
 .task-video-title { height: 35px; display: flex; align-items: center; justify-content: space-between; }.task-video-title strong { font-size: 12px; }.task-video-title span { color: var(--muted); font-size: 10px; }
 .add-dock-dialog .task-video-option { min-height: 48px; margin: 0; padding: 7px 2px; display: grid; grid-template-columns: 1fr 34px; align-items: center; gap: 10px; border-top: 1px solid #edf0f2; cursor: pointer; }
 .task-video-option > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.task-video-option strong { color: #3c4d59; font-size: 11px; }.add-dock-dialog .task-video-option small { color: var(--muted); font-size: 10px; }
diff --git a/src/views/Devices.vue b/src/views/Devices.vue
index 2d4503a..b108da8 100644
--- a/src/views/Devices.vue
+++ b/src/views/Devices.vue
@@ -88,6 +88,7 @@
                   <button v-if="!isAdmin" @click.stop="openFirmwareUpgrade(d.id)">固件升级</button>
                   <button v-if="!isAdmin" @click.stop="goControl(d.id)">远程控制</button>
                   <button @click.stop="goDetail(d.id)">详情</button>
+                  <button v-if="!isAdmin" @click.stop="deleteDock(d)">删除</button>
                 </div>
               </td>
             </tr>
@@ -184,6 +185,7 @@
         </section>
 
         <footer>
+          <button v-if="!isAdmin && drawerRecord.kind === 'dock'" class="plain-command danger-command" @click="deleteDock(drawerRecord)">删除机巢</button>
           <button v-if="!isAdmin && drawerRecord.kind === 'dock'" class="plain-command" @click="openEditDock(drawerRecord)">编辑信息</button>
           <button class="primary-command" @click="goDetail(drawerRecord.id)">查看完整详情</button>
         </footer>
@@ -403,6 +405,19 @@ function openEditDock(dock) {
   editDockVisible.value = true
 }
 
+async function deleteDock(dock) {
+  const ok = await ui.confirm(`确认硬删除机巢「${dock.name}」？`, '删除后机巢及其关联设备数据将永久移除，且无法恢复。')
+  if (!ok) return
+  try {
+    await request.delete(`/v1/docks/${dock.id}`)
+    drawerOpen.value = false
+    ui.toast('机巢已永久删除')
+    await devices.load()
+  } catch (e) {
+    ui.toast(e.message || '删除机巢失败')
+  }
+}
+
 async function handleDockSaved() {
   editDockVisible.value = false
   try {
diff --git a/src/views/Media.vue b/src/views/Media.vue
index d30dda3..c763543 100644
--- a/src/views/Media.vue
+++ b/src/views/Media.vue
@@ -26,7 +26,7 @@
           <article v-for="s in liveStreams" :key="s.id">
             <div class="media-visual" :class="s.visualClass">
               <span class="live-corner"><i></i>LIVE</span>
-              <button @click="ui.toast('打开直播：' + s.name)"><svg><use href="#i-play" /></svg></button>
+              <button @click="openLive(s)"><svg><use href="#i-play" /></svg></button>
               <small>{{ s.source }}</small>
             </div>
             <div class="media-card-copy">
@@ -108,8 +108,9 @@ async function load() {
       request.get('/v1/live', { params: { pageNum: 1, pageSize: 100 } }),
       request.get('/v1/videos', { params: { pageNum: 1, pageSize: 100 } })
     ])
-    liveStreams.value = (livePage?.records || []).map((s) => ({
+    liveStreams.value = (livePage?.records || []).filter((s) => ['starting', 'streaming', 'reconnecting'].includes(s.phase)).map((s) => ({
       id: s.id,
+      dockId: s.dockId,
       name: s.dockId,
       desc: s.streamName ? `${s.streamName} · ${s.provider}` : s.provider,
       source: s.streamName || '--',
@@ -129,6 +130,21 @@ async function load() {
 
 onMounted(load)
 
+async function openLive(stream) {
+  try {
+    const result = await request.post(`/v1/live/${stream.dockId}/sessions`)
+    if (result?.session?.phase === 'streaming') {
+      const play = await request.get(`/v1/live/${stream.dockId}/play-url`)
+      if (play?.playUrl && !play.playUrl.startsWith('fake://')) window.open(play.playUrl, '_blank')
+      else ui.toast('控制面已验证，当前未配置可播放媒体流')
+    } else {
+      ui.toast('直播正在启动，请稍后重试')
+    }
+  } catch (e) {
+    ui.toast(e.message || '打开直播失败')
+  }
+}
+
 async function download(v) {
   try {
     const res = await request.post(`/v1/videos/${v.id}/download`)
diff --git a/src/views/Monitor.vue b/src/views/Monitor.vue
index f7ec6a9..028b26a 100644
--- a/src/views/Monitor.vue
+++ b/src/views/Monitor.vue
@@ -130,10 +130,12 @@
         <section v-if="!isDrone" class="video-section">
           <div class="section-title">
             <h3>实时画面</h3>
-            <span class="video-unavailable">暂无视频流</span>
+            <span class="video-unavailable">{{ livePhaseText }}</span>
           </div>
-          <div class="video-frame video-empty">
-            <span>暂无实时视频数据</span>
+          <LivePlayer :play-url="live.playUrl" :phase="live.session?.phase" @error="ui.toast('视频播放失败')" />
+          <div class="video-actions">
+            <button v-if="!live.session" type="button" @click="openLive">打开实时画面</button>
+            <button v-else type="button" @click="closeLive">关闭实时画面</button>
           </div>
         </section>
 
@@ -244,12 +246,14 @@
 </template>
 
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { useDeviceStore } from '../store/devices'
 import { useUiStore } from '../store/ui'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '../store/user'
+import LivePlayer from '../components/LivePlayer.vue'
+import { getLivePlayURL, heartbeatLive, joinLive, leaveLive } from '../api/live'
 
 const devices = useDeviceStore()
 const ui = useUiStore()
@@ -259,6 +263,7 @@ const userStore = useUserStore()
 const isAdmin = computed(() => userStore.isAdmin())
 
 const selectedId = ref(null)
+const live = reactive({ session: null, dockId: '', playUrl: '', heartbeatTimer: null })
 const filter = ref('all')
 const search = ref('')
 const controlExpanded = ref(false)
@@ -302,6 +307,8 @@ onMounted(async () => {
   }
 })
 
+onBeforeUnmount(() => { closeLive() })
+
 const selectedAsset = computed(() => (selectedId.value ? devices.asset(selectedId.value) : null))
 const isDrone = computed(() => selectedAsset.value?.type === 'drone')
 const record = computed(() => (selectedId.value ? devices.record(selectedId.value) : null))
@@ -310,6 +317,66 @@ const selectedDrone = computed(() => (isDrone.value ? record.value : devices.dro
 const selectedDock = computed(() => (isDrone.value ? devices.docks.find((d) => d.dockId === record.value?.dockId) || null : record.value))
 const selectedDockEnvironment = computed(() => selectedDock.value?.environment || null)
 const hasEnvironment = computed(() => Object.values(selectedDockEnvironment.value || {}).some((value) => value != null && value !== ''))
+const livePhaseText = computed(() => {
+  if (!live.session) return '未打开'
+  const phase = live.session.phase
+  if (phase === 'streaming') return live.playUrl.startsWith('fake://') ? '模拟直播已就绪' : '直播中'
+  if (phase === 'starting') return '启动中'
+  if (phase === 'reconnecting') return '重连中'
+  if (phase === 'stopping') return '停止中'
+  if (phase === 'failed') return '启动失败'
+  return '已停止'
+})
+
+async function openLive() {
+  const dockId = selectedDock.value?.dockId
+  if (!dockId) return
+  try {
+    const result = await joinLive(dockId)
+    live.session = result.session
+    live.dockId = dockId
+    scheduleLiveHeartbeat(result.leaseExpiresAt)
+    if (result.session.phase === 'streaming') await refreshPlayURL()
+  } catch (e) {
+    ui.toast(e.message || '打开直播失败')
+  }
+}
+
+async function refreshPlayURL() {
+  if (!live.dockId) return
+  const play = await getLivePlayURL(live.dockId)
+  live.playUrl = play.playUrl || ''
+}
+
+function scheduleLiveHeartbeat(expiresAt) {
+  window.clearTimeout(live.heartbeatTimer)
+  const delay = Math.max(5000, (Number(expiresAt) * 1000 - Date.now()) / 2)
+  live.heartbeatTimer = window.setTimeout(async () => {
+    try {
+      const result = await heartbeatLive(live.dockId, live.session.id)
+      live.session = result.session
+      scheduleLiveHeartbeat(result.leaseExpiresAt)
+      if (result.session.phase === 'streaming' && !live.playUrl) await refreshPlayURL()
+    } catch (e) {
+      ui.toast(e.message || '直播观看已结束')
+      await closeLive(false)
+    }
+  }, delay)
+}
+
+async function closeLive(sendRequest = true) {
+  window.clearTimeout(live.heartbeatTimer)
+  const session = live.session
+  const dockId = live.dockId
+  live.session = null
+  live.dockId = ''
+  live.playUrl = ''
+  if (sendRequest && session && dockId) {
+    try {
+      await leaveLive(dockId, session.id)
+    } catch (_) {}
+  }
+}
 
 function displayWithUnit(value, unit) {
   return value == null || value === '' ? '--' : `${value}${unit}`
diff --git a/src/views/Tasks.vue b/src/views/Tasks.vue
index 630e487..46b9473 100644
--- a/src/views/Tasks.vue
+++ b/src/views/Tasks.vue
@@ -59,7 +59,7 @@
                 <td><span class="media-policy" :class="t.videoPolicyClass">{{ t.videoPolicy }}</span></td>
                 <td><span class="table-status" :class="t.statusClass"><i></i>{{ t.status }}</span></td>
                 <td>{{ t.lastResult }}</td>
-                <td><div class="row-actions"><button v-if="t.statusClass === 'pending'" @click="ui.toast('执行任务')">立即执行</button><button v-else @click="ui.toast('任务详情已打开')">查看</button><button v-if="t.videoPolicyClass === 'record'" @click="ui.toast('任务完成后可下载原始视频')">下载原始视频</button></div></td>
+                <td><div class="row-actions"><button v-if="canExecuteTask(t)" @click="executeTask(t)">立即执行</button><button @click="deleteTask(t)">删除</button></div></td>
               </tr>
             </tbody>
           </table>
@@ -71,7 +71,7 @@
       <div class="business-panel" :class="{ active: view === 'records' }">
         <div class="business-toolbar">
           <div>
-            <select v-model="execFilter"><option value="">全部设备</option><option v-for="d in devices" :key="d.id" :value="d.name">{{ d.name }}</option></select>
+            <select v-model="execFilter"><option value="">全部设备</option><option v-for="d in devices" :key="d.id" :value="d.dockId || d.droneSn">{{ d.name }}</option></select>
             <div class="business-search"><svg><use href="#i-search" /></svg><input v-model="execSearch" type="text" placeholder="搜索执行记录" /></div>
           </div>
         </div>
@@ -99,7 +99,7 @@
                   <td>{{ r.duration }}</td>
                   <td>{{ r.collect }}</td>
                   <td><span class="table-status" :class="r.statusClass"><i></i>{{ r.result }}</span></td>
-                  <td><button class="table-text-action" :disabled="r.statusClass === 'mission'" @click="goReplay(r)">{{ r.statusClass === 'mission' ? '执行中' : '轨迹回放' }}</button></td>
+                  <td><div class="row-actions"><button class="table-text-action" :disabled="r.statusClass === 'mission'" @click="goReplay(r)">{{ r.statusClass === 'mission' ? '执行中' : '轨迹回放' }}</button><button v-if="r.rawVideoId" class="table-text-action" :disabled="r.rawVideoStatus !== 'ready'" @click="downloadRawVideo(r)">{{ r.rawVideoStatus === 'ready' ? '下载原视频' : '视频处理中' }}</button></div></td>
                 </tr>
               </tbody>
             </table>
@@ -185,11 +185,25 @@
               </select>
             </label>
           </div>
+          <div class="task-schedule-settings">
+            <div class="task-video-title"><strong>执行方式</strong><span>按计划自动执行</span></div>
+            <div class="mode-segment">
+              <button type="button" :class="{ active: taskForm.scheduleType === 'once' }" @click="setScheduleType('once')">手动执行</button>
+              <button type="button" :class="{ active: taskForm.scheduleType === 'cron' && taskForm.schedulePeriod === 'day' }" @click="setScheduleType('day')">每天</button>
+              <button type="button" :class="{ active: taskForm.scheduleType === 'cron' && taskForm.schedulePeriod === 'week' }" @click="setScheduleType('week')">每周</button>
+              <button type="button" :class="{ active: taskForm.scheduleType === 'cron' && taskForm.schedulePeriod === 'custom' }" @click="setScheduleType('custom')">自定义 Cron</button>
+            </div>
+            <div v-if="taskForm.scheduleType === 'cron' && taskForm.schedulePeriod !== 'custom'" class="form-row">
+              <label v-if="taskForm.schedulePeriod === 'week'"><span>星期</span><select v-model.number="taskForm.scheduleWeekday"><option v-for="day in weekdays" :key="day.value" :value="day.value">{{ day.label }}</option></select></label>
+              <label><span>执行时间</span><input v-model="taskForm.scheduleTime" type="time" /></label>
+            </div>
+            <label v-if="taskForm.scheduleType === 'cron' && taskForm.schedulePeriod === 'custom'"><span>Cron 表达式<b>*</b></span><input v-model.trim="taskForm.scheduleCron" type="text" maxlength="64" placeholder="例如：0 8 * * 1-5" /><small>标准五段式：分 时 日 月 周，不支持秒级。</small></label>
+          </div>
           <div class="task-video-settings">
             <div class="task-video-title"><strong>视频策略</strong><span>按任务配置</span></div>
             <label class="task-video-option"><span><strong>原始视频录制</strong><small>任务结束后自动上传原始文件</small></span><input v-model="taskForm.rawRecordingEnabled" type="checkbox" /><i></i></label>
           </div>
-          <div class="form-error">{{ taskFormError }}</div>
+
           <footer>
             <button class="plain-command" type="button" @click="createTaskOpen = false">取消</button>
             <button class="primary-command" type="submit" :disabled="creatingTask">{{ creatingTask ? '创建中…' : '创建任务' }}</button>
@@ -215,7 +229,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useUiStore } from '../store/ui'
 import request from '../api/request'
@@ -247,6 +261,7 @@ const waypointForm = reactive({ longitude: 0, latitude: 0, altitude: 50, speed:
 
 const plans = ref([])
 const records = ref([])
+let refreshTimer = null
 const routes = ref([])
 const devices = computed(() => [...deviceStore.drones, ...deviceStore.docks])
 
@@ -258,10 +273,23 @@ const taskForm = reactive({
   dockId: '',
   routeId: '',
   scheduleType: 'once',
+  schedulePeriod: 'day',
+  scheduleWeekday: 1,
+  scheduleTime: '08:00',
   scheduleCron: '',
   rawRecordingEnabled: false
 })
 
+const weekdays = [
+  { value: 1, label: '星期一' },
+  { value: 2, label: '星期二' },
+  { value: 3, label: '星期三' },
+  { value: 4, label: '星期四' },
+  { value: 5, label: '星期五' },
+  { value: 6, label: '星期六' },
+  { value: 0, label: '星期日' }
+]
+
 watch(
   () => route.query.view,
   (v) => { if (v) view.value = v }
@@ -275,18 +303,32 @@ const TASK_STATUS = {
   enabled: { status: '待执行', statusClass: 'pending' },
   running: { status: '执行中', statusClass: 'mission' },
   paused: { status: '已暂停', statusClass: 'offline' },
-  draft: { status: '已暂停', statusClass: 'offline' },
+  draft: { status: '待执行', statusClass: 'pending' },
   disabled: { status: '已暂停', statusClass: 'offline' }
 }
 
 const EXEC_STATUS = {
-  pending: '待执行',
+  pending: '等待设备开始',
   running: '执行中',
   succeeded: '已完成',
   failed: '失败',
   cancelled: '已取消'
 }
 
+function formatSchedule(task) {
+  if (task.scheduleType !== 'cron' || !task.scheduleCron) return '手动执行'
+  const parts = task.scheduleCron.trim().split(/\s+/)
+  if (parts.length !== 5) return `自定义 Cron：${task.scheduleCron}`
+  const [minute, hour, dayOfMonth, month, dayOfWeek] = parts
+  if (dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
+    return `每日 ${hour.padStart(2, '0')}:${minute.padStart(2, '0')}`
+  }
+  if (dayOfMonth === '*' && month === '*' && /^\d$/.test(dayOfWeek)) {
+    return `每周${dayOfWeek === '0' ? '日' : dayOfWeek} ${hour.padStart(2, '0')}:${minute.padStart(2, '0')}`
+  }
+  return `自定义 Cron：${task.scheduleCron}`
+}
+
 function fmtTime(t) {
   if (!t) return '--'
   const d = new Date(t)
@@ -294,49 +336,60 @@ function fmtTime(t) {
   return d.toLocaleString('zh-CN', { hour12: false })
 }
 
+function toExecutionRecord(r, taskName, type, rawVideo) {
+  const dur = r.startTime && r.endTime
+    ? Math.max(0, Math.round((new Date(r.endTime) - new Date(r.startTime)) / 60000))
+    : null
+  return {
+    id: String(r.id),
+    name: taskName || r.taskId || '手动任务',
+    type: type || (r.taskId ? '任务计划' : '手动任务'),
+    device: r.droneSn || r.dockId || '--',
+    start: fmtTime(r.startTime),
+    duration: dur != null ? `${dur} min` : '--',
+    collect: rawVideo ? (rawVideo.status === 'ready' ? '原始视频已上传' : '原始视频处理中') : r.status === 'running' ? '原始视频录制中' : '--',
+    result: EXEC_STATUS[r.status] || r.status || '--',
+    status: r.status || '',
+    statusClass: r.status === 'running' ? 'mission' : r.status === 'succeeded' ? 'online' : r.status === 'failed' ? 'danger' : 'pending',
+    rawVideoId: rawVideo?.id || '',
+    rawVideoStatus: rawVideo?.status || ''
+  }
+}
+
+
 async function load() {
   try {
     await deviceStore.load()
-    const [taskPage, execPage, routePage] = await Promise.all([
+    const [taskPage, execPage, routePage, videoPage] = await Promise.all([
       request.get('/v1/tasks', { params: { pageNum: 1, pageSize: 100 } }),
       request.get('/v1/executions', { params: { pageNum: 1, pageSize: 100 } }),
-      request.get('/v1/routes', { params: { pageNum: 1, pageSize: 100 } })
+      request.get('/v1/routes', { params: { pageNum: 1, pageSize: 100 } }),
+      request.get('/v1/videos', { params: { pageNum: 1, pageSize: 100 } })
     ])
 
     plans.value = (taskPage?.records || []).map((t) => {
-      const st = TASK_STATUS[t.status] || TASK_STATUS.draft
       return {
         id: t.id,
         code: `JG-TSK-${String(t.id).slice(-8)}`,
         name: t.name,
         route: t.routeId ? `航线 #${t.routeId}` : '未绑定航线',
         device: t.dockId || '--',
-        cycle: t.scheduleType === 'cron' ? (t.scheduleCron || '定时执行') : '单次执行',
-        next: t.scheduleType === 'cron' ? (t.scheduleCron || '--') : '待手动执行',
+        cycle: formatSchedule(t),
+        next: t.scheduleType === 'cron' ? formatSchedule(t) : '待手动执行',
         videoPolicy: t.videoPolicy === 'raw' ? '原始录制' : '未启用',
         videoPolicyClass: t.videoPolicy === 'raw' ? 'record' : 'none',
-        status: st.status,
-        statusClass: st.statusClass,
-        lastResult: '尚未执行'
+        rawStatus: t.planStatus || t.status || 'enabled',
+        status: (TASK_STATUS[t.planStatus] || TASK_STATUS[t.status] || TASK_STATUS.draft).status,
+        statusClass: (TASK_STATUS[t.planStatus] || TASK_STATUS[t.status] || TASK_STATUS.draft).statusClass,
+        lastResult: t.latestExecution ? (EXEC_STATUS[t.latestExecution.status] || t.latestExecution.status || '未知') : '尚未执行'
       }
     })
 
+    const taskNames = new Map((taskPage?.records || []).map((task) => [task.id, task.name]))
+    const videosByExecution = new Map((videoPage?.records || []).map((video) => [String(video.executionId), video]))
     records.value = (execPage?.records || []).map((r) => {
-      const dur = r.startTime && r.endTime
-        ? Math.max(0, Math.round((new Date(r.endTime) - new Date(r.startTime)) / 60000))
-        : null
-      return {
-        id: String(r.id),
-        name: r.taskId || '手动任务',
-        type: r.taskId ? '定时任务' : '手动任务',
-        device: r.droneSn || r.dockId || '--',
-        start: fmtTime(r.startTime),
-        duration: dur != null ? `${dur} min` : '--',
-        collect: r.status === 'running' ? '原始视频录制中' : '--',
-        result: EXEC_STATUS[r.status] || r.status || '--',
-        status: r.status || '',
-        statusClass: r.status === 'running' ? 'mission' : r.status === 'succeeded' ? 'online' : r.status === 'failed' ? 'danger' : 'pending'
-      }
+      const video = videosByExecution.get(String(r.id))
+      return toExecutionRecord(r, taskNames.get(r.taskId), '', video ? { id: String(video.id), status: video.status } : null)
     })
 
     routes.value = (routePage?.records || []).map((r, i) => ({
@@ -347,6 +400,12 @@ async function load() {
       collectedAt: fmtTime(r.createdAt),
       mapClass: i % 2 === 0 ? 'route-a' : 'route-c'
     }))
+    const hasActiveExecution = (execPage?.records || []).some((r) => ['pending', 'running'].includes(r.status))
+    if (hasActiveExecution && !refreshTimer) refreshTimer = window.setInterval(load, 5000)
+    if (!hasActiveExecution && refreshTimer) {
+      window.clearInterval(refreshTimer)
+      refreshTimer = null
+    }
   } catch (e) {
     ui.toast(e.message || '加载任务数据失败')
   }
@@ -354,6 +413,10 @@ async function load() {
 
 onMounted(load)
 
+onBeforeUnmount(() => {
+  if (refreshTimer) window.clearInterval(refreshTimer)
+})
+
 const filteredPlans = computed(() => {
   const q = search.value.trim().toLowerCase()
   return plans.value.filter((p) => {
@@ -523,11 +586,66 @@ async function submitRoute() {
   }
 }
 
+function setScheduleType(type) {
+  if (type === 'once') {
+    taskForm.scheduleType = 'once'
+    taskForm.scheduleCron = ''
+    return
+  }
+  taskForm.scheduleType = 'cron'
+  taskForm.schedulePeriod = type
+  if (type !== 'custom') taskForm.scheduleCron = ''
+}
+
+function buildScheduleCron() {
+  if (taskForm.scheduleType === 'once') return ''
+  if (taskForm.schedulePeriod === 'custom') return taskForm.scheduleCron.trim()
+  const [hour, minute] = taskForm.scheduleTime.split(':').map(Number)
+  if (!Number.isInteger(hour) || !Number.isInteger(minute)) return ''
+  const dayOfWeek = taskForm.schedulePeriod === 'week' ? taskForm.scheduleWeekday : '*'
+  return `${minute} ${hour} * * ${dayOfWeek}`
+}
+
+function isBasicCronExpression(value) {
+  const parts = value.trim().split(/\s+/)
+  return parts.length === 5 && parts.every((part) => /^[\d*/?,\-]+$/.test(part))
+}
+
 function resetPlanFilter() {
   search.value = ''
   planFilter.value = ''
 }
 
+async function deleteTask(task) {
+  if (!window.confirm(`确定永久删除任务“${task.name}”吗？此操作不可恢复。`)) return
+  try {
+    await request.delete(`/v1/tasks/${task.id}`)
+    ui.toast('任务已删除')
+    await load()
+  } catch (e) {
+    ui.toast(e.message || '删除任务失败')
+  }
+}
+
+function canExecuteTask(task) {
+  return task.rawStatus !== 'disabled' && task.rawStatus !== 'paused' && task.statusClass !== 'mission'
+}
+
+async function executeTask(task) {
+  try {
+    const result = await request.post(`/v1/tasks/${task.id}/execute`)
+    const execution = result?.execution
+    task.lastResult = EXEC_STATUS[execution?.status] || '等待设备开始'
+    if (execution) {
+      records.value.unshift(toExecutionRecord(execution, task.name, task.cycle))
+    }
+    ui.toast('任务已下发')
+    await load()
+  } catch (e) {
+    ui.toast(e.message || '任务执行失败')
+  }
+}
+
 const todayTaskCount = computed(() => plans.value.length)
 const runningTaskCount = computed(() => plans.value.filter((p) => p.statusClass === 'mission').length)
 const pendingTaskCount = computed(() => plans.value.filter((p) => p.statusClass === 'pending').length)
@@ -539,6 +657,9 @@ function openCreateTask() {
     dockId: deviceStore.docks[0]?.dockId || '',
     routeId: '',
     scheduleType: 'once',
+    schedulePeriod: 'day',
+    scheduleWeekday: 1,
+    scheduleTime: '08:00',
     scheduleCron: '',
     rawRecordingEnabled: false
   })
@@ -553,8 +674,13 @@ async function submitCreateTask() {
         taskFormError.value = '请完整填写任务名称、执行机巢和飞行航线。'
     return
   }
-  if (taskForm.scheduleType === 'cron' && !taskForm.scheduleCron.trim()) {
-    taskFormError.value = '请填写定时执行表达式。'
+  const scheduleCron = buildScheduleCron()
+  if (taskForm.scheduleType === 'cron' && taskForm.schedulePeriod === 'custom' && !isBasicCronExpression(scheduleCron)) {
+    taskFormError.value = '请输入合法的五段式 Cron 表达式，例如：0 8 * * 1-5。'
+    return
+  }
+  if (taskForm.scheduleType === 'cron' && !scheduleCron) {
+    taskFormError.value = '请选择有效的执行时间。'
     return
   }
 
@@ -564,6 +690,8 @@ async function submitCreateTask() {
       name,
       dockId: taskForm.dockId,
       routeId: Number(taskForm.routeId) || 0,
+      scheduleType: taskForm.scheduleType,
+      scheduleCron,
       videoPolicy: taskForm.rawRecordingEnabled ? 'raw' : 'replay'
     })
     createTaskOpen.value = false
@@ -579,4 +707,19 @@ async function submitCreateTask() {
 function goReplay(r) {
   router.push({ name: 'replay', params: { key: r.id } })
 }
+
+async function downloadRawVideo(record) {
+  if (!record.rawVideoId || record.rawVideoStatus !== 'ready') return
+  try {
+    const res = await request.post(`/v1/videos/${record.rawVideoId}/download`)
+    if (res?.downloadUrl) {
+      window.open(res.downloadUrl, '_blank')
+      ui.toast('开始下载原视频')
+    } else {
+      ui.toast('暂无下载地址')
+    }
+  } catch (e) {
+    ui.toast(e.message || '下载失败')
+  }
+}
 </script>