@@ -333,10 +333,6 @@ export default function TunnelsPage() {
333333 const handleExportConfig = ( ) => {
334334 if ( ! selectedKeys || ( selectedKeys instanceof Set && selectedKeys . size === 0 ) ) return ;
335335
336- // 调试日志
337- console . log ( '导出配置 - selectedKeys:' , selectedKeys ) ;
338- console . log ( '导出配置 - filteredItems:' , filteredItems ) ;
339-
340336 // 计算要导出的隧道
341337 let selectedTunnels : Tunnel [ ] = [ ] ;
342338 if ( selectedKeys === "all" ) {
@@ -348,17 +344,13 @@ export default function TunnelsPage() {
348344 ) ;
349345 }
350346
351- console . log ( '导出配置 - selectedTunnels:' , selectedTunnels ) ;
352-
353347 // 转换为导出格式
354348 const exportData = selectedTunnels . map ( tunnel => ( {
355349 dest : `${ tunnel . targetAddress } :${ tunnel . targetPort } ` ,
356350 listen_port : parseInt ( tunnel . tunnelPort ) ,
357351 name : tunnel . name
358352 } ) ) ;
359353
360- console . log ( '导出配置 - exportData:' , exportData ) ;
361-
362354 // 格式化为您期望的样式,每个对象平铺一行
363355 const flattenedConfig = "[\n" + exportData . map ( item =>
364356 ` ${ JSON . stringify ( item ) } `
@@ -858,77 +850,69 @@ export default function TunnelsPage() {
858850
859851 { /* 桌面端:使用表格布局 */ }
860852 < div className = "hidden md:block" >
861- < Table
862- shadow = "none"
863- selectionMode = "multiple"
864- selectedKeys = { selectedKeys }
865- onSelectionChange = { setSelectedKeys }
866- aria-label = "实例实例表格"
867- className = "min-w-full"
868- classNames = { {
869- th : "text-xs md:text-sm" ,
870- td : "py-3"
871- } }
872- >
873- < TableHeader columns = { columns } >
874- { ( column ) => (
875- < TableColumn
876- key = { column . key }
877- hideHeader = { false }
878- className = { column . key === "actions" ? "w-[140px]" : "" }
879- >
880- { column . label }
881- </ TableColumn >
882- ) }
883- </ TableHeader >
884- < TableBody >
853+ { loading || error || items . length === 0 ? (
854+ < div className = "min-h-[400px] flex items-center justify-center py-16" >
885855 { loading ? (
886- < TableRow >
887- < TableCell colSpan = { 7 } className = "text-center py-16" >
888- < div className = "flex justify-center items-center" >
889- < div className = "flex flex-col items-center gap-4" >
890- < Spinner size = "lg" />
891- < p className = "text-default-500" > 加载中...</ p >
892- </ div >
893- </ div >
894- </ TableCell >
895- </ TableRow >
896- ) : items . length === 0 ? (
897- < TableRow >
898- < TableCell colSpan = { 7 } className = "text-center py-16" >
899- { error ? (
900- < div className = "flex flex-col items-center gap-4" >
901- < div className = "w-20 h-20 rounded-full bg-danger-50 flex items-center justify-center" >
902- < FontAwesomeIcon icon = { faRotateRight } className = "text-3xl text-danger" />
903- </ div >
904- < div className = "space-y-2" >
905- < p className = "text-danger text-base font-medium" > 加载失败</ p >
906- < p className = "text-default-400 text-sm" > { error } </ p >
907- </ div >
908- < Button
909- color = "danger"
910- variant = "flat"
911- startContent = { < FontAwesomeIcon icon = { faRotateRight } /> }
912- onClick = { fetchTunnels }
913- >
914- 重试
915- </ Button >
916- </ div >
917- ) : (
918- < div className = "flex flex-col items-center gap-4" >
919- < div className = "w-20 h-20 rounded-full bg-default-100 flex items-center justify-center" >
920- < FontAwesomeIcon icon = { faEye } className = "text-3xl text-default-400" />
921- </ div >
922- < div className = "space-y-2" >
923- < p className = "text-default-500 text-base font-medium" > 暂无实例</ p >
924- < p className = "text-default-400 text-sm" > 您还没有创建任何实例</ p >
925- </ div >
926- </ div >
927- ) }
928- </ TableCell >
929- </ TableRow >
856+ < div className = "flex flex-col items-center gap-4" >
857+ < Spinner size = "lg" />
858+ < p className = "text-default-500" > 加载中...</ p >
859+ </ div >
860+ ) : error ? (
861+ < div className = "flex flex-col items-center gap-4" >
862+ < div className = "w-20 h-20 rounded-full bg-danger-50 flex items-center justify-center" >
863+ < FontAwesomeIcon icon = { faRotateRight } className = "text-3xl text-danger" />
864+ </ div >
865+ < div className = "space-y-2" >
866+ < p className = "text-danger text-base font-medium" > 加载失败</ p >
867+ < p className = "text-default-400 text-sm" > { error } </ p >
868+ </ div >
869+ < Button
870+ color = "danger"
871+ variant = "flat"
872+ startContent = { < FontAwesomeIcon icon = { faRotateRight } /> }
873+ onClick = { fetchTunnels }
874+ >
875+ 重试
876+ </ Button >
877+ </ div >
930878 ) : (
931- items . map ( ( tunnel ) => (
879+ < div className = "flex flex-col items-center gap-4" >
880+ < div className = "w-20 h-20 rounded-full bg-default-100 flex items-center justify-center" >
881+ < FontAwesomeIcon icon = { faEye } className = "text-3xl text-default-400" />
882+ </ div >
883+ < div className = "space-y-2" >
884+ < p className = "text-default-500 text-base font-medium" > 暂无实例</ p >
885+ < p className = "text-default-400 text-sm" > 您还没有创建任何实例</ p >
886+ </ div >
887+ </ div >
888+ ) }
889+ </ div >
890+ ) : (
891+ < Table
892+ shadow = "none"
893+ selectionMode = "multiple"
894+ selectedKeys = { selectedKeys }
895+ onSelectionChange = { setSelectedKeys }
896+ aria-label = "实例实例表格"
897+ className = "min-w-full"
898+ classNames = { {
899+ th : "text-xs md:text-sm" ,
900+ td : "py-3"
901+ } }
902+ >
903+ < TableHeader columns = { columns } >
904+ { ( column ) => (
905+ < TableColumn
906+ key = { column . key }
907+ hideHeader = { false }
908+ className = { column . key === "actions" ? "w-[140px]" : "" }
909+ >
910+ { column . label }
911+ </ TableColumn >
912+ ) }
913+ </ TableHeader >
914+ < TableBody >
915+ { items . map ( ( tunnel ) => (
932916 < TableRow key = { tunnel . id } >
933917 { /* 类型列 */ }
934918 < TableCell >
@@ -1044,10 +1028,10 @@ export default function TunnelsPage() {
10441028 </ div >
10451029 </ TableCell >
10461030 </ TableRow >
1047- ) )
1048- ) }
1049- </ TableBody >
1050- </ Table >
1031+ ) ) }
1032+ </ TableBody >
1033+ </ Table >
1034+ ) }
10511035 </ div >
10521036 </ Box >
10531037
0 commit comments