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:
1 parent
7984520728
commit
e8fcb02be4
5 files changed
+79
-35
No files matched your search
@@ -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`
|
||||
Reference in new issue
Block a user