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:
灌糖包子 2026-04-01 14:21:23 +08:00
parent 58729a2960
commit 9aaacb9937
Signed by: sookie
GPG Key ID: 67E8D0AE905C79B0
9 changed files with 204 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/static/common.less
View File

@ -63,9 +63,9 @@ html, body, #app, .layout {
}
/* ===== 主内容区 ===== */
.layout-main {
padding: 0 !important;
display: flex !important;
.el-main.layout-main {
--el-main-padding: 0;
display: flex;
flex-direction: column;
background: var(--el-fill-color);
@ -85,29 +85,19 @@ html, body, #app, .layout {
}
> .layout-copy {
text-align: center;
padding: 8px 0 12px;
padding-bottom: 12px;
color: var(--el-text-color-placeholder);
font-size: var(--el-font-size-extra-small);
}
}
/* ===== 页面布局（用于带分页的表格页面）===== */
.page-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
/* ===== 页面布局（用于带分页的表格页面）===== */
.page-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
/* ===== 表格美化 ===== */
.table-container {
position: relative;
flex: 1;
overflow: hidden;
margin-bottom: 12px;
display: flex;
flex-direction: column;
.el-table {
.table-container {
// CSS 变量覆盖：表头背景/文字色、行悬停色、边框色、正文色
--el-table-header-bg-color: var(--el-fill-color-light);
--el-table-header-text-color: var(--el-text-color-regular);
@ -119,7 +109,9 @@ html, body, #app, .layout {
flex: 1;
border-radius: var(--el-border-radius-base);
overflow: hidden;
border: 1px solid var(--el-border-color-lighter);
border-left: 1px solid var(--el-border-color-lighter);
border-right: 1px solid var(--el-border-color-lighter);
border-top: 1px solid var(--el-border-color-lighter);
&::before {
display: none;
@ -141,25 +133,22 @@ html, body, #app, .layout {
padding: 4px 6px;
}
}
}
/* ===== 操作栏 ===== */
.btn-container {
margin-bottom: 14px;
display: flex;
align-items: center;
.search-btn {
margin-left: auto;
/* ===== 分页 ===== */
.page-container {
margin-top: 20px;
display: flex;
justify-content: center;
}
}
/* ===== 操作栏 ===== */
.btn-container {
margin-bottom: 14px;
display: flex;
align-items: center;
/* ===== 分页 ===== */
.page-container {
padding: 16px 0 4px;
display: flex;
justify-content: center;
.search-btn {
margin-left: auto;
}
}
}
/* ===== 表单弹窗 ===== */

36
src/views/api/Hitokoto.vue
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"

94
src/views/api/Music.vue
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"

28
src/views/api/PhotoWall.vue
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"

54
src/views/api/SourceImage.vue
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"

4
src/views/system/Article.vue
View File

@ -57,8 +57,7 @@
<el-tree :props="treeProps" :load="loadTreeData" lazy highlight-current @node-click="articlePreview" />
</el-col>
<el-col :span="20" style="height: 100%; display: flex; flex-direction: column;">
<div class="table-container" style="margin-bottom: 0;">
<el-table :data="articleData" v-loading="loading" stripe @selection-change="dataSelect" height="100%">
<el-table class="table-container" :data="articleData" v-loading="loading" stripe @selection-change="dataSelect" height="100%">
<el-table-column type="selection" width="55" />
<el-table-column prop="title" label="标题" />
<el-table-column prop="path" label="路径" >
@ -101,7 +100,6 @@
@current-change="pageChange">
</el-pagination>
</div>
</div>
</el-col>
</el-row>
<el-drawer

62
src/views/system/SystemConfig.vue
View File

@ -12,38 +12,36 @@
<el-button @click="reset" icon="RefreshLeft">重置</el-button>
</div>
</div>
<div class="table-container">
<el-table :data="systemConfigData" v-loading="loading" stripe>
<el-table-column type="expand">
<template #default="scope">
<pre style="margin:0 10px;">{{ JSON.stringify(scope.row.value, null, ' ') }}</pre>
</template>
</el-table-column>
<el-table-column prop="name" label="配置项名称" />
<el-table-column prop="description" label="配置项描述" />
<el-table-column prop="isPublic" label="是否公开" >
<template #default="scope">
{{ scope.row.isPublic ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column prop="createdAt" label="创建时间" >
<template #default="scope">
{{ datetimeFormat(scope.row.createdAt) }}
</template>
</el-table-column>
<el-table-column prop="updatedAt" label="更新时间" >
<template #default="scope">
{{ datetimeFormat(scope.row.updatedAt) }}
</template>
</el-table-column>
<el-table-column label="操作" >
<template #default="scope">
<el-button link icon="Edit" @click="update(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>
<el-table class="table-container" :data="systemConfigData" v-loading="loading" stripe>
<el-table-column type="expand">
<template #default="scope">
<pre style="margin:0 10px;">{{ JSON.stringify(scope.row.value, null, ' ') }}</pre>
</template>
</el-table-column>
<el-table-column prop="name" label="配置项名称" />
<el-table-column prop="description" label="配置项描述" />
<el-table-column prop="isPublic" label="是否公开" >
<template #default="scope">
{{ scope.row.isPublic ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column prop="createdAt" label="创建时间" >
<template #default="scope">
{{ datetimeFormat(scope.row.createdAt) }}
</template>
</el-table-column>
<el-table-column prop="updatedAt" label="更新时间" >
<template #default="scope">
{{ datetimeFormat(scope.row.updatedAt) }}
</template>
</el-table-column>
<el-table-column label="操作" >
<template #default="scope">
<el-button link icon="Edit" @click="update(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>
<el-dialog v-model="addModal" :title="modalTitle" >
<system-config-add ref="addForm" :formData="formData" />
<template #footer>

50
src/views/system/SystemRole.vue
View File

@ -12,32 +12,30 @@
<el-button @click="reset" icon="RefreshLeft">重置</el-button>
</div>
</div>
<div class="table-container">
<el-table :data="systemRoleData" v-loading="loading" stripe>
<el-table-column prop="name" label="角色名称" />
<el-table-column prop="methods" label="允许的请求类型" >
<template #default="scope">
<el-tag type="info" v-for="method in scope.row.methods" :key="method">{{method}}</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 prop="updatedAt" label="更新时间" >
<template #default="scope">
{{ datetimeFormat(scope.row.updatedAt) }}
</template>
</el-table-column>
<el-table-column label="操作" >
<template #default="scope">
<el-button link icon="Edit" @click="update(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>
<el-table class="table-container" :data="systemRoleData" v-loading="loading" stripe>
<el-table-column prop="name" label="角色名称" />
<el-table-column prop="methods" label="允许的请求类型" >
<template #default="scope">
<el-tag type="info" v-for="method in scope.row.methods" :key="method">{{method}}</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 prop="updatedAt" label="更新时间" >
<template #default="scope">
{{ datetimeFormat(scope.row.updatedAt) }}
</template>
</el-table-column>
<el-table-column label="操作" >
<template #default="scope">
<el-button link icon="Edit" @click="update(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"

42
src/views/system/SystemUser.vue
View File

@ -12,28 +12,26 @@
<el-button @click="reset" icon="RefreshLeft">重置</el-button>
</div>
</div>
<div class="table-container">
<el-table :data="systemUserData" v-loading="loading" stripe>
<el-table-column prop="username" label="用户名" />
<el-table-column prop="realname" label="昵称" />
<el-table-column prop="createdAt" label="创建时间" >
<template #default="scope">
{{ datetimeFormat(scope.row.createdAt) }}
</template>
</el-table-column>
<el-table-column prop="updatedAt" label="更新时间" >
<template #default="scope">
{{ datetimeFormat(scope.row.updatedAt) }}
</template>
</el-table-column>
<el-table-column label="操作" >
<template #default="scope">
<el-button link icon="Edit" @click="update(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>
<el-table class="table-container" :data="systemUserData" v-loading="loading" stripe>
<el-table-column prop="username" label="用户名" />
<el-table-column prop="realname" label="昵称" />
<el-table-column prop="createdAt" label="创建时间" >
<template #default="scope">
{{ datetimeFormat(scope.row.createdAt) }}
</template>
</el-table-column>
<el-table-column prop="updatedAt" label="更新时间" >
<template #default="scope">
{{ datetimeFormat(scope.row.updatedAt) }}
</template>
</el-table-column>
<el-table-column label="操作" >
<template #default="scope">
<el-button link icon="Edit" @click="update(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"