From abe6dbb5a24506b95539f6063a64bd36114b61a4 Mon Sep 17 00:00:00 2001
From: Fu Diwei <fudiwei@sina.com>
Date: Wed, 18 Dec 2024 21:22:25 +0800
Subject: [PATCH] feat(ui): new Settings layout using antd

---
 ui/src/components/access/AccessEditForm.tsx   |  6 +-
 ui/src/components/access/AccessTypeSelect.tsx |  8 +-
 ui/src/components/notify/Bark.tsx             |  4 +-
 ui/src/components/notify/Telegram.tsx         |  4 +-
 ui/src/domain/access.ts                       | 11 ++-
 ui/src/domain/settings.ts                     | 14 ++--
 ui/src/i18n/locales/en/nls.common.json        | 70 ++++++++--------
 ui/src/i18n/locales/zh/nls.common.json        | 70 ++++++++--------
 ui/src/pages/SettingsLayout.tsx               | 84 -------------------
 .../settings/{Notify.tsx => Notification.tsx} | 18 ++--
 ui/src/pages/settings/Settings.tsx            | 83 ++++++++++++++++++
 ui/src/router.tsx                             | 28 +++----
 12 files changed, 205 insertions(+), 195 deletions(-)
 delete mode 100644 ui/src/pages/SettingsLayout.tsx
 rename ui/src/pages/settings/{Notify.tsx => Notification.tsx} (85%)
 create mode 100644 ui/src/pages/settings/Settings.tsx

diff --git a/ui/src/components/access/AccessEditForm.tsx b/ui/src/components/access/AccessEditForm.tsx
index 0f03c2bd..0a094839 100644
--- a/ui/src/components/access/AccessEditForm.tsx
+++ b/ui/src/components/access/AccessEditForm.tsx
@@ -138,7 +138,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
   const handleFormProviderChange = (name: string) => {
     if (name === "configForm") {
       form.setFieldValue("config", configFormInst.getFieldsValue());
-      onModelChange?.(form.getFieldsValue());
+      onModelChange?.(form.getFieldsValue(true));
     }
   };
 
