Jelajahi Sumber

fix(editor): 优化左侧面板Tab显示

- 调小 Tab 字体和间距,避免显示不全
- 增大左侧面板默认宽度(260px -> 300px)
- 增大左侧面板可调整范围(min 240px, max 500px)
- Tab 支持换行显示(flex-wrap: wrap)
何文松 3 minggu lalu
induk
melakukan
a41e5410c8
1 mengubah file dengan 15 tambahan dan 13 penghapusan
  1. 15 13
      frontend/vue-demo/src/views/Editor.vue

+ 15 - 13
frontend/vue-demo/src/views/Editor.vue

@@ -598,7 +598,7 @@ const loading = ref(false)
 const regenerating = ref(false)
 
 // 面板宽度(可拖拽调整)
-const leftPanelWidth = ref(260)
+const leftPanelWidth = ref(300)
 const rightPanelWidth = ref(380)
 const isResizing = ref(false)
 const resizeType = ref('') // 'left' or 'right'
@@ -629,7 +629,7 @@ function handleResize(e) {
   
   if (resizeType.value === 'left') {
     const newWidth = e.clientX
-    leftPanelWidth.value = Math.max(180, Math.min(400, newWidth))
+    leftPanelWidth.value = Math.max(240, Math.min(500, newWidth))
   } else if (resizeType.value === 'right') {
     const newWidth = window.innerWidth - e.clientX
     rightPanelWidth.value = Math.max(280, Math.min(500, newWidth))
@@ -2727,33 +2727,35 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  min-width: 200px;
-  max-width: 400px;
+  min-width: 240px;
+  max-width: 500px;
   overflow: hidden;
 
   // Tab 导航 - V2 风格(圆角填充)
   .panel-tabs {
     display: flex;
-    gap: 8px;
-    padding: 10px 10px;
+    gap: 6px;
+    padding: 10px 12px;
     border-bottom: 1px solid var(--border);
     background: var(--white);
+    flex-wrap: wrap;
     
     .panel-tab {
-      padding: 8px 14px;
-      font-size: 13px;
+      padding: 6px 10px;
+      font-size: 12px;
       font-weight: 600;
       text-align: center;
       cursor: pointer;
       color: var(--text-2);
-      border-radius: 12px;
+      border-radius: 10px;
       border: 1px solid transparent;
       transition: all 0.2s;
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: 6px;
+      gap: 4px;
       white-space: nowrap;
+      flex-shrink: 0;
       
       &:hover {
         color: var(--primary);
@@ -2768,11 +2770,11 @@ onUnmounted(() => {
       }
       
       .tab-count {
-        font-size: 11px;
+        font-size: 10px;
         font-weight: 500;
         background: rgba(255, 255, 255, 0.2);
-        padding: 2px 8px;
-        border-radius: 12px;
+        padding: 1px 6px;
+        border-radius: 10px;
         color: inherit;
       }