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-04-24 17:47:07 +08:00
parent c4ba3e1e40
commit 410c0377d6
2 changed files with 53 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/HostListDialog.vue
View File

@@ -115,7 +115,18 @@
<label class="flex items-center gap-2 border-l border-gray-200 pl-4 ml-2 cursor-pointer"> <label class="flex items-center gap-2 border-l border-gray-200 pl-4 ml-2 cursor-pointer">
<input type="checkbox" v-model="gateEnabled" class="w-4 h-4" /> <input type="checkbox" v-model="gateEnabled" class="w-4 h-4" />
<span class="text-gray-700 font-medium whitespace-nowrap">上下限模式</span> <span class="text-gray-700 font-medium whitespace-nowrap">上下限模式</span>
<span class="relative inline-flex items-center group">
<span
class="inline-flex h-5 w-5 items-center justify-center rounded-full border border-gray-300 bg-gray-50 text-xs font-semibold text-gray-500">?</span>
<span
class="pointer-events-none absolute left-1/2 top-full z-50 mt-2 hidden w-72 -translate-x-1/2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs leading-5 text-gray-600 shadow-xl group-hover:block">
{{ hostListGateHelpText }}
</span>
</span>
</label> </label>
<span v-if="gateEnabled" class="text-xs font-medium text-red-500 whitespace-nowrap">
该模式会大幅影响采集主播的速度
</span>
<!-- 接收上下限 - 紧凑布局 --> <!-- 接收上下限 - 紧凑布局 -->
<div class="flex items-center gap-2 border-l border-gray-200 pl-4 ml-2"> <div class="flex items-center gap-2 border-l border-gray-200 pl-4 ml-2">
@@ -334,6 +345,7 @@ const minCount = ref(5)
const maxCount = ref() const maxCount = ref()
const selectedLevels = ref(new Set()) const selectedLevels = ref(new Set())
const showLevelDropdown = ref(false) const showLevelDropdown = ref(false)
const hostListGateHelpText = '从 TK 工作台采集到的主播会进入主播库。开启上下限模式后，到达接收上限时采集会暂停；只有当主播库数量低于主播下限时，采集才会继续查验主播并重新进入主播库。'
const resolveRestrictedMaxAnchorCount = (fallbackValue = 9999999) => { const resolveRestrictedMaxAnchorCount = (fallbackValue = 9999999) => {
const permissions = getPermissions() const permissions = getPermissions()

59
src/layout/WorkbenchLayout.vue
View File

@@ -11,65 +11,74 @@
<div class="flex-1 flex flex-col w-full px-2" style="gap: 2vh;"> <div class="flex-1 flex flex-col w-full px-2" style="gap: 2vh;">
<button @click="currentView = 'tk'" <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)]'"> :class="currentView === 'tk' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'"
title="TK 工作台">
<img :src="currentView === 'tk' ? nav11 : nav1" class="w-9 h-9 object-contain flex-shrink-0" /> <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> <span class="menu-label">TK 工作台</span>
</button> </button>
<button @click="currentView = 'hosts'" <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)]'"> :class="currentView === 'hosts' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'"
title="主播列表">
<img :src="currentView === 'hosts' ? nav22 : nav2" class="w-9 h-9 object-contain flex-shrink-0" /> <img :src="currentView === 'hosts' ? nav22 : nav2" class="w-9 h-9 object-contain flex-shrink-0" />
<span class="text-base font-medium truncate">主播列表</span> <span class="menu-label">主播列表</span>
</button> </button>
<button @click="currentView = 'auto_dm'" <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)]'"> :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)]'"
title="自动私信（即时消息）">
<img :src="currentView === 'auto_dm' ? nav33 : nav3" class="w-9 h-9 object-contain flex-shrink-0" /> <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> <span class="menu-label">自动私信（即时消息）</span>
</button> </button>
<button @click="currentView = 'auto_dm_tk'" <button @click="currentView = 'auto_dm_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 === 'auto_dm_tk' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'"> :class="currentView === 'auto_dm_tk' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'"
title="自动私信TK版">
<img :src="currentView === 'auto_dm_tk' ? nav33 : nav3" class="w-9 h-9 object-contain flex-shrink-0" /> <img :src="currentView === 'auto_dm_tk' ? nav33 : nav3" class="w-9 h-9 object-contain flex-shrink-0" />
<span class="text-base font-medium truncate">自动私信TK版</span> <span class="menu-label">自动私信TK版</span>
</button> </button>
<button @click="currentView = 'FanWorkbench'" <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)]'"> :class="currentView === 'FanWorkbench' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'"
title="大哥工作台">
<img :src="currentView === 'FanWorkbench' ? nav44 : nav4" class="w-9 h-9 object-contain flex-shrink-0" /> <img :src="currentView === 'FanWorkbench' ? nav44 : nav4" class="w-9 h-9 object-contain flex-shrink-0" />
<span class="text-base font-medium truncate">大哥工作台</span> <span class="menu-label">大哥工作台</span>
</button> </button>
<button @click="currentView = 'pk_mini'" <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)]'"> :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)]'"
title="PK 工作台">
<img :src="currentView === 'pk_mini' ? nav55 : nav5" class="w-9 h-9 object-contain flex-shrink-0" /> <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> <span class="menu-label">PK 工作台</span>
</button> </button>
<button @click="currentView = 'shop'" <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)]'"> :class="currentView === 'shop' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'"
title="TK商店">
<img :src="currentView === 'shop' ? nav66 : nav6" class="w-9 h-9 object-contain flex-shrink-0" /> <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> <span class="menu-label">TK商店</span>
</button> </button>
<button <button
class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200 text-slate-400 hover:bg-[rgba(21,96,250,0.06)]" class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200 text-slate-400 hover:bg-[rgba(21,96,250,0.06)]"
style="height: 6vh;"> style="height: 6vh;"
<span class="text-base font-medium truncate">敬请期待...</span> title="敬请期待">
<span class="menu-label">敬请期待...</span>
</button> </button>
</div> </div>
<div class="mt-auto w-full px-2"> <div class="mt-auto w-full px-2">
<button @click="$emit('logout')" <button @click="$emit('logout')"
class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 text-slate-400 bg-white shadow shadow-blue-900/20 transition-all"> class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 text-slate-400 bg-white shadow shadow-blue-900/20 transition-all"
title="退出登录">
<img :src="backIcon" class="w-9 h-9 object-contain flex-shrink-0" /> <img :src="backIcon" class="w-9 h-9 object-contain flex-shrink-0" />
<span class="text-base font-medium" style="color: #ED4949;">退出登录</span> <span class="menu-label" style="color: #ED4949;">退出登录</span>
</button> </button>
</div> </div>
</div> </div>
@@ -308,4 +317,18 @@ watch(autoDmMode, async (newVal) => {
.yolo-logo { .yolo-logo {
width: 70%; width: 70%;
} }
.menu-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-align: left;
font-size: 1rem;
font-weight: 500;
line-height: 1.2;
word-break: break-word;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
</style> </style>