优化创建网站服务界面

internal/web/actions/default/servers/create.go

@@ -36,24 +36,6 @@ func (this *CreateAction) RunGet(params struct{}) {
 	}
 	this.Data["countAuditing"] = countAuditingResp.Count
 
-	// 所有集群
-	resp, err := this.RPC().NodeClusterRPC().FindAllEnabledNodeClusters(this.AdminContext(), &pb.FindAllEnabledNodeClustersRequest{})
-	if err != nil {
-		this.ErrorPage(err)
-	}
-	if err != nil {
-		this.ErrorPage(err)
-		return
-	}
-	clusterMaps := []maps.Map{}
-	for _, cluster := range resp.NodeClusters {
-		clusterMaps = append(clusterMaps, maps.Map{
-			"id":   cluster.Id,
-			"name": cluster.Name,
-		})
-	}
-	this.Data["clusters"] = clusterMaps
-
 	// 服务类型
 	this.Data["serverTypes"] = serverconfigs.AllServerTypes()
 
@@ -95,10 +77,6 @@ func (this *CreateAction) RunPost(params struct {
 
 	Must *actions.Must
 }) {
-	params.Must.
-		Field("name", params.Name).
-		Require("请输入服务名称")
-
 	var clusterId = params.ClusterId
 
 	// 用户
@@ -129,7 +107,7 @@ func (this *CreateAction) RunPost(params struct {
 
 	switch params.ServerType {
 	case serverconfigs.ServerTypeHTTPProxy, serverconfigs.ServerTypeHTTPWeb:
-		listen := []*serverconfigs.NetworkAddressConfig{}
+		var listen = []*serverconfigs.NetworkAddressConfig{}
 		err := json.Unmarshal([]byte(params.Addresses), &listen)
 		if err != nil {
 			this.Fail("端口地址解析失败：" + err.Error())
@@ -166,7 +144,7 @@ func (this *CreateAction) RunPost(params struct {
 			this.Fail("DEMO模式下不能创建TCP反向代理")
 		}
 
-		listen := []*serverconfigs.NetworkAddressConfig{}
+		var listen = []*serverconfigs.NetworkAddressConfig{}
 		err := json.Unmarshal([]byte(params.Addresses), &listen)
 		if err != nil {
 			this.Fail("端口地址解析失败：" + err.Error())
@@ -197,13 +175,17 @@ func (this *CreateAction) RunPost(params struct {
 				tlsConfig.AddListen(addr)
 			}
 		}
+
+		if len(params.Name) == 0 {
+			params.Name = "TCP负载均衡"
+		}
 	case serverconfigs.ServerTypeUDPProxy:
 		// 在DEMO模式下不能创建
 		if teaconst.IsDemoMode {
 			this.Fail("DEMO模式下不能创建UDP反向代理")
 		}
 
-		listen := []*serverconfigs.NetworkAddressConfig{}
+		var listen = []*serverconfigs.NetworkAddressConfig{}
 		err := json.Unmarshal([]byte(params.Addresses), &listen)
 		if err != nil {
 			this.Fail("端口地址解析失败：" + err.Error())
@@ -225,6 +207,10 @@ func (this *CreateAction) RunPost(params struct {
 				udpConfig.AddListen(addr)
 			}
 		}
+
+		if len(params.Name) == 0 {
+			params.Name = "UDP负载均衡"
+		}
 	default:
 		this.Fail("请选择正确的服务类型")
 	}
@@ -282,8 +268,13 @@ func (this *CreateAction) RunPost(params struct {
 		}
 
 		// 检查域名是否已经存在
-		allServerNames := serverconfigs.PlainServerNames(serverNames)
+		var allServerNames = serverconfigs.PlainServerNames(serverNames)
 		if len(allServerNames) > 0 {
+			// 指定默认名称
+			if len(params.Name) == 0 {
+				params.Name = allServerNames[0]
+			}
+
 			dupResp, err := this.RPC().ServerRPC().CheckServerNameDuplicationInNodeCluster(this.AdminContext(), &pb.CheckServerNameDuplicationInNodeClusterRequest{
 				ServerNames:   allServerNames,
 				NodeClusterId: clusterId,

web/public/js/components/common/network-addresses-box.js

@@ -24,7 +24,8 @@ Vue.component("network-addresses-box", {
 			addresses: addresses,
 			protocol: protocol,
 			name: name,
-			from: from
+			from: from,
+			isEditing: false
 		}
 	},
 	watch: {
@@ -39,6 +40,8 @@ Vue.component("network-addresses-box", {
 	},
 	methods: {
 		addAddr: function () {
+			this.isEditing = true
+
 			let that = this
 			window.UPDATING_ADDR = null
 
@@ -106,17 +109,31 @@ Vue.component("network-addresses-box", {
 		},
 		supportRange: function () {
 			return this.vSupportRange || (this.vServerType == "tcpProxy" || this.vServerType == "udpProxy")
+		},
+		edit: function () {
+			this.isEditing = true
 		}
 	},
 	template: `<div>
 	<input type="hidden" :name="name" :value="JSON.stringify(addresses)"/>
-	<div v-if="addresses.length > 0">
-		<div class="ui label small basic" v-for="(addr, index) in addresses">
-			{{addr.protocol}}://<span v-if="addr.host.length > 0">{{addr.host.quoteIP()}}</span><span v-if="addr.host.length == 0">*</span>:<span v-if="addr.portRange.indexOf('-')<0">{{addr.portRange}}</span><span v-else style="font-style: italic">{{addr.portRange}}</span>
-			<a href="" @click.prevent="updateAddr(index, addr)" title="修改"><i class="icon pencil small"></i></a>
-			<a href="" @click.prevent="removeAddr(index)" title="删除"><i class="icon remove"></i></a> </div>
-		<div class="ui divider"></div>
+	<div v-show="!isEditing">
+		<div v-if="addresses.length > 0">
+			<div class="ui label small basic" v-for="(addr, index) in addresses">
+				{{addr.protocol}}://<span v-if="addr.host.length > 0">{{addr.host.quoteIP()}}</span><span v-if="addr.host.length == 0">*</span>:<span v-if="addr.portRange.indexOf('-')<0">{{addr.portRange}}</span><span v-else style="font-style: italic">{{addr.portRange}}</span>
+			</div>
+			&nbsp; &nbsp; <a href="" @click.prevent="edit" style="font-size: 0.9em">[修改]</a>
+		</div>	
+	</div>
+	<div v-show="isEditing || addresses.length == 0">
+		<div v-if="addresses.length > 0">
+			<div class="ui label small basic" v-for="(addr, index) in addresses">
+				{{addr.protocol}}://<span v-if="addr.host.length > 0">{{addr.host.quoteIP()}}</span><span v-if="addr.host.length == 0">*</span>:<span v-if="addr.portRange.indexOf('-')<0">{{addr.portRange}}</span><span v-else style="font-style: italic">{{addr.portRange}}</span>
+				<a href="" @click.prevent="updateAddr(index, addr)" title="修改"><i class="icon pencil small"></i></a>
+				<a href="" @click.prevent="removeAddr(index)" title="删除"><i class="icon remove"></i></a> 
+			</div>
+			<div class="ui divider"></div>
+		</div>
+		<a href="" @click.prevent="addAddr()">[添加端口绑定]</a>
 	</div>
-	<a href="" @click.prevent="addAddr()">[添加端口绑定]</a>
 </div>`
 })

web/views/@default/servers/addOriginPopup.html

@@ -5,7 +5,7 @@
 <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
 	<table class="ui table selectable definition">
 		<tr>
-			<td>源站协议</td>
+			<td>源站协议 *</td>
 			<td>
 				<!-- HTTP -->
 				<select class="ui dropdown auto-width" name="protocol" v-if="serverType == 'httpProxy' || serverType == 'httpWeb'" @change="changeProtocol" v-model="protocol">
@@ -32,6 +32,13 @@
 				<p class="comment"><span class="red" v-if="addrError.length > 0">{{addrError}}</span>源站服务器地址，通常是一个IP（或域名）加端口<span v-if="serverType == 'httpProxy'">，不需要加 http:// 或 https://</span>。</p>
 			</td>
 		</tr>
+        <tr v-if="isHTTP || protocol == 'tls'">
+            <td>回源主机名</td>
+            <td>
+                <input type="text" name="host" placeholder="比如example.com" maxlength="100"/>
+                <p class="comment">请求源站时的Host字段值，用于修改源站接收到的域名<span v-if="isHTTP">，支持请求变量</span>。</p>
+            </td>
+        </tr>
         <tr>
             <td colspan="2"><more-options-indicator></more-options-indicator></td>
         </tr>
@@ -42,13 +49,6 @@
                     <ssl-certs-box :v-single-mode="true" :v-view-size="'mini'" :v-description="'可以选择连接源站使用的证书。'"></ssl-certs-box>
                 </td>
             </tr>
-            <tr v-if="isHTTP || protocol == 'tls'">
-                <td>回源主机名</td>
-                <td>
-                    <input type="text" name="host" placeholder="比如example.com" maxlength="100"/>
-                    <p class="comment">请求源站时的Host，用于修改源站接收到的域名<span v-if="isHTTP">，自定义Host内容中支持请求变量</span>。</p>
-                </td>
-            </tr>
             <tr v-if="isHTTP">
                 <td>专属域名</td>
                 <td>

web/views/@default/servers/create.css

@@ -1,4 +1,25 @@
 .label em {
   font-style: italic !important;
 }
+.checkboxes .checkbox {
+  float: left;
+  margin-bottom: 1em;
+  margin-right: 1em;
+}
+@media screen and (min-width: 1024px) {
+  .tables-box {
+    width: 1024px;
+  }
+  .tables-box .table-box {
+    width: 48%;
+    float: left;
+  }
+  .tables-box .table-box.right {
+    margin-left: 1em;
+    opacity: 0.3;
+  }
+  .tables-box .table-box.right:hover {
+    opacity: 1;
+  }
+}
 /*# sourceMappingURL=create.css.map */

web/views/@default/servers/create.css.map

@@ -1 +1 @@
-{"version":3,"sources":["create.less"],"names":[],"mappings":"AAAA,MAAO;EACN,6BAAA","file":"create.css"}
+{"version":3,"sources":["create.less"],"names":[],"mappings":"AAAA,MAAO;EACN,6BAAA;;AAGD,WACC;EACC,WAAA;EACA,kBAAA;EACA,iBAAA;;AAIF,mBAAsC;EACrC;IACC,aAAA;;EADD,WAGC;IACC,UAAA;IACA,WAAA;;EALF,WAQC,WAAU;IACT,gBAAA;IACA,YAAA;;EAVF,WAaC,WAAU,MAAM;IACf,UAAA","file":"create.css"}

web/views/@default/servers/create.html

@@ -4,138 +4,131 @@
 <div class="margin"></div>
 
 <form method="post" class="ui form" data-tea-action="$" data-tea-success="success" data-tea-fail="fail">
-    <table class="ui table selectable definition">
-		<tr>
-			<td class="title">服务名称 *</td>
-			<td>
-				<input type="text" name="name" maxlength="60" ref="focus"/>
-                <p class="comment">可以是网站用途或者域名等。</p>
-			</td>
-		</tr>
-        <tr v-show="hasUsers">
-            <td>所属用户<optional-label></optional-label></td>
-            <td>
-                <user-selector @change="changeUserId"></user-selector>
-                <p class="comment">当前服务所属平台用户。</p>
-            </td>
-        </tr>
-        <tr v-if="plans.length > 0">
-            <td>选择套餐</td>
-            <td>
-                <select class="ui dropdown auto-width" name="userPlanId">
-                    <option value="0">[选择套餐]</option>
-                    <option v-for="plan in plans" :value="plan.id">{{plan.name}}（{{plan.dayTo}}）</option>
-                </select>
-            </td>
-        </tr>
-		<tr>
-			<td>部署的集群 *</td>
-			<td>
-                <div v-if="userId == 0">
-                    <select class="ui dropdown auto-width" name="clusterId">
-                        <option v-for="cluster in clusters" :value="cluster.id">{{cluster.name}}</option>
-                    </select>
-                    <p class="comment">当前服务将会部署到所选集群的节点上。</p>
-                </div>
-                <div v-else>跟随用户设置。</div>
-			</td>
-		</tr>
+    <div class="tables-box">
+        <div class="table-box">
+            <table class="ui table selectable definition">
+                <tr v-show="hasUsers">
+                    <td>所属用户<optional-label></optional-label></td>
+                    <td>
+                        <user-selector @change="changeUserId"></user-selector>
+                        <p class="comment">当前服务所属平台用户。</p>
+                    </td>
+                </tr>
+                <tr v-if="plans.length > 0">
+                    <td>选择套餐</td>
+                    <td>
+                        <select class="ui dropdown auto-width" name="userPlanId">
+                            <option value="0">[选择套餐]</option>
+                            <option v-for="plan in plans" :value="plan.id">{{plan.name}}（{{plan.dayTo}}）</option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td>部署的集群 *</td>
+                    <td>
+                        <div v-if="userId == 0">
+                            <node-cluster-combo-box></node-cluster-combo-box>
+                            <p class="comment">当前服务将会部署到所选集群的节点上。</p>
+                        </div>
+                        <div v-else>跟随用户设置。</div>
+                    </td>
+                </tr>
 
-        <!-- 域名 -->
-        <tr v-if="serverType == 'httpProxy' || serverType == 'httpWeb'">
-            <td>绑定域名 *</td>
-            <td>
-                <server-name-box ref="serverNameBox"></server-name-box>
-                <p class="comment">绑定后，才能通过域名可以访问不同的服务。</p>
-            </td>
-        </tr>
+                <!-- 域名 -->
+                <tr v-if="serverType == 'httpProxy' || serverType == 'httpWeb'">
+                    <td>绑定域名 *</td>
+                    <td>
+                        <server-name-box ref="serverNameBox"></server-name-box>
+                        <p class="comment">绑定后，才能通过域名可以访问不同的服务。</p>
+                    </td>
+                </tr>
 
-		<tr>
-			<td>服务类型 *</td>
-			<td>
-				<select class="ui dropdown auto-width" name="serverType" v-model="serverType" @change="changeServerType()">
-					<option v-for="s in serverTypes" :value="s.code">{{s.name}}</option>
-				</select>
-                <p class="comment" v-for="s in serverTypes" v-if="s.code == serverType">{{s.description}}</p>
-			</td>
-		</tr>
-		<tr>
-			<td>绑定端口 *</td>
-			<td>
-				<network-addresses-box :v-server-type="serverType" :v-addresses="defaultAddresses"></network-addresses-box>
-			</td>
-		</tr>
+                <!-- 证书 -->
+                <tbody v-if="tlsProtocolName.length > 0">
+                    <tr>
+                        <td>{{tlsProtocolName.toUpperCase()}}证书</td>
+                        <td>
+                            <ssl-certs-box :v-protocol="tlsProtocolName.toLowerCase()"></ssl-certs-box>
+                        </td>
+                    </tr>
+                </tbody>
 
-        <!-- 证书 -->
-        <tbody v-if="tlsProtocolName.length > 0">
-            <tr>
-                <td>{{tlsProtocolName.toUpperCase()}}证书</td>
-                <td>
-                    <ssl-certs-box :v-protocol="tlsProtocolName.toLowerCase()"></ssl-certs-box>
-                </td>
-            </tr>
-        </tbody>
+                <!-- 源服务器地址 -->
+                <tr v-if="serverType == 'httpProxy' || serverType == 'tcpProxy' || serverType == 'udpProxy'">
+                    <td>源站地址 *</td>
+                    <td>
+                        <input type="hidden" name="origins" :value="JSON.stringify(origins)"/>
+                        <div v-if="origins.length > 0">
+                            <div v-for="(origin, index) in origins" class="ui label small basic">
+                                {{origin.addr.protocol}}://{{origin.addr.host}}:{{origin.addr.portRange}}
+                                <a href="" title="删除" @click.prevent="removeOrigin(index)"><i class="icon remove"></i></a>
+                            </div>
+                            <div class="ui divider"></div>
+                        </div>
+                        <a href="" @click.prevent="addOrigin">[添加源站地址]</a>
+                    </td>
+                </tr>
 
-		<!-- 源服务器地址 -->
-		<tr v-if="serverType == 'httpProxy' || serverType == 'tcpProxy' || serverType == 'udpProxy'">
-			<td>源站地址 *</td>
-			<td>
-				<input type="hidden" name="origins" :value="JSON.stringify(origins)"/>
-				<div v-if="origins.length > 0">
-					<div v-for="(origin, index) in origins" class="ui label small">
-                        {{origin.addr.protocol}}://{{origin.addr.host}}:{{origin.addr.portRange}}
-						<a href="" title="删除" @click.prevent="removeOrigin(index)"><i class="icon remove"></i></a>
-					</div>
-					<div class="ui divider"></div>
-				</div>
-				<a href="" @click.prevent="addOrigin">[添加源站地址]</a>
-			</td>
-		</tr>
+                <!-- Web Server -->
+                <tr v-if="serverType == 'httpWeb'">
+                    <td>Web目录</td>
+                    <td>
+                        <input type="text" name="webRoot"/>
+                    </td>
+                </tr>
 
-		<!-- Web Server -->
-		<tr v-if="serverType == 'httpWeb'">
-			<td>Web目录</td>
-			<td>
-				<input type="text" name="webRoot"/>
-			</td>
-		</tr>
+                <tr>
+                    <td>绑定端口 *</td>
+                    <td>
+                        <network-addresses-box :v-server-type="serverType" :v-addresses="defaultAddresses"></network-addresses-box>
+                    </td>
+                </tr>
+            </table>
+        </div>
 
-		<tr>
-			<td>选择分组<optional-label></optional-label></td>
-			<td>
-				<server-group-selector></server-group-selector>
-			</td>
-		</tr>
-
-        <tr v-if="serverType == 'httpProxy' || serverType == 'httpWeb'">
-            <td>默认开启配置</td>
-            <td>
-                <checkbox checked="checked" name="accessLogIsOn">访问日志</checkbox>
-                &nbsp; &nbsp;
-                <checkbox checked="checked" name="websocketIsOn">Websocket</checkbox>
-                &nbsp; &nbsp;
-                <checkbox checked="checked" name="cacheIsOn">缓存</checkbox>
-                &nbsp; &nbsp;
-                <checkbox name="wafIsOn">WAF</checkbox>
-                &nbsp; &nbsp;
-                <checkbox name="remoteAddrIsOn">从上级代理中读取IP <tip-icon content="用来支持读取上级代理传递的X-Real-IP、X-Forwarded-For等信息。如果用户需要通过别的代理服务才能访问到这个网站服务，才需要选中。"></tip-icon> </checkbox>
-                &nbsp; &nbsp;
-                <checkbox checked="checked" name="statIsOn">统计 <tip-icon content="开启统计后，会统计访客区域、操作系统、浏览器等信息。"></tip-icon> </checkbox>
-            </td>
-        </tr>
-
-		<tr>
-			<td colspan="2"><more-options-indicator></more-options-indicator></td>
-		</tr>
-		<tbody v-show="moreOptionsVisible">
-			<tr>
-				<td>描述</td>
-				<td>
-					<textarea name="description" rows="3"></textarea>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+        <div class="table-box right">
+            <h3>次要信息</h3>
+            <table class="ui table selectable definition">
+                <tr>
+                    <td class="title">服务类型</td>
+                    <td>
+                        <select class="ui dropdown auto-width" name="serverType" v-model="serverType" @change="changeServerType()">
+                            <option v-for="s in serverTypes" :value="s.code">{{s.name}}</option>
+                        </select>
+                        <p class="comment" v-for="s in serverTypes" v-if="s.code == serverType">{{s.description}}</p>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="title">服务名称</td>
+                    <td>
+                        <input type="text" name="name" maxlength="60"/>
+                        <p class="comment">可以是网站用途或者域名等。</p>
+                    </td>
+                </tr>
+                <tr v-if="serverType == 'httpProxy' || serverType == 'httpWeb'">
+                    <td>默认开启配置</td>
+                    <td>
+                        <div class="checkboxes">
+                           <checkbox checked="checked" name="accessLogIsOn">访问日志</checkbox>
+                            <checkbox checked="checked" name="websocketIsOn">Websocket</checkbox>
+                            <checkbox checked="checked" name="cacheIsOn">缓存</checkbox>
+                            <checkbox name="wafIsOn">WAF</checkbox>
+                            <checkbox name="remoteAddrIsOn">从上级代理中读取IP <tip-icon content="用来支持读取上级代理传递的X-Real-IP、X-Forwarded-For等信息。如果用户需要通过别的代理服务才能访问到这个网站服务，才需要选中。"></tip-icon> </checkbox>
+                            <checkbox checked="checked" name="statIsOn">统计 <tip-icon content="开启统计后，会统计访客区域、操作系统、浏览器等信息。"></tip-icon> </checkbox>
+                        </div>
+                    </td>
+                </tr>
+                <tr>
+                    <td>选择分组<optional-label></optional-label></td>
+                    <td>
+                        <server-group-selector></server-group-selector>
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <div class="clear"></div>
+    </div>
 
+    <div class="margin clear"></div>
 	<submit-btn></submit-btn>
 </form>

web/views/@default/servers/create.less

@@ -1,3 +1,31 @@
 .label em {
 	font-style: italic !important;
+}
+
+.checkboxes {
+	.checkbox {
+		float: left;
+		margin-bottom: 1em;
+		margin-right: 1em;
+	}
+}
+
+@media screen and (min-width: 1024px) {
+	.tables-box {
+		width: 1024px;
+
+		.table-box {
+			width: 48%;
+			float: left;
+		}
+
+		.table-box.right {
+			margin-left: 1em;
+			opacity: 0.3;
+		}
+
+		.table-box.right:hover {
+			opacity: 1.0;
+		}
+	}
 }

web/views/@default/servers/server/settings/origins/addPopup.html

@@ -35,6 +35,13 @@
                     源站服务器地址，通常是一个IP（或域名）加端口<span v-if="serverType == 'httpProxy'">，不需要加 http:// 或 https://</span>。</p>
 			</td>
 		</tr>
+        <tr v-if="isHTTP || protocol == 'tls'">
+            <td>回源主机名</td>
+            <td>
+                <input type="text" name="host" placeholder="比如example.com" maxlength="100"/>
+                <p class="comment">请求源站时的Host字段值，用于修改源站接收到的域名<span v-if="isHTTP">，支持请求变量</span>。</p>
+            </td>
+        </tr>
 		<tr>
 			<td colspan="2"><more-options-indicator></more-options-indicator></td>
 		</tr>
@@ -45,13 +52,6 @@
                     <ssl-certs-box :v-single-mode="true" :v-view-size="'mini'" :v-description="'可以选择连接源站使用的证书。'"></ssl-certs-box>
                 </td>
             </tr>
-            <tr v-if="isHTTP || protocol == 'tls'">
-                <td>回源主机名</td>
-                <td>
-                    <input type="text" name="host" placeholder="比如example.com" maxlength="100"/>
-                    <p class="comment">请求源站时的Host，用于修改源站接收到的域名<span v-if="isHTTP">，自定义Host内容中支持请求变量</span>。</p>
-                </td>
-            </tr>
             <tr v-show="protocol != 'udp'">
                 <td>专属域名</td>
                 <td>

web/views/@default/servers/server/settings/origins/updatePopup.html

@@ -36,6 +36,13 @@
 				<p class="comment"><span class="red" v-if="addrError.length > 0">{{addrError}}</span>源站服务器地址，通常是一个IP（或域名）加端口<span v-if="serverType == 'httpProxy'">，不需要加 http:// 或 https://</span>。</p>
 			</td>
 		</tr>
+        <tr v-if="isHTTP || origin.protocol == 'tls'">
+            <td>回源主机名</td>
+            <td>
+                <input type="text" name="host"  v-model="origin.host" placeholder="比如example.com" maxlength="100"/>
+                <p class="comment">请求源站时的Host字段值，用于修改源站接收到的域名<span v-if="isHTTP">，支持请求变量</span>。</p>
+            </td>
+        </tr>
 		<tr>
 			<td colspan="2"><more-options-indicator></more-options-indicator></td>
 		</tr>
@@ -46,13 +53,6 @@
                     <ssl-certs-box :v-single-mode="true" :v-cert="origin.cert" :v-view-size="'mini'" :v-description="'可以选择连接源站使用的证书。'"></ssl-certs-box>
                 </td>
             </tr>
-            <tr v-if="isHTTP || origin.protocol == 'tls'">
-                <td>回源主机名</td>
-                <td>
-                    <input type="text" name="host"  v-model="origin.host" placeholder="比如example.com" maxlength="100"/>
-                    <p class="comment">请求源站时的Host，用于修改源站接收到的域名<span v-if="isHTTP">，自定义Host内容中支持请求变量</span>。</p>
-                </td>
-            </tr>
             <tr v-show="origin.protocol != 'udp'">
                 <td>专属域名</td>
                 <td>