perf: confirm ux (#4843)

* perf: delete tip ux

* perf: confirm ux

projects/app/src/components/common/folder/SlideCard.tsx

@@ -5,14 +5,13 @@ import { FolderIcon } from '@fastgpt/global/common/file/image/constants';
 import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 import MyDivider from '@fastgpt/web/components/common/MyDivider';
 import { useTranslation } from 'next-i18next';
-import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
-import { type PermissionValueType } from '@fastgpt/global/support/permission/type';
 import CollaboratorContextProvider, {
   type MemberManagerInputPropsType
 } from '../../support/permission/MemberManager/context';
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import ResumeInherit from '@/components/support/permission/ResumeInheritText';
+import PopoverConfirm from '@fastgpt/web/components/common/MyPopover/PopoverConfirm';
 
 const FolderSlideCard = ({
   refreshDeps,
@@ -47,11 +46,6 @@ const FolderSlideCard = ({
   const { t } = useTranslation();
   const { feConfigs } = useSystemStore();
 
-  const { ConfirmModal, openConfirm } = useConfirm({
-    type: 'delete',
-    content: deleteTip
-  });
-
   return (
     <Box w={'13rem'}>
       <Box>
@@ -93,22 +87,26 @@ const FolderSlideCard = ({
               {t('common:Move')}
             </Button>
             {managePer.permission.isOwner && (
-              <Button
-                variant={'transparentDanger'}
-                pl={1}
-                leftIcon={<MyIcon name={'delete'} w={'1rem'} />}
-                transform={'none !important'}
-                w={'100%'}
-                justifyContent={'flex-start'}
-                size={'sm'}
-                fontSize={'mini'}
-                mt={3}
-                onClick={() => {
-                  openConfirm(onDelete)();
-                }}
-              >
-                {t('common:delete_folder')}
-              </Button>
+              <PopoverConfirm
+                Trigger={
+                  <Button
+                    variant={'transparentDanger'}
+                    pl={1}
+                    leftIcon={<MyIcon name={'delete'} w={'1rem'} />}
+                    transform={'none !important'}
+                    w={'100%'}
+                    justifyContent={'flex-start'}
+                    size={'sm'}
+                    fontSize={'mini'}
+                    mt={3}
+                  >
+                    {t('common:delete_folder')}
+                  </Button>
+                }
+                type="delete"
+                content={deleteTip}
+                onConfirm={onDelete}
+              />
             )}
           </Box>
         </>
@@ -177,8 +175,6 @@ const FolderSlideCard = ({
           </Box>
         </>
       )}
-
-      <ConfirmModal />
     </Box>
   );
 };

projects/app/src/components/core/app/InputGuideConfig.tsx

@@ -37,7 +37,7 @@ import HighlightText from '@fastgpt/web/components/common/String/HighlightText';
 import { defaultChatInputGuideConfig } from '@fastgpt/global/core/app/constants';
 import ChatFunctionTip from './Tip';
 import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
-import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
+import PopoverConfirm from '@fastgpt/web/components/common/MyPopover/PopoverConfirm';
 
 const csvTemplate = `"第一列内容"
 "只会将第一列内容导入，其余列会被忽略"
@@ -191,10 +191,6 @@ const LexiconConfigModal = ({ appId, onClose }: { appId: string; onClose: () =>
 
   const [searchKey, setSearchKey] = useState('');
 
-  const { openConfirm: openConfirmDel, ConfirmModal: DelConfirmModal } = useConfirm({
-    type: 'delete'
-  });
-
   const {
     scrollDataList,
     setData,
@@ -355,24 +351,26 @@ const LexiconConfigModal = ({ appId, onClose }: { appId: string; onClose: () =>
             >
               {t('common:Delete')}
             </Button>
-            <Button
-              variant={'whiteBase'}
-              display={selectedRows.length !== 0 ? 'none' : 'flex'}
-              size={'sm'}
-              leftIcon={<MyIcon name={'delete'} boxSize={4} />}
-              onClick={() =>
-                openConfirmDel(
-                  () => {
-                    onDeleteAllData();
-                    setSelectedRows([]);
-                  },
-                  undefined,
-                  t('chat:delete_all_input_guide_confirm')
-                )()
+
+            <PopoverConfirm
+              Trigger={
+                <Button
+                  variant={'whiteBase'}
+                  display={selectedRows.length !== 0 ? 'none' : 'flex'}
+                  size={'sm'}
+                  leftIcon={<MyIcon name={'delete'} boxSize={4} />}
+                >
+                  {t('chat:Delete_all')}
+                </Button>
               }
-            >
-              {t('chat:Delete_all')}
-            </Button>
+              type="delete"
+              content={t('chat:delete_all_input_guide_confirm')}
+              onConfirm={() => {
+                onDeleteAllData();
+                setSelectedRows([]);
+              }}
+            />
+
             <Button
               display={selectedRows.length !== 0 ? 'none' : 'flex'}
               onClick={() => {
@@ -504,7 +502,6 @@ const LexiconConfigModal = ({ appId, onClose }: { appId: string; onClose: () =>
         })}
       </ScrollList>
 
-      <DelConfirmModal />
       <File onSelect={onSelectFile} />
     </MyModal>
   );