主界面弹窗位置优化
This commit is contained in:
+31
-29
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user