100 lines
3.8 KiB
HTML
100 lines
3.8 KiB
HTML
|
<!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>
|