From c2c9b239a355f6639ca0bb5eb6ad80754c573fe5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B2=A1=E5=A4=8D=E4=B9=A0?= <2353956224@qq.com>
Date: Wed, 11 Feb 2026 18:30:45 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=A0=8F=E5=8A=A0=E5=AE=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/WorkbenchLayout.vue | 67 +++++++++++++---------------------
 1 file changed, 26 insertions(+), 41 deletions(-)

diff --git a/src/layout/WorkbenchLayout.vue b/src/layout/WorkbenchLayout.vue
index 9df4475..6269465 100644
--- a/src/layout/WorkbenchLayout.vue
+++ b/src/layout/WorkbenchLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-screen w-screen overflow-hidden bg-white">
     <!-- Left Navigation Sidebar -->
-    <div class="w-16 flex flex-col items-center py-4 bg-slate-900 border-r border-slate-800 z-50">
+    <div class="w-36 flex flex-col items-center py-4 bg-slate-900 border-r border-slate-800 z-50">
       <div class="mb-6">
         <!-- Logo or Brand -->
         <div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-900/50">
@@ -9,70 +9,55 @@
         </div>
       </div>
 
-      <div class="flex-1 flex flex-col gap-4 w-full px-2">
+      <div class="flex-1 flex flex-col gap-3 w-full px-2">
 
         <!-- TK Workbench Tab -->
         <button @click="currentView = 'tk'"
-          class="w-full aspect-square rounded-xl flex items-center justify-center transition-all duration-200 group relative"
+          class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
           :class="currentView === 'tk' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/30' : 'text-slate-400 hover:bg-slate-800 hover:text-white'">
-          <span class="material-icons-round text-2xl">tiktok</span>
-          <div
-            class="absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
-            TK 工作台
-          </div>
-        </button>
-        
-        <!-- Hosts List Tab -->
-        <button @click="currentView = 'hosts'"
-          class="w-full aspect-square rounded-xl flex items-center justify-center transition-all duration-200 group relative"
-          :class="currentView === 'hosts' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/30' : 'text-slate-400 hover:bg-slate-800 hover:text-white'">
-          <span class="material-icons-round text-2xl">people</span>
-          <div
-            class="absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
-            主播列表
-          </div>
+          <span class="material-icons-round text-xl">tiktok</span>
+          <span class="text-xs font-medium truncate">TK 工作台</span>
         </button>
 
+        <!-- Hosts List Tab -->
+        <button @click="currentView = 'hosts'"
+          class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
+          :class="currentView === 'hosts' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/30' : 'text-slate-400 hover:bg-slate-800 hover:text-white'">
+          <span class="material-icons-round text-xl">people</span>
+          <span class="text-xs font-medium truncate">主播列表</span>
+        </button>
 
         <!-- Auto DM Workbench Tab -->
         <button @click="currentView = 'auto_dm'"
-          class="w-full aspect-square rounded-xl flex items-center justify-center transition-all duration-200 group relative"
+          class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
           :class="currentView === 'auto_dm' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/30' : 'text-slate-400 hover:bg-slate-800 hover:text-white'">
-          <span class="material-icons-round text-2xl">chat</span>
-          <div
-            class="absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
-            自动私信工作台
-          </div>
+          <span class="material-icons-round text-xl">chat</span>
+          <span class="text-xs font-medium truncate">自动私信</span>
         </button>
 
         <!-- Fan Workbench Tab -->
         <button @click="currentView = 'FanWorkbench'"
-          class="w-full aspect-square rounded-xl flex items-center justify-center transition-all duration-200 group relative"
+          class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
           :class="currentView === 'FanWorkbench' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/30' : 'text-slate-400 hover:bg-slate-800 hover:text-white'">
-          <span class="material-icons-round text-2xl">supervised_user_circle</span>
-          <div
-            class="absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
-            大哥工作台
-          </div>
+          <span class="material-icons-round text-xl">supervised_user_circle</span>
+          <span class="text-xs font-medium truncate">大哥工作台</span>
         </button>
 
         <!-- PK 工作台 Tab -->
         <button @click="currentView = 'pk_mini'"
-          class="w-full aspect-square rounded-xl flex items-center justify-center transition-all duration-200 group relative"
+          class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
           :class="currentView === 'pk_mini' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/30' : 'text-slate-400 hover:bg-slate-800 hover:text-white'">
-          <span class="material-icons-round text-2xl">sports_esports</span>
-          <div
-            class="absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
-            PK工作台
-          </div>
+          <span class="material-icons-round text-xl">sports_esports</span>
+          <span class="text-xs font-medium truncate">PK 工作台</span>
         </button>
       </div>
 
-      <div class="mt-auto">
-        <!-- Logout or Back -->
+      <div class="mt-auto w-full px-2">
+        <!-- Logout -->
         <button @click="$emit('logout')"
-          class="w-10 h-10 rounded-xl flex items-center justify-center text-slate-400 hover:bg-slate-800 hover:text-red-400 transition-all">
-          <span class="material-icons-round">logout</span>
+          class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 text-slate-400 hover:bg-slate-800 hover:text-red-400 transition-all">
+          <span class="material-icons-round text-xl">logout</span>
+          <span class="text-xs font-medium">退出登录</span>
         </button>
       </div>
     </div>