WorkBuddy 1024 造物挑战投稿助手

把「一个可体验的网页应用/小程序」投进 WorkBuddy「1024 造物挑战」活动页的完整流程指引。

活动页形态是 顶层壳 + 跨域 iframe 内容页，表单在 iframe 里。用 Playwright 驱动——它原生支持跨域 frame 操作，表单的每个字段都能直接定位，截图上传一行搞定。

何时使用

• 用户说「帮我的项目投稿 / 参加造物挑战 / 投到 1024 活动」
• 用户给了一个造物挑战活动链接（形如 <主站地址>/p/<活动 id>）并要求提交作品
• 需要给已有项目准备投稿材料（文案、截图、体验链接）并完成提交

前置条件

运行时地址解析（先做这一步）

本文所有 <...> 形式的地址都是占位符，必须在运行时从用户提供的活动链接解析出来，不要写死：

// 运行时解析示例
const ACTIVITY_URL = '把用户给的活动链接填这里';
const u = new URL(ACTIVITY_URL);
const ACTIVITY_ID = u.pathname.split('/p/')[1];
const MAIN_HOST = u.origin;   // 登录页基址

⚠️ 若 内容域特征串 不知道，先探测：打印 page.frames().map(f => f.url())，
挑出那个与顶层 u.origin 不同、且路径里含活动 id 的 frame URL，取其主机名片段。

核心结构

const { chromium } = require('playwright');

const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({ storageState: 'state.json' });
const page = await context.newPage();
await page.goto(ACTIVITY_URL);   // 运行时由用户给的活动链接解析得到

// 内容在跨域 iframe 里
const form = page.frames().find(f => f.url().includes('内容域特征串'));

// 表单在 iframe 内才出现，先点开
await form.getByText('✏️ 发布作品').click();
await form.waitForTimeout(1500);

关键点：page.frames() 能拿到跨域 iframe 的 Frame 对象，之后所有定位/操作都直接对它做，
不需要任何底层协议操作。

执行流程

第 0 步：评估项目是否够格

活动要求：仅支持可体验的网页应用 / 小程序。评审权重：完成度 40% + 创意 35% + 体验 25%。

先实测作品线上功能（真的打开、点一遍），确认核心链路通。再准备材料。有已知缺陷要在投稿前告知用户，由用户决定是否带病投稿。

第 1 步：准备投稿材料

产物目录建议 1024投稿/：

• 投稿材料.md — 字段预填稿：作品宣言（≤50 字）、应用名称、作者昵称、作品形态、作品介绍、体验链接、UserID、手机号、截图清单、技术栈、已知风险
• new_shot1/2/3.png — 线上实拍截图

作品宣言写法：动词开头讲清「谁 + 做什么 + 得到什么」。例：
> 拍下身边叫不出名字的花鸟虫草，AI 帮你识别物种，再把它钉进一张大家共同建设的自然观察地图。

> ⚠️ 手机号、UserID 等个人信息只在运行时现填，不要写进技能文件或公开产物。

第 2 步：登录（最难的一步）

活动页右上角「发布作品」触发登录，弹层是 主站登录服务 的 Keycloak 登录框。

三条登录路径，按可靠性排序：

二维码过期问题：微信二维码 2 分钟必过期。解法是让页面 reload 拿新码，再截图给用户扫。

身份选择（致命坑位）：扫码后进入「选择账号」页。若只看到企业身份（如「WorkBuddy教育公益版」且标记「未认证」），点它会报 21565 登录异常。正解是：点「切换登录用户」→ 重新扫码 → 这次账号列表会列出个人版 → 选个人版。

⚠️ 绝对不要点「拒绝」（会注销本次组织授权，导致企业身份降级为「未认证」）。

会话 401 坑位：主站地址 的会话不是自己带的，必须由 主站登录服务 登录后的重定向链建立。直接开 <主站地址>/p/<活动 id> 会 401 not login。

导出登录态复用（最省事，登录一次就够）：

// 在已登录的浏览器里导出 cookies + localStorage
await context.storageState({ path: 'state.json' });

