refactor(config): Optimize configuration table layout and styling

- Adjust table column widths for better proportional display
- Reduce padding and font sizes in extension mapping section
- Enhance visual hierarchy with subtle background and border adjustments
- Maintain existing functionality while improving UI compactness
This commit is contained in:
wood chen 2025-02-17 19:03:02 +08:00
parent ed9f3be1ce
commit 6bc6edfd37

View File

@ -896,12 +896,12 @@ export default function ConfigPage() {
<Table>
<TableHeader>
<TableRow>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead className="w-[10%]"></TableHead>
<TableHead className="w-[40%]"></TableHead>
<TableHead className="w-[10%]"></TableHead>
<TableHead className="w-[10%]"></TableHead>
<TableHead className="w-[15%]"></TableHead>
<TableHead className="w-[15%]"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
@ -957,25 +957,25 @@ export default function ConfigPage() {
</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">
<TableCell colSpan={6} className="p-0 border-t-0">
<div className="bg-muted/30 px-2 py-1 mx-4">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-1/3"></TableHead>
<TableHead className="w-1/2"></TableHead>
<TableHead className="w-1/6"></TableHead>
<TableRow className="border-0">
<TableHead className="w-[30%] h-8 text-xs"></TableHead>
<TableHead className="w-[50%] h-8 text-xs"></TableHead>
<TableHead className="w-[20%] h-8 text-xs"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{Object.entries(target.ExtensionMap).map(([ext, url]) => (
<TableRow key={ext}>
<TableCell className="py-2">{ext}</TableCell>
<TableCell className="py-2">
<TableRow key={ext} className="border-0">
<TableCell className="py-1 text-sm">{ext}</TableCell>
<TableCell className="py-1 text-sm">
<span title={url}>{truncateUrl(url)}</span>
</TableCell>
<TableCell className="py-2">
<div className="flex space-x-2">
<TableCell className="py-1">
<div className="flex space-x-1">
<Button
variant="ghost"
size="icon"