wood/certimate
1
0
Fork 0
mirror of https://github.com/woodchen-ink/certimate.git synced 2025-07-18 17:31:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): new Settings layout using antd

Browse Source
This commit is contained in:
Fu Diwei 2024-12-18 21:22:25 +08:00
parent afa446aabe
commit abe6dbb5a2
12 changed files with 205 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/components/access/AccessEditForm.tsx
View File

@ -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}

8
ui/src/components/access/AccessTypeSelect.tsx
View File

@ -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>

4
ui/src/components/notify/Bark.tsx
View File

@ -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]);

4
ui/src/components/notify/Telegram.tsx
View File

@ -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]);

11
ui/src/domain/access.ts
View File

@ -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;

14
ui/src/domain/settings.ts
View File

@ -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",
},
];

70
ui/src/i18n/locales/en/nls.common.json
View File

@ -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"
}

70
ui/src/i18n/locales/zh/nls.common.json
View File

@ -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"
}

84
ui/src/pages/SettingsLayout.tsx
View File

@ -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;

18
ui/src/pages/settings/Notify.tsx → ui/src/pages/settings/Notification.tsx
View File

@ -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;

83
ui/src/pages/settings/Settings.tsx Normal file
View File

@ -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;

28
ui/src/router.tsx
View File

@ -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 />,
},
],
},