From d2b02e8ea9b0182c05c2601f18bb256a5af51338 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Tue, 16 Dec 2025 22:26:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=97=AE=E9=A2=98?=
 =?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 | 33 +++++++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/views/ManagePage.vue b/src/views/ManagePage.vue
index 8bfd517..7a5fcc0 100644
--- a/src/views/ManagePage.vue
+++ b/src/views/ManagePage.vue
@@ -83,7 +83,7 @@
                 <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 class="tool-url" @click="openToolUrl(tool.url, $event)" :title="tool.url">{{ tool.url }}</div>
               </div>
               <div class="tool-footer">
                 <div class="tool-actions" @click.stop>
@@ -287,7 +287,6 @@ export default {
         { name: '紫蓝', value: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
         { name: '青色', value: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)' },
         { name: '蓝绿', value: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
-        { name: '深紫', value: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
         { name: '粉蓝', value: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
         { name: '深绿', value: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
         { name: '淡紫', value: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)' },
@@ -1178,6 +1177,9 @@ export default {
   min-height: 100vh;
   background: @primary-gradient;
   padding-top: 64px; // 为固定头部预留空间
+  width: 100%; // 确保页面宽度不超出
+  overflow-x: hidden; // 防止横向滚动
+  box-sizing: border-box; // 包含padding在内
 }
 
 .manage-header {
@@ -1252,11 +1254,11 @@ export default {
 .fixed-section {
   position: fixed;
   top: 64px; // 紧贴header底部
-  left: 0;
-  right: 0;
+  left: 8px; // 与容器左边距保持一致
+  right: 8px; // 与容器右边距保持一致
   z-index: 999;
   margin: 0;
-  border-radius: 0;
+  border-radius: 12px; // 添加圆角，与其他section保持一致
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   padding: 20px; // PC端padding
 }
@@ -1267,6 +1269,8 @@ export default {
   padding: 10px 12px;
   margin-bottom: 10px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  max-width: 100%; // 防止超出屏幕宽度
+  box-sizing: border-box; // 包含padding和border在内
 
   .section-header {
     display: flex;
@@ -1547,6 +1551,8 @@ export default {
 
 .tool-group {
   margin-bottom: 24px;
+  max-width: 100%; // 防止超出屏幕宽度
+  overflow: hidden; // 防止内容溢出
 
   &:last-child {
     margin-bottom: 0;
@@ -1572,6 +1578,7 @@ export default {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 10px;
+    max-width: 100%; // 防止grid布局超出
 
     .tool-item {
       display: flex;
@@ -1582,6 +1589,9 @@ export default {
       border-radius: 6px;
       border: 1px solid #e5e7eb;
       transition: all 0.2s ease;
+      max-width: 100%; // 限制最大宽度
+      overflow: hidden; // 隐藏溢出内容
+      box-sizing: border-box; // 包含padding和border
 
       &:hover {
         background: #f3f4f6;
@@ -1669,6 +1679,8 @@ export default {
         border-radius: 6px;
         border: 1px solid rgba(102, 126, 234, 0.1);
         transition: all 0.2s ease;
+        max-width: 100%; // 限制最大宽度
+        overflow: hidden; // 隐藏溢出内容
 
         &:hover {
           background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
@@ -1688,6 +1700,7 @@ export default {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          min-width: 0; // 关键：允许flex子项缩小到0
 
           &:hover {
             color: #5568d3;
@@ -2152,11 +2165,13 @@ button {
   }
 
   .manage-container {
-    padding: 16px 8px;
+    padding: 16px 12px; // 手机端增加左右内边距，与固定区域保持一致
     padding-top: 200px; // 手机端为固定区域预留更多空间
 
     // 手机端固定区域增加左右padding
     .fixed-section {
+      left: 12px !important; // 与容器左边距保持一致
+      right: 12px !important; // 与容器右边距保持一致
       padding-left: 12px !important;
       padding-right: 12px !important;
     }
@@ -2171,14 +2186,16 @@ button {
   }
 
   .tool-list {
-    grid-template-columns: 1fr !important;
+    grid-template-columns: 1fr !important; // 手机端单列布局，自适应屏幕宽度
 
     .tool-item {
       padding: 12px; // 增加padding防止按钮被截断
       overflow: visible; // 允许内容超出
+      width: 100%; // 确保占满容器宽度
+      box-sizing: border-box; // 包含padding和border在内
 
       .tool-url-row {
-        padding: 6px 0;
+        padding: 6px 10px; // 手机端增加左右内边距，确保网址不贴边
       }
 
       .tool-footer {