主界面弹窗位置优化

This commit is contained in:
2026-08-03 21:42:03 +08:00
parent 51b1600c68
commit c24347cbcf
+31 -29
View File
@@ -100,7 +100,8 @@
<!-- Ping 延迟显示 --> <!-- Ping 延迟显示 -->
<span class="ping-display" :class="pingStatusClass"> <span class="ping-display" :class="pingStatusClass">
<span class="ping-icon" v-html="pingIcon"></span> <span class="ping-icon" v-html="pingIcon"></span>
<span class="ping-value">{{ pingLatency !== null ? pingLatency + 'ms' : '--ms' }}</span> <span class="ping-value">{{ pingLatency !== null ? pingLatency + 'ms' : '--ms'
}}</span>
</span> </span>
</span> </span>
</div> </div>
@@ -343,34 +344,7 @@
</div> <!-- /content-area --> </div> <!-- /content-area -->
<!-- ====== 弹窗 ====== --> <!-- ====== 弹窗 ====== -->
<Transition name="dialog">
<div v-if="dialogVisible" class="dialog-overlay" @click.self="dialogVisible = false">
<div class="dialog-card">
<h3>{{ dialogMode === 'add' ? '新增隧道' : '编辑隧道' }}</h3>
<div class="dialog-form">
<div class="form-row"><label>名称</label><input v-model="dialogForm.name" /></div>
<div class="form-row">
<label>类型</label>
<select v-model="dialogForm.type">
<option value="tcp">tcp</option>
<option value="udp">udp</option>
<option value="http">http</option>
<option value="https">https</option>
</select>
</div>
<div class="form-row"><label>本地 IP</label><input v-model="dialogForm.localIP" /></div>
<div class="form-row"><label>本地端口</label><input type="number" v-model="dialogForm.localPort" />
</div>
<div class="form-row"><label>远程端口</label><input type="number" v-model="dialogForm.remotePort" />
</div>
</div>
<div class="dialog-actions">
<button class="btn-cancel" @click="dialogVisible = false">取消</button>
<button class="btn-confirm" @click="confirmDialog">确认</button>
</div>
</div>
</div>
</Transition>
</div> <!-- /main-panel --> </div> <!-- /main-panel -->
</div> <!-- /app-container --> </div> <!-- /app-container -->
@@ -378,6 +352,34 @@
<!-- 隐藏文件选择器 --> <!-- 隐藏文件选择器 -->
<input type="file" id="tomlFileInput" accept=".toml" style="display:none" @change="handleImport" /> <input type="file" id="tomlFileInput" accept=".toml" style="display:none" @change="handleImport" />
<Transition name="dialog">
<div v-if="dialogVisible" class="dialog-overlay" @click.self="dialogVisible = false">
<div class="dialog-card">
<h3>{{ dialogMode === 'add' ? '新增隧道' : '编辑隧道' }}</h3>
<div class="dialog-form">
<div class="form-row"><label>名称</label><input v-model="dialogForm.name" /></div>
<div class="form-row">
<label>类型</label>
<select v-model="dialogForm.type">
<option value="tcp">tcp</option>
<option value="udp">udp</option>
<option value="http">http</option>
<option value="https">https</option>
</select>
</div>
<div class="form-row"><label>本地 IP</label><input v-model="dialogForm.localIP" /></div>
<div class="form-row"><label>本地端口</label><input type="number" v-model="dialogForm.localPort" />
</div>
<div class="form-row"><label>远程端口</label><input type="number" v-model="dialogForm.remotePort" />
</div>
</div>
<div class="dialog-actions">
<button class="btn-cancel" @click="dialogVisible = false">取消</button>
<button class="btn-confirm" @click="confirmDialog">确认</button>
</div>
</div>
</div>
</Transition>
</div> <!-- /#app --> </div> <!-- /#app -->
<script src="/static/app.js"></script> <script src="/static/app.js"></script>