southernspark-nfxh 店小秘PC端描述模块
环境
CDP browser_cdp 直连。CKEditor 在 iframe 内或页面内，需先定位。
切换位置
描述信息 tab → PC端描述（CKEditor 富文本编辑器）
子步骤
8.5a. 引用模板 → 选模板 → 选择
8.5b. 批量改图片尺寸（7步铁序）
8.5c. 图片翻译（中文→英文）
Step 8.5a：引用模板
CDP 操作
1. 切换到描述信息 tab
Runtime.evaluate:
const items = document.querySelectorAll('.anchor-menu-item');
items.forEach(i => { if (i.textContent.trim() === '描述信息') i.click(); });
2. 等 2 秒 CKEditor 加载
3. 点 CKEditor 工具栏「引用模板」
Runtime.evaluate:
// 找按钮（可能需要精确选择器）
const btns = document.querySelectorAll('.cke_button__templates, [title*="模板"], [title*="Template"]');
btns[0].dispatchEvent(new MouseEvent('mousedown', {bubbles: true}));
btns[0].dispatchEvent(new MouseEvent('mouseup', {bubbles: true}));
btns[0].dispatchEvent(new MouseEvent('click', {bubbles: true}));
4. 等弹窗 → 选模板 → 点「选择」
Step 8.5b：批量改图片尺寸（✅ 2026-07-19 验证）
🔴 images-options 栏默认隐藏——必须 JS 强制显示
.images-options 由 Vue 3 控制显示/隐藏，正常情况永远不出现。唯一有效方式：JS 强制设置 CSS 属性。
await page.evaluate('''() => {
const io = document.querySelector('.images-options');
if (!io) return;
// 显示整条父链
let el = io;
while (el && el !== document.body) {
el.style.setProperty('display', 'block', 'important');
el.style.setProperty('visibility', 'visible', 'important');
el.style.setProperty('opacity', '1', 'important');
el = el.parentElement;
}
// 固定到视口可见位置
io.style.setProperty('position', 'fixed', 'important');
io.style.setProperty('top', '450px', 'important');
io.style.setProperty('left', '800px', 'important');
io.style.setProperty('z-index', '99999', 'important');
}''')
操作流程（4步）
1. 强制显示 images-options → 固定到 (800, 450)
2. page.mouse.click → 打开「批量编辑图片」下拉
3. 选「批量改图片尺寸」
4. 弹窗中：填 valueW=800 → 点「生成JPG图片」
如点不动，用 JS element.click() 兜底
🔴 两个「批量编辑图片」陷阱
- CKEditor 原生 combo（
.cke_combo__batcheditimgdropdownlist）→ 空面板 ❌ - images-options 区的 ant-dropdown-trigger → 正确入口 ✅
Step 8.5c：图片翻译（✅ 2026-07-19 验证）
相同入口：images-options → 批量编辑图片 → 图片翻译
弹窗内操作（🔑 关键：一键翻译按钮要点两次）
# 1. 选全部
sel = 弹窗内 label.ant-checkbox-wrapper[textContent='选择全部']
page.mouse.click(sel_x, sel_y)
# 2. 第1次点一键翻译 span → 打开语言下拉 → 选「中文 → 英文」
page.mouse.click(span_x, span_y) # 打开下拉
cn_en = 找可见的 '中文 → 英文' 菜单项
page.mouse.click(cn_en_x, cn_en_y) # 选语言（不提交）
# 3. 第2次点一键翻译 span → 提交翻译！
page.mouse.click(span_x, span_y) # 提交
提交后出现双弹窗：原弹窗 + 进度弹窗「已翻译成功N张图片」。
翻译完成后再出现确认弹窗 → JS element.click() 点「确认」关闭。
⚠️ 已知坑点
- images-options 默认隐藏（Vue 3 控制） — 必须 JS 强制
style.setProperty('display','block','important')整条父链 + 固定定位到视口内。不要浪费时间找「展开图片栏」按钮。 - 两个同名「批量编辑图片」 — cke_combo（空面板）vs images-options（真菜单），只用后者。
- 🔑 一键翻译要点两次 — 第1次选语言，第2次提交。不要用 Enter 键！不要点完语言就等！
- 生成JPG/PNG 按钮被 ant-modal-wrap 拦截 — mouse.click 后弹窗不关，用 JS
element.click()兜底即可。 - 「一键翻译」≠「快速翻译」 — 快速翻译是 checkbox 开关，一键翻译是提交按钮。
- PC描述图在 iframe 中 — 无法通过主页面 DOM 查询图片，但 images-options 操作在主页面进行，不受影响。
- 翻译完成后需 JS click 确认 — 确认弹窗的「确认」按钮也不能用 mouse.click，用 JS
element.click()。 - CDP Input.dispatchMouseEvent 不可用 — 统一用 Playwright
page.mouse.click()。
作者: 南方星火 SouthernSpark | 小红书 @南方星火 SouthernSpark | AI自动化专家工作流