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

优化表格页面布局样式，统一表格容器与分页、操作栏结构，调整相关 .vue 页面表格结构以适配新样式。\n\n- 优化 src/static/common.less 的表格、分页、操作栏样式结构\n- 调整 src/views/api/Hitokoto.vue、Music.vue、PhotoWall.vue、SourceImage.vue、Article.vue、SystemConfig.vue、SystemRole.vue、SystemUser.vue 的表格结构，统一使用 .table-container 类\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Browse Source
This commit is contained in:
sookie
2026-04-01 14:21:23 +08:00
parent 58729a2960
commit 9aaacb9937
9 changed files with 204 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/api/Hitokoto.vue
+17 -19
View File
@@ -26,25 +26,23 @@
<el-button @click="reset" icon="RefreshLeft">重置</el-button>
</div>
</div>
<div class="table-container">
<el-table :data="hitokotoData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="type" label="类型" width="180">
<template #default="scope">
{{ findTypeText(scope.row.type) }}
</template>
</el-table-column>
<el-table-column prop="hitokoto" label="内容" />
<el-table-column prop="from" label="来自" width="180"/>
<el-table-column prop="creator" label="作者" width="180"/>
<el-table-column prop="number" label="编号" width="70"/>
<el-table-column prop="createdAt" label="创建时间" width="180">
<template #default="scope">
{{ datetimeFormat(scope.row.createdAt) }}
</template>
</el-table-column>
</el-table>
</div>
<el-table class="table-container" :data="hitokotoData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="type" label="类型" width="180">
<template #default="scope">
{{ findTypeText(scope.row.type) }}
</template>
</el-table-column>
<el-table-column prop="hitokoto" label="内容" />
<el-table-column prop="from" label="来自" width="180"/>
<el-table-column prop="creator" label="作者" width="180"/>
<el-table-column prop="number" label="编号" width="70"/>
<el-table-column prop="createdAt" label="创建时间" width="180">
<template #default="scope">
{{ datetimeFormat(scope.row.createdAt) }}
</template>
</el-table-column>
</el-table>
<div class="page-container">
<el-pagination background
:page-sizes="store.state.pageSizeOpts"
src/views/api/Music.vue
+46 -48
View File
@@ -30,56 +30,54 @@
<el-button @click="reset" icon="RefreshLeft">重置</el-button>
</div>
</div>
<div class="table-container">
<el-table :data="musicData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="名称" show-overflow-tooltip role=""/>
<el-table-column prop="ext" label="类型" width="80" />
<el-table-column prop="size" label="文件大小" width="110">
<template #default="scope">
{{ prettyBytes(scope.row.size) }}
<el-table class="table-container" :data="musicData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="名称" show-overflow-tooltip role=""/>
<el-table-column prop="ext" label="类型" width="80" />
<el-table-column prop="size" label="文件大小" width="110">
<template #default="scope">
{{ prettyBytes(scope.row.size) }}
</template>
</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="album" label="唱片集" />
<el-table-column prop="artist" label="艺术家" />
<el-table-column prop="libId" label="所属歌单" >
<template #default="scope">
<template v-if="scope.row.isEditing && currentRow">
<el-select v-model="currentRow.libId">
<el-option v-for="musicLib in musicLibs" :key="musicLib._id" :value="musicLib._id" :label="musicLib.name" />
</el-select>
<el-button link icon="Check" type="primary" @click="saveMusicLib(scope.row)"></el-button>
<el-button link icon="Close" type="primary" @click="scope.row.isEditing = false"></el-button>
</template>
</el-table-column>
<el-table-column prop="time" label="时长" width="110">
<template #default="scope">
{{ formatDuration(scope.row.time) }}
<template v-else>
{{ findMusicLib(scope.row.libId) }}
<el-button link icon="Edit" type="primary" @click="updateLib(scope.row)"></el-button>
</template>
</el-table-column>
<el-table-column prop="title" label="标题" show-overflow-tooltip />
<el-table-column prop="album" label="唱片集" />
<el-table-column prop="artist" label="艺术家" />
<el-table-column prop="libId" label="所属歌单" >
<template #default="scope">
<template v-if="scope.row.isEditing && currentRow">
<el-select v-model="currentRow.libId">
<el-option v-for="musicLib in musicLibs" :key="musicLib._id" :value="musicLib._id" :label="musicLib.name" />
</el-select>
<el-button link icon="Check" type="primary" @click="saveMusicLib(scope.row)"></el-button>
<el-button link icon="Close" type="primary" @click="scope.row.isEditing = false"></el-button>
</template>
<template v-else>
{{ findMusicLib(scope.row.libId) }}
<el-button link icon="Edit" type="primary" @click="updateLib(scope.row)"></el-button>
</template>
</template>
</el-table-column>
<el-table-column prop="lyricId" label="歌词" width="80" >
<template #default="scope">
<div style="width: 18px">
<Check v-if="scope.row.lyricId" />
<Close v-else/>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="150" >
<template #default="scope">
<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 type="danger" icon="Delete" @click="remove(scope.row)" title="删除"></el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
</el-table-column>
<el-table-column prop="lyricId" label="歌词" width="80" >
<template #default="scope">
<div style="width: 18px">
<Check v-if="scope.row.lyricId" />
<Close v-else/>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="150" >
<template #default="scope">
<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 type="danger" icon="Delete" @click="remove(scope.row)" title="删除"></el-button>
</template>
</el-table-column>
</el-table>
<div class="page-container">
<el-pagination background
:page-sizes="store.state.pageSizeOpts"
src/views/api/PhotoWall.vue
+13 -15
View File
@@ -50,21 +50,19 @@
</div>
</div>
<div class="table-container">
<el-table :data="photowallData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="文件名" />
<el-table-column prop="md5" label="md5" width="300" />
<el-table-column prop="thumbnail" label="缩略图" />
<el-table-column prop="width" label="宽度" width="70" />
<el-table-column prop="height" label="高度" width="70" />
<el-table-column label="操作" width="100" >
<template #default="scope">
<el-button link icon="View" plain @click="preview(scope.row)" title="预览"></el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-table class="table-container" :data="photowallData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="文件名" />
<el-table-column prop="md5" label="md5" width="300" />
<el-table-column prop="thumbnail" label="缩略图" />
<el-table-column prop="width" label="宽度" width="70" />
<el-table-column prop="height" label="高度" width="70" />
<el-table-column label="操作" width="100" >
<template #default="scope">
<el-button link icon="View" plain @click="preview(scope.row)" title="预览"></el-button>
</template>
</el-table-column>
</el-table>
<div class="page-container">
<el-pagination background
:page-sizes="store.state.pageSizeOpts"
src/views/api/SourceImage.vue
+26 -28
View File
@@ -20,34 +20,32 @@
</el-upload>
<el-button type="danger" @click="deleteAll" style="vertical-align: bottom">批量删除</el-button>
</div>
<div class="table-container">
<el-table :data="sourceImageData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="hash" label="md5" width="300" />
<el-table-column prop="size" label="文件大小" >
<template #default="scope">
{{ prettyBytes(scope.row.size) }}
</template>
</el-table-column>
<el-table-column prop="mime" label="MIME" />
<el-table-column prop="label" label="标签" >
<template #default="scope">
<el-tag v-for="label in scope.row.label" :key="label" effect="plain">{{label}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="createdAt" label="上传时间" >
<template #default="scope">
{{ datetimeFormat(scope.row.createdAt) }}
</template>
</el-table-column>
<el-table-column label="操作" >
<template #default="scope">
<el-button link icon="EditPen" type="primary" plain @click="modifyTags(scope.row)" title="修改标签"></el-button>
<el-button link icon="View" plain @click="preview(scope.row)" title="预览"></el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-table class="table-container" :data="sourceImageData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="hash" label="md5" width="300" />
<el-table-column prop="size" label="文件大小" >
<template #default="scope">
{{ prettyBytes(scope.row.size) }}
</template>
</el-table-column>
<el-table-column prop="mime" label="MIME" />
<el-table-column prop="label" label="标签" >
<template #default="scope">
<el-tag v-for="label in scope.row.label" :key="label" effect="plain">{{label}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="createdAt" label="上传时间" >
<template #default="scope">
{{ datetimeFormat(scope.row.createdAt) }}
</template>
</el-table-column>
<el-table-column label="操作" >
<template #default="scope">
<el-button link icon="EditPen" type="primary" plain @click="modifyTags(scope.row)" title="修改标签"></el-button>
<el-button link icon="View" plain @click="preview(scope.row)" title="预览"></el-button>
</template>
</el-table-column>
</el-table>
<div class="page-container">
<el-pagination background
:page-sizes="store.state.pageSizeOpts"