Преглед изворни кода

修改地图默认大小图标显示文字,步进模式交互:
- 锁定时间从行内块改为居中弹窗(position:absolute 覆盖面板,flex 居中)
- 弹窗取消/确认不再退出手动控制状态,新增独立方法 onLockTimeCancel/onLockTimeConfirm
- 点击遮罩可关闭弹窗

画安 пре 1 недеља
родитељ
комит
c1a746d309
2 измењених фајлова са 77 додато и 35 уклоњено
  1. 2 2
      src/components/TongzhouTrafficMap.vue
  2. 75 33
      src/components/ui/CrossingDetailPanel.vue

+ 2 - 2
src/components/TongzhouTrafficMap.vue

@@ -186,8 +186,8 @@ export default {
       const specialSize = Math.max(16, size * 1.5);
       return {
         '--dot-size': `${size}px`,
-        '--dot-padding': size >= 14 ? '2px' : '0px',
-        '--text-display': size >= 14 ? 'flex' : 'none',
+        '--dot-padding': size >= 12 ? '2px' : '0px',
+        '--text-display': size >= 12 ? 'flex' : 'none',
         '--text-size': `${Math.max(10, size - 2)}px`,
         '--special-size': `${specialSize}px`
       };

+ 75 - 33
src/components/ui/CrossingDetailPanel.vue

@@ -123,35 +123,6 @@
                                 </div>
                             </div>
 
-                            <transition name="fade">
-                                <div class="lock-time" v-if="showLockTime">
-                                    <div class="lock-time-label-wrap glow-header">
-                                        <div class="lock-time-label">锁定时间</div>
-                                        <div class="lock-time-close" @click="showLockTime = false">✕</div>
-                                    </div>
-                                    <div class="lock-time-options">
-                                        <div class="lock-time-option">
-                                            <label>
-                                                <input type="radio" v-model="lockTimeType" value="continuous" /> 持续放行
-                                            </label>
-                                        </div>
-                                        <div class="lock-time-option">
-                                            <label>
-                                                <input type="radio" v-model="lockTimeType" value="timer" /> 放行
-                                                <DropdownSelect placeholder="锁定时间" v-model="currentLocktime"
-                                                    :options="locktimeOptions" size="auto" @click.native.prevent />
-                                                秒解锁
-                                            </label>
-                                        </div>
-                                    </div>
-                                    <div class="lock-time-actions" v-if="currentMethod === 'step'">
-                                        <button type="button" class="btn btn-cancel"
-                                            @click="onCancel()">取消</button>
-                                        <button type="button" class="btn btn-confirm"
-                                            @click="onConfirm()">确认</button>
-                                    </div>
-                                </div>
-                            </transition>
                         </div>
                     </div>
 
@@ -165,6 +136,38 @@
                 </div>
             </form>
         </div>
+        <!-- 步进锁定时间居中弹窗 -->
+        <transition name="fade">
+            <div class="lock-time-overlay" v-if="showLockTime" @click.self="showLockTime = false">
+                <div class="lock-time-modal">
+                    <div class="lock-time-label-wrap glow-header">
+                        <div class="lock-time-label">锁定时间</div>
+                        <div class="lock-time-close" @click="showLockTime = false">✕</div>
+                    </div>
+                    <div class="lock-time-options">
+                        <div class="lock-time-option">
+                            <label>
+                                <input type="radio" v-model="lockTimeType" value="continuous" /> 持续放行
+                            </label>
+                        </div>
+                        <div class="lock-time-option">
+                            <label>
+                                <input type="radio" v-model="lockTimeType" value="timer" /> 放行
+                                <DropdownSelect placeholder="锁定时间" v-model="currentLocktime"
+                                    :options="locktimeOptions" size="auto" @click.native.prevent />
+                                秒解锁
+                            </label>
+                        </div>
+                    </div>
+                    <div class="lock-time-actions">
+                        <button type="button" class="btn btn-cancel"
+                            @click="onLockTimeCancel">取消</button>
+                        <button type="button" class="btn btn-confirm"
+                            @click="onLockTimeConfirm">确认</button>
+                    </div>
+                </div>
+            </div>
+        </transition>
     </div>
 </template>
 
@@ -478,11 +481,28 @@ export default {
             }
         },
 
-        // 取消按钮
+        // 取消按钮(退出手动控制)
         onCancel() {
             this.isManualMode = false;
             this.showLockTime = false;
-            // 可以在此添加回滚初始数据的逻辑
+        },
+
+        // 步进锁定时间弹窗:取消(不退出手动控制)
+        onLockTimeCancel() {
+            this.showLockTime = false;
+        },
+
+        // 步进锁定时间弹窗:确认(不退出手动控制)
+        onLockTimeConfirm() {
+            this.showLockTime = false;
+            const submitData = {
+                method: 'step',
+                stage: this.currentStage,
+                lockTimeType: this.lockTimeType,
+                locktime: this.lockTimeType === 'timer' ? this.currentLocktime : null,
+            };
+            console.log('步进指令:', submitData);
+            this.$emit('confirm', submitData);
         },
 
         // 需求5:点击确认按钮提交 + 表单验证
@@ -750,11 +770,33 @@ export default {
     color: #ffffff;
 }
 
+/* 步进锁定时间居中弹窗遮罩 */
+.lock-time-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 200;
+    border-radius: inherit;
+}
+
+.lock-time-modal {
+    background: linear-gradient(135deg, rgba(10, 25, 60, 0.97) 0%, rgba(20, 40, 90, 0.97) 100%);
+    border: 1px solid rgba(161, 190, 255, 0.3);
+    border-radius: 6px;
+    min-width: 220px;
+    max-width: 320px;
+    width: 70%;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+}
+
 .lock-time-actions {
     display: flex;
     justify-content: flex-end;
-    gap: clamp(4px, calc(var(--s) * 8px), 8px);
-    padding: clamp(4px, calc(var(--s) * 8px), 8px) clamp(4px, calc(var(--s) * 10px), 10px);
+    gap: 8px;
+    padding: 8px 12px;
     border-top: 1px solid rgba(161, 190, 255, 0.15);
 }