improve multi language

ui/src/components/certificate/CertificateDetail.tsx

@@ -5,6 +5,7 @@ import { Textarea } from "../ui/textarea";
 import { Button } from "../ui/button";
 import { Label } from "../ui/label";
 import { CustomFile, saveFiles2ZIP } from "@/lib/file";
+import { useTranslation } from "react-i18next";
 
 type WorkflowLogDetailProps = {
   open: boolean;
@@ -12,6 +13,7 @@ type WorkflowLogDetailProps = {
   certificate?: Certificate;
 };
 const CertificateDetail = ({ open, onOpenChange, certificate }: WorkflowLogDetailProps) => {
+  const { t } = useTranslation();
   const handleDownloadClick = async () => {
     const zipName = `${certificate?.id}-${certificate?.san}.zip`;
     const files: CustomFile[] = [
@@ -30,7 +32,7 @@ const CertificateDetail = ({ open, onOpenChange, certificate }: WorkflowLogDetai
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="sm:max-w-2xl">
+      <SheetContent className="sm:max-w-2xl dark:text-stone-200">
         <SheetHeader>
           <SheetTitle></SheetTitle>
         </SheetHeader>
@@ -43,15 +45,15 @@ const CertificateDetail = ({ open, onOpenChange, certificate }: WorkflowLogDetai
                 handleDownloadClick();
               }}
             >
-              下载证书
+              {t("certificate.action.download")}
             </Button>
           </div>
           <div className="flex flex-col space-y-3">
-            <Label>证书</Label>
+            <Label>{t("certificate.props.certificate")}</Label>
             <Textarea value={certificate?.certificate} rows={10} readOnly={true} />
           </div>
           <div className="flex flex-col space-y-3">
-            <Label>密钥</Label>
+            <Label>{t("certificate.props.private.key")}</Label>
             <Textarea value={certificate?.privateKey} rows={10} readOnly={true} />
           </div>
         </div>

ui/src/components/certificate/CertificateList.tsx

@@ -6,7 +6,8 @@ import { diffDays, getLeftDays } from "@/lib/time";
 import { list } from "@/repository/certificate";
 import { ColumnDef } from "@tanstack/react-table";
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 type CertificateListProps = {
   withPagination?: boolean;
@@ -18,8 +19,13 @@ const CertificateList = ({ withPagination }: CertificateListProps) => {
   const [open, setOpen] = useState(false);
   const [selectedCertificate, setSelectedCertificate] = useState<CertificateType>();
 
+  const { t } = useTranslation();
+
+  const [searchParams] = useSearchParams();
+
   const fetchData = async (page: number, pageSize?: number) => {
-    const resp = await list({ page: page, perPage: pageSize });
+    const state = searchParams.get("state");
+    const resp = await list({ page: page, perPage: pageSize, state: state ?? "" });
     setData(resp.items);
     setPageCount(resp.totalPages);
   };
@@ -29,7 +35,7 @@ const CertificateList = ({ withPagination }: CertificateListProps) => {
   const columns: ColumnDef<CertificateType>[] = [
     {
       accessorKey: "san",
-      header: "域名",
+      header: t("certificate.props.domain"),
       cell: ({ row }) => {
         let san: string = row.getValue("san");
         if (!san) {
@@ -51,7 +57,7 @@ const CertificateList = ({ withPagination }: CertificateListProps) => {
     },
     {
       accessorKey: "expireAt",
-      header: "有效期限",
+      header: t("certificate.props.expiry"),
       cell: ({ row }) => {
         const expireAt: string = row.getValue("expireAt");
         const data = row.original;
@@ -61,20 +67,22 @@ const CertificateList = ({ withPagination }: CertificateListProps) => {
           <div className="">
             {leftDays > 0 ? (
               <div className="text-green-500">
-                {leftDays} / {allDays} 天
+                {leftDays} / {allDays} {t("certificate.props.expiry.days")}
               </div>
             ) : (
-              <div className="text-red-500">已到期</div>
+              <div className="text-red-500">{t("certificate.props.expiry.expired")}</div>
             )}
 
-            <div>{new Date(expireAt).toLocaleString().split(" ")[0]} 到期</div>
+            <div>
+              {new Date(expireAt).toLocaleString().split(" ")[0]} {t("certificate.props.expiry.text.expire")}
+            </div>
           </div>
         );
       },
     },
     {
       accessorKey: "workflow",
-      header: "所属工作流",
+      header: t("certificate.props.workflow"),
       cell: ({ row }) => {
         const name = row.original.expand.workflow?.name;
         const workflowId: string = row.getValue("workflow");
@@ -95,7 +103,7 @@ const CertificateList = ({ withPagination }: CertificateListProps) => {
     },
     {
       accessorKey: "created",
-      header: "颁发时间",
+      header: t("certificate.props.created"),
       cell: ({ row }) => {
         const date: string = row.getValue("created");
         return new Date(date).toLocaleString();
@@ -113,7 +121,7 @@ const CertificateList = ({ withPagination }: CertificateListProps) => {
                 handleView(row.original.id);
               }}
             >
-              查看证书
+              {t("certificate.action.view")}
             </Button>
           </div>
         );
@@ -140,15 +148,16 @@ const CertificateList = ({ withPagination }: CertificateListProps) => {
         pageCount={pageCount}
         withPagination={withPagination}
         fallback={
-          <div className="flex flex-col">
-            <div className="text-muted-foreground">暂无证书，添加工作流去生成证书吧😀</div>
+          <div className="flex flex-col items-center">
+            <div className="text-muted-foreground">{t("certificate.nodata")}</div>
             <Button
               size={"sm"}
+              className="w-[120px] mt-3"
               onClick={() => {
                 navigate("/workflow/detail");
               }}
             >
-              添加工作流
+              {t("workflow.action.create")}
             </Button>
           </div>
         }