wood/proxy-go
1
0
Fork 0
mirror of https://github.com/woodchen-ink/proxy-go.git synced 2025-07-19 17:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(config): Improve path configuration table layout and size display

Browse Source 
- Restructure path configuration table to enhance readability
- Add tooltips for size thresholds showing exact byte values
- Separate extension mapping into a nested row with subtle background
- Improve visual hierarchy of path and extension configuration
- Maintain existing functionality while enhancing UI presentation
This commit is contained in:
wood chen 2025-02-17 18:55:28 +08:00
parent 627a63caad
commit ed9f3be1ce
1 changed files with 89 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
web/app/dashboard/config/page.tsx
View File

@ -906,66 +906,27 @@ export default function ConfigPage() {
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{config && Object.entries(config.MAP).map(([path, target]) => ( {config && Object.entries(config.MAP).map(([path, target]) => (
<TableRow key={path}> <>
<TableCell>{path}</TableCell> <TableRow key={`${path}-main`}>
<TableCell> <TableCell>{path}</TableCell>
{typeof target === 'string' ? target : target.DefaultTarget} <TableCell>
</TableCell> {typeof target === 'string' ? target : target.DefaultTarget}
<TableCell> </TableCell>
{typeof target === 'object' && ( <TableCell>
<div> {typeof target === 'object' && target.SizeThreshold ? (
<div>最小: {target.SizeThreshold ? formatBytes(target.SizeThreshold) : '-'}</div> <span title={`${target.SizeThreshold} 字节`}>
<div>最大: {target.MaxSize ? formatBytes(target.MaxSize) : '-'}</div> {formatBytes(target.SizeThreshold)}
</div> </span>
)} ) : '-'}
</TableCell> </TableCell>
<TableCell> <TableCell>
{typeof target === 'object' && target.ExtensionMap && Object.keys(target.ExtensionMap).length > 0 ? ( {typeof target === 'object' && target.MaxSize ? (
<Table> <span title={`${target.MaxSize} 字节`}>
<TableHeader> {formatBytes(target.MaxSize)}
<TableRow> </span>
<TableHead className="w-1/3">扩展名</TableHead> ) : '-'}
<TableHead className="w-1/2">目标地址</TableHead> </TableCell>
<TableHead className="w-1/6">操作</TableHead> <TableCell>
</TableRow>
</TableHeader>
<TableBody>
{Object.entries(target.ExtensionMap).map(([ext, url]) => (
<TableRow key={ext}>
<TableCell className="py-2">{ext}</TableCell>
<TableCell className="py-2">
<span title={url}>{truncateUrl(url)}</span>
</TableCell>
<TableCell className="py-2">
<div className="flex space-x-2">
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => handleExtensionMapEdit(path, ext, url)}
>
<Edit className="h-3 w-3" />
</Button>
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => deleteExtensionMap(path, ext)}
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
) : (
<div className="text-center text-sm text-muted-foreground">
暂无扩展名映射
</div>
)}
<div className="mt-2 flex justify-end">
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
@ -974,27 +935,74 @@ export default function ConfigPage() {
<Plus className="w-3 h-3 mr-2" /> <Plus className="w-3 h-3 mr-2" />
添加扩展名映射 添加扩展名映射
</Button> </Button>
</div> </TableCell>
</TableCell> <TableCell>
<TableCell> <div className="flex space-x-2">
<div className="flex space-x-2"> <Button
<Button variant="ghost"
variant="ghost" size="icon"
size="icon" onClick={() => handleEditPath(path, target)}
onClick={() => handleEditPath(path, target)} >
> <Edit className="w-4 h-4" />
<Edit className="w-4 h-4" /> </Button>
</Button> <Button
<Button variant="ghost"
variant="ghost" size="icon"
size="icon" onClick={() => deletePath(path)}
onClick={() => deletePath(path)} >
> <Trash2 className="w-4 h-4" />
<Trash2 className="w-4 h-4" /> </Button>
</Button> </div>
</div> </TableCell>
</TableCell> </TableRow>
</TableRow> {typeof target === 'object' && target.ExtensionMap && Object.keys(target.ExtensionMap).length > 0 && (
<TableRow key={`${path}-extensions`}>
<TableCell colSpan={6} className="p-0">
<div className="bg-muted/50 p-4 rounded-lg mx-2 my-2">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-1/3">扩展名</TableHead>
<TableHead className="w-1/2">目标地址</TableHead>
<TableHead className="w-1/6">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{Object.entries(target.ExtensionMap).map(([ext, url]) => (
<TableRow key={ext}>
<TableCell className="py-2">{ext}</TableCell>
<TableCell className="py-2">
<span title={url}>{truncateUrl(url)}</span>
</TableCell>
<TableCell className="py-2">
<div className="flex space-x-2">
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => handleExtensionMapEdit(path, ext, url)}
>
<Edit className="h-3 w-3" />
</Button>
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => deleteExtensionMap(path, ext)}
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</TableCell>
</TableRow>
)}
</>
))} ))}
</TableBody> </TableBody>
</Table> </Table>