mfx/tkPage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui样式回滚修复

Browse Source
This commit is contained in:
没复习
2026-01-23 19:53:38 +08:00
parent 21eec1085a
commit 38f8fe9bd0
1 changed files with 34 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/views/hosts/workbenches.vue
View File

@@ -2,34 +2,38 @@
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-4"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-4">
<!-- Stat Cards --> <!-- Stat Cards -->
<!-- 总数量 (较小) --> <!-- 总数量 (较小) -->
<div class="lg:col-span-2 bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800"> <div
class="lg:col-span-2 bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800">
<div class="flex items-center justify-between mb-1"> <div class="flex items-center justify-between mb-1">
<span class="text-xs font-medium text-slate-500">{{ $t('workbenches.totalnumber') }}</span> <span class="text-xs font-medium text-slate-500">{{ $t('workbenches.totalnumber') }}</span>
<span class="material-icons-round text-primary/40 text-lg">analytics</span> <span class="material-icons-round text-primary/40 text-lg">analytics</span>
</div> </div>
<div class="text-xl font-bold text-slate-900 dark:text-white">{{ hostData.totalCount }}</div> <div class="text-xl font-bold text-slate-900 dark:text-white">{{ hostData.totalCount }}</div>
</div> </div>
<!-- 新建主播 (较小) --> <!-- 新建主播 (较小) -->
<div class="lg:col-span-2 bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800"> <div
class="lg:col-span-2 bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800">
<div class="flex items-center justify-between mb-1"> <div class="flex items-center justify-between mb-1">
<span class="text-xs font-medium text-slate-500">{{ $t('workbenches.createHost') }}</span> <span class="text-xs font-medium text-slate-500">{{ $t('workbenches.createHost') }}</span>
<span class="material-icons-round text-secondary/40 text-lg">person_add</span> <span class="material-icons-round text-secondary/40 text-lg">person_add</span>
</div> </div>
<div class="text-xl font-bold text-slate-900 dark:text-white">{{ hostData.validAnchorsCount }}</div> <div class="text-xl font-bold text-slate-900 dark:text-white">{{ hostData.validAnchorsCount }}</div>
</div> </div>
<!-- 查询 (较小) --> <!-- 查询 (较小) -->
<div class="lg:col-span-2 bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800"> <div
class="lg:col-span-2 bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800">
<div class="flex items-center justify-between mb-1"> <div class="flex items-center justify-between mb-1">
<span class="text-xs font-medium text-slate-500">{{ $t('workbenches.query') }}</span> <span class="text-xs font-medium text-slate-500">{{ $t('workbenches.query') }}</span>
<span class="material-icons-round text-amber-400/60 text-lg">search</span> <span class="material-icons-round text-amber-400/60 text-lg">search</span>
</div> </div>
<div class="text-xl font-bold text-slate-900 dark:text-white">{{ hostData.checkedDataCount }}</div> <div class="text-xl font-bold text-slate-900 dark:text-white">{{ hostData.checkedDataCount }}</div>
</div> </div>
<!-- 邀请 (较大，突出显示) --> <!-- 邀请 (较大，突出显示) -->
<div class="lg:col-span-3 bg-gradient-to-br from-primary to-blue-600 p-5 rounded-xl shadow-lg shadow-primary/20 text-white relative overflow-hidden"> <div
class="lg:col-span-3 bg-gradient-to-br from-primary to-blue-600 p-5 rounded-xl shadow-lg shadow-primary/20 text-white relative overflow-hidden">
<div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2"></div> <div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
<div class="flex items-center justify-between mb-2 relative z-10"> <div class="flex items-center justify-between mb-2 relative z-10">
<span class="text-sm font-medium text-white/80">{{ $t('workbenches.invite') }}</span> <span class="text-sm font-medium text-white/80">{{ $t('workbenches.invite') }}</span>
@@ -38,9 +42,10 @@
<div class="text-3xl font-bold text-white relative z-10">{{ hostData.canInvitationCount }}</div> <div class="text-3xl font-bold text-white relative z-10">{{ hostData.canInvitationCount }}</div>
<div class="text-xs text-white/60 mt-1">可邀请主播</div> <div class="text-xs text-white/60 mt-1">可邀请主播</div>
</div> </div>
<!-- 运行时间 (较大) --> <!-- 运行时间 (较大) -->
<div class="lg:col-span-3 bg-white dark:bg-slate-900 p-5 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800 flex flex-col justify-center"> <div
class="lg:col-span-3 bg-white dark:bg-slate-900 p-5 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800 flex flex-col justify-center">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block mb-1">{{ <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block mb-1">{{
@@ -48,7 +53,7 @@
<div class="text-2xl font-mono font-bold text-primary">{{ formattedTime }}</div> <div class="text-2xl font-mono font-bold text-primary">{{ formattedTime }}</div>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full" :class="isTkLoggedIn ? 'bg-emerald-500' : 'bg-red-500'"></span> <span class="w-4 h-4 rounded-full" :class="isTkLoggedIn ? 'bg-emerald-500' : 'bg-red-500'"></span>
<button @click="openTK" <button @click="openTK"
class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-semibold shadow-lg shadow-primary/25"> class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-semibold shadow-lg shadow-primary/25">
{{ $t('workbenches.openTK') }} {{ $t('workbenches.openTK') }}
@@ -63,33 +68,25 @@
<div v-for="(item, index) in 2" :key="index" class="bg-white border border-slate-100 p-5 rounded-xl shadow-sm"> <div v-for="(item, index) in 2" :key="index" class="bg-white border border-slate-100 p-5 rounded-xl shadow-sm">
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full" :class="tkData[index].code == 1 ? 'bg-emerald-500' : 'bg-red-500'"></span> <span class="w-4 h-4 rounded-full" :class="tkData[index].code == 1 ? 'bg-emerald-500' : 'bg-red-500'"></span>
<h3 class="font-bold text-slate-800 dark:text-white">{{ $t('workbenches.guildAccount') }} {{ index === 0 ? 'A' <h3 class="font-bold text-slate-800 dark:text-white">{{ $t('workbenches.guildAccount') }} {{ index === 0 ? 'A'
: 'B' }}</h3> : 'B' }}</h3>
</div> </div>
<span class="text-xs text-slate-500">{{ $t('workbenches.queriedNum') }}: {{ tkData[index].num }}</span> <span class=" text-slate-500" style="font-size: 17px;">{{ $t('workbenches.queriedNum') }}: {{
tkData[index].num }}</span>
</div> </div>
<div class="space-y-4"> <div class="space-y-4">
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
<div> <div>
<label class="text-xs font-semibold text-slate-500 mb-1 block">{{ $t('workbenches.guildAccount') }}</label> <label class="text-xs font-semibold text-slate-500 mb-1 block">{{ $t('workbenches.guildAccount') }}</label>
<el-input <el-input v-model="tkData[index].account" :placeholder="$t('workbenches.guildAccountPlace')"
v-model="tkData[index].account" :disabled="!(tkData[index].code == 0 && !isLogin[index])" class="el-input-custom" />
:placeholder="$t('workbenches.guildAccountPlace')"
:disabled="!(tkData[index].code == 0 && !isLogin[index])"
class="el-input-custom"
/>
</div> </div>
<div> <div>
<label class="text-xs font-semibold text-slate-500 mb-1 block">{{ $t('workbenches.guildPass') }}</label> <label class="text-xs font-semibold text-slate-500 mb-1 block">{{ $t('workbenches.guildPass') }}</label>
<el-input <el-input v-model="tkData[index].password" type="password" show-password
v-model="tkData[index].password" :placeholder="$t('workbenches.guildPassPlace')" :disabled="!(tkData[index].code == 0 && !isLogin[index])"
type="password" class="el-input-custom" />
show-password
:placeholder="$t('workbenches.guildPassPlace')"
:disabled="!(tkData[index].code == 0 && !isLogin[index])"
class="el-input-custom"
/>
</div> </div>
</div> </div>
<button @click="loginTK(index)" :disabled="!(tkData[index].code == 0 && !isLogin[index])" <button @click="loginTK(index)" :disabled="!(tkData[index].code == 0 && !isLogin[index])"
@@ -101,7 +98,8 @@
</div> </div>
<!-- Configuration Panel --> <!-- Configuration Panel -->
<div class="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800 overflow-hidden"> <div
class="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800 overflow-hidden">
<div class="p-6 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center"> <div class="p-6 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div class="w-8 h-8 bg-slate-100 dark:bg-slate-800 rounded-lg flex items-center justify-center"> <div class="w-8 h-8 bg-slate-100 dark:bg-slate-800 rounded-lg flex items-center justify-center">
@@ -240,30 +238,24 @@
class="flex flex-col lg:flex-row items-center justify-between gap-6 pt-4 border-t border-slate-100 dark:border-slate-800"> class="flex flex-col lg:flex-row items-center justify-between gap-6 pt-4 border-t border-slate-100 dark:border-slate-800">
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
<div class="flex items-center gap-2 cursor-pointer group" @click="toggleFilter('filterGame')"> <div class="flex items-center gap-2 cursor-pointer group" @click="toggleFilter('filterGame')">
<span <span class="w-4 h-4 rounded border-2 flex items-center justify-center transition-all"
class="w-4 h-4 rounded border-2 flex items-center justify-center transition-all" :class="pyData.filterGame ? 'bg-primary border-primary' : 'bg-white border-slate-300'">
:class="pyData.filterGame ? 'bg-primary border-primary' : 'bg-white border-slate-300'"
>
<span v-if="pyData.filterGame" class="material-icons-round text-white text-xs">check</span> <span v-if="pyData.filterGame" class="material-icons-round text-white text-xs">check</span>
</span> </span>
<span <span
class="text-sm text-slate-600 dark:text-slate-400 group-hover:text-primary transition-colors">过滤游戏主播</span> class="text-sm text-slate-600 dark:text-slate-400 group-hover:text-primary transition-colors">过滤游戏主播</span>
</div> </div>
<div class="flex items-center gap-2 cursor-pointer group" @click="toggleFilter('filterSelling')"> <div class="flex items-center gap-2 cursor-pointer group" @click="toggleFilter('filterSelling')">
<span <span class="w-4 h-4 rounded border-2 flex items-center justify-center transition-all"
class="w-4 h-4 rounded border-2 flex items-center justify-center transition-all" :class="pyData.filterSelling ? 'bg-primary border-primary' : 'bg-white border-slate-300'">
:class="pyData.filterSelling ? 'bg-primary border-primary' : 'bg-white border-slate-300'"
>
<span v-if="pyData.filterSelling" class="material-icons-round text-white text-xs">check</span> <span v-if="pyData.filterSelling" class="material-icons-round text-white text-xs">check</span>
</span> </span>
<span <span
class="text-sm text-slate-600 dark:text-slate-400 group-hover:text-primary transition-colors">过滤带货主播</span> class="text-sm text-slate-600 dark:text-slate-400 group-hover:text-primary transition-colors">过滤带货主播</span>
</div> </div>
<div class="flex items-center gap-2 cursor-pointer group" @click="toggleFilter('rankingList')"> <div class="flex items-center gap-2 cursor-pointer group" @click="toggleFilter('rankingList')">
<span <span class="w-4 h-4 rounded border-2 flex items-center justify-center transition-all"
class="w-4 h-4 rounded border-2 flex items-center justify-center transition-all" :class="pyData.rankingList ? 'bg-primary border-primary' : 'bg-white border-slate-300'">
:class="pyData.rankingList ? 'bg-primary border-primary' : 'bg-white border-slate-300'"
>
<span v-if="pyData.rankingList" class="material-icons-round text-white text-xs">check</span> <span v-if="pyData.rankingList" class="material-icons-round text-white text-xs">check</span>
</span> </span>
<span <span
@@ -634,14 +626,14 @@ const openTK = () => {
// isTk.value = true; // isTk.value = true;
// console.log(isTk.value) // console.log(isTk.value)
loginTikTok(); loginTikTok();
// 开始轮询TK登录状态 // 开始轮询TK登录状态
if (tkStatusTimer.value) { if (tkStatusTimer.value) {
clearInterval(tkStatusTimer.value); clearInterval(tkStatusTimer.value);
} }
tkStatusTimer.value = setInterval(() => { tkStatusTimer.value = setInterval(() => {
checkTkLoginStatus(); checkTkLoginStatus();
}, 3000); }, 3000);
} }
// 检查TK登录状态 // 检查TK登录状态
@@ -697,7 +689,7 @@ function tkaccountuse(id, index) {
}).catch((err) => { }).catch((err) => {
console.log('账号使用次数', err) console.log('账号使用次数', err)
}) })
} }
const isRunning = ref(false); const isRunning = ref(false);