feat(creator-studio): 公众号式插入面板与封面条
- 新增常驻「添加内容」按钮与插入面板：分组网格列出正文/标题/列表/引用、 图片/视频/嵌入、代码/分隔线/表格/付费内容；条目不满足能力时不出现在面板里 - 面板支持方向键在网格内移动焦点、Esc 关闭；桌面居中浮层，移动端贴底抽屉并 留出安全区 - 空文档插入区块时替换初始空白段落，不留空行 - 新增封面条：无封面时给低调入口，有封面时显示 2.35:1 缩略图，悬停出现 「更换封面」，右上角可移除 - 补充契约测试：头部/页脚/挂件区开关、插入面板真实区块名与能力过滤、 中文字数口径 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Opus 5 committed
1 parent
d07cffe99e
commit
79909f449e
10 files changed
+678
-7
No files matched your search
@@ -364,6 +364,255 @@ $warn: #b4573f;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ---------- 封面预览条 ---------- */
|
||||
|
||||
.jio-creator__cover {
|
||||
position: relative;
|
||||
margin-bottom: 18px;
|
||||
|
||||
&.is-empty {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px dashed #d3ded8;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #8c9a94;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.16s ease, color 0.16s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
border-color: var(--jc-accent);
|
||||
color: var(--jc-accent-strong);
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jio-creator__cover-thumb {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: #eef3f0;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 2.35 / 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--jc-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.jio-creator__cover-edit {
|
||||
position: absolute;
|
||||
inset: auto 0 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
background: linear-gradient(to top, rgba(15, 25, 22, 0.62), rgba(15, 25, 22, 0));
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.16s ease;
|
||||
}
|
||||
|
||||
.jio-creator__cover-thumb:hover .jio-creator__cover-edit,
|
||||
.jio-creator__cover-thumb:focus-visible .jio-creator__cover-edit {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.jio-creator__cover-clear {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(15, 25, 22, 0.55);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background: rgba(15, 25, 22, 0.78);
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 常驻插入按钮 ---------- */
|
||||
|
||||
.jio-creator__insert {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 46px;
|
||||
margin: 8px 0 26px;
|
||||
border: 1px dashed #d3ded8;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
color: #7c8c86;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
border-color: var(--jc-accent);
|
||||
background: #f1f7f4;
|
||||
color: var(--jc-accent-strong);
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 插入面板 ---------- */
|
||||
|
||||
.jio-insert {
|
||||
position: fixed;
|
||||
z-index: 520;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.jio-insert__backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 0;
|
||||
background: rgba(23, 34, 31, 0.34);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.jio-insert__panel {
|
||||
position: relative;
|
||||
width: min(560px, 100%);
|
||||
max-height: min(78vh, 640px);
|
||||
overflow: hidden auto;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 24px 70px rgba(20, 32, 28, 0.22);
|
||||
}
|
||||
|
||||
.jio-insert__head {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18px 22px 12px;
|
||||
border-bottom: 1px solid $line;
|
||||
background: #fff;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.jio-insert__close {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
color: $ink-soft;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background: #eef3f0;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.jio-insert__body {
|
||||
padding: 16px 22px 24px;
|
||||
}
|
||||
|
||||
.jio-insert__group {
|
||||
margin-bottom: 20px;
|
||||
|
||||
h3 {
|
||||
margin: 0 0 12px;
|
||||
color: #9aa8a2;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
}
|
||||
|
||||
.jio-insert__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.jio-insert-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px 4px 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10px;
|
||||
background: #f7f9f8;
|
||||
color: $ink;
|
||||
cursor: pointer;
|
||||
transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
border-color: var(--jc-accent);
|
||||
background: #eef5f2;
|
||||
color: var(--jc-accent-strong);
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.jio-insert-item__icon {
|
||||
display: flex;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.jio-insert-item__label {
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---------- 发布抽屉 ---------- */
|
||||
|
||||
.jio-creator-drawer {
|
||||
@@ -852,6 +1101,27 @@ $warn: #b4573f;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 插入面板改为贴底抽屉，贴合手机拇指操作区。 */
|
||||
.jio-insert {
|
||||
align-items: flex-end;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.jio-insert__panel {
|
||||
width: 100%;
|
||||
max-height: 76dvh;
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.jio-insert__grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.jio-creator__insert {
|
||||
margin-bottom: calc(26px + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
Reference in new issue
Block a user