实现缓存策略部分管理功能

web/public/js/components/common/time-duration-box.js

@@ -0,0 +1,47 @@
+Vue.component("time-duration-box", {
+	props: ["v-name", "v-value", "v-count", "v-unit"],
+	data: function () {
+		let v = this.vValue
+		if (v == null) {
+			v = {
+				count: this.vCount,
+				unit: this.vUnit
+			}
+		}
+		if (typeof (v["count"]) != "number") {
+			v["count"] = -1
+		}
+		return {
+			"size": v,
+			countString: (v.count >= 0) ? v.count.toString() : ""
+		}
+	},
+	watch: {
+		"countString": function (newValue) {
+			let value = newValue.trim()
+			if (value.length == 0) {
+				this.size.count = -1
+				return
+			}
+			let count = parseInt(value)
+			if (!isNaN(count)) {
+				this.size.count = count
+			}
+		}
+	},
+	template: `<div class="ui fields inline">
+	<input type="hidden" :name="vName" :value="JSON.stringify(size)"/>
+	<div class="ui field">
+		<input type="text" v-model="countString" maxlength="11" size="11"/>
+	</div>
+	<div class="ui field">
+		<select class="ui dropdown" v-model="size.unit">
+			<option value="ms">毫秒</option>
+			<option value="second">秒</option>
+			<option value="minute">分钟</option>
+			<option value="hour">小时</option>
+			<option value="day">天</option>
+		</select>
+	</div>
+</div>`
+})

web/public/js/components/server/http-cache-cond-box.js

@@ -0,0 +1,50 @@
+Vue.component("http-cache-cond-box", {
+	template: `<div>
+<table class="ui table definition selectable">
+	<tr>
+		<td>匹配条件</td>
+		<td><http-request-conds-box></http-request-conds-box></td>
+	</tr>
+	<tr>
+		<td>缓存有效期</td>
+		<td>
+			<time-duration-box :name="'lifeJSON'" :v-count="3600" :v-unit="'second'"></time-duration-box>
+		</td>
+	</tr>
+	<tr>
+		<td>状态码列表</td>
+		<td>
+			<values-box name="statusList" size="3" maxlength="3" :values="['200']"></values-box>
+			<p class="comment">允许缓存的HTTP状态码列表。</p>
+		</td>
+	</tr>
+	<tr>
+		<td>跳过的Cache-Control值</td>
+		<td>
+			<values-box name="skipResponseCacheControlValues" size="10" maxlength="100" :values="['private', 'no-cache', 'no-store']"></values-box>
+			<p class="comment">当响应的Cache-Control为这些值时不缓存响应内容，而且不区分大小写。</p>
+		</td>
+	</tr>
+	<tr>
+		<td>跳过Set-Cookie</td>
+		<td>
+			<div class="ui checkbox">
+				<input type="checkbox" name="skipResponseSetCookie" value="1" checked="checked"/>
+				<label></label>
+			</div>
+			<p class="comment">选中后，当响应的Header中有Set-Cookie时不缓存响应内容。</p>
+		</td>
+	</tr>
+	<tr>
+		<td>支持请求no-cache刷新</td>
+		<td>
+			<div class="ui checkbox">
+				<input type="checkbox" name="enableRequestCachePragma" value="1"/>
+				<label></label>
+			</div>
+			<p class="comment">选中后，当请求的Header中含有Pragma: no-cache或Cache-Control: no-cache时，会跳过缓存直接读取源内容。</p>
+		</td>
+	</tr>	
+</table>
+</div>`
+})

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

