feat(web): 08 后台四个页面落地(内容治理 / 订单与权益 / 创作者审核 / 数据看板)

为什么:08 运营后台的接口在前几轮已经实现,但运营在界面上点不到——
评论审核、举报工单、敏感词维护、订单补发/退款、权益回收、金币补发、对账、
创作者入驻与内容提交审核、运营大盘,都只能靠 curl。本轮把这四个页面补齐,
08 才算真正闭环。

- 内容治理:评论审核(通过/驳回/删除)、举报工单处理(可联动封禁)、敏感词库增删改查
- 订单与权益:订单检索与流水、补发、退款、权益检索/人工补发/回收、金币流水与人工补币、对账运行与历史
- 创作者审核:入驻审核(通过/驳回原因码/冻结)+ 资质抽屉;内容提交审核(通过/驳回)
- 数据看板:overview 五组指标 + transcode 队列与失败任务,只读;取不到的指标显示「暂无数据源」而不是 0
- 新增 console.css(工具条/抽屉/看板卡片,含深色模式),四个页面共用;时间列统一 yyyy-MM-dd HH:mm:ss
- 按钮按权限点显隐(没有 *:update / *:audit 的角色看到的是只读态),表格列与后端字段一一对应
This commit is contained in:
Vicky committed 2026-10-15 13:28:46 +08:00
1 parent 44c2c46a68
commit f037d243cd
13 files changed
+2680

No files matched your search

+171
View File
@@ -0,0 +1,171 @@
/**
* 运营台通用版式:内容治理 / 订单与权益 / 创作者审核 / 数据看板四个页面共用。
*
* 两条底线和 App 用户页一致:
* 1. 筛选控件窄窗口下换行,而不是被挤出可视区;
* 2. 卡片固定尺寸,指标位数变化时栅格不跳动。
*/
.console-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.console-toolbar .console-keyword {
flex: 1 1 240px;
min-width: 200px;
max-width: 320px;
}
.console-toolbar .console-select {
width: 160px;
flex: 0 0 160px;
}
.console-toolbar .console-user,
.console-toolbar .console-drama {
width: 150px;
flex: 0 0 150px;
}
.console-count {
margin-left: auto;
color: #858b95;
font-size: 13px;
white-space: nowrap;
}
.console-hint {
margin: 0 0 12px;
color: #858b95;
font-size: 13px;
line-height: 1.6;
}
/* el-alert 复用同一类名时,保留弹窗内的间距而不是当成段落文本 */
section .console-hint.el-alert {
margin-bottom: 14px;
}
.console-muted {
color: #858b95;
font-size: 13px;
}
.console-full {
width: 100%;
}
.console-number {
width: 180px;
}
/* 金币变动:正负一眼可辨,等宽数字让列对齐 */
.console-credit,
.console-debit {
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.console-credit {
color: #4d866a;
}
.console-debit {
color: #b54848;
}
.console-drawer .el-drawer__header {
margin-bottom: 8px;
}
.console-drawer .el-table {
font-size: 12px;
}
.console-drawer .el-table .el-table__cell {
padding: 6px 0;
}
/* ---------- 数据看板 ---------- */
.board-group + .board-group {
margin-top: 20px;
}
.board-title {
margin: 0 0 10px;
color: #302d44;
font-size: 14px;
font-weight: 650;
}
.board-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.board-card {
display: flex;
flex-direction: column;
gap: 6px;
min-height: 74px;
padding: 12px 14px;
border: 1px solid #e6e8eb;
border-radius: 6px;
background: #fff;
}
.board-label {
color: #727983;
font-size: 12px;
}
.board-value {
color: #303640;
font-size: 20px;
font-variant-numeric: tabular-nums;
line-height: 1.2;
overflow-wrap: anywhere;
}
.board-value-empty {
color: #9a97a8;
font-size: 13px;
font-weight: 400;
}
.board-notes {
margin-top: 18px;
}
.board-notes ul {
margin: 0;
padding-left: 18px;
line-height: 1.7;
}
.board-transcode {
margin-top: 16px;
}
html.dark .console-count,
html.dark .console-hint,
html.dark .console-muted,
html.dark .board-label {
color: var(--el-text-color-secondary);
}
html.dark .board-title,
html.dark .board-value {
color: var(--el-text-color-primary);
}
html.dark .board-card {
border-color: var(--el-border-color-light);
background: var(--el-bg-color-overlay);
}