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