From 8c86a233d94d8d3e56ef1a50d255d18e0ae9cf45 Mon Sep 17 00:00:00 2001
From: zhoulexin <zhoulexin123@qq.com>
Date: Mon, 1 Jun 2026 15:15:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=97=A0=E4=BA=BA=E6=9C=BA=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=E9=9D=A2=E6=9D=BF=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |    6 +
 src/views/detail/drone.vue                    | 1230 +++++++++++++++++
 .../components/CameraGrid.vue                 |    3 +-
 src/views/home/index.vue                      |    4 +-
 4 files changed, 1241 insertions(+), 2 deletions(-)
 create mode 100644 src/views/detail/drone.vue

diff --git a/src/router/index.js b/src/router/index.js
index 89f3005..43e9ce2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -31,6 +31,12 @@ const routes = [
         component: () => import('@/views/detail/index.vue'),
         meta: { title: '设备详情', requiresAuth: true }
       },
+      {
+        path: 'drone-detail',
+        name: 'DroneDetail',
+        component: () => import('@/views/detail/drone.vue'),
+        meta: { title: '无人机详情', requiresAuth: true }
+      },
       {
         path: 'dataset',
         name: 'Dataset',
diff --git a/src/views/detail/drone.vue b/src/views/detail/drone.vue
new file mode 100644
index 0000000..2e921ca
--- /dev/null
+++ b/src/views/detail/drone.vue
@@ -0,0 +1,1230 @@
+<template>
+  <div class="drone-detail-container">
+    <!-- 顶部导航 -->
+    <div class="detail-header">
+      <div class="header-left">
+        <el-button icon="ArrowLeft" circle @click="goBack" />
+        <span class="device-name">{{ deviceInfo.groupName || '无人机设备' }}</span>
+        <el-tag :type="deviceInfo.groupStatus === 1 ? 'success' : 'danger'" size="small">
+          {{ deviceInfo.groupStatus === 1 ? '在线' : '离线' }}
+        </el-tag>
+      </div>
+      <div class="header-right">
+        <el-button type="primary" size="small" :icon="Promotion">飞行控制模式</el-button>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="detail-content">
+      <!-- 左侧控制面板 -->
+      <div class="left-panel">
+        <!-- 设备图片 -->
+        <div class="panel-card device-image-card">
+          <div class="drone-img">
+            <img :src="fileHttp + (deviceInfo.imgUrl || '/drone.png')" alt="无人机">
+          </div>
+        </div>
+
+        <!-- 镜头切换 -->
+        <div class="panel-card">
+          <div class="card-title">
+            <el-icon><Switch /></el-icon>
+            切换镜头
+          </div>
+          <el-radio-group v-model="currentLens" size="small" class="lens-radio-group">
+            <el-radio-button value="infrared">红外</el-radio-button>
+            <el-radio-button value="wide">广角</el-radio-button>
+            <el-radio-button value="visible">可见光</el-radio-button>
+          </el-radio-group>
+        </div>
+
+        <!-- 云台控制 -->
+        <div class="panel-card">
+          <div class="card-title">
+            <el-icon><Camera /></el-icon>
+            云台控制
+          </div>
+          <div class="gimbal-controls">
+            <el-radio-group v-model="gimbalMode" size="small">
+              <el-radio-button value="center">回中</el-radio-button>
+              <el-radio-button value="down">向下</el-radio-button>
+            </el-radio-group>
+            <el-radio-group v-model="gimbalYaw" size="small" class="gimbal-yaw">
+              <el-radio-button value="yawCenter">偏航回中</el-radio-button>
+              <el-radio-button value="pitchDown">俯仰向下</el-radio-button>
+            </el-radio-group>
+            <div class="angle-inputs">
+              <div class="angle-item">
+                <span class="angle-label">俯仰角度</span>
+                <el-input-number v-model="pitchAngle" :min="-90" :max="90" size="small" controls-position="right" />
+              </div>
+              <div class="angle-item">
+                <span class="angle-label">方位角度</span>
+                <el-input-number v-model="yawAngle" :min="-180" :max="180" size="small" controls-position="right" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 飞行控制 -->
+        <div class="panel-card">
+          <div class="card-title">
+            <el-icon><Promotion /></el-icon>
+            飞行控制
+          </div>
+          <div class="flight-buttons">
+            <el-button type="primary" class="full-width-btn" @click="handleOneKeyStart">
+              <el-icon><CircleCheck /></el-icon>
+              一键开启
+            </el-button>
+            <div class="flight-btn-row">
+              <el-button type="success" size="small" @click="handleTakeoff">起飞</el-button>
+              <el-button type="warning" size="small" @click="handleHover">悬停</el-button>
+              <el-button type="info" size="small" @click="handlePause">暂停</el-button>
+              <el-button type="primary" size="small" @click="handleResume">继续</el-button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 方向控制 -->
+        <div class="panel-card" :class="{ 'direction-disabled': !directionEnabled }">
+          <div class="card-title">
+            <el-icon><Rank /></el-icon>
+            方向控制
+            <span v-if="!directionEnabled" class="locked-tip">（请先一键开启）</span>
+          </div>
+          <div class="direction-controls">
+            <div class="key-pad">
+              <div v-for="(row, rowIndex) in keyMap" :key="rowIndex" class="key-row">
+                <div
+                  v-for="btn in row"
+                  :key="btn.key"
+                  class="key-btn"
+                  :class="{ active: activeKey === btn.key, disabled: !directionEnabled }"
+                  @mousedown="directionEnabled && handleKeyDown(btn.key)"
+                  @mouseup="handleKeyUp"
+                  @mouseleave="handleKeyUp"
+                >
+                  <el-icon class="key-icon"><component :is="btn.icon" /></el-icon>
+                  <span class="key-label">{{ btn.key }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <el-button type="warning" class="full-width-btn warning-btn" @click="toggleWarningLight">
+            <el-icon><Warning /></el-icon>
+            {{ warningLightOn ? '关闭预警灯' : '开启预警灯' }}
+          </el-button>
+        </div>
+
+        <!-- 参数设置 -->
+        <div class="panel-card">
+          <div class="card-title">
+            <el-icon><Tools /></el-icon>
+            参数设置
+          </div>
+          <div class="param-sliders">
+            <div class="slider-item">
+              <span class="slider-label">转速</span>
+              <el-slider v-model="rotateSpeed" :min="0" :max="800" :step="10" show-tooltip />
+              <span class="slider-value">{{ rotateSpeed }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 运行数据 -->
+        <div class="panel-card">
+          <div class="card-title">
+            <el-icon><DataLine /></el-icon>
+            运行数据
+          </div>
+          <div class="runtime-data">
+            <div class="data-item">
+              <span class="data-label">高度</span>
+              <span class="data-value">{{ runtimeData.altitude || '0.0' }} m</span>
+            </div>
+            <div class="data-item">
+              <span class="data-label">坐标</span>
+              <span class="data-value">{{ runtimeData.coordinate || '0,0' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 设备权限 -->
+        <div class="panel-card">
+          <div class="card-title">
+            <el-icon><Lock /></el-icon>
+            设备权限
+          </div>
+          <div class="perm-buttons">
+            <el-button type="primary" size="small" plain>授权云端</el-button>
+            <el-button type="success" size="small" plain>开启飞行控制模式</el-button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 中间信息面板 -->
+      <div class="center-panel">
+        <!-- 飞行器姿态信息 -->
+        <div class="info-card accent-orange">
+          <div class="info-header">
+            <div class="info-icon-wrap">
+              <el-icon><Compass /></el-icon>
+            </div>
+            <span class="info-title">飞行器姿态</span>
+          </div>
+          <div class="info-body grid-3">
+            <div class="data-block">
+              <div class="data-num">{{ attitude.pitch || 0 }}°</div>
+              <div class="data-name">俯仰角</div>
+            </div>
+            <div class="data-block">
+              <div class="data-num">{{ attitude.yaw || 0 }}°</div>
+              <div class="data-name">航向角</div>
+            </div>
+            <div class="data-block">
+              <div class="data-num">{{ attitude.roll || 0 }}°</div>
+              <div class="data-name">横滚角</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 地理空间信息 -->
+        <div class="info-card accent-blue">
+          <div class="info-header">
+            <div class="info-icon-wrap">
+              <el-icon><MapLocation /></el-icon>
+            </div>
+            <span class="info-title">地理空间</span>
+          </div>
+          <div class="info-body grid-2">
+            <div class="data-block wide">
+              <div class="data-num small">{{ geoInfo.altitude || 0 }}<span class="unit">m</span></div>
+              <div class="data-name">高度</div>
+            </div>
+            <div class="data-block wide">
+              <div class="data-num small">{{ geoInfo.longitude || 0 }}<span class="unit">°E</span></div>
+              <div class="data-name">经度</div>
+            </div>
+            <div class="data-block wide">
+              <div class="data-num small">{{ geoInfo.latitude || 0 }}<span class="unit">°N</span></div>
+              <div class="data-name">纬度</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 飞行状态信息 -->
+        <div class="info-card accent-green">
+          <div class="info-header">
+            <div class="info-icon-wrap">
+              <el-icon><TrendCharts /></el-icon>
+            </div>
+            <span class="info-title">飞行状态</span>
+          </div>
+          <div class="info-body grid-2">
+            <div class="data-block">
+              <div class="data-num">{{ flightStatus.totalDistance || 0 }}<span class="unit">km</span></div>
+              <div class="data-name">累积行程</div>
+            </div>
+            <div class="data-block">
+              <div class="data-num">{{ flightStatus.totalTime || 0 }}<span class="unit">min</span></div>
+              <div class="data-name">累积时间</div>
+            </div>
+            <div class="data-block">
+              <div class="data-num">{{ flightStatus.windDirection || 0 }}<span class="unit">°</span></div>
+              <div class="data-name">风向</div>
+            </div>
+            <div class="data-block">
+              <div class="data-num">{{ flightStatus.windSpeed || 0 }}<span class="unit">m/s</span></div>
+              <div class="data-name">风速</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 飞行限制信息 -->
+        <div class="info-card accent-red">
+          <div class="info-header">
+            <div class="info-icon-wrap">
+              <el-icon><WarningFilled /></el-icon>
+            </div>
+            <span class="info-title">飞行限制</span>
+          </div>
+          <div class="info-body limit-body">
+            <div class="limit-item">
+              <div class="limit-bar">
+                <div class="limit-fill" :style="{ width: Math.min((geoInfo.altitude || 0) / (flightLimit.maxAltitude || 1) * 100, 100) + '%' }"></div>
+              </div>
+              <div class="limit-text">
+                <span>当前高度 / 限高</span>
+                <span class="limit-val">{{ geoInfo.altitude || 0 }} / {{ flightLimit.maxAltitude || 0 }}m</span>
+              </div>
+            </div>
+            <div class="limit-item">
+              <div class="limit-bar">
+                <div class="limit-fill red" :style="{ width: Math.min((runtimeData.altitude || 0) / (flightLimit.maxDistance || 1) * 100, 100) + '%' }"></div>
+              </div>
+              <div class="limit-text">
+                <span>当前距离 / 最大距离</span>
+                <span class="limit-val">{{ runtimeData.altitude || 0 }} / {{ flightLimit.maxDistance || 0 }}m</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧视频区域 -->
+      <div class="right-panel">
+        <div class="video-wrapper">
+          <div class="video-body">
+            <video
+              v-if="currentCamera"
+              ref="videoRef"
+              :src="currentCamera.videoStreaming"
+              class="video-player"
+              autoplay
+              muted
+              controls
+              playsinline
+            ></video>
+            <div v-else class="video-placeholder">
+              <el-icon :size="48"><VideoCamera /></el-icon>
+              <p>暂无视频流</p>
+            </div>
+          </div>
+          <div class="video-footer">
+            <el-button size="small" icon="Picture" @click="handleSnapshot">截图</el-button>
+            <el-button
+              size="small"
+              :icon="isRecording ? 'VideoPause' : 'VideoCamera'"
+              @click="toggleRecord"
+            >
+              {{ isRecording ? '停止' : '录屏' }}
+            </el-button>
+            <el-button size="small" icon="FullScreen" @click="openEnlarge">全屏</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 放大弹窗 -->
+    <el-dialog
+      v-model="enlargeVisible"
+      title="视频全屏"
+      fullscreen
+      destroy-on-close
+      :close-on-press-escape="true"
+      @closed="handleEnlargeClosed"
+    >
+      <div class="enlarge-video-body">
+        <video
+          v-if="enlargeVisible && currentCamera"
+          :src="currentCamera.videoStreaming"
+          class="enlarge-video-player"
+          autoplay
+          controls
+          playsinline
+        ></video>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, markRaw } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import {
+  ArrowLeft, ArrowUp, ArrowDown, ArrowRight,
+  RefreshLeft, RefreshRight, CaretTop, CaretBottom,
+  VideoCamera, Picture, FullScreen, VideoPause,
+  Switch, Camera, Promotion, CircleCheck, Rank,
+  Warning, Tools, DataLine, Lock, Compass,
+  MapLocation, TrendCharts, WarningFilled
+} from '@element-plus/icons-vue'
+import fileHttp from '@/utils/fileHttp'
+
+const route = useRoute()
+const router = useRouter()
+
+// 设备信息
+const groupId = ref(route.query.groupId || '')
+const deviceInfo = ref({})
+
+// 镜头切换
+const currentLens = ref('visible')
+
+// 云台控制
+const gimbalMode = ref('center')
+const gimbalYaw = ref('yawCenter')
+const pitchAngle = ref(0)
+const yawAngle = ref(0)
+
+// 方向控制键盘按键映射
+const keyMap = [
+  [
+    { key: 'Q', label: '左旋', icon: markRaw(RefreshLeft), action: 'rotate-left' },
+    { key: 'W', label: '前进', icon: markRaw(ArrowUp), action: 'forward' },
+    { key: 'E', label: '右旋', icon: markRaw(RefreshRight), action: 'rotate-right' },
+    { key: 'C', label: '上升', icon: markRaw(CaretTop), action: 'ascend' }
+  ],
+  [
+    { key: 'A', label: '左移', icon: markRaw(ArrowLeft), action: 'left' },
+    { key: 'S', label: '后退', icon: markRaw(ArrowDown), action: 'backward' },
+    { key: 'D', label: '右移', icon: markRaw(ArrowRight), action: 'right' },
+    { key: 'Z', label: '下降', icon: markRaw(CaretBottom), action: 'descend' }
+  ]
+]
+
+const activeKey = ref('')
+const directionEnabled = ref(false)
+
+const handleKeyDown = (key) => {
+  activeKey.value = key
+  const allKeys = keyMap.flat()
+  const item = allKeys.find(k => k.key === key)
+  if (item) {
+    console.log('按键控制开始:', item.action)
+  }
+}
+
+const handleKeyUp = () => {
+  activeKey.value = ''
+  console.log('按键控制结束')
+}
+
+// 键盘全局监听
+const onDocumentKeyDown = (e) => {
+  if (!directionEnabled.value) return
+  const key = e.key.toUpperCase()
+  const validKeys = keyMap.flat().map(k => k.key)
+  if (validKeys.includes(key) && activeKey.value !== key) {
+    e.preventDefault()
+    handleKeyDown(key)
+  }
+}
+
+const onDocumentKeyUp = (e) => {
+  if (!directionEnabled.value) return
+  const key = e.key.toUpperCase()
+  const validKeys = keyMap.flat().map(k => k.key)
+  if (validKeys.includes(key)) {
+    handleKeyUp()
+  }
+}
+
+// 参数
+const redThreshold = ref(50)
+const rotateSpeed = ref(400)
+const warningLightOn = ref(false)
+
+// 运行数据
+const runtimeData = ref({
+  altitude: '0.0',
+  coordinate: '0.0,0.0'
+})
+
+// 飞行器姿态
+const attitude = ref({
+  pitch: 0,
+  yaw: 0,
+  roll: 0
+})
+
+// 地理空间信息
+const geoInfo = ref({
+  altitude: 0,
+  longitude: 0,
+  latitude: 0
+})
+
+// 飞行状态
+const flightStatus = ref({
+  totalDistance: 0,
+  totalTime: 0,
+  windDirection: 0,
+  windSpeed: 0
+})
+
+// 飞行限制
+const flightLimit = ref({
+  maxAltitude: 120,
+  maxDistance: 500
+})
+
+// 视频相关
+const videoRef = ref(null)
+const enlargeVisible = ref(false)
+const isRecording = ref(false)
+const mediaRecorder = ref(null)
+
+const currentCamera = computed(() => {
+  if (!deviceInfo.value.cameras || deviceInfo.value.cameras.length === 0) return null
+  return deviceInfo.value.cameras.find(c => {
+    if (currentLens.value === 'infrared') return c.cameraLocation?.includes('红外')
+    if (currentLens.value === 'wide') return c.cameraLocation?.includes('广角')
+    return c.cameraLocation?.includes('可见光') || true
+  }) || deviceInfo.value.cameras[0]
+})
+
+// 模拟获取设备信息
+const fetchDeviceInfo = async () => {
+  // TODO: 后续接入真实接口
+  // const res = await getDroneInfos(groupId.value)
+  // deviceInfo.value = res.data
+
+  // 模拟数据
+  deviceInfo.value = {
+    groupName: '无人机设备-' + groupId.value,
+    groupStatus: 1,
+    imgUrl: '',
+    cameras: [
+      { id: 1, cameraLocation: '可见光', videoStreaming: 'http://localhost:8889/camera1' },
+      { id: 2, cameraLocation: '红外', videoStreaming: 'http://localhost:8889/camera2' },
+      { id: 3, cameraLocation: '广角', videoStreaming: 'http://localhost:8889/camera3' }
+    ]
+  }
+}
+
+// 飞行控制
+const handleOneKeyStart = () => {
+  directionEnabled.value = true
+  ElMessage.success('一键开启指令已发送')
+  // TODO: 接入真实控制接口
+}
+
+const handleTakeoff = () => {
+  ElMessage.success('起飞指令已发送')
+}
+
+const handleHover = () => {
+  ElMessage.success('悬停指令已发送')
+}
+
+const handlePause = () => {
+  ElMessage.success('暂停指令已发送')
+}
+
+const handleResume = () => {
+  ElMessage.success('继续指令已发送')
+}
+
+
+
+// 预警灯
+const toggleWarningLight = () => {
+  warningLightOn.value = !warningLightOn.value
+  ElMessage.success(warningLightOn.value ? '预警灯已开启' : '预警灯已关闭')
+}
+
+// 截图 - Canvas 绘制 video 当前帧
+const handleSnapshot = () => {
+  const video = videoRef.value
+  if (!video || video.readyState < 2) {
+    ElMessage.warning('视频未就绪，无法截图')
+    return
+  }
+  try {
+    const canvas = document.createElement('canvas')
+    canvas.width = video.videoWidth
+    canvas.height = video.videoHeight
+    const ctx = canvas.getContext('2d')
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+    canvas.toBlob((blob) => {
+      if (blob) {
+        const filename = `drone_snapshot_${new Date().getTime()}.jpg`
+        downloadBlob(blob, filename)
+      }
+    }, 'image/jpeg', 0.95)
+  } catch (e) {
+    ElMessage.error('截图失败')
+  }
+}
+
+// 录屏 - MediaRecorder API
+const toggleRecord = () => {
+  const video = videoRef.value
+  if (!video) {
+    ElMessage.warning('视频未就绪')
+    return
+  }
+  if (isRecording.value) {
+    stopRecord()
+  } else {
+    startRecord(video)
+  }
+}
+
+const startRecord = (video) => {
+  try {
+    // 需要先捕获视频流，如果 video.srcObject 不可用，则用 captureStream
+    const stream = video.captureStream ? video.captureStream(30) : null
+    if (!stream) {
+      ElMessage.error('当前浏览器不支持录屏')
+      return
+    }
+    const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' })
+    mediaRecorder.value = recorder
+    const chunks = []
+    recorder.ondataavailable = (e) => {
+      if (e.data.size > 0) chunks.push(e.data)
+    }
+    recorder.onstop = () => {
+      const blob = new Blob(chunks, { type: 'video/webm' })
+      const filename = `drone_record_${new Date().getTime()}.webm`
+      downloadBlob(blob, filename)
+    }
+    recorder.start()
+    isRecording.value = true
+    ElMessage.success('开始录制')
+  } catch (e) {
+    ElMessage.error('启动录屏失败')
+    console.error(e)
+  }
+}
+
+const stopRecord = () => {
+  if (mediaRecorder.value && mediaRecorder.value.state !== 'inactive') {
+    mediaRecorder.value.stop()
+    isRecording.value = false
+    ElMessage.success('录制完成')
+  }
+}
+
+const openEnlarge = () => {
+  enlargeVisible.value = true
+}
+
+const handleEnlargeClosed = () => {
+  // 关闭全屏
+}
+
+// 通用下载
+const downloadBlob = (blob, filename) => {
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  setTimeout(() => {
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }, 100)
+  ElMessage.success(`文件 ${filename} 已开始下载`)
+}
+
+// 返回
+const goBack = () => {
+  router.push('/home')
+}
+
+onMounted(() => {
+  fetchDeviceInfo()
+  document.addEventListener('keydown', onDocumentKeyDown)
+  document.addEventListener('keyup', onDocumentKeyUp)
+})
+
+onBeforeUnmount(() => {
+  if (isRecording.value) stopRecord()
+  document.removeEventListener('keydown', onDocumentKeyDown)
+  document.removeEventListener('keyup', onDocumentKeyUp)
+})
+</script>
+
+<style lang="scss" scoped>
+.drone-detail-container {
+  height: calc(100vh - 100px);
+  display: flex;
+  flex-direction: column;
+  background: #f0f2f5;
+  overflow: hidden;
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 20px;
+  background: #fff;
+  border-bottom: 1px solid #e4e7ed;
+  flex-shrink: 0;
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .device-name {
+      font-size: 18px;
+      font-weight: 600;
+      color: #303133;
+    }
+  }
+}
+
+.detail-content {
+  flex: 1;
+  display: flex;
+  gap: 12px;
+  padding: 12px;
+  overflow: hidden;
+}
+
+/* 左侧控制面板 */
+.left-panel {
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow-y: auto;
+  flex-shrink: 0;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 2px;
+  }
+}
+
+.panel-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px;
+  border: 1px solid #e4e7ed;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+
+  .card-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    .el-icon {
+      font-size: 15px;
+      color: #409eff;
+    }
+
+    .locked-tip {
+      font-size: 11px;
+      font-weight: 400;
+      color: #f56c6c;
+    }
+  }
+}
+
+.device-image-card {
+  text-align: center;
+  padding: 16px;
+
+  .drone-img {
+    img {
+      width: 160px;
+      height: auto;
+      object-fit: contain;
+    }
+  }
+}
+
+.lens-radio-group {
+  display: flex;
+  width: 100%;
+
+  :deep(.el-radio-button__inner) {
+    flex: 1;
+    text-align: center;
+    padding: 8px 12px;
+    font-size: 13px;
+  }
+}
+
+.gimbal-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .el-radio-group {
+    display: flex;
+    width: 100%;
+
+    :deep(.el-radio-button__inner) {
+      flex: 1;
+      text-align: center;
+      padding: 8px 12px;
+      font-size: 13px;
+    }
+  }
+
+  .angle-inputs {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 4px;
+
+    .angle-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .angle-label {
+        font-size: 12px;
+        color: #606266;
+        width: 64px;
+        flex-shrink: 0;
+      }
+
+      .el-input-number {
+        flex: 1;
+      }
+    }
+  }
+}
+
+.flight-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .full-width-btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .flight-btn-row {
+    display: flex;
+    gap: 6px;
+
+    .el-button {
+      flex: 1;
+      padding: 6px 4px;
+      font-size: 12px;
+    }
+  }
+}
+
+.direction-controls {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+
+  .key-pad {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .key-row {
+      display: flex;
+      gap: 8px;
+    }
+
+    .key-btn {
+      width: 56px;
+      height: 56px;
+      background: #fff;
+      border: 1px solid #dcdfe6;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 2px;
+      cursor: pointer;
+      user-select: none;
+      transition: all 0.15s ease;
+      box-shadow: 0 2px 0 #e4e7ed;
+
+      .key-icon {
+        font-size: 18px;
+        color: #606266;
+      }
+
+      .key-label {
+        font-size: 11px;
+        color: #909399;
+        font-weight: 500;
+        font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+      }
+
+      &:hover {
+        border-color: #409eff;
+        color: #409eff;
+
+        .key-icon,
+        .key-label {
+          color: #409eff;
+        }
+      }
+
+      &.active {
+        background: #ecf5ff;
+        border-color: #409eff;
+        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2), inset 0 1px 2px rgba(0,0,0,0.05);
+        transform: translateY(1px);
+
+        .key-icon,
+        .key-label {
+          color: #409eff;
+        }
+      }
+
+      &.disabled {
+        cursor: not-allowed;
+        opacity: 0.45;
+        pointer-events: none;
+
+        &:hover {
+          border-color: #dcdfe6;
+
+          .key-icon,
+          .key-label {
+            color: inherit;
+          }
+        }
+      }
+    }
+  }
+}
+
+.warning-btn {
+  margin-top: 4px;
+}
+
+.param-sliders {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .slider-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .slider-label {
+      font-size: 12px;
+      color: #606266;
+      width: 60px;
+      flex-shrink: 0;
+    }
+
+    .el-slider {
+      flex: 1;
+    }
+
+    .slider-value {
+      width: 36px;
+      text-align: right;
+      font-size: 12px;
+      color: #409eff;
+      font-weight: 600;
+    }
+  }
+}
+
+.runtime-data {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .data-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 10px;
+    background: #f5f7fa;
+    border-radius: 6px;
+
+    .data-label {
+      font-size: 12px;
+      color: #606266;
+    }
+
+    .data-value {
+      font-size: 12px;
+      color: #303133;
+      font-weight: 500;
+      font-family: 'Courier New', monospace;
+    }
+  }
+}
+
+.perm-buttons {
+  display: flex;
+  gap: 8px;
+
+  .el-button {
+    flex: 1;
+    font-size: 12px;
+  }
+}
+
+/* 中间信息面板 */
+.center-panel {
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+  flex-shrink: 0;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 2px;
+  }
+}
+
+.info-card {
+  background: #fff;
+  border-radius: 12px;
+  border: 1px solid #ebeef5;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  overflow: hidden;
+  transition: box-shadow 0.2s;
+
+  &:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  }
+
+  .info-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    font-size: 13px;
+    font-weight: 600;
+    color: #303133;
+    border-bottom: 1px solid #f2f3f5;
+
+    .info-icon-wrap {
+      width: 28px;
+      height: 28px;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .el-icon {
+        font-size: 15px;
+        color: #fff;
+      }
+    }
+
+    .info-title {
+      font-size: 13px;
+      font-weight: 600;
+    }
+  }
+
+  .info-body {
+    padding: 12px;
+    display: flex;
+    gap: 8px;
+
+    &.grid-3 {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    &.grid-2 {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .data-block {
+      text-align: center;
+      padding: 8px 4px;
+      border-radius: 8px;
+      background: #f8f9fa;
+
+      &.wide {
+        grid-column: span 2;
+      }
+
+      .data-num {
+        font-size: 18px;
+        font-weight: 700;
+        color: #303133;
+        line-height: 1.2;
+        margin-bottom: 4px;
+        font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
+
+        .unit {
+          font-size: 11px;
+          font-weight: 500;
+          color: #909399;
+          margin-left: 2px;
+        }
+
+        &.small {
+          font-size: 14px;
+        }
+      }
+
+      .data-name {
+        font-size: 11px;
+        color: #909399;
+      }
+    }
+  }
+
+  /* 各主题色 */
+  &.accent-orange .info-icon-wrap { background: linear-gradient(135deg, #f5a623, #f8c555); }
+  &.accent-blue .info-icon-wrap { background: linear-gradient(135deg, #409eff, #66b1ff); }
+  &.accent-green .info-icon-wrap { background: linear-gradient(135deg, #67c23a, #85ce61); }
+  &.accent-red .info-icon-wrap { background: linear-gradient(135deg, #f56c6c, #f89898); }
+
+  /* 限制信息特殊样式 */
+  .limit-body {
+    flex-direction: column;
+    gap: 10px;
+
+    .limit-item {
+      .limit-bar {
+        height: 6px;
+        background: #ebeef5;
+        border-radius: 3px;
+        overflow: hidden;
+        margin-bottom: 6px;
+
+        .limit-fill {
+          height: 100%;
+          background: linear-gradient(90deg, #409eff, #66b1ff);
+          border-radius: 3px;
+          transition: width 0.5s ease;
+
+          &.red {
+            background: linear-gradient(90deg, #f56c6c, #f89898);
+          }
+        }
+      }
+
+      .limit-text {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 11px;
+        color: #909399;
+
+        .limit-val {
+          color: #303133;
+          font-weight: 600;
+          font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
+        }
+      }
+    }
+  }
+}
+
+/* 右侧视频区域 */
+.right-panel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.video-wrapper {
+  flex: 1;
+  background: #fff;
+  border-radius: 10px;
+  border: 1px solid #e4e7ed;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .video-body {
+    flex: 1;
+    background: #1a1a1a;
+    position: relative;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .video-player {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .video-placeholder {
+      text-align: center;
+      color: #666;
+
+      .el-icon {
+        color: #555;
+        margin-bottom: 12px;
+      }
+
+      p {
+        font-size: 14px;
+        color: #777;
+      }
+    }
+  }
+
+  .video-footer {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    padding: 12px;
+    border-top: 1px solid #f0f0f0;
+
+    .el-button {
+      min-width: 88px;
+    }
+  }
+}
+
+/* 弹窗 */
+:deep(.el-dialog.is-fullscreen) {
+  .el-dialog__body {
+    padding: 0;
+    height: calc(100% - 56px);
+    background: #000;
+  }
+}
+
+.enlarge-video-body {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+
+  .enlarge-video-player {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+/* 响应式 */
+@media (max-width: 1400px) {
+  .center-panel {
+    width: 240px;
+  }
+}
+
+@media (max-width: 1200px) {
+  .detail-content {
+    flex-wrap: wrap;
+  }
+  .left-panel,
+  .center-panel {
+    width: calc(50% - 6px);
+  }
+  .right-panel {
+    width: 100%;
+    height: 500px;
+  }
+}
+</style>
diff --git a/src/views/face-recognition/components/CameraGrid.vue b/src/views/face-recognition/components/CameraGrid.vue
index 71ae4b0..37a364d 100644
--- a/src/views/face-recognition/components/CameraGrid.vue
+++ b/src/views/face-recognition/components/CameraGrid.vue
@@ -31,7 +31,8 @@
         </el-dropdown>
       </div>
       <div class="camera-video" ref="videoContainers">
-        <WebRtcPlayer :src="`${camera.defaultVideo}/whep`"/>
+        <!-- <WebRtcPlayer :src="`${camera.defaultVideo}/whep`"/> -->
+        <WebRtcPlayer src="http://10.23.22.43:8889/camera4_detected/whep"/>
       </div>
     </div>
     <!-- 第二个摄像头用于画人脸框测试 -->
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 1c5bebb..ac79fcb 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -131,8 +131,10 @@ const editData = ref(null)
 const isEdit = ref(false)
 // 查看详情
 const viewDetail = (item) => {
+  // groupType=1 为无人机，跳转到无人机专属详情页
+  const isDrone = item.groupType === 1
   router.push({
-    path: '/detail',
+    path: isDrone ? '/drone-detail' : '/detail',
     query: {
       groupId: item.groupId
     }