fix(workshop): AI创作弹窗v5输入框布局对齐WorkBuddy参考(输入区在上/工具栏在下/外框圆角)

* data-pages.js confirmAiScript HTML 重排:paperclip/textarea/send 横向→textarea 上+toolbar 下
  (toolbar 内 paperclip + spacer + send)
* style.css:
  - .req-input-box flex row→column;border-radius 12→14;padding 0(让内部块各自控)
  - .req-input width:100%+box-sizing:border-box;padding 10/14/6
  - 新增 .req-input-toolbar(.req-spacer flex:1 推开两钮)
  - .req-send 34×34→32×32 圆角50%(贴合 WorkBuddy 圆形发送)
  - .req-paper 28×32→32×32(与 send 视觉对齐)
* CDP 9224 验证:结构(列向/圆角/toolbar 位置/按钮分布)全绿+autoGrow 多行自然下移
* 设计:req-create 仍保留在 .req-bar 左侧独立(对应弹窗外功能,不入输入框)
This commit is contained in:
maogeigei committed 2026-09-02 16:36:58 +08:00
1 parent 50bbed30f7
commit 3e0de85795
2 files changed
+20 -9

No files matched your search

@@ -230,9 +230,12 @@ async function confirmAiScript(accountName, btn) {
<div class="req-bar">
<button type="button" class="req-create" id="reqCreate" title="提交创作(生成完整脚本)">${svgIcon('check', 20)}</button>
<div class="req-input-box">
<button type="button" class="req-paper" id="reqPaper" title="上传需求附件(doc / docx / txt / pdf)">${svgIcon('paperclip', 17)}</button>
<textarea id="reqInput" class="req-input" rows="1" placeholder="说说你的想法,例如:想拍一个亲子互动的搞笑短剧…(也可以先上传需求文档)"></textarea>
<button type="button" class="req-send" id="reqSend" title="发送">${svgIcon('arrow-up', 18)}</button>
<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-send" id="reqSend" title="发送">${svgIcon('arrow-up', 18)}</button>
</div>
</div>
</div>
<input type="file" id="attachInput" accept=".doc,.docx,.txt,.pdf" hidden>
@@ -248,22 +248,30 @@ main { height: calc(100vh - 54px); }
display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.req-create:hover { border-color: var(--primary); background: var(--primary-soft); }
/* 输入框:参考 WorkBuddy 风格——输入区在上(带 padding),工具栏在下(回形针 + 弹性间距 + 发送),外框统一圆角描边 */
.req-input-box {
flex: 1; display: flex; align-items: flex-end; gap: 4px;
border: 1px solid var(--border); border-radius: 12px; padding: 5px 5px 5px 2px;
flex: 1; display: flex; flex-direction: column;
border: 1px solid var(--border); border-radius: 14px; padding: 0;
background: #fff; transition: border-color .15s, box-shadow .15s;
}
.req-input-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.req-input {
flex: 1; border: none; outline: none; resize: none; background: transparent;
width: 100%; box-sizing: border-box;
border: none; outline: none; resize: none; background: transparent;
font-size: 14px; font-family: inherit; line-height: 1.5;
min-height: 30px; max-height: 100px; padding: 6px 0 5px;
min-height: 30px; max-height: 100px;
padding: 10px 14px 6px;
}
.req-input::placeholder { color: #a6aebc; }
.req-input-toolbar {
display: flex; align-items: center; gap: 2px;
padding: 2px 4px 6px;
}
.req-spacer { flex: 1; }
.req-send {
flex: none; width: 34px; height: 34px; border-radius: 9px; border: none;
flex: none; width: 32px; height: 32px; border-radius: 50%; border: none;
background: var(--primary); color: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center;
display: inline-flex; align-items: center; justify-content: center;
}
.req-send:hover:not(:disabled) { background: #2a5fd0; }
.req-send:disabled { background: #c7cedb; cursor: default; }
@@ -291,7 +299,7 @@ main { height: calc(100vh - 54px); }
.chip-x:hover { background: rgba(30, 70, 180, .12); }
.req-paper {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 32px; padding: 0; border: none; border-radius: 8px;
width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px;
background: transparent; color: #8a93a3; cursor: pointer;
}
.req-paper:hover:not(:disabled) { color: var(--primary); background: var(--primary-soft); }