From 44497a0969d4b6c893e577fd56e1c074db3f9042 Mon Sep 17 00:00:00 2001
From: Fu Diwei <fudiwei@sina.com>
Date: Sun, 10 Nov 2024 19:52:50 +0800
Subject: [PATCH] feat: new UI for notify settings

---
 ui/src/components/notify/Bark.tsx        | 122 +++++-----
 ui/src/components/notify/DingTalk.tsx    | 119 ++++-----
 ui/src/components/notify/Email.tsx       | 297 ++++++++++++-----------
 ui/src/components/notify/Lark.tsx        |  84 ++++---
 ui/src/components/notify/ServerChan.tsx  |  85 ++++---
 ui/src/components/notify/Telegram.tsx    | 122 +++++-----
 ui/src/components/notify/Webhook.tsx     |  85 ++++---
 ui/src/i18n/locales/en/nls.settings.json |  41 +++-
 ui/src/i18n/locales/zh/nls.settings.json |  41 +++-
 9 files changed, 549 insertions(+), 447 deletions(-)

diff --git a/ui/src/components/notify/Bark.tsx b/ui/src/components/notify/Bark.tsx
index e4cb42ce..6584b542 100644
--- a/ui/src/components/notify/Bark.tsx
+++ b/ui/src/components/notify/Bark.tsx
@@ -177,67 +177,75 @@ const Bark = () => {
   };
 
   return (
-    <div>
-      <Input
-        placeholder={t("settings.notification.bark.serverUrl.placeholder")}
-        value={bark.data.serverUrl}
-        onChange={(e) => {
-          const newData = {
-            ...bark,
-            data: {
-              ...bark.data,
-              serverUrl: e.target.value,
-            },
-          };
+    <div className="flex flex-col space-y-4">
+      <div>
+        <Label>{t("settings.notification.bark.server_url.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.bark.server_url.placeholder")}
+          value={bark.data.serverUrl}
+          onChange={(e) => {
+            const newData = {
+              ...bark,
+              data: {
+                ...bark.data,
+                serverUrl: e.target.value,
+              },
+            };
 
-          checkChanged(newData.data);
-          setBark(newData);
-        }}
-      />
-
-      <Input
-        placeholder={t("settings.notification.bark.deviceKey.placeholder")}
-        value={bark.data.deviceKey}
-        onChange={(e) => {
-          const newData = {
-            ...bark,
-            data: {
-              ...bark.data,
-              deviceKey: e.target.value,
-            },
-          };
-
-          checkChanged(newData.data);
-          setBark(newData);
-        }}
-      />
-
-      <div className="flex items-center space-x-1 mt-2">
-        <Switch id="airplane-mode" checked={bark.data.enabled} onCheckedChange={handleSwitchChange} />
-        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+            checkChanged(newData.data);
+            setBark(newData);
+          }}
+        />
       </div>
 
-      <div className="flex justify-end mt-2">
-        <Show when={changed}>
-          <Button
-            onClick={() => {
-              handleSaveClick();
-            }}
-          >
-            {t("common.save")}
-          </Button>
-        </Show>
+      <div>
+        <Label>{t("settings.notification.bark.device_key.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.bark.device_key.placeholder")}
+          value={bark.data.deviceKey}
+          onChange={(e) => {
+            const newData = {
+              ...bark,
+              data: {
+                ...bark.data,
+                deviceKey: e.target.value,
+              },
+            };
 
-        <Show when={!changed && bark.id != ""}>
-          <Button
-            variant="secondary"
-            onClick={() => {
-              handlePushTestClick();
-            }}
-          >
-            {t("settings.notification.push_test_message")}
-          </Button>
-        </Show>
+            checkChanged(newData.data);
+            setBark(newData);
+          }}
+        />
+      </div>
+
+      <div className="flex justify-between gap-4">
+        <div className="flex items-center space-x-1">
+          <Switch id="airplane-mode" checked={bark.data.enabled} onCheckedChange={handleSwitchChange} />
+          <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+        </div>
+
+        <div className="flex items-center space-x-1">
+          <Show when={changed}>
+            <Button
+              onClick={() => {
+                handleSaveClick();
+              }}
+            >
+              {t("common.save")}
+            </Button>
+          </Show>
+
+          <Show when={!changed && bark.id != ""}>
+            <Button
+              variant="secondary"
+              onClick={() => {
+                handlePushTestClick();
+              }}
+            >
+              {t("settings.notification.push_test_message")}
+            </Button>
+          </Show>
+        </div>
       </div>
     </div>
   );
