library-picturebook-activity/lesingle-creation-frontend/e2e/utils/mock-h5.html
En 98e9ad1d28 feat(前端): 测试环境登录框支持自动填充测试账号
通过 VITE_AUTO_FILL_TEST 环境变量控制,在 .env.test 中启用,
使测试环境构建后登录框也能自动填充测试账号,方便测试人员使用。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-11 17:03:22 +08:00

100 lines
3.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Mock 乐读派 H5</title>
<style>
body { margin: 0; padding: 20px; font-family: sans-serif; background: #f0f2f5; }
.mock-h5 { max-width: 400px; margin: 0 auto; background: white; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
h2 { color: #6366f1; margin: 0 0 12px; font-size: 18px; }
.status { color: #666; font-size: 13px; margin-bottom: 16px; }
.actions { display: flex; flex-direction: column; gap: 8px; }
button { padding: 10px 16px; border: 1px solid #d9d9d9; border-radius: 6px; cursor: pointer; font-size: 13px; background: white; }
button:hover { border-color: #6366f1; color: #6366f1; }
button.primary { background: #6366f1; color: white; border-color: #6366f1; }
button.primary:hover { background: #4f46e5; }
#log { margin-top: 16px; padding: 12px; background: #f9fafb; border-radius: 6px; font-size: 12px; color: #374151; max-height: 200px; overflow-y: auto; font-family: monospace; }
</style>
</head>
<body>
<div class="mock-h5">
<h2>Mock 乐读派 H5</h2>
<div class="status" id="status">状态:已就绪</div>
<div class="actions">
<button class="primary" onclick="sendWorkCreated()">模拟作品创建</button>
<button onclick="sendWorkCompleted()">模拟作品完成</button>
<button onclick="sendCreationError()">模拟创作失败</button>
<button onclick="sendNavigateBack()">模拟返回</button>
<button onclick="sendTokenExpired()">模拟Token过期</button>
</div>
<div id="log"></div>
</div>
<script>
// ── 工具函数 ──
function log(msg) {
const el = document.getElementById('log')
el.innerHTML += '<div>' + new Date().toLocaleTimeString() + ' ' + msg + '</div>'
el.scrollTop = el.scrollHeight
}
function sendToParent(type, payload = {}) {
const msg = { source: 'leai-creation', version: 1, type, payload }
window.parent.postMessage(msg, '*')
log('发送 → ' + type + ' ' + JSON.stringify(payload))
}
// ── 页面加载后发送 READY ──
window.addEventListener('load', () => {
sendToParent('READY', { userAgent: navigator.userAgent })
document.getElementById('status').textContent = '状态:已就绪'
})
// ── 监听父页面消息 ──
window.addEventListener('message', (event) => {
const msg = event.data
if (!msg || msg.source !== 'leai-creation') return
if (msg.type === 'TOKEN_REFRESHED') {
log('收到 ← TOKEN_REFRESHED: token=' + (msg.payload?.token || '').slice(0, 20) + '...')
document.getElementById('status').textContent = '状态Token已刷新'
}
})
// ── 模拟事件触发 ──
function sendWorkCreated() {
sendToParent('WORK_CREATED', { workId: 'wk_mock_' + Date.now() })
document.getElementById('status').textContent = '状态:作品已创建'
}
function sendWorkCompleted() {
sendToParent('WORK_COMPLETED', { workId: 'wk_mock_' + Date.now() })
document.getElementById('status').textContent = '状态:作品已完成'
}
function sendCreationError() {
sendToParent('CREATION_ERROR', { error: '模拟创作失败' })
document.getElementById('status').textContent = '状态:创作失败'
}
function sendNavigateBack() {
sendToParent('NAVIGATE_BACK', {})
}
function sendTokenExpired() {
sendToParent('TOKEN_EXPIRED', { messageId: 'msg_' + Date.now() })
document.getElementById('status').textContent = '状态等待Token刷新...'
}
// ── 暴露给 Playwright 调用 ──
window.__leaiMock = {
sendWorkCreated,
sendWorkCompleted,
sendCreationError,
sendNavigateBack,
sendTokenExpired,
sendToParent,
}
</script>
</body>
</html>