大哥 主播 即时消息 三合一
This commit is contained in:
176
src/layout/WorkbenchLayout.vue
Normal file
176
src/layout/WorkbenchLayout.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<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">
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
</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) -->
|
||||
<div v-show="currentView === 'auto_dm'" class="absolute inset-0 z-10 h-full w-full">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Tab 2: TK Workbench -->
|
||||
<div v-show="currentView === 'tk'" class="absolute inset-0 z-20 bg-gray-50 h-full overflow-hidden">
|
||||
<TkWorkbenches />
|
||||
</div>
|
||||
|
||||
<!-- Tab 3: Hosts List -->
|
||||
<div v-show="currentView === 'hosts'" class="absolute inset-0 z-20 bg-gray-50 h-full overflow-hidden p-4">
|
||||
<HostsList />
|
||||
</div>
|
||||
|
||||
<!-- Tab 4: Hosts List -->
|
||||
<div v-show="currentView === 'FanWorkbench'" class="absolute inset-0 z-20 bg-gray-50 h-full overflow-hidden p-4">
|
||||
<FanWorkbench />
|
||||
</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' // Added import
|
||||
|
||||
const emit = defineEmits(['logout', 'go-back', 'stop-all'])
|
||||
|
||||
const currentView = ref('auto_dm') // 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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user