feat(scan): 添加自定义扫描目录选择功能
- 在扫描页面添加目录输入框和选择按钮 - 实现文件系统浏览器，支持Windows盘符和目录浏览 - 添加扫描目录参数传递到后端服务 - 显示当前扫描目录路径信息 - 修复前端空数组访问错误 - 更新文档说明扫描功能变化
This commit is contained in:
+115
-115
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user