parent
9f25ca8527
commit
6659f74e64
2 changed files with 279 additions and 9 deletions
@ -0,0 +1,205 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<el-card> |
||||||
|
<div slot="header"> |
||||||
|
<span>传输管理器</span> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
style="float: right; padding: 3px 0" |
||||||
|
@click="clearRecords" |
||||||
|
> |
||||||
|
清空记录 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
<div class="date-divider"> |
||||||
|
<span class="date-text">2026-05-09</span> |
||||||
|
</div> |
||||||
|
<div v-if="transferList.length > 0" class="transfer-list"> |
||||||
|
<div v-for="item in transferList" :key="item.id" class="transfer-item"> |
||||||
|
<div class="file-icon"> |
||||||
|
<i class="el-icon-video-camera"></i> |
||||||
|
</div> |
||||||
|
<div class="file-info"> |
||||||
|
<div class="file-name">{{ item.name }}</div> |
||||||
|
<div class="file-meta"> |
||||||
|
<span class="file-size">{{ item.size }}</span> |
||||||
|
<span class="file-time">{{ item.time }}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-tag :type="item.status">{{ item.status === "failed" ? "上传失败" : "上传成功" }}</el-tag> |
||||||
|
<div class="file-actions"> |
||||||
|
<el-button type="text" class="action-btn" @click="openFile(item)"> |
||||||
|
打开 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
class="action-btn" |
||||||
|
@click="openLocation(item)" |
||||||
|
> |
||||||
|
打开位置 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div v-else class="empty-state"> |
||||||
|
<i class="el-icon-folder-opened"></i> |
||||||
|
<span>暂无传输记录</span> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
const transferList = [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: "TG-2023-01-21-215030828.mp4", |
||||||
|
size: "11.86M", |
||||||
|
time: "14:33", |
||||||
|
status: "danger", |
||||||
|
path: "/uploads/TG-2023-01-21-215030828.mp4", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
name: "TG-2023-01-21-215030828.mp4", |
||||||
|
size: "11.86M", |
||||||
|
time: "14:33", |
||||||
|
status: "success", |
||||||
|
path: "/uploads/TG-2023-01-21-215030828.mp4", |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "UtilityPage", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
transferList, |
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
clearRecords() { |
||||||
|
this.$confirm("是否要清除本地传输记录？", "提示", { |
||||||
|
confirmButtonText: "确定", |
||||||
|
cancelButtonText: "取消", |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.transferList = []; |
||||||
|
this.$message.success("已清空传输记录"); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
openFile(item) { |
||||||
|
this.$message.info(`正在打开文件位置：${item.path}`); |
||||||
|
}, |
||||||
|
openLocation(item) { |
||||||
|
this.$message.info(`正在打开文件位置：${item.path}`); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.date-divider { |
||||||
|
text-align: center; |
||||||
|
margin-bottom: 15px; |
||||||
|
|
||||||
|
.date-text { |
||||||
|
font-size: 12px; |
||||||
|
color: #999; |
||||||
|
padding: 5px 20px; |
||||||
|
background: #f0f0f0; |
||||||
|
border-radius: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.transfer-list { |
||||||
|
.transfer-item { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 15px; |
||||||
|
background: #f7f9f8; |
||||||
|
border-radius: 8px; |
||||||
|
margin-bottom: 10px; |
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); |
||||||
|
|
||||||
|
.file-icon { |
||||||
|
width: 48px; |
||||||
|
height: 48px; |
||||||
|
border-radius: 8px; |
||||||
|
background: #655dd4; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
color: #fff; |
||||||
|
font-size: 20px; |
||||||
|
margin-right: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.file-info { |
||||||
|
flex: 1; |
||||||
|
|
||||||
|
.file-name { |
||||||
|
font-size: 14px; |
||||||
|
color: #333; |
||||||
|
margin-bottom: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.file-meta { |
||||||
|
display: flex; |
||||||
|
gap: 15px; |
||||||
|
font-size: 12px; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.status-tag { |
||||||
|
font-size: 12px; |
||||||
|
padding: 4px 12px; |
||||||
|
border-radius: 4px; |
||||||
|
margin-right: 15px; |
||||||
|
|
||||||
|
&.failed { |
||||||
|
background: #fff3e0; |
||||||
|
color: #f57c00; |
||||||
|
} |
||||||
|
|
||||||
|
&.success { |
||||||
|
background: #e8f5e9; |
||||||
|
color: #2e7d32; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.file-actions { |
||||||
|
display: flex; |
||||||
|
gap: 10px; |
||||||
|
|
||||||
|
.action-btn { |
||||||
|
color: #009696; |
||||||
|
font-size: 13px; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
color: #00796b; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.empty-state { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
padding: 60px 0; |
||||||
|
color: #999; |
||||||
|
|
||||||
|
i { |
||||||
|
font-size: 48px; |
||||||
|
margin-bottom: 15px; |
||||||
|
opacity: 0.5; |
||||||
|
} |
||||||
|
|
||||||
|
span { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue