feat(ui): add @ant-design/icons

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={<span dangerouslySetInnerHTML={{ __html: t("access.form.k8s_kubeconfig.tooltip") }}></span>}
       >
         <Upload beforeUpload={() => false} fileList={kubeFileList} maxCount={1} onChange={handleKubeFileChange}>
-          <Button icon={<UploadIcon size={16} />}>{t("access.form.k8s_kubeconfig.upload")}</Button>
+          <Button icon={<UploadOutlinedIcon />}>{t("access.form.k8s_kubeconfig.upload")}</Button>
         </Upload>
       </Form.Item>
     </Form>

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
           </Form.Item>
           <Form.Item label={t("access.form.ssh_key.label")} tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ssh_key.tooltip") }}></span>}>
             <Upload beforeUpload={() => false} fileList={keyFileList} maxCount={1} onChange={handleKeyFileChange}>
-              <Button icon={<UploadIcon size={16} />}>{t("access.form.ssh_key.upload")}</Button>
+              <Button icon={<UploadOutlinedIcon />}>{t("access.form.ssh_key.upload")}</Button>
             </Upload>
           </Form.Item>
         </div>

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"));
                 }}
               >
-                <Button type="text" icon={<ClipboardIcon size={14} />}></Button>
+                <Button size="small" type="text" icon={<CopyOutlinedIcon />}></Button>
               </CopyToClipboard>
             </Tooltip>
           </div>
@@ -70,7 +70,7 @@ const CertificateDetail = ({ data, ...props }: CertificateDetailProps) => {
                   messageApi.success(t("common.text.copied"));
                 }}
               >
-                <Button type="text" icon={<ClipboardIcon size={14} />}></Button>
+                <Button size="small" type="text" icon={<CopyOutlinedIcon />}></Button>
               </CopyToClipboard>
             </Tooltip>
           </div>
