feat: add zoom controls to PtzControlPanel with zoom in and zoom out functionality

html/NextGB/src/views/realplay/PtzControlPanel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { ArrowRight, VideoCamera } from '@element-plus/icons-vue'
+import { ArrowRight, VideoCamera, ZoomIn, ZoomOut } from '@element-plus/icons-vue'
 import {
   ArrowUp,
   ArrowDown,
@@ -158,6 +158,27 @@ const isDisabled = computed(() => !props.activeWindow)
               <div class="direction-center"></div>
             </div>
           </div>
+          <div class="zoom-controls">
+            <el-button
+              class="zoom-btn"
+              :disabled="isDisabled"
+              @mousedown="handlePtzStart('zoom_in')"
+              @mouseup="handlePtzStop"
+              @mouseleave="handlePtzStop"
+            >
+              <el-icon><ZoomIn /></el-icon>
+            </el-button>
+            <div class="zoom-label">变倍</div>
+            <el-button
+              class="zoom-btn"
+              :disabled="isDisabled"
+              @mousedown="handlePtzStart('zoom_out')"
+              @mouseup="handlePtzStop"
+              @mouseleave="handlePtzStop"
+            >
+              <el-icon><ZoomOut /></el-icon>
+            </el-button>
+          </div>
           <div class="speed-control">
             <div class="speed-value">{{ speed }}</div>
             <el-slider
@@ -346,6 +367,48 @@ const isDisabled = computed(() => !props.activeWindow)
   border-radius: 4px;
 }
 
+.zoom-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  height: 120px;
+  justify-content: center;
+}
+
+.zoom-btn {
+  --el-button-bg-color: var(--el-color-primary-light-8);
+  --el-button-border-color: var(--el-color-primary-light-5);
+  --el-button-hover-bg-color: var(--el-color-primary-light-7);
+  --el-button-hover-border-color: var(--el-color-primary-light-4);
+  --el-button-active-bg-color: var(--el-color-primary-light-5);
+  --el-button-active-border-color: var(--el-color-primary);
+
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  margin: 0;
+  border-radius: 4px;
+  
+  .el-icon {
+    font-size: 18px;
+  }
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.zoom-label {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  font-weight: 500;
+}
+
 .control-groups,
 .control-group {
   display: none;