AI创作弹窗 v3 补完:textarea auto-grow + placeholder 单行化 + req-head 换行提示
参考 WorkBuddy 输入框体验补完最后细节:
- textarea auto-grow(data-pages.js confirmAiScript):
- 新增 autoGrow() 闭包:style.height = auto + Math.min(scrollHeight, 100)px
- input 事件绑定 autoGrow,输入多行自动增高(上限 100px = CSS max-height)
- sendTurn 清空 + 错误恢复 input 后调 autoGrow 复位
- 验证 cdp-autogrow-check.mjs:before 32→after 100(5 行 116px cap 到 100px),清空回 32 ✅
- placeholder 单行化(去掉"(Enter 发送,Shift+Enter 换行)"——rows=1 只显示一行,第二行被截断)
- req-head 末尾补"Enter 直接发送,Shift+Enter 换行"提示,键盘说明从 placeholder 迁到头部更显眼
git status 仅 2 文件(+25/-5),按 2 小时节奏暂不 push。
This commit is contained in:
1 parent
305c8f1a18
commit
4f79c9515e
1 file changed
+10
-2
@@ -219,13 +219,13 @@ 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">在下方输入想法,AI 会边聊边把需求整理到上方「创作需求」里;打磨满意后,点输入框左侧的 ✓ 提交创作。</div>
|
||||
<div class="req-head">在下方输入想法,AI 会边聊边把需求整理到上方「创作需求」里;打磨满意后点输入框左侧的 ✓ 提交创作。Enter 直接发送,Shift+Enter 换行。</div>
|
||||
<div class="req-sheet" id="reqSheet"></div>
|
||||
<div class="req-dialog" id="reqDialog"></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="说说你的想法,例如:想拍一个亲子互动的搞笑短剧… (Enter 发送,Shift+Enter 换行)"></textarea>
|
||||
<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>
|
||||
</div>
|
||||
@@ -265,6 +265,7 @@ async function confirmAiScript(accountName, btn) {
|
||||
if (!text || busy) return;
|
||||
convo.push({ role: 'u', text });
|
||||
q('#reqInput').value = '';
|
||||
autoGrow();
|
||||
renderDialog();
|
||||
setBusy(true);
|
||||
try {
|
||||
@@ -299,6 +300,7 @@ async function confirmAiScript(accountName, btn) {
|
||||
} catch (e) {
|
||||
convo.pop(); // 移除失败的用户消息,恢复输入
|
||||
q('#reqInput').value = text;
|
||||
autoGrow();
|
||||
renderDialog();
|
||||
showToast('❌ 打磨失败: ' + e.message);
|
||||
}
|
||||
@@ -306,6 +308,12 @@ async function confirmAiScript(accountName, btn) {
|
||||
};
|
||||
/* —— 事件 —— */
|
||||
const inputEl = q('#reqInput');
|
||||
/* 输入自动增高:textarea scrollHeight 动态写入 style.height,上限 100px(与 CSS max-height 一致) */
|
||||
const autoGrow = () => {
|
||||
inputEl.style.height = 'auto';
|
||||
inputEl.style.height = Math.min(inputEl.scrollHeight, 100) + 'px';
|
||||
};
|
||||
inputEl.addEventListener('input', autoGrow);
|
||||
inputEl.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendTurn(inputEl.value); }
|
||||
});
|
||||
|
||||
Reference in new issue
Block a user