mirror of
https://github.com/woodchen-ink/proxy-go.git
synced 2025-07-19 08:51:55 +08:00
refactor(config): Improve path configuration table layout and size display
- 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:
parent
627a63caad
commit
ed9f3be1ce
@ -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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user