From d245ab8735bc9e44dfbc042db46e186e776268a2 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Tue, 16 Dec 2025 12:15:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ManagePage.vue | 89 +++++++++++++++++++++++++---------------
 1 file changed, 56 insertions(+), 33 deletions(-)

diff --git a/src/views/ManagePage.vue b/src/views/ManagePage.vue
index 679a723..2dcf587 100644
--- a/src/views/ManagePage.vue
+++ b/src/views/ManagePage.vue
@@ -82,8 +82,10 @@
                 </div>
                 <span class="tool-sort tool-drag-handle">排序: {{ tool.sortOrder || 0 }}</span>
               </div>
+              <div class="tool-url-row">
+                <div class="tool-url" @click="openToolUrl(tool.url, $event)" title="点击打开">{{ tool.url }}</div>
+              </div>
               <div class="tool-footer">
-                <div class="tool-url" @click="openToolUrl(tool.url, $event)" style="cursor: pointer; text-decoration: underline;" title="点击打开">{{ tool.url }}</div>
                 <div class="tool-actions" @click.stop>
                   <button class="copy-btn" @click="copyTool(category, tool)">复制</button>
                   <button class="edit-btn" @click="editTool(category, tool)">编辑</button>
@@ -1598,8 +1600,8 @@ export default {
     .tool-item {
       display: flex;
       flex-direction: column;
-      gap: 8px;
-      padding: 10px;
+      gap: 6px;
+      padding: 8px;
       background: #fafafa;
       border-radius: 6px;
       border: 1px solid #e5e7eb;
@@ -1613,16 +1615,16 @@ export default {
       .tool-main {
         display: flex;
         align-items: center;
-        gap: 10px;
+        gap: 8px;
 
         .tool-icon {
-          width: 36px;
-          height: 36px;
+          width: 32px;
+          height: 32px;
           border-radius: 6px;
           display: flex;
           align-items: center;
           justify-content: center;
-          font-size: 14px;
+          font-size: 13px;
           color: white;
           font-weight: bold;
           flex-shrink: 0;
@@ -1673,7 +1675,7 @@ export default {
           font-size: 11px;
           color: @primary-color;
           background: rgba(102, 126, 234, 0.1);
-          padding: 2px 8px;
+          padding: 2px 6px;
           border-radius: 4px;
           white-space: nowrap;
           font-weight: 500;
@@ -1682,25 +1684,58 @@ export default {
         }
       }
 
-      .tool-footer {
+      .tool-url-row {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        gap: 8px;
+        margin-top: 4px;
+        padding: 6px 10px;
+        background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
+        border-radius: 6px;
+        border: 1px solid rgba(102, 126, 234, 0.1);
+        transition: all 0.2s ease;
+
+        &:hover {
+          background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
+          border-color: rgba(102, 126, 234, 0.2);
+          box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
+        }
 
         .tool-url {
-          font-size: 10px;
-          color: @text-tertiary;
-          font-family: 'Consolas', monospace;
+          font-size: 11px;
+          color: @primary-color;
+          font-family: 'Consolas', 'Monaco', monospace;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          line-height: 1.6;
+          flex: 1;
+          font-weight: 500;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          flex: 1;
+
+          &:hover {
+            color: #5568d3;
+            text-decoration: underline;
+          }
+
+          &::before {
+            content: '🔗';
+            margin-right: 6px;
+            font-size: 12px;
+          }
         }
+      }
+
+      .tool-footer {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 6px;
+        padding-top: 4px;
 
         .tool-actions {
           display: flex;
-          gap: 6px;
+          gap: 5px;
           flex-shrink: 0;
         }
       }
@@ -2166,24 +2201,12 @@ button {
       padding: 12px; // 增加padding防止按钮被截断
       overflow: visible; // 允许内容超出
 
+      .tool-url-row {
+        padding: 6px 0;
+      }
+
       .tool-footer {
-        flex-wrap: wrap; // 允许换行
-
-        .tool-url {
-          flex: 1 1 100%; // 手机端让URL占据整行
-          margin-bottom: 8px;
-          word-break: break-all; // 强制换行，防止超出
-          overflow-wrap: break-word; // 兼容性处理
-          white-space: normal !important; // 覆盖PC端的nowrap
-          overflow: visible !important; // 覆盖PC端的hidden
-          text-overflow: clip !important; // 覆盖PC端的ellipsis
-        }
-
-        .tool-actions {
-          flex: 0 0 auto; // 不拉伸，按内容宽度
-          justify-content: flex-end;
-          width: 100%; // 占据全宽
-        }
+        padding-top: 8px;
       }
     }
   }