From dae6ad295148a25bf4a269f4c2107166d2dc75c2 Mon Sep 17 00:00:00 2001 From: Fu Diwei Date: Thu, 26 Dec 2024 13:02:22 +0800 Subject: [PATCH] feat(ui): add @ant-design/icons --- ui/package-lock.json | 1 + ui/package.json | 1 + .../access/AccessEditFormKubernetesConfig.tsx | 4 +- .../access/AccessEditFormSSHConfig.tsx | 4 +- .../certificate/CertificateDetail.tsx | 10 ++--- ui/src/components/core/MultipleInput.tsx | 26 ++++++------ ui/src/components/core/Version.tsx | 4 +- .../workflow/DropdownMenuItemIcon.tsx | 2 +- .../workflow/node/ApplyNodeForm.tsx | 18 +++++++-- .../workflow/node/NotifyNodeForm.tsx | 6 +-- .../workflow/run/WorkflowRunDetailDrawer.tsx | 5 +-- .../components/workflow/run/WorkflowRuns.tsx | 12 ++++-- ui/src/i18n/locales/en/nls.workflow.json | 4 +- ui/src/i18n/locales/zh/nls.workflow.json | 4 +- ui/src/pages/ConsoleLayout.tsx | 40 +++++++++---------- ui/src/pages/accesses/AccessList.tsx | 15 ++++--- ui/src/pages/certificates/CertificateList.tsx | 7 ++-- ui/src/pages/settings/Settings.tsx | 15 ++++--- ui/src/pages/workflows/WorkflowDetail.tsx | 6 +-- ui/src/pages/workflows/WorkflowList.tsx | 9 ++--- 20 files changed, 111 insertions(+), 82 deletions(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index 01912e90..2f15fe68 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -8,6 +8,7 @@ "name": "ui", "version": "0.0.0", "dependencies": { + "@ant-design/icons": "^5.5.2", "@ant-design/pro-components": "^2.8.2", "@hookform/resolvers": "^3.9.0", "@radix-ui/react-dialog": "^1.1.2", diff --git a/ui/package.json b/ui/package.json index ce3703df..da1eaa01 100644 --- a/ui/package.json +++ b/ui/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@ant-design/icons": "^5.5.2", "@ant-design/pro-components": "^2.8.2", "@hookform/resolvers": "^3.9.0", "@radix-ui/react-dialog": "^1.1.2", diff --git a/ui/src/components/access/AccessEditFormKubernetesConfig.tsx b/ui/src/components/access/AccessEditFormKubernetesConfig.tsx index f26dc8e0..2dc31d18 100644 --- a/ui/src/components/access/AccessEditFormKubernetesConfig.tsx +++ b/ui/src/components/access/AccessEditFormKubernetesConfig.tsx @@ -3,9 +3,9 @@ import { flushSync } from "react-dom"; import { useTranslation } from "react-i18next"; import { useDeepCompareEffect } from "ahooks"; import { Button, Form, Input, Upload, type FormInstance, type UploadFile, type UploadProps } from "antd"; +import { UploadOutlined as UploadOutlinedIcon } from "@ant-design/icons"; import { createSchemaFieldRule } from "antd-zod"; import { z } from "zod"; -import { Upload as UploadIcon } from "lucide-react"; import { useAntdForm } from "@/hooks"; import { type KubernetesAccessConfig } from "@/domain/access"; @@ -78,7 +78,7 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, initialValue tooltip={} > false} fileList={kubeFileList} maxCount={1} onChange={handleKubeFileChange}> - + diff --git a/ui/src/components/access/AccessEditFormSSHConfig.tsx b/ui/src/components/access/AccessEditFormSSHConfig.tsx index 8f09259a..bffdc009 100644 --- a/ui/src/components/access/AccessEditFormSSHConfig.tsx +++ b/ui/src/components/access/AccessEditFormSSHConfig.tsx @@ -3,9 +3,9 @@ import { flushSync } from "react-dom"; import { useTranslation } from "react-i18next"; import { useDeepCompareEffect } from "ahooks"; import { Button, Form, Input, InputNumber, Upload, type FormInstance, type UploadFile, type UploadProps } from "antd"; +import { UploadOutlined as UploadOutlinedIcon } from "@ant-design/icons"; import { createSchemaFieldRule } from "antd-zod"; import { z } from "zod"; -import { Upload as UploadIcon } from "lucide-react"; import { useAntdForm } from "@/hooks"; import { type SSHAccessConfig } from "@/domain/access"; @@ -136,7 +136,7 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa }> false} fileList={keyFileList} maxCount={1} onChange={handleKeyFileChange}> - + diff --git a/ui/src/components/certificate/CertificateDetail.tsx b/ui/src/components/certificate/CertificateDetail.tsx index c242344c..cc1baca1 100644 --- a/ui/src/components/certificate/CertificateDetail.tsx +++ b/ui/src/components/certificate/CertificateDetail.tsx @@ -1,7 +1,7 @@ import { useTranslation } from "react-i18next"; import { Button, Dropdown, Form, Input, message, Space, Tooltip } from "antd"; +import { CopyOutlined as CopyOutlinedIcon, DownOutlined as DownOutlinedIcon, LikeOutlined as LikeOutlinedIcon } from "@ant-design/icons"; import { CopyToClipboard } from "react-copy-to-clipboard"; -import { ChevronDown as ChevronDownIcon, Clipboard as ClipboardIcon, ThumbsUp as ThumbsUpIcon } from "lucide-react"; import dayjs from "dayjs"; import { type CertificateModel } from "@/domain/certificate"; @@ -53,7 +53,7 @@ const CertificateDetail = ({ data, ...props }: CertificateDetailProps) => { messageApi.success(t("common.text.copied")); }} > - + @@ -70,7 +70,7 @@ const CertificateDetail = ({ data, ...props }: CertificateDetailProps) => { messageApi.success(t("common.text.copied")); }} > - + @@ -85,7 +85,7 @@ const CertificateDetail = ({ data, ...props }: CertificateDetailProps) => { { key: "PEM", label: "PEM", - extra: , + extra: , onClick: () => handleDownloadPEMClick(), }, { @@ -110,7 +110,7 @@ const CertificateDetail = ({ data, ...props }: CertificateDetailProps) => { diff --git a/ui/src/components/core/MultipleInput.tsx b/ui/src/components/core/MultipleInput.tsx index 1f14e866..1de5cb83 100644 --- a/ui/src/components/core/MultipleInput.tsx +++ b/ui/src/components/core/MultipleInput.tsx @@ -2,8 +2,13 @@ import { useTranslation } from "react-i18next"; import { useControllableValue } from "ahooks"; import { Button, Input, Space, type InputRef, type InputProps } from "antd"; +import { + DownOutlined as DownOutlinedIcon, + MinusOutlined as MinusOutlinedIcon, + PlusOutlined as PlusOutlinedIcon, + UpOutlined as UpOutlinedIcon, +} from "@ant-design/icons"; import { produce } from "immer"; -import { ArrowDown as ArrowDownIcon, ArrowUp as ArrowUpIcon, Minus as MinusIcon, Plus as PlusIcon } from "lucide-react"; export type MultipleInputProps = Omit & { allowClear?: boolean; @@ -125,7 +130,7 @@ const MultipleInput = ({ ) : ( - {value.map((element, index) => { + {Array.from(value).map((element, index) => { const allowUp = index > 0; const allowDown = index < value.length - 1; const allowRemove = minCount == null || value.length > minCount; @@ -192,6 +197,7 @@ const MultipleInputItem = forwardRef { if (!showSortButton) return null; - return } diff --git a/ui/src/components/workflow/node/NotifyNodeForm.tsx b/ui/src/components/workflow/node/NotifyNodeForm.tsx index 62321999..48b92c24 100644 --- a/ui/src/components/workflow/node/NotifyNodeForm.tsx +++ b/ui/src/components/workflow/node/NotifyNodeForm.tsx @@ -3,8 +3,8 @@ import { Link } from "react-router"; import { useTranslation } from "react-i18next"; import { Button, Form, Input, Select } from "antd"; import { createSchemaFieldRule } from "antd-zod"; +import { RightOutlined as RightOutlinedIcon } from "@ant-design/icons"; import { z } from "zod"; -import { ChevronRight as ChevronRightIcon } from "lucide-react"; import { usePanel } from "../PanelProvider"; import { useAntdForm, useZustandShallowSelector } from "@/hooks"; @@ -75,9 +75,9 @@ const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
{t("workflow.nodes.notify.form.channel.label")}
-
diff --git a/ui/src/components/workflow/run/WorkflowRunDetailDrawer.tsx b/ui/src/components/workflow/run/WorkflowRunDetailDrawer.tsx index a9e4af41..b2b30672 100644 --- a/ui/src/components/workflow/run/WorkflowRunDetailDrawer.tsx +++ b/ui/src/components/workflow/run/WorkflowRunDetailDrawer.tsx @@ -2,7 +2,6 @@ import { cloneElement, useMemo } from "react"; import { useTranslation } from "react-i18next"; import { useControllableValue } from "ahooks"; import { Alert, Drawer } from "antd"; -import { CircleCheck as CircleCheckIcon, CircleX as CircleXIcon } from "lucide-react"; import Show from "@/components/Show"; import { type WorkflowRunModel } from "@/domain/workflowRun"; @@ -45,11 +44,11 @@ const WorkflowRunDetailDrawer = ({ data, loading, trigger, ...props }: WorkflowR setOpen(false)}> - } /> + - } /> +
diff --git a/ui/src/components/workflow/run/WorkflowRuns.tsx b/ui/src/components/workflow/run/WorkflowRuns.tsx index 09b116da..41282d81 100644 --- a/ui/src/components/workflow/run/WorkflowRuns.tsx +++ b/ui/src/components/workflow/run/WorkflowRuns.tsx @@ -3,7 +3,11 @@ import { useParams } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { useRequest } from "ahooks"; import { Button, Empty, notification, Space, Table, theme, Tooltip, Typography, type TableProps } from "antd"; -import { CircleCheck as CircleCheckIcon, CircleX as CircleXIcon, Eye as EyeIcon } from "lucide-react"; +import { + CheckCircleTwoTone as CheckCircleTwoToneIcon, + CloseCircleTwoTone as CloseCircleTwoToneIcon, + SelectOutlined as SelectOutlinedIcon, +} from "@ant-design/icons"; import { ClientResponseError } from "pocketbase"; import WorkflowRunDetailDrawer from "./WorkflowRunDetailDrawer"; @@ -45,14 +49,14 @@ const WorkflowRuns = ({ className, style }: WorkflowRunsProps) => { if (record.succeed) { return ( - + {t("workflow_run.props.status.succeeded")} ); } else { - + {t("workflow_run.props.status.failed")} ; @@ -82,7 +86,7 @@ const WorkflowRuns = ({ className, style }: WorkflowRunsProps) => { width: 120, render: (_, record) => ( - } variant="text" />} /> + } variant="text" />} /> ), }, diff --git a/ui/src/i18n/locales/en/nls.workflow.json b/ui/src/i18n/locales/en/nls.workflow.json index 970682de..699259e4 100644 --- a/ui/src/i18n/locales/en/nls.workflow.json +++ b/ui/src/i18n/locales/en/nls.workflow.json @@ -40,10 +40,12 @@ "workflow.nodes.start.form.trigger_cron.tooltip": "Time zone is based on the server.", "workflow.nodes.start.form.trigger_cron.extra": "Expected execution time for the last 5 times:", "workflow.nodes.start.form.trigger_cron_alert.content": "Tips: If you have multiple workflows, it is recommended to set them to run at multiple times of the day instead of always running at specific times.

