@yangyongtao/gaea 1.1.10 → 1.1.12

package/src/components/CommonDialog.vue

@@ -0,0 +1,289 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="dialogVisible"
+      class="common-dialog-overlay"
+      :class="{ 'overlay-enter': showAnimation }"
+      @click="handleOverlayClick"
+    >
+      <div
+        class="common-dialog-container"
+        :class="{ 'dialog-enter': showAnimation }"
+        :style="{ width: width + 'px', height: height + 'px' }"
+        @click.stop
+      >
+        <!-- 头部 -->
+        <div class="dialog-header" v-if="showHeader">
+          <span class="dialog-title">{{ title }}</span>
+          <span class="dialog-close" v-if="closable" @click="handleClose">✕</span>
+        </div>
+
+        <!-- 内容区 -->
+        <div class="dialog-body" :style="{ maxHeight: maxHeight + 'px' }">
+          <slot />
+        </div>
+
+        <!-- 底部 -->
+        <div class="dialog-footer" v-if="showFooter">
+          <slot name="footer">
+            <button class="dialog-btn btn-cancel" v-if="showCancelBtn" @click="handleCancel">
+              {{ cancelText }}
+            </button>
+            <button class="dialog-btn btn-confirm" :disabled="confirmLoading" @click="handleConfirm">
+              <span v-if="confirmLoading" class="loading-spinner"></span>
+              {{ confirmText }}
+            </button>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, watch, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+  // v-model:visible
+  modelValue: { type: Boolean, default: false },
+  title: { type: String, default: '提示' },
+  width: { type: [String, Number], default: 1662 },
+  height: { type: [String, Number], default: 773 },
+  maxHeight: { type: [String, Number], default: 647 },
+  // 显示控制
+  showHeader: { type: Boolean, default: true },
+  showFooter: { type: Boolean, default: false },
+  showCancelBtn: { type: Boolean, default: true },
+  closable: { type: Boolean, default: true },
+  // 按钮文案
+  confirmText: { type: String, default: '确认' },
+  cancelText: { type: String, default: '取消' },
+  // 行为
+  closeOnOverlay: { type: Boolean, default: true },
+  confirmLoading: { type: Boolean, default: false },
+  // 确认后是否自动关闭
+  autoCloseOnConfirm: { type: Boolean, default: true },
+});
+
+const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'close']);
+
+const dialogVisible = ref(false);
+const showAnimation = ref(false);
+let timer = null;
+
+watch(() => props.modelValue, (val) => {
+  if (val) {
+    dialogVisible.value = true;
+    // 下一帧触发动画
+    timer = setTimeout(() => { showAnimation.value = true; }, 16);
+    document.body.style.overflow = 'hidden';
+  } else {
+    showAnimation.value = false;
+    timer = setTimeout(() => {
+      dialogVisible.value = false;
+    }, 300);
+    document.body.style.overflow = '';
+  }
+}, { immediate: true });
+
+onBeforeUnmount(() => {
+  document.body.style.overflow = '';
+  clearTimeout(timer);
+});
+
+function close() {
+  emit('close');
+  emit('update:modelValue', false);
+}
+
+function handleOverlayClick() {
+  if (props.closeOnOverlay && props.closable) close();
+}
+
+function handleClose() {
+  if (props.closable) close();
+}
+
+function handleCancel() {
+  emit('cancel');
+  close();
+}
+
+function handleConfirm() {
+  if (props.confirmLoading) return;
+  emit('confirm');
+  if (props.autoCloseOnConfirm) close();
+}
+</script>
+
+<style lang="less" scoped>
+@font-face {
+  font-family: 'youshebiaotihei';
+  src: url('/font/youshebiaotihei.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.common-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999999;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+
+  &.overlay-enter {
+    opacity: 1;
+  }
+}
+
+.common-dialog-container {
+  background: url('/image/CommonDialog/弹窗_bg.png') no-repeat center;
+  background-size: 100% 100%;
+  padding: 30px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  &.dialog-enter {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+// 头部
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  padding: 0 16px;
+  border-radius: 8px 8px 0 0;
+  user-select: none;
+  background: url('/image/CommonDialog/弹窗标题背景.png') no-repeat center;
+  background-size: 100% 100%;
+
+  .dialog-title {
+    font-family: 'youshebiaotihei';
+    font-size: 24px;
+    font-weight: normal;
+    color: #fff;
+    letter-spacing: 1px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 40px;
+      height: 40px;
+      background: url('/image/CommonDialog/弹窗标题装饰@2x.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+
+  .dialog-close {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.15);
+      color: #fff;
+    }
+  }
+}
+
+// 内容区
+.dialog-body {
+  padding: 20px 24px;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
+  overflow-y: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #0088FF;
+    border-radius: 2px;
+  }
+}
+
+// 底部
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 12px 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+
+  .dialog-btn {
+    padding: 7px 22px;
+    border-radius: 4px;
+    font-size: 13px;
+    cursor: pointer;
+    border: none;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    &.btn-cancel {
+      background: rgba(255, 255, 255, 0.1);
+      color: rgba(255, 255, 255, 0.8);
+      border: 1px solid rgba(255, 255, 255, 0.15);
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+    }
+
+    &.btn-confirm {
+      background: #3b82f6;
+      color: #fff;
+
+      &:hover {
+        background: #2563eb;
+      }
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+    }
+
+    .loading-spinner {
+      width: 14px;
+      height: 14px;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      border-top-color: #fff;
+      border-radius: 50%;
+      animation: spin 0.6s linear infinite;
+    }
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/FlyAlongRoute.vue

@@ -30,13 +30,12 @@
       </div>
 
       <div class="empty-tip" v-else>
-        暂无飞行点位，请通过地图点击或手动输入添加
+        暂无飞行点位，请开启"地图拾取坐标"后点击地图添加
       </div>
 
-      <!-- 新增点位 -->
+      <!-- 添加点位：统一使用地图拾取 -->
       <div class="form-section">
         <h4>添加点位</h4>
-        <!-- 地图拾取模式开关 -->
         <div class="pick-row">
           <button class="btn" :class="isPicking ? 'btn-picking-active' : 'btn-picking'" @click="togglePickMode">
             <i class="fas" :class="isPicking ? 'fa-check-circle' : 'fa-map-marker-alt'"></i>
@@ -45,27 +44,14 @@
         </div>
         <div class="form-row">
           <div class="form-group">
-            <label>名称</label>
-            <input type="text" v-model="inputName" class="form-control" placeholder="点位名称" />
-          </div>
-        </div>
-        <div class="form-row">
-          <div class="form-group">
-            <label>经度</label>
-            <input type="number" v-model.number="inputLng" class="form-control" placeholder="点击地图或手动输入"
-              step="0.000001" />
+            <label>飞行高度(m)</label>
+            <input type="number" v-model.number="flightHeight" class="form-control" min="0" step="10" placeholder="飞行高度" />
           </div>
           <div class="form-group">
-            <label>纬度</label>
-            <input type="number" v-model.number="inputLat" class="form-control" placeholder="点击地图或手动输入"
-              step="0.000001" />
-          </div>
-          <div class="form-group">
-            <label>高度(m)</label>
-            <input type="number" v-model.number="inputAlt" class="form-control" placeholder="高度" />
+            <label>飞行时长(秒)</label>
+            <input type="number" v-model.number="flightDuration" class="form-control" min="1" step="1" placeholder="飞行时长" />
           </div>
         </div>
-        <button class="btn btn-add" @click="addManualWaypoint">添加点位</button>
       </div>
 
       <!-- 飞行控制 -->
@@ -105,11 +91,10 @@ const currentIndex = ref(-1);
 const isFlying = ref(false);
 const isFlyOver = ref(false);
 
-// 手动输入
-const inputName = ref('');
-const inputLng = ref(null);
-const inputLat = ref(null);
-const inputAlt = ref(500);
+// 固定飞行高度（避免拾取时高度随地形累加），可在面板中调整
+const flightHeight = ref(150);
+// 飞行时长（秒），可在面板中调整
+const flightDuration = ref(20);
 
 // 地图拾取模式
 const isPicking = ref(false);
@@ -149,7 +134,7 @@ const togglePickMode = () => {
           name: `点位 ${waypoints.value.length + 1}`,
           lat: +pos.lat.toFixed(6),
           lng: +pos.lng.toFixed(6),
-          alt: +pos.alt.toFixed(1) || 500,
+          alt: Number(flightHeight.value) || 150,
         });
       }
     };
