feat(ui): new AccessEditForm using antd

ui/src/components/certificate/CertificateDetail.tsx

@@ -7,7 +7,7 @@ import dayjs from "dayjs";
 import { type CertificateModel } from "@/domain/certificate";
 import { saveFiles2Zip } from "@/utils/file";
 
-type CertificateDetailProps = {
+export type CertificateDetailProps = {
   className?: string;
   style?: React.CSSProperties;
   data: CertificateModel;

ui/src/components/certificate/CertificateDetailDrawer.tsx

@@ -1,30 +1,26 @@
-import { cloneElement, useEffect, useMemo, useState } from "react";
+import { cloneElement, useMemo } from "react";
 import { useControllableValue } from "ahooks";
 import { Drawer } from "antd";
 
 import { type CertificateModel } from "@/domain/certificate";
 import CertificateDetail from "./CertificateDetail";
 
-type CertificateDetailDrawerProps = {
+export type CertificateDetailDrawerProps = {
   data?: CertificateModel;
+  loading?: boolean;
   open?: boolean;
   trigger?: React.ReactElement;
   onOpenChange?: (open: boolean) => void;
 };
 
-const CertificateDetailDrawer = ({ data, trigger, ...props }: CertificateDetailDrawerProps) => {
+const CertificateDetailDrawer = ({ data, loading, trigger, ...props }: CertificateDetailDrawerProps) => {
   const [open, setOpen] = useControllableValue<boolean>(props, {
     valuePropName: "open",
     defaultValuePropName: "defaultOpen",
     trigger: "onOpenChange",
   });
 
-  const [loading, setLoading] = useState(true);
-  useEffect(() => {
-    setLoading(data == null);
-  }, [data]);
-
-  const triggerDom = useMemo(() => {
+  const triggerEl = useMemo(() => {
     if (!trigger) {
       return null;
     }
@@ -40,7 +36,7 @@ const CertificateDetailDrawer = ({ data, trigger, ...props }: CertificateDetailD
 
   return (
     <>
-      {triggerDom}
+      {triggerEl}
 
       <Drawer closable destroyOnClose open={open} loading={loading} placement="right" width={480} onClose={() => setOpen(false)}>
         {data ? <CertificateDetail data={data} /> : <></>}