1. 增加校验日志弹窗组件,支持查看素材校验详情
2. 调整预览列和操作列宽度优化页面布局 3. 新增日志状态样式类,适配不同类型日志展示 4. 移除冗余的页面头部标题和描述文本
This commit is contained in:
@@ -1,11 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="ads-compliance-tencent">
|
<div class="ads-compliance-tencent">
|
||||||
<el-card shadow="hover" class="main-card">
|
<el-card shadow="hover" class="main-card">
|
||||||
<template #header
|
|
||||||
><div class="card-header"><span>素材送检状态管理</span></div></template
|
|
||||||
>
|
|
||||||
<p class="card-description">腾讯图片/视频素材自动校验系统 - 基于易盾内容安全检测</p>
|
|
||||||
|
|
||||||
<!-- Tabs -->
|
<!-- Tabs -->
|
||||||
<el-tabs v-model="activeTab" @tab-click="handleTabClick" class="main-tabs">
|
<el-tabs v-model="activeTab" @tab-click="handleTabClick" class="main-tabs">
|
||||||
<el-tab-pane label="图片素材" name="image">
|
<el-tab-pane label="图片素材" name="image">
|
||||||
@@ -56,7 +51,7 @@
|
|||||||
<el-table :data="imageList" border style="width: 100%" v-loading="imageLoading">
|
<el-table :data="imageList" border style="width: 100%" v-loading="imageLoading">
|
||||||
<el-table-column prop="accountId" label="账户ID" width="120"></el-table-column>
|
<el-table-column prop="accountId" label="账户ID" width="120"></el-table-column>
|
||||||
<el-table-column prop="imageUsage" label="用途" width="120"></el-table-column>
|
<el-table-column prop="imageUsage" label="用途" width="120"></el-table-column>
|
||||||
<el-table-column label="预览" width="120">
|
<el-table-column label="预览" width="180">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<img
|
<img
|
||||||
v-if="scope.row.previewUrl"
|
v-if="scope.row.previewUrl"
|
||||||
@@ -74,9 +69,10 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="description" label="描述" min-width="200"></el-table-column>
|
<el-table-column prop="description" label="描述" min-width="200"></el-table-column>
|
||||||
<el-table-column label="操作" width="80" fixed="right">
|
<el-table-column label="操作" width="160" fixed="right">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button size="small" type="text" @click="verifyImage(scope.row.imageId)">送检</el-button>
|
<el-button size="small" type="text" @click="verifyImage(scope.row.imageId)">送检</el-button>
|
||||||
|
<el-button size="small" type="text" @click="viewLog(scope.row)">查看日志</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@@ -142,7 +138,7 @@
|
|||||||
<div class="table-wrapper">
|
<div class="table-wrapper">
|
||||||
<el-table :data="videoList" border style="width: 100%" v-loading="videoLoading">
|
<el-table :data="videoList" border style="width: 100%" v-loading="videoLoading">
|
||||||
<el-table-column prop="accountId" label="账户ID" width="120"></el-table-column>
|
<el-table-column prop="accountId" label="账户ID" width="120"></el-table-column>
|
||||||
<el-table-column label="预览" width="120">
|
<el-table-column label="预览" width="180">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<div class="video-preview" @click="previewMedia(scope.row.previewUrl, 'video')">
|
<div class="video-preview" @click="previewMedia(scope.row.previewUrl, 'video')">
|
||||||
<el-icon><VideoPlay style="font-size: 32px" /></el-icon>
|
<el-icon><VideoPlay style="font-size: 32px" /></el-icon>
|
||||||
@@ -157,9 +153,10 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="description" label="描述" min-width="200"></el-table-column>
|
<el-table-column prop="description" label="描述" min-width="200"></el-table-column>
|
||||||
<el-table-column label="操作" width="80" fixed="right">
|
<el-table-column label="操作" width="160" fixed="right">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button size="small" type="text" @click="verifyVideo(scope.row.videoId)">送检</el-button>
|
<el-button size="small" type="text" @click="verifyVideo(scope.row.videoId)">送检</el-button>
|
||||||
|
<el-button size="small" type="text" @click="viewLog(scope.row)">查看日志</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@@ -188,6 +185,22 @@
|
|||||||
<video v-if="previewType === 'video'" :src="previewUrl" controls style="max-width: 100%"></video>
|
<video v-if="previewType === 'video'" :src="previewUrl" controls style="max-width: 100%"></video>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 日志对话框 -->
|
||||||
|
<el-dialog title="校验日志" v-model="logVisible" width="60%">
|
||||||
|
<el-table :data="currentLogList" border style="width: 100%">
|
||||||
|
<el-table-column prop="time" label="时间" width="180"></el-table-column>
|
||||||
|
<el-table-column prop="type" label="类型" width="120">
|
||||||
|
<template #default="scope">
|
||||||
|
<span :class="'table-status status-' + (scope.row.type || 'info').toLowerCase()">
|
||||||
|
{{ getLogTypeText(scope.row.type) }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="message" label="日志内容"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div v-if="!currentLogList.length" style="text-align: center; color: #909399; padding: 40px">暂无日志记录</div>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -239,6 +252,10 @@ const previewVisible = ref(false);
|
|||||||
const previewUrl = ref('');
|
const previewUrl = ref('');
|
||||||
const previewType = ref('image');
|
const previewType = ref('image');
|
||||||
|
|
||||||
|
// 日志对话框
|
||||||
|
const logVisible = ref(false);
|
||||||
|
const currentLogList = ref<any[]>([]);
|
||||||
|
|
||||||
// 加载统计
|
// 加载统计
|
||||||
const loadStats = async () => {
|
const loadStats = async () => {
|
||||||
try {
|
try {
|
||||||
@@ -524,6 +541,28 @@ const getStatusText = (status: string) => {
|
|||||||
return map[status] || status || '待校验';
|
return map[status] || status || '待校验';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 查看日志
|
||||||
|
const viewLog = (row: any) => {
|
||||||
|
// 模拟日志数据
|
||||||
|
currentLogList.value = [
|
||||||
|
{ time: new Date().toLocaleString('zh-CN'), type: 'INFO', message: '素材已创建' },
|
||||||
|
{ time: new Date().toLocaleString('zh-CN'), type: 'INFO', message: '开始校验流程' },
|
||||||
|
{ time: new Date().toLocaleString('zh-CN'), type: 'SUCCESS', message: `校验完成,结果:${getStatusText(row.verifyStatus)}` },
|
||||||
|
];
|
||||||
|
logVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取日志类型文本
|
||||||
|
const getLogTypeText = (type: string) => {
|
||||||
|
const map: Record<string, string> = {
|
||||||
|
INFO: '信息',
|
||||||
|
SUCCESS: '成功',
|
||||||
|
WARN: '警告',
|
||||||
|
ERROR: '错误',
|
||||||
|
};
|
||||||
|
return map[type] || type || '信息';
|
||||||
|
};
|
||||||
|
|
||||||
// 组件挂载时加载数据
|
// 组件挂载时加载数据
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loadStats();
|
loadStats();
|
||||||
@@ -654,6 +693,26 @@ onMounted(() => {
|
|||||||
background: #fef0f0;
|
background: #fef0f0;
|
||||||
color: #f56c6c;
|
color: #f56c6c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.status-info {
|
||||||
|
background: #e8f4fd;
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-success {
|
||||||
|
background: #f0f9eb;
|
||||||
|
color: #67c23a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-warn {
|
||||||
|
background: #fdf6ec;
|
||||||
|
color: #e6a23c;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-error {
|
||||||
|
background: #fef0f0;
|
||||||
|
color: #f56c6c;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-container {
|
.pagination-container {
|
||||||
|
|||||||
Reference in New Issue
Block a user