liuwei_x_x/abot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文件浏览功能

Browse Source
This commit is contained in:
liuwei
2025-06-04 15:43:28 +08:00
parent e970d6918a
commit ad62123335
1 changed files with 73 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
admin/dashboard/templates/file_browser.html
View File

@@ -11,20 +11,20 @@
<span>文件浏览</span> <span>文件浏览</span>
<div style="float: right;"> <div style="float: right;">
<el-input <el-input
v-model="currentPath" v-model="fileBrowser.currentPath"
placeholder="当前路径" placeholder="当前路径"
style="width: 300px; margin-right: 10px;" style="width: 300px; margin-right: 10px;"
readonly> readonly>
</el-input> </el-input>
<el-button type="primary" size="small" @click="navigateUp"> <el-button type="primary" size="small" @click="fileBrowser.navigateUp">
<i class="el-icon-arrow-up"></i> 上级目录 <i class="el-icon-arrow-up"></i> 上级目录
</el-button> </el-button>
</div> </div>
</div> </div>
<el-table <el-table
:data="fileList" :data="fileBrowser.fileList"
style="width: 100%" style="width: 100%"
v-loading="loading"> v-loading="fileBrowser.loading">
<el-table-column <el-table-column
prop="name" prop="name"
label="名称" label="名称"
@@ -32,7 +32,7 @@
<template slot-scope="scope"> <template slot-scope="scope">
<el-link <el-link
:type="scope.row.is_dir ? 'primary' : 'info'" :type="scope.row.is_dir ? 'primary' : 'info'"
@click="scope.row.is_dir ? navigateTo(scope.row.name) : null"> @click="scope.row.is_dir ? fileBrowser.navigateTo(scope.row.name) : null">
<i :class="scope.row.is_dir ? 'el-icon-folder' : 'el-icon-document'"></i> <i :class="scope.row.is_dir ? 'el-icon-folder' : 'el-icon-document'"></i>
[[ scope.row.name ]] [[ scope.row.name ]]
</el-link> </el-link>
@@ -51,7 +51,7 @@
label="大小" label="大小"
width="120"> width="120">
<template slot-scope="scope"> <template slot-scope="scope">
[[ scope.row.is_dir ? '-' : formatFileSize(scope.row.size) ]] [[ fileBrowser.formatFileSize(scope.row.size) ]]
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@@ -59,7 +59,7 @@
label="修改时间" label="修改时间"
width="180"> width="180">
<template slot-scope="scope"> <template slot-scope="scope">
[[ formatDate(scope.row.modified) ]] [[ fileBrowser.formatDate(scope.row.modified) ]]
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@@ -70,7 +70,7 @@
v-if="!scope.row.is_dir" v-if="!scope.row.is_dir"
type="primary" type="primary"
size="mini" size="mini"
@click="downloadFile(scope.row.name)"> @click="fileBrowser.downloadFile(scope.row.name)">
下载 下载
</el-button> </el-button>
</template> </template>
@@ -84,69 +84,81 @@
{% block scripts %} {% block scripts %}
<script> <script>
new Vue({ // 扩展基础Vue实例
el: '#app', Object.assign(baseApp, {
delimiters: ['[[', ']]'],
data() { data() {
return { return {
currentPath: '', ...baseApp.data(),
fileList: [], fileBrowser: {
loading: false currentPath: '',
fileList: [],
loading: false
}
} }
}, },
created() { created() {
this.loadFiles(''); // 调用原始created方法
if (baseApp.created) {
baseApp.created.call(this);
}
// 设置当前视图为文件浏览
this.currentView = '15';
// 加载文件列表
this.fileBrowser.loadFiles('');
}, },
methods: { methods: {
formatFileSize(bytes) { ...baseApp.methods,
if (bytes === 0) return '0 B'; fileBrowser: {
const k = 1024; formatFileSize(bytes) {
const sizes = ['B', 'KB', 'MB', 'GB', 'TB']; if (bytes === 0) return '0 B';
const i = Math.floor(Math.log(bytes) / Math.log(k)); const k = 1024;
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
}, const i = Math.floor(Math.log(bytes) / Math.log(k));
formatDate(timestamp) { return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
return new Date(timestamp * 1000).toLocaleString(); },
}, formatDate(timestamp) {
loadFiles(path) { return new Date(timestamp * 1000).toLocaleString();
this.loading = true; },
this.currentPath = path || '/'; loadFiles(path) {
this.loading = true;
axios.get('/api/list_files', { this.currentPath = path || '/';
params: { path: path }
}) axios.get('/api/list_files', {
.then(response => { params: { path: path }
if (response.data.success) { })
this.fileList = response.data.data.items; .then(response => {
if (response.data.success) {
this.fileList = response.data.data.items;
} else {
this.$message.error('加载文件列表失败：' + response.data.message);
}
})
.catch(error => {
this.$message.error('加载文件列表失败');
console.error('Error:', error);
})
.finally(() => {
this.loading = false;
});
},
navigateTo(dirName) {
const newPath = this.currentPath === '/' ? dirName : this.currentPath + '/' + dirName;
this.loadFiles(newPath);
},
navigateUp() {
if (!this.currentPath) return;
const lastSlashIndex = this.currentPath.lastIndexOf('/');
if (lastSlashIndex === -1) {
this.loadFiles('');
} else { } else {
this.$message.error('加载文件列表失败：' + response.data.message); this.loadFiles(this.currentPath.substring(0, lastSlashIndex));
} }
}) },
.catch(error => { downloadFile(fileName) {
this.$message.error('加载文件列表失败'); const filePath = this.currentPath === '/' ? fileName : this.currentPath + '/' + fileName;
console.error('Error:', error); window.location.href = '/api/download_file?path=' + encodeURIComponent(filePath);
})
.finally(() => {
this.loading = false;
});
},
navigateTo(dirName) {
const newPath = this.currentPath === '/' ? dirName : this.currentPath + '/' + dirName;
this.loadFiles(newPath);
},
navigateUp() {
if (!this.currentPath) return;
const lastSlashIndex = this.currentPath.lastIndexOf('/');
if (lastSlashIndex === -1) {
this.loadFiles('');
} else {
this.loadFiles(this.currentPath.substring(0, lastSlashIndex));
} }
},
downloadFile(fileName) {
const filePath = this.currentPath === '/' ? fileName : this.currentPath + '/' + fileName;
window.location.href = '/api/download_file?path=' + encodeURIComponent(filePath);
} }
} }
}); });