@@ -85,7 +85,7 @@ const CertificateDetail = ({ data, ...props }: CertificateDetailProps) => {
               {
                 key: "PEM",
                 label: "PEM",
-                extra: <ThumbsUpIcon size="14" />,
+                extra: <LikeOutlinedIcon />,
                 onClick: () => handleDownloadPEMClick(),
               },
               {
@@ -110,7 +110,7 @@ const CertificateDetail = ({ data, ...props }: CertificateDetailProps) => {
           <Button type="primary">
             <Space>
               <span>{t("certificate.action.download")}</span>
-              <ChevronDownIcon size={14} />
+              <DownOutlinedIcon />
             </Space>
           </Button>
         </Dropdown>

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<InputProps, "count" | "defaultValue" | "showCount" | "value" | "onChange" | "onPressEnter" | "onClear"> & {
   allowClear?: boolean;
@@ -125,7 +130,7 @@ const MultipleInput = ({
     </Button>
   ) : (
     <Space className="w-full" direction="vertical" size="small">
-      {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<MultipleInputItemInstance, MultipleInputIte
       allowUp,
       disabled,
       showSortButton,
+      size,
       onChange,
       onClickAdd,
       onClickDown,
@@ -212,21 +218,17 @@ const MultipleInputItem = forwardRef<MultipleInputItemInstance, MultipleInputIte
 
     const upBtn = useMemo(() => {
       if (!showSortButton) return null;
-      return <Button icon={<ArrowUpIcon size={14} />} color="default" disabled={disabled || !allowUp} shape="circle" variant="text" onClick={onClickUp} />;
+      return <Button icon={<UpOutlinedIcon />} color="default" disabled={disabled || !allowUp} type="text" onClick={onClickUp} />;
     }, [allowUp, disabled, showSortButton, onClickUp]);
     const downBtn = useMemo(() => {
       if (!showSortButton) return null;
-      return (
-        <Button icon={<ArrowDownIcon size={14} />} color="default" disabled={disabled || !allowDown} shape="circle" variant="text" onClick={onClickDown} />
-      );
+      return <Button icon={<DownOutlinedIcon />} color="default" disabled={disabled || !allowDown} type="text" onClick={onClickDown} />;
     }, [allowDown, disabled, showSortButton, onClickDown]);
     const removeBtn = useMemo(() => {
-      return (
-        <Button icon={<MinusIcon size={14} />} color="default" disabled={disabled || !allowRemove} shape="circle" variant="text" onClick={onClickRemove} />
-      );
+      return <Button icon={<MinusOutlinedIcon />} color="default" disabled={disabled || !allowRemove} type="text" onClick={onClickRemove} />;
     }, [allowRemove, disabled, onClickRemove]);
     const addBtn = useMemo(() => {
-      return <Button icon={<PlusIcon size={14} />} color="default" disabled={disabled || !allowAdd} shape="circle" variant="text" onClick={onClickAdd} />;
+      return <Button icon={<PlusOutlinedIcon />} color="default" disabled={disabled || !allowAdd} type="text" onClick={onClickAdd} />;
     }, [allowAdd, disabled, onClickAdd]);
 
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -261,12 +263,12 @@ const MultipleInputItem = forwardRef<MultipleInputItemInstance, MultipleInputIte
             onChange={handleChange}
           />
         </div>
-        <div>
+        <Button.Group size={size}>
           {removeBtn}
           {upBtn}
           {downBtn}
           {addBtn}
-        </div>
+        </Button.Group>
       </div>
     );
   }

ui/src/components/core/Version.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { Divider, Space, Typography } from "antd";
-import { BookOpen as BookOpenIcon } from "lucide-react";
+import { BookOutlined as BookOutlinedIcon } from "@ant-design/icons";
 
 import { version } from "@/domain/version";
 
@@ -16,7 +16,7 @@ const Version = ({ className, style }: VersionProps) => {
     <Space className={className} style={style} size={4}>
       <Typography.Link type="secondary" href="https://docs.certimate.me" target="_blank">
         <div className="flex items-center justify-center space-x-1">
-          <BookOpenIcon size={16} />
+          <BookOutlinedIcon />
           <span>{t("common.menu.document")}</span>
         </div>
       </Typography.Link>

ui/src/components/workflow/DropdownMenuItemIcon.tsx

@@ -1,4 +1,4 @@
-import { WorkflowNodeDropdwonItemIcon, WorkflowNodeDropdwonItemIconType } from "@/domain/workflow";
+import { type WorkflowNodeDropdwonItemIcon, WorkflowNodeDropdwonItemIconType } from "@/domain/workflow";
 import { CloudUpload, GitFork, Megaphone, NotebookPen } from "lucide-react";
 
 const icons = new Map([

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

@@ -3,8 +3,8 @@ import { useTranslation } from "react-i18next";
 import { useControllableValue } from "ahooks";
 import { AutoComplete, Button, Divider, Form, Input, InputNumber, Select, Switch, Typography, type AutoCompleteProps } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
+import { PlusOutlined as PlusOutlinedIcon } from "@ant-design/icons";
 import z from "zod";
-import { Plus as PlusIcon } from "lucide-react";
 
 import AccessEditModal from "@/components/access/AccessEditModal";
 import AccessSelect from "@/components/access/AccessSelect";
@@ -77,11 +77,21 @@ const ApplyNodeForm = ({ data }: ApplyNodeFormProps) => {
 
   return (
     <Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
-      <Form.Item name="domain" label={t("workflow.nodes.apply.form.domain.label")} rules={[formRule]}>
+      <Form.Item
+        name="domain"
+        label={t("workflow.nodes.apply.form.domain.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow.nodes.apply.form.domain.tooltip") }}></span>}
+      >
         <Input placeholder={t("workflow.nodes.apply.form.domain.placeholder")} />
       </Form.Item>
 
-      <Form.Item name="email" label={t("workflow.nodes.apply.form.email.label")} rules={[formRule]}>
+      <Form.Item
+        name="email"
+        label={t("workflow.nodes.apply.form.email.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow.nodes.apply.form.email.tooltip") }}></span>}
+      >
         <ContactEmailSelect placeholder={t("workflow.nodes.apply.form.email.placeholder")} />
       </Form.Item>
 
@@ -94,7 +104,7 @@ const ApplyNodeForm = ({ data }: ApplyNodeFormProps) => {
                 preset="add"
                 trigger={
                   <Button className="p-0" type="link">
-                    <PlusIcon size={14} />
+                    <PlusOutlinedIcon />
                     {t("workflow.nodes.apply.form.access.button")}
                   </Button>
                 }

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) => {
             <div className="flex-grow max-w-full truncate">{t("workflow.nodes.notify.form.channel.label")}</div>
             <div className="text-right">
               <Link className="ant-typography" to="/settings/notification" target="_blank">
-                <Button className="p-0" type="link">
+                <Button size="small" type="link">
                   {t("workflow.nodes.notify.form.channel.button")}
-                  <ChevronRightIcon size={14} />
+                  <RightOutlinedIcon className="text-xs" />
                 </Button>
               </Link>
             </div>

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
       <Drawer closable destroyOnClose open={open} loading={loading} placement="right" title={data?.id} width={640} onClose={() => setOpen(false)}>
         <Show when={!!data}>
           <Show when={data!.succeed}>
-            <Alert showIcon type="success" message={t("workflow_run.props.status.succeeded")} icon={<CircleCheckIcon size={16} />} />
+            <Alert showIcon type="success" message={t("workflow_run.props.status.succeeded")} />
           </Show>
 
           <Show when={!!data!.error}>
-            <Alert showIcon type="error" message={t("workflow_run.props.status.failed")} description={data!.error} icon={<CircleXIcon size={16} />} />
+            <Alert showIcon type="error" message={t("workflow_run.props.status.failed")} description={data!.error} />
           </Show>
 
           <div className="mt-4 p-4 bg-black text-stone-200 rounded-md">

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 (
             <Space>
-              <CircleCheckIcon color={themeToken.colorSuccess} size={16} />
+              <CheckCircleTwoToneIcon twoToneColor={themeToken.colorSuccess} />
               <Typography.Text type="success">{t("workflow_run.props.status.succeeded")}</Typography.Text>
             </Space>
           );
         } else {
           <Tooltip title={record.error}>
             <Space>
-              <CircleXIcon color={themeToken.colorError} size={16} />
+              <CloseCircleTwoToneIcon twoToneColor={themeToken.colorError} />
               <Typography.Text type="danger">{t("workflow_run.props.status.failed")}</Typography.Text>
             </Space>
           </Tooltip>;
@@ -82,7 +86,7 @@ const WorkflowRuns = ({ className, style }: WorkflowRunsProps) => {
       width: 120,
       render: (_, record) => (
         <Button.Group>
-          <WorkflowRunDetailDrawer data={record} trigger={<Button color="primary" icon={<EyeIcon size={16} />} variant="text" />} />
+          <WorkflowRunDetailDrawer data={record} trigger={<Button color="primary" icon={<SelectOutlinedIcon />} variant="text" />} />
         </Button.Group>
       ),
     },