odboy/kenaito-media-picker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 增加 Web 管理界面，扫描整理改为页面点击触发

Browse Source 
- main.go 改为 Web 服务入口（Gin + 内嵌前端 dist + 自动打开浏览器）
- internal/service: 新增扫描整理后台任务，支持状态机与实时日志捕获
- internal/api: 新增统一响应、媒体列表/统计、扫描开始/状态接口
- internal/store: 追加 ListMedia/CountMedia/Stats 查询，MediaInfo 补 JSON tag
- internal/config: application.properties 配置加载（端口/数据库/自动开浏览器）
- frontend: Vue2 + ElementUI + Vite 工程，含扫描整理/统计看板/媒体库三页
- build.sh 整合前端构建，输出单一 kenaito-media-picker.exe
This commit is contained in:
odboy
2025-04-21 21:08:02 +08:00
parent 767b093b45
commit e053b378fb
29 changed files with 3684 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Dashboard.vue
+293
View File
@@ -0,0 +1,293 @@
<template>
<div class="page-card dashboard">
<div class="toolbar">
<span class="title">统计看板</span>
<el-button type="primary" size="small" icon="el-icon-refresh" @click="loadStats">刷新</el-button>
</div>
<div v-loading="loading" class="stat-grid">
<div class="stat-card">
<div class="stat-label">媒体总数</div>
<div class="stat-value">{{ stats.totalFiles }}</div>
<div class="stat-sub">全部入库记录</div>
</div>
<div class="stat-card">
<div class="stat-label">总体积</div>
<div class="stat-value">{{ fmtSize(stats.totalSize) }}</div>
<div class="stat-sub">所有文件占用</div>
</div>
<div class="stat-card">
<div class="stat-label">重复文件</div>
<div class="stat-value warning">{{ stats.duplicate }}</div>
<div class="stat-sub">额外副本数</div>
</div>
<div class="stat-card">
<div class="stat-label">重复占用</div>
<div class="stat-value warning">{{ fmtSize(stats.dupSize) }}</div>
<div class="stat-sub">可释放空间（约）</div>
</div>
</div>
<div class="chart-grid">
<div class="panel">
<div class="panel-title">类型分布</div>
<el-table :data="stats.typeCounts" size="mini" border stripe>
<el-table-column label="类型" min-width="120">
<template slot-scope="scope">
<el-tag :type="typeTag(scope.row.key)">{{ typeName(scope.row.key) }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="count" label="数量" width="100" align="right"/>
<el-table-column label="体积" min-width="100" align="right">
<template slot-scope="scope">{{ fmtSize(scope.row.size) }}</template>
</el-table-column>
</el-table>
</div>
<div class="panel">
<div class="panel-title">方向分布</div>
<div v-for="item in stats.orientCount" :key="item.key" class="dist-row">
<span class="dist-label">{{ orientName(item.key) }}</span>
<el-progress
:percentage="percent(item.count, orientTotal)"
:stroke-width="14"
:color="orientColor(item.key)"/>
<span class="dist-count">{{ item.count }}</span>
</div>
<div v-if="stats.orientCount.length === 0" class="empty-tip">暂无带尺寸的媒体</div>
</div>
<div class="panel">
<div class="panel-title">分辨率分布</div>
<div v-for="item in stats.resCount.slice(0, 8)" :key="item.key" class="dist-row">
<span class="dist-label">{{ item.key }}</span>
<el-progress :percentage="percent(item.count, resTotal)" :stroke-width="14" color="#1677ff"/>
<span class="dist-count">{{ item.count }}</span>
</div>
<div v-if="stats.resCount.length === 0" class="empty-tip">暂无带尺寸的媒体</div>
</div>
<div class="panel">
<div class="panel-title">编码分布（视频）</div>
<div v-for="item in stats.codecCount" :key="item.key" class="dist-row">
<span class="dist-label">{{ item.key }}</span>
<el-progress :percentage="percent(item.count, codecTotal)" :stroke-width="14" color="#0f6bff"/>
<span class="dist-count">{{ item.count }}</span>
</div>
<div v-if="stats.codecCount.length === 0" class="empty-tip">暂无视频</div>
</div>
<div class="panel">
<div class="panel-title">格式分布</div>
<div v-for="item in stats.formatCount" :key="item.key" class="dist-row">
<span class="dist-label">{{ item.key }}</span>
<el-progress :percentage="percent(item.count, formatTotal)" :stroke-width="14" color="#52c41a"/>
<span class="dist-count">{{ item.count }}</span>
</div>
<div v-if="stats.formatCount.length === 0" class="empty-tip">暂无格式数据</div>
</div>
</div>
<div class="panel top-panel">
<div class="panel-title">体积 TOP10</div>
<el-table :data="stats.topLarge" size="mini" border stripe>
<el-table-column type="index" label="#" width="50" align="center"/>
<el-table-column prop="key" label="文件名" min-width="280" show-overflow-tooltip/>
<el-table-column label="体积" min-width="120" align="right">
<template slot-scope="scope">{{ fmtSize(scope.row.size) }}</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import request from '../utils/request'
export default {
name: 'Dashboard',
data() {
return {
loading: false,
stats: {
totalFiles: 0,
totalSize: 0,
typeCounts: [],
orientCount: [],
resCount: [],
codecCount: [],
formatCount: [],
duplicate: 0,
dupSize: 0,
topLarge: []
}
}
},
computed: {
orientTotal() {
return this.sumCount(this.stats.orientCount)
},
resTotal() {
return this.sumCount(this.stats.resCount)
},
codecTotal() {
return this.sumCount(this.stats.codecCount)
},
formatTotal() {
return this.sumCount(this.stats.formatCount)
}
},
mounted() {
this.loadStats()
},
methods: {
async loadStats() {
this.loading = true
try {
const res = await request.post('/api/media/stats')
this.stats = res.data || this.stats
} finally {
this.loading = false
}
},
sumCount(list) {
return (list || []).reduce((sum, item) => sum + item.count, 0)
},
percent(count, total) {
if (!total) return 0
return Math.round((count / total) * 100)
},
fmtSize(bytes) {
if (!bytes && bytes !== 0) return '-'
const units = ['B', 'KB', 'MB', 'GB', 'TB']
let i = 0
let size = bytes
while (size >= 1024 && i < units.length - 1) {
size /= 1024
i++
}
return size.toFixed(size >= 100 || i === 0 ? 0 : 1) + ' ' + units[i]
},
typeName(type) {
return {image: '图片', video: '视频', audio: '音频'}[type] || type
},
typeTag(type) {
return {image: '', video: 'primary', audio: 'warning'}[type] || 'info'
},
orientName(key) {
return {horizontal: '横屏', vertical: '竖屏', square: '等比'}[key] || key
},
orientColor(key) {
return {horizontal: '#1677ff', vertical: '#13c2c2', square: '#faad14'}[key] || '#1677ff'
}
}
}
</script>
<style scoped>
.stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 20px;
}
.stat-card {
background: #f8fbff;
border: 1px solid #e6efff;
border-radius: 12px;
padding: 18px 20px;
}
.stat-label {
font-size: 13px;
color: #4a5a78;
margin-bottom: 8px;
}
.stat-value {
font-size: 26px;
font-weight: 700;
color: #1f3a6b;
}
.stat-value.warning {
color: #fa8c16;
}
.stat-sub {
font-size: 12px;
color: #9db4d9;
margin-top: 6px;
}
.chart-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 20px;
}
.panel {
background: #f8fbff;
border: 1px solid #e6efff;
border-radius: 12px;
padding: 16px 18px;
}
.panel-title {
font-size: 14px;
font-weight: 600;
color: #1f3a6b;
margin-bottom: 14px;
}
.top-panel {
grid-column: 1 / -1;
}
.dist-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.dist-row .el-progress {
flex: 1;
}
.dist-label {
width: 90px;
font-size: 13px;
color: #4a5a78;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dist-count {
width: 44px;
text-align: right;
font-size: 13px;
color: #1f3a6b;
font-weight: 600;
}
.empty-tip {
color: #9db4d9;
font-size: 13px;
padding: 12px 0;
text-align: center;
}
@media (max-width: 1200px) {
.stat-grid {
grid-template-columns: repeat(2, 1fr);
}
.chart-grid {
grid-template-columns: 1fr;
}
}
</style>
frontend/src/views/MediaList.vue
+239
View File
@@ -0,0 +1,239 @@
<template>
<div class="page-card">
<div class="toolbar">
<span class="title">媒体库</span>
<el-button type="primary" size="small" icon="el-icon-refresh" @click="loadList">刷新</el-button>
</div>
<div class="filter-bar">
<el-select v-model="query.mediaType" placeholder="类型" clearable size="small" style="width: 110px" @change="handleFilterChange">
<el-option label="图片" value="image"/>
<el-option label="视频" value="video"/>
<el-option label="音频" value="audio"/>
</el-select>
<el-select v-model="query.orientation" placeholder="方向" clearable size="small" style="width: 110px" @change="handleFilterChange">
<el-option label="横屏" value="horizontal"/>
<el-option label="竖屏" value="vertical"/>
<el-option label="等比" value="square"/>
</el-select>
<el-select v-model="query.resolution" placeholder="分辨率" clearable filterable size="small" style="width: 130px" @change="handleFilterChange">
<el-option v-for="r in resolutionOptions" :key="r" :label="r" :value="r"/>
</el-select>
<el-select v-model="query.codec" placeholder="编码" clearable filterable size="small" style="width: 120px" @change="handleFilterChange">
<el-option v-for="c in codecOptions" :key="c" :label="c" :value="c"/>
</el-select>
<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-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>
<el-button type="primary" size="small" icon="el-icon-search" @click="handleFilterChange">查询</el-button>
</div>
<el-table :data="list" v-loading="loading" border stripe @sort-change="handleSortChange">
<el-table-column prop="fileName" label="文件名" min-width="220" show-overflow-tooltip>
<template slot-scope="scope">
<span class="file-name" :title="scope.row.filePath">{{ scope.row.fileName }}</span>
</template>
</el-table-column>
<el-table-column label="类型" width="80" align="center">
<template slot-scope="scope">
<el-tag :type="typeTag(scope.row.mediaType)" size="small">{{ typeName(scope.row.mediaType) }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="orientation" label="方向" width="80" align="center">
<template slot-scope="scope">
<span class="muted" v-if="!scope.row.orientation">-</span>
<span v-else>{{ scope.row.orientation }}</span>
</template>
</el-table-column>
<el-table-column prop="resolution" label="分辨率" width="110" align="center" sortable="custom">
<template slot-scope="scope">
<span class="muted" v-if="!scope.row.resolution">-</span>
<span v-else>{{ scope.row.resolution }}</span>
</template>
</el-table-column>
<el-table-column label="尺寸" width="120" align="center">
<template slot-scope="scope">
<span v-if="scope.row.width > 0">{{ scope.row.width }}×{{ scope.row.height }}</span>
<span v-else class="muted">-</span>
</template>
</el-table-column>
<el-table-column prop="codec" label="编码" width="90" align="center">
<template slot-scope="scope">
<span class="muted" v-if="!scope.row.codec">-</span>
<span v-else>{{ scope.row.codec }}</span>
</template>
</el-table-column>
<el-table-column prop="format" label="格式" width="80" align="center">
<template slot-scope="scope">
<span class="muted" v-if="!scope.row.format">-</span>
<span v-else>{{ scope.row.format }}</span>
</template>
</el-table-column>
<el-table-column prop="duration" label="时长" width="90" align="center" sortable="custom">
<template slot-scope="scope">
<span class="muted" v-if="!scope.row.durationText">-</span>
<span v-else>{{ scope.row.durationText }}</span>
</template>
</el-table-column>
<el-table-column prop="fileSize" label="大小" width="100" align="right" sortable="custom">
<template slot-scope="scope">{{ scope.row.sizeText }}</template>
</el-table-column>
<el-table-column label="归类目录" min-width="180" show-overflow-tooltip>
<template slot-scope="scope">
<span class="muted" v-if="!scope.row.destDir">-</span>
<span v-else>{{ scope.row.destDir }}</span>
</template>
</el-table-column>
<el-table-column prop="createdAt" label="入库时间" width="150" align="center" sortable="custom">
<template slot-scope="scope">
<span class="muted" v-if="!scope.row.createdAt">-</span>
<span v-else>{{ formatTime(scope.row.createdAt) }}</span>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagination"
background
layout="total, sizes, prev, pager, next"
:total="total"
:page-size="query.pageSize"
:current-page="query.page"
:page-sizes="[10, 20, 50, 100]"
@current-change="handlePageChange"
@size-change="handleSizeChange"
/>
</div>
</template>
<script>
import request from '../utils/request'
const RES_STANDARD = ['720P', '1D5KP', '1080P', '2DKP', '2D5KP', 'UltraWide2KP', 'UltraWide3KP', 'UltraWide4KP', '4KP', '4KHP', '8KP']
function resNonStandard() {
const list = ['普通', '原图']
for (let i = 1; i <= 19; i++) {
list.splice(list.length - 1, 0, i + 'K')
}
return list
}
export default {
name: 'MediaList',
data() {
return {
loading: false,
list: [],
total: 0,
resolutionOptions: RES_STANDARD.concat(resNonStandard()),
codecOptions: [],
formatOptions: [],
query: {
page: 1,
pageSize: 10,
mediaType: '',
orientation: '',
resolution: '',
codec: '',
format: '',
keyword: '',
sortField: '',
sortOrder: ''
}
}
},
mounted() {
this.loadOptions()
this.loadList()
},
methods: {
async loadOptions() {
try {
const res = await request.post('/api/media/stats')
const data = res.data || {}
this.codecOptions = (data.codecCount || []).map((item) => item.key)
this.formatOptions = (data.formatCount || []).map((item) => item.key)
} catch (e) {
// 拦截器已提示
}
},
async loadList() {
this.loading = true
try {
const res = await request.post('/api/media/list', this.query)
this.list = res.data.list || []
this.total = res.data.total || 0
} finally {
this.loading = false
}
},
handleFilterChange() {
this.query.page = 1
this.loadList()
},
handlePageChange(page) {
this.query.page = page
this.loadList()
},
handleSizeChange(size) {
this.query.pageSize = size
this.query.page = 1
this.loadList()
},
handleSortChange({prop, order}) {
const map = {
resolution: 'width',
duration: 'duration',
fileSize: 'fileSize',
createdAt: 'createdAt'
}
this.query.sortField = map[prop] || ''
this.query.sortOrder = order === 'descending' ? 'desc' : order === 'ascending' ? 'asc' : ''
this.query.page = 1
this.loadList()
},
typeName(type) {
return {image: '图片', video: '视频', audio: '音频'}[type] || type
},
typeTag(type) {
return {image: '', video: 'primary', audio: 'warning'}[type] || 'info'
},
formatTime(value) {
if (!value) return '-'
const d = new Date(value)
const pad = (n) => (n < 10 ? '0' + n : '' + n)
return (
d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) +
' ' + pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds())
)
}
}
}
</script>
<style scoped>
.filter-bar {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 16px;
}
.file-name {
color: #1f3a6b;
}
.muted {
color: #c0c4cc;
}
.pagination {
margin-top: 16px;
text-align: right;
}
</style>
frontend/src/views/Scan.vue
+205
View File
@@ -0,0 +1,205 @@
<template>
<div class="page-card">
<div class="toolbar">
<span class="title">扫描整理</span>
</div>
<div class="scan-tip">
<i class="el-icon-warning-outline"></i>
点击开始后，程序将扫描当前运行目录并自动归类媒体文件（<b>会移动文件</b>，整理前请先备份）。
整理期间请保持服务运行，结束后可在「媒体库」查看结果。
</div>
<div class="scan-actions">
<el-button
v-if="status.state !== 'running'"
type="primary"
size="medium"
icon="el-icon-video-play"
:loading="starting"
@click="handleStart">开始扫描</el-button>
<div v-else class="running-hint">
<i class="el-icon-loading"></i>
<span>扫描整理中，已运行 {{ status.elapsed }} 秒...</span>
</div>
</div>
<el-alert
v-if="status.state === 'done'"
title="扫描整理完成"
type="success"
:description="status.message"
show-icon
:closable="false"
class="state-alert"/>
<el-alert
v-if="status.state === 'error'"
title="扫描整理失败"
type="error"
:description="status.message"
show-icon
:closable="false"
class="state-alert"/>
<div class="log-panel">
<div class="log-header">
<span>运行日志</span>
<span class="muted" v-if="status.started">开始于 {{ status.started }}</span>
</div>
<div ref="logBox" class="log-body" v-loading="status.state === 'running'">
<div v-if="status.lines.length === 0" class="muted empty-log">暂无日志，点击「开始扫描」后在此查看</div>
<div v-for="(line, idx) in status.lines" :key="idx" class="log-line">{{ line }}</div>
</div>
</div>
</div>
</template>
<script>
import request from '../utils/request'
export default {
name: 'Scan',
data() {
return {
starting: false,
status: {
state: 'idle',
message: '',
started: '',
elapsed: 0,
lines: []
},
pollTimer: null
}
},
mounted() {
this.loadStatus()
},
destroyed() {
this.stopPoll()
},
methods: {
async loadStatus() {
try {
const res = await request.get('/api/scan/status')
const data = res.data || {}
const wasRunning = this.status.state === 'running'
const isRunning = data.state === 'running'
this.status = data
if (isRunning && !wasRunning) this.startPoll()
if (wasRunning && !isRunning) {
this.stopPoll()
this.$message.success(data.message || '扫描完成')
}
if (isRunning) this.scrollBottom()
} catch (e) {
// 拦截器已提示
}
},
async handleStart() {
this.starting = true
try {
const res = await request.post('/api/scan/start')
this.status = res.data || this.status
this.startPoll()
this.$message.success('已开始扫描整理')
} finally {
this.starting = false
}
},
startPoll() {
this.stopPoll()
this.pollTimer = setInterval(() => this.loadStatus(), 1000)
},
stopPoll() {
if (this.pollTimer) {
clearInterval(this.pollTimer)
this.pollTimer = null
}
},
scrollBottom() {
this.$nextTick(() => {
const box = this.$refs.logBox
if (box) box.scrollTop = box.scrollHeight
})
}
}
}
</script>
<style scoped>
.scan-tip {
background: #f8fbff;
border: 1px solid #e6efff;
border-radius: 8px;
padding: 12px 16px;
color: #4a5a78;
font-size: 13px;
line-height: 1.8;
margin-bottom: 20px;
}
.scan-tip .el-icon-warning-outline {
color: #faad14;
margin-right: 4px;
}
.scan-actions {
margin-bottom: 20px;
}
.running-hint {
display: inline-flex;
align-items: center;
gap: 8px;
color: #1677ff;
font-size: 14px;
}
.state-alert {
margin-bottom: 16px;
}
.log-panel {
border: 1px solid #e6efff;
border-radius: 8px;
overflow: hidden;
}
.log-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
background: #f0f6ff;
font-size: 13px;
font-weight: 600;
color: #1f3a6b;
}
.log-body {
height: 380px;
overflow-y: auto;
padding: 12px 16px;
background: #0d1b2e;
font-family: Menlo, Consolas, monospace;
font-size: 12px;
line-height: 1.7;
}
.log-line {
color: #b7d0f2;
white-space: pre-wrap;
word-break: break-all;
}
.empty-log {
color: #6b8bb8;
}
.muted {
color: #c0c4cc;
font-weight: 400;
font-size: 12px;
}
</style>