web-fusion/src/layout/WorkbenchLayout.vue

<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="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">
          <span class="material-icons-round text-white">grid_view</span>
        </div>
      </div>

      <div class="flex-1 flex flex-col gap-4 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="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>
        </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="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>
        </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="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>
        </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="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>
        </button>
      </div>

      <div class="mt-auto">
        <!-- Logout or Back -->
        <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>
        </button>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 h-full relative">
      
      <!-- Tab 1: Auto DM Workbench (Config + Browser) - webAi 权限 -->
      <div v-show="currentView === 'auto_dm'" class="absolute inset-0 z-10 h-full w-full">
        <PermissionMask 
          permission-key="webAi" 
          title="自动私信工作台未开通" 
          description="您当前没有使用自动私信功能的权限"
          :placeholder-image="placeholderWebAi"
        >
          <div v-if="autoDmMode === 'config'" class="h-full w-full bg-slate-50 overflow-auto">
              <ConfigPage 
                @go-to-browser="handleGoToBrowser" 
                @logout="$emit('logout')"
              />
          </div>
          <div v-show="autoDmMode === 'browser'" class="h-full w-full">
            <YoloBrowser 
                v-bind="$attrs" 
                @go-back="handleBackToConfig" 
                @stop-all="handleStopAll" 
            />
          </div>
        </PermissionMask>
      </div>

      <!-- Tab 2: TK Workbench - crawl 权限 -->
      <div v-show="currentView === 'tk'" class="absolute inset-0 z-20 bg-gray-50 h-full overflow-hidden">
        <PermissionMask 
          permission-key="crawl" 
          title="TK工作台未开通" 
          description="您当前没有使用TK工作台功能的权限"
          :placeholder-image="placeholderTk"
        >
          <TkWorkbenches />
        </PermissionMask>
      </div>

      <!-- Tab 3: Hosts List - crawl 权限 -->
      <div v-show="currentView === 'hosts'" class="absolute inset-0 z-20 bg-gray-50 h-full overflow-hidden p-4">
        <PermissionMask 
          permission-key="crawl" 
          title="主播列表未开通" 
          description="您当前没有使用主播列表功能的权限"
          :placeholder-image="placeholderHosts"
        >
          <HostsList />
        </PermissionMask>
      </div>

      <!-- Tab 4: Fan Workbench - bigBrother 权限 -->
      <div v-show="currentView === 'FanWorkbench'" class="absolute inset-0 z-20 bg-gray-50 h-full overflow-hidden p-4">
        <PermissionMask
          permission-key="bigBrother"
          title="大哥工作台未开通"
          description="您当前没有使用大哥工作台功能的权限"
          :placeholder-image="placeholderBigBrother"
        >
          <FanWorkbench />
        </PermissionMask>
      </div>

      <!-- Tab 5: PK Mini 工作台 - 无需权限控制 -->
      <div v-show="currentView === 'pk_mini'" class="absolute inset-0 z-20 h-full overflow-hidden">
        <PkMiniWorkbench />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { isElectron } from '@/utils/electronBridge'
import YoloBrowser from '@/views/YoloBrowser.vue'
import TkWorkbenches from '@/views/tk/Workbenches.vue'
import HostsList from '@/views/tk/HostsList.vue'
import ConfigPage from '@/pages/ConfigPage.vue'
import FanWorkbench from '@/views/tk/FanWorkbench.vue'
import PkMiniWorkbench from '@/views/pk-mini/PkMiniWorkbench.vue'
import PermissionMask from '@/components/PermissionMask.vue'

// 占位图片 - 无权限时显示的工作台截图
import placeholderTk from '@/assets/placeholder-tk.png'
import placeholderHosts from '@/assets/placeholder-hosts.png'
import placeholderWebAi from '@/assets/placeholder-webai.png'
import placeholderBigBrother from '@/assets/placeholder-bigbrother.png'

const emit = defineEmits(['logout', 'go-back', 'stop-all'])

const currentView = ref('tk') // Default Tab
const autoDmMode = ref('config')   // Default Sub-state: 'config' or 'browser'

const handleGoToBrowser = async () => {
    autoDmMode.value = 'browser'
    if (isElectron()) {
        await window.electronAPI.showViews()
    }
}

const handleBackToConfig = async () => {
    autoDmMode.value = 'config'
    if (isElectron()) {
        await window.electronAPI.hideViews()
    }
}

const handleStopAll = () => {
    emit('stop-all')
}

// Watch for view changes to manage native Electron BrowserViews
watch(currentView, async (newVal, oldVal) => {
  if (!isElectron()) return

  if (newVal === 'auto_dm' && autoDmMode.value === 'browser') {
    // Switching TO Auto DM tab AND we are in browser mode: Show views
    try {
      await window.electronAPI.showViews()
    } catch (e) {
      console.error('Failed to show views:', e)
    }
  } else {
    // Switching AWAY from Auto DM tab OR we are in config mode: Hide views
    try {
      await window.electronAPI.hideViews()
    } catch (e) {
      // console.error('Failed to hide views:', e)
    }
  }
})

// Watch sub-mode changes
watch(autoDmMode, async (newVal) => {
    if (currentView.value !== 'auto_dm') return
    
    if (newVal === 'browser') {
        if (isElectron()) await window.electronAPI.showViews()
    } else {
        if (isElectron()) await window.electronAPI.hideViews()
    }
})
</script>

<style scoped>
/* Material Icons support - simplistic import, ideal to put in index.html or main.js */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');
</style>