feat(web): 07 创作者中心四个页面（我的作品 / 作品编辑 / 收费配置 / 数据看板）
为什么：07 的接口五批都做完了，但创作者在界面上一个都点不到 —— 只能靠 curl。 这批把创作者中心做进后台管理（沿用 AppUsersView 那套 api 封装 + composable + 视图 + 样式与 console.css）， 创作者用自己的后台账号登录就能完成"建草稿 → 编辑分集传片 → 提交审核 → 配置收费 → 看数据"的闭环。 - WorkspaceView：主体状态 / 我的作品（含最近一次提交的审核进度）/ 通知列表；新建草稿、按状态给出可提交的动作、撤回 - DramaEditView：作品信息（封面、预告片）、分集增删与上移下移、分片上传（复用 /admin/media）+ 断点续传 （会话存 localStorage，中断后「继续上传」接着传）、产物挂载、提交记录与撤回；非草稿/已下线状态整页转只读 - PriceConfigView：整剧免费集数与解锁金币 + 逐集免费/收费/试看秒数；已上线只读（需先申请下线） - DashboardView：作品 / 播放 / 互动 / 解锁收入四组指标，取不到的显示「暂无数据源」+ notes 口径说明 - 时间列统一 yyyy-MM-dd HH:mm:ss；表格列与后端字段一一对应，不在前端编字段 - media.ts 补上传进度接口；uploader 补 resumeUpload（先查服务端进度再续传）
This commit is contained in:
Vicky committed
1 parent
f037d243cd
commit
0a2e3e0b81
13 files changed
+2113
-1
No files matched your search
@@ -0,0 +1,237 @@
|
||||
/**
|
||||
* 创作者中心（我的作品 / 作品编辑 / 收费配置 / 数据看板）。
|
||||
* 只放这四个页面专属的类名；工具条、抽屉、看板卡片沿用 console.css。
|
||||
*/
|
||||
|
||||
.creator-profile-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.creator-profile-name {
|
||||
color: #302d44;
|
||||
font-size: 16px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.creator-profile-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
color: #858b95;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.creator-profile-meta b {
|
||||
color: #302d44;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.creator-profile-alert,
|
||||
.creator-edit-alert {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* 作品单元格：封面固定尺寸，标题块 min-width:0 才能让省略号生效 */
|
||||
.creator-drama-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.creator-drama-cover {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
flex: 0 0 34px;
|
||||
width: 34px;
|
||||
height: 46px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background: #eef0f5;
|
||||
color: #9a97a8;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.creator-drama-cover img,
|
||||
.creator-cover-preview img,
|
||||
.creator-episode-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.creator-drama-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.creator-drama-title,
|
||||
.creator-drama-code {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.creator-drama-title {
|
||||
color: #302d44;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.creator-drama-code {
|
||||
color: #9a97a8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.creator-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.creator-progress .console-muted {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 通知列表 */
|
||||
.creator-notice-list {
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.creator-notice {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0eef4;
|
||||
}
|
||||
|
||||
.creator-notice:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.creator-notice-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.creator-notice-title {
|
||||
color: #302d44;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.creator-notice-body {
|
||||
margin: 6px 0 0;
|
||||
color: #727983;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/* 作品编辑页 */
|
||||
.creator-edit-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.creator-edit-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.creator-section-title {
|
||||
margin: 0 0 12px;
|
||||
color: #302d44;
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.creator-section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.creator-section-head .creator-section-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.creator-form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 0 16px;
|
||||
}
|
||||
|
||||
.creator-cover-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.creator-cover-preview {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
width: 56px;
|
||||
height: 76px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e6e8eb;
|
||||
border-radius: 4px;
|
||||
background: #fafbfc;
|
||||
color: #9a97a8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.creator-episode-cover {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
width: 48px;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
background: #eef0f5;
|
||||
color: #9a97a8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.creator-upload-hint {
|
||||
margin: 10px 0 0;
|
||||
color: #727983;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
html.dark .creator-profile-name,
|
||||
html.dark .creator-profile-meta b,
|
||||
html.dark .creator-drama-title,
|
||||
html.dark .creator-notice-title,
|
||||
html.dark .creator-section-title {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
html.dark .creator-notice {
|
||||
border-bottom-color: var(--el-border-color-light);
|
||||
}
|
||||
|
||||
html.dark .creator-cover-preview,
|
||||
html.dark .creator-drama-cover,
|
||||
html.dark .creator-episode-cover {
|
||||
border-color: var(--el-border-color-light);
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
@@ -6,5 +6,6 @@
|
||||
@import './operation-log.css';
|
||||
@import './app-user-management.css';
|
||||
@import './console.css';
|
||||
@import './creator-center.css';
|
||||
@import './layout.css';
|
||||
@import './dark.css';
|
||||
Reference in new issue
Block a user