@@ -152,7 +152,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
 
   useImperativeHandle(ref, () => ({
     getFieldsValue: () => {
-      return form.getFieldsValue();
+      return form.getFieldsValue(true);
     },
     resetFields: () => {
       return form.resetFields();
@@ -180,8 +180,6 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
           >
             <AccessTypeSelect disabled={mode !== "add"} placeholder={t("access.form.type.placeholder")} showSearch={!disabled} />
           </Form.Item>
-
-          <Form.Item name="config" hidden />
         </Form>
 
         {configForm}
diff --git a/ui/src/components/access/AccessTypeSelect.tsx b/ui/src/components/access/AccessTypeSelect.tsx
index 4492d435..1899d165 100644
--- a/ui/src/components/access/AccessTypeSelect.tsx
+++ b/ui/src/components/access/AccessTypeSelect.tsx
@@ -2,7 +2,7 @@ import { memo } from "react";
 import { useTranslation } from "react-i18next";
 import { Avatar, Select, Space, Tag, Typography, type SelectProps } from "antd";
 
-import { accessProvidersMap } from "@/domain/access";
+import { ACCESS_PROVIDER_USAGES, accessProvidersMap } from "@/domain/access";
 
 export type AccessTypeSelectProps = Omit<
   SelectProps,
@@ -29,17 +29,17 @@ const AccessTypeSelect = memo((props: AccessTypeSelectProps) => {
           </Typography.Text>
         </Space>
         <div>
-          {provider?.usage === "apply" && (
+          {provider?.usage === ACCESS_PROVIDER_USAGES.APPLY && (
             <>
               <Tag color="orange">{t("access.props.provider.usage.dns")}</Tag>
             </>
           )}
-          {provider?.usage === "deploy" && (
+          {provider?.usage === ACCESS_PROVIDER_USAGES.DEPLOY && (
             <>
               <Tag color="blue">{t("access.props.provider.usage.host")}</Tag>
             </>
           )}
-          {provider?.usage === "all" && (
+          {provider?.usage === ACCESS_PROVIDER_USAGES.ALL && (
             <>
               <Tag color="orange">{t("access.props.provider.usage.dns")}</Tag>
               <Tag color="blue">{t("access.props.provider.usage.host")}</Tag>
diff --git a/ui/src/components/notify/Bark.tsx b/ui/src/components/notify/Bark.tsx
index f09f2bce..4c2a5370 100644
--- a/ui/src/components/notify/Bark.tsx
+++ b/ui/src/components/notify/Bark.tsx
@@ -53,7 +53,7 @@ const Bark = () => {
     const data = getDetailBark();
     setOriginBark({
       id: config.id ?? "",
-      name: "common.provider.bark",
+      name: "common.notifier.bark",
       data,
     });
   }, [config]);
@@ -62,7 +62,7 @@ const Bark = () => {
     const data = getDetailBark();
     setBark({
       id: config.id ?? "",
-      name: "common.provider.bark",
+      name: "common.notifier.bark",
       data,
     });
   }, [config]);
diff --git a/ui/src/components/notify/Telegram.tsx b/ui/src/components/notify/Telegram.tsx
index 0fb3ad40..febf0905 100644
--- a/ui/src/components/notify/Telegram.tsx
+++ b/ui/src/components/notify/Telegram.tsx
@@ -53,7 +53,7 @@ const Telegram = () => {
     const data = getDetailTelegram();
     setOriginTelegram({
       id: config.id ?? "",
-      name: "common.provider.telegram",
+      name: "common.notifier.telegram",
       data,
     });
   }, [config]);
@@ -62,7 +62,7 @@ const Telegram = () => {
     const data = getDetailTelegram();
     setTelegram({
       id: config.id ?? "",
-      name: "common.provider.telegram",
+      name: "common.notifier.telegram",
       data,
     });
   }, [config]);
diff --git a/ui/src/domain/access.ts b/ui/src/domain/access.ts
index 1dd53ad4..915850a8 100644
--- a/ui/src/domain/access.ts
+++ b/ui/src/domain/access.ts
@@ -164,7 +164,16 @@ export type WebhookAccessConfig = {
   url: string;
 };
 
-type AccessUsages = "apply" | "deploy" | "all";
+export const ACCESS_PROVIDER_USAGE_ALL = "all" as const;
+export const ACCESS_PROVIDER_USAGE_APPLY = "apply" as const;
+export const ACCESS_PROVIDER_USAGE_DEPLOY = "deploy" as const;
+export const ACCESS_PROVIDER_USAGES = Object.freeze({
+  ALL: ACCESS_PROVIDER_USAGE_ALL,
+  APPLY: ACCESS_PROVIDER_USAGE_APPLY,
+  DEPLOY: ACCESS_PROVIDER_USAGE_DEPLOY,
+} as const);
+
+type AccessUsages = (typeof ACCESS_PROVIDER_USAGES)[keyof typeof ACCESS_PROVIDER_USAGES];
 
 type AccessProvider = {
   type: string;
diff --git a/ui/src/domain/settings.ts b/ui/src/domain/settings.ts
index 977bd091..c78ad13a 100644
--- a/ui/src/domain/settings.ts
+++ b/ui/src/domain/settings.ts
@@ -36,31 +36,31 @@ type ChannelLabel = {
 export const channels: ChannelLabel[] = [
   {
     name: "dingtalk",
-    label: "common.provider.dingtalk",
+    label: "common.notifier.dingtalk",
   },
   {
     name: "lark",
-    label: "common.provider.lark",
+    label: "common.notifier.lark",
   },
   {
     name: "telegram",
-    label: "common.provider.telegram",
+    label: "common.notifier.telegram",
   },
   {
     name: "webhook",
-    label: "common.provider.webhook",
+    label: "common.notifier.webhook",
   },
   {
     name: "serverchan",
-    label: "common.provider.serverchan",
+    label: "common.notifier.serverchan",
   },
   {
     name: "email",
-    label: "common.provider.email",
+    label: "common.notifier.email",
   },
   {
     name: "bark",
-    label: "common.provider.bark",
+    label: "common.notifier.bark",
   },
 ];
 
diff --git a/ui/src/i18n/locales/en/nls.common.json b/ui/src/i18n/locales/en/nls.common.json
index ab0ae68a..faea418e 100644
--- a/ui/src/i18n/locales/en/nls.common.json
+++ b/ui/src/i18n/locales/en/nls.common.json
@@ -45,48 +45,50 @@
   "common.errmsg.ip_invalid": "Please enter a valid IP",
   "common.errmsg.url_invalid": "Please enter a valid URL",
 
+  "common.provider.acmehttpreq": "Http Request (ACME Proxy)",
   "common.provider.aliyun": "Alibaba Cloud",
-  "common.provider.aliyun.oss": "Alibaba Cloud - OSS",
-  "common.provider.aliyun.cdn": "Alibaba Cloud - CDN",
-  "common.provider.aliyun.dcdn": "Alibaba Cloud - DCDN",
-  "common.provider.aliyun.clb": "Alibaba Cloud - CLB",
   "common.provider.aliyun.alb": "Alibaba Cloud - ALB",
+  "common.provider.aliyun.cdn": "Alibaba Cloud - CDN",
+  "common.provider.aliyun.clb": "Alibaba Cloud - CLB",
+  "common.provider.aliyun.dcdn": "Alibaba Cloud - DCDN",
   "common.provider.aliyun.nlb": "Alibaba Cloud - NLB",
-  "common.provider.tencentcloud": "Tencent Cloud",
-  "common.provider.tencentcloud.cdn": "Tencent Cloud - CDN",
-  "common.provider.tencentcloud.ecdn": "Tencent Cloud - ECDN",
-  "common.provider.tencentcloud.clb": "Tencent Cloud - CLB",
-  "common.provider.tencentcloud.cos": "Tencent Cloud - COS",
-  "common.provider.tencentcloud.eo": "Tencent Cloud - EdgeOne",
+  "common.provider.aliyun.oss": "Alibaba Cloud - OSS",
+  "common.provider.aws": "AWS",
+  "common.provider.baiducloud": "Baidu Cloud",
+  "common.provider.baiducloud.cdn": "Baidu Cloud - CDN",
+  "common.provider.byteplus": "BytePlus",
+  "common.provider.byteplus.cdn": "BytePlus - CDN",
+  "common.provider.cloudflare": "Cloudflare",
+  "common.provider.dogecloud": "Doge Cloud",
+  "common.provider.dogecloud.cdn": "Doge Cloud - CDN",
+  "common.provider.godaddy": "GoDaddy",
   "common.provider.huaweicloud": "Huawei Cloud",
   "common.provider.huaweicloud.cdn": "Huawei Cloud - CDN",
   "common.provider.huaweicloud.elb": "Huawei Cloud - ELB",
-  "common.provider.baiducloud": "Baidu Cloud",
-  "common.provider.baiducloud.cdn": "Baidu Cloud - CDN",
-  "common.provider.qiniu": "Qiniu",
-  "common.provider.qiniu.cdn": "Qiniu - CDN",
-  "common.provider.dogecloud": "Doge Cloud",
-  "common.provider.dogecloud.cdn": "Doge Cloud - CDN",
-  "common.provider.aws": "AWS",
-  "common.provider.cloudflare": "Cloudflare",
-  "common.provider.namesilo": "NameSilo",
-  "common.provider.godaddy": "GoDaddy",
-  "common.provider.powerdns": "PowerDNS",
-  "common.provider.acmehttpreq": "Http Request (ACME Proxy)",
-  "common.provider.local": "Local Deployment",
-  "common.provider.ssh": "SSH Deployment",
-  "common.provider.webhook": "Webhook",
   "common.provider.kubernetes": "Kubernetes",
   "common.provider.kubernetes.secret": "Kubernetes - Secret",
-  "common.provider.email": "Email",
-  "common.provider.dingtalk": "DingTalk",
-  "common.provider.lark": "Lark",
-  "common.provider.telegram": "Telegram",
-  "common.provider.serverchan": "ServerChan",
-  "common.provider.bark": "Bark",
+  "common.provider.local": "Local Deployment",
+  "common.provider.namesilo": "NameSilo",
+  "common.provider.powerdns": "PowerDNS",
+  "common.provider.qiniu": "Qiniu",
+  "common.provider.qiniu.cdn": "Qiniu - CDN",
+  "common.provider.ssh": "SSH Deployment",
+  "common.provider.tencentcloud": "Tencent Cloud",
+  "common.provider.tencentcloud.cdn": "Tencent Cloud - CDN",
+  "common.provider.tencentcloud.clb": "Tencent Cloud - CLB",
+  "common.provider.tencentcloud.cos": "Tencent Cloud - COS",
+  "common.provider.tencentcloud.ecdn": "Tencent Cloud - ECDN",
+  "common.provider.tencentcloud.eo": "Tencent Cloud - EdgeOne",
   "common.provider.volcengine": "Volcengine",
-  "common.provider.volcengine.live": "Volcengine - Live",
   "common.provider.volcengine.cdn": "Volcengine - CDN",
-  "common.provider.byteplus": "BytePlus",
-  "common.provider.byteplus.cdn": "BytePlus - CDN"
+  "common.provider.volcengine.live": "Volcengine - Live",
+  "common.provider.webhook": "Webhook",
+
+  "common.notifier.bark": "Bark",
+  "common.notifier.dingtalk": "DingTalk",
+  "common.notifier.email": "Email",
+  "common.notifier.lark": "Lark",
+  "common.notifier.serverchan": "ServerChan",
+  "common.notifier.telegram": "Telegram",
+  "common.notifier.webhook": "Webhook"
 }
diff --git a/ui/src/i18n/locales/zh/nls.common.json b/ui/src/i18n/locales/zh/nls.common.json
index ff86cbf8..98a43c63 100644
--- a/ui/src/i18n/locales/zh/nls.common.json
+++ b/ui/src/i18n/locales/zh/nls.common.json
@@ -45,48 +45,50 @@
   "common.errmsg.ip_invalid": "请输入正确的 IP 地址",
   "common.errmsg.url_invalid": "请输入正确的 URL",
 
+  "common.provider.acmehttpreq": "Http Request (ACME Proxy)",
   "common.provider.aliyun": "阿里云",
-  "common.provider.aliyun.oss": "阿里云 - 对象存储 OSS",
-  "common.provider.aliyun.cdn": "阿里云 - 内容分发网络 CDN",
-  "common.provider.aliyun.dcdn": "阿里云 - 全站加速 DCDN",
-  "common.provider.aliyun.clb": "阿里云 - 传统型负载均衡 CLB",
   "common.provider.aliyun.alb": "阿里云 - 应用型负载均衡 ALB",
+  "common.provider.aliyun.cdn": "阿里云 - 内容分发网络 CDN",
+  "common.provider.aliyun.clb": "阿里云 - 传统型负载均衡 CLB",
+  "common.provider.aliyun.dcdn": "阿里云 - 全站加速 DCDN",
   "common.provider.aliyun.nlb": "阿里云 - 网络型负载均衡 NLB",
-  "common.provider.tencentcloud": "腾讯云",
-  "common.provider.tencentcloud.cos": "腾讯云 - 对象存储 COS",
-  "common.provider.tencentcloud.cdn": "腾讯云 - 内容分发网络 CDN",
-  "common.provider.tencentcloud.ecdn": "腾讯云 - 全站加速网络 ECDN",
-  "common.provider.tencentcloud.clb": "腾讯云 - 负载均衡 CLB",
-  "common.provider.tencentcloud.eo": "腾讯云 - 边缘安全加速平台 EdgeOne",
+  "common.provider.aliyun.oss": "阿里云 - 对象存储 OSS",
+  "common.provider.aws": "AWS",
+  "common.provider.baiducloud": "百度智能云",
+  "common.provider.baiducloud.cdn": "百度智能云 - 内容分发网络 CDN",
+  "common.provider.byteplus": "BytePlus",
+  "common.provider.byteplus.cdn": "BytePlus - CDN",
+  "common.provider.cloudflare": "Cloudflare",
+  "common.provider.dogecloud": "多吉云",
+  "common.provider.dogecloud.cdn": "多吉云 - 内容分发网络 CDN",
+  "common.provider.godaddy": "GoDaddy",
   "common.provider.huaweicloud": "华为云",
   "common.provider.huaweicloud.cdn": "华为云 - 内容分发网络 CDN",
   "common.provider.huaweicloud.elb": "华为云 - 弹性负载均衡 ELB",
-  "common.provider.baiducloud": "百度智能云",
-  "common.provider.baiducloud.cdn": "百度智能云 - 内容分发网络 CDN",
-  "common.provider.qiniu": "七牛云",
-  "common.provider.qiniu.cdn": "七牛云 - 内容分发网络 CDN",
-  "common.provider.dogecloud": "多吉云",
-  "common.provider.dogecloud.cdn": "多吉云 - 内容分发网络 CDN",
-  "common.provider.aws": "AWS",
-  "common.provider.cloudflare": "Cloudflare",
-  "common.provider.namesilo": "NameSilo",
-  "common.provider.godaddy": "GoDaddy",
-  "common.provider.powerdns": "PowerDNS",
-  "common.provider.acmehttpreq": "Http Request (ACME Proxy)",
-  "common.provider.local": "本地部署",
-  "common.provider.ssh": "SSH 部署",
-  "common.provider.webhook": "Webhook",
   "common.provider.kubernetes": "Kubernetes",
   "common.provider.kubernetes.secret": "Kubernetes - Secret",
-  "common.provider.email": "电子邮件",
-  "common.provider.dingtalk": "钉钉",
-  "common.provider.lark": "飞书",
-  "common.provider.telegram": "Telegram",
-  "common.provider.serverchan": "Server酱",
-  "common.provider.bark": "Bark",
+  "common.provider.local": "本地部署",
+  "common.provider.namesilo": "NameSilo",
+  "common.provider.powerdns": "PowerDNS",
+  "common.provider.qiniu": "七牛云",
+  "common.provider.qiniu.cdn": "七牛云 - 内容分发网络 CDN",
+  "common.provider.ssh": "SSH 部署",
+  "common.provider.tencentcloud": "腾讯云",
+  "common.provider.tencentcloud.cdn": "腾讯云 - 内容分发网络 CDN",
+  "common.provider.tencentcloud.clb": "腾讯云 - 负载均衡 CLB",
+  "common.provider.tencentcloud.cos": "腾讯云 - 对象存储 COS",
+  "common.provider.tencentcloud.ecdn": "腾讯云 - 全站加速网络 ECDN",
+  "common.provider.tencentcloud.eo": "腾讯云 - 边缘安全加速平台 EdgeOne",
   "common.provider.volcengine": "火山引擎",
-  "common.provider.volcengine.live": "火山引擎 - 视频直播",
   "common.provider.volcengine.cdn": "火山引擎 - CDN",
-  "common.provider.byteplus": "BytePlus",
-  "common.provider.byteplus.cdn": "BytePlus - CDN"
+  "common.provider.volcengine.live": "火山引擎 - 视频直播",
+  "common.provider.webhook": "Webhook",
+
+  "common.notifier.bark": "Bark",
+  "common.notifier.dingtalk": "钉钉",
+  "common.notifier.email": "电子邮件",
+  "common.notifier.lark": "飞书",
+  "common.notifier.serverchan": "Server酱",
+  "common.notifier.telegram": "Telegram",
+  "common.notifier.webhook": "Webhook"
 }
diff --git a/ui/src/pages/SettingsLayout.tsx b/ui/src/pages/SettingsLayout.tsx
deleted file mode 100644
index 2097b3bc..00000000
--- a/ui/src/pages/SettingsLayout.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { useEffect, useState } from "react";
-import { Outlet, useLocation, useNavigate } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { Card } from "antd";
-import { KeyRound, Megaphone, ShieldCheck, UserRound } from "lucide-react";
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Toaster } from "@/components/ui/toaster";
-
-const SettingsLayout = () => {
-  const location = useLocation();
-  const [tabValue, setTabValue] = useState("account");
-  const navigate = useNavigate();
-  const { t } = useTranslation();
-
-  useEffect(() => {
-    const pathname = location.pathname;
-    const tabValue = pathname.split("/")[2];
-    setTabValue(tabValue);
-  }, [location]);
-
-  return (
-    <Card>
-      <Toaster />
-      <div className="text-muted-foreground border-b dark:border-stone-500 py-5">{t("settings.page.title")}</div>
-      <div className="w-full mt-5 p-0 md:p-3 flex justify-center">
-        <Tabs defaultValue="account" className="w-full" value={tabValue}>
-          <TabsList className="mx-auto">
-            <TabsTrigger
-              value="account"
-              onClick={() => {
-                navigate("/settings/account");
-              }}
-              className="px-5"
-            >
-              <UserRound size={14} />
-              <div className="ml-1">{t("settings.account.tab")}</div>
-            </TabsTrigger>
-
-            <TabsTrigger
-              value="password"
-              onClick={() => {
-                navigate("/settings/password");
-              }}
-              className="px-5"
-            >
-              <KeyRound size={14} />
-              <div className="ml-1">{t("settings.password.tab")}</div>
-            </TabsTrigger>
-
-            <TabsTrigger
-              value="notify"
-              onClick={() => {
-                navigate("/settings/notify");
-              }}
-              className="px-5"
-            >
-              <Megaphone size={14} />
-              <div className="ml-1">{t("settings.notification.tab")}</div>
-            </TabsTrigger>
-
-            <TabsTrigger
-              value="ssl-provider"
-              onClick={() => {
-                navigate("/settings/ssl-provider");
-              }}
-              className="px-5"
-            >
-              <ShieldCheck size={14} />
-              <div className="ml-1">{t("settings.ca.tab")}</div>
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent value={tabValue}>
-            <div className="mt-5 w-full md:w-[45em]">
-              <Outlet />
-            </div>
-          </TabsContent>
-        </Tabs>
-      </div>
-    </Card>
-  );
-};
-
-export default SettingsLayout;
diff --git a/ui/src/pages/settings/Notify.tsx b/ui/src/pages/settings/Notification.tsx
similarity index 85%
rename from ui/src/pages/settings/Notify.tsx
rename to ui/src/pages/settings/Notification.tsx
index fb28180e..02dd727f 100644
--- a/ui/src/pages/settings/Notify.tsx
+++ b/ui/src/pages/settings/Notification.tsx
@@ -11,7 +11,7 @@ import Email from "@/components/notify/Email";
 import Bark from "@/components/notify/Bark";
 import { NotifyProvider } from "@/providers/notify";
 
-const Notify = () => {
+const Notification = () => {
   const { t } = useTranslation();
 
   return (
@@ -31,49 +31,49 @@ const Notify = () => {
         <div className="border rounded-md p-5 mt-7 shadow-lg">
           <Accordion type={"single"} collapsible={true} className="dark:text-stone-200">
             <AccordionItem value="item-email" className="dark:border-stone-200">
-              <AccordionTrigger>{t("common.provider.email")}</AccordionTrigger>
+              <AccordionTrigger>{t("common.notifier.email")}</AccordionTrigger>
               <AccordionContent>
                 <Email />
               </AccordionContent>
             </AccordionItem>
 
             <AccordionItem value="item-webhook" className="dark:border-stone-200">
-              <AccordionTrigger>{t("common.provider.webhook")}</AccordionTrigger>
+              <AccordionTrigger>{t("common.notifier.webhook")}</AccordionTrigger>
               <AccordionContent>
                 <Webhook />
               </AccordionContent>
             </AccordionItem>
 
             <AccordionItem value="item-dingtalk" className="dark:border-stone-200">
-              <AccordionTrigger>{t("common.provider.dingtalk")}</AccordionTrigger>
+              <AccordionTrigger>{t("common.notifier.dingtalk")}</AccordionTrigger>
               <AccordionContent>
                 <DingTalk />
               </AccordionContent>
             </AccordionItem>
 
             <AccordionItem value="item-lark" className="dark:border-stone-200">
-              <AccordionTrigger>{t("common.provider.lark")}</AccordionTrigger>
+              <AccordionTrigger>{t("common.notifier.lark")}</AccordionTrigger>
               <AccordionContent>
                 <Lark />
               </AccordionContent>
             </AccordionItem>
 
             <AccordionItem value="item-telegram" className="dark:border-stone-200">
-              <AccordionTrigger>{t("common.provider.telegram")}</AccordionTrigger>
+              <AccordionTrigger>{t("common.notifier.telegram")}</AccordionTrigger>
               <AccordionContent>
                 <Telegram />
               </AccordionContent>
             </AccordionItem>
 
             <AccordionItem value="item-serverchan" className="dark:border-stone-200">
-              <AccordionTrigger>{t("common.provider.serverchan")}</AccordionTrigger>
+              <AccordionTrigger>{t("common.notifier.serverchan")}</AccordionTrigger>
               <AccordionContent>
                 <ServerChan />
               </AccordionContent>
             </AccordionItem>
 
             <AccordionItem value="item-bark" className="dark:border-stone-200">
-              <AccordionTrigger>{t("common.provider.bark")}</AccordionTrigger>
+              <AccordionTrigger>{t("common.notifier.bark")}</AccordionTrigger>
               <AccordionContent>
                 <Bark />
               </AccordionContent>
@@ -85,4 +85,4 @@ const Notify = () => {
   );
 };
 
-export default Notify;
+export default Notification;
diff --git a/ui/src/pages/settings/Settings.tsx b/ui/src/pages/settings/Settings.tsx
new file mode 100644
index 00000000..94939a68
--- /dev/null
+++ b/ui/src/pages/settings/Settings.tsx
@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Card, Space } from "antd";
+import { PageHeader } from "@ant-design/pro-components";
+import { KeyRound as KeyRoundIcon, Megaphone as MegaphoneIcon, ShieldCheck as ShieldCheckIcon, UserRound as UserRoundIcon } from "lucide-react";
+
+import { Toaster } from "@/components/ui/toaster";
+
+const Settings = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const { t } = useTranslation();
+
+  const [tabValue, setTabValue] = useState("account");
+  useEffect(() => {
+    const path = location.pathname.split("/")[2];
+    if (!path) {
+      navigate("/settings/account");
+      return;
+    }
+
+    setTabValue(path);
+  }, [location]);
+
+  return (
+    <>
+      <PageHeader title={t("settings.page.title")} />
+
+      <Card
+        tabList={[
+          {
+            key: "account",
+            label: (
+              <Space>
+                <UserRoundIcon size={14} />
+                <label>{t("settings.account.tab")}</label>
+              </Space>
+            ),
+          },
+          {
+            key: "password",
+            label: (
+              <Space>
+                <KeyRoundIcon size={14} />
+                <label>{t("settings.password.tab")}</label>
+              </Space>
+            ),
+          },
+          {
+            key: "notification",
+            label: (
+              <Space>
+                <MegaphoneIcon size={14} />
+                <label>{t("settings.notification.tab")}</label>
+              </Space>
+            ),
+          },
+          {
+            key: "ssl-provider",
+            label: (
+              <Space>
+                <ShieldCheckIcon size={14} />
+                <label>{t("settings.ca.tab")}</label>
+              </Space>
+            ),
+          },
+        ]}
+        activeTabKey={tabValue}
+        onTabChange={(key) => {
+          setTabValue(key);
+          navigate(`/settings/${key}`);
+        }}
+      >
+        <Toaster />
+        <Outlet />
+      </Card>
+    </>
+  );
+};
+
+export default Settings;
diff --git a/ui/src/router.tsx b/ui/src/router.tsx
index 3ac7e713..8a147977 100644
--- a/ui/src/router.tsx
+++ b/ui/src/router.tsx
@@ -2,17 +2,17 @@ import { createHashRouter } from "react-router-dom";
 
 import AuthLayout from "./pages/AuthLayout";
 import ConsoleLayout from "./pages/ConsoleLayout";
-import SettingsLayout from "./pages/SettingsLayout";
 import Login from "./pages/login/Login";
-import Account from "./pages/settings/Account";
-import Password from "./pages/settings/Password";
-import Notify from "./pages/settings/Notify";
-import SSLProvider from "./pages/settings/SSLProvider";
 import Dashboard from "./pages/dashboard/Dashboard";
 import AccessList from "./pages/accesses/AccessList";
 import WorkflowList from "./pages/workflows/WorkflowList";
 import WorkflowDetail from "./pages/workflows/WorkflowDetail";
 import CertificateList from "./pages/certificates/CertificateList";
+import Settings from "./pages/settings/Settings";
+import SettingsAccount from "./pages/settings/Account";
+import SettingsPassword from "./pages/settings/Password";
+import SettingsNotification from "./pages/settings/Notification";
+import SettingsSSLProvider from "./pages/settings/SSLProvider";
 
 export const router = createHashRouter([
   {
@@ -41,23 +41,23 @@ export const router = createHashRouter([
       },
       {
         path: "/settings",
-        element: <SettingsLayout />,
+        element: <Settings />,
         children: [
-          {
-            path: "/settings/password",
-            element: <Password />,
-          },
           {
             path: "/settings/account",
-            element: <Account />,
+            element: <SettingsAccount />,
           },
           {
-            path: "/settings/notify",
-            element: <Notify />,
+            path: "/settings/password",
+            element: <SettingsPassword />,
+          },
+          {
+            path: "/settings/notification",
+            element: <SettingsNotification />,
           },
           {
             path: "/settings/ssl-provider",
-            element: <SSLProvider />,
+            element: <SettingsSSLProvider />,
           },
         ],
       },