mfx/web-fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

菜单栏加宽

Browse Source
This commit is contained in:
没复习
2026-02-11 18:30:45 +08:00
parent 92780ef52e
commit c2c9b239a3
1 changed files with 26 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/layout/WorkbenchLayout.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex h-screen w-screen overflow-hidden bg-white"> <div class="flex h-screen w-screen overflow-hidden bg-white">
<!-- Left Navigation Sidebar --> <!-- 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"> <div class="mb-6">
<!-- Logo or Brand --> <!-- 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"> <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> </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 --> <!-- TK Workbench Tab -->
<button @click="currentView = 'tk'" <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'"> :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> <span class="material-icons-round text-xl">tiktok</span>
<div <span class="text-xs font-medium truncate">TK 工作台</span>
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>
</button> </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 --> <!-- Auto DM Workbench Tab -->
<button @click="currentView = 'auto_dm'" <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'"> :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> <span class="material-icons-round text-xl">chat</span>
<div <span class="text-xs font-medium truncate">自动私信</span>
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>
</button> </button>
<!-- Fan Workbench Tab --> <!-- Fan Workbench Tab -->
<button @click="currentView = 'FanWorkbench'" <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'"> :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> <span class="material-icons-round text-xl">supervised_user_circle</span>
<div <span class="text-xs font-medium truncate">大哥工作台</span>
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>
</button> </button>
<!-- PK 工作台 Tab --> <!-- PK 工作台 Tab -->
<button @click="currentView = 'pk_mini'" <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'"> :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> <span class="material-icons-round text-xl">sports_esports</span>
<div <span class="text-xs font-medium truncate">PK 工作台</span>
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>
</button> </button>
</div> </div>
<div class="mt-auto"> <div class="mt-auto w-full px-2">
<!-- Logout or Back --> <!-- Logout -->
<button @click="$emit('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"> 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">logout</span> <span class="material-icons-round text-xl">logout</span>
<span class="text-xs font-medium">退出登录</span>
</button> </button>
</div> </div>
</div> </div>