sookie/blog-admin-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(Music.vue): 新增“时长”列，显示格式为mm:ss，展示音乐时长（time字段）并格式化为两位数分钟和秒数。

Browse Source
This commit is contained in:
灌糖包子 2026-04-01 10:46:34 +08:00
parent b0370df011
commit 58729a2960
Signed by: sookie
GPG Key ID: 67E8D0AE905C79B0
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/views/api/Music.vue
View File

@ -34,12 +34,17 @@
<el-table :data="musicData" v-loading="loading" stripe @selection-change="dataSelect"> <el-table :data="musicData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
<el-table-column prop="name" label="名称" show-overflow-tooltip role=""/> <el-table-column prop="name" label="名称" show-overflow-tooltip role=""/>
<el-table-column prop="ext" label="类型" width="100" /> <el-table-column prop="ext" label="类型" width="80" />
<el-table-column prop="size" label="文件大小" width="150"> <el-table-column prop="size" label="文件大小" width="110">
<template #default="scope"> <template #default="scope">
{{ prettyBytes(scope.row.size) }} {{ prettyBytes(scope.row.size) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="time" label="时长" width="110">
<template #default="scope">
{{ formatDuration(scope.row.time) }}
</template>
</el-table-column>
<el-table-column prop="title" label="标题" show-overflow-tooltip /> <el-table-column prop="title" label="标题" show-overflow-tooltip />
<el-table-column prop="album" label="唱片集" /> <el-table-column prop="album" label="唱片集" />
<el-table-column prop="artist" label="艺术家" /> <el-table-column prop="artist" label="艺术家" />
@ -58,7 +63,7 @@
</template> </template>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="lyricId" label="歌词" width="120" > <el-table-column prop="lyricId" label="歌词" width="80" >
<template #default="scope"> <template #default="scope">
<div style="width: 18px"> <div style="width: 18px">
<Check v-if="scope.row.lyricId" /> <Check v-if="scope.row.lyricId" />
@ -66,7 +71,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="230" > <el-table-column label="操作" width="150" >
<template #default="scope"> <template #default="scope">
<el-button link icon="Document" @click="updateLyric(scope.row)" title="歌词"></el-button> <el-button link icon="Document" @click="updateLyric(scope.row)" title="歌词"></el-button>
<el-button link icon="Download" @click="download(scope.row)" title="下载"></el-button> <el-button link icon="Download" @click="download(scope.row)" title="下载"></el-button>
@ -180,6 +185,13 @@ import { UploadInstance, ElMessage, ElMessageBox } from 'element-plus'
import { MusicModel, MusicLibModel, MusicLyricModel, MusicPlayerItem } from '@/model/api/music' import { MusicModel, MusicLibModel, MusicLyricModel, MusicPlayerItem } from '@/model/api/music'
import APlayer from './aplayer/vue-aplayer.vue' import APlayer from './aplayer/vue-aplayer.vue'
import prettyBytes from 'pretty-bytes' import prettyBytes from 'pretty-bytes'
// 格式化秒为 mm:ss
function formatDuration(seconds?: number): string {
if (!seconds || isNaN(seconds)) return '00:00'
const m = Math.floor(seconds / 60)
const s = Math.floor(seconds % 60)
return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
}
import type { VForm } from '@/types' import type { VForm } from '@/types'
import http from '@/utils/http' import http from '@/utils/http'