add multupstream && new select

This commit is contained in:
wjqserver 2025-06-20 17:04:14 +08:00
parent b10790c212
commit 30da719d57
4 changed files with 218 additions and 163 deletions

View file

@ -69,38 +69,57 @@
<form id="config-form">
<input type="hidden" id="original-filename" value="">
<div class="form-grid">
<fieldset>
<legend>基础配置</legend>
<div class="form-group">
<label for="domain">域名 (将用作文件名)</label>
<label for="domain">域名 (将用作文件名)</label>
<input type="text" id="domain" name="domain" required>
</div>
<div class="form-group">
<label>模板类型</label>
<div id="custom-select-tmpl" class="custom-select"></div>
</div>
</div>
<!-- 反向代理配置 -->
<fieldset id="upstream-fieldset" class="hidden">
<legend>反向代理 (Upstream)</legend>
<div class="form-group">
<label for="upstream">上游服务地址</label>
<input type="text" id="upstream" name="upstream" placeholder="例如: 127.0.0.1:8080">
</div>
<!-- 新增: 上游请求头配置区域 -->
<div class="sub-fieldset">
<p class="sub-legend">上游请求头 (Upstream Headers)</p>
<div id="upstream-headers-container"></div>
<button type="button" id="add-upstream-header-btn" class="btn btn-secondary btn-small">
<i class="fa-solid fa-plus"></i> 添加上游请求头
</button>
</fieldset>
<fieldset>
<legend>服务模式</legend>
<div id="service-mode-control" class="segmented-control">
<div id="segmented-control-slider"></div>
<button type="button" data-mode="none" class="active"></button>
<button type="button" data-mode="reverse_proxy">反向代理</button>
<button type="button" data-mode="file_server">文件服务</button>
</div>
</fieldset>
<fieldset id="upstream-fieldset" class="hidden">
<legend>反向代理配置</legend>
<!-- 单上游输入框, 在多上游模式下隐藏 -->
<div class="form-group" id="single-upstream-group">
<label for="upstream">上游服务地址</label>
<input type="text" id="upstream" name="upstream" placeholder="例如: 127.0.0.1:8080">
</div>
<!-- 多上游配置区域 -->
<div class="sub-fieldset">
<label class="custom-checkbox">
<input type="checkbox" id="muti_upstream" name="muti_upstream">
<span class="checkmark"></span> 启用多上游负载均衡
</label>
<div id="multi-upstream-group" class="hidden" style="margin-top: 16px;">
<p class="sub-legend">上游服务器列表</p>
<div id="multi-upstream-container"></div>
<button type="button" id="add-multi-upstream-btn" class="btn btn-secondary btn-small">
<i class="fa-solid fa-plus"></i> 添加上游服务器
</button>
</div>
</div>
<div class="sub-fieldset">
<p class="sub-legend">上游请求头 (Upstream Headers)</p>
<div id="upstream-headers-container"></div>
<button type="button" id="add-upstream-header-btn" class="btn btn-secondary btn-small"><i class="fa-solid fa-plus"></i> 添加上游请求头</button>
</div>
</fieldset>
<!-- 文件服务器配置 -->
<fieldset id="fileserver-fieldset" class="hidden">
<legend>文件服务 (File Server)</legend>
<legend>文件服务配置</legend>
<div class="form-group">
<label for="file_dir_path">根目录路径</label>
<input type="text" id="file_dir_path" name="file_dir_path" placeholder="例如: /srv/www">
@ -110,8 +129,7 @@
<span class="checkmark"></span> 启用文件浏览器
</label>
</fieldset>
<!-- 全局请求头 -->
<fieldset id="headers-fieldset">
<legend>全局请求头 (Headers)</legend>
<div id="headers-container"></div>
@ -119,7 +137,7 @@
</fieldset>
<fieldset>
<legend>功能开关</legend>
<legend>附加功能</legend>
<div class="checkbox-grid">
<label class="custom-checkbox"><input type="checkbox" id="enable_log" name="enable_log"><span class="checkmark"></span> 启用日志</label>
<label class="custom-checkbox"><input type="checkbox" id="enable_error_page" name="enable_error_page"><span class="checkmark"></span> 启用错误页</label>