feat: 色情识别结果可视化与日志；超长路径修复；旋转开关、明暗5档等

frontend/src/App.vue

@@ -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>

frontend/src/router/index.js

@@ -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}
     ]
 })

frontend/src/views/NsfwList.vue

@@ -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>