feat: webhook preset template data

ui/src/components/access/AccessFormWebhookConfig.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from "react-i18next";
-import { Alert, Button, Form, type FormInstance, Input, Select, Switch } from "antd";
+import { DownOutlined as DownOutlinedIcon } from "@ant-design/icons";
+import { Alert, Button, Dropdown, Form, type FormInstance, Input, Select, Switch } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
@@ -128,8 +129,124 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
     formInst.setFieldValue("defaultDataForDeployment", initFormModel().defaultDataForDeployment);
   };
 
-  const handlePresetDataForNotificationClick = () => {
+  const handlePresetDataForNotificationClick = (key: string) => {
-    formInst.setFieldValue("defaultDataForNotification", initFormModel().defaultDataForNotification);
+    switch (key) {
+      case "bark":
+        formInst.setFieldValue("url", "https://api.day.app/push");
+        formInst.setFieldValue("method", "POST");
+        formInst.setFieldValue("headers", "Content-Type: application/json\r\nAuthorization: Bearer <your-gotify-token>");
+        formInst.setFieldValue(
+          "defaultDataForNotification",
+          JSON.stringify(
+            {
+              title: "${SUBJECT}",
+              body: "${MESSAGE}",
+              group: "<your-bark-group>",
+              device_keys: "<your-bark-device-key>",
+            },
+            null,
+            2
+          )
+        );
+        break;
+
+      case "gotify":
+        formInst.setFieldValue("url", "https://<your-gotify-server>/");
+        formInst.setFieldValue("method", "POST");
+        formInst.setFieldValue("headers", "Content-Type: application/json\r\nAuthorization: Bearer <your-gotify-token>");
+        formInst.setFieldValue(
+          "defaultDataForNotification",
+          JSON.stringify(
+            {
+              title: "${SUBJECT}",
+              message: "${MESSAGE}",
+              priority: 1,
+            },
+            null,
+            2
+          )
+        );
+        break;
+
+      case "ntfy":
+        formInst.setFieldValue("url", "https://<your-ntfy-server>/");
+        formInst.setFieldValue("method", "POST");
+        formInst.setFieldValue("headers", "Content-Type: application/json");
+        formInst.setFieldValue(
+          "defaultDataForNotification",
+          JSON.stringify(
+            {
+              topic: "<your-ntfy-topic>",
+              title: "${SUBJECT}",
+              message: "${MESSAGE}",
+              priority: 1,
+            },
+            null,
+            2
+          )
+        );
+        break;
+
+      case "pushover":
+        formInst.setFieldValue("url", "https://api.pushover.net/1/messages.json");
+        formInst.setFieldValue("method", "POST");
+        formInst.setFieldValue("headers", "Content-Type: application/json");
+        formInst.setFieldValue(
+          "defaultDataForNotification",
+          JSON.stringify(
+            {
+              token: "<your-pushover-token>",
+              user: "<your-pushover-user>",
+              title: "${SUBJECT}",
+              message: "${MESSAGE}",
+            },
+            null,
+            2
+          )
+        );
+        break;
+
+      case "pushplus":
+        formInst.setFieldValue("url", "https://www.pushplus.plus/send");
+        formInst.setFieldValue("method", "POST");
+        formInst.setFieldValue("headers", "Content-Type: application/json");
+        formInst.setFieldValue(
+          "defaultDataForNotification",
+          JSON.stringify(
+            {
+              token: "<your-pushplus-token>",
+              title: "${SUBJECT}",
+              content: "${MESSAGE}",
+            },
+            null,
+            2
+          )
+        );
+        break;
+
+      case "serverchan":
+        formInst.setFieldValue("url", "https://sctapi.ftqq.com/<your-serverchan-key>.send");
+        formInst.setFieldValue("method", "POST");
+        formInst.setFieldValue("headers", "Content-Type: application/json");
+        formInst.setFieldValue(
+          "defaultDataForNotification",
+          JSON.stringify(
+            {
+              text: "${SUBJECT}",
+              desp: "${MESSAGE}",
+            },
+            null,
+            2
+          )
+        );
+        break;
+
+      default:
+        formInst.setFieldValue("method", "POST");
+        formInst.setFieldValue("headers", "Content-Type: application/json");
+        formInst.setFieldValue("defaultDataForNotification", initFormModel().defaultDataForNotification);
+        break;
+    }
   };
 
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
@@ -169,10 +286,12 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
         <Form.Item className="mb-0">
           <label className="mb-1 block">
             <div className="flex w-full items-center justify-between gap-4">
-              <div className="max-w-full grow truncate">{t("access.form.webhook_default_data_for_deployment.label")}</div>
+              <div className="max-w-full grow truncate">
+                <span>{t("access.form.webhook_default_data_for_deployment.label")}</span>
+              </div>
               <div className="text-right">
                 <Button size="small" type="link" onClick={handlePresetDataForDeploymentClick}>
-                  {t("access.form.webhook_default_data_preset.button")}
+                  {t("access.form.webhook_preset_data.button")}
                 </Button>
               </div>
             </div>
@@ -196,11 +315,25 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
         <Form.Item className="mb-0">
           <label className="mb-1 block">
             <div className="flex w-full items-center justify-between gap-4">
-              <div className="max-w-full grow truncate">{t("access.form.webhook_default_data_for_notification.label")}</div>
+              <div className="max-w-full grow truncate">
+                <span>{t("access.form.webhook_default_data_for_notification.label")}</span>
+              </div>
               <div className="text-right">
-                <Button size="small" type="link" onClick={handlePresetDataForNotificationClick}>
+                <Dropdown
-                  {t("access.form.webhook_default_data_preset.button")}
+                  menu={{
-                </Button>
+                    items: ["bark", "ntfy", "gotify", "pushover", "pushplus", "serverchan"].map((key) => ({
+                      key,
+                      label: t(`access.form.webhook_preset_data.option.${key}.label`),
+                      onClick: () => handlePresetDataForNotificationClick(key),
+                    })),
+                  }}
+                  trigger={["click"]}
+                >
+                  <Button size="small" type="link">
+                    {t("access.form.webhook_preset_data.button")}
+                    <DownOutlinedIcon />
+                  </Button>
+                </Dropdown>
               </div>
             </div>
           </label>

ui/src/components/workflow/node/ApplyNodeConfigForm.tsx

@@ -398,7 +398,9 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
           <Form.Item className="mb-0">
             <label className="mb-1 block">
               <div className="flex w-full items-center justify-between gap-4">
-                <div className="max-w-full grow truncate">{t("workflow_node.apply.form.ca_provider.label")}</div>
+                <div className="max-w-full grow truncate">
+                  <span>{t("workflow_node.apply.form.ca_provider.label")}</span>
+                </div>
                 <div className="text-right">
                   <Show when={!fieldCAProvider}>
                     <Link className="ant-typography" to="/settings/ssl-provider" target="_blank">

ui/src/i18n/locales/en/nls.access.json

@@ -353,7 +353,13 @@
   "access.form.webhook_default_data_for_notification.label": "Webhook data for notification (Optional)",
   "access.form.webhook_default_data_for_notification.placeholder": "Please enter Webhook data",
   "access.form.webhook_default_data_for_notification.guide": "Tips: The Webhook data should be in JSON format. <br><br>The values in JSON support template variables, which will be replaced by actual values when sent to the Webhook URL. Supported variables: <br><ol style=\"margin-left: 1.25em; list-style: disc;\"><li><strong>${SUBJECT}</strong>: The subject of notification.</li><li><strong>${MESSAGE}</strong>: The message of notification.</li></ol><br>When the request method is GET, the data will be passed as query string. Otherwise, the data will be encoded in the format indicated by the Content-Type in the request headers. Supported formats: <br><ol style=\"margin-left: 1.25em; list-style: disc;\"><li>application/json (default).</li><li>application/x-www-form-urlencoded: Nested data is not supported.</li><li>multipart/form-data: Nested data is not supported.</li>",
-  "access.form.webhook_default_data_preset.button": "Use preset template",
+  "access.form.webhook_preset_data.button": "Use preset template",
+  "access.form.webhook_preset_data.option.bark.label": "Bark",
+  "access.form.webhook_preset_data.option.gotify.label": "Gotify",
+  "access.form.webhook_preset_data.option.ntfy.label": "ntfy",
+  "access.form.webhook_preset_data.option.pushover.label": "Pushover",
+  "access.form.webhook_preset_data.option.pushplus.label": "PushPlus",
+  "access.form.webhook_preset_data.option.serverchan.label": "ServerChan",
   "access.form.webhook_allow_insecure_conns.label": "Insecure SSL/TLS connections",
   "access.form.webhook_allow_insecure_conns.tooltip": "Allowing insecure connections may lead to data leak or tampering. Use this option only when under trusted networks.",
   "access.form.webhook_allow_insecure_conns.switch.on": "Allow",

ui/src/i18n/locales/zh/nls.access.json

@@ -353,7 +353,13 @@
   "access.form.webhook_default_data_for_notification.label": "默认的 Webhook 推送通知回调数据（可选）",
   "access.form.webhook_default_data_for_notification.placeholder": "请输入默认的 Webhook 回调数据",
   "access.form.webhook_default_data_for_notification.guide": "小贴士：回调数据是一个 JSON 格式的数据。<br><br>其中值支持模板变量，将在被发送到指定的 Webhook URL 时被替换为实际值；其他内容将保持原样。支持的变量：<br><ol style=\"margin-left: 1.25em; list-style: disc;\"><li><strong>${DOMAIN}</strong>：证书的主域名（即 <i>CommonName</i>）。</li><li><strong>${SUBJECT}</strong>：通知主题。</li><li><strong>${MESSAGE}</strong>：通知内容。</ol><br>当请求谓词为 GET 时，回调数据将作为查询参数；否则，回调数据将按照请求标头中 Content-Type 所指示的格式进行编码。支持的格式：<br><ol style=\"margin-left: 1.25em; list-style: disc;\"><li>application/json（默认）。</li><li>application/x-www-form-urlencoded：不支持嵌套数据。</li><li>multipart/form-data：不支持嵌套数据。</li>",
-  "access.form.webhook_default_data_preset.button": "使用预设模板",
+  "access.form.webhook_preset_data.button": "使用预设模板",
+  "access.form.webhook_preset_data.option.bark.label": "Bark",
+  "access.form.webhook_preset_data.option.gotify.label": "Gotify",
+  "access.form.webhook_preset_data.option.ntfy.label": "ntfy",
+  "access.form.webhook_preset_data.option.pushover.label": "Pushover",
+  "access.form.webhook_preset_data.option.pushplus.label": "PushPlus 推送加",
+  "access.form.webhook_preset_data.option.serverchan.label": "Server 酱",
   "access.form.webhook_allow_insecure_conns.label": "忽略 SSL/TLS 证书错误",
   "access.form.webhook_allow_insecure_conns.tooltip": "忽略 SSL/TLS 证书错误可能导致数据泄露或被篡改。建议仅在可信网络下启用。",
   "access.form.webhook_allow_insecure_conns.switch.on": "允许",