@@ -171,22 +156,6 @@ const removeCanvasListener = () => {
   }
 };
 
-// 手动添加点位
-const addManualWaypoint = () => {
-  if (inputLng.value == null || inputLat.value == null) return;
-  const name = inputName.value || `点位 ${waypoints.value.length + 1}`;
-  waypoints.value.push({
-    name,
-    lat: inputLat.value,
-    lng: inputLng.value,
-    alt: inputAlt.value || 500,
-  });
-  inputName.value = '';
-  inputLng.value = null;
-  inputLat.value = null;
-  inputAlt.value = 500;
-};
-
 // 删除点位
 const removeWaypoint = (index) => {
   waypoints.value.splice(index, 1);
@@ -217,11 +186,11 @@ const startFlight = async () => {
     const lineData = waypoints.value.map(wp => ({
       x: wp.lat,
       y: wp.lng,
-      z: 150
+      z: Number(flightHeight.value) || 150
     }));
 
     await APP.flyAlongPath(lineData, {
-      duration: 20.0,
+      duration: Number(flightDuration.value) > 0 ? Number(flightDuration.value) : 20,
       xrotation: 30,
       lockEye: false
     });
@@ -278,7 +247,7 @@ onBeforeUnmount(() => {
   position: absolute;
   top: 100px;
   left: 600px;
-  z-index: 2000;
+  z-index: 10000;
   width: 380px;
   background: rgba(15, 23, 42, 0.95);
   border-radius: 12px;
@@ -369,6 +338,27 @@ onBeforeUnmount(() => {
 .waypoint-list {
   max-height: 200px;
   overflow-y: auto;
+  padding-right: 4px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(59, 130, 246, 0.6) transparent;
+}
+
+.waypoint-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.waypoint-list::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 3px;
+}
+
+.waypoint-list::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, rgba(59, 130, 246, 0.7), rgba(6, 182, 212, 0.7));
+  border-radius: 3px;
+}
+
+.waypoint-list::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, rgba(59, 130, 246, 1), rgba(6, 182, 212, 1));
 }
 
 .waypoint-item {