Merge pull request #13 from ruibaby/feat/more-options

feat: update proxy settings form to support additional parameters
webp-sh · Aug 6, 2024 · 5b6a057 · 5b6a057
2 parents b89915f + b42f7bb
commit 5b6a057
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 2 deletions.
diff --git a/ui/src/components/ProxyEditModal.vue b/ui/src/components/ProxyEditModal.vue
@@ -81,8 +81,8 @@ async function onSubmit(data: WebpCloudProxyEditFormState) {
 
 <template>
   <VModal
-    mount-to-body
     ref="modal"
+    mount-to-body
     :width="600"
     title="编辑代理"
     @close="emit('close')"
@@ -146,6 +146,60 @@ async function onSubmit(data: WebpCloudProxyEditFormState) {
         >
         </FormKit>
       </FormKit>
+      <FormKit
+        help="当代理被禁用时（手动或因为你的配额已用完），你可以指定后续请求处理方式"
+        :model-value="proxyStats?.data.proxy_operation_on_disabled"
+        name="proxy_operation_on_disabled"
+        label="不可用时的处理方式"
+        type="select"
+        value="redirect"
+        :options="[
+          {
+            value: 'redirect',
+            label: '重定向至源图片',
+          },
+          {
+            value: 'deny',
+            label: '阻止访问，返回 403',
+          },
+          {
+            value: 'placeholder',
+            label: '占位图',
+          },
+        ]"
+      ></FormKit>
+
+      <FormKit
+        label="自适应图片大小"
+        name="proxy_adaptive_resize"
+        :value="false"
+        :model-value="proxyStats?.data.proxy_adaptive_resize"
+        type="checkbox"
+      ></FormKit>
+
+      <FormKit
+        v-if="value.proxy_adaptive_resize"
+        label="桌面端最大宽度"
+        help="单位为像素（px）"
+        name="proxy_adaptive_resize_desktop_width"
+        :value="1600"
+        :model-value="proxyStats?.data.proxy_adaptive_resize_desktop_width"
+        type="number"
+        number
+        validation="required"
+      ></FormKit>
+
+      <FormKit
+        v-if="value.proxy_adaptive_resize"
+        label="移动端最大宽度"
+        help="单位为像素（px）"
+        name="proxy_adaptive_resize_mobile_width"
+        :value="800"
+        :model-value="proxyStats?.data.proxy_adaptive_resize_mobile_width"
+        type="number"
+        number
+        validation="required"
+      ></FormKit>
       <FormKit type="hidden" name="proxy_enabled" :value="true"></FormKit>
     </FormKit>
     <template #footer>

diff --git a/ui/src/types/index.ts b/ui/src/types/index.ts
@@ -52,7 +52,7 @@ export interface WebpCloudProxyStats {
   proxy_cache_size: number;
   proxy_cache_size_limit: number;
   proxy_enabled: boolean;
-  proxy_operation_on_disabled: string;
+  proxy_operation_on_disabled: "redirect" | "deny" | "placeholder";
   proxy_created_at: string;
   proxy_enable_extra_params: boolean;
   proxy_visual_effects: any[];
@@ -63,6 +63,9 @@ export interface WebpCloudProxyStats {
   proxy_daily_bytes_sent: ProxyDailyBytesSent[];
   proxy_last_logs: any[];
   proxy_custom_domain: any[];
+  proxy_adaptive_resize: boolean;
+  proxy_adaptive_resize_desktop_width: number;
+  proxy_adaptive_resize_mobile_width: number;
 }
 
 export interface ProxyDailyBytesSent {
@@ -86,6 +89,10 @@ export interface WebpCloudProxyEditFormState {
   proxy_cors_header: string;
   proxy_allowed_referer: string;
   proxy_extra_headers: ProxyExtraHeader[];
+  proxy_adaptive_resize: boolean;
+  proxy_adaptive_resize_desktop_width: number;
+  proxy_adaptive_resize_mobile_width: number;
+  proxy_operation_on_disabled: "redirect" | "deny" | "placeholder";
 }
 
 export interface ProxyExtraHeader {