删除深色模式的样式
This commit is contained in:
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="h-full w-full overflow-y-auto bg-gray-50 p-6">
|
||||
<div class="bg-white dark:bg-slate-900 rounded-3xl shadow-sm border border-slate-100 dark:border-slate-800 p-6 h-full flex flex-col">
|
||||
<div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-6 h-full flex flex-col">
|
||||
<!-- 顶部筛选区域 -->
|
||||
<div class="mb-6 space-y-4">
|
||||
<!-- 第一行：主要筛选条件 -->
|
||||
<div class="flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex items-center flex-wrap gap-4">
|
||||
<el-checkbox v-model="queryFormData.isFilter" :label="$t('hostsList.filterPrivateUsers') || '过滤私密账号'" size="large"
|
||||
class="!mr-0" />
|
||||
<el-checkbox v-model="queryFormData.isFilter" :label="$t('hostsList.filterPrivateUsers') || '过滤私密账号'"
|
||||
size="large" class="!mr-0" />
|
||||
|
||||
<!-- Coins Input -->
|
||||
<div class="flex flex-col gap-1">
|
||||
@@ -15,11 +15,11 @@
|
||||
<span>💰</span> {{ $t('hostsList.coins') || '金币' }}
|
||||
</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<el-input v-model="queryFormData.coinMin" :placeholder="$t('hostsList.minCoins') || '最小'" style="width: 100px"
|
||||
type="number" :disabled="streamdialogVisibletext || isRunnings" />
|
||||
<el-input v-model="queryFormData.coinMin" :placeholder="$t('hostsList.minCoins') || '最小'"
|
||||
style="width: 100px" type="number" :disabled="streamdialogVisibletext || isRunnings" />
|
||||
<span class="text-slate-300">/</span>
|
||||
<el-input v-model="queryFormData.coinMax" :placeholder="$t('hostsList.maxCoins') || '最大'" style="width: 100px"
|
||||
type="number" :disabled="streamdialogVisibletext || isRunnings" />
|
||||
<el-input v-model="queryFormData.coinMax" :placeholder="$t('hostsList.maxCoins') || '最大'"
|
||||
style="width: 100px" type="number" :disabled="streamdialogVisibletext || isRunnings" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -29,20 +29,22 @@
|
||||
<span>📊</span> {{ $t('hostsList.level') || '等级' }}
|
||||
</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<el-input v-model="queryFormData.levelMin" :placeholder="$t('hostsList.minLevel') || '最小'" style="width: 100px"
|
||||
type="number" :disabled="streamdialogVisibletext || isRunnings" />
|
||||
<el-input v-model="queryFormData.levelMin" :placeholder="$t('hostsList.minLevel') || '最小'"
|
||||
style="width: 100px" type="number" :disabled="streamdialogVisibletext || isRunnings" />
|
||||
<span class="text-slate-300">/</span>
|
||||
<el-input v-model="queryFormData.levelMax" :placeholder="$t('hostsList.maxLevel') || '最大'" style="width: 100px"
|
||||
type="number" :disabled="streamdialogVisibletext || isRunnings" />
|
||||
<el-input v-model="queryFormData.levelMax" :placeholder="$t('hostsList.maxLevel') || '最大'"
|
||||
style="width: 100px" type="number" :disabled="streamdialogVisibletext || isRunnings" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Pill -->
|
||||
<div class="bg-white/60 border border-slate-200 rounded-full px-5 py-2 flex items-center gap-4 text-sm shadow-sm">
|
||||
<div
|
||||
class="bg-white/60 border border-slate-200 rounded-full px-5 py-2 flex items-center gap-4 text-sm shadow-sm">
|
||||
<span class="font-medium text-slate-500">{{ $t('hostsList.runningTime') || '运行时间' }}:</span>
|
||||
<span class="font-mono font-bold text-slate-700">
|
||||
{{ String(hourstuo).padStart(2, '0') }}:{{ String(minutestuo).padStart(2, '0') }}:{{ String(secondstuo).padStart(2, '0') }}
|
||||
{{ String(hourstuo).padStart(2, '0') }}:{{ String(minutestuo).padStart(2, '0') }}:{{
|
||||
String(secondstuo).padStart(2, '0') }}
|
||||
</span>
|
||||
<div class="w-px h-4 bg-slate-200"></div>
|
||||
<span class="font-medium text-slate-500">{{ $t('hostsList.total') || '总数' }}:</span>
|
||||
@@ -57,7 +59,8 @@
|
||||
<el-button @click="streamdialogVisible = true" :disabled="isRunnings" type="primary"
|
||||
class="!rounded-xl !font-semibold shadow-lg shadow-blue-500/20">
|
||||
<span class="mr-1">📍</span>
|
||||
{{ streamdialogVisibletext ? ($t('hostsList.specifiedRooms') || '已指定') : ($t('hostsList.specifyRooms') || '指定直播间') }}
|
||||
{{ streamdialogVisibletext ? ($t('hostsList.specifiedRooms') || '已指定') : ($t('hostsList.specifyRooms') ||
|
||||
'指定直播间') }}
|
||||
</el-button>
|
||||
|
||||
<el-button v-show="!isRunnings" type="success" @click="getBigBrother"
|
||||
@@ -77,11 +80,13 @@
|
||||
<!-- 第二行：搜索和操作 -->
|
||||
<div class="flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<el-select v-model="searchForm.region" filterable :placeholder="$t('hostsList.selectCountry') || '选择国家'" style="width: 160px">
|
||||
<el-select v-model="searchForm.region" filterable :placeholder="$t('hostsList.selectCountry') || '选择国家'"
|
||||
style="width: 160px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<el-input v-model="searchForm.displayId" :placeholder="$t('hostsList.bigBrotherId') || '大哥ID'" style="width: 180px" clearable>
|
||||
<el-input v-model="searchForm.displayId" :placeholder="$t('hostsList.bigBrotherId') || '大哥ID'"
|
||||
style="width: 180px" clearable>
|
||||
<template #prefix>
|
||||
<span class="font-semibold text-slate-400">@</span>
|
||||
</template>
|
||||
@@ -120,7 +125,8 @@
|
||||
<button @click="refreshCountry" :disabled="isRefreshingCountry"
|
||||
class="p-1 rounded-md hover:bg-slate-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
:title="$t('hostsList.refreshCountry') || '刷新国家'">
|
||||
<span class="material-icons-round text-slate-500 text-base" :class="{ 'animate-spin': isRefreshingCountry }">refresh</span>
|
||||
<span class="material-icons-round text-slate-500 text-base"
|
||||
:class="{ 'animate-spin': isRefreshingCountry }">refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -132,7 +138,8 @@
|
||||
@cell-dblclick="handleCellDbClick" @selection-change="handleSelectionChange">
|
||||
<el-table-column fixed prop="displayId" :label="$t('hostsList.id') || 'ID'" min-width="120">
|
||||
<template #default="scope">
|
||||
<div class="text-primary font-semibold cursor-pointer hover:underline" @click="openHTML(scope.row.displayId)">
|
||||
<div class="text-primary font-semibold cursor-pointer hover:underline"
|
||||
@click="openHTML(scope.row.displayId)">
|
||||
{{ scope.row.displayId }}
|
||||
</div>
|
||||
</template>
|
||||
@@ -140,7 +147,8 @@
|
||||
|
||||
<el-table-column prop="hostDisplayId" :label="$t('hostsList.hostId') || '主播ID'" min-width="120">
|
||||
<template #default="scope">
|
||||
<div class="text-primary font-semibold cursor-pointer hover:underline" @click.ctrl.exact="handleLongPress(scope.row.hostDisplayId)">
|
||||
<div class="text-primary font-semibold cursor-pointer hover:underline"
|
||||
@click.ctrl.exact="handleLongPress(scope.row.hostDisplayId)">
|
||||
{{ scope.row.hostDisplayId }}
|
||||
</div>
|
||||
</template>
|
||||
@@ -175,9 +183,11 @@
|
||||
<div v-for="(field, index) in fields" :key="index" class="grid grid-cols-12 gap-4 items-center">
|
||||
<div class="col-span-3 text-right text-gray-600">{{ field.label }}</div>
|
||||
<div class="col-span-9 flex gap-2 items-center">
|
||||
<el-input type="number" v-model.number="searchForm[field.minModel]" :placeholder="$t('hostsList.minValue') || '最小值'" />
|
||||
<span>-</span>
|
||||
<el-input type="number" v-model.number="searchForm[field.maxModel]" :placeholder="$t('hostsList.maxValue') || '最大值'" />
|
||||
<el-input type="number" v-model.number="searchForm[field.minModel]"
|
||||
:placeholder="$t('hostsList.minValue') || '最小值'" />
|
||||
<span>-</span>
|
||||
<el-input type="number" v-model.number="searchForm[field.maxModel]"
|
||||
:placeholder="$t('hostsList.maxValue') || '最大值'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -188,8 +198,8 @@
|
||||
<el-option v-for="item in sortNameOptions" :key="item.type" :label="item.label" :value="item.type" />
|
||||
</el-select>
|
||||
<el-select v-model="sortData.sort" class="w-full">
|
||||
<el-option :label="$t('hostsList.ascending') || '升序'" value="asc" />
|
||||
<el-option :label="$t('hostsList.descending') || '降序'" value="desc" />
|
||||
<el-option :label="$t('hostsList.ascending') || '升序'" value="asc" />
|
||||
<el-option :label="$t('hostsList.descending') || '降序'" value="desc" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -207,14 +217,14 @@
|
||||
<el-input v-model="textarea" :rows="10" type="textarea"
|
||||
:placeholder="$t('hostsList.enterRoomIds') || '请输入房间ID，每行一个'" @input="handleInput" />
|
||||
<div class="mt-2 text-sm text-slate-500">
|
||||
{{ currentLineCount }} / {{ maxSpecifyLines }}
|
||||
{{ currentLineCount }} / {{ maxSpecifyLines }}
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<el-button @click="specifyCancel">{{ $t('hostsList.cancelSpecify') || '取消指定' }}</el-button>
|
||||
<el-button @click="specifyreset">{{ $t('hostsList.specifyReset') || '重置' }}</el-button>
|
||||
<el-button type="primary" @click="specifyClick">{{ $t('hostsList.specifyConfirm') || '确认' }}</el-button>
|
||||
<el-button type="success" @click="specifyClickStart">{{ $t('hostsList.specifyStart') || '确认并开始' }}</el-button>
|
||||
<el-button @click="specifyCancel">{{ $t('hostsList.cancelSpecify') || '取消指定' }}</el-button>
|
||||
<el-button @click="specifyreset">{{ $t('hostsList.specifyReset') || '重置' }}</el-button>
|
||||
<el-button type="primary" @click="specifyClick">{{ $t('hostsList.specifyConfirm') || '确认' }}</el-button>
|
||||
<el-button type="success" @click="specifyClickStart">{{ $t('hostsList.specifyStart') || '确认并开始' }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@@ -330,32 +340,32 @@ const timerId = ref(null);
|
||||
|
||||
// Lifecycle
|
||||
onMounted(async () => {
|
||||
userInfo.value = getUser() || { tenantId: 0, id: 0 };
|
||||
userInfo.value = getUser() || { tenantId: 0, id: 0 };
|
||||
|
||||
// 初始化独立的国家信息
|
||||
await initCountryInfo(t);
|
||||
// 初始化独立的国家信息
|
||||
await initCountryInfo(t);
|
||||
|
||||
getCountry();
|
||||
getlist();
|
||||
getCountry();
|
||||
getlist();
|
||||
|
||||
const savedSettings = await readSetInfos({ key: "UserSettings" });
|
||||
if (savedSettings) {
|
||||
try {
|
||||
// savedSettings might be object already if backend returned object, or string
|
||||
const data = typeof savedSettings === 'string' ? JSON.parse(savedSettings) : savedSettings;
|
||||
queryFormData.value = data;
|
||||
const savedSettings = await readSetInfos({ key: "UserSettings" });
|
||||
if (savedSettings) {
|
||||
try {
|
||||
// savedSettings might be object already if backend returned object, or string
|
||||
const data = typeof savedSettings === 'string' ? JSON.parse(savedSettings) : savedSettings;
|
||||
queryFormData.value = data;
|
||||
|
||||
if (data.anchor_ids && data.anchor_ids.length > 0) {
|
||||
streamdialogVisibletext.value = true;
|
||||
textarea.value = data.anchor_ids.join("\n");
|
||||
}
|
||||
} catch(e) { console.error("Error parsing settings", e); }
|
||||
}
|
||||
if (data.anchor_ids && data.anchor_ids.length > 0) {
|
||||
streamdialogVisibletext.value = true;
|
||||
textarea.value = data.anchor_ids.join("\n");
|
||||
}
|
||||
} catch (e) { console.error("Error parsing settings", e); }
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
stopTimerfun();
|
||||
if (timerId.value) clearInterval(timerId.value);
|
||||
stopTimerfun();
|
||||
if (timerId.value) clearInterval(timerId.value);
|
||||
});
|
||||
|
||||
// Methods
|
||||
@@ -374,33 +384,33 @@ const getlist = () => {
|
||||
loading.value = true;
|
||||
// Use API if available, else mock
|
||||
if (typeof tkbigdata === 'function') {
|
||||
tkbigdata({
|
||||
tenantId: Number(userInfo.value.tenantId),
|
||||
sort: sortData.value.sort,
|
||||
sortName: sortData.value.sortName,
|
||||
current: page.value,
|
||||
pageSize: pageSize.value,
|
||||
createTimeStart: createTimes.value[0],
|
||||
createTimeEnd: createTimes.value[1],
|
||||
...searchForm.value,
|
||||
}).then((res) => {
|
||||
loading.value = false;
|
||||
if (res && res.records) {
|
||||
total.value = Number(res.total);
|
||||
tableData.value = res.records.map((item) => ({
|
||||
...item,
|
||||
createTime: formatDate(new Date(item.createTime)),
|
||||
}));
|
||||
}
|
||||
}).catch(e => {
|
||||
console.log("Mocking data due to error", e);
|
||||
loading.value = false;
|
||||
// Mock data
|
||||
tableData.value = [];
|
||||
});
|
||||
} else {
|
||||
console.warn("tkbigdata API not found");
|
||||
tkbigdata({
|
||||
tenantId: Number(userInfo.value.tenantId),
|
||||
sort: sortData.value.sort,
|
||||
sortName: sortData.value.sortName,
|
||||
current: page.value,
|
||||
pageSize: pageSize.value,
|
||||
createTimeStart: createTimes.value[0],
|
||||
createTimeEnd: createTimes.value[1],
|
||||
...searchForm.value,
|
||||
}).then((res) => {
|
||||
loading.value = false;
|
||||
if (res && res.records) {
|
||||
total.value = Number(res.total);
|
||||
tableData.value = res.records.map((item) => ({
|
||||
...item,
|
||||
createTime: formatDate(new Date(item.createTime)),
|
||||
}));
|
||||
}
|
||||
}).catch(e => {
|
||||
console.log("Mocking data due to error", e);
|
||||
loading.value = false;
|
||||
// Mock data
|
||||
tableData.value = [];
|
||||
});
|
||||
} else {
|
||||
console.warn("tkbigdata API not found");
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -439,20 +449,20 @@ function getBigBrother() {
|
||||
}
|
||||
|
||||
function BigBrotherstop() {
|
||||
stopTimerfun();
|
||||
isRunnings.value = false;
|
||||
queryFormData.value.isRunning = false;
|
||||
queryFormData.value.tenantId = userInfo.value.tenantId;
|
||||
queryFormData.value.region = countryData.value;
|
||||
stopTimerfun();
|
||||
isRunnings.value = false;
|
||||
queryFormData.value.isRunning = false;
|
||||
queryFormData.value.tenantId = userInfo.value.tenantId;
|
||||
queryFormData.value.region = countryData.value;
|
||||
|
||||
controlTask(JSON.stringify(queryFormData.value)).then(() => {
|
||||
clearInterval(timerId.value);
|
||||
timerId.value = null;
|
||||
});
|
||||
Specifystreaming(JSON.stringify(queryFormData.value)).then(() => {
|
||||
clearInterval(timerId.value);
|
||||
timerId.value = null;
|
||||
});
|
||||
controlTask(JSON.stringify(queryFormData.value)).then(() => {
|
||||
clearInterval(timerId.value);
|
||||
timerId.value = null;
|
||||
});
|
||||
Specifystreaming(JSON.stringify(queryFormData.value)).then(() => {
|
||||
clearInterval(timerId.value);
|
||||
timerId.value = null;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -498,114 +508,114 @@ function handleInput(value) {
|
||||
}
|
||||
|
||||
function specifyClickStart() {
|
||||
if (!textarea.value.trim()) {
|
||||
ElMessage.error(t('hostsList.enterRoomId') || "请输入房间ID");
|
||||
return;
|
||||
}
|
||||
queryFormData.value.anchor_ids = textarea.value.split("\n").filter(id => id.trim());
|
||||
streamdialogVisible.value = false;
|
||||
streamdialogVisibletext.value = true;
|
||||
getBigBrother();
|
||||
if (!textarea.value.trim()) {
|
||||
ElMessage.error(t('hostsList.enterRoomId') || "请输入房间ID");
|
||||
return;
|
||||
}
|
||||
queryFormData.value.anchor_ids = textarea.value.split("\n").filter(id => id.trim());
|
||||
streamdialogVisible.value = false;
|
||||
streamdialogVisibletext.value = true;
|
||||
getBigBrother();
|
||||
}
|
||||
|
||||
function specifyClick() {
|
||||
if (!textarea.value.trim()) {
|
||||
streamdialogVisibletext.value = false;
|
||||
queryFormData.value.anchor_ids = [];
|
||||
} else {
|
||||
streamdialogVisibletext.value = true;
|
||||
queryFormData.value.anchor_ids = textarea.value.split("\n").filter(id => id.trim());
|
||||
}
|
||||
streamdialogVisible.value = false;
|
||||
if (!textarea.value.trim()) {
|
||||
streamdialogVisibletext.value = false;
|
||||
queryFormData.value.anchor_ids = [];
|
||||
} else {
|
||||
streamdialogVisibletext.value = true;
|
||||
queryFormData.value.anchor_ids = textarea.value.split("\n").filter(id => id.trim());
|
||||
}
|
||||
streamdialogVisible.value = false;
|
||||
}
|
||||
|
||||
function specifyCancel() {
|
||||
streamdialogVisible.value = false;
|
||||
streamdialogVisibletext.value = false;
|
||||
queryFormData.value.anchor_ids = [];
|
||||
textarea.value = "";
|
||||
streamdialogVisible.value = false;
|
||||
streamdialogVisibletext.value = false;
|
||||
queryFormData.value.anchor_ids = [];
|
||||
textarea.value = "";
|
||||
}
|
||||
|
||||
function specifyreset() {
|
||||
textarea.value = "";
|
||||
textarea.value = "";
|
||||
}
|
||||
|
||||
// Table / Filter Logic
|
||||
function serch() {
|
||||
page.value = 1;
|
||||
getlist();
|
||||
page.value = 1;
|
||||
getlist();
|
||||
}
|
||||
|
||||
function reset() {
|
||||
searchForm.value = {};
|
||||
createTimes.value = [];
|
||||
sortData.value = { sortName: "createTime", sort: "desc" };
|
||||
getlist();
|
||||
searchForm.value = {};
|
||||
createTimes.value = [];
|
||||
sortData.value = { sortName: "createTime", sort: "desc" };
|
||||
getlist();
|
||||
}
|
||||
|
||||
function handelClick() {
|
||||
filterdialogVisible.value = false;
|
||||
getlist();
|
||||
filterdialogVisible.value = false;
|
||||
getlist();
|
||||
}
|
||||
|
||||
function handleSizeChange(val) {
|
||||
pageSize.value = val;
|
||||
getlist();
|
||||
pageSize.value = val;
|
||||
getlist();
|
||||
}
|
||||
|
||||
function handleCurrentChange(val) {
|
||||
page.value = val;
|
||||
getlist();
|
||||
page.value = val;
|
||||
getlist();
|
||||
}
|
||||
|
||||
function handleSelectionChange(val) {
|
||||
//
|
||||
//
|
||||
}
|
||||
|
||||
function openHTML(id) {
|
||||
givePyAnchorId(id);
|
||||
givePyAnchorId(id);
|
||||
}
|
||||
|
||||
function handleLongPress(id) {
|
||||
openAnchorIdRooms(id);
|
||||
openAnchorIdRooms(id);
|
||||
}
|
||||
|
||||
function handleCellDbClick(row, column, cell) {
|
||||
const text = cell?.textContent?.trim();
|
||||
if (text) {
|
||||
setClipboards(text).then(() => ElMessage.success("Copied"));
|
||||
}
|
||||
const text = cell?.textContent?.trim();
|
||||
if (text) {
|
||||
setClipboards(text).then(() => ElMessage.success("Copied"));
|
||||
}
|
||||
}
|
||||
|
||||
function exportList() {
|
||||
exportToExcel(tableData.value);
|
||||
exportToExcel(tableData.value);
|
||||
}
|
||||
|
||||
function openTikTok() {
|
||||
loginBigTikTok();
|
||||
loginBigTikTok();
|
||||
}
|
||||
|
||||
// 编辑国家信息
|
||||
const editCountry = () => {
|
||||
showEditCountryDialog(t);
|
||||
showEditCountryDialog(t);
|
||||
};
|
||||
|
||||
// 刷新国家信息
|
||||
const refreshCountry = async () => {
|
||||
await refreshCountryInfo(t);
|
||||
await refreshCountryInfo(t);
|
||||
};
|
||||
|
||||
function getCountry() {
|
||||
if (typeof getCountryinfo === 'function') {
|
||||
getCountryinfo({})
|
||||
.then((res) => {
|
||||
res.forEach((item) => {
|
||||
if (item.countryGroupName) {
|
||||
options.value.push({ value: item.countryGroupName, label: item.countryGroupName });
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
getCountryinfo({})
|
||||
.then((res) => {
|
||||
res.forEach((item) => {
|
||||
if (item.countryGroupName) {
|
||||
options.value.push({ value: item.countryGroupName, label: item.countryGroupName });
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => { });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user