gitea/FastGPT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: confirm ux (#4843)

Browse Source 
* perf: delete tip ux

* perf: confirm ux
This commit is contained in:
Archer
2025-05-20 13:41:56 +08:00
committed by GitHub
parent 1dac2b70ec
commit d44c338059
18 changed files with 309 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
projects/app/src/pageComponents/account/model/ModelConfigTable.tsx
View File

@@ -41,7 +41,6 @@ import {
} from '@/web/core/ai/config';
import MyBox from '@fastgpt/web/components/common/MyBox';
import { type SystemModelItemType } from '@fastgpt/service/core/ai/type';
import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
import MyIconButton from '@fastgpt/web/components/common/Icon/button';
import JsonEditor from '@fastgpt/web/components/common/Textarea/JsonEditor';
import { clientInitData } from '@/web/common/system/staticData';
@@ -54,6 +53,7 @@ import MyIcon from '@fastgpt/web/components/common/Icon';
import AIModelSelector from '@/components/Select/AIModelSelector';
import MyDivider from '@fastgpt/web/components/common/MyDivider';
import { AddModelButton } from './AddModelBox';
import PopoverConfirm from '@fastgpt/web/components/common/MyPopover/PopoverConfirm';
const MyModal = dynamic(() => import('@fastgpt/web/components/common/MyModal'));
const ModelEditModal = dynamic(() => import('./AddModelBox').then((mod) => mod.ModelEditModal));
@@ -260,10 +260,6 @@ const ModelTable = ({ Tab }: { Tab: React.ReactNode }) => {
onSuccess: refreshModels
});
const { ConfirmModal, openConfirm } = useConfirm({
type: 'delete',
content: t('account:model.delete_model_confirm')
});
const { runAsync: deleteModel } = useRequest2(deleteSystemModel, {
onSuccess: refreshModels
});
@@ -459,10 +455,15 @@ const ModelTable = ({ Tab }: { Tab: React.ReactNode }) => {
onClick={() => onEditModel(item.model)}
/>
{item.isCustom && (
<MyIconButton
icon={'delete'}
hoverColor={'red.500'}
onClick={() => openConfirm(() => deleteModel({ model: item.model }))()}
<PopoverConfirm
Trigger={
<Box>
<MyIconButton icon={'delete'} hoverColor={'red.500'} />
</Box>
}
type="delete"
content={t('account:model.delete_model_confirm')}
onConfirm={() => deleteModel({ model: item.model })}
/>
)}
</HStack>
@@ -475,7 +476,6 @@ const ModelTable = ({ Tab }: { Tab: React.ReactNode }) => {
</Flex>
</MyBox>
<ConfirmModal />
{!!editModelData && (
<ModelEditModal
modelData={editModelData}
@@ -510,9 +510,6 @@ const JsonConfigModal = ({
}
});
const { openConfirm, ConfirmModal } = useConfirm({
content: t('account:model.json_config_confirm')
});
const { runAsync } = useRequest2(putUpdateWithJson, {
onSuccess: () => {
onSuccess();
@@ -542,18 +539,14 @@ const JsonConfigModal = ({
<Button variant={'whiteBase'} mr={4} onClick={onClose}>
{t('common:Cancel')}
</Button>
<Button
onClick={() =>
openConfirm(() => {
return runAsync({ config: data });
})()
}
>
{t('common:Confirm')}
</Button>
</ModalFooter>
<ConfirmModal />
<PopoverConfirm
Trigger={<Button>{t('common:Confirm')}</Button>}
type="info"
content={t('account:model.json_config_confirm')}
onConfirm={() => runAsync({ config: data })}
/>
</ModalFooter>
</MyModal>
);
};

132
projects/app/src/pageComponents/account/team/MemberTable.tsx
View File

@@ -16,7 +16,6 @@ import {
} from '@chakra-ui/react';
import { useTranslation } from 'next-i18next';
import { useUserStore } from '@/web/support/user/useUserStore';
import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
import {
delRemoveMember,
getTeamMembers,
@@ -50,6 +49,8 @@ import { type PaginationResponse } from '@fastgpt/web/common/fetch/type';
import _ from 'lodash';
import MySelect from '@fastgpt/web/components/common/MySelect';
import { useEditTitle } from '@/web/common/hooks/useEditTitle';
import PopoverConfirm from '@fastgpt/web/components/common/MyPopover/PopoverConfirm';
import MyIconButton from '@fastgpt/web/components/common/Icon/button';
const InviteModal = dynamic(() => import('./Invite/InviteModal'));
const TeamTagModal = dynamic(() => import('@/components/support/user/team/TeamTagModal'));
@@ -121,9 +122,6 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
errorToast: t('account_team:sync_member_failed')
});
const { ConfirmModal: ConfirmLeaveTeamModal, openConfirm: openLeaveConfirm } = useConfirm({
content: t('account_team:confirm_leave_team')
});
const { runAsync: onLeaveTeam } = useRequest2(delLeaveTeam, {
onSuccess() {
const defaultTeam = myTeams[0];
@@ -132,19 +130,10 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
errorToast: t('account_team:user_team_leave_team_failed')
});
const { ConfirmModal: ConfirmRemoveMemberModal, openConfirm: openRemoveMember } = useConfirm({
type: 'delete'
});
const { runAsync: onRemoveMember } = useRequest2(delRemoveMember, {
onSuccess: onRefreshMembers
});
const { ConfirmModal: ConfirmRestoreMemberModal, openConfirm: openRestoreMember } = useConfirm({
type: 'common',
title: t('account_team:restore_tip_title'),
iconSrc: 'common/confirm/restoreTip',
iconColor: 'primary.500'
});
const { runAsync: onRestore } = useRequest2(postRestoreMember, {
onSuccess: onRefreshMembers,
successToast: t('common:Success'),
@@ -247,16 +236,22 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
</Button>
)}
{!userInfo?.team.permission.isOwner && (
<Button
variant={'whitePrimary'}
size="md"
borderRadius={'md'}
ml={3}
leftIcon={<MyIcon name={'support/account/loginoutLight'} w={'14px'} />}
onClick={() => openLeaveConfirm(onLeaveTeam)()}
>
{t('account_team:user_team_leave_team')}
</Button>
<PopoverConfirm
Trigger={
<Button
variant={'whitePrimary'}
size="md"
borderRadius={'md'}
ml={3}
leftIcon={<MyIcon name={'support/account/loginoutLight'} w={'14px'} />}
>
{t('account_team:user_team_leave_team')}
</Button>
}
type="delete"
content={t('account_team:confirm_leave_team')}
onConfirm={() => onLeaveTeam()}
/>
)}
</HStack>
</Flex>
@@ -317,62 +312,48 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
member.role !== TeamMemberRoleEnum.owner &&
member.tmbId !== userInfo?.team.tmbId &&
(member.status === TeamMemberStatusEnum.active ? (
<>
<Icon
mr={2}
name={'edit'}
cursor={'pointer'}
w="1rem"
p="1"
borderRadius="sm"
_hover={{
color: 'blue.600',
bgColor: 'myGray.100'
}}
<HStack>
<MyIconButton
icon={'edit'}
size="1rem"
hoverColor={'blue.500'}
onClick={() => handleEditMemberName(member.tmbId, member.memberName)}
/>
<Icon
name={'common/trash'}
cursor={'pointer'}
w="1rem"
p="1"
borderRadius="sm"
_hover={{
color: 'red.600',
bgColor: 'myGray.100'
}}
onClick={() => {
openRemoveMember(
() => onRemoveMember(member.tmbId),
undefined,
t('account_team:remove_tip', {
username: member.memberName
})
)();
}}
<PopoverConfirm
Trigger={
<Box>
<MyIconButton
icon={'common/trash'}
hoverColor={'red.500'}
hoverBg="red.50"
size={'1rem'}
/>
</Box>
}
type="delete"
content={t('account_team:remove_tip', {
username: member.memberName
})}
onConfirm={() => onRemoveMember(member.tmbId)}
/>
</>
</HStack>
) : (
member.status === TeamMemberStatusEnum.forbidden && (
<Icon
name={'common/confirm/restoreTip'}
cursor={'pointer'}
w="1rem"
p="1"
borderRadius="sm"
_hover={{
color: 'primary.500',
bgColor: 'myGray.100'
}}
onClick={() => {
openRestoreMember(
() => onRestore(member.tmbId),
undefined,
t('account_team:restore_tip', {
username: member.memberName
})
)();
}}
<PopoverConfirm
Trigger={
<Box display={'inline-block'}>
<MyIconButton
icon={'common/confirm/restoreTip'}
size={'1rem'}
hoverColor={'primary.500'}
/>
</Box>
}
type="info"
content={t('account_team:restore_tip', {
username: member.memberName
})}
onConfirm={() => onRestore(member.tmbId)}
/>
)
))}
@@ -381,14 +362,11 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
))}
</Tbody>
</Table>
<ConfirmRemoveMemberModal />
<ConfirmRestoreMemberModal />
<EditMemberNameModal />
</TableContainer>
</MemberScrollData>
</MyBox>
<ConfirmLeaveTeamModal />
{isOpenInvite && userInfo?.team?.teamId && <InviteModal onClose={onCloseInvite} />}
{isOpenTeamTagsAsync && <TeamTagModal onClose={onCloseTeamTagsAsync} />}
</>

3
projects/app/src/pageComponents/account/team/OrgManage/IconButton.tsx
View File

@@ -5,7 +5,6 @@ import type { IconNameType } from '@fastgpt/web/components/common/Icon/type';
function IconButton({
name,
w = '1rem',
h = '1rem',
...props
}: {
name: IconNameType;
@@ -14,7 +13,7 @@ function IconButton({
<MyIcon
name={name}
w={w}
h={h}
h={w}
transition={'background 0.1s'}
cursor={'pointer'}
p="1"