之后 newContext({ storageState: 'state.json' }) 直接带上登录态。

完整步骤见 references/login-flow.md。

第 3 步：打开并填写表单

const form = page.frames().find(f => f.url().includes('内容域特征串'));
await form.getByText('✏️ 发布作品').click();
await form.waitForTimeout(1500);

表单字段 id 固定为：

填法（Playwright 会正确触发 React 的事件链）：

await form.locator('#fDeclaration').fill('作品宣言，50 字以内');
await form.locator('#fName').fill('应用名称');
await form.locator('#fAuthor').fill('作者昵称');
await form.locator('#fRaw').fill('作品介绍正文，讲清谁会用、怎么体验、得到什么');
await form.locator('#fUrl').fill('https://example.com');

// 作品形态单选
await form.locator('button.rdo[data-v="网页应用"]').click();

// 参赛授权
await form.locator('#fOk').check();

UserID 坑位：填 uin 会报「与当前登录账号不一致」。唯一正确值来自页面自身接口：

const uid = await form.evaluate(() =>
  window.__SMART_PAGE__.database.getUserInfo().then(r => r.userInfo.id));
await form.locator('#fUid').fill(uid);

填完回读核对：

console.log(await form.locator('#fName').inputValue());
console.log(await form.locator('#fOk').isChecked());

字段结构探测见 templates/probe-form.md。

第 4 步：上传截图（最大的坑）

fFile 是 display:none 的隐藏 input，且由 React 管理。用 CDP DOM.setFileInputFiles 塞文件会静默失败——接口返回成功但页面的 files.length 仍是 0（onchange 处理器最后有 this.value = ""，所以这个指标永远不可信）。

正解：Playwright 的 setInputFiles，它会正确派发 change 事件，React 能收到：

await form.locator('#fFile').setInputFiles([
  'new_shot1.png',
  'new_shot2.png',
  'new_shot3.png'
]);
await form.waitForTimeout(2000);

// 校验（不要看 fFile.files.length，看这两个）
console.log(await form.evaluate(() => fShots.length));          // 应该是图片数量
console.log(await form.locator('#shotw img').count());            // 预览图数量

实测三张图上传后 fShots = 3、预览图 = 3。

注意：页面的 readShotFile 是异步压缩，校验前要等一下（waitForTimeout(2000)）。

截图要求：评审看的是完成度。至少覆盖 ①核心功能主界面 ②数据/内容展示 ③特色功能。宽度 1280 左右。

第 5 步：提交与核验

await form.locator('#fSub').click();

三层核验，缺一不可：

1. 页面提示：出现「提交成功，等待审核」+ 提交编号（形如 S1024-xxxxxx-xx-xx）
2. 「我的投稿」面板：显示「⏳ 待上架 · <作品名>」
3. 后端数据表（最硬）：按 UserID 精确查

// ⚠️ filters / offset / pageSize 参数都无效，filter 语法是这一套：
const rows = await form.evaluate((uid) =>
  window.__SMART_PAGE__.database.query({
    databaseId: '<投稿收集池表 ID>',   // 投稿收集池表 ID
    pageSize: 20,
    filter: { property: { property: 'UserID', text: { equals: uid } } },
    sorts: [{ property: '提交时间', direction: 'descending' }]
  }), uid);

查到记录后核对：提交编号 / 应用名称 / 作者 / 作品形态 / 体验链接 / 作品截图（CDN 链接）/ 审核状态 / 提交时间。

操作细节见 templates/submit-and-verify.md 与 references/verify-and-submit.md。

第 6 步：收尾

• 停止二维码刷新（避免打断回调）
• 保存证据截图：投稿表单_提交前.png、我的投稿_核验.png
• 把踩坑经验写进项目记忆

交付物

坑位速查表

模板索引

参考

• references/login-flow.md — 登录/身份选择/二维码轮换的详细步骤与实测记录
• references/form-and-upload.md — 表单字段与截图上传的完整代码
• references/verify-and-submit.md — 提交逻辑与三层核验的接口细节