Reference links:
1. Let’s Encrypt rate limits
2. Why should my Let’s Encrypt (ACME) client run at a random time?", - "workflow.nodes.apply.form.domain.label": "Domain (wildcard domain is supported)", + "workflow.nodes.apply.form.domain.label": "Domain", "workflow.nodes.apply.form.domain.placeholder": "Please enter domain", + "workflow.nodes.apply.form.domain.tooltip": "Wildcard domain: *.example.com", "workflow.nodes.apply.form.email.label": "Contact Email", "workflow.nodes.apply.form.email.placeholder": "Please enter contact email", + "workflow.nodes.apply.form.email.tooltip": "Contact information required for SSL certificate application. Please pay attention to the rate limits.", "workflow.nodes.apply.form.access.label": "DNS Provider Authorization", "workflow.nodes.apply.form.access.placeholder": "Please select an authorization of DNS provider", "workflow.nodes.apply.form.access.button": "Create", diff --git a/ui/src/i18n/locales/zh/nls.workflow.json b/ui/src/i18n/locales/zh/nls.workflow.json index 11f9c0d1..78d8e852 100644 --- a/ui/src/i18n/locales/zh/nls.workflow.json +++ b/ui/src/i18n/locales/zh/nls.workflow.json @@ -40,10 +40,12 @@ "workflow.nodes.start.form.trigger_cron.tooltip": "时区以服务器设置为准。", "workflow.nodes.start.form.trigger_cron.extra": "预计最近 5 次执行时间：", "workflow.nodes.start.form.trigger_cron_alert.content": "小贴士：如果你有多个工作流，建议将它们设置为在一天中的多个时间段运行，而非总是在相同的特定时间。

