diff --git a/client/shared/i18n/langs/en-US/translation.json b/client/shared/i18n/langs/en-US/translation.json index 06c086bd..dd0af815 100644 --- a/client/shared/i18n/langs/en-US/translation.json +++ b/client/shared/i18n/langs/en-US/translation.json @@ -44,6 +44,7 @@ "k250e392c": "System is busy, please try again later", "k263bff41": "Edit invite link", "k267cc491": "Me", + "k29498d11": "Can be used <2>{{num}} times", "k2a1422d2": "Configuration", "k2a8031e": "Homepage", "k2b411a11": "Component can only work in the group panel", diff --git a/client/shared/i18n/langs/zh-CN/translation.json b/client/shared/i18n/langs/zh-CN/translation.json index 7ed478d1..4e124aea 100644 --- a/client/shared/i18n/langs/zh-CN/translation.json +++ b/client/shared/i18n/langs/zh-CN/translation.json @@ -44,6 +44,7 @@ "k250e392c": "系统忙, 请稍后再试", "k263bff41": "编辑邀请链接", "k267cc491": "我", + "k29498d11": "可使用 <2>{{num}} 次", "k2a1422d2": "配置", "k2a8031e": "个人主页", "k2b411a11": "组件只能在群组面板中才能正常显示", diff --git a/client/web/src/components/InviteCodeExpiredAt.tsx b/client/web/src/components/InviteCodeExpiredAt.tsx index ee786e07..3934aee7 100644 --- a/client/web/src/components/InviteCodeExpiredAt.tsx +++ b/client/web/src/components/InviteCodeExpiredAt.tsx @@ -1,4 +1,4 @@ -import { Tooltip } from 'antd'; +import { Divider, Tooltip } from 'antd'; import React from 'react'; import { datetimeFromNow, @@ -9,30 +9,46 @@ import { } from 'tailchat-shared'; interface InviteCodeExpiredAtProps { - invite: Pick; + invite: Pick; } export const InviteCodeExpiredAt: React.FC = React.memo((props) => { const { invite } = props; - if (!invite.expiredAt) { - return {t('该邀请码永不过期')}; - } - - if (new Date(invite.expiredAt).valueOf() < Date.now()) { + if (invite.expiredAt && new Date(invite.expiredAt).valueOf() < Date.now()) { return {t('该邀请码已过期')}; } return ( - - 该邀请将于{' '} - - - {{ date: datetimeFromNow(invite.expiredAt) } as any} - - {' '} - 过期 - + <> + {!invite.expiredAt ? ( + {t('该邀请码永不过期')} + ) : ( + + 该邀请将于{' '} + + + {{ date: datetimeFromNow(invite.expiredAt) } as any} + + {' '} + 过期 + + )} + + {invite.usageLimit && ( + <> + + + + 可使用{' '} + + {{ num: invite.usageLimit } as any} + {' '} + 次 + + + )} + ); }); InviteCodeExpiredAt.displayName = 'InviteCodeExpiredAt'; diff --git a/client/web/src/components/modals/CreateGroupInvite/CreateInviteCode.tsx b/client/web/src/components/modals/CreateGroupInvite/CreateInviteCode.tsx index a716b3c3..e375033d 100644 --- a/client/web/src/components/modals/CreateGroupInvite/CreateInviteCode.tsx +++ b/client/web/src/components/modals/CreateGroupInvite/CreateInviteCode.tsx @@ -51,8 +51,18 @@ export const CreateInviteCode: React.FC = React.memo( { + onEditSuccess={({ expiredAt, usageLimit }) => { showToasts(t('邀请设置修改成功'), 'success'); + setCreateInvite( + (state) => + ({ + ...state, + expiredAt: expiredAt + ? new Date(expiredAt).toISOString() + : undefined, + usageLimit: usageLimit, + } as any) + ); closeModal(key); }} /> diff --git a/client/web/src/components/modals/EditGroupInvite/index.tsx b/client/web/src/components/modals/EditGroupInvite/index.tsx index fdf23610..108c78be 100644 --- a/client/web/src/components/modals/EditGroupInvite/index.tsx +++ b/client/web/src/components/modals/EditGroupInvite/index.tsx @@ -90,21 +90,30 @@ const fields: MetaFormFieldMeta[] = [ interface EditGroupInviteProps { groupId: string; code: string; - onEditSuccess: () => void; + onEditSuccess: (info: { + expiredAt: number | undefined; + usageLimit: number | undefined; + }) => void; } export const EditGroupInvite: React.FC = React.memo( (props) => { const handleEditGroupInvite = useEvent(async (values: MetaFormValues) => { + const expiredAt = + values.expiredAt === -1 + ? undefined + : Date.now() + values.expiredAt * 1000; + + const usageLimit = + values.usageLimit === -1 ? undefined : values.usageLimit; + await model.group.editGroupInvite( props.groupId, props.code, - values.expiredAt === -1 - ? undefined - : Date.now() + values.expiredAt * 1000, - values.usageLimit === -1 ? undefined : values.usageLimit + expiredAt, + usageLimit ); - props.onEditSuccess(); + props.onEditSuccess({ expiredAt, usageLimit }); }); return (