飞行漫游录制功能

src/renderer/public/sdk/custom/css/index.css

@@ -816,8 +816,8 @@
 
 .fly-roam>.content .table .tr .th:nth-child(2),
 .fly-roam>.content .table .tr .td:nth-child(2) {
-  flex: 0 0 100px;
-  width: 100px;
+  flex: 0 0 180px;
+  width: 180px;
 }
 
 .fly-roam>.content .table .tr .th:last-child,

src/renderer/src/views/components/propertyBox/FlyRoam.vue

@@ -3,7 +3,7 @@
     ref="baseDialog"
     class="fly-roam"
     title="飞行漫游"
-    width="382px"
+    width="460px"
     left="180px"
     top="100px"
     :closeCallback="closeCallBack"
@@ -197,6 +197,9 @@
         <button class="cease" style="margin-left: 10px">
           <svg-icon name="stop" :size="12" color="rgba(255, 255, 255, 1)"></svg-icon>结束
         </button>
+        <button class="video" style="margin-left: 10px" @click="startVideo">
+          <svg-icon name="video" :size="12"></svg-icon>录制
+        </button>
       </div>
       <button class="saveRoam" @click="draw">保存</button>
       <button @click="close">取消</button>
@@ -213,6 +216,7 @@ import { app } from 'electron'
 import { TreeApi } from '@/api/tree'
 import { useTreeNode } from '../tree/hooks/treeNode'
 import { ElMessage } from 'element-plus'
+import { $sendElectronChanel } from '@/utils/communication'
 
 const { t } = useI18n()
 const { cusAddNodes } = useTreeNode()
@@ -271,6 +275,24 @@ const draw = (data) => {
   }
 }
 
+const startVideo = () => {
+  document.getElementById('earthContainer').style.zIndex = 100
+  $sendElectronChanel('startRecoder')
+  ElMessage({
+    message: '按ESC结束录制',
+    type: 'warning'
+  })
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      $sendElectronChanel('endRecoder')
+      window.removeEventListener('keydown', handleKeyDown)
+      document.getElementById('earthContainer').style.zIndex = ''
+    }
+  }
+  window.addEventListener('keydown', handleKeyDown)
+}
+
 const clangeViewPointHeight = () => {}
 const viewPointHeightInput = () => {
   let dom: any = document.getElementById('viewPointHeight')
@@ -321,6 +343,18 @@ defineExpose({
     fill: rgba(241, 108, 85, 1) !important;
   }
 }
+.video {
+  background:
+    linear-gradient(
+      180deg,
+      rgba(71, 27, 5, 0.3) 0%,
+      rgba(71, 27, 5, 0.3) 0%,
+      rgba(255, 143, 87, 0) 100%
+    ),
+    rgba(0, 0, 0, 0.5) !important;
+  border: 1px solid rgba(255, 165, 92, 1) !important;
+  color: rgba(255, 165, 92, 1) !important;
+}
 ::v-deep .content input.YJ-custom-checkbox[type='checkbox'] {
   border: 1px solid rgba(var(--color-base1), 1) !important;
   background-color: unset !important;