diff --git a/ui/src/components/notify/DingTalk.tsx b/ui/src/components/notify/DingTalk.tsx
index baedf637..76ab89d9 100644
--- a/ui/src/components/notify/DingTalk.tsx
+++ b/ui/src/components/notify/DingTalk.tsx
@@ -177,64 +177,73 @@ const DingTalk = () => {
   };
 
   return (
-    <div>
-      <Input
-        placeholder="AccessToken"
-        value={dingtalk.data.accessToken}
-        onChange={(e) => {
-          const newData = {
-            ...dingtalk,
-            data: {
-              ...dingtalk.data,
-              accessToken: e.target.value,
-            },
-          };
-          checkChanged(newData.data);
-          setDingtalk(newData);
-        }}
-      />
-      <Input
-        placeholder={t("settings.notification.dingtalk.secret.placeholder")}
-        className="mt-2"
-        value={dingtalk.data.secret}
-        onChange={(e) => {
-          const newData = {
-            ...dingtalk,
-            data: {
-              ...dingtalk.data,
-              secret: e.target.value,
-            },
-          };
-          checkChanged(newData.data);
-          setDingtalk(newData);
-        }}
-      />
-      <div className="flex items-center space-x-1 mt-2">
-        <Switch id="airplane-mode" checked={dingtalk.data.enabled} onCheckedChange={handleSwitchChange} />
-        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+    <div className="flex flex-col space-y-4">
+      <div>
+        <Label>{t("settings.notification.dingtalk.access_token.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.dingtalk.access_token.placeholder")}
+          value={dingtalk.data.accessToken}
+          onChange={(e) => {
+            const newData = {
+              ...dingtalk,
+              data: {
+                ...dingtalk.data,
+                accessToken: e.target.value,
+              },
+            };
+            checkChanged(newData.data);
+            setDingtalk(newData);
+          }}
+        />
       </div>
 
-      <div className="flex justify-end mt-2">
-        <Show when={changed}>
-          <Button
-            onClick={() => {
-              handleSaveClick();
-            }}
-          >
-            {t("common.save")}
-          </Button>
-        </Show>
+      <div>
+        <Label>{t("settings.notification.dingtalk.secret.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.dingtalk.secret.placeholder")}
+          value={dingtalk.data.secret}
+          onChange={(e) => {
+            const newData = {
+              ...dingtalk,
+              data: {
+                ...dingtalk.data,
+                secret: e.target.value,
+              },
+            };
+            checkChanged(newData.data);
+            setDingtalk(newData);
+          }}
+        />
+      </div>
 
-        <Show when={!changed && dingtalk.id != ""}>
-          <Button
-            variant="secondary"
-            onClick={() => {
-              handlePushTestClick();
-            }}
-          >
-            {t("settings.notification.push_test_message")}
-          </Button>
-        </Show>
+      <div className="flex justify-between gap-4">
+        <div className="flex items-center space-x-1">
+          <Switch id="airplane-mode" checked={dingtalk.data.enabled} onCheckedChange={handleSwitchChange} />
+          <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+        </div>
+
+        <div className="flex items-center space-x-1">
+          <Show when={changed}>
+            <Button
+              onClick={() => {
+                handleSaveClick();
+              }}
+            >
+              {t("common.save")}
+            </Button>
+          </Show>
+
+          <Show when={!changed && dingtalk.id != ""}>
+            <Button
+              variant="secondary"
+              onClick={() => {
+                handlePushTestClick();
+              }}
+            >
+              {t("settings.notification.push_test_message")}
+            </Button>
+          </Show>
+        </div>
       </div>
     </div>
   );
