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-03-30 09:53:08 +08:00
parent b81a0377b8
commit 466a853905
5 changed files with 539 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
src/layout/WorkbenchLayout.vue
View File

@@ -1,10 +1,11 @@
<template>
<div class="flex h-screen w-screen overflow-hidden bg-white">
<!-- Left Navigation Sidebar -->
<div ref="sidebarRef" class="flex flex-col items-center py-4 border-r z-50" style="flex: 0 0 calc(100vw * 2 / 19); min-width: 96px; max-width: 400px; background-color: #F8F9FA;">
<div ref="sidebarRef" class="flex flex-col items-center py-4 border-r z-50"
style="flex: 0 0 calc(100vw * 2 / 19); min-width: 96px; max-width: 400px; background-color: #F8F9FA;">
<div class="mb-6" style="border-bottom: 1px solid #A0AEC023; padding: 10%;">
<!-- Logo or Brand -->
<div class="" >
<div class="">
<img :src="yoloIcon" class="yolo-logo" />
</div>
</div>
@@ -13,8 +14,7 @@
<!-- TK Workbench Tab -->
<button @click="currentView = 'tk'"
class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
style="height: 6vh;"
class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200" style="height: 6vh;"
:class="currentView === 'tk' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'">
<img :src="currentView === 'tk' ? nav11 : nav1" class="w-9 h-9 object-contain flex-shrink-0" />
<span class="text-base font-medium truncate">TK 工作台</span>
@@ -22,8 +22,7 @@
<!-- 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"
style="height: 6vh;"
class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200" style="height: 6vh;"
:class="currentView === 'hosts' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'">
<img :src="currentView === 'hosts' ? nav22 : nav2" class="w-9 h-9 object-contain flex-shrink-0" />
<span class="text-base font-medium truncate">主播列表</span>
@@ -31,8 +30,7 @@
<!-- Auto DM Workbench Tab -->
<button @click="currentView = 'auto_dm'"
class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
style="height: 6vh;"
class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200" style="height: 6vh;"
:class="currentView === 'auto_dm' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'">
<img :src="currentView === 'auto_dm' ? nav33 : nav3" class="w-9 h-9 object-contain flex-shrink-0" />
<span class="text-base font-medium truncate">自动私信</span>
@@ -40,8 +38,7 @@
<!-- Fan Workbench Tab -->
<button @click="currentView = 'FanWorkbench'"
class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
style="height: 6vh;"
class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200" style="height: 6vh;"
:class="currentView === 'FanWorkbench' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'">
<img :src="currentView === 'FanWorkbench' ? nav44 : nav4" class="w-9 h-9 object-contain flex-shrink-0" />
<span class="text-base font-medium truncate">大哥工作台</span>
@@ -49,8 +46,7 @@
<!-- PK 工作台 Tab -->
<button @click="currentView = 'pk_mini'"
class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
style="height: 6vh;"
class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200" style="height: 6vh;"
:class="currentView === 'pk_mini' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'">
<img :src="currentView === 'pk_mini' ? nav55 : nav5" class="w-9 h-9 object-contain flex-shrink-0" />
<span class="text-base font-medium truncate">PK 工作台</span>
@@ -58,12 +54,18 @@
<!-- yolo商店 Tab -->
<button @click="currentView = 'shop'"
class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
style="height: 6vh;"
class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200" style="height: 6vh;"
:class="currentView === 'shop' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'">
<img :src="currentView === 'shop' ? nav66 : nav6" class="w-9 h-9 object-contain flex-shrink-0" />
<span class="text-base font-medium truncate">TK商店</span>
</button>
<!-- 尽请期待 Tab -->
<button class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
style="height: 6vh; :disabled"
:class="currentView === 'test' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'">
<span class="text-base font-medium truncate">尽请期待...</span>
</button>
</div>
<div class="mt-auto w-full px-2">
@@ -78,68 +80,41 @@
<!-- 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"
:contacts="serviceContacts"
>
<PermissionMask permission-key="webAi" title="自动私信工作台未开通" description="您当前没有使用自动私信功能的权限"
:placeholder-image="placeholderWebAi" :contacts="serviceContacts">
<div v-if="autoDmMode === 'config'" class="h-full w-full bg-slate-50 overflow-auto">
<ConfigPage
@go-to-browser="handleGoToBrowser"
@logout="$emit('logout')"
/>
<ConfigPage @go-to-browser="handleGoToBrowser" @logout="$emit('logout')" />
</div>
<div v-show="autoDmMode === 'browser'" class="h-full w-full">
<YoloBrowser
v-bind="$attrs"
:nav-sidebar-width="navSidebarWidth"
@go-back="handleBackToConfig"
@stop-all="handleStopAll"
/>
<YoloBrowser v-bind="$attrs" :nav-sidebar-width="navSidebarWidth" @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"
:contacts="serviceContacts"
>
<TkWorkbenches />
<PermissionMask permission-key="crawl" title="TK工作台未开通" description="您当前没有使用TK工作台功能的权限"
:placeholder-image="placeholderTk" :contacts="serviceContacts">
<TkWorkbenches :key="tkWorkbenchKey" />
</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">
<PermissionMask
permission-key="crawl"
title="主播列表未开通"
description="您当前没有使用主播列表功能的权限"
:placeholder-image="placeholderHosts"
:contacts="serviceContacts"
>
<PermissionMask permission-key="crawl" title="主播列表未开通" description="您当前没有使用主播列表功能的权限"
:placeholder-image="placeholderHosts" :contacts="serviceContacts">
<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">
<PermissionMask
permission-key="bigBrother"
title="大哥工作台未开通"
description="您当前没有使用大哥工作台功能的权限"
:placeholder-image="placeholderBigBrother"
:contacts="serviceContacts"
>
<PermissionMask permission-key="bigBrother" title="大哥工作台未开通" description="您当前没有使用大哥工作台功能的权限"
:placeholder-image="placeholderBigBrother" :contacts="serviceContacts">
<FanWorkbench />
</PermissionMask>
</div>
@@ -151,16 +126,13 @@
<!-- Tab 6: yolo商店 - Electron 用 BrowserView，Web 用 iframe 兜底 -->
<div v-show="currentView === 'shop'" class="absolute inset-0 z-20 h-full overflow-hidden">
<div v-if="isElectron()" class="w-full h-full flex items-center justify-center text-base text-slate-500 bg-white">
<div v-if="isElectron()"
class="w-full h-full flex items-center justify-center text-base text-slate-500 bg-white">
正在进入商店...
</div>
<iframe
v-else-if="adminLoaded"
:src="shopUrl"
class="w-full h-full border-0"
<iframe v-else-if="adminLoaded" :src="shopUrl" class="w-full h-full border-0"
allow="clipboard-read; clipboard-write"
sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-downloads"
></iframe>
sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-downloads"></iframe>
</div>
</div>
</div>
@@ -210,68 +182,78 @@ const shopOpened = ref(false) // Electron 只首开加载一次
const shopUrl = ENV.SHOP_URL
const sidebarRef = useTemplateRef('sidebarRef')
const navSidebarWidth = ref(200) // 左侧导航菜单的实际宽度（px），传给 YoloBrowser/Sidebar 使用
const tkWorkbenchKey = ref(0) // 用于触发 TK 工作台重新加载
// 重新加载 TK 工作台
const reloadTkWorkbench = () => {
tkWorkbenchKey.value++
console.log('TK 工作台已重新加载')
}
// 将重新加载 TK 工作台的方法挂载到 window 对象
window.reloadTkWorkbench = reloadTkWorkbench
// 客服名片
const serviceContacts = ref([])
const loadServiceContacts = async () => {
try {
const res = await getCustomServiceInfo()
console.log("获取名片",res)
if (res) {
serviceContacts.value = res.map(item => ({
avatar: item.avater,
name: item.name,
desc: item.description,
qrcode: item.concat,
phone: item.phone
}))
}
} catch (e) {
console.error('获取客服名片失败:', e)
try {
const res = await getCustomServiceInfo()
console.log("获取名片", res)
if (res) {
serviceContacts.value = res.map(item => ({
avatar: item.avater,
name: item.name,
desc: item.description,
qrcode: item.concat,
phone: item.phone
}))
}
} catch (e) {
console.error('获取客服名片失败:', e)
}
}
// 监听菜单栏实际宽度，通知后端更新 BrowserView 定位
let resizeObserver = null
const notifySidebarWidth = (width) => {
navSidebarWidth.value = Math.round(width)
if (isElectron()) {
window.electronAPI.setSidebarWidth(Math.round(width)).catch(() => {})
}
navSidebarWidth.value = Math.round(width)
if (isElectron()) {
window.electronAPI.setSidebarWidth(Math.round(width)).catch(() => { })
}
}
onMounted(() => {
loadServiceContacts()
if (!isElectron()) return
resizeObserver = new ResizeObserver((entries) => {
const width = entries[0]?.contentRect.width
if (width) notifySidebarWidth(width)
})
if (sidebarRef.value) {
resizeObserver.observe(sidebarRef.value)
// 立即上报初始宽度
notifySidebarWidth(sidebarRef.value.getBoundingClientRect().width)
}
loadServiceContacts()
if (!isElectron()) return
resizeObserver = new ResizeObserver((entries) => {
const width = entries[0]?.contentRect.width
if (width) notifySidebarWidth(width)
})
if (sidebarRef.value) {
resizeObserver.observe(sidebarRef.value)
// 立即上报初始宽度
notifySidebarWidth(sidebarRef.value.getBoundingClientRect().width)
}
})
onUnmounted(() => {
resizeObserver?.disconnect()
resizeObserver?.disconnect()
})
const handleGoToBrowser = async () => {
autoDmMode.value = 'browser'
if (isElectron()) {
await window.electronAPI.showViews()
}
autoDmMode.value = 'browser'
if (isElectron()) {
await window.electronAPI.showViews()
}
}
const handleBackToConfig = async () => {
autoDmMode.value = 'config'
if (isElectron()) {
await window.electronAPI.hideViews()
}
autoDmMode.value = 'config'
if (isElectron()) {
await window.electronAPI.hideViews()
}
}
const handleStopAll = () => {
emit('stop-all')
emit('stop-all')
}
// Watch for view changes to manage native Electron BrowserViews
@@ -325,13 +307,13 @@ watch(currentView, async (newVal, oldVal) => {
// 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()
}
if (currentView.value !== 'auto_dm') return
if (newVal === 'browser') {
if (isElectron()) await window.electronAPI.showViews()
} else {
if (isElectron()) await window.electronAPI.hideViews()
}
})
</script>
@@ -339,10 +321,7 @@ watch(autoDmMode, async (newVal) => {
/* 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');
.yolo-logo{
.yolo-logo {
width: 70%;
}
</style>