fix:样式优化完善。

src/views/HomePage.vue

@@ -92,7 +92,7 @@ export default {
       superCategories: [],
       categories: [],
       activeSuperCategoryId: null, // 当前Tab的大分类ID
-      viewMode: 'simple' // 'colorful' 或 'simple'
+      viewMode: this.isMobile() ? 'colorful' : 'simple' // 手机端默认炫彩版，PC端默认简洁版
     }
   },
 
@@ -100,6 +100,19 @@ export default {
     this.loadData()
   },
 
+  mounted() {
+    // 动态调整内容区域的padding-top，避免被Tab遮挡
+    this.$nextTick(() => {
+      this.adjustContainerPadding()
+    })
+    // 监听窗口大小变化
+    window.addEventListener('resize', this.adjustContainerPadding)
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.adjustContainerPadding)
+  },
+
   computed: {
     // 当前激活的大分类下的分类列表
     currentCategories() {
@@ -109,6 +122,30 @@ export default {
   },
 
   methods: {
+    // 动态调整容器padding-top
+    adjustContainerPadding() {
+      setTimeout(() => {
+        const tabElement = document.querySelector('.super-category-tabs')
+        const container = document.querySelector('.workbench-container')
+        if (tabElement && container) {
+          const headerHeight = 76 // header固定高度
+          const tabHeight = tabElement.offsetHeight // Tab区域总高度（包含padding）
+          const tabPadding = 30 // Tab的上下padding总和 (15*2)
+          // 减少间距让布局紧凑，减去20像素
+          const newPaddingTop = headerHeight + tabHeight - tabPadding - 20
+          console.log('调整padding-top:', newPaddingTop + 'px', 'Tab高度:', tabHeight)
+          container.style.paddingTop = `${newPaddingTop}px`
+        } else {
+          console.log('元素未找到:', { tabElement, container })
+        }
+      }, 100)
+    },
+
+    // 判断是否为移动端
+    isMobile() {
+      return window.innerWidth <= 600
+    },
+
     // 根据图标文字长度返回字体大小class
     getIconSizeClass(icon) {
       if (!icon) return 'icon-size-default'
@@ -132,6 +169,10 @@ export default {
     // 切换Tab
     switchTab(superCategoryId) {
       this.activeSuperCategoryId = superCategoryId
+      // 切换Tab后重新调整padding
+      this.$nextTick(() => {
+        this.adjustContainerPadding()
+      })
     },
 
     /**
@@ -206,6 +247,11 @@ export default {
           if (superCategories.length > 0 && !this.activeSuperCategoryId) {
             this.activeSuperCategoryId = superCategories[0].id
           }
+
+          // 数据加载完成后调整padding
+          this.$nextTick(() => {
+            this.adjustContainerPadding()
+          })
         } else {
           console.error('加载数据失败')
           this.loadDefaultData()
@@ -356,15 +402,17 @@ export default {
   min-height: 100vh;
   background: @primary-gradient;
   padding: @header-height 0 0;
-  overflow: visible;
+  overflow-x: hidden; // 防止横向滚动
+  overflow-y: auto; // 允许纵向滚动
 }
 
 .workbench-container {
   max-width: 1820px;
   margin: 0 auto;
   padding: @spacing-md;
-  padding-top: 89px; // 为固定的 Tab 区域预留空间 (76px标题栏 + 20px上边距 + 40px Tab高度)
+  padding-top: 76px; // 初始值设为header高度，JavaScript会动态调整
   overflow: visible;
+  min-height: calc(100vh - 76px); // 确保容器至少占满视口高度
 }
 
 // 大分类 Tab 标签样式
@@ -378,7 +426,7 @@ export default {
   flex-wrap: wrap;
   gap: 12px;
   padding: @spacing-md @spacing-md;
-  background: rgba(102, 126, 234, 0.95);
+  background: #667eea !important; // 使用纯色背景，强制覆盖
   backdrop-filter: blur(10px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 
@@ -449,10 +497,11 @@ export default {
   left: 0;
   right: 0;
   width: 100%;
+  height: @header-height; // 固定高度
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: @spacing-md 40px;
+  padding: 0 40px; // 只保留左右padding，去掉上下padding
   background: @primary-gradient;
   z-index: 99;
 
@@ -555,6 +604,8 @@ export default {
   gap: 20px;
   align-items: flex-start;
   overflow: visible;
+  position: relative;
+  z-index: 1; // 确保整个工具容器低于Tab区域
 }
 
 .tool-category {
@@ -574,7 +625,6 @@ export default {
     line-height: 1.5;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     position: relative;
-    z-index: 1;
   }
 
   .category-items {
@@ -597,11 +647,14 @@ export default {
   transition: all 0.3s ease;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   width: @card-width;
+  position: relative;
+  z-index: 1; // 确保卡片低于Tab区域
 
   &:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
     background: @white-color;
+    z-index: 10; // 悬浮时也保持低于Tab区域
   }
 }
 
@@ -619,7 +672,6 @@ export default {
   border: 1px solid rgba(255, 255, 255, 0.5);
   backdrop-filter: blur(10px);
   position: relative;
-  z-index: 1;
   flex: 0 0 auto;
 
   .simple-tool-name {
@@ -694,7 +746,7 @@ export default {
     box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25);
     background: white;
     border-color: rgba(102, 126, 234, 0.3);
-    z-index: 999;
+    z-index: 10; // 降低悬浮时的z-index，确保低于Tab区域
 
     .simple-tool-name {
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

src/views/ManagePage.vue

@@ -371,6 +371,16 @@ export default {
   mounted() {
     // 初始化拖拽功能
     this.initSortable()
+    // 动态调整内容区域的padding-top，避免被固定区域遮挡
+    this.$nextTick(() => {
+      this.adjustContainerPadding()
+    })
+    // 监听窗口大小变化
+    window.addEventListener('resize', this.adjustContainerPadding)
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.adjustContainerPadding)
   },
 
   updated() {
@@ -381,6 +391,22 @@ export default {
   },
 
   methods: {
+    // 动态调整容器padding-top
+    adjustContainerPadding() {
+      setTimeout(() => {
+        const fixedSection = document.querySelector('.fixed-section')
+        const container = document.querySelector('.manage-container')
+        if (fixedSection && container) {
+          const headerHeight = 64 // header固定高度
+          const fixedSectionHeight = fixedSection.offsetHeight // 固定区域总高度（包含padding）
+          // 应该增加padding-top，让内容往下移，减少被遮挡
+          const newPaddingTop = headerHeight + fixedSectionHeight - 53
+          console.log('ManagePage调整padding-top:', newPaddingTop + 'px', '固定区域高度:', fixedSectionHeight)
+          container.style.paddingTop = `${newPaddingTop}px`
+        }
+      }, 100)
+    },
+
     // 根据图标文字长度返回字体大小class
     getIconSizeClass(icon) {
       if (!icon) return 'icon-size-default'
@@ -436,6 +462,10 @@ export default {
     // 切换Tab
     switchTab(superCategoryId) {
       this.activeSuperCategoryId = superCategoryId
+      // 切换Tab后重新调整padding
+      this.$nextTick(() => {
+        this.adjustContainerPadding()
+      })
     },
 
     async loadData() {
@@ -495,6 +525,11 @@ export default {
           if (superCategories.length > 0 && !this.activeSuperCategoryId) {
             this.activeSuperCategoryId = superCategories[0].id
           }
+
+          // 数据加载完成后调整padding
+          this.$nextTick(() => {
+            this.adjustContainerPadding()
+          })
         }
       } catch (error) {
         console.error('加载数据异常:', error)
@@ -1106,7 +1141,8 @@ export default {
   left: 0;
   right: 0;
   background: @primary-gradient;
-  padding: 20px 40px;
+  height: 64px; // 固定高度
+  padding: 0 40px; // 只保留左右padding，去掉上下padding
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   display: flex;
   justify-content: center; // PC端居中
@@ -1164,20 +1200,20 @@ export default {
 
 .manage-container {
   padding: 10px 8px;
-  padding-top: 180px; // 减小与固定区域的间距
+  padding-top: 64px; // 初始值，JavaScript会动态调整
 }
 
 // 固定的书签分类区域
 .fixed-section {
   position: fixed;
-  top:70px;
+  top: 64px; // 紧贴header底部
   left: 0;
   right: 0;
   z-index: 999;
   margin: 0;
   border-radius: 0;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  padding: 28px 20px 20px 20px !important; // 顶部增加更多内边距
+  padding: 20px; // PC端padding
 }
 
 .manage-section {
@@ -2025,10 +2061,16 @@ button {
   .manage-container {
     padding: 16px 8px;
     padding-top: 200px; // 手机端为固定区域预留更多空间
+
+    // 手机端固定区域增加左右padding
+    .fixed-section {
+      padding-left: 12px !important;
+      padding-right: 12px !important;
+    }
   }
 
-  .fixed-section {
+  .manage-section.fixed-section {
-    padding: 12px 8px;
+    padding: 12px 12px !important; // 手机端左右增加间距，提高优先级
   }
 
   .category-list {
@@ -2037,6 +2079,40 @@ button {
 
   .tool-list {
     grid-template-columns: 1fr !important;
+
+    .tool-item {
+      padding: 12px; // 增加padding防止按钮被截断
+      overflow: visible; // 允许内容超出
+
+      .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%; // 占据全宽
+        }
+      }
+    }
+  }
+
+  // 手机端增大按钮，更易点击
+  button {
+    &.edit-btn, &.delete-btn {
+      padding: 8px 12px !important;
+      font-size: 13px !important;
+      min-width: 50px;
+    }
   }
 }
 </style>