实现菜单的状态显示

web/public/js/components/server/http-gzip-box.js

@@ -15,11 +15,27 @@ Vue.component("http-gzip-box", {
 			gzip: gzip,
 		}
 	},
+	methods: {
+		isOn: function () {
+			return (!this.vIsLocation || this.vGzipRef.isPrior) && this.vGzipRef.isOn
+		}
+	},
 	template: `<div>
 <input type="hidden" name="gzipRefJSON" :value="JSON.stringify(vGzipRef)"/> 
 <table class="ui table selectable definition">
 	<prior-checkbox :v-config="vGzipRef" v-if="vIsLocation"></prior-checkbox>
 	<tbody v-show="!vIsLocation || vGzipRef.isPrior">
+		<tr>
+			<td class="title">启用压缩</td>
+			<td>
+				<div class="ui checkbox">
+					<input type="checkbox" v-model="vGzipRef.isOn"/>
+					<label></label>
+				</div>
+			</td>
+		</tr>
+	</tbody>
+	<tbody v-show="isOn()">
 		<tr>
 			<td class="title">压缩级别</td>
 			<td>

web/public/js/components/server/http-location-labels.js

@@ -0,0 +1,71 @@
+Vue.component("http-location-labels", {
+	props: ["v-location-config"],
+	data: function () {
+		return {
+			location: this.vLocationConfig
+		}
+	},
+	methods: {
+		// 判断是否已启用某配置
+		configIsOn: function (config) {
+			return config != null && config.isPrior && config.isOn
+		},
+
+		refIsOn: function (ref, config) {
+			return this.configIsOn(ref) && config != null && config.isOn
+		},
+
+		len: function (arr) {
+			return (arr == null) ? 0 : arr.length
+		}
+	},
+	template: `	<div class="labels-box">
+	<!-- TODO 思考是否给各个标签加上链接 -->
+	<!-- redirectToHTTPS -->
+	<http-location-labels-label v-if="location.web != null && configIsOn(location.web.redirectToHTTPS)">自动跳转HTTPS</http-location-labels-label>
+	
+	<!-- Web -->
+	<http-location-labels-label v-if="location.web != null && configIsOn(location.web.root)">文档根目录</http-location-labels-label>
+	
+	<!-- 反向代理 -->
+	<http-location-labels-label v-if="refIsOn(location.reverseProxyRef, location.reverseProxy)">反向代理</http-location-labels-label>
+	
+	<!-- WAF -->
+	<!-- TODO -->
+	
+	<!-- Cache -->
+	<!-- TODO -->
+	
+	<!-- Charset -->
+	<http-location-labels-label v-if="location.web != null && configIsOn(location.web.charset) && location.web.charset.charset.length > 0">{{location.web.charset.charset}}</http-location-labels-label>
+	
+	<!-- 访问日志 -->
+	<!-- TODO -->
+	
+	<!-- 统计 -->
+	<!-- TODO -->
+	
+	<!-- Gzip -->
+	<http-location-labels-label v-if="location.web != null && refIsOn(location.web.gzipRef, location.web.gzip) && location.web.gzip.level > 0">Gzip:{{location.web.gzip.level}}</http-location-labels-label>
+	
+	<!-- HTTP Header -->
+	<http-location-labels-label v-if="location.web != null && refIsOn(location.web.requestHeaderPolicyRef, location.web.requestHeaderPolicy) && (len(location.web.requestHeaderPolicy.addHeaders) > 0 || len(location.web.requestHeaderPolicy.setHeaders) > 0 || len(location.web.requestHeaderPolicy.replaceHeaders) > 0 || len(location.web.requestHeaderPolicy.deleteHeaders) > 0)">请求Header</http-location-labels-label>
+	<http-location-labels-label v-if="location.web != null && refIsOn(location.web.responseHeaderPolicyRef, location.web.responseHeaderPolicy) && (len(location.web.responseHeaderPolicy.addHeaders) > 0 || len(location.web.responseHeaderPolicy.setHeaders) > 0 || len(location.web.responseHeaderPolicy.replaceHeaders) > 0 || len(location.web.responseHeaderPolicy.deleteHeaders) > 0)">响应Header</http-location-labels-label>
+	
+	<!-- Websocket -->
+	<http-location-labels-label v-if="location.web != null && refIsOn(location.web.websocketRef, location.web.websocket)">Websocket</http-location-labels-label>
+	
+	<!-- 特殊页面 -->
+	<div v-if="location.web != null && location.web.pages != null && location.web.pages.length > 0">
+		<http-location-labels-label v-for="page in location.web.pages">[状态码{{page.status[0]}}] -&gt; {{page.url}}</http-location-labels-label>
+	</div>
+	<div v-if="location.web != null && configIsOn(location.web.shutdown)">
+		<http-location-labels-label :v-class="'red'">临时关闭</http-location-labels-label>
+	</div>
+</div>`
+})
+
+Vue.component("http-location-labels-label", {
+	props: ["v-class"],
+	template: `<span class="ui label tiny" :class="vClass" style="font-size:0.8em;padding:4px;margin-top:0.3em;margin-bottom:0.3em"><slot></slot></span>`
+})

web/public/js/components/server/reverse-proxy-box.js

@@ -58,19 +58,29 @@ Vue.component("reverse-proxy-box", {
 				</td>
 			</tr>
 			<tr>
-				<td>请求URI</td>
+				<td>请求URI<em>（RequestURI）</em></td>
 				<td>
 					<input type="text" placeholder="\${requestURI}" v-model="reverseProxyConfig.requestURI"/>
 					<p class="comment">\${requestURI}为完整的请求URI，可以使用类似于"\${requestURI}?arg1=value1&arg2=value2"的形式添加你的参数。</p>
 				</td>
 			</tr>
 			<tr>
-				<td>去除URL前缀</td>
+				<td>去除URL前缀<em>（StripPrefix）</em></td>
 				<td>
 					<input type="text" v-model="reverseProxyConfig.stripPrefix" placeholder="/PREFIX"/>
 					<p class="comment">可以把请求的路径部分前缀去除后再查找文件，比如把 <span class="ui label tiny">/web/app/index.html</span> 去除前缀 <span class="ui label tiny">/web</span> 后就变成 <span class="ui label tiny">/app/index.html</span>。 </p>
 				</td>
 			</tr>
+			<tr>
+				<td>是否自动刷新缓存区<em>（AutoFlush）</em></td>
+				<td>
+					<div class="ui checkbox">
+						<input type="checkbox" v-model="reverseProxyConfig.autoFlush"/>
+						<label></label>
+					</div>
+					<p class="comment">开启后将自动刷新缓冲区数据到客户端，在类似于SSE（server-sent events）等场景下很有用。</p>
+				</td>
+			</tr>
 		</tbody>
 	</table>
 	<div class="margin"></div>