WebP转换质量转移到WebP策略配置

internal/web/actions/default/clusters/cluster/settings/webp/index.go

@@ -45,6 +45,7 @@ func (this *IndexAction) RunGet(params struct {
 func (this *IndexAction) RunPost(params struct {
 	ClusterId     int64
 	IsOn          bool
+	Quality       int
 	RequireCache  bool
 	MinLengthJSON []byte
 	MaxLengthJSON []byte
@@ -59,6 +60,13 @@ func (this *IndexAction) RunPost(params struct {
 		RequireCache: params.RequireCache,
 	}
 
+	if params.Quality < 0 {
+		params.Quality = 0
+	} else if params.Quality > 100 {
+		params.Quality = 100
+	}
+	config.Quality = params.Quality
+
 	if len(params.MinLengthJSON) > 0 {
 		var minLength = &shared.SizeCapacity{}
 		err := json.Unmarshal(params.MinLengthJSON, minLength)
@@ -79,6 +87,11 @@ func (this *IndexAction) RunPost(params struct {
 		config.MaxLength = maxLength
 	}
 
+	err := config.Init()
+	if err != nil {
+		this.Fail("配置校验失败：" + err.Error())
+	}
+
 	configJSON, err := json.Marshal(config)
 	if err != nil {
 		this.ErrorPage(err)

web/public/js/components/server/http-webp-config-box.js

@@ -6,7 +6,6 @@ Vue.component("http-webp-config-box", {
 			config = {
 				isPrior: false,
 				isOn: false,
-				quality: 50,
 				minLength: {count: 0, "unit": "kb"},
 				maxLength: {count: 0, "unit": "kb"},
 				mimeTypes: ["image/png", "image/jpeg", "image/bmp", "image/x-ico"],
@@ -24,21 +23,7 @@ Vue.component("http-webp-config-box", {
 
 		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
+			moreOptionsVisible: false
 		}
 	},
 	methods: {
@@ -95,16 +80,6 @@ Vue.component("http-webp-config-box", {
 					<p class="comment">响应的Content-Type里包含这些MimeType的内容将会被转成WebP。</p>
 				</td>
 			</tr>
-			<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>

web/views/@default/clusters/cluster/settings/webp/index.html

@@ -15,6 +15,16 @@
                 </td>
             </tr>
             <tbody v-show="webpPolicy.isOn">
+                <tr>
+                    <td>图片质量</td>
+                    <td>
+                        <div class="ui input right labeled">
+                            <input type="text" name="quality" v-model="webpPolicy.quality" style="width: 5em" maxlength="4"/>
+                            <span class="ui label">%</span>
+                        </div>
+                        <p class="comment">取值在0到100之间，0表示默认；数值越大生成的图像越清晰，文件尺寸也会越大，同时消耗的系统资源越多（在低配置的边缘节点上建议不超过50%）。</p>
+                    </td>
+                </tr>
                 <tr>
                     <td>需要满足缓存条件</td>
                     <td>