feat: 增加 Web 管理界面，扫描整理改为页面点击触发
- 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:
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<el-container class="app-wrapper">
|
||||
<el-aside width="220px" class="app-aside">
|
||||
<div class="app-logo">
|
||||
<span class="logo-icon"></span>
|
||||
<span>媒体库管理</span>
|
||||
</div>
|
||||
<el-menu
|
||||
:default-active="$route.path"
|
||||
router
|
||||
background-color="transparent"
|
||||
text-color="#4a5a78"
|
||||
active-text-color="#1677ff"
|
||||
>
|
||||
<el-menu-item index="/scan">
|
||||
<i class="el-icon-video-play"></i>
|
||||
<span slot="title">扫描整理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/dashboard">
|
||||
<i class="el-icon-data-line"></i>
|
||||
<span slot="title">统计看板</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/media">
|
||||
<i class="el-icon-film"></i>
|
||||
<span slot="title">媒体库</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
<div class="aside-footer">kenaito-media-picker</div>
|
||||
</el-aside>
|
||||
<el-main class="app-main">
|
||||
<router-view/>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
/* 科技风浅色背景：纯色 + 细网格线 */
|
||||
background: linear-gradient(rgba(22, 119, 255, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(22, 119, 255, 0.05) 1px, transparent 1px),
|
||||
#f2f7ff;
|
||||
background-size: 26px 26px, 26px 26px, 100% 100%;
|
||||
}
|
||||
|
||||
.app-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ===== 侧边栏：浅色科技面板 ===== */
|
||||
.app-aside {
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-right: 1px solid #e3edff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 2px 0 16px rgba(22, 119, 255, 0.06);
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #1677ff;
|
||||
box-shadow: 0 0 8px rgba(22, 119, 255, 0.6);
|
||||
}
|
||||
|
||||
.app-aside .el-menu {
|
||||
border-right: none;
|
||||
padding: 8px 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.app-aside .el-menu-item {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.app-aside .el-menu-item:hover {
|
||||
background: #eef5ff;
|
||||
color: #1677ff !important;
|
||||
}
|
||||
|
||||
.app-aside .el-menu-item.is-active {
|
||||
background: #e8f1ff;
|
||||
color: #1677ff !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.aside-footer {
|
||||
padding: 14px;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: #9db4d9;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* ===== 主区域 ===== */
|
||||
.app-main {
|
||||
background: transparent;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ===== 卡片：科技风白卡 ===== */
|
||||
.page-card {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px 24px;
|
||||
border: 1px solid #e6efff;
|
||||
box-shadow: 0 4px 20px rgba(22, 119, 255, 0.08);
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.toolbar .title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f3a6b;
|
||||
}
|
||||
|
||||
/* ===== ElementUI 组件科技风覆盖 ===== */
|
||||
.el-button--primary {
|
||||
background: #1677ff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-button--primary:hover,
|
||||
.el-button--primary:focus {
|
||||
background: #0f6bff;
|
||||
box-shadow: 0 4px 14px rgba(22, 119, 255, 0.35);
|
||||
}
|
||||
|
||||
.el-table {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell {
|
||||
background: #f0f6ff;
|
||||
color: #1f3a6b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-table--border,
|
||||
.el-table--group {
|
||||
border-color: #e6efff;
|
||||
}
|
||||
|
||||
.el-input__inner:focus,
|
||||
.el-textarea__inner:focus,
|
||||
.el-select .el-input.is-focus .el-input__inner {
|
||||
border-color: #1677ff;
|
||||
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
color: #1f3a6b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background: #1677ff;
|
||||
}
|
||||
|
||||
.el-switch.is-checked .el-switch__core {
|
||||
background: #1677ff;
|
||||
border-color: #1677ff;
|
||||
}
|
||||
|
||||
.pem-textarea textarea {
|
||||
font-family: Menlo, Consolas, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,11 @@
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import zhCN from 'element-ui/lib/locale/lang/zh-CN'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
Vue.use(ElementUI, {locale: zhCN})
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({router, render: (h) => h(App)}).$mount('#app')
|
||||
@@ -0,0 +1,16 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Dashboard from '../views/Dashboard.vue'
|
||||
import MediaList from '../views/MediaList.vue'
|
||||
import Scan from '../views/Scan.vue'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{path: '/', redirect: '/dashboard'},
|
||||
{path: '/dashboard', component: Dashboard},
|
||||
{path: '/media', component: MediaList},
|
||||
{path: '/scan', component: Scan}
|
||||
]
|
||||
})
|
||||
@@ -0,0 +1,24 @@
|
||||
import axios from 'axios'
|
||||
import {Message} from 'element-ui'
|
||||
|
||||
const request = axios.create({baseURL: '', timeout: 60000})
|
||||
|
||||
// 响应拦截：统一处理 code/message
|
||||
request.interceptors.response.use(
|
||||
(response) => {
|
||||
const res = response.data
|
||||
if (res.code === 200) return res
|
||||
Message.error(res.message || '请求失败')
|
||||
return Promise.reject(new Error(res.message || '请求失败'))
|
||||
},
|
||||
(error) => {
|
||||
const msg =
|
||||
(error.response && error.response.data && error.response.data.message) ||
|
||||
error.message ||
|
||||
'网络错误'
|
||||
Message.error(msg)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default request
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user