@@ -5,7 +5,6 @@ import { useConfirm, useToastContext } from "~/Providers";
55import { NotificationSeverity } from "~/common" ;
66import {
77 Sheet ,
8- SheetClose ,
98 SheetContent ,
109 SheetHeader ,
1110 SheetTitle ,
@@ -201,47 +200,48 @@ export function CreateChannelDrawer({
201200 < SheetContent
202201 side = "right"
203202 hideClose
204- className = "w-full max-w-[900px] sm:max-w-[1000px] overflow-hidden bg-white pl-20 pr-20 flex flex-col"
203+ className = "w-full max-w-[900px] sm:max-w-[1000px] overflow-y-auto scroll-on-scroll bg-white pl-20 pr-20 flex flex-col"
204+ onScroll = { handleBodyScroll }
205+ data-scrolling = { isBodyScrolling ? "true" : "false" }
205206 >
206- < SheetClose className = "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 z-20 rounded-xs opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none" >
207+ < button
208+ type = "button"
209+ onClick = { ( ) => handleClose ( false ) }
210+ className = "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary fixed top-4 right-4 z-[60] rounded-xs opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none"
211+ >
207212 < XIcon className = "size-4" />
208213 < span className = "sr-only" > Close</ span >
209- </ SheetClose >
210- < div
211- className = "min-h-0 flex-1 overflow-y-auto scroll-on-scroll"
212- onScroll = { handleBodyScroll }
213- data-scrolling = { isBodyScrolling ? "true" : "false" }
214- >
215- < SheetHeader className = "sticky top-0 z-10 ml-6 mr-6 pt-6 pb-4 border-b border-[#E5E6EB] bg-white" >
216- < SheetTitle className = "text-[16px] -ml-4 font-medium text-[#1D2129]" >
217- { isEditMode ? localize ( "com_subscription.channel_settings" ) : localize ( "com_subscription.create_channel" ) }
218- </ SheetTitle >
219- </ SheetHeader >
214+ </ button >
215+ < SheetHeader className = "sticky top-0 z-10 ml-6 mr-6 pt-6 pb-4 border-b border-[#E5E6EB] bg-white" >
216+ < SheetTitle className = "text-[16px] -ml-4 font-medium text-[#1D2129]" >
217+ { isEditMode ? localize ( "com_subscription.channel_settings" ) : localize ( "com_subscription.create_channel" ) }
218+ </ SheetTitle >
219+ </ SheetHeader >
220220
221- { form . showSuccess && ! isEditMode ? (
222- < CreateChannelSuccessContent
223- onViewChannel = { ( ) => {
224- if ( form . createdChannelId ) {
225- onViewChannel ?.( form . createdChannelId ) ;
226- }
227- form . resetForm ( ) ;
228- } }
229- onManageMembers = { ( ) => {
230- if ( form . createdChannelId ) {
231- onManageMembers ?.( form . createdChannelId ) ;
232- onViewChannel ?.( form . createdChannelId ) ;
221+ { form . showSuccess && ! isEditMode ? (
222+ < CreateChannelSuccessContent
223+ onViewChannel = { ( ) => {
224+ if ( form . createdChannelId ) {
225+ onViewChannel ?.( form . createdChannelId ) ;
226+ }
227+ form . resetForm ( ) ;
228+ } }
229+ onManageMembers = { ( ) => {
230+ if ( form . createdChannelId ) {
231+ onManageMembers ?.( form . createdChannelId ) ;
232+ onViewChannel ?.( form . createdChannelId ) ;
233233
234- }
235- form . resetForm ( ) ;
236- onOpenChange ( false ) ;
237- } }
238- />
239- ) : (
240- < div
241- className = { cn (
242- "overflow-visible px-6 py-5 space-y-5"
243- ) }
244- >
234+ }
235+ form . resetForm ( ) ;
236+ onOpenChange ( false ) ;
237+ } }
238+ />
239+ ) : (
240+ < div
241+ className = { cn (
242+ "overflow-visible px-6 py-5 space-y-5"
243+ ) }
244+ >
245245 { /* 添加信息源 */ }
246246 < div className = "space-y-2" >
247247 < Label className = "text-[14px] text-[#1D2129]" >
@@ -605,83 +605,82 @@ export function CreateChannelDrawer({
605605 </ div >
606606 ) }
607607 </ div >
608- </ div >
609- ) }
608+ </ div >
609+ ) }
610610
611- { /* 底部操作按钮 */ }
612- { ( ! form . showSuccess || isEditMode ) && (
613- < div className = "sticky bottom-0 z-10 mt-auto flex justify-end gap-3 px-6 pt-10 pb-5 border-t border-[#E5E6EB] bg-white" >
614- < Button
615- variant = "secondary"
616- onClick = { ( ) => handleClose ( false ) }
617- className = "h-8 rounded-[6px] px-4 inline-flex items-center justify-center leading-none bg-[#F2F3F5] hover:bg-[#E5E6EB] border-none text-[14px] !font-normal text-[#4E5969]"
618- >
619- { localize ( "cancel" ) }
620- </ Button >
621- < Button
622- disabled = { form . submitting }
623- onClick = { async ( ) => {
624- const data : CreateChannelFormData = {
625- sources : form . sources ,
626- channelName : form . channelName . trim ( ) ,
627- channelDesc : form . channelDesc . trim ( ) ,
628- visibility : form . visibility ,
629- publishToSquare : form . publishToSquare ,
630- contentFilter : form . contentFilter ,
631- filterGroups : form . filterGroups ,
632- topFilterRelation : form . topFilterRelation ,
633- createSubChannel : form . createSubChannel ,
634- subChannels : form . subChannels
635- } ;
611+ { /* 底部操作按钮 */ }
612+ { ( ! form . showSuccess || isEditMode ) && (
613+ < div className = "sticky bottom-0 z-10 mt-auto flex justify-end gap-3 px-6 pt-10 pb-5 border-t border-[#E5E6EB] bg-white" >
614+ < Button
615+ variant = "secondary"
616+ onClick = { ( ) => handleClose ( false ) }
617+ className = "h-8 rounded-[6px] px-4 inline-flex items-center justify-center leading-none bg-[#F2F3F5] hover:bg-[#E5E6EB] border-none text-[14px] !font-normal text-[#4E5969]"
618+ >
619+ { localize ( "cancel" ) }
620+ </ Button >
621+ < Button
622+ disabled = { form . submitting }
623+ onClick = { async ( ) => {
624+ const data : CreateChannelFormData = {
625+ sources : form . sources ,
626+ channelName : form . channelName . trim ( ) ,
627+ channelDesc : form . channelDesc . trim ( ) ,
628+ visibility : form . visibility ,
629+ publishToSquare : form . publishToSquare ,
630+ contentFilter : form . contentFilter ,
631+ filterGroups : form . filterGroups ,
632+ topFilterRelation : form . topFilterRelation ,
633+ createSubChannel : form . createSubChannel ,
634+ subChannels : form . subChannels
635+ } ;
636636
637- // 创建和编辑统一走同一套校验逻辑:
638- // 1) 至少 1 个信息源
639- // 2) 频道名称不能为空
640- // 3) 主频道 / 子频道筛选条件中的关键词不能为空
641- const validationError = validateCreateChannelForm ( data , localize ) ;
642- if ( validationError ) {
643- showToast ( {
644- message : validationError ,
645- severity : NotificationSeverity . WARNING
646- } ) ;
647- return ;
648- }
637+ // 创建和编辑统一走同一套校验逻辑:
638+ // 1) 至少 1 个信息源
639+ // 2) 频道名称不能为空
640+ // 3) 主频道 / 子频道筛选条件中的关键词不能为空
641+ const validationError = validateCreateChannelForm ( data , localize ) ;
642+ if ( validationError ) {
643+ showToast ( {
644+ message : validationError ,
645+ severity : NotificationSeverity . WARNING
646+ } ) ;
647+ return ;
648+ }
649649
650- if ( ! onConfirm ) return ;
651- try {
652- form . setSubmitting ( true ) ;
653- const res = await onConfirm ( data ) ;
654- if ( ! isEditMode ) {
655- form . setCreatedChannelId ( res . channelId ) ;
656- form . setShowSuccess ( true ) ;
657- } else {
658- showToast ( {
659- message : localize ( "com_subscription.save_success" ) ,
660- severity : NotificationSeverity . SUCCESS
661- } ) ;
662- form . resetForm ( ) ;
663- onOpenChange ( false ) ;
664- }
665- } catch {
650+ if ( ! onConfirm ) return ;
651+ try {
652+ form . setSubmitting ( true ) ;
653+ const res = await onConfirm ( data ) ;
654+ if ( ! isEditMode ) {
655+ form . setCreatedChannelId ( res . channelId ) ;
656+ form . setShowSuccess ( true ) ;
657+ } else {
666658 showToast ( {
667- message : localize ( "channel_create_failed" ) || localize ( " com_subscription.create_channel_failed_retry ") ,
668- severity : NotificationSeverity . ERROR
659+ message : localize ( "com_subscription.save_success " ) ,
660+ severity : NotificationSeverity . SUCCESS
669661 } ) ;
670- } finally {
671- form . setSubmitting ( false ) ;
662+ form . resetForm ( ) ;
663+ onOpenChange ( false ) ;
672664 }
673- } }
674- className = "h-8 rounded-[6px] px-4 inline-flex items-center justify-center leading-none bg-[#165DFF] hover:bg-[#4080FF] text-white border-none text-[14px] !font-normal disabled:opacity-50"
675- >
676- { isEditMode
677- ? form . submitting ? localize ( "com_subscription.saving" ) : localize ( "com_subscription.save" )
678- : form . submitting
679- ? ( localize ( "creating" ) || localize ( "com_subscription.creating" ) )
680- : ( localize ( "com_subscription.confirm_creation" ) || localize ( "com_subscription.confirm_create" ) ) }
681- </ Button >
682- </ div >
683- ) }
684- </ div >
665+ } catch {
666+ showToast ( {
667+ message : localize ( "channel_create_failed" ) || localize ( "com_subscription.create_channel_failed_retry" ) ,
668+ severity : NotificationSeverity . ERROR
669+ } ) ;
670+ } finally {
671+ form . setSubmitting ( false ) ;
672+ }
673+ } }
674+ className = "h-8 rounded-[6px] px-4 inline-flex items-center justify-center leading-none bg-[#165DFF] hover:bg-[#4080FF] text-white border-none text-[14px] !font-normal disabled:opacity-50"
675+ >
676+ { isEditMode
677+ ? form . submitting ? localize ( "com_subscription.saving" ) : localize ( "com_subscription.save" )
678+ : form . submitting
679+ ? ( localize ( "creating" ) || localize ( "com_subscription.creating" ) )
680+ : ( localize ( "com_subscription.confirm_creation" ) || localize ( "com_subscription.confirm_create" ) ) }
681+ </ Button >
682+ </ div >
683+ ) }
685684 </ SheetContent >
686685 </ Sheet >
687686
0 commit comments