feat: 色情识别结果可视化与日志；超长路径修复；旋转开关、明暗5档等
This commit is contained in:
@@ -24,6 +24,10 @@
|
||||
<i class="el-icon-film"></i>
|
||||
<span slot="title">媒体库</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/nsfw">
|
||||
<i class="el-icon-view"></i>
|
||||
<span slot="title">色情识别</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
<div class="aside-footer">kenaito-media-picker</div>
|
||||
</el-aside>
|
||||
|
||||
@@ -2,6 +2,7 @@ import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Dashboard from '../views/Dashboard.vue'
|
||||
import MediaList from '../views/MediaList.vue'
|
||||
import NsfwList from '../views/NsfwList.vue'
|
||||
import Scan from '../views/Scan.vue'
|
||||
|
||||
Vue.use(Router)
|
||||
@@ -11,6 +12,7 @@ export default new Router({
|
||||
{path: '/', redirect: '/scan'},
|
||||
{path: '/dashboard', component: Dashboard},
|
||||
{path: '/media', component: MediaList},
|
||||
{path: '/nsfw', component: NsfwList},
|
||||
{path: '/scan', component: Scan}
|
||||
]
|
||||
})
|
||||
|
||||
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div class="page-card">
|
||||
<div class="toolbar">
|
||||
<span class="title">色情识别</span>
|
||||
<div class="toolbar-right">
|
||||
<span class="hint" v-if="!nsfwConfigured">识别功能未开启：请在 application.properties 设 nsfw.enabled=true 并重新扫描</span>
|
||||
<el-button type="primary" size="small" icon="el-icon-refresh" @click="loadList">刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tip-bar">
|
||||
<i class="el-icon-view"></i>
|
||||
这是最近一次开启色情识别的扫描判出的图片，按检测分从高到低排列。点缩略图可放大预览，用来核对识别结果准不准。
|
||||
</div>
|
||||
|
||||
<el-table :data="list" v-loading="loading" border stripe>
|
||||
<el-table-column label="预览" width="110" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-image
|
||||
class="thumb"
|
||||
:src="previewUrl(scope.row.path)"
|
||||
:preview-src-list="[previewUrl(scope.row.path)]"
|
||||
fit="cover"
|
||||
lazy
|
||||
style="width: 84px; height: 84px; border-radius: 6px; border: 1px solid #e6efff">
|
||||
<div slot="error" class="thumb-error">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="fileName" label="文件名" min-width="140" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<span class="file-name" :title="scope.row.path">{{ scope.row.fileName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="检测分" width="160" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span class="score" :class="scoreTag(scope.row)">{{ (scope.row.score * 100).toFixed(1) }}%</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="阈值" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span class="muted">{{ (scope.row.threshold * 100).toFixed(1) }}%</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="完整路径" min-width="240" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<span class="path-text">{{ scope.row.path }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="检测时间" width="180" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span class="muted">{{ scope.row.createdAt }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-empty
|
||||
v-if="!loading && list.length === 0"
|
||||
description="暂无记录。开启 nsfw.enabled 后重新扫描，判为色情的图片会出现在这里。"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '../utils/request'
|
||||
|
||||
/**
|
||||
* 色情识别页面。
|
||||
* 展示最近一次开启色情识别的扫描判出的图片：检测分 + 完整路径 + 图片预览。
|
||||
* 数据来自 /api/nsfw/list，预览走 /api/nsfw/preview（后端按路径读本地文件）。
|
||||
*/
|
||||
export default {
|
||||
name: 'NsfwList',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
list: [],
|
||||
nsfwConfigured: true // 后端没开启识别时列表为空，这里只做提示不做强校验
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadList()
|
||||
},
|
||||
methods: {
|
||||
async loadList() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await request.get('/api/nsfw/list')
|
||||
this.list = res.data.list || []
|
||||
this.nsfwConfigured = (res.data.total || 0) > 0 || this.list.length > 0
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
previewUrl(path) {
|
||||
if (!path) return ''
|
||||
return '/api/nsfw/preview?path=' + encodeURIComponent(path)
|
||||
},
|
||||
// 检测分越接近 1 越"实锤"：>=90% 红色，>=75% 橙色，否则灰色
|
||||
scoreTag(row) {
|
||||
if (row.score >= 0.9) return 'score-high'
|
||||
if (row.score >= 0.75) return 'score-mid'
|
||||
return ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: #e6a23c;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tip-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #f8fbff;
|
||||
border: 1px solid #e6efff;
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
color: #4a5a78;
|
||||
font-size: 13px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.tip-bar .el-icon-view {
|
||||
color: #1677ff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
display: block;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.thumb-error {
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f7fa;
|
||||
color: #c0c4cc;
|
||||
font-size: 26px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
color: #1f3a6b;
|
||||
}
|
||||
|
||||
.path-text {
|
||||
color: #606266;
|
||||
font-size: 12px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.score {
|
||||
font-weight: 700;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.score-high {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.score-mid {
|
||||
color: #e6a23c;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user