参考链接：
1. Let’s Encrypt 速率限制
2. 为什么我的 Let’s Encrypt (ACME) 客户端启动时间应当随机？", - "workflow.nodes.apply.form.domain.label": "域名（支持泛域名）", + "workflow.nodes.apply.form.domain.label": "域名", "workflow.nodes.apply.form.domain.placeholder": "请输入域名", + "workflow.nodes.apply.form.domain.tooltip": "泛域名表示形式为：*.example.com", "workflow.nodes.apply.form.email.label": "联系邮箱", "workflow.nodes.apply.form.email.placeholder": "请输入联系邮箱", + "workflow.nodes.apply.form.email.tooltip": "申请签发 SSL 证书时所需的联系方式。请注意速率限制。", "workflow.nodes.apply.form.access.label": "DNS 提供商授权", "workflow.nodes.apply.form.access.placeholder": "请选择 DNS 提供商授权", "workflow.nodes.apply.form.access.button": "新建", diff --git a/ui/src/pages/ConsoleLayout.tsx b/ui/src/pages/ConsoleLayout.tsx index f59f47eb..980828d4 100644 --- a/ui/src/pages/ConsoleLayout.tsx +++ b/ui/src/pages/ConsoleLayout.tsx @@ -3,17 +3,17 @@ import { Link, Navigate, Outlet, useLocation, useNavigate } from "react-router-d import { useTranslation } from "react-i18next"; import { Button, Drawer, Dropdown, Layout, Menu, Tooltip, theme, type ButtonProps, type MenuProps } from "antd"; import { - Languages as LanguagesIcon, - LogOut as LogOutIcon, - Home as HomeIcon, - Menu as MenuIcon, - Moon as MoonIcon, - Server as ServerIcon, - Settings as SettingsIcon, - ShieldCheck as ShieldCheckIcon, - Sun as SunIcon, - Workflow as WorkflowIcon, -} from "lucide-react"; + CloudServerOutlined as CloudServerOutlinedIcon, + GlobalOutlined as GlobalOutlinedIcon, + HomeOutlined as HomeOutlinedIcon, + LogoutOutlined as LogoutOutlinedIcon, + MenuOutlined as MenuOutlinedIcon, + MoonOutlined as MoonOutlinedIcon, + NodeIndexOutlined as NodeIndexOutlinedIcon, + SafetyOutlined as SafetyOutlinedIcon, + SettingOutlined as SettingOutlinedIcon, + SunOutlined as SunOutlinedIcon, +} from "@ant-design/icons"; import Version from "@/components/core/Version"; import { useBrowserTheme } from "@/hooks"; @@ -67,7 +67,7 @@ const ConsoleLayout = () => {
-
@@ -118,10 +118,10 @@ const SiderMenu = memo(({ onSelect }: { onSelect?: (key: string) => void }) => { const MENU_KEY_CERTIFICATES = "/certificates"; const MENU_KEY_ACCESSES = "/accesses"; const menuItems: Required["items"] = [ - [MENU_KEY_HOME, , t("dashboard.page.title")], - [MENU_KEY_WORKFLOWS, , t("workflow.page.title")], - [MENU_KEY_CERTIFICATES, , t("certificate.page.title")], - [MENU_KEY_ACCESSES, , t("access.page.title")], + [MENU_KEY_HOME, , t("dashboard.page.title")], + [MENU_KEY_WORKFLOWS, , t("workflow.page.title")], + [MENU_KEY_CERTIFICATES, , t("certificate.page.title")], + [MENU_KEY_ACCESSES, , t("access.page.title")], ].map(([key, icon, label]) => { return { key: key as string, @@ -201,7 +201,7 @@ const ThemeToggleButton = memo(({ size }: { size?: ButtonProps["size"] }) => { return ( - } diff --git a/ui/src/pages/certificates/CertificateList.tsx b/ui/src/pages/certificates/CertificateList.tsx index b0517283..5130b586 100644 --- a/ui/src/pages/certificates/CertificateList.tsx +++ b/ui/src/pages/certificates/CertificateList.tsx @@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next"; import { useRequest } from "ahooks"; import { Button, Divider, Empty, Menu, notification, Radio, Space, Table, theme, Tooltip, Typography, type MenuProps, type TableProps } from "antd"; import { PageHeader } from "@ant-design/pro-components"; -import { Eye as EyeIcon, Filter as FilterIcon, Trash2 as Trash2Icon } from "lucide-react"; +import { DeleteOutlined as DeleteOutlinedIcon, SelectOutlined as SelectOutlinedIcon } from "@ant-design/icons"; import dayjs from "dayjs"; import { ClientResponseError } from "pocketbase"; @@ -88,7 +88,6 @@ const CertificateList = () => {
); }, - filterIcon: () => , render: (_, record) => { const total = dayjs(record.expireAt).diff(dayjs(record.created), "d") + 1; const left = dayjs(record.expireAt).diff(dayjs(), "d"); @@ -158,7 +157,7 @@ const CertificateList = () => { data={record} trigger={ -