@@ -68,8 +68,13 @@ Vue.component("http-gzip-box", {
 				<p class="comment">0表示不限制，内容长度从文件尺寸或Content-Length中获取。</p>
 			</td>
 		</tr>
+		<tr>
+			<td>匹配条件</td>
+			<td>
+				<http-request-conds-box :v-conds="gzip.conds"></http-request-conds-box>
+</td>
+		</tr>
 	</tbody>
-	<http-request-conds-tbody v-show="isOn() && advancedVisible" :v-conds="gzip.conds"></http-request-conds-tbody>
 </table>
 </div>`
 })

web/public/js/components/server/http-request-conds-box.js

@@ -0,0 +1,82 @@
+Vue.component("http-request-conds-box", {
+	props: ["v-conds"],
+	data: function () {
+		let conds = this.vConds
+		if (conds == null) {
+			conds = {
+				isOn: true,
+				connector: "or",
+				groups: []
+			}
+		}
+		return {
+			conds: conds,
+			components: window.REQUEST_COND_COMPONENTS
+		}
+	},
+	methods: {
+		addGroup: function () {
+			let that = this
+			teaweb.popup("/servers/server/settings/conds/addGroupPopup", {
+				height: "30em",
+				callback: function (resp) {
+					that.conds.groups.push(resp.data.group)
+				}
+			})
+		},
+		updateGroup: function (groupIndex, group) {
+			window.UPDATING_COND_GROUP = group
+			let that = this
+			teaweb.popup("/servers/server/settings/conds/addGroupPopup", {
+				height: "30em",
+				callback: function (resp) {
+					Vue.set(that.conds.groups, groupIndex, resp.data.group)
+				}
+			})
+		},
+		removeGroup: function (groupIndex) {
+			let that = this
+			teaweb.confirm("确定要删除这一组条件吗？", function () {
+				that.conds.groups.$remove(groupIndex)
+			})
+		},
+		typeName: function (cond) {
+			let c = this.components.$find(function (k, v) {
+				return v.type == cond.type
+			})
+			if (c != null) {
+				return c.name;
+			}
+			return cond.param + " " + cond.operator
+		}
+	},
+	template: `<div>
+		<input type="hidden" name="condsJSON" :value="JSON.stringify(conds)"/>
+		<div v-if="conds.groups.length > 0">
+			<table class="ui table">
+				<tr v-for="(group, groupIndex) in conds.groups">
+					<td style="background: white">
+						<var v-for="(cond, index) in group.conds" style="font-style: normal;display: inline-block; margin-bottom:0.5em">
+							<span class="ui label tiny">
+								<var v-if="cond.type.length == 0" style="font-style: normal">{{cond.param}} <var>{{cond.operator}}</var></var>
+								<var v-if="cond.type.length > 0" style="font-style: normal">{{typeName(cond)}}: </var>
+								{{cond.value}}
+							</span>
+							
+							<var v-if="index < group.conds.length - 1"> {{group.connector}} &nbsp;</var>
+						</var>
+					</td>
+					<td style="width: 5em; background: white">
+						<a href="" title="修改" @click.prevent="updateGroup(groupIndex, group)"><i class="icon pencil small"></i></a> <a href="" title="删除" @click.prevent="removeGroup(groupIndex)"><i class="icon remove"></i></a>
+					</td>
+				</tr>
+			</table>
+			<div class="ui divider"></div>
+		</div>
+		
+		<div>
+			<button class="ui button tiny" type="button" @click.prevent="addGroup()">+</button>
+		</div>
+	</div>	
+</div>`
+})

web/public/js/components/server/http-request-conds-tbody.js

@@ -1,87 +0,0 @@
-Vue.component("http-request-conds-tbody", {
-	props: ["v-conds"],
-	data: function () {
-		let conds = this.vConds
-		if (conds == null) {
-			conds = {
-				isOn: true,
-				connector: "or",
-				groups: []
-			}
-		}
-		return {
-			conds: conds,
-			components: window.REQUEST_COND_COMPONENTS
-		}
-	},
-	methods: {
-		addGroup: function () {
-			let that = this
-			teaweb.popup("/servers/server/settings/conds/addGroupPopup", {
-				height: "30em",
-				callback: function (resp) {
-					that.conds.groups.push(resp.data.group)
-				}
-			})
-		},
-		updateGroup: function (groupIndex, group) {
-			window.UPDATING_COND_GROUP = group
-			let that = this
-			teaweb.popup("/servers/server/settings/conds/addGroupPopup", {
-				height: "30em",
-				callback: function (resp) {
-					Vue.set(that.conds.groups, groupIndex, resp.data.group)
-				}
-			})
-		},
-		removeGroup: function (groupIndex) {
-			let that = this
-			teaweb.confirm("确定要删除这一组条件吗？", function () {
-				that.conds.groups.$remove(groupIndex)
-			})
-		},
-		typeName: function (cond) {
-			let c = this.components.$find(function (k, v) {
-				return v.type == cond.type
-			})
-			if (c != null) {
-				return c.name;
-			}
-			return cond.param + " " + cond.operator
-		}
-	},
-	template: `<tbody>
-		<tr>
-			<td>匹配条件</td>
-			<td>
-				<input type="hidden" name="condsJSON" :value="JSON.stringify(conds)"/>
-				<div class="margin"></div>
-				<div v-if="conds.groups.length > 0">
-					<table class="ui table">
-						<tr v-for="(group, groupIndex) in conds.groups">
-							<td style="background: white">
-								<var v-for="(cond, index) in group.conds" style="font-style: normal;display: inline-block; margin-bottom:0.5em">
-									<span class="ui label tiny">
-										<var v-if="cond.type.length == 0" style="font-style: normal">{{cond.param}} <var>{{cond.operator}}</var></var>
-										<var v-if="cond.type.length > 0" style="font-style: normal">{{typeName(cond)}}: </var>
-										{{cond.value}}
-									</span>
-									
-									<var v-if="index < group.conds.length - 1"> {{group.connector}} &nbsp;</var>
-								</var>
-							</td>
-							<td style="width: 5em; background: white">
-								<a href="" title="修改" @click.prevent="updateGroup(groupIndex, group)"><i class="icon pencil small"></i></a> <a href="" title="删除" @click.prevent="removeGroup(groupIndex)"><i class="icon remove"></i></a>
-							</td>
-						</tr>
-					</table>
-					<div class="ui divider"></div>
-				</div>
-				
-				<div>
-					<button class="ui button tiny" type="button" @click.prevent="addGroup()">+</button>
-				</div>
-			</td>
-		</tr>
-	</tbody>`
-})

web/views/@default/@layout_popup.css

@@ -207,10 +207,6 @@ label[for] {
 label.blue {
   color: #2185d0 !important;
 }
-td .label.tiny {
-  padding: 2px;
-  font-size: 0.9em;
-}
 /** Menu **/
 .first-menu .menu.text {
   margin-top: 0 !important;

web/views/@default/@layout_popup.css.map

@@ -1 +1 @@
-{"version":3,"sources":["@layout_popup.less"],"names":[],"mappings":"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","file":"@layout_popup.css"}
+{"version":3,"sources":["@layout_popup.less"],"names":[],"mappings":"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","file":"@layout_popup.css"}

web/views/@default/@layout_popup.less

@@ -251,8 +251,6 @@ label.blue {
 }
 
 td .label.tiny {
-	padding: 2px;
-	font-size: 0.9em;
 }
 
 /** Menu **/

web/views/@default/servers/components/cache/createPopup.html

@@ -0,0 +1,74 @@
+{$layout "layout_popup"}
+
+<h3>创建缓存策略</h3>
+
+<form class="ui form" data-tea-action="$" data-tea-success="success">
+	<table class="ui table definition selectable">
+		<tr>
+			<td class="title">策略名称 *</td>
+			<td><input type="text" name="name" maxlength="100" ref="focus"/> </td>
+		</tr>
+		<tr>
+			<td>缓存类型 *</td>
+			<td>
+				<select class="ui dropdown auto-width" name="type" v-model="policyType">
+					<option v-for="type in types" :value="type.type">{{type.name}}</option>
+				</select>
+			</td>
+		</tr>
+		<!-- 文件缓存选项 -->
+		<tbody v-if="policyType == 'file'">
+			<tr>
+				<td>缓存目录 *</td>
+				<td>
+					<input type="text" name="fileDir" maxlength="500"/>
+					<p class="comment">存放文件缓存的目录，通常填写绝对路径。</p>
+				</td>
+			</tr>
+		</tbody>
+
+
+		<tr>
+			<td>缓存最大容量</td>
+			<td>
+				<size-capacity-box :v-name="'capacityJSON'" :v-count="0" :v-unit="'gb'"></size-capacity-box>
+				<p class="comment">允许缓存的最大内容长度，如果为0表示没有限制。</p>
+			</td>
+		</tr>
+		<tr>
+			<td colspan="2"><more-options-indicator></more-options-indicator></td>
+		</tr>
+		<tbody v-show="moreOptionsVisible">
+			<tr>
+				<td>最大内容长度</td>
+				<td>
+					<size-capacity-box :v-name="'maxSizeJSON'" :v-count="32" :v-unit="'mb'"></size-capacity-box>
+					<p class="comment">允许缓存的最大内容长度，如果为0表示没有限制。</p>
+				</td>
+			</tr>
+			<tr>
+				<td>容纳Key数量</td>
+				<td>
+					<input type="text" name="maxKeys" maxlength="10" style="width:10em"/>
+					<p class="comment">可以容纳多少数量的Key，0表示不限制。</p>
+				</td>
+			</tr>
+			<tr>
+				<td>描述</td>
+				<td>
+					<textarea maxlength="200" name="description" rows="3"></textarea>
+				</td>
+			</tr>
+			<tr>
+				<td>是否启用</td>
+				<td>
+					<div class="ui checkbox">
+						<input type="checkbox" name="isOn" value="1" checked="checked"/>
+						<label></label>
+					</div>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+	<submit-btn></submit-btn>
+</form>

web/views/@default/servers/components/cache/createPopup.js

@@ -0,0 +1,5 @@
+Tea.context(function () {
+	this.success = NotifyPopup
+
+	this.policyType = this.types[0].type
+})

web/views/@default/servers/components/cache/index.html

@@ -2,5 +2,38 @@
 {$template "/left_menu"}
 
 <div class="right-box">
-	<p class="ui message">此功能暂未开放敬请期待。</p>
+	<second-menu>
+		<menu-item href="/servers/components/cache" code="index">列表</menu-item>
+		<span class="item">|</span>
+		<a href="" class="item" @click.prevent="createPolicy()">[创建]</a>
+	</second-menu>
+
+	<p class="comment" v-if="cachePolicies.length == 0">暂时还没有缓存策略。</p>
+	<table class="ui table selectable" v-if="cachePolicies.length > 0">
+		<thead>
+			<tr>
+				<th>策略名称</th>
+				<th>策略类型</th>
+				<th>容量</th>
+				<th>引用服务</th>
+				<th>状态</th>
+				<th class="three op">操作</th>
+			</tr>
+		</thead>
+		<tr v-for="(policy, index) in cachePolicies">
+			<td>{{policy.name}}</td>
+			<td>{{infos[index].typeName}} <span class="small">（{{policy.type}}）</span></td>
+			<td>
+				<span v-if="policy.capacity != null && policy.capacity.count > 0">{{policy.capacity.count}}{{policy.capacity.unit.toUpperCase()}}</span>
+				<span v-else class="disabled">不限</span>
+			</td>
+			<td>{{infos[index].countServers}}</td>
+			<td><label-on :v-is-on="policy.isOn"></label-on></td>
+			<td>
+				<a :href="'/servers/components/cache/policy?cachePolicyId=' + policy.id">详情</a> &nbsp; <a href="" @click.prevent="updatePolicy(policy.id)">修改</a> &nbsp; <a href="" @click.prevent="deletePolicy(policy.id)">删除</a>
+			</td>
+		</tr>
+	</table>
+
+	<div class="page" v-html="page"></div>
 </div>

web/views/@default/servers/components/cache/index.js

@@ -0,0 +1,37 @@
+Tea.context(function () {
+	// 创建策略
+	this.createPolicy = function () {
+		teaweb.popup("/servers/components/cache/createPopup", {
+			height: "27em",
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					window.location.reload()
+				})
+			}
+		})
+	}
+
+	// 修改策略
+	this.updatePolicy = function (policyId) {
+		teaweb.popup("/servers/components/cache/updatePopup?cachePolicyId=" + policyId, {
+			height: "27em",
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					window.location.reload()
+				})
+			}
+		})
+	}
+
+	// 删除策略
+	this.deletePolicy = function (policyId) {
+		let that = this
+		teaweb.confirm("确定要删除此缓存策略吗？", function () {
+			that.$post("/servers/components/cache/delete")
+				.params({
+					cachePolicyId: policyId
+				})
+				.refresh()
+		})
+	}
+})

web/views/@default/servers/components/cache/updatePopup.html

@@ -0,0 +1,76 @@
+{$layout "layout_popup"}
+
+<h3>修改缓存策略</h3>
+
+<form class="ui form" data-tea-action="$" data-tea-success="success">
+	<input type="hidden" name="cachePolicyId" :value="cachePolicy.id"/>
+	<table class="ui table definition selectable">
+		<tr>
+			<td class="title">策略名称 *</td>
+			<td><input type="text" name="name" maxlength="100" ref="focus" v-model="cachePolicy.name"/> </td>
+		</tr>
+		<tr>
+			<td>缓存类型 *</td>
+			<td>
+				<select class="ui dropdown auto-width" name="type" v-model="policyType">
+					<option v-for="type in types" :value="type.type">{{type.name}}</option>
+				</select>
+			</td>
+		</tr>
+
+		<!-- 文件缓存选项 -->
+		<tbody v-if="policyType == 'file'">
+			<tr>
+				<td>缓存目录 *</td>
+				<td>
+					<input type="text" name="fileDir" maxlength="500" v-model="cachePolicy.options.dir"/>
+					<p class="comment">存放文件缓存的目录，通常填写绝对路径。</p>
+				</td>
+			</tr>
+		</tbody>
+
+
+		<tr>
+			<td>缓存最大容量</td>
+			<td>
+				<size-capacity-box :v-name="'capacityJSON'" :v-value="cachePolicy.capacity" :v-count="0" :v-unit="'gb'"></size-capacity-box>
+				<p class="comment">允许缓存的最大内容长度，如果为0表示没有限制。</p>
+			</td>
+		</tr>
+		<tr>
+			<td colspan="2"><more-options-indicator></more-options-indicator></td>
+		</tr>
+		<tbody v-show="moreOptionsVisible">
+			<tr>
+				<td>最大内容长度</td>
+				<td>
+					<size-capacity-box :v-value="cachePolicy.maxSize" :v-name="'maxSizeJSON'" :v-count="32" :v-unit="'mb'"></size-capacity-box>
+					<p class="comment">允许缓存的最大内容长度，如果为0表示没有限制。</p>
+				</td>
+			</tr>
+			<tr>
+				<td>容纳Key数量</td>
+				<td>
+					<input type="text" name="maxKeys" maxlength="10" style="width:10em" v-model="cachePolicy.maxKeys"/>
+					<p class="comment">可以容纳多少数量的Key，0表示不限制。</p>
+				</td>
+			</tr>
+			<tr>
+				<td>描述</td>
+				<td>
+					<textarea maxlength="200" name="description" rows="3" v-model="cachePolicy.description"></textarea>
+				</td>
+			</tr>
+			<tr>
+				<td>是否启用</td>
+				<td>
+					<div class="ui checkbox">
+						<input type="checkbox" name="isOn" value="1" v-model="cachePolicy.isOn"/>
+						<label></label>
+					</div>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+	<submit-btn></submit-btn>
+</form>

web/views/@default/servers/components/cache/updatePopup.js

@@ -0,0 +1,5 @@
+Tea.context(function () {
+	this.success = NotifyPopup
+
+	this.policyType = this.cachePolicy.type
+})

web/views/@default/servers/components/index.html

@@ -2,5 +2,24 @@
 {$template "/left_menu"}
 
 <div class="right-box">
-	<p class="ui message">此功能暂未开放敬请期待。</p>
+	<form class="ui form" data-tea-action="$" data-tea-success="success">
+		<input type="hidden" name="globalConfigJSON" :value="JSON.stringify(globalConfig)"/>
+		<table class="ui table selectable definition">
+			<tr>
+				<td colspan="2">HTTP/HTTPS通用设置</td>
+			</tr>
+			<tr>
+				<td class="title">是否严格匹配域名</td>
+				<td>
+					<div class="ui checkbox">
+						<input type="checkbox" name="matchDomainStrictly" value="1" v-model="globalConfig.httpAll.matchDomainStrictly"/>
+						<label></label>
+					</div>
+					<p class="comment">如果选择了严格匹配域名，则没有在Edge里绑定过的域名访问时都会返回404。</p>
+				</td>
+			</tr>
+		</table>
+		<submit-btn>保存</submit-btn>
+	</form>
+
 </div>

web/views/@default/servers/components/index.js

@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyReloadSuccess("保存成功")
+})

web/views/@default/servers/components/ssl/certPopup.html

@@ -8,7 +8,7 @@
 	</tr>
 	<tr v-if="info.description.length > 0">
 		<td>详细说明</td>
-		<td>{{info.decription}}</td>
+		<td>{{info.description}}</td>
 	</tr>
 	<tr>
 		<td>证书状态</td>

web/views/@default/servers/components/ssl/index.html

@@ -45,7 +45,8 @@
 			<td>{{certInfos[index].endDay}}</td>
 			<td>{{certInfos[index].countServers}}</td>
 			<td nowrap="">
-				<span class="ui label red tiny basic" v-if="certInfos[index].isExpired">已过期</span>
+				<span class="ui label red tiny basic" v-if="!certInfos[index].isOn">未启用</span>
+				<span class="ui label red tiny basic" v-else-if="certInfos[index].isExpired">已过期</span>
 				<span class="ui label green tiny basic" v-else>有效中</span>
 			</td>
 			<td>

web/views/@default/servers/components/ssl/index.js

@@ -30,4 +30,16 @@ Tea.context(function () {
 			width: "48em"
 		})
 	}
+
+	// 修改证书
+	this.updateCert = function (certId) {
+		teaweb.popup("/servers/components/ssl/updatePopup?certId=" + certId, {
+			height: "28em",
+			callback: function () {
+				teaweb.success("上传成功", function () {
+					window.location.reload()
+				})
+			}
+		})
+	}
 })

web/views/@default/servers/components/ssl/updatePopup.html

@@ -0,0 +1,60 @@
+{$layout "layout_popup"}
+
+<h3>修改证书</h3>
+
+<form class="ui form" data-tea-action="$" data-tea-success="success">
+	<input type="hidden" name="certId" :value="certConfig.id"/>
+	<table class="ui table definition selectable">
+		<tr>
+			<td class="title">证书说明 *</td>
+			<td>
+				<input type="text" name="name" maxlength="100" ref="focus" v-model="certConfig.name"/>
+				<p class="comment">可以简单说明证书的用途。</p>
+			</td>
+		</tr>
+		<tr>
+			<td>证书类型</td>
+			<td>
+				<select class="ui dropdown auto-width" name="isCA" v-model="isCA">
+					<option value="0">加密证书</option>
+					<option value="1">CA证书</option>
+				</select>
+			</td>
+		</tr>
+		<tr>
+			<td>选择证书文件</td>
+			<td>
+				<input type="file" name="certFile" accept="application/x-pem-file, application/pkcs10, application/x-pkcs12, application/x-x509-user-cert, application/x-x509-ca-cert, application/pkix-cert"/>
+				<p class="comment">内容中通常含有"-----BEGIN CERTIFICATE-----"类似的信息。</p>
+			</td>
+		</tr>
+		<tr v-show="isCA == 0">
+			<td>选择私钥文件</td>
+			<td>
+				<input type="file" name="keyFile" accept="application/pkcs8"/>
+				<p class="comment">内容中通常含有"-----BEGIN RSA PRIVATE KEY-----"类似的信息。</p>
+			</td>
+		</tr>
+		<tr>
+			<td colspan="2"><more-options-indicator></more-options-indicator></td>
+		</tr>
+		<tbody v-show="moreOptionsVisible">
+			<tr>
+				<td>详细说明</td>
+				<td>
+					<textarea rows="3" name="description" maxlength="200" v-model="certConfig.description"></textarea>
+				</td>
+			</tr>
+			<tr>
+				<td>是否启用</td>
+				<td>
+					<div class="ui checkbox">
+						<input type="checkbox" name="isOn" value="1" v-model="certConfig.isOn"/>
+						<label></label>
+					</div>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+	<submit-btn></submit-btn>
+</form>

web/views/@default/servers/components/ssl/updatePopup.js

@@ -0,0 +1,4 @@
+Tea.context(function () {
+	this.success = NotifyPopup
+	this.isCA = this.certConfig.isCA ? 1 : 0
+})

web/views/@default/servers/components/ssl/uploadPopup.html

@@ -24,7 +24,7 @@
 			<td>选择证书文件 *</td>
 			<td>
 				<input type="file" name="certFile" accept="application/x-pem-file, application/pkcs10, application/x-pkcs12, application/x-x509-user-cert, application/x-x509-ca-cert, application/pkix-cert"/>
-				<p class="comment">内容中通常含有"-----BEGIN CERTIFICATE-----"类似的信息。</p
+				<p class="comment">内容中通常含有"-----BEGIN CERTIFICATE-----"类似的信息。</p>
 			</td>
 		</tr>
 		<tr v-show="isCA == 0">

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

@@ -9,7 +9,7 @@
 			<th>服务名称</th>
 			<th>服务类型</th>
 			<th>部署集群</th>
-			<th>运行节点数</th>
+			<th>运行中节点数</th>
 			<th>未运行节点数</th>
 			<th>端口</th>
 			<th>状态</th>
@@ -24,8 +24,8 @@
 		<td><span class="disabled">[暂无]</span></td>
 		<td>
 			<span v-if="server.ports.length == 0">-</span>
-			<div v-for="port in server.ports" class="ui label small">
-				{{port.portRange}}<span class="small">（{{port.protocol}}）</span>
+			<div v-for="port in server.ports">
+				<div class="ui label tiny" style="margin-bottom:0.5em">{{port.portRange}}<span class="small">（{{port.protocol}}）</span></div>
 			</div>
 		</td>
 		<td>

web/views/@default/servers/server/index.html

@@ -1,94 +1,5 @@
 {$layout}
-
 {$template "/left_menu"}
 
 <div class="right-box">
-	<table class="ui table selectable definition">
-		<tr>
-			<td class="title">服务名称</td>
-			<td>
-				{{server.name}}
-			</td>
-		</tr>
-		<tr>
-			<td>部署的集群</td>
-			<td>
-				{{server.cluster.name}}
-			</td>
-		</tr>
-		<tr>
-			<td>服务类型</td>
-			<td>
-				{{serverType.name}}
-			</td>
-		</tr>
-		<tr>
-			<td>绑定端口</td>
-			<td>
-				<span v-if="server.ports.length == 0">-</span>
-				<div v-for="port in server.ports" class="ui label small">
-					{{port.portRange}}<span class="small">（{{port.protocol}}）</span>
-				</div>
-			</td>
-		</tr>
-
-		<!-- 证书 -->
-		<!--<tbody v-if="tlsProtocolName.length > 0">
-		<tr>
-			<td>{{tlsProtocolName}}证书</td>
-			<td>
-				<input type="file" name="tlsCertFile"/>
-			</td>
-		</tr>
-		<tr>
-			<td>{{tlsProtocolName}}密钥</td>
-			<td>
-				<input type="file" name="tlsKeyFile"/>
-			</td>
-		</tr>
-		</tbody>-->
-
-		<!-- 域名 -->
-		<tr>
-			<td>绑定域名</td>
-			<td>
-				<div v-for="serverName in server.serverNames" class="ui label small">
-					<em v-if="serverName.type != 'full'">{{serverName.type}}</em> {{serverName.name}}
-				</div>
-			</td>
-		</tr>
-
-		<!-- 源服务器地址 -->
-		<tr v-if="serverType.code == 'httpProxy' || serverType.code == 'tcpProxy' || serverType.code == 'udpProxy'">
-			<td>源站地址</td>
-			<td>
-				<div v-if="server.origins.length > 0">
-					<div v-for="(origin, index) in server.origins" class="ui label small">
-						{{origin.addr.protocol}}://{{origin.addr.host}}:{{origin.addr.portRange}}
-					</div>
-				</div>
-			</td>
-		</tr>
-
-		<!-- Web Server -->
-		<!--<tr v-if="serverType == 'httpWeb'">
-			<td>Web目录</td>
-			<td>
-				<input type="text" name="webRoot"/>
-			</td>
-		</tr>-->
-
-		<tr>
-			<td colspan="2"><more-options-indicator></more-options-indicator></td>
-		</tr>
-		<tbody v-show="moreOptionsVisible">
-		<tr>
-			<td>描述</td>
-			<td>
-				<span v-if="server.description.length == 0">-</span>
-				<span v-if="server.description.length > 0">{{server.description}}</span>
-			</td>
-		</tr>
-		</tbody>
-	</table>
 </div>