feat(creator-studio): 图片宽度四档与作者行

- 通过 editor.BlockEdit 过滤器给 core/image 增加「半屏 / 中等 / 通栏 / 全宽」
  四档宽度,选中图片时出现在区块工具条;宽度写入 className 并序列化到
  post_content,前台样式即可生效,无需自定义区块或额外元数据
- 前台样式:半屏靠左 50%,中等 72%,通栏跟随正文行宽,全宽突破行宽但受容器
  内边距约束;移动端半屏与全宽回退为整行,避免横向滚动
- 新增作者行(头像 + 昵称 + 身份说明),数据由 CreatorRest::author_payload()
  从服务端给出,前端不自行拼装;无昵称时整行不渲染,头像缺失时回退首字占位
- 作者行放在摘要之后、正文之前

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Opus 5 committed 2026-11-06 16:05:19 +08:00
1 parent 79909f449e
commit f5e9420266
11 files changed
+680 -39

No files matched your search

@@ -456,6 +456,102 @@ $warn: #b4573f;
}
}
/* ---------- 图片宽度四档 ---------- */
.jio-creator__editor,
.jio-page-submit .entry-content {
.wp-block-image {
margin-left: auto;
margin-right: auto;
img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
}
}
/* 半屏:围绕正文左侧,右侧留给说明文字。 */
.wp-block-image.jio-img-w--half {
width: 50%;
margin-left: 0;
margin-right: auto;
@media (max-width: 767px) {
width: 100%;
margin-left: auto;
}
}
.wp-block-image.jio-img-w--medium {
width: 72%;
}
.wp-block-image.jio-img-w--wide {
width: 100%;
}
/* 全宽:突破正文行宽,但受容器 padding 约束避免横向滚动。 */
.wp-block-image.jio-img-w--full {
width: calc(100% + clamp(24px, 6vw, 64px));
max-width: none;
margin-left: calc(clamp(24px, 6vw, 64px) / -2);
@media (max-width: 767px) {
width: 100%;
margin-left: 0;
}
}
}
/* ---------- 作者行 ---------- */
.jio-creator__author {
display: flex;
align-items: center;
gap: 8px;
margin: 2px 0 20px;
color: #8c9a94;
font-size: 12px;
}
.jio-creator__author-avatar {
width: 24px;
height: 24px;
flex: 0 0 auto;
border-radius: 50%;
object-fit: cover;
}
.jio-creator__author-avatar.is-placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
background: #e3ece7;
color: #4a5f57;
font-size: 11px;
font-weight: 600;
}
.jio-creator__author-name {
color: #4a5f57;
font-weight: 500;
}
.jio-creator__author-meta {
padding: 1px 6px;
border-radius: 4px;
background: #eef5f2;
color: #3c7d6c;
font-size: 11px;
}
.jio-creator__author-hint {
margin-left: auto;
color: #b0bcb7;
}
/* ---------- 常驻插入按钮 ---------- */
.jio-creator__insert {