实现缓存策略的部分功能

web/public/js/components/api-node/api-node-addresses-box.js

@@ -0,0 +1,56 @@
+Vue.component("api-node-addresses-box", {
+	props: ["v-addrs", "v-name"],
+	data: function () {
+		let addrs = this.vAddrs
+		if (addrs == null) {
+			addrs = []
+		}
+		return {
+			addrs: addrs
+		}
+	},
+	methods: {
+		// 添加IP地址
+		addAddr: function () {
+			let that = this;
+			teaweb.popup("/api/node/createAddrPopup", {
+				height: "16em",
+				callback: function (resp) {
+					that.addrs.push(resp.data.addr);
+				}
+			})
+		},
+
+		// 修改地址
+		updateAddr: function (index, addr) {
+			let that = this;
+			window.UPDATING_ADDR = addr
+			teaweb.popup("/api/node/updateAddrPopup?addressId=", {
+				callback: function (resp) {
+					Vue.set(that.addrs, index, resp.data.addr);
+				}
+			})
+		},
+
+		// 删除IP地址
+		removeAddr: function (index) {
+			this.addrs.$remove(index);
+		}
+	},
+	template: `<div>
+	<input type="hidden" :name="vName" :value="JSON.stringify(addrs)"/>
+	<div v-if="addrs.length > 0">
+		<div>
+			<div v-for="(addr, index) in addrs" class="ui label small">
+				{{addr.protocol}}://{{addr.host}}:{{addr.portRange}}</span>
+				<a href="" title="修改" @click.prevent="updateAddr(index, addr)"><i class="icon pencil small"></i></a>
+				<a href="" title="删除" @click.prevent="removeAddr(index)"><i class="icon remove"></i></a>
+			</div>
+		</div>
+		<div class="ui divider"></div>
+	</div>
+	<div>
+		<button class="ui button small" type="button" @click.prevent="addAddr()">+</button>
+	</div>
+</div>`
+})

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

@@ -1,5 +1,5 @@
 Vue.component("network-addresses-box", {
-	props: ["v-server-type", "v-addresses", "v-protocol"],
+	props: ["v-server-type", "v-addresses", "v-protocol", "v-name"],
 	data: function () {
 		let addresses = this.vAddresses
 		if (addresses == null) {
@@ -9,9 +9,16 @@ Vue.component("network-addresses-box", {
 		if (protocol == null) {
 			protocol = ""
 		}
+
+		let name = this.vName
+		if (name == null) {
+			name = "addresses"
+		}
+
 		return {
 			addresses: addresses,
-			protocol: protocol
+			protocol: protocol,
+			name: name
 		}
 	},
 	watch: {
@@ -24,22 +31,28 @@ Vue.component("network-addresses-box", {
 			let that = this
 			teaweb.popup("/servers/addPortPopup?serverType=" + this.vServerType + "&protocol=" + this.protocol, {
 				callback: function (resp) {
-					var addr = resp.data.address;
-					that.addresses.push(addr);
+					var addr = resp.data.address
+					that.addresses.push(addr)
 					if (["https", "https4", "https6"].$contains(addr.protocol)) {
-						this.tlsProtocolName = "HTTPS";
+						this.tlsProtocolName = "HTTPS"
 					} else if (["tls", "tls4", "tls6"].$contains(addr.protocol)) {
-						this.tlsProtocolName = "TLS";
+						this.tlsProtocolName = "TLS"
 					}
+
+					// 发送事件
+					that.$emit("change", that.addresses)
 				}
 			})
 		},
 		removeAddr: function (index) {
 			this.addresses.$remove(index);
+
+			// 发送事件
+			this.$emit("change", this.addresses)
 		}
 	},
 	template: `<div>
-	<input type="hidden" name="addresses" :value="JSON.stringify(addresses)"/>
+	<input type="hidden" :name="name" :value="JSON.stringify(addresses)"/>
 	<div v-if="addresses.length > 0">
 		<div class="ui label small" v-for="(addr, index) in addresses">
 			{{addr.protocol}}://<span v-if="addr.host.length > 0">{{addr.host}}</span><span v-if="addr.host.length == 0">*</span>:{{addr.portRange}}

web/public/js/components/common/size-capacity-view.js

@@ -0,0 +1,7 @@
+Vue.component("size-capacity-view", {
+	props:["v-default-text", "v-value"],
+	template: `<div>
+	<span v-if="vValue != null && vValue.count > 0">{{vValue.count}}{{vValue.unit.toUpperCase()}}</span>
+	<span v-else>{{vDefaultText}}</span>
+</div>`
+})

web/public/js/components/server/ssl-certs-box.js

@@ -0,0 +1,71 @@
+Vue.component("ssl-certs-box", {
+	props: ["v-certs", "v-protocol"],
+	data: function () {
+		let certs = this.vCerts
+		if (certs == null) {
+			certs = []
+		}
+		return {
+			certs: certs
+		}
+	},
+	methods: {
+		certIds: function () {
+			return this.certs.map(function (v) {
+				return v.id
+			})
+		},
+		// 删除证书
+		removeCert: function (index) {
+			let that = this
+			teaweb.confirm("确定删除此证书吗？证书数据仍然保留，只是当前服务不再使用此证书。", function () {
+				that.certs.$remove(index)
+			})
+		},
+
+		// 选择证书
+		selectCert: function () {
+			let that = this
+			teaweb.popup("/servers/components/ssl/selectPopup", {
+				width: "50em",
+				height: "30em",
+				callback: function (resp) {
+					that.certs.push(resp.data.cert)
+				}
+			})
+		},
+
+		// 上传证书
+		uploadCert: function () {
+			let that = this
+			teaweb.popup("/servers/components/ssl/uploadPopup", {
+				height: "28em",
+				callback: function (resp) {
+					teaweb.success("上传成功", function () {
+						that.certs.push(resp.data.cert)
+					})
+				}
+			})
+		},
+
+		// 格式化时间
+		formatTime: function (timestamp) {
+			return new Date(timestamp * 1000).format("Y-m-d")
+		}
+	},
+	template: `<div>
+	<input type="hidden" name="certIdsJSON" :value="JSON.stringify(certIds())"/>
+	<div v-if="certs != null && certs.length > 0">
+		<div class="ui label small" v-for="(cert, index) in certs">
+			{{cert.name}} / {{cert.dnsNames}} / 有效至{{formatTime(cert.timeEndAt)}} &nbsp; <a href="" title="删除" @click.prevent="removeCert()"><i class="icon remove"></i></a>
+		</div>
+		<div class="ui divider"></div>
+	</div>
+	<div v-else>
+		<span class="red">选择或上传证书后<span v-if="vProtocol == 'https'">HTTPS</span><span v-if="vProtocol == 'tls'">TLS</span>服务才能生效。</span>
+		<div class="ui divider"></div>
+	</div>
+	<button class="ui button tiny" type="button" @click.prevent="selectCert()">选择已有证书</button> &nbsp;
+	<button class="ui button tiny" type="button" @click.prevent="uploadCert()">上传新证书</button>
+</div>`
+})