fix(workshop): AI创作弹窗v6 确认按钮移入输入框工具栏 + 间距10px
This commit is contained in:
1 parent
3e0de85795
commit
cd0f876785
4 files changed
+90
-8
No files matched your search
@@ -223,17 +223,17 @@ async function confirmAiScript(accountName, btn) {
|
||||
const mask = document.createElement('div'); mask.className = 'modal-mask';
|
||||
mask.innerHTML = `<div class="modal req-modal">
|
||||
<div class="modal-title-row"><span>AI创作 · ${esc(accountName)}</span><button class="btn btn-icon" data-x title="关闭">${svgIcon('x', 16)}</button></div>
|
||||
<div class="req-head">输入想法,或点回形针上传需求文档(doc / docx / txt / pdf),AI 会把需求整理到上方「创作需求」里;打磨满意后点左侧的 ✓ 提交创作(附件原文会一并作为创作上下文)。Enter 发送,Shift+Enter 换行。</div>
|
||||
<div class="req-head">输入想法,或点回形针上传需求文档(doc / docx / txt / pdf),AI 会把需求整理到上方「创作需求」里;打磨满意后点输入框内的 ✓ 提交创作(附件原文会一并作为创作上下文)。Enter 发送,Shift+Enter 换行。</div>
|
||||
<div class="req-sheet" id="reqSheet"></div>
|
||||
<div class="req-dialog" id="reqDialog"></div>
|
||||
<div class="req-attach-row" id="attachRow"></div>
|
||||
<div class="req-bar">
|
||||
<button type="button" class="req-create" id="reqCreate" title="提交创作(生成完整脚本)">${svgIcon('check', 20)}</button>
|
||||
<div class="req-input-box">
|
||||
<textarea id="reqInput" class="req-input" rows="1" placeholder="说说你的想法,例如:想拍一个亲子互动的搞笑短剧…(也可以先上传需求文档)"></textarea>
|
||||
<div class="req-input-toolbar">
|
||||
<button type="button" class="req-paper" id="reqPaper" title="上传需求附件(doc / docx / txt / pdf)">${svgIcon('paperclip', 17)}</button>
|
||||
<div class="req-spacer"></div>
|
||||
<button type="button" class="req-create" id="reqCreate" title="提交创作(生成完整脚本)">${svgIcon('check', 16)}</button>
|
||||
<button type="button" class="req-send" id="reqSend" title="发送">${svgIcon('arrow-up', 18)}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -240,14 +240,16 @@ main { height: calc(100vh - 54px); }
|
||||
}
|
||||
.req-msg.mine .req-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 3px; }
|
||||
.req-msg.ai .req-bubble { background: #f0f2f5; color: var(--text); border-bottom-left-radius: 3px; }
|
||||
/* 底部功能条:提交创作图标(左)+ 一体输入条(圆角块内嵌 textarea + 右侧发送圆钮) */
|
||||
/* 底部功能条:输入框(圆角块内嵌 textarea + 底部工具栏:回形针 · ✓ 提交创作 · ↑ 发送) */
|
||||
.req-bar { flex: none; display: flex; align-items: flex-end; gap: 10px; }
|
||||
.req-create {
|
||||
flex: none; width: 44px; height: 44px; border-radius: 12px;
|
||||
border: 1px solid var(--border); background: #fff; color: var(--primary);
|
||||
display: flex; align-items: center; justify-content: center; cursor: pointer;
|
||||
/* 工具栏内:与 send 同尺寸同形状,描边白底(弱主操作),hover 时填实主色,与 send 实心形成「次主+主」配对 */
|
||||
flex: none; width: 32px; height: 32px; border-radius: 50%;
|
||||
border: 1px solid var(--primary); background: #fff; color: var(--primary);
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
cursor: pointer; padding: 0; margin-left: 4px; margin-right: 8px; /* ✓ 与 ↑ 发送间隔 = 2px gap + 8px = 10px */
|
||||
}
|
||||
.req-create:hover { border-color: var(--primary); background: var(--primary-soft); }
|
||||
.req-create:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
|
||||
/* 输入框:参考 WorkBuddy 风格——输入区在上(带 padding),工具栏在下(回形针 + 弹性间距 + 发送),外框统一圆角描边 */
|
||||
.req-input-box {
|
||||
flex: 1; display: flex; flex-direction: column;
|
||||
|
||||
Reference in new issue
Block a user