chore(web): 收口前几轮后台改动（品牌 / 媒资上传 / 轮播图 / 类型管理 / 操作日志 / App 用户）
为什么：这些改动在前几轮就已完成并在 :3005 验证过，但一直留在工作区没有入库。 下一步 3-4 的四个页面依赖其中的公共样式入口（src/styles/business/index.css）与 api/admin 的公共类型（PageResult 等），如果不先收口，新页面的提交就会夹带旧改动， 既说不清 diff 边界，也让 index.css 这类多轮共用的文件长期处于半提交状态。 本提交只做归档，不改行为： - 品牌与接口基址改成 FruitShorts / 短剧服务（.env.*、README、vite 代理） - 去掉前端 mock 数据目录（src/data、src/permissions、stores/auth），改为走真实接口 - 新增 api/admin 下的接口封装与 src/utils/uploader.ts（媒资分片直传） - 新增/改造：轮播图管理、类型管理、操作日志、App 用户管理、后台布局与公共样式
This commit is contained in:
Vicky committed
1 parent
40546bfd01
commit
44c2c46a68
59 files changed
+4082
-982
No files matched your search
@@ -0,0 +1,135 @@
|
||||
/**
|
||||
* App 用户管理页。
|
||||
* 窄窗口下的重点是两件事：筛选控件换行而不是被挤出可视区；长昵称在单元格里截断而不是撑破表格。
|
||||
*/
|
||||
|
||||
.app-user-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.app-user-toolbar .app-user-keyword {
|
||||
flex: 1 1 240px;
|
||||
min-width: 200px;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.app-user-toolbar .app-user-status,
|
||||
.app-user-toolbar .app-user-country {
|
||||
width: 150px;
|
||||
flex: 0 0 150px;
|
||||
}
|
||||
|
||||
.app-user-count {
|
||||
margin-left: auto;
|
||||
color: #858b95;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 用户单元格：头像固定宽度，文字块 min-width:0 才能让省略号生效 */
|
||||
.app-user-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-user-avatar {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
flex: 0 0 34px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
background: #6f7cf0;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.app-user-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.app-user-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-user-name,
|
||||
.app-user-uid {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-user-name {
|
||||
color: #302d44;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.app-user-uid {
|
||||
color: #9a97a8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.app-user-mono {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* 详情抽屉 */
|
||||
.app-user-drawer .el-drawer__header {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.app-user-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 4px 0 16px;
|
||||
border-bottom: 1px solid #f0eef4;
|
||||
}
|
||||
|
||||
.app-user-summary .app-user-name {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.app-user-section {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.app-user-section-title {
|
||||
margin: 0 0 8px;
|
||||
color: #302d44;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
/* 抽屉内的表格：内容多时由 .el-drawer__body 统一滚动，这里不再套一层滚动条 */
|
||||
.app-user-drawer .el-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.app-user-drawer .el-table .el-table__cell {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
html.dark .app-user-name,
|
||||
html.dark .app-user-section-title {
|
||||
color: #e8e6ef;
|
||||
}
|
||||
|
||||
html.dark .app-user-summary {
|
||||
border-bottom-color: #2c2c37;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
.banner-thumb {
|
||||
display: block;
|
||||
width: 160px;
|
||||
height: 90px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 4px;
|
||||
background: #f0f2f4 !important;
|
||||
}
|
||||
|
||||
.banner-thumb-empty {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
width: 160px;
|
||||
height: 90px;
|
||||
border-radius: 4px;
|
||||
background: #f0f2f4 !important;
|
||||
color: #7e8791;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.banner-field {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
.banner-field-actions {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
/* 编辑弹窗里的轮播图预览：和上传控件并排，控制弹窗高度 */
|
||||
.form-banner-preview {
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 112px;
|
||||
flex: 0 0 200px;
|
||||
object-fit: contain;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 6px;
|
||||
background: #f0f2f4 !important;
|
||||
}
|
||||
|
||||
.dark .banner-thumb,
|
||||
.dark .banner-thumb-empty,
|
||||
.dark .form-banner-preview {
|
||||
background: #353b45 !important;
|
||||
color: #b9c1cb;
|
||||
}
|
||||
@@ -3,12 +3,20 @@
|
||||
gap: 16px;
|
||||
min-height: 64px;
|
||||
padding: 12px 0 !important;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.drama-filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex: 0 0 auto;
|
||||
/* 允许收缩并换行：窄窗口下筛选控件排到第二行，而不是被挤出可视区 */
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.drama-filters > .el-date-editor {
|
||||
width: 360px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.drama-filters > .el-input {
|
||||
width: 300px !important;
|
||||
@@ -29,11 +37,21 @@
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.table-actions .el-button {
|
||||
/* 统一尺寸：高度固定、水平内边距，靠行高垂直居中，避免文字被压扁 */
|
||||
height: 28px !important;
|
||||
min-height: 28px !important;
|
||||
padding: 0 10px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 400 !important;
|
||||
padding: 5px 4px !important;
|
||||
font-weight: 500 !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Element Plus 默认给相邻按钮加 12px 外边距，会和这里的 gap 叠加导致换行 */
|
||||
.table-actions .el-button + .el-button {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.table-actions .danger-action {
|
||||
color: #a66a6a !important;
|
||||
@@ -58,6 +76,95 @@
|
||||
color: #7e8791;
|
||||
background: #f0f2f4 !important;
|
||||
}
|
||||
|
||||
/* 名称列只放封面 + 标题，长标题在格子里换行，不撑破单元格 */
|
||||
.drama-cell > div {
|
||||
min-width: 0;
|
||||
}
|
||||
.drama-cell b {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/* 空值占位，弱化显示 */
|
||||
.table-empty-text {
|
||||
color: #a8aeb8;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 编辑弹窗里的封面预览：固定竖版尺寸，和上传控件并排，避免弹窗过高 */
|
||||
.cover-field {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
.cover-field-actions {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
.form-cover-preview {
|
||||
display: block;
|
||||
width: 84px;
|
||||
height: 112px;
|
||||
flex: 0 0 84px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 6px;
|
||||
background: #f0f2f4 !important;
|
||||
}
|
||||
.dark .form-cover-preview {
|
||||
background: #353b45 !important;
|
||||
}
|
||||
|
||||
/* 编辑弹窗里的视频预览 */
|
||||
.video-field {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
.video-field-actions {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
.form-video-preview {
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 112px;
|
||||
flex: 0 0 200px;
|
||||
object-fit: contain;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 6px;
|
||||
background: #000 !important;
|
||||
}
|
||||
|
||||
/* 剧集预览弹窗里的播放器 */
|
||||
.episode-video-player {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-height: 60vh;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
background: #000 !important;
|
||||
}
|
||||
|
||||
/* 剧集列表里的视频缩略播放器：默认显示首帧，鼠标移入即播放 */
|
||||
.episode-video-thumb {
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 68px;
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 4px;
|
||||
background: #000 !important;
|
||||
}
|
||||
|
||||
/* 列表里点视频即放大播放，给个悬停反馈 */
|
||||
.episode-video-thumb:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.25);
|
||||
}
|
||||
.dark .table-result-count {
|
||||
color: #a6aeb9;
|
||||
}
|
||||
@@ -123,11 +230,6 @@
|
||||
.dark .dashboard-el-table td.el-table__cell {
|
||||
color: #c0c6cf;
|
||||
}
|
||||
.table-actions .el-button {
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
padding: 7px 11px !important;
|
||||
}
|
||||
.table-actions .el-button--primary {
|
||||
--el-button-bg-color: #409eff;
|
||||
--el-button-border-color: #409eff;
|
||||
@@ -188,9 +290,6 @@
|
||||
.table-result-count {
|
||||
font-size: 14px;
|
||||
}
|
||||
.table-actions .el-button {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.library-toolbar .el-input__inner,
|
||||
.library-toolbar .el-select__placeholder {
|
||||
font-size: 14px;
|
||||
@@ -293,9 +392,8 @@
|
||||
.admin-user-toolbar > .el-select {
|
||||
width: 190px;
|
||||
}
|
||||
.admin-users-table {
|
||||
min-width: 1250px;
|
||||
}
|
||||
/* 管理员表格不设最小宽度：列宽超出容器时由 el-table 自行横向滚动，
|
||||
否则会把固定列顶到可视区之外 */
|
||||
.menu-editor-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(270px, 0.7fr) minmax(520px, 1.5fr);
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* 全局布局约束：弹窗与表格在窄窗口下不能溢出可视区。
|
||||
*/
|
||||
|
||||
/* 弹窗宽度不超过视口 */
|
||||
.el-dialog {
|
||||
max-width: 92vw;
|
||||
}
|
||||
|
||||
/* 内容过高时在弹窗内部滚动，避免标题和底部按钮被顶出屏幕。
|
||||
上限同时受视口高度约束，保证标题栏和底部按钮始终可见 */
|
||||
.el-dialog__body {
|
||||
max-height: min(78vh, calc(100vh - 140px));
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 抽屉内容同样允许滚动 */
|
||||
.el-drawer__body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 弹窗表单的两列布局：成对字段并排，避免表单过高把后面的字段挤到可视区之外。
|
||||
* 注意不要复用 .app-dialog —— 那套样式带 10px 字号，会让弹窗文字过小。
|
||||
*/
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
.log-detail {
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.log-block {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.log-block h4 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-json {
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
max-height: 240px;
|
||||
overflow: auto;
|
||||
font-family: Menlo, Consolas, monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
background: #f6f7f9 !important;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.dark .log-json {
|
||||
background: #2a2e36 !important;
|
||||
}
|
||||
Reference in new issue
Block a user