update

src/pages/app/edit/AppVersionList.tsx

@@ -8,7 +8,6 @@ import FileOutlined from '@ant-design/icons/FileOutlined';
 import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import LinkOutlined from '@ant-design/icons/LinkOutlined';
 import PlusOutlined from '@ant-design/icons/PlusOutlined';
-import { useModal } from '@kevisual/components/modal/Confirm.tsx';
 import { Tooltip } from '@mui/material';
 import { isObjectNull } from '@/utils/is-null';
 import { FileUpload } from '../modules/FileUpload';
@@ -22,6 +21,7 @@ import { IconButton } from '@kevisual/components/button/index.tsx';
 import { useForm, Controller } from 'react-hook-form';
 import { TextField } from '@mui/material';
 import { pick } from 'lodash-es';
+import { useAppDeleteModalStore, AppDeleteModal } from '../modules/AppDeleteModal';
 
 const FormModal = () => {
   const { t } = useTranslation();
@@ -108,8 +108,14 @@ export const AppVersionList = () => {
       };
     }),
   );
+  const appDeleteModalStore = useAppDeleteModalStore(
+    useShallow((state) => {
+      return {
+        onClickDelete: state.onClickDelete,
+      };
+    }),
+  );
   const navigate = useNewNavigate();
-  const [modal, contextHolder] = useModal();
   const [isUpload, setIsUpload] = useState(false);
   useEffect(() => {
     // fetch app version list
@@ -178,13 +184,7 @@ export const AppVersionList = () => {
                         <Tooltip title='Delete'>
                           <Button
                             onClick={(e) => {
-                              modal.confirm({
-                                title: 'Delete',
-                                content: 'Are you sure delete this data?',
-                                onOk: () => {
-                                  versionStore.deleteData(item.id);
-                                },
-                              });
+                              appDeleteModalStore.onClickDelete('app-version', item);
                               e.stopPropagation();
                             }}>
                             <DeleteOutlined />
@@ -229,7 +229,6 @@ export const AppVersionList = () => {
           </div>
         </div>
       </div>
-      {contextHolder}
       <div className='shark h-full'>
         {isUpload && (
           <div className='bg-white p-2 w-[600px] h-full flex flex-col'>
@@ -249,6 +248,7 @@ export const AppVersionList = () => {
         )}
       </div>
       <FormModal />
+      <AppDeleteModal />
     </div>
   );
 };
@@ -268,8 +268,8 @@ export const AppVersionFile = () => {
   return (
     <>
       <div>version: {versionStore.formData.version}</div>
-      <div className='border rounded-md my-2 grow overflow-hidden'>
-        <div className='flex gap-2 items-center border-b py-2 px-2'>
+      <div className='border border-gray-200 rounded-md my-2 grow overflow-hidden'>
+        <div className='flex gap-2 items-center border-b border-b-gray-200 py-2 px-2'>
           Files
           <FileUpload />
         </div>
@@ -284,7 +284,7 @@ export const AppVersionFile = () => {
               const _path = file.path || '';
               const path = _path.replace(prefix, '');
               return (
-                <div className='flex gap-2 px-4 py-2 border-b' key={index}>
+                <div className='flex gap-2 px-4 py-2 border-b border-b-gray-200' key={index}>
                   {/* <div className='w-[100px] truncate'>{file.name}</div> */}
                   <div>
                     <FileOutlined />