缓存条件增加多个匹配方式/优化缓存设置界面

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

@@ -44,7 +44,7 @@ Vue.component("http-cache-ref-box", {
 	},
 	template: `<tbody>
 	<tr>
-		<td class="title">匹配条件 *</td>
+		<td class="title">匹配条件分组 *</td>
 		<td>
 			<http-request-conds-box :v-conds="ref.conds" @change="changeConds"></http-request-conds-box>
 			

web/public/js/components/server/http-cond-definitions.js

@@ -102,6 +102,53 @@ Vue.component("http-cond-url-prefix", {
 </div>`
 })
 
+// URL精准匹配
+Vue.component("http-cond-url-eq", {
+	props: ["v-cond"],
+	data: function () {
+		let cond = this.vCond
+		if (cond == null) {
+			cond = {
+				isRequest: true,
+				param: "${requestPath}",
+				operator: "eq",
+				value: ""
+			}
+		}
+		return {
+			cond: cond
+		}
+	},
+	template: `<div>
+		<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
+	<input type="text" v-model="cond.value"/>
+</div>`
+})
+
+// URL正则匹配
+Vue.component("http-cond-url-regexp", {
+	props: ["v-cond"],
+	data: function () {
+		let cond = this.vCond
+		if (cond == null) {
+			cond = {
+				isRequest: true,
+				param: "${requestPath}",
+				operator: "regexp",
+				value: ""
+			}
+		}
+		return {
+			cond: cond
+		}
+	},
+	template: `<div>
+		<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
+	<input type="text" v-model="cond.value"/>
+</div>`
+})
+
+
 // 根据MimeType
 Vue.component("http-cond-mime-type", {
 	props: ["v-cond"],

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

@@ -63,7 +63,8 @@ Vue.component("http-request-conds-box", {
 		<div v-if="conds.groups.length > 0">
 			<table class="ui table">
 				<tr v-for="(group, groupIndex) in conds.groups">
-					<td style="background: white">
+					<td class="title" :style="{'border-bottom':(groupIndex < conds.groups.length-1) ? '1px solid rgba(34,36,38,.15)':''}">分组{{groupIndex+1}}</td>
+					<td style="background: white;" :style="{'border-bottom':(groupIndex < conds.groups.length-1) ? '1px solid rgba(34,36,38,.15)':''}">
 						<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>
@@ -74,7 +75,7 @@ Vue.component("http-request-conds-box", {
 							<var v-if="index < group.conds.length - 1"> {{group.connector}} &nbsp;</var>
 						</var>
 					</td>
-					<td style="width: 5em; background: white">
+					<td style="width: 5em; background: white" :style="{'border-bottom':(groupIndex < conds.groups.length-1) ? '1px solid rgba(34,36,38,.15)':''}">
 						<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>
@@ -85,6 +86,10 @@ Vue.component("http-request-conds-box", {
 		<div>
 			<button class="ui button tiny" type="button" @click.prevent="addGroup()">+</button>
 		</div>
+		<p class="comment">
+			<span v-if="conds.connector == 'or'">只要满足其中一个条件分组即可。</span>
+			<span v-if="conds.connector == 'and'">需要满足所有条件分组。</span>
+		</p>
 	</div>	
 </div>`
 })

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

@@ -10,10 +10,16 @@ Vue.component("http-request-conds-view", {
 			}
 		}
 		return {
-			conds: conds,
+			initConds: conds,
 			components: window.REQUEST_COND_COMPONENTS
 		}
 	},
+	computed: {
+		// 之所以使用computed，是因为需要动态更新
+		conds: function () {
+			return this.initConds
+		},
+	},
 	methods: {
 		typeName: function (cond) {
 			let c = this.components.$find(function (k, v) {