From 410b8afe6d4387c94901d07f3538f27a3bb85ee9 Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Mon, 9 Jun 2025 18:31:49 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style(ui):=20improve=20API=20inf?=
 =?UTF-8?q?o=20card=20layout=20with=20separate=20columns=20for=20avatar=20?=
 =?UTF-8?q?and=20text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 web/src/pages/Detail/index.js | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/web/src/pages/Detail/index.js b/web/src/pages/Detail/index.js
index 6bf8ecf9..b19201b9 100644
--- a/web/src/pages/Detail/index.js
+++ b/web/src/pages/Detail/index.js
@@ -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>