diff --git a/ui/src/components/notify/Email.tsx b/ui/src/components/notify/Email.tsx
index 2e3dab0d..ecc83b0a 100644
--- a/ui/src/components/notify/Email.tsx
+++ b/ui/src/components/notify/Email.tsx
@@ -200,154 +200,173 @@ const Mail = () => {
   };
 
   return (
-    <div>
-      <Input
-        placeholder={t("settings.notification.email.smtp_host.placeholder")}
-        value={mail.data.smtpHost}
-        onChange={(e) => {
-          const newData = {
-            ...mail,
-            data: {
-              ...mail.data,
-              smtpHost: e.target.value,
-            },
-          };
-          checkChanged(newData.data);
-          setMail(newData);
-        }}
-      />
+    <div className="flex flex-col space-y-4">
+      <div className="flex space-x-4">
+        <div className="w-2/5">
+          <Label>{t("settings.notification.email.smtp_host.label")}</Label>
+          <Input
+            placeholder={t("settings.notification.email.smtp_host.placeholder")}
+            value={mail.data.smtpHost}
+            onChange={(e) => {
+              const newData = {
+                ...mail,
+                data: {
+                  ...mail.data,
+                  smtpHost: e.target.value,
+                },
+              };
+              checkChanged(newData.data);
+              setMail(newData);
+            }}
+          />
+        </div>
 
-      <Input
-        className="mt-2"
-        type="number"
-        placeholder={t("settings.notification.email.smtp_port.placeholder")}
-        value={mail.data.smtpPort}
-        onChange={(e) => {
-          const newData = {
-            ...mail,
-            data: {
-              ...mail.data,
-              smtpPort: +e.target.value || 0,
-            },
-          };
-          checkChanged(newData.data);
-          setMail(newData);
-        }}
-      />
+        <div className="w-2/5">
+          <Label>{t("settings.notification.email.smtp_port.label")}</Label>
+          <Input
+            type="number"
+            placeholder={t("settings.notification.email.smtp_port.placeholder")}
+            value={mail.data.smtpPort}
+            onChange={(e) => {
+              const newData = {
+                ...mail,
+                data: {
+                  ...mail.data,
+                  smtpPort: +e.target.value || 0,
+                },
+              };
+              checkChanged(newData.data);
+              setMail(newData);
+            }}
+          />
+        </div>
 
-      <Switch
-        className="mt-2"
-        checked={mail.data.smtpTLS}
-        onCheckedChange={(e) => {
-          const newData = {
-            ...mail,
-            data: {
-              ...mail.data,
-              smtpTLS: e,
-            },
-          };
-          checkChanged(newData.data);
-          setMail(newData);
-        }}
-      />
+        <div className="w-1/5">
+          <Label>{t("settings.notification.email.smtp_tls.label")}</Label>
+          <Switch
+            className="block mt-2"
+            checked={mail.data.smtpTLS}
+            onCheckedChange={(e) => {
+              const newData = {
+                ...mail,
+                data: {
+                  ...mail.data,
+                  smtpPort: e && mail.data.smtpPort === 25 ? 465 : !e && mail.data.smtpPort === 465 ? 25 : mail.data.smtpPort,
+                  smtpTLS: e,
+                },
+              };
+              checkChanged(newData.data);
+              setMail(newData);
+            }}
+          />
+        </div>
+      </div>
 
-      <Input
-        className="mt-2"
-        placeholder={t("settings.notification.email.username.placeholder")}
-        value={mail.data.username}
-        onChange={(e) => {
-          const newData = {
-            ...mail,
-            data: {
-              ...mail.data,
-              username: e.target.value,
-            },
-          };
-          checkChanged(newData.data);
-          setMail(newData);
-        }}
-      />
+      <div className="flex space-x-4">
+        <div className="w-1/2">
+          <Label>{t("settings.notification.email.username.label")}</Label>
+          <Input
+            placeholder={t("settings.notification.email.username.placeholder")}
+            value={mail.data.username}
+            onChange={(e) => {
+              const newData = {
+                ...mail,
+                data: {
+                  ...mail.data,
+                  username: e.target.value,
+                },
+              };
+              checkChanged(newData.data);
+              setMail(newData);
+            }}
+          />
+        </div>
 
-      <Input
-        className="mt-2"
-        placeholder={t("settings.notification.email.password.placeholder")}
-        value={mail.data.password}
-        onChange={(e) => {
-          const newData = {
-            ...mail,
-            data: {
-              ...mail.data,
-              password: e.target.value,
-            },
-          };
-          checkChanged(newData.data);
-          setMail(newData);
-        }}
-      />
+        <div className="w-1/2">
+          <Label>{t("settings.notification.email.password.label")}</Label>
+          <Input
+            placeholder={t("settings.notification.email.password.placeholder")}
+            value={mail.data.password}
+            onChange={(e) => {
+              const newData = {
+                ...mail,
+                data: {
+                  ...mail.data,
+                  password: e.target.value,
+                },
+              };
+              checkChanged(newData.data);
+              setMail(newData);
+            }}
+          />
+        </div>
+      </div>
 
-      <Input
-        className="mt-2"
-        placeholder={t("settings.notification.email.sender_address.placeholder")}
-        value={mail.data.senderAddress}
-        onChange={(e) => {
-          const newData = {
-            ...mail,
-            data: {
-              ...mail.data,
-              senderAddress: e.target.value,
-            },
-          };
-          checkChanged(newData.data);
-          setMail(newData);
-        }}
-      />
+      <div>
+        <Label>{t("settings.notification.email.sender_address.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.email.sender_address.placeholder")}
+          value={mail.data.senderAddress}
+          onChange={(e) => {
+            const newData = {
+              ...mail,
+              data: {
+                ...mail.data,
+                senderAddress: e.target.value,
+              },
+            };
+            checkChanged(newData.data);
+            setMail(newData);
+          }}
+        />
+      </div>
 
-      <Input
-        className="mt-2"
-        placeholder={t("settings.notification.email.receiver_address.placeholder")}
-        value={mail.data.receiverAddress}
-        onChange={(e) => {
-          const newData = {
-            ...mail,
-            data: {
-              ...mail.data,
-              receiverAddress: e.target.value,
-            },
-          };
-          checkChanged(newData.data);
-          setMail(newData);
-        }}
-      />
+      <div>
+        <Label>{t("settings.notification.email.receiver_address.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.email.receiver_address.placeholder")}
+          value={mail.data.receiverAddress}
+          onChange={(e) => {
+            const newData = {
+              ...mail,
+              data: {
+                ...mail.data,
+                receiverAddress: e.target.value,
+              },
+            };
+            checkChanged(newData.data);
+            setMail(newData);
+          }}
+        />
+      </div>
 
-      <div className="mt-2">
-        <div className="flex justify-between gap-4">
-          <div className="flex items-center space-x-1">
-            <Switch id="airplane-mode" checked={mail.data.enabled} onCheckedChange={handleSwitchChange} />
-            <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
-          </div>
+      <div className="flex justify-between gap-4">
+        <div className="flex items-center space-x-1">
+          <Switch id="airplane-mode" checked={mail.data.enabled} onCheckedChange={handleSwitchChange} />
+          <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+        </div>
 
-          <div className="flex items-center space-x-1">
-            <Show when={changed}>
-              <Button
-                onClick={() => {
-                  handleSaveClick();
-                }}
-              >
-                {t("common.save")}
-              </Button>
-            </Show>
+        <div className="flex items-center space-x-1">
+          <Show when={changed}>
+            <Button
+              onClick={() => {
+                handleSaveClick();
+              }}
+            >
+              {t("common.save")}
+            </Button>
+          </Show>
 
-            <Show when={!changed && mail.id != ""}>
-              <Button
-                variant="secondary"
-                onClick={() => {
-                  handlePushTestClick();
-                }}
-              >
-                {t("settings.notification.push_test_message")}
-              </Button>
-            </Show>
-          </div>
+          <Show when={!changed && mail.id != ""}>
+            <Button
+              variant="secondary"
+              onClick={() => {
+                handlePushTestClick();
+              }}
+            >
+              {t("settings.notification.push_test_message")}
+            </Button>
+          </Show>
         </div>
       </div>
     </div>
diff --git a/ui/src/components/notify/Lark.tsx b/ui/src/components/notify/Lark.tsx
index abd3b886..91041357 100644
--- a/ui/src/components/notify/Lark.tsx
+++ b/ui/src/components/notify/Lark.tsx
@@ -173,49 +173,55 @@ const Lark = () => {
   };
 
   return (
-    <div>
-      <Input
-        placeholder="Webhook Url"
-        value={lark.data.webhookUrl}
-        onChange={(e) => {
-          const newData = {
-            ...lark,
-            data: {
-              ...lark.data,
-              webhookUrl: e.target.value,
-            },
-          };
+    <div className="flex flex-col space-y-4">
+      <div>
+        <Label>{t("settings.notification.lark.webhook_url.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.lark.webhook_url.placeholder")}
+          value={lark.data.webhookUrl}
+          onChange={(e) => {
+            const newData = {
+              ...lark,
+              data: {
+                ...lark.data,
+                webhookUrl: e.target.value,
+              },
+            };
 
-          checkChanged(newData.data);
-          setLark(newData);
-        }}
-      />
-      <div className="flex items-center space-x-1 mt-2">
-        <Switch id="airplane-mode" checked={lark.data.enabled} onCheckedChange={handleSwitchChange} />
-        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+            checkChanged(newData.data);
+            setLark(newData);
+          }}
+        />
       </div>
 
-      <div className="flex justify-end mt-2">
-        <Show when={changed}>
-          <Button
-            onClick={() => {
-              handleSaveClick();
-            }}
-          >
-            {t("common.save")}
-          </Button>
-        </Show>
+      <div className="flex justify-between gap-4">
+        <div className="flex items-center space-x-1">
+          <Switch id="airplane-mode" checked={lark.data.enabled} onCheckedChange={handleSwitchChange} />
+          <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+        </div>
 
-        <Show when={!changed && lark.id != ""}>
-          <Button
-            variant="secondary"
-            onClick={() => {
-              handlePushTestClick();
-            }}
-          >
-            {t("settings.notification.push_test_message")}
-          </Button>
-        </Show>
+        <div className="flex items-center space-x-1">
+          <Show when={changed}>
+            <Button
+              onClick={() => {
+                handleSaveClick();
+              }}
+            >
+              {t("common.save")}
+            </Button>
+          </Show>
+
+          <Show when={!changed && lark.id != ""}>
+            <Button
+              variant="secondary"
+              onClick={() => {
+                handlePushTestClick();
+              }}
+            >
+              {t("settings.notification.push_test_message")}
+            </Button>
+          </Show>
+        </div>
       </div>
     </div>
   );
diff --git a/ui/src/components/notify/ServerChan.tsx b/ui/src/components/notify/ServerChan.tsx
index cc2d0c00..97f995f8 100644
--- a/ui/src/components/notify/ServerChan.tsx
+++ b/ui/src/components/notify/ServerChan.tsx
@@ -184,50 +184,55 @@ const ServerChan = () => {
   };
 
   return (
-    <div>
-      <Input
-        placeholder={t("settings.notification.serverchan.url.placeholder")}
-        value={serverchan.data.url}
-        onChange={(e) => {
-          const newData = {
-            ...serverchan,
-            data: {
-              ...serverchan.data,
-              url: e.target.value,
-            },
-          };
+    <div className="flex flex-col space-y-4">
+      <div>
+        <Label>{t("settings.notification.serverchan.url.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.serverchan.url.placeholder")}
+          value={serverchan.data.url}
+          onChange={(e) => {
+            const newData = {
+              ...serverchan,
+              data: {
+                ...serverchan.data,
+                url: e.target.value,
+              },
+            };
 
-          checkChanged(newData.data);
-          setServerChan(newData);
-        }}
-      />
-
-      <div className="flex items-center space-x-1 mt-2">
-        <Switch id="airplane-mode" checked={serverchan.data.enabled} onCheckedChange={handleSwitchChange} />
-        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+            checkChanged(newData.data);
+            setServerChan(newData);
+          }}
+        />
       </div>
 
-      <div className="flex justify-end mt-2">
-        <Show when={changed}>
-          <Button
-            onClick={() => {
-              handleSaveClick();
-            }}
-          >
-            {t("common.save")}
-          </Button>
-        </Show>
+      <div className="flex justify-between gap-4">
+        <div className="flex items-center space-x-1">
+          <Switch id="airplane-mode" checked={serverchan.data.enabled} onCheckedChange={handleSwitchChange} />
+          <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+        </div>
 
-        <Show when={!changed && serverchan.id != ""}>
-          <Button
-            variant="secondary"
-            onClick={() => {
-              handlePushTestClick();
-            }}
-          >
-            {t("settings.notification.push_test_message")}
-          </Button>
-        </Show>
+        <div className="flex items-center space-x-1">
+          <Show when={changed}>
+            <Button
+              onClick={() => {
+                handleSaveClick();
+              }}
+            >
+              {t("common.save")}
+            </Button>
+          </Show>
+
+          <Show when={!changed && serverchan.id != ""}>
+            <Button
+              variant="secondary"
+              onClick={() => {
+                handlePushTestClick();
+              }}
+            >
+              {t("settings.notification.push_test_message")}
+            </Button>
+          </Show>
+        </div>
       </div>
     </div>
   );
diff --git a/ui/src/components/notify/Telegram.tsx b/ui/src/components/notify/Telegram.tsx
index bafe9042..fdc47c05 100644
--- a/ui/src/components/notify/Telegram.tsx
+++ b/ui/src/components/notify/Telegram.tsx
@@ -177,67 +177,75 @@ const Telegram = () => {
   };
 
   return (
-    <div>
-      <Input
-        placeholder="ApiToken"
-        value={telegram.data.apiToken}
-        onChange={(e) => {
-          const newData = {
-            ...telegram,
-            data: {
-              ...telegram.data,
-              apiToken: e.target.value,
-            },
-          };
+    <div className="flex flex-col space-y-4">
+      <div>
+        <Label>{t("settings.notification.telegram.api_token.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.telegram.api_token.placeholder")}
+          value={telegram.data.apiToken}
+          onChange={(e) => {
+            const newData = {
+              ...telegram,
+              data: {
+                ...telegram.data,
+                apiToken: e.target.value,
+              },
+            };
 
-          checkChanged(newData.data);
-          setTelegram(newData);
-        }}
-      />
-
-      <Input
-        placeholder="ChatId"
-        value={telegram.data.chatId}
-        onChange={(e) => {
-          const newData = {
-            ...telegram,
-            data: {
-              ...telegram.data,
-              chatId: e.target.value,
-            },
-          };
-
-          checkChanged(newData.data);
-          setTelegram(newData);
-        }}
-      />
-
-      <div className="flex items-center space-x-1 mt-2">
-        <Switch id="airplane-mode" checked={telegram.data.enabled} onCheckedChange={handleSwitchChange} />
-        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+            checkChanged(newData.data);
+            setTelegram(newData);
+          }}
+        />
       </div>
 
-      <div className="flex justify-end mt-2">
-        <Show when={changed}>
-          <Button
-            onClick={() => {
-              handleSaveClick();
-            }}
-          >
-            {t("common.save")}
-          </Button>
-        </Show>
+      <div>
+        <Label>{t("settings.notification.telegram.chat_id.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.telegram.chat_id.placeholder")}
+          value={telegram.data.chatId}
+          onChange={(e) => {
+            const newData = {
+              ...telegram,
+              data: {
+                ...telegram.data,
+                chatId: e.target.value,
+              },
+            };
 
-        <Show when={!changed && telegram.id != ""}>
-          <Button
-            variant="secondary"
-            onClick={() => {
-              handlePushTestClick();
-            }}
-          >
-            {t("settings.notification.push_test_message")}
-          </Button>
-        </Show>
+            checkChanged(newData.data);
+            setTelegram(newData);
+          }}
+        />
+      </div>
+
+      <div className="flex justify-between gap-4">
+        <div className="flex items-center space-x-1">
+          <Switch id="airplane-mode" checked={telegram.data.enabled} onCheckedChange={handleSwitchChange} />
+          <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+        </div>
+
+        <div className="flex items-center space-x-1">
+          <Show when={changed}>
+            <Button
+              onClick={() => {
+                handleSaveClick();
+              }}
+            >
+              {t("common.save")}
+            </Button>
+          </Show>
+
+          <Show when={!changed && telegram.id != ""}>
+            <Button
+              variant="secondary"
+              onClick={() => {
+                handlePushTestClick();
+              }}
+            >
+              {t("settings.notification.push_test_message")}
+            </Button>
+          </Show>
+        </div>
       </div>
     </div>
   );
diff --git a/ui/src/components/notify/Webhook.tsx b/ui/src/components/notify/Webhook.tsx
index 1d3d9157..6bacc16e 100644
--- a/ui/src/components/notify/Webhook.tsx
+++ b/ui/src/components/notify/Webhook.tsx
@@ -184,50 +184,55 @@ const Webhook = () => {
   };
 
   return (
-    <div>
-      <Input
-        placeholder="Url"
-        value={webhook.data.url}
-        onChange={(e) => {
-          const newData = {
-            ...webhook,
-            data: {
-              ...webhook.data,
-              url: e.target.value,
-            },
-          };
+    <div className="flex flex-col space-y-4">
+      <div>
+        <Label>{t("settings.notification.webhook.url.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.webhook.url.placeholder")}
+          value={webhook.data.url}
+          onChange={(e) => {
+            const newData = {
+              ...webhook,
+              data: {
+                ...webhook.data,
+                url: e.target.value,
+              },
+            };
 
-          checkChanged(newData.data);
-          setWebhook(newData);
-        }}
-      />
-
-      <div className="flex items-center space-x-1 mt-2">
-        <Switch id="airplane-mode" checked={webhook.data.enabled} onCheckedChange={handleSwitchChange} />
-        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+            checkChanged(newData.data);
+            setWebhook(newData);
+          }}
+        />
       </div>
 
-      <div className="flex justify-end mt-2">
-        <Show when={changed}>
-          <Button
-            onClick={() => {
-              handleSaveClick();
-            }}
-          >
-            {t("common.save")}
-          </Button>
-        </Show>
+      <div className="flex justify-between gap-4">
+        <div className="flex items-center space-x-1">
+          <Switch id="airplane-mode" checked={webhook.data.enabled} onCheckedChange={handleSwitchChange} />
+          <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+        </div>
 
-        <Show when={!changed && webhook.id != ""}>
-          <Button
-            variant="secondary"
-            onClick={() => {
-              handlePushTestClick();
-            }}
-          >
-            {t("settings.notification.push_test_message")}
-          </Button>
-        </Show>
+        <div className="flex items-center space-x-1">
+          <Show when={changed}>
+            <Button
+              onClick={() => {
+                handleSaveClick();
+              }}
+            >
+              {t("common.save")}
+            </Button>
+          </Show>
+
+          <Show when={!changed && webhook.id != ""}>
+            <Button
+              variant="secondary"
+              onClick={() => {
+                handlePushTestClick();
+              }}
+            >
+              {t("settings.notification.push_test_message")}
+            </Button>
+          </Show>
+        </div>
       </div>
     </div>
   );
diff --git a/ui/src/i18n/locales/en/nls.settings.json b/ui/src/i18n/locales/en/nls.settings.json
index f945797e..b427a02a 100644
--- a/ui/src/i18n/locales/en/nls.settings.json
+++ b/ui/src/i18n/locales/en/nls.settings.json
@@ -33,16 +33,37 @@
   "settings.notification.push_test_message": "Send test notification",
   "settings.notification.push_test_message.succeeded.message": "Send test notification successfully",
   "settings.notification.push_test_message.failed.message": "Send test notification failed",
-  "settings.notification.email.smtp_host.placeholder": "SMTP server address",
-  "settings.notification.email.smtp_port.placeholder": "SMTP server port",
-  "settings.notification.email.username.placeholder": "username",
-  "settings.notification.email.password.placeholder": "password",
-  "settings.notification.email.sender_address.placeholder": "Sender email address",
-  "settings.notification.email.receiver_address.placeholder": "Receiver email address",
-  "settings.notification.dingtalk.secret.placeholder": "Signature for signed addition",
-  "settings.notification.serverchan.url.placeholder": "Url, e.g. https://sctapi.ftqq.com/****************.send",
-  "settings.notification.bark.serverUrl.placeholder": "Server URL, e.g. https://your-bark-server.com, leave it blank to use the bark default server",
-  "settings.notification.bark.deviceKey.placeholder": "Device Key，e.g. XXXXXXXXXXXXXXXXXXXX",
+  "settings.notification.email.smtp_host.label": "SMTP Host",
+  "settings.notification.email.smtp_host.placeholder": "Please enter SMTP host",
+  "settings.notification.email.smtp_port.label": "SMTP Port",
+  "settings.notification.email.smtp_port.placeholder": "Please enter SMTP port",
+  "settings.notification.email.smtp_tls.label": "TLS/SSL connection",
+  "settings.notification.email.username.label": "Username",
+  "settings.notification.email.username.placeholder": "please enter username",
+  "settings.notification.email.password.label": "Password",
+  "settings.notification.email.password.placeholder": "please enter password",
+  "settings.notification.email.sender_address.label": "Sender Email Address",
+  "settings.notification.email.sender_address.placeholder": "Please enter sender email address",
+  "settings.notification.email.receiver_address.label": "Receiver Email Address",
+  "settings.notification.email.receiver_address.placeholder": "Please enter receiver email address",
+  "settings.notification.webhook.url.label": "Webhook URL",
+  "settings.notification.webhook.url.placeholder": "Please enter Webhook URL",
+  "settings.notification.dingtalk.access_token.label": "AccessToken",
+  "settings.notification.dingtalk.access_token.placeholder": "Please enter access token",
+  "settings.notification.dingtalk.secret.label": "Secret",
+  "settings.notification.dingtalk.secret.placeholder": "Please enter secret",
+  "settings.notification.lark.webhook_url.label": "Webhook URL",
+  "settings.notification.lark.webhook_url.placeholder": "Please enter Webhook URL",
+  "settings.notification.telegram.api_token.label": "API Token",
+  "settings.notification.telegram.api_token.placeholder": "Please enter API token",
+  "settings.notification.telegram.chat_id.label": "Chat ID",
+  "settings.notification.telegram.chat_id.placeholder": "Please enter Telegram chat ID",
+  "settings.notification.serverchan.url.label": "Server URL",
+  "settings.notification.serverchan.url.placeholder": "Please enter server URL (e.g. https://sctapi.ftqq.com/*****.send)",
+  "settings.notification.bark.server_url.label": "Server URL",
+  "settings.notification.bark.server_url.placeholder": "Please enter server URL (e.g. https://your-bark-server.com. Leave it blank to use the bark default server)",
+  "settings.notification.bark.device_key.label": "Device Key",
+  "settings.notification.bark.device_key.placeholder": "Please enter device key",
 
   "settings.ca.tab": "Certificate Authority",
   "settings.ca.provider.errmsg.empty": "Please select a Certificate Authority",
diff --git a/ui/src/i18n/locales/zh/nls.settings.json b/ui/src/i18n/locales/zh/nls.settings.json
index 2509cf91..9f6f7f28 100644
--- a/ui/src/i18n/locales/zh/nls.settings.json
+++ b/ui/src/i18n/locales/zh/nls.settings.json
@@ -33,16 +33,37 @@
   "settings.notification.push_test_message": "推送测试消息",
   "settings.notification.push_test_message.failed.message": "推送测试消息失败",
   "settings.notification.push_test_message.succeeded.message": "推送测试消息成功",
-  "settings.notification.email.smtp_host.placeholder": "SMTP服务器地址",
-  "settings.notification.email.smtp_port.placeholder": "SMTP服务器端口, 如果未设置, 默认为25",
-  "settings.notification.email.username.placeholder": "用于登录到邮件服务器的用户名",
-  "settings.notification.email.password.placeholder": "用于登录到邮件服务器的密码",
-  "settings.notification.email.sender_address.placeholder": "发送邮箱地址",
-  "settings.notification.email.receiver_address.placeholder": "接收邮箱地址",
-  "settings.notification.dingtalk.secret.placeholder": "加签的签名",
-  "settings.notification.serverchan.url.placeholder": "Url, 形如: https://sctapi.ftqq.com/****************.send",
-  "settings.notification.bark.serverUrl.placeholder": "服务器URL，形如: https://your-bark-server.com， 留空则使用 Bark 默认服务器",
-  "settings.notification.bark.deviceKey.placeholder": "设备密钥，形如: XXXXXXXXXXXXXXXXXXXX",
+  "settings.notification.email.smtp_host.label": "SMTP 服务器地址",
+  "settings.notification.email.smtp_host.placeholder": "请输入 SMTP 服务器地址",
+  "settings.notification.email.smtp_port.label": "SMTP 服务器端口",
+  "settings.notification.email.smtp_port.placeholder": "请输入 SMTP 服务器端口",
+  "settings.notification.email.smtp_tls.label": "TLS/SSL 连接",
+  "settings.notification.email.username.label": "用户名",
+  "settings.notification.email.username.placeholder": "请输入用户名",
+  "settings.notification.email.password.label": "密码",
+  "settings.notification.email.password.placeholder": "请输入密码",
+  "settings.notification.email.sender_address.label": "发送邮箱地址",
+  "settings.notification.email.sender_address.placeholder": "请输入发送邮箱地址",
+  "settings.notification.email.receiver_address.label": "接收邮箱地址",
+  "settings.notification.email.receiver_address.placeholder": "请输入接收邮箱地址",
+  "settings.notification.webhook.url.label": "Webhook 回调地址",
+  "settings.notification.webhook.url.placeholder": "请输入 Webhook 回调地址",
+  "settings.notification.dingtalk.access_token.label": "AccessToken",
+  "settings.notification.dingtalk.access_token.placeholder": "请输入 AccessToken",
+  "settings.notification.dingtalk.secret.label": "签名密钥",
+  "settings.notification.dingtalk.secret.placeholder": "请输入签名密钥",
+  "settings.notification.lark.webhook_url.label": "Webhook URL",
+  "settings.notification.lark.webhook_url.placeholder": "请输入 Webhook URL",
+  "settings.notification.telegram.api_token.label": "API Token",
+  "settings.notification.telegram.api_token.placeholder": "请输入 API token",
+  "settings.notification.telegram.chat_id.label": "会话 ID",
+  "settings.notification.telegram.chat_id.placeholder": "请输入 Telegram 会话 ID",
+  "settings.notification.serverchan.url.label": "服务器 URL",
+  "settings.notification.serverchan.url.placeholder": "请输入服务器 URL（形如: https://sctapi.ftqq.com/*****.send）",
+  "settings.notification.bark.server_url.label": "服务器 URL",
+  "settings.notification.bark.server_url.placeholder": "请输入服务器 URL（形如: https://your-bark-server.com；留空则使用 Bark 默认服务器）",
+  "settings.notification.bark.device_key.label": "设备密钥",
+  "settings.notification.bark.device_key.placeholder": "请输入设备密钥",
 
   "settings.ca.tab": "证书颁发机构（CA）",
   "settings.ca.provider.errmsg.empty": "请选择证书分发机构",