mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-11-19 23:50:25 +08:00
实现基本的匹配条件管理
This commit is contained in:
GoEdgeLab
157
web/public/js/components/server/http-cond-definitions.js
Normal file
157
web/public/js/components/server/http-cond-definitions.js
Normal file
@@ -0,0 +1,157 @@
|
||||
// URL扩展名条件
|
||||
Vue.component("http-cond-url-extension", {
|
||||
props: ["v-cond"],
|
||||
data: function () {
|
||||
let cond = this.vCond
|
||||
if (cond == null) {
|
||||
cond = {
|
||||
param: "${requestPathExtension}",
|
||||
operator: "in",
|
||||
value: "[]"
|
||||
}
|
||||
}
|
||||
return {
|
||||
cond: cond,
|
||||
extensions: JSON.parse(cond.value), // TODO 可以拖动排序
|
||||
|
||||
isAdding: false,
|
||||
addingExt: ""
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
extensions: function () {
|
||||
this.cond.value = JSON.stringify(this.extensions)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addExt: function () {
|
||||
this.isAdding = !this.isAdding
|
||||
|
||||
if (this.isAdding) {
|
||||
let that = this
|
||||
setTimeout(function () {
|
||||
that.$refs.addingExt.focus()
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
cancelAdding: function () {
|
||||
this.isAdding = false
|
||||
this.addingExt = ""
|
||||
},
|
||||
confirmAdding: function () {
|
||||
// TODO 做更详细的校验
|
||||
// TODO 如果有重复的则提示之
|
||||
|
||||
if (this.addingExt.length == 0) {
|
||||
return
|
||||
}
|
||||
if (this.addingExt[0] != ".") {
|
||||
this.addingExt = "." + this.addingExt
|
||||
}
|
||||
this.addingExt = this.addingExt.replace(/\s+/g, "")
|
||||
this.extensions.push(this.addingExt)
|
||||
|
||||
// 清除状态
|
||||
this.cancelAdding()
|
||||
},
|
||||
removeExt: function (index) {
|
||||
this.extensions.$remove(index)
|
||||
}
|
||||
},
|
||||
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 divider"></div>
|
||||
</div>
|
||||
<div class="ui fields inline" v-if="isAdding">
|
||||
<div class="ui field">
|
||||
<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>
|
||||
<a href="" title="取消" @click.prevent="cancelAdding"><i class="icon remove"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<button class="ui button tiny" type="button" @click.prevent="addExt()">+添加扩展名</button>
|
||||
<p class="comment">扩展名需要包含点（.）符号，例如<span class="ui label tiny">.jpg</span>、<span class="ui label tiny">.png</span>之类。</p>
|
||||
</div>`
|
||||
})
|
||||
|
||||
// 根据MimeType
|
||||
Vue.component("http-cond-mime-type", {
|
||||
props: ["v-cond"],
|
||||
data: function () {
|
||||
let cond = this.vCond
|
||||
if (cond == null) {
|
||||
cond = {
|
||||
type: "mime-type",
|
||||
param: "${response.contentType}",
|
||||
operator: "mime type",
|
||||
value: "[]"
|
||||
}
|
||||
}
|
||||
return {
|
||||
cond: cond,
|
||||
mimeTypes: JSON.parse(cond.value), // TODO 可以拖动排序
|
||||
|
||||
isAdding: false,
|
||||
addingMimeType: ""
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mimeTypes: function () {
|
||||
this.cond.value = JSON.stringify(this.mimeTypes)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addMimeType: function () {
|
||||
this.isAdding = !this.isAdding
|
||||
|
||||
if (this.isAdding) {
|
||||
let that = this
|
||||
setTimeout(function () {
|
||||
that.$refs.addingMimeType.focus()
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
cancelAdding: function () {
|
||||
this.isAdding = false
|
||||
this.addingMimeType = ""
|
||||
},
|
||||
confirmAdding: function () {
|
||||
// TODO 做更详细的校验
|
||||
// TODO 如果有重复的则提示之
|
||||
|
||||
if (this.addingMimeType.length == 0) {
|
||||
return
|
||||
}
|
||||
this.addingMimeType = this.addingMimeType.replace(/\s+/g, "")
|
||||
this.mimeTypes.push(this.addingMimeType)
|
||||
|
||||
// 清除状态
|
||||
this.cancelAdding()
|
||||
},
|
||||
removeMimeType: function (index) {
|
||||
this.mimeTypes.$remove(index)
|
||||
}
|
||||
},
|
||||
template: `<div>
|
||||
<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
|
||||
<div v-if="mimeTypes.length > 0">
|
||||
<div class="ui label small" v-for="(mimeType, index) in mimeTypes">{{mimeType}} <a href="" title="删除" @click.prevent="removeMimeType(index)"><i class="icon remove"></i></a></div>
|
||||
<div class="ui divider"></div>
|
||||
</div>
|
||||
<div class="ui fields inline" v-if="isAdding">
|
||||
<div class="ui field">
|
||||
<input type="text" size="16" maxlength="100" v-model="addingMimeType" ref="addingMimeType" placeholder="xxxxx/xxx" @keyup.enter="confirmAdding" @keypress.enter.prevent="1" />
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<button class="ui button tiny" type="button" @click.prevent="confirmAdding">确认</button>
|
||||
<a href="" title="取消" @click.prevent="cancelAdding"><i class="icon remove"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<button class="ui button tiny" type="button" @click.prevent="addMimeType()">+添加MimeType</button>
|
||||
<p class="comment">服务器返回的内容的MimeType，比如<span class="ui label tiny">text/html</span>、<span class="ui label tiny">image/*</span>等。</p>
|
||||
</div>`
|
||||
})
|
||||
@@ -7,17 +7,22 @@ Vue.component("http-gzip-box", {
|
||||
isOn: true,
|
||||
level: 0,
|
||||
minLength: null,
|
||||
maxLength: null
|
||||
maxLength: null,
|
||||
condGroups: []
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
gzip: gzip,
|
||||
advancedVisible: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isOn: function () {
|
||||
return (!this.vIsLocation || this.vGzipRef.isPrior) && this.vGzipRef.isOn
|
||||
},
|
||||
changeAdvancedVisible: function (v) {
|
||||
this.advancedVisible = v
|
||||
}
|
||||
},
|
||||
template: `<div>
|
||||
@@ -26,7 +31,7 @@ Vue.component("http-gzip-box", {
|
||||
<prior-checkbox :v-config="vGzipRef" v-if="vIsLocation"></prior-checkbox>
|
||||
<tbody v-show="!vIsLocation || vGzipRef.isPrior">
|
||||
<tr>
|
||||
<td class="title">启用压缩</td>
|
||||
<td class="title">启用Gzip压缩</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" v-model="vGzipRef.isOn"/>
|
||||
@@ -45,7 +50,10 @@ Vue.component("http-gzip-box", {
|
||||
</select>
|
||||
<p class="comment">级别越高，压缩比例越大。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tr>
|
||||
</tbody>
|
||||
<more-options-tbody @change="changeAdvancedVisible"></more-options-tbody>
|
||||
<tbody v-show="isOn() && advancedVisible">
|
||||
<tr>
|
||||
<td>Gzip内容最小长度</td>
|
||||
<td>
|
||||
@@ -61,6 +69,7 @@ Vue.component("http-gzip-box", {
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<http-request-conds-tbody v-show="isOn() && advancedVisible" :v-cond-groups="gzip.condGroups"></http-request-conds-tbody>
|
||||
</table>
|
||||
</div>`
|
||||
})
|
||||
83
web/public/js/components/server/http-request-conds-tbody.js
Normal file
83
web/public/js/components/server/http-request-conds-tbody.js
Normal file
@@ -0,0 +1,83 @@
|
||||
Vue.component("http-request-conds-tbody", {
|
||||
props: ["v-cond-groups"],
|
||||
data: function () {
|
||||
let groups = this.vCondGroups
|
||||
if (groups == null) {
|
||||
groups = []
|
||||
}
|
||||
return {
|
||||
groups: groups,
|
||||
components: window.REQUEST_COND_COMPONENTS
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addGroup: function () {
|
||||
let that = this
|
||||
teaweb.popup("/servers/server/settings/conds/addGroupPopup", {
|
||||
height: "30em",
|
||||
callback: function (resp) {
|
||||
that.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.groups, groupIndex, resp.data.group)
|
||||
}
|
||||
})
|
||||
},
|
||||
removeGroup: function (groupIndex) {
|
||||
let that = this
|
||||
teaweb.confirm("确定要删除这一组条件吗？", function () {
|
||||
that.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="condGroupsJSON" :value="JSON.stringify(groups)"/>
|
||||
<div class="margin"></div>
|
||||
<div v-if="groups.length > 0">
|
||||
<table class="ui table">
|
||||
<tr v-for="(group, groupIndex) in 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}} </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>`
|
||||
})
|
||||
Reference in New Issue
Block a user