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

feat(scan): 添加自定义扫描目录选择功能

Browse Source 
- 在扫描页面添加目录输入框和选择按钮
- 实现文件系统浏览器，支持Windows盘符和目录浏览
- 添加扫描目录参数传递到后端服务
- 显示当前扫描目录路径信息
- 修复前端空数组访问错误
- 更新文档说明扫描功能变化
This commit is contained in:
odboy
2025-04-24 21:05:00 +08:00
parent e053b378fb
commit 14056ba7b9
13 changed files with 460 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+115 -115
View File
@@ -1,215 +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>
<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="/dashboard">
<i class="el-icon-data-line"></i>
<span slot="title">统计看板</span>
</el-menu-item>
<el-menu-item index="/scan">
<i class="el-icon-video-play"></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'
name: 'App'
}
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body,
#app {
height: 100%;
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%;
/* 科技风浅色背景：纯色 + 细网格线 */
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%;
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);
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;
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);
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;
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;
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;
background: #eef5ff;
color: #1677ff !important;
}
.app-aside .el-menu-item.is-active {
background: #e8f1ff;
color: #1677ff !important;
font-weight: 600;
background: #e8f1ff;
color: #1677ff !important;
font-weight: 600;
}
.aside-footer {
padding: 14px;
text-align: center;
font-size: 11px;
color: #9db4d9;
letter-spacing: 0.5px;
padding: 14px;
text-align: center;
font-size: 11px;
color: #9db4d9;
letter-spacing: 0.5px;
}
/* ===== 主区域 ===== */
.app-main {
background: transparent;
padding: 20px;
overflow-y: auto;
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);
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;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.toolbar .title {
font-size: 16px;
font-weight: 600;
color: #1f3a6b;
font-size: 16px;
font-weight: 600;
color: #1f3a6b;
}
/* ===== ElementUI 组件科技风覆盖 ===== */
.el-button--primary {
background: #1677ff;
border: none;
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);
background: #0f6bff;
box-shadow: 0 4px 14px rgba(22, 119, 255, 0.35);
}
.el-table {
border-radius: 8px;
border-radius: 8px;
}
.el-table th.el-table__cell {
background: #f0f6ff;
color: #1f3a6b;
font-weight: 600;
background: #f0f6ff;
color: #1f3a6b;
font-weight: 600;
}
.el-table--border,
.el-table--group {
border-color: #e6efff;
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);
border-color: #1677ff;
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
}
.el-dialog {
border-radius: 12px;
border-radius: 12px;
}
.el-dialog__title {
color: #1f3a6b;
font-weight: 600;
color: #1f3a6b;
font-weight: 600;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
background: #1677ff;
background: #1677ff;
}
.el-switch.is-checked .el-switch__core {
background: #1677ff;
border-color: #1677ff;
background: #1677ff;
border-color: #1677ff;
}
.pem-textarea textarea {
font-family: Menlo, Consolas, monospace;
font-size: 12px;
font-family: Menlo, Consolas, monospace;
font-size: 12px;
}
</style>
frontend/src/views/Dashboard.vue
+2 -2
View File
@@ -59,12 +59,12 @@
<div class="panel">
<div class="panel-title">分辨率分布</div>
<div v-for="item in stats.resCount.slice(0, 8)" :key="item.key" class="dist-row">
<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 v-if="!stats.resCount || stats.resCount.length === 0" class="empty-tip">暂无带尺寸的媒体</div>
</div>
<div class="panel">
frontend/src/views/Scan.vue
+175 -3
View File
@@ -6,10 +6,24 @@
<div class="scan-tip">
<i class="el-icon-warning-outline"></i>
点击开始后，程序将扫描当前运行目录并自动归类媒体文件（<b>会移动文件</b>，整理前请先备份）。
点击开始后，程序将扫描所选目录并自动归类媒体文件（<b>会移动文件</b>，整理前请先备份）。
整理期间请保持服务运行，结束后可在「媒体库」查看结果。
</div>
<div class="scan-form">
<div class="form-row">
<span class="form-label">扫描目录</span>
<el-input
v-model="scanDir"
placeholder="留空则扫描程序当前运行目录，例如 D:\media 或 /Users/me/Pictures"
clearable
size="medium"
@keyup.enter.native="handleStart">
<el-button slot="append" icon="el-icon-folder-opened" @click="openDirPicker">选择目录</el-button>
</el-input>
</div>
</div>
<div class="scan-actions">
<el-button
v-if="status.state !== 'running'"
@@ -41,9 +55,64 @@
:closable="false"
class="state-alert"/>
<el-dialog
title="选择要整理的目录"
:visible.sync="dirPickerVisible"
width="520px"
append-to-body>
<div class="dir-picker">
<div class="dir-nav">
<el-button
v-if="fsData.drives && fsData.drives.length"
size="mini"
icon="el-icon-refresh"
@click="loadFs('')">盘符</el-button>
<el-button
v-else-if="fsData.current"
size="mini"
icon="el-icon-back"
:disabled="fsData.parent === fsData.current"
@click="loadFs(fsData.parent)">上一级</el-button>
<span class="dir-path" :title="fsData.current">{{ fsData.current || '选择磁盘' }}</span>
</div>
<div v-if="fsData.drives && fsData.drives.length" class="dir-list">
<div
v-for="d in fsData.drives"
:key="d"
class="dir-item"
@click="loadFs(d)">
<i class="el-icon-folder"></i>
<span>{{ d }}</span>
</div>
</div>
<div v-else class="dir-list" v-loading="dirLoading">
<div
v-for="d in fsData.dirs"
:key="d.path"
class="dir-item"
@dblclick="loadFs(d.path)">
<i class="el-icon-folder"></i>
<span>{{ d.name }}</span>
</div>
<div v-if="!dirLoading && fsData.dirs.length === 0" class="dir-empty">此目录下没有子目录</div>
</div>
</div>
<div slot="footer">
<el-button @click="dirPickerVisible = false">取消</el-button>
<el-button
type="primary"
:disabled="!fsData.current"
@click="confirmDir">选中此目录</el-button>
</div>
</el-dialog>
<div class="log-panel">
<div class="log-header">
<span>运行日志</span>
<span class="muted" v-if="status.rootDir">扫描目录：{{ status.rootDir }}</span>
<span class="muted" v-if="status.started">开始于 {{ status.started }}</span>
</div>
<div ref="logBox" class="log-body" v-loading="status.state === 'running'">
@@ -62,14 +131,24 @@ export default {
data() {
return {
starting: false,
scanDir: localStorage.getItem('scan-dir') || '',
status: {
state: 'idle',
message: '',
started: '',
elapsed: 0,
rootDir: '',
lines: []
},
pollTimer: null
pollTimer: null,
dirPickerVisible: false,
dirLoading: false,
fsData: {
current: '',
parent: '',
drives: [],
dirs: []
}
}
},
mounted() {
@@ -99,7 +178,8 @@ export default {
async handleStart() {
this.starting = true
try {
const res = await request.post('/api/scan/start')
localStorage.setItem('scan-dir', this.scanDir)
const res = await request.post('/api/scan/start', { dir: this.scanDir.trim() })
this.status = res.data || this.status
this.startPoll()
this.$message.success('已开始扫描整理')
@@ -107,6 +187,27 @@ export default {
this.starting = false
}
},
openDirPicker() {
this.dirPickerVisible = true
this.loadFs(this.scanDir.trim())
},
async loadFs(dir) {
this.dirLoading = true
try {
const res = await request.get('/api/fs/list', { params: dir ? { dir } : {} })
this.fsData = res.data || { current: '', parent: '', drives: [], dirs: [] }
} catch (e) {
// 拦截器已提示
} finally {
this.dirLoading = false
}
},
confirmDir() {
if (!this.fsData.current) return
this.scanDir = this.fsData.current
localStorage.setItem('scan-dir', this.scanDir)
this.dirPickerVisible = false
},
startPoll() {
this.stopPoll()
this.pollTimer = setInterval(() => this.loadStatus(), 1000)
@@ -144,6 +245,77 @@ export default {
margin-right: 4px;
}
.scan-form {
margin-bottom: 20px;
}
.form-row {
display: flex;
align-items: center;
gap: 12px;
max-width: 640px;
}
.form-label {
flex-shrink: 0;
font-size: 13px;
font-weight: 600;
color: #1f3a6b;
}
.dir-picker .dir-nav {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.dir-picker .dir-path {
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 13px;
color: #4a5a78;
background: #f5f7fa;
border-radius: 4px;
padding: 6px 10px;
}
.dir-picker .dir-list {
height: 320px;
overflow-y: auto;
border: 1px solid #ebeef5;
border-radius: 6px;
padding: 6px;
}
.dir-picker .dir-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
color: #303133;
}
.dir-picker .dir-item:hover {
background: #f0f6ff;
}
.dir-picker .dir-item .el-icon-folder {
color: #faad14;
}
.dir-picker .dir-empty {
padding: 30px 0;
text-align: center;
color: #909399;
font-size: 13px;
}
.scan-actions {
margin-bottom: 20px;
}