UI改版测试V0
This commit is contained in:
liuwei
@@ -3,82 +3,58 @@
|
||||
{% block title %}文件浏览 - 机器人管理后台{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>文件浏览</span>
|
||||
<div style="float: right;">
|
||||
<el-input
|
||||
v-model="currentPath"
|
||||
placeholder="当前路径"
|
||||
style="width: 300px; margin-right: 10px;"
|
||||
readonly>
|
||||
</el-input>
|
||||
<el-button type="primary" size="small" @click="navigateUp">
|
||||
<i class="el-icon-arrow-up"></i> 上级目录
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="fileList"
|
||||
style="width: 100%"
|
||||
v-loading="loading">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="名称"
|
||||
min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-link
|
||||
:type="scope.row.is_dir ? 'primary' : 'info'"
|
||||
@click="scope.row.is_dir ? navigateTo(scope.row.name) : null">
|
||||
<i :class="scope.row.is_dir ? 'el-icon-folder' : 'el-icon-document'"></i>
|
||||
[[ scope.row.name ]]
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="类型"
|
||||
width="100">
|
||||
<template slot-scope="scope">
|
||||
[[ scope.row.is_dir ? '目录' : '文件' ]]
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="size"
|
||||
label="大小"
|
||||
width="120">
|
||||
<template slot-scope="scope">
|
||||
[[ scope.row.is_dir ? '-' : formatFileSize(scope.row.size) ]]
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="modified"
|
||||
label="修改时间"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
[[ formatDate(scope.row.modified) ]]
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="120">
|
||||
<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 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">
|
||||
[[ scope.row.name ]]
|
||||
</el-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="类型" width="110" align="center">
|
||||
<template slot-scope="scope">[[ scope.row.is_dir ? '目录' : '文件' ]]</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="size" label="大小" width="120" align="center">
|
||||
<template slot-scope="scope">[[ scope.row.is_dir ? '-' : formatFileSize(scope.row.size) ]]</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="modified" label="修改时间" width="190">
|
||||
<template slot-scope="scope">[[ formatDate(scope.row.modified) ]]</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 %}
|
||||
|
||||
@@ -113,10 +89,7 @@
|
||||
loadFiles(path) {
|
||||
this.loading = true;
|
||||
this.currentPath = path || '/';
|
||||
|
||||
axios.get('/api/list_files', {
|
||||
params: { path: path }
|
||||
})
|
||||
axios.get('/api/list_files', { params: { path: path } })
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.fileList = response.data.data.items;
|
||||
@@ -137,10 +110,9 @@
|
||||
this.loadFiles(newPath);
|
||||
},
|
||||
navigateUp() {
|
||||
if (!this.currentPath) return;
|
||||
|
||||
if (!this.currentPath || this.currentPath === '/') return;
|
||||
const lastSlashIndex = this.currentPath.lastIndexOf('/');
|
||||
if (lastSlashIndex === -1) {
|
||||
if (lastSlashIndex <= 0) {
|
||||
this.loadFiles('');
|
||||
} else {
|
||||
this.loadFiles(this.currentPath.substring(0, lastSlashIndex));
|
||||
@@ -153,4 +125,31 @@
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
<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 %}
|
||||
|
||||
Reference in New Issue
Block a user