177 lines
6.9 KiB
Vue
177 lines
6.9 KiB
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">
|
||
|
|
<!-- 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>
|
||
|
|
|
||
|
|
|
||
|
|
|