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:
maogeigei committed 2026-09-02 16:14:50 +08:00
1 parent e8fcb02be4
commit 1a8f4456ec
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="说说你的想法,例如:想拍一个亲子互动的搞笑短剧…&#10;(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); }
});