mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-11-04 13:10:26 +08:00
134 lines
3.8 KiB
JavaScript
134 lines
3.8 KiB
JavaScript
Vue.component("http-webp-config-box", {
|
||
props: ["v-webp-config", "v-is-location"],
|
||
data: function () {
|
||
let config = this.vWebpConfig
|
||
if (config == null) {
|
||
config = {
|
||
isPrior: false,
|
||
isOn: false,
|
||
quality: 50,
|
||
minLength: {count: 0, "unit": "kb"},
|
||
maxLength: {count: 0, "unit": "kb"},
|
||
mimeTypes: ["image/*"],
|
||
extensions: [".png", ".jpeg", ".jpg"],
|
||
conds: null
|
||
}
|
||
}
|
||
|
||
if (config.mimeTypes == null) {
|
||
config.mimeTypes = []
|
||
}
|
||
if (config.extensions == null) {
|
||
config.extensions = []
|
||
}
|
||
|
||
return {
|
||
config: config,
|
||
moreOptionsVisible: false,
|
||
quality: config.quality
|
||
}
|
||
},
|
||
watch: {
|
||
quality: function (v) {
|
||
let quality = parseInt(v)
|
||
if (isNaN(quality)) {
|
||
quality = 90
|
||
} else if (quality < 1) {
|
||
quality = 1
|
||
} else if (quality > 100) {
|
||
quality = 100
|
||
}
|
||
this.config.quality = quality
|
||
}
|
||
},
|
||
methods: {
|
||
isOn: function () {
|
||
return (!this.vIsLocation || this.config.isPrior) && this.config.isOn
|
||
},
|
||
changeExtensions: function (values) {
|
||
values.forEach(function (v, k) {
|
||
if (v.length > 0 && v[0] != ".") {
|
||
values[k] = "." + v
|
||
}
|
||
})
|
||
this.config.extensions = values
|
||
},
|
||
changeMimeTypes: function (values) {
|
||
this.config.mimeTypes = values
|
||
},
|
||
changeAdvancedVisible: function () {
|
||
this.moreOptionsVisible = !this.moreOptionsVisible
|
||
},
|
||
changeConds: function (conds) {
|
||
this.config.conds = conds
|
||
}
|
||
},
|
||
template: `<div>
|
||
<input type="hidden" name="webpJSON" :value="JSON.stringify(config)"/>
|
||
<table class="ui table definition selectable">
|
||
<prior-checkbox :v-config="config" v-if="vIsLocation"></prior-checkbox>
|
||
<tbody v-show="!vIsLocation || config.isPrior">
|
||
<tr>
|
||
<td class="title">是否启用</td>
|
||
<td>
|
||
<div class="ui checkbox">
|
||
<input type="checkbox" value="1" v-model="config.isOn"/>
|
||
<label></label>
|
||
</div>
|
||
<p class="comment">选中后表示开启自动WebP压缩。</p>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
<tbody v-show="isOn()">
|
||
<tr>
|
||
<td>图片质量</td>
|
||
<td>
|
||
<div class="ui input right labeled">
|
||
<input type="text" v-model="quality" style="width: 5em" maxlength="4"/>
|
||
<span class="ui label">%</span>
|
||
</div>
|
||
<p class="comment">取值在0到100之间，数值越大生成的图像越清晰，同时文件尺寸也会越大。</p>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>支持的扩展名</td>
|
||
<td>
|
||
<values-box :values="config.extensions" @change="changeExtensions" placeholder="比如 .html"></values-box>
|
||
<p class="comment">含有这些扩展名的URL将会被转成WebP，不区分大小写。</p>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>支持的MimeType</td>
|
||
<td>
|
||
<values-box :values="config.mimeTypes" @change="changeMimeTypes" placeholder="比如 text/*"></values-box>
|
||
<p class="comment">响应的Content-Type里包含这些MimeType的内容将会被转成WebP。</p>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
<more-options-tbody @change="changeAdvancedVisible" v-if="isOn()"></more-options-tbody>
|
||
<tbody v-show="isOn() && moreOptionsVisible">
|
||
<tr>
|
||
<td>内容最小长度</td>
|
||
<td>
|
||
<size-capacity-box :v-name="'minLength'" :v-value="config.minLength" :v-unit="'kb'"></size-capacity-box>
|
||
<p class="comment">0表示不限制，内容长度从文件尺寸或Content-Length中获取。</p>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>内容最大长度</td>
|
||
<td>
|
||
<size-capacity-box :v-name="'maxLength'" :v-value="config.maxLength" :v-unit="'mb'"></size-capacity-box>
|
||
<p class="comment">0表示不限制，内容长度从文件尺寸或Content-Length中获取。</p>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>匹配条件</td>
|
||
<td>
|
||
<http-request-conds-box :v-conds="config.conds" @change="changeConds"></http-request-conds-box>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="ui margin"></div>
|
||
</div>`
|
||
}) |