155 lines
7.3 KiB
HTML
155 lines
7.3 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}文件浏览 - 机器人管理后台{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page-shell file-browser-page">
|
|
<div class="page-hero">
|
|
<div class="page-hero-copy">
|
|
<div class="page-eyebrow">Tools Workspace</div>
|
|
<h1>文件浏览</h1>
|
|
<p>将文件查看入口纳入同一套工具工作台，路径、导航和下载动作更清晰。</p>
|
|
</div>
|
|
<div class="page-hero-actions">
|
|
<div class="path-pill">{% raw %}{{ currentPath || '/' }}{% endraw %}</div>
|
|
<el-button type="primary" plain @click="loadFiles(currentPath === '/' ? '' : currentPath)"><i class="el-icon-refresh"></i> 刷新</el-button>
|
|
<el-button type="primary" @click="navigateUp"><i class="el-icon-arrow-up"></i> 上级目录</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<el-card class="workspace-card" shadow="hover">
|
|
<div slot="header" class="workspace-header">
|
|
<div>
|
|
<h3>文件列表</h3>
|
|
<p>支持目录切换、文件下载与修改时间查看。</p>
|
|
</div>
|
|
</div>
|
|
<el-table :data="fileList" style="width: 100%" v-loading="loading">
|
|
<el-table-column prop="name" label="名称" min-width="320">
|
|
<template slot-scope="scope">
|
|
<div class="entity-cell">
|
|
<div class="entity-avatar" :class="scope.row.is_dir ? 'entity-avatar--folder' : 'entity-avatar--file'">
|
|
<i :class="scope.row.is_dir ? 'el-icon-folder' : 'el-icon-document'"></i>
|
|
</div>
|
|
<div class="entity-copy">
|
|
<el-link :type="scope.row.is_dir ? 'primary' : 'info'" @click="scope.row.is_dir ? navigateTo(scope.row.name) : null">
|
|
{% raw %}{{ scope.row.name }}{% endraw %}
|
|
</el-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="type" label="类型" width="110" align="center">
|
|
<template slot-scope="scope">{% raw %}{{ scope.row.is_dir ? '目录' : '文件' }}{% endraw %}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="size" label="大小" width="120" align="center">
|
|
<template slot-scope="scope">{% raw %}{{ scope.row.is_dir ? '-' : formatFileSize(scope.row.size) }}{% endraw %}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="modified" label="修改时间" width="190">
|
|
<template slot-scope="scope">{% raw %}{{ formatDate(scope.row.modified) }}{% endraw %}</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="120" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button v-if="!scope.row.is_dir" type="primary" size="mini" @click="downloadFile(scope.row.name)">下载</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
mixins: [baseApp],
|
|
data() {
|
|
return {
|
|
currentPath: '',
|
|
fileList: [],
|
|
loading: false
|
|
}
|
|
},
|
|
created() {
|
|
this.currentView = '15';
|
|
this.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;
|
|
} 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 || this.currentPath === '/') return;
|
|
const lastSlashIndex = this.currentPath.lastIndexOf('/');
|
|
if (lastSlashIndex <= 0) {
|
|
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);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.page-shell { display: flex; flex-direction: column; gap: 16px; }
|
|
.page-hero {
|
|
display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 24px 26px; border-radius: 24px;
|
|
background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(59,130,246,0.08), rgba(255,255,255,0.9));
|
|
border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
|
|
}
|
|
.page-hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
|
|
.page-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #6366f1; font-weight: 700; margin-bottom: 8px; }
|
|
.page-hero-copy h1 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; color: #0f172a; }
|
|
.page-hero-copy p { color: #64748b; font-size: 14px; }
|
|
.path-pill {
|
|
max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;
|
|
color: #475569; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,0.82); border: 1px solid rgba(148,163,184,0.14);
|
|
}
|
|
.workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
|
|
.workspace-header h3 { font-size: 18px; margin-bottom: 4px; }
|
|
.workspace-header p { font-size: 13px; color: #64748b; }
|
|
.entity-cell { display: flex; align-items: center; gap: 12px; }
|
|
.entity-avatar {
|
|
width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
|
|
color: #4f46e5; background: rgba(79,70,229,0.10);
|
|
}
|
|
.entity-avatar--folder { color: #10b981; background: rgba(16,185,129,0.12); }
|
|
.entity-avatar--file { color: #3b82f6; background: rgba(59,130,246,0.10); }
|
|
</style>
|
|
{% endblock %}
|