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