AI创作弹窗 v3:需求维度块+一体输入条(图标钮·去取消)

按用户 UI 要求收紧弹窗体验:

HTML(data-pages.js confirmAiScript):
- 弹窗加高 width 720→760 + height:min(840px,92vh) flex column
- 需求区改为 req-field 维度块(rf-title 标题在上,rf-val 内容在下),CSS 2 列 grid
- 输入条一体化:req-bar = [reqCreate ✓图标] [req-input-box 圆角胶囊(内嵌 textarea + 右侧 reqSend ↑图标)]
- 取消按钮整段删除(保留右上 × 关闭);提交创作改用 #reqCreate id + svg check 图标
- 附 ICON_PATHS 加 arrow-up/check 路径

CSS(style.css .req-* 段全重写 L209-272):
- .req-modal flex column gap:10px
- .req-sheet grid 2 列 + .req-field 卡片底(empty 浅色)
- .req-input-box 圆角 12 + focus-within halo + 无边框 textarea + 34x34 primary 蓝圆发送钮
- .req-send busy 状态:disabled 灰 + 14x14 白色旋转 spinner(@keyframes req-spin)
- .req-create 44x44 描边 ✓ 图标钮(hover 浅蓝底)

附带红利:弹窗提交按钮改 id 后,与账号列表 [data-create] 同名选择器歧义自然消失(之前 CDP 冒烟需 .req-modal [data-create] 限定,现改 #reqCreate 直接命中)

冒烟 cdp-req-v3-smoke.mjs 24s 一轮真打磨+提交捕获全绿:fields:10/empty:10/modalH:784/sendIsIcon:true/createIsIcon:true/hasCancel:false + 提交{label:创作指令, skills:[短视频脚本创作], hasPersona:true, reqRows:6, modalClosed:true}
This commit is contained in:
maogeigei committed 2026-09-02 16:11:00 +08:00
1 parent 1390268585
commit 305c8f1a18
5 files changed
+79 -35

No files matched your search

+13
View File
@@ -191,3 +191,16 @@
- **截图产出** `tmp/req-1-empty.png` / `req-2-after-turn1.png` / `req-3-after-turn2.png` + 报告 `tmp/req-dialog-report.json`
- **工作台页面** 按"改完必重开"约定 present_files `?v=20260902-req#/accounts`
- **经验沉淀**:①账号列表/弹窗内同名 `data-create` 触发选择器歧义——统一加 modal 作用域或换名(如 `data-confirm-create`)②CDP Page.navigate 同 URL 不可靠——浏览器/CDP 跨会话残留必须强制 reload + 显式等清空;冒烟脚本应假设首状态脏
## AI创作弹窗 UI v3 升级(16:00-16:12,用户要求)
- **需求原话**:①弹窗高度可以增加 ②需求展示部分 维度作为标题 内容在标题下面的展现形式 ③发送按钮改成图标 和输入框真正合在一个分块中(参考 WorkBuddy 输入框)④提交创作改为图标 放在输入框功能区域左边 ⑤不需要取消按钮(已经有关闭按钮了)
- **实现**(data-pages.js confirmAiScript L219-251 HTML 重组 + style.css L209-272 整段重写 + app.js ICON_PATHS 加 'arrow-up'/'check'):
- 弹窗高度:`.req-modal` width 720→760,**height: min(840px, 92vh)** + display:flex/flex-direction:column,gap:10px;title-row/head/sheet/bar 各自 flex none
- 需求区:`.req-sheet` grid 2 列(gap 8×10px),每块 `.req-field` = `.rf-title` 标题(12px 灰小字加粗)在上 + `.rf-val` 内容(14px)在下;卡片底 #f6f8fb 圆角 10 padding 7 11,empty 时浅 #fafbfd + rf-val 灰 #c6ccd6
- 输入条:`.req-bar` flex row `[#reqCreate] [.req-input-box]`,input-box = 圆角 12 胶囊(border+focus-within 主色描边+halo),内嵌无边框 textarea(透明)+ 右侧 34×34 primary 蓝圆发送钮(svg `arrow-up` ↑);busy 时钮 disabled 灰 + 中心 14×14 白色 spinner(@keyframes req-spin)
- 提交创作:`#reqCreate` 44×44 描边圆角方块,蓝 ✓ 图标(svg `check`),hover 浅蓝底
- 关闭:右上 `data-x` × 保留;**取消按钮整段删除**(HTML data-cancel + 监听器 + .modal-actions 容器)
- **附带红利**:弹窗提交按钮改 id 后,**账号列表 [data-create] 与弹窗内提交同名选择器歧义自然消失**(CDP 冒烟脚本④ selector 同步改 `#reqCreate`,旧 `.req-modal [data-create]` 写法作废)
- **冒烟脚本 `tmp/cdp-req-v3-smoke.mjs`**(CDP 9224 24s 一轮真打磨+提交捕获)全绿:①fields:10/empty:10/title="AI创作 · 旧梦留声机"/hasBar/createIsIcon/sendIsIcon/hasCancel:false/modalH:784/modalW:760 ②首轮 filled 0→6,首块"一句话创意与选题"=「离异母亲带娃整理房间,娃越帮越忙的搞笑反转日常」③提交 label=创作指令/skills=['短视频脚本创作']/hasPersona:true/reqRows:6/modalClosed:true
- **截图** `tmp/reqv3-1-empty.png` / `reqv3-2-after-turn1.png` / `reqv3-3-after-create.png` + 报告 `tmp/req-v3-report.json`
- **工作台重开** `?v=20260902-v3#/accounts`
+1
View File
@@ -18,6 +18,7 @@
- **关键设计**:每轮重发 reqMd + 最近 2 轮 history 做无状态上下文;AI 任何字段都允许更新、严禁生成脚本正文;reqLines 仅取非空字段 + 「未填由 AI 按人设自决」提示
- **冒烟 CDP 坑**(3 轮迭代定稿):①querySelector('[data-create]') 命中背后列表按钮(弹窗内外同名 data-create)→ 必须 `.req-modal [data-create]` 限定;②Page.navigate 同 URL 不真正 reload 致旧弹窗叠加 → `?v=Date.now()` 强制 reload + `waitFor('!document.querySelector(".req-modal")')` 等清场
- **冒烟脚本** `tmp/cdp-req-dialog-smoke.mjs`(4 步端到端 CDP 9224)= 结构/双轮真实 Dify 打磨/需求框递增/提交捕获(拦截 executeTask 验 label+skills+persona+reqRows+modalClosed),端到端 ~50s 全绿
- **v3 UI 升级(09-02,弹窗体验收紧)**:①弹窗高 720→760+height:min(840px,92vh) flex column;②需求区 2 列 grid 维度块(rf-title 标题在 rf-val 内容上方,empty 灰显);③输入条一体化:`.req-input-box` 圆角胶囊内嵌无边框 textarea + 右侧 primary 蓝圆发送钮(svg `arrow-up`),busy 时 disabled 灰+白色旋转 spinner(@keyframes req-spin);④提交创作=44×44 描边圆角 ✓ 图标钮(svg `check`),置于 `.req-bar` 左侧;⑤取消按钮删除(仅留右上 ×);**附带红利**:提交按钮改 id 后与列表 [data-create] 同名歧义自然消失
## 创作技能关键规则(权威源:SKILL.md + references/创作流程规范.md)
1. 三态创作:⚡自动(默认)=静默执行+只落最终交付物;🤝共创=+每确认门询问;🛠️开发=+每步全落盘。7确认门不可合并;角色边界(分析不做创作)