feat(deviceManagement): 优化视频设备监控与调试页面

- 重构方向控制和缩放控制的按钮样式，使用 Element UI 的圆形按钮
- 优化 3D云台控制按钮样式，使用 round 属性
- 改进快捷键设置功能：
  - 添加键位重复检查逻辑
  -重构快捷键设置的数据结构，使其更加清晰
  - 通过计算属性自动生成 keyMap，提高代码可维护性
- 调整部分样式，如按钮间距、文本对齐等，提升页面视觉效果

src/views/deviceManagement/videoDeviceMgmt/monitoringAndDebug.vue

@@ -23,47 +23,43 @@
       <!-- 方向控制 -->
       <div class="direction-control">
         <div class="direction-pad">
-          <el-button class="btn-up" @click="control('up')">
+          <el-button icon="el-icon-arrow-up" circle @click="control('up')">
-            <i class="el-icon-arrow-up"></i>
           </el-button>
           <div class="horizontal-buttons">
-            <el-button class="btn-left" @click="control('left')">
+            <el-button icon="el-icon-arrow-left" circle @click="control('left')">
-              <i class="el-icon-arrow-left"></i>
             </el-button>
-            <el-button class="btn-right" @click="control('right')">
+            <el-button icon="el-icon-arrow-right" circle @click="control('right')">
-              <i class="el-icon-arrow-right"></i>
             </el-button>
           </div>
-          <el-button class="btn-down" @click="control('down')">
+          <el-button icon="el-icon-arrow-down" circle @click="control('down')">
-            <i class="el-icon-arrow-down"></i>
           </el-button>
         </div>
 
         <!-- 缩放控制 -->
         <div class="zoom-controls">
           <div class="zoom-column">
-            <el-button @click="control('zoomIn')">
+            <el-button size="small" @click="control('zoomIn')">
               <i class="el-icon-plus"></i>
             </el-button>
-            <el-button @click="control('zoomOut')">
+            <el-button size="small" @click="control('zoomOut')">
               <i class="el-icon-minus"></i>
             </el-button>
             <div class="column-label">聚焦</div>
           </div>
           <div class="zoom-column">
-            <el-button @click="control('focusIn')">
+            <el-button size="small" @click="control('focusIn')">
               <i class="el-icon-plus"></i>
             </el-button>
-            <el-button @click="control('focusOut')">
+            <el-button size="small" @click="control('focusOut')">
               <i class="el-icon-minus"></i>
             </el-button>
             <div class="column-label">缩放</div>
           </div>
           <div class="zoom-column">
-            <el-button @click="control('lightUp')">
+            <el-button size="small" @click="control('lightUp')">
               <i class="el-icon-plus"></i>
             </el-button>
-            <el-button @click="control('lightDown')">
+            <el-button size="small" @click="control('lightDown')">
               <i class="el-icon-minus"></i>
             </el-button>
             <div class="column-label">光圈</div>
@@ -99,8 +95,8 @@
       <!-- 3D云台控制 -->
       <div class="cloud-control">
         <div class="cloud-buttons">
-          <el-button @click="toggleCloud">关闭云台</el-button>
+          <el-button @click="toggleCloud" round>关闭云台</el-button>
-          <el-button @click="startCloud">开启云台</el-button>
+          <el-button @click="startCloud" round>开启云台</el-button>
         </div>
       </div>
 
@@ -129,7 +125,7 @@
               <span>{{item.label}}</span>
               <input
                 v-model="item.key"
-                @keydown.native="handleKeyPress($event, rowIndex, colIndex)"
+                @keydown="handleKeyPress($event, rowIndex, colIndex)"
                 :maxlength="1"
                 class="key"
               ></input>
@@ -156,39 +152,27 @@ export default {
         line1: '',
         line2: ''
       },
-      keyMap: {
+      // 合并后的快捷键设置数据结构
-        'w': 'up',
-        's': 'down',
-        'a': 'left',
-        'd': 'right',
-        'q': 'zoomIn',
-        'e': 'zoomOut',
-        'r': 'focusIn',
-        't': 'focusOut',
-        'f': 'capture',
-        'g': 'record'
-      },
-      // 快捷键设置数据结构
       shortcutSettings: [
         [
-          { label: '上', key: 'W' },
+          { label: '上', key: 'W', action: 'up' },
-          { label: '放大', key: 'Q' }
+          { label: '放大', key: 'Q', action: 'zoomIn' }
         ],
         [
-          { label: '下', key: 'S' },
+          { label: '下', key: 'S', action: 'down' },
-          { label: '缩小', key: 'E' }
+          { label: '缩小', key: 'E', action: 'zoomOut' }
         ],
         [
-          { label: '左', key: 'A' },
+          { label: '左', key: 'A', action: 'left' },
-          { label: '远焦', key: 'R' }
+          { label: '远焦', key: 'R', action: 'focusIn' }
         ],
         [
-          { label: '右', key: 'D' },
+          { label: '右', key: 'D', action: 'right' },
-          { label: '近焦', key: 'T' }
+          { label: '近焦', key: 'T', action: 'focusOut' }
         ],
         [
-          { label: '抓拍', key: 'F' },
+          { label: '抓拍', key: 'F', action: 'capture' },
-          { label: '录像', key: 'G' }
+          { label: '录像', key: 'G', action: 'record' }
         ]
       ]
     }
@@ -210,15 +194,40 @@ export default {
       const key = event.key.toUpperCase();
       // 只允许字母键
       if (/^[A-Z]$/.test(key)) {
+        // 检查是否已经存在相同的键位
+        const isDuplicate = this.shortcutSettings.some(row =>
+          row.some(item => item.key === key && !(item.key === this.shortcutSettings[rowIndex][colIndex].key))
+        );
+
+        if (isDuplicate) {
+          this.$message.error('该键位已被使用，请选择其他键位');
+          return;
+        }
+
+        // 获取当前的键位
+        const oldKey = this.shortcutSettings[rowIndex][colIndex].key;
+
+        // 更新快捷键设置
         this.shortcutSettings[rowIndex][colIndex].key = key;
       }
     }
   },
+  computed: {
+    keyMap() {
+      return this.shortcutSettings.reduce((map, row) => {
+        row.forEach(item => {
+          map[item.key] = item.action;
+        });
+        return map;
+      }, {});
+    }
+  },
   mounted() {
     // 键盘事件监听
     window.addEventListener('keydown', (e) => {
-      if (this.keyMap[e.key]) {
+      const key = e.key.toUpperCase();
-        this.control(this.keyMap[e.key])
+      if (this.keyMap[key]) {
+        this.control(this.keyMap[key])
       }
     })
   }
@@ -290,7 +299,7 @@ export default {
 
 .horizontal-buttons {
   display: flex;
-  gap: 5px;
+  gap: 32px;
 }
 
 .zoom-controls {
@@ -312,6 +321,7 @@ export default {
 .cloud-buttons {
   display: flex;
   gap: 10px;
+  justify-content: space-evenly;
 }
 
 .view-controls {
@@ -336,6 +346,7 @@ export default {
 }
 
 .watermark-title{
+  cursor: pointer;
   font-size: 13px;
   display: flex;
   flex-direction: row-reverse;
@@ -379,6 +390,7 @@ export default {
   background: #f5f7fa;
   color: rgb(25, 190, 107);
   font-weight: bold;
+  text-align: center;
 }
 
 .control-title {
@@ -390,10 +402,16 @@ export default {
 }
 
 .el-button {
-  padding: 8px 15px;
+  padding: 8px 9px;
 }
 
 .el-button [class^="el-icon-"] {
   margin: 0;
 }
+
+.column-label{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
 </style>