oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 style(ui): improve API info card layout with separate columns for avatar and text

Browse Source 
- Restructure API info card layout to use two-column design
- Move avatar to separate left column with fixed width
- Align route name, URL, and description text to same starting position
- Remove unnecessary indentation and improve visual hierarchy
- Enhance readability and consistency of API information display
This commit is contained in:
Apple\Apple
2025-06-09 18:31:49 +08:00
parent cf967d39ea
commit 410b8afe6d
1 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/pages/Detail/index.js
View File

@@ -984,24 +984,26 @@ const Detail = (props) => {
>
{apiInfoData.length > 0 ? (
apiInfoData.map((api) => (
<div key={api.id} className="flex items-center justify-between p-2 hover:bg-white rounded-lg transition-colors cursor-pointer">
<div key={api.id} className="flex p-2 hover:bg-white rounded-lg transition-colors cursor-pointer">
<div className="flex-shrink-0 mr-3">
<Avatar
size="extra-extra-small"
color={api.color}
>
{api.route.substring(0, 2)}
</Avatar>
</div>
<div className="flex-1">
<div className="flex items-center gap-2 text-sm font-medium text-gray-900 mb-1">
<Avatar
size="extra-extra-small"
color={api.color}
>
{api.route.substring(0, 2)}
</Avatar>
<div className="text-sm font-medium text-gray-900 mb-1">
{api.route}
</div>
<div
className="text-xs !text-semi-color-primary font-mono break-all cursor-pointer hover:underline"
className="text-xs !text-semi-color-primary font-mono break-all cursor-pointer hover:underline mb-1"
onClick={() => handleCopyUrl(api.url)}
>
{api.url}
</div>
<div className="text-xs text-gray-500 mt-1">
<div className="text-xs text-gray-500">
{api.description}
</div>
</div>