From eb044214122c201c78604d9fcedfa1591d2d01a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=A5=A5=E8=B6=85?= <iwind.liu@gmail.com>
Date: Mon, 11 Dec 2023 10:00:22 +0800
Subject: [PATCH] =?UTF-8?q?WebP=E8=BD=AC=E6=8D=A2=E8=B4=A8=E9=87=8F?=
 =?UTF-8?q?=E8=BD=AC=E7=A7=BB=E5=88=B0WebP=E7=AD=96=E7=95=A5=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../clusters/cluster/settings/webp/index.go   | 13 +++++++++
 .../components/server/http-webp-config-box.js | 27 +------------------
 .../clusters/cluster/settings/webp/index.html | 10 +++++++
 3 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/internal/web/actions/default/clusters/cluster/settings/webp/index.go b/internal/web/actions/default/clusters/cluster/settings/webp/index.go
index 2270a0c4..6d5cfb3f 100644
--- a/internal/web/actions/default/clusters/cluster/settings/webp/index.go
+++ b/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)
diff --git a/web/public/js/components/server/http-webp-config-box.js b/web/public/js/components/server/http-webp-config-box.js
index 4b84aa87..3a9ec80c 100644
--- a/web/public/js/components/server/http-webp-config-box.js
+++ b/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>
diff --git a/web/views/@default/clusters/cluster/settings/webp/index.html b/web/views/@default/clusters/cluster/settings/webp/index.html
index e9d0e4ef..d0402ff6 100644
--- a/web/views/@default/clusters/cluster/settings/webp/index.html
+++ b/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>