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:
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); }
|
||||
|
||||
Reference in new issue
Block a user