refactor: 合并 NSFW 数据到 media_info 表

frontend/src/views/MediaList.vue

@@ -25,6 +25,9 @@
             <el-select v-model="query.format" placeholder="格式" clearable filterable size="small" style="width: 120px" @change="handleFilterChange">
                 <el-option v-for="f in formatOptions" :key="f" :label="f" :value="f"/>
             </el-select>
+            <el-select v-model="query.nsfwOnly" placeholder="色情" clearable size="small" style="width: 110px" @change="handleFilterChange">
+                <el-option label="仅色情" :value="true"/>
+            </el-select>
             <el-input v-model="query.keyword" placeholder="搜索文件名" size="small" clearable style="width: 180px" @keyup.enter.native="handleFilterChange" @clear="handleFilterChange">
                 <i slot="prefix" class="el-input__icon el-icon-search"/>
             </el-input>
@@ -32,6 +35,21 @@
         </div>
 
         <el-table :data="list" v-loading="loading" border stripe @sort-change="handleSortChange">
+            <el-table-column label="预览" width="80" align="center">
+                <template slot-scope="scope">
+                    <el-image 
+                        v-if="isImage(scope.row.mediaType)"
+                        :src="getPreviewUrl(scope.row.filePath)" 
+                        :preview-src-list="[getPreviewUrl(scope.row.filePath)]"
+                        style="width: 60px; height: 60px"
+                        fit="cover">
+                        <div slot="error" class="image-error">
+                            <i class="el-icon-picture-outline"></i>
+                        </div>
+                    </el-image>
+                    <span v-else class="muted">-</span>
+                </template>
+            </el-table-column>
             <el-table-column prop="fileName" label="文件名" min-width="100" show-overflow-tooltip>
                 <template slot-scope="scope">
                     <span class="file-name" :title="scope.row.filePath">{{ scope.row.fileName }}</span>
@@ -60,6 +78,17 @@
                     <span v-else class="muted">-</span>
                 </template>
             </el-table-column>
+            <el-table-column label="色情检测" width="140" align="center">
+                <template slot-scope="scope">
+                    <div v-if="scope.row.nsfwScore > 0">
+                        <el-tag :type="scope.row.nsfwScore >= scope.row.nsfwThreshold ? 'danger' : 'warning'" size="small">
+                            {{ (scope.row.nsfwScore * 100).toFixed(1) }}%
+                        </el-tag>
+                        <div class="nsfw-threshold">阈值: {{ (scope.row.nsfwThreshold * 100).toFixed(0) }}%</div>
+                    </div>
+                    <span v-else class="muted">-</span>
+                </template>
+            </el-table-column>
             <el-table-column prop="codec" label="编码" width="120" align="center">
                 <template slot-scope="scope">
                     <span class="muted" v-if="!scope.row.codec">-</span>
@@ -134,6 +163,7 @@ export default {
                 resolution: '',
                 codec: '',
                 format: '',
+                nsfwOnly: null,
                 keyword: '',
                 sortField: '',
                 sortOrder: ''
@@ -196,6 +226,12 @@ export default {
         typeTag(type) {
             return {image: '', video: 'primary', audio: 'warning'}[type] || 'info'
         },
+        isImage(type) {
+            return type === 'image'
+        },
+        getPreviewUrl(filePath) {
+            return '/api/media/preview?path=' + encodeURIComponent(filePath)
+        },
         formatTime(value) {
             if (!value) return '-'
             const d = new Date(value)
@@ -226,6 +262,23 @@ export default {
     color: #c0c4cc;
 }
 
+.image-error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 60px;
+    height: 60px;
+    background: #f5f7fa;
+    color: #c0c4cc;
+    font-size: 20px;
+}
+
+.nsfw-threshold {
+    font-size: 12px;
+    color: #909399;
+    margin-top: 2px;
+}
+
 .pagination {
     margin-top: 16px;
     text-align: right;