优化缓存条件设置交互

internal/web/actions/default/servers/server/settings/cache/createPopup.go

@@ -28,8 +28,9 @@ func (this *CreatePopupAction) RunGet(params struct {
 func (this *CreatePopupAction) RunPost(params struct {
 	CacheRefJSON []byte
 
-	CondType string
-	CondJSON []byte
+	CondType              string
+	CondJSON              []byte
+	CondIsCaseInsensitive bool
 
 	Must *actions.Must
 }) {
@@ -48,6 +49,7 @@ func (this *CreatePopupAction) RunPost(params struct {
 			return
 		}
 		cond.Type = params.CondType
+		cond.IsCaseInsensitive = params.CondIsCaseInsensitive
 		cacheRef.SimpleCond = cond
 
 		// 将组合条件置为空

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

@@ -4,11 +4,13 @@ Vue.component("http-cache-ref-box", {
 	mounted: function () {
 		this.$refs.variablesDescriber.update(this.ref.key)
 		if (this.ref.simpleCond != null) {
-			this.changeCondType(this.ref.simpleCond.type)
+			this.condType = this.ref.simpleCond.type
+			this.changeCondType(this.ref.simpleCond.type, true)
 			this.condCategory = "simple"
 		} else if (this.ref.conds != null && this.ref.conds.groups != null) {
 			this.condCategory = "complex"
 		}
+		this.changeCondCategory(this.condCategory)
 	},
 	data: function () {
 		let ref = this.vCacheRef
@@ -66,9 +68,12 @@ Vue.component("http-cache-ref-box", {
 		return {
 			ref: ref,
 			moreOptionsVisible: false,
+
 			condCategory: "simple", // 条件分类：simple|complex
 			condType: condType,
 			condComponent: condComponent,
+			condIsCaseInsensitive: (ref.simpleCond != null) ? ref.simpleCond.isCaseInsensitive : true,
+
 			components: window.REQUEST_COND_COMPONENTS
 		}
 	},
@@ -115,8 +120,27 @@ Vue.component("http-cache-ref-box", {
 		// 切换条件类型
 		changeCondCategory: function (condCategory) {
 			this.condCategory = condCategory
+
+			// resize window
+			let dialog = window.parent.document.querySelector("*[role='dialog']")
+			switch (condCategory) {
+				case "simple":
+					dialog.style.width = "40em"
+					break
+				case "complex":
+					let width = window.parent.innerWidth
+					if (width > 1024) {
+						width = 1024
+					}
+
+					dialog.style.width = width + "px"
+					break
+			}
 		},
-		changeCondType: function (condType) {
+		changeCondType: function (condType, isInit) {
+			if (!isInit && this.ref.simpleCond != null) {
+				this.ref.simpleCond.value = null
+			}
 			let def = this.components.$find(function (k, component) {
 				return component.type == condType
 			})
@@ -129,11 +153,11 @@ Vue.component("http-cache-ref-box", {
 	<tr v-if="condCategory == 'simple'">
 		<td class="title color-border">条件类型 *</td>
 		<td>
-			<select class="ui dropdown auto-width" name="condType" v-model="condType" @change="changeCondType(condType)">
+			<select class="ui dropdown auto-width" name="condType" v-model="condType" @change="changeCondType(condType, false)">
 				<option value="url-extension">URL扩展名</option>
 				<option value="url-prefix">URL前缀</option>
 				<option value="url-eq-index">首页</option>
-				<option value="url-eq">URL精准匹配</option>
+				<option value="url-eq">URL完整路径</option>
 				<option value="url-regexp">URL正则匹配</option>
 			</select>
 			<p class="comment"><a href="" @click.prevent="changeCondCategory('complex')">切换到复杂条件 &raquo;</a></p>
@@ -145,6 +169,16 @@ Vue.component("http-cache-ref-box", {
 			<component :is="condComponent.component" :v-cond="ref.simpleCond"></component>
 		</td>
 	</tr>
+	<tr v-if="condCategory == 'simple' && condComponent.caseInsensitive">
+		<td class="color-border">不区分大小写</td>
+		<td>
+			<div class="ui checkbox">
+				<input type="checkbox" name="condIsCaseInsensitive" value="1" v-model="condIsCaseInsensitive"/>
+				<label></label>
+			</div>
+			<p class="comment">选中后表示对比时忽略参数值的大小写。</p>
+		</td>
+	</tr>
 	<tr v-if="condCategory == 'complex'">
 		<td class="title">匹配条件分组 *</td>
 		<td>

web/public/js/components/server/http-cache-refs-config-box.js

@@ -35,17 +35,12 @@ Vue.component("http-cache-refs-config-box", {
 		addRef: function (isReverse) {
 			window.UPDATING_CACHE_REF = null
 
-			let width = window.innerWidth
-			if (width > 1024) {
-				width = 1024
-			}
 			let height = window.innerHeight
 			if (height > 500) {
 				height = 500
 			}
 			let that = this
 			teaweb.popup("/servers/server/settings/cache/createPopup?isReverse=" + (isReverse ? 1 : 0), {
-				width: width + "px",
 				height: height + "px",
 				callback: function (resp) {
 					let newRef = resp.data.cacheRef
@@ -82,17 +77,12 @@ Vue.component("http-cache-refs-config-box", {
 		updateRef: function (index, cacheRef) {
 			window.UPDATING_CACHE_REF = cacheRef
 
-			let width = window.innerWidth
-			if (width > 1024) {
-				width = 1024
-			}
 			let height = window.innerHeight
 			if (height > 500) {
 				height = 500
 			}
 			let that = this
 			teaweb.popup("/servers/server/settings/cache/createPopup", {
-				width: width + "px",
 				height: height + "px",
 				callback: function (resp) {
 					resp.data.cacheRef.id = that.refs[index].id
@@ -220,7 +210,7 @@ Vue.component("http-cache-refs-config-box", {
 		</table>
 		<p class="comment" v-if="refs.length > 1">所有条件匹配顺序为从上到下，可以拖动左侧的<i class="icon bars"></i>排序。服务设置的优先级比全局缓存策略设置的优先级要高。</p>
 		
-		<button class="ui button tiny" @click.prevent="addRef(false)" type="button">+添加缓存设置</button> &nbsp; &nbsp; <a href="" @click.prevent="addRef(true)">+添加不缓存设置</a>
+		<button class="ui button tiny" @click.prevent="addRef(false)" type="button">+添加缓存条件</button> &nbsp; &nbsp; <a href="" @click.prevent="addRef(true)">+添加不缓存条件</a>
 	</div>
 	<div class="margin"></div>
 </div>`

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

@@ -70,7 +70,7 @@ Vue.component("http-cond-url-extension", {
 	template: `<div>
 	<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
 	<div v-if="extensions.length > 0">
-		<div class="ui label small" v-for="(ext, index) in extensions">{{ext}} <a href="" title="删除" @click.prevent="removeExt(index)"><i class="icon remove"></i></a></div>
+		<div class="ui label small basic" v-for="(ext, index) in extensions">{{ext}} <a href="" title="删除" @click.prevent="removeExt(index)"><i class="icon remove"></i></a></div>
 		<div class="ui divider"></div>
 	</div>
 	<div class="ui fields inline" v-if="isAdding">
@@ -78,18 +78,18 @@ Vue.component("http-cond-url-extension", {
 			<input type="text" size="6" maxlength="100" v-model="addingExt" ref="addingExt" placeholder=".xxx" @keyup.enter="confirmAdding" @keypress.enter.prevent="1" />
 		</div>
 		<div class="ui field">
-			<button class="ui button tiny" type="button" @click.prevent="confirmAdding">确认</button>
+			<button class="ui button tiny basic" type="button" @click.prevent="confirmAdding">确认</button>
 			<a href="" title="取消" @click.prevent="cancelAdding"><i class="icon remove"></i></a>
 		</div> 
 	</div>
-	<div style="margin-top: 1em">
-		<button class="ui button tiny" type="button" @click.prevent="addExt()">+添加扩展名</button>
+	<div style="margin-top: 1em" v-show="!isAdding">
+		<button class="ui button tiny basic" type="button" @click.prevent="addExt()">+添加扩展名</button>
 	</div>
-	<p class="comment">扩展名需要包含点（.）符号，例如<span class="ui label tiny">.jpg</span>、<span class="ui label tiny">.png</span>之类。</p>
+	<p class="comment">扩展名需要包含点（.）符号，例如<code-label>.jpg</code-label>、<code-label>.png</code-label>之类。</p>
 </div>`
 })
 
-// URL扩展名条件
+// 排除URL扩展名条件
 Vue.component("http-cond-url-not-extension", {
 	props: ["v-cond"],
 	data: function () {
@@ -161,7 +161,7 @@ Vue.component("http-cond-url-not-extension", {
 	template: `<div>
 	<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
 	<div v-if="extensions.length > 0">
-		<div class="ui label small" v-for="(ext, index) in extensions">{{ext}} <a href="" title="删除" @click.prevent="removeExt(index)"><i class="icon remove"></i></a></div>
+		<div class="ui label small basic" v-for="(ext, index) in extensions">{{ext}} <a href="" title="删除" @click.prevent="removeExt(index)"><i class="icon remove"></i></a></div>
 		<div class="ui divider"></div>
 	</div>
 	<div class="ui fields inline" v-if="isAdding">
@@ -169,20 +169,23 @@ Vue.component("http-cond-url-not-extension", {
 			<input type="text" size="6" maxlength="100" v-model="addingExt" ref="addingExt" placeholder=".xxx" @keyup.enter="confirmAdding" @keypress.enter.prevent="1" />
 		</div>
 		<div class="ui field">
-			<button class="ui button tiny" type="button" @click.prevent="confirmAdding">确认</button>
+			<button class="ui button tiny basic" type="button" @click.prevent="confirmAdding">确认</button>
 			<a href="" title="取消" @click.prevent="cancelAdding"><i class="icon remove"></i></a>
 		</div> 
 	</div>
-	<div style="margin-top: 1em">
-		<button class="ui button tiny" type="button" @click.prevent="addExt()">+添加扩展名</button>
+	<div style="margin-top: 1em" v-show="!isAdding">
+		<button class="ui button tiny basic" type="button" @click.prevent="addExt()">+添加扩展名</button>
 	</div>
-	<p class="comment">扩展名需要包含点（.）符号，例如<span class="ui label tiny">.jpg</span>、<span class="ui label tiny">.png</span>之类。</p>
+	<p class="comment">扩展名需要包含点（.）符号，例如<code-label>.jpg</code-label>、<code-label>.png</code-label>之类。</p>
 </div>`
 })
 
 // 根据URL前缀
 Vue.component("http-cond-url-prefix", {
 	props: ["v-cond"],
+	mounted: function () {
+		this.$refs.valueInput.focus()
+	},
 	data: function () {
 		let cond = {
 			isRequest: true,
@@ -205,13 +208,16 @@ Vue.component("http-cond-url-prefix", {
 	},
 	template: `<div>
 	<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
-	<input type="text" v-model="cond.value"/>
+	<input type="text" v-model="cond.value" ref="valueInput"/>
 	<p class="comment">URL前缀，有此前缀的URL都将会被匹配，通常以<code-label>/</code-label>开头，比如<code-label>/static</code-label>、<code-label>/images</code-label>，不需要带域名。</p>
 </div>`
 })
 
 Vue.component("http-cond-url-not-prefix", {
 	props: ["v-cond"],
+	mounted: function () {
+		this.$refs.valueInput.focus()
+	},
 	data: function () {
 		let cond = {
 			isRequest: true,
@@ -235,7 +241,7 @@ Vue.component("http-cond-url-not-prefix", {
 	},
 	template: `<div>
 	<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
-	<input type="text" v-model="cond.value"/>
+	<input type="text" v-model="cond.value" ref="valueInput"/>
 	<p class="comment">要排除的URL前缀，有此前缀的URL都将会被匹配，通常以<code-label>/</code-label>开头，比如<code-label>/static</code-label>、<code-label>/images</code-label>，不需要带域名。</p>
 </div>`
 })
@@ -273,6 +279,9 @@ Vue.component("http-cond-url-eq-index", {
 // URL精准匹配
 Vue.component("http-cond-url-eq", {
 	props: ["v-cond"],
+	mounted: function () {
+		this.$refs.valueInput.focus()
+	},
 	data: function () {
 		let cond = {
 			isRequest: true,
@@ -295,13 +304,16 @@ Vue.component("http-cond-url-eq", {
 	},
 	template: `<div>
 	<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
-	<input type="text" v-model="cond.value"/>
+	<input type="text" v-model="cond.value" ref="valueInput"/>
 	<p class="comment">完整的URL路径，通常以<code-label>/</code-label>开头，比如<code-label>/static/ui.js</code-label>，不需要带域名。</p>
 </div>`
 })
 
 Vue.component("http-cond-url-not-eq", {
 	props: ["v-cond"],
+	mounted: function () {
+		this.$refs.valueInput.focus()
+	},
 	data: function () {
 		let cond = {
 			isRequest: true,
@@ -325,7 +337,7 @@ Vue.component("http-cond-url-not-eq", {
 	},
 	template: `<div>
 	<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
-	<input type="text" v-model="cond.value"/>
+	<input type="text" v-model="cond.value" ref="valueInput"/>
 	<p class="comment">要排除的完整的URL路径，通常以<code-label>/</code-label>开头，比如<code-label>/static/ui.js</code-label>，不需要带域名。</p>
 </div>`
 })
@@ -333,6 +345,9 @@ Vue.component("http-cond-url-not-eq", {
 // URL正则匹配
 Vue.component("http-cond-url-regexp", {
 	props: ["v-cond"],
+	mounted: function () {
+		this.$refs.valueInput.focus()
+	},
 	data: function () {
 		let cond = {
 			isRequest: true,
@@ -355,7 +370,7 @@ Vue.component("http-cond-url-regexp", {
 	},
 	template: `<div>
 	<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
-	<input type="text" v-model="cond.value"/>
+	<input type="text" v-model="cond.value" ref="valueInput"/>
 	<p class="comment">匹配URL的正则表达式，比如<code-label>^/static/(.*).js$</code-label>，不需要带域名。</p>
 </div>`
 })
@@ -363,6 +378,9 @@ Vue.component("http-cond-url-regexp", {
 // 排除URL正则匹配
 Vue.component("http-cond-url-not-regexp", {
 	props: ["v-cond"],
+	mounted: function () {
+		this.$refs.valueInput.focus()
+	},
 	data: function () {
 		let cond = {
 			isRequest: true,
@@ -385,7 +403,7 @@ Vue.component("http-cond-url-not-regexp", {
 	},
 	template: `<div>
 	<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
-	<input type="text" v-model="cond.value"/>
+	<input type="text" v-model="cond.value" ref="valueInput"/>
 	<p class="comment"><strong>不要</strong>匹配URL的正则表达式，意即只要匹配成功则排除此条件，比如<code-label>^/static/(.*).js$</code-label>，不需要带域名。</p>
 </div>`
 })
@@ -394,6 +412,9 @@ Vue.component("http-cond-url-not-regexp", {
 // User-Agent正则匹配
 Vue.component("http-cond-user-agent-regexp", {
 	props: ["v-cond"],
+	mounted: function () {
+		this.$refs.valueInput.focus()
+	},
 	data: function () {
 		let cond = {
 			isRequest: true,
@@ -416,7 +437,7 @@ Vue.component("http-cond-user-agent-regexp", {
 	},
 	template: `<div>
 	<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
-	<input type="text" v-model="cond.value"/>
+	<input type="text" v-model="cond.value" ref="valueInput"/>
 	<p class="comment">匹配User-Agent的正则表达式，比如<code-label>Android|iPhone</code-label>。</p>
 </div>`
 })
@@ -424,6 +445,9 @@ Vue.component("http-cond-user-agent-regexp", {
 // User-Agent正则不匹配
 Vue.component("http-cond-user-agent-not-regexp", {
 	props: ["v-cond"],
+	mounted: function () {
+		this.$refs.valueInput.focus()
+	},
 	data: function () {
 		let cond = {
 			isRequest: true,
@@ -446,7 +470,7 @@ Vue.component("http-cond-user-agent-not-regexp", {
 	},
 	template: `<div>
 	<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
-	<input type="text" v-model="cond.value"/>
+	<input type="text" v-model="cond.value" ref="valueInput"/>
 	<p class="comment">匹配User-Agent的正则表达式，比如<code-label>Android|iPhone</code-label>，如果匹配，则排除此条件。</p>
 </div>`
 })
@@ -520,12 +544,12 @@ Vue.component("http-cond-mime-type", {
 			<input type="text" size="16" maxlength="100" v-model="addingMimeType" ref="addingMimeType" placeholder="类似于image/png" @keyup.enter="confirmAdding" @keypress.enter.prevent="1" />
 		</div>
 		<div class="ui field">
-			<button class="ui button tiny" type="button" @click.prevent="confirmAdding">确认</button>
+			<button class="ui button tiny basic" type="button" @click.prevent="confirmAdding">确认</button>
 			<a href="" title="取消" @click.prevent="cancelAdding"><i class="icon remove"></i></a>
 		</div> 
 	</div>
 	<div style="margin-top: 1em">
-		<button class="ui button tiny" type="button" @click.prevent="addMimeType()">+添加MimeType</button>
+		<button class="ui button tiny basic" type="button" @click.prevent="addMimeType()">+添加MimeType</button>
 	</div>
 	<p class="comment">服务器返回的内容的MimeType，比如<span class="ui label tiny">text/html</span>、<span class="ui label tiny">image/*</span>等。</p>
 </div>`

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

@@ -105,7 +105,7 @@ Vue.component("http-request-conds-box", {
 		</table>
 		
 		<div>
-			<button class="ui button tiny" type="button" @click.prevent="addGroup()">+添加分组</button>
+			<button class="ui button tiny basic" type="button" @click.prevent="addGroup()">+添加分组</button>
 		</div>
 	</div>	
 </div>`

web/public/js/conds/official.json

@@ -27,7 +27,7 @@
   },
   {
     "type": "url-eq",
-    "name": "URL精准匹配",
+    "name": "URL完整路径",
     "description": "检查URL中的文件路径是否一致",
     "component": "http-cond-url-eq",
     "paramsTitle": "URL完整路径",
@@ -79,7 +79,7 @@
   },
   {
     "type": "url-not-eq",
-    "name": "排除：URL精准匹配",
+    "name": "排除：URL完整路径",
     "description": "检查URL中的文件路径是否一致",
     "component": "http-cond-url-not-eq",
     "paramsTitle": "URL完整路径",

web/views/@default/servers/server/settings/cache/createPopup.html

@@ -1,9 +1,9 @@
 {$layout "layout_popup"}
 
-<h3 v-if="!isReverse && cacheRef == null">添加缓存设置</h3>
-<h3 v-if="!isReverse && cacheRef != null">修改缓存设置</h3>
-<h3 v-if="isReverse && cacheRef == null">添加不缓存设置</h3>
-<h3 v-if="isReverse && cacheRef != null">添加不缓存设置</h3>
+<h3 v-if="!isReverse && cacheRef == null">添加缓存条件</h3>
+<h3 v-if="!isReverse && cacheRef != null">修改缓存条件</h3>
+<h3 v-if="isReverse && cacheRef == null">添加不缓存条件</h3>
+<h3 v-if="isReverse && cacheRef != null">修改不缓存条件</h3>
 <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
     <table class="ui table definition selectable">
         <tbody is="http-cache-ref-box" :v-cache-ref="cacheRef" :v-is-reverse="isReverse"></tbody>