xianyu-hunter-hermes-skill/skill/xianyu-hunter-monitor/references/web-qr-login-account-panel-2026-05.md

Web 后台二维码登录与账号状态面板（2026-05）

Trigger

BOSS 反馈 Cookie JSON/外部截图仍不够方便，希望登录流程直接植入 xianyu-hunter Web 后台：点击登录即可获取真实登录二维码，并在后台看到当前账号基础状态。

Implemented pattern

Files in local clone /Users/chick/.Hermes/workspace/research/xianyu-hunter:

• lib/login.mjs
  • Add getLoginQr(emitLog).
  • It opens https://www.goofish.com/ through the persistent Playwright profile, clicks the visible login entry when present, tries QR-login selectors, and returns a data:image/png;base64,... screenshot as qrImage when not logged in.
  • It reuses getLoginStatus(page) so already-logged-in accounts return status and no QR image.
  • getLoginStatus() now also returns account basics: accountName, nickCandidates, avatarUrl.
• server.mjs
  • Import getLoginQr and expose POST /api/login/qr.
• public/index.html
  • In the login modal, add account row (login-account-row) and QR panel (login-qr-panel).
  • Primary action is now 获取登录二维码; 打开闲鱼登录窗口 remains a fallback for captcha/expired QR/manual verification.
• public/app.js
  • Add fetchLoginQr(), renderLoginQr(), clearLoginQr().
  • Extend renderLoginStatus() to show nickname/avatar/cookie count/account state.
• public/style.css
  • Add .login-qr-panel, .login-qr-img, .login-account-row, .login-avatar styles.

Important workflow corrections learned

1. Do not manually fabricate a Taobao login URL and send it to BOSS as “闲鱼二维码”. Goofish may use Taobao/Alibaba unified login under the hood, but the user experience must start from the Goofish Web login entry to avoid confusion.
2. Prefer an in-dashboard QR panel over sending QR screenshots through chat. BOSS explicitly wants the backend page to own login, QR display, and account status.
3. Keep visible Chromium login as fallback only. QR/captcha/verification may still require the desktop browser.
4. Avoid concurrent Playwright profiles. Temporary QR scripts and the main service can conflict on browser-data/SingletonLock; close/kill temporary QR browser processes before running tasks or status probes.
5. If POST /api/login/qr is called when already logged in, return status and no QR image; frontend should clear/hide the QR panel and show account info instead.

Verification recipe

cd /Users/chick/.Hermes/workspace/research/xianyu-hunter
node --check lib/login.mjs
node --check server.mjs
node --check public/app.js

# restart exact listener if needed
for p in $(lsof -tiTCP:3000 -sTCP:LISTEN 2>/dev/null); do kill "$p" 2>/dev/null || true; done
PORT=3000 node server.mjs

API checks:

curl -sS -m 60 http://127.0.0.1:3000/api/login/status | python3 -m json.tool
curl -sS -m 90 -X POST http://127.0.0.1:3000/api/login/qr \
  -H 'Content-Type: application/json' -d '{}' > /tmp/xianyu_qr_api.json
python3 - <<'PY'
import json
j=json.load(open('/tmp/xianyu_qr_api.json'))
print(j.get('ok'), j.get('loggedIn'), j.get('cookieCount'), j.get('accountName'), bool(j.get('qrImage')))
PY
curl -sS -m 10 http://127.0.0.1:3000/ | grep -E '获取登录二维码|扫码登录|login-qr-panel'

Expected logged-in example from the session:

• loggedIn: true
• cookieCount: 27
• accountName: 札幌打滚的风筝鱼
• qrImage: false because QR is unnecessary while logged in.