feat: add mobile interaction prototype
This commit is contained in:
QiuSW
@@ -0,0 +1,26 @@
|
||||
# Brainwave 移动端原型
|
||||
|
||||
这是一个无构建步骤、无外部依赖的高保真 HTML/CSS/JavaScript 原型。它用于在 Android 开发前确认流程与视觉，不是生产实现。
|
||||
|
||||
从仓库根目录启动：
|
||||
|
||||
```powershell
|
||||
python -m http.server 4173 --bind 127.0.0.1
|
||||
```
|
||||
|
||||
打开 `http://127.0.0.1:4173/prototype/`。完整状态入口、领域边界、评审清单和 Android 映射见 [`docs/prototype.md`](../docs/prototype.md)。
|
||||
|
||||
服务保持运行时，可用当前系统的 Chrome/Edge 重新生成八张截图并执行浏览器审计：
|
||||
|
||||
```powershell
|
||||
node prototype\capture.mjs
|
||||
```
|
||||
|
||||
脚本使用 Node 22 自带的 WebSocket 直接连接 Chrome DevTools，不安装 npm 包；它会核对两个已知卦象、AI 同意门、控制台/外部请求、按钮名称和 48px 最小触控目标。任一门禁失败时退出码为非零。
|
||||
|
||||
约束：
|
||||
|
||||
- 不发起外部请求，不调用 AI；
|
||||
- 不生成随机卦，用户逐枚录入硬币；
|
||||
- 查询参数只用于稳定预览和截图；
|
||||
- 工作名“一问”与当前文字内容均为评审候选，不代表正式命名或内容授权完成。
|
||||
Vendored
+733
@@ -0,0 +1,733 @@
|
||||
(() => {
|
||||
"use strict";
|
||||
|
||||
const SAMPLE_QUESTION = "我是否要接受这次工作调整？怎样做能更稳妥？";
|
||||
const SAMPLE_LINES = [9, 8, 8, 8, 8, 8];
|
||||
|
||||
const HEXAGRAM_NAMES = [
|
||||
"", "乾", "坤", "屯", "蒙", "需", "讼", "师", "比", "小畜", "履", "泰", "否",
|
||||
"同人", "大有", "谦", "豫", "随", "蛊", "临", "观", "噬嗑", "贲", "剥", "复",
|
||||
"无妄", "大畜", "颐", "大过", "坎", "离", "咸", "恒", "遁", "大壮", "晋",
|
||||
"明夷", "家人", "睽", "蹇", "解", "损", "益", "夬", "姤", "萃", "升", "困",
|
||||
"井", "革", "鼎", "震", "艮", "渐", "归妹", "丰", "旅", "巽", "兑", "涣",
|
||||
"节", "中孚", "小过", "既济", "未济"
|
||||
];
|
||||
|
||||
// 行为下卦、列为上卦；三位编码均按自下而上排列，1 为阳、0 为阴。
|
||||
const KING_WEN = {
|
||||
"111": { "111": 1, "100": 34, "010": 5, "001": 26, "000": 11, "011": 9, "101": 14, "110": 43 },
|
||||
"100": { "111": 25, "100": 51, "010": 3, "001": 27, "000": 24, "011": 42, "101": 21, "110": 17 },
|
||||
"010": { "111": 6, "100": 40, "010": 29, "001": 4, "000": 7, "011": 59, "101": 64, "110": 47 },
|
||||
"001": { "111": 33, "100": 62, "010": 39, "001": 52, "000": 15, "011": 53, "101": 56, "110": 31 },
|
||||
"000": { "111": 12, "100": 16, "010": 8, "001": 23, "000": 2, "011": 20, "101": 35, "110": 45 },
|
||||
"011": { "111": 44, "100": 32, "010": 48, "001": 18, "000": 46, "011": 57, "101": 50, "110": 28 },
|
||||
"101": { "111": 13, "100": 55, "010": 63, "001": 22, "000": 36, "011": 37, "101": 30, "110": 49 },
|
||||
"110": { "111": 10, "100": 54, "010": 60, "001": 41, "000": 19, "011": 61, "101": 38, "110": 58 }
|
||||
};
|
||||
|
||||
const icons = {
|
||||
lock: '<svg aria-hidden="true" viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8.5 10V7.5a3.5 3.5 0 017 0V10"/></svg>',
|
||||
arrow: '<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M5 12h14M14 7l5 5-5 5"/></svg>',
|
||||
chevron: '<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>',
|
||||
shield: '<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 3l7 3v5c0 4.7-2.8 8-7 10-4.2-2-7-5.3-7-10V6l7-3z"/><path d="M9.2 12l1.8 1.8 3.9-4"/></svg>'
|
||||
};
|
||||
|
||||
const screen = document.querySelector("#screen");
|
||||
const modalRoot = document.querySelector("#modal-root");
|
||||
const toastRegion = document.querySelector("#toast-region");
|
||||
const backButton = document.querySelector("[data-action='back']");
|
||||
|
||||
const state = {
|
||||
screen: "welcome",
|
||||
question: "",
|
||||
lines: [],
|
||||
coins: [null, null, null],
|
||||
modal: null,
|
||||
consent: false,
|
||||
explanationSource: "ai",
|
||||
aiError: false
|
||||
};
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value)
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
|
||||
function lineIsYang(value) {
|
||||
return value === 7 || value === 9;
|
||||
}
|
||||
|
||||
function lineIsMoving(value) {
|
||||
return value === 6 || value === 9;
|
||||
}
|
||||
|
||||
function transformLines(lines) {
|
||||
return lines.map((value) => {
|
||||
if (value === 6) return 7;
|
||||
if (value === 9) return 8;
|
||||
return value;
|
||||
});
|
||||
}
|
||||
|
||||
function lookupHexagram(lines) {
|
||||
const bits = lines.map((value) => lineIsYang(value) ? "1" : "0");
|
||||
const lower = bits.slice(0, 3).join("");
|
||||
const upper = bits.slice(3, 6).join("");
|
||||
const number = KING_WEN[lower][upper];
|
||||
return { number, name: HEXAGRAM_NAMES[number] };
|
||||
}
|
||||
|
||||
function lineName(value, index) {
|
||||
const position = ["初", "二", "三", "四", "五", "上"][index];
|
||||
const polarity = lineIsYang(value) ? "九" : "六";
|
||||
if (index === 0) return `${position}${polarity}`;
|
||||
if (index === 5) return `${position}${polarity}`;
|
||||
return `${polarity}${position}`;
|
||||
}
|
||||
|
||||
function resultData() {
|
||||
const sourceLines = state.lines.length === 6 ? state.lines : SAMPLE_LINES;
|
||||
const changedLines = transformLines(sourceLines);
|
||||
return {
|
||||
sourceLines,
|
||||
changedLines,
|
||||
primary: lookupHexagram(sourceLines),
|
||||
changed: lookupHexagram(changedLines),
|
||||
movingIndexes: sourceLines
|
||||
.map((value, index) => lineIsMoving(value) ? index : -1)
|
||||
.filter((index) => index >= 0)
|
||||
};
|
||||
}
|
||||
|
||||
function stepper(current, total) {
|
||||
const progress = Math.round((current / total) * 100);
|
||||
return `
|
||||
<div class="stepper" aria-label="第 ${current} 步，共 ${total} 步">
|
||||
<span>${String(current).padStart(2, "0")}</span>
|
||||
<span class="stepper__track" style="--progress:${progress}%"></span>
|
||||
<span>${String(total).padStart(2, "0")}</span>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function welcomeView() {
|
||||
return `
|
||||
<section class="page page--welcome" aria-labelledby="welcome-title">
|
||||
<div>
|
||||
<p class="eyebrow">慢一点，看清当下</p>
|
||||
<h1 id="welcome-title">把一个犹豫，安静地放在这里。</h1>
|
||||
<p class="lede">用你手中的三枚硬币，依次记录六次结果。这里提供文化文本与反思线索，不替你预测，也不替你决定。</p>
|
||||
|
||||
<div class="hero-mark" aria-hidden="true">
|
||||
<span class="hero-mark__dot">观</span>
|
||||
</div>
|
||||
|
||||
<ul class="principles" aria-label="产品原则">
|
||||
<li>手动记录</li>
|
||||
<li>本地成卦</li>
|
||||
<li>选择解读</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bottom-action">
|
||||
<button class="button button--primary" type="button" data-action="begin">
|
||||
写下此刻所问 ${icons.arrow}
|
||||
</button>
|
||||
<p class="fine-print" style="margin:0;text-align:center">工作名“一问”仅用于本轮视觉评审</p>
|
||||
</div>
|
||||
</section>`;
|
||||
}
|
||||
|
||||
function questionView() {
|
||||
return `
|
||||
<section class="page" aria-labelledby="question-title">
|
||||
${stepper(1, 2)}
|
||||
<p class="eyebrow">起念</p>
|
||||
<h1 id="question-title">你想看清什么？</h1>
|
||||
<p class="lede">写成一个开放的问题，比只问“会不会”更容易照见可行动的部分。</p>
|
||||
|
||||
<label class="field-label" for="question-input">此刻的问题</label>
|
||||
<textarea
|
||||
id="question-input"
|
||||
class="question-input"
|
||||
maxlength="120"
|
||||
placeholder="例如：面对这次工作调整，我怎样做能更稳妥？"
|
||||
data-question-input
|
||||
>${escapeHtml(state.question)}</textarea>
|
||||
<div class="field-meta">
|
||||
<span>只保存在本次原型会话中</span>
|
||||
<span data-char-count>${state.question.length}/120</span>
|
||||
</div>
|
||||
|
||||
<div class="privacy-note">
|
||||
${icons.lock}
|
||||
<p>起卦计算在本地完成。只有你主动选择 AI 解读并再次确认后，所需内容才会被发送。</p>
|
||||
</div>
|
||||
|
||||
<button class="text-link" type="button" data-action="skip-question">不写具体内容，直接开始</button>
|
||||
|
||||
<div class="bottom-action">
|
||||
<button class="button button--primary" type="button" data-action="start-casting" ${state.question.trim() ? "" : "disabled"}>
|
||||
开始记录六爻 ${icons.arrow}
|
||||
</button>
|
||||
</div>
|
||||
</section>`;
|
||||
}
|
||||
|
||||
function lineStack(lines) {
|
||||
return [5, 4, 3, 2, 1, 0].map((index) => {
|
||||
const value = lines[index];
|
||||
if (!value) {
|
||||
return '<div class="line-slot line-slot--empty" aria-label="尚未记录"></div>';
|
||||
}
|
||||
const kind = lineIsYang(value) ? "yang" : "yin";
|
||||
const moving = lineIsMoving(value) ? " line-slot--moving" : "";
|
||||
return `<div class="line-slot line-slot--${kind}${moving}" aria-label="${lineName(value, index)}，数值 ${value}${lineIsMoving(value) ? "，动爻" : ""}">
|
||||
${lineIsMoving(value) ? `<span class="line-slot__number">${value}</span>` : ""}
|
||||
</div>`;
|
||||
}).join("");
|
||||
}
|
||||
|
||||
function coinButton(value, index) {
|
||||
const face = value === 2 ? "字" : value === 3 ? "背" : "点选";
|
||||
const score = value ? String(value) : "字 ↔ 背";
|
||||
const valueAttr = value ? `data-value="${value}"` : "";
|
||||
const next = value === null ? "字，2 分" : value === 2 ? "背，3 分" : "字，2 分";
|
||||
return `
|
||||
<div class="coin-wrap">
|
||||
<button
|
||||
class="coin"
|
||||
type="button"
|
||||
data-action="toggle-coin"
|
||||
data-index="${index}"
|
||||
${valueAttr}
|
||||
aria-label="第 ${index + 1} 枚硬币，当前${value ? `${face}，${score} 分` : "未记录"}；点击切换为${next}"
|
||||
>
|
||||
<span class="coin__value">
|
||||
<span class="coin__face">${face}</span>
|
||||
<span class="coin__score">${score}</span>
|
||||
</span>
|
||||
</button>
|
||||
<span>硬币 ${index + 1}</span>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function castingView() {
|
||||
const round = state.lines.length + 1;
|
||||
const selected = state.coins.every((value) => value !== null);
|
||||
const sum = selected ? state.coins.reduce((total, value) => total + value, 0) : null;
|
||||
const currentType = sum
|
||||
? ({ 6: "老阴 · 动", 7: "少阳", 8: "少阴", 9: "老阳 · 动" })[sum]
|
||||
: "";
|
||||
|
||||
return `
|
||||
<section class="page page--compact" aria-labelledby="casting-title">
|
||||
${stepper(2, 2)}
|
||||
<div class="question-chip" title="${escapeHtml(state.question)}">${escapeHtml(state.question)}</div>
|
||||
|
||||
<div class="casting-layout">
|
||||
<div class="line-progress-card">
|
||||
<div class="line-progress-copy">
|
||||
<strong>${state.lines.length} / 6</strong>
|
||||
<p>从下往上记录</p>
|
||||
${state.lines.length ? '<button class="text-link" type="button" data-action="undo-line">撤销上一爻</button>' : ""}
|
||||
</div>
|
||||
<div class="line-stack" aria-label="已记录的六爻">${lineStack(state.lines)}</div>
|
||||
</div>
|
||||
|
||||
<div class="coin-prompt">
|
||||
<h2 id="casting-title">第 ${round} 爻</h2>
|
||||
<p>依照手中硬币，逐枚点选“字”或“背”</p>
|
||||
</div>
|
||||
|
||||
<div class="coins" aria-label="三枚硬币录入">
|
||||
${state.coins.map(coinButton).join("")}
|
||||
</div>
|
||||
|
||||
<div class="round-sum" aria-live="polite">
|
||||
${sum ? `本次合计 <strong>${sum}</strong> · ${currentType}` : "点按硬币可在“字 2”与“背 3”间切换"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-action">
|
||||
<button class="button button--primary" type="button" data-action="confirm-line" ${selected ? "" : "disabled"}>
|
||||
${round === 6 ? "记录并查看结果" : `确认第 ${round} 爻`} ${icons.arrow}
|
||||
</button>
|
||||
</div>
|
||||
</section>`;
|
||||
}
|
||||
|
||||
function hexLine(value, index, showMoving) {
|
||||
const kind = lineIsYang(value) ? "yang" : "yin";
|
||||
const moving = showMoving && lineIsMoving(value) ? " hex-line--moving" : "";
|
||||
return `<div class="hex-line hex-line--${kind}${moving}" aria-label="${lineName(value, index)}${moving ? "，动爻" : ""}"><span></span><span></span></div>`;
|
||||
}
|
||||
|
||||
function hexagramFigure(lines, hexagram, showMoving) {
|
||||
const rendered = [5, 4, 3, 2, 1, 0]
|
||||
.map((index) => hexLine(lines[index], index, showMoving))
|
||||
.join("");
|
||||
return `
|
||||
<div class="hexagram-view">
|
||||
<div class="hexagram-lines" role="img" aria-label="第 ${hexagram.number} 卦，${hexagram.name}卦">${rendered}</div>
|
||||
<div class="hexagram-name">${hexagram.name}</div>
|
||||
<div class="hexagram-number">第 ${hexagram.number} 卦</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function resultCopy(data) {
|
||||
if (data.primary.number === 24) {
|
||||
return {
|
||||
classic: "复：亨。出入无疾，朋来无咎。反复其道，七日来复。利有攸往。",
|
||||
plain: "“复”提醒人把注意力放回可返回、可重新开始之处。它不是替你判断成败，而是邀请你看见：此刻是否有一条更朴素、更合乎本心的路。",
|
||||
moving: "初九：不远复，无祇悔，元吉。",
|
||||
movingPlain: "偏离尚不远时就察觉并回转，代价通常较小。先修正一个最近的动作，比一次解决所有问题更可行。"
|
||||
};
|
||||
}
|
||||
return {
|
||||
classic: `${data.primary.name}卦 · 第 ${data.primary.number} 卦。本原型仅演示排盘与阅读层级，正式经典文本将从经校勘的本地内容包读取。`,
|
||||
plain: "先观察卦象呈现的张力与变化，再回到你能核实的事实、感受和资源。不要把符号当成替你下结论的证据。",
|
||||
moving: data.movingIndexes.length ? `${data.movingIndexes.map((index) => lineName(data.sourceLines[index], index)).join("、")}发生变化。` : "",
|
||||
movingPlain: "变化的位置可作为反思入口：哪里正在松动，哪里仍需要保留余地？"
|
||||
};
|
||||
}
|
||||
|
||||
function errorCard() {
|
||||
return `
|
||||
<div class="error-card" role="alert">
|
||||
<h3>AI 解读暂时没有返回</h3>
|
||||
<p class="quiet">起卦结果仍完整保存在本页。你可以改看本地解读，或稍后重试。</p>
|
||||
<div class="error-actions">
|
||||
<button class="button button--secondary" type="button" data-action="choose-local">本地解读</button>
|
||||
<button class="button button--danger-quiet" type="button" data-action="retry-ai">重试</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function resultView() {
|
||||
const data = resultData();
|
||||
const copy = resultCopy(data);
|
||||
const hasMoving = data.movingIndexes.length > 0;
|
||||
const question = state.question || "未记录具体问题";
|
||||
|
||||
return `
|
||||
<section class="page page--compact" aria-labelledby="result-title">
|
||||
<div class="result-hero">
|
||||
<div class="result-kicker">
|
||||
<span>起卦结果 · 本地计算</span>
|
||||
<span>${hasMoving ? `${data.movingIndexes.length} 个动爻` : "无动爻"}</span>
|
||||
</div>
|
||||
|
||||
<div class="hexagram-pair${hasMoving ? "" : " hexagram-pair--single"}">
|
||||
${hexagramFigure(data.sourceLines, data.primary, true)}
|
||||
${hasMoving ? `<div class="transform-arrow" aria-label="变化为">之</div>${hexagramFigure(data.changedLines, data.changed, false)}` : ""}
|
||||
</div>
|
||||
${hasMoving ? "" : '<div class="static-indicator">卦象稳定 · 不显示之卦</div>'}
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<div class="section-heading">
|
||||
<h2 id="result-title">你所问</h2>
|
||||
<span class="source-badge">本次记录</span>
|
||||
</div>
|
||||
<p class="question-chip" style="white-space:normal">${escapeHtml(question)}</p>
|
||||
</div>
|
||||
|
||||
${state.aiError ? errorCard() : ""}
|
||||
|
||||
<div class="content-section">
|
||||
<div class="section-heading">
|
||||
<h2>经典原文</h2>
|
||||
<span class="source-badge">经典文本</span>
|
||||
</div>
|
||||
<blockquote class="classic-quote">${copy.classic}</blockquote>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<div class="section-heading">
|
||||
<h2>本地白话</h2>
|
||||
<span class="source-badge">本地内容</span>
|
||||
</div>
|
||||
<div class="plain-copy"><p>${copy.plain}</p></div>
|
||||
</div>
|
||||
|
||||
${hasMoving ? `
|
||||
<div class="content-section">
|
||||
<div class="section-heading"><h2>动爻</h2><span class="source-badge">变化处</span></div>
|
||||
<div class="moving-card">
|
||||
<div class="moving-card__label">${data.movingIndexes.map((index) => lineName(data.sourceLines[index], index)).join(" · ")}</div>
|
||||
<h3>${copy.moving}</h3>
|
||||
<p class="quiet">${copy.movingPlain}</p>
|
||||
</div>
|
||||
</div>` : ""}
|
||||
|
||||
<hr class="divider" />
|
||||
<button class="text-link" type="button" data-action="restart">重新起一卦</button>
|
||||
|
||||
<div class="bottom-action">
|
||||
<button class="button button--primary" type="button" data-action="open-interpretation">
|
||||
解 · 选择一种解读方式 ${icons.arrow}
|
||||
</button>
|
||||
</div>
|
||||
</section>`;
|
||||
}
|
||||
|
||||
function loadingView() {
|
||||
return `
|
||||
<section class="page" aria-labelledby="loading-title">
|
||||
<div class="loading-state">
|
||||
<div class="loading-orbit" aria-hidden="true"></div>
|
||||
<h1 id="loading-title" style="font-size:27px">正在整理反思线索</h1>
|
||||
<p class="lede">结果已经生成。AI 只在此处协助组织文字，不参与起卦。</p>
|
||||
</div>
|
||||
</section>`;
|
||||
}
|
||||
|
||||
function explanationView() {
|
||||
const data = resultData();
|
||||
const ai = state.explanationSource === "ai";
|
||||
return `
|
||||
<article class="page page--compact" aria-labelledby="explanation-title">
|
||||
<header class="interpretation-header">
|
||||
<p class="eyebrow">${ai ? "辅助反思" : "离线阅读"}</p>
|
||||
<h1 id="explanation-title">从“回到起点”开始</h1>
|
||||
<div class="interpretation-meta">
|
||||
<span class="source-badge">${ai ? "AI 生成" : "本地解读"}</span>
|
||||
<span>${data.primary.name}卦 · 第 ${data.primary.number} 卦</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<p class="interpretation-lead">眼前更重要的，也许不是立刻选定一条路，而是辨认哪一步能让你重新获得稳定与判断力。</p>
|
||||
|
||||
<section class="content-section" aria-labelledby="observation-title">
|
||||
<div class="section-heading"><h2 id="observation-title">可以先观察</h2></div>
|
||||
<ul class="reflection-list">
|
||||
<li>你对“调整”的担心里，哪些是已经发生的事实，哪些是尚未验证的推测？</li>
|
||||
<li>复卦的动处在最初一爻，适合把注意力放在能尽早修正的小偏差。</li>
|
||||
<li>之卦为坤，提示行动时给现实条件、协作关系与节奏留出空间。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="content-section" aria-labelledby="questions-title">
|
||||
<div class="section-heading"><h2 id="questions-title">问问自己</h2></div>
|
||||
<ol class="question-list">
|
||||
<li>如果暂时不追求一次做对，我最想先确认的一个事实是什么？</li>
|
||||
<li>哪一种选择更容易保留回转余地，而不是把自己锁死？</li>
|
||||
<li>我可以向谁说明顾虑，并获得一条具体信息？</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section class="content-section" aria-labelledby="step-title">
|
||||
<div class="small-step">
|
||||
<div class="small-step__label" id="step-title">可以试的一小步</div>
|
||||
<p>在今天结束前，写下“已知事实、尚待确认、我的底线”各一条，再约一次不超过 20 分钟的信息沟通。</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p class="safety-note">这是一种文化反思与文字整理，不是预测、诊断或替代你的判断。涉及医疗、法律、财务或人身安全时，请寻求相应专业支持。</p>
|
||||
|
||||
<div class="bottom-action">
|
||||
<button class="button button--secondary" type="button" data-action="back-to-result">回到起卦结果</button>
|
||||
</div>
|
||||
</article>`;
|
||||
}
|
||||
|
||||
function interpretationModal() {
|
||||
return `
|
||||
<div class="modal-backdrop" data-action="dismiss-modal">
|
||||
<section class="modal-sheet" role="dialog" aria-modal="true" aria-labelledby="interpretation-modal-title" data-modal-sheet>
|
||||
<div class="modal-handle" aria-hidden="true"></div>
|
||||
<header class="modal-header">
|
||||
<div>
|
||||
<h2 id="interpretation-modal-title">选择解读方式</h2>
|
||||
<p>起卦结果不会改变，只切换阅读材料的来源。</p>
|
||||
</div>
|
||||
<button class="icon-button" type="button" data-action="close-modal" aria-label="关闭"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
|
||||
</header>
|
||||
<div class="option-list">
|
||||
<button class="option-card" type="button" data-action="choose-local">
|
||||
<span class="option-card__icon" aria-hidden="true">本</span>
|
||||
<span><strong>先看本地解读</strong><small>离线可用，不发送任何内容</small></span>
|
||||
${icons.chevron}
|
||||
</button>
|
||||
<button class="option-card" type="button" data-action="choose-ai">
|
||||
<span class="option-card__icon" aria-hidden="true">解</span>
|
||||
<span><strong>使用 AI 辅助解读</strong><small>确认发送范围后再开始</small></span>
|
||||
${icons.chevron}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function consentModal() {
|
||||
return `
|
||||
<div class="modal-backdrop" data-action="dismiss-modal">
|
||||
<section class="modal-sheet" role="dialog" aria-modal="true" aria-labelledby="consent-modal-title" data-modal-sheet>
|
||||
<div class="modal-handle" aria-hidden="true"></div>
|
||||
<header class="modal-header">
|
||||
<div>
|
||||
<h2 id="consent-modal-title">发送前，请你确认</h2>
|
||||
<p>AI 不参与起卦，只根据既有结果整理反思线索。</p>
|
||||
</div>
|
||||
<button class="icon-button" type="button" data-action="close-modal" aria-label="关闭"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
|
||||
</header>
|
||||
|
||||
<div class="notice">
|
||||
${icons.shield}
|
||||
<p>将发送以下内容；不会发送设备标识、历史记录或其他本地数据。</p>
|
||||
</div>
|
||||
<ul class="data-list">
|
||||
<li>你本次写下的问题</li>
|
||||
<li>本卦、之卦与动爻结果</li>
|
||||
<li>用于约束语气和安全边界的提示</li>
|
||||
</ul>
|
||||
|
||||
<label class="consent-check">
|
||||
<input type="checkbox" data-action="consent-toggle" ${state.consent ? "checked" : ""} />
|
||||
<span>我已了解发送范围，并同意仅为本次 AI 解读使用这些内容。</span>
|
||||
</label>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="button button--primary" type="button" data-action="confirm-ai" ${state.consent ? "" : "disabled"}>同意并开始解读</button>
|
||||
<button class="button button--quiet" type="button" data-action="choose-local">改看本地解读</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function methodModal() {
|
||||
return `
|
||||
<div class="modal-backdrop" data-action="dismiss-modal">
|
||||
<section class="modal-sheet" role="dialog" aria-modal="true" aria-labelledby="method-modal-title" data-modal-sheet>
|
||||
<div class="modal-handle" aria-hidden="true"></div>
|
||||
<header class="modal-header">
|
||||
<div>
|
||||
<h2 id="method-modal-title">三枚硬币法</h2>
|
||||
<p>原型采用明确、可复核的固定规则。</p>
|
||||
</div>
|
||||
<button class="icon-button" type="button" data-action="close-modal" aria-label="关闭"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
|
||||
</header>
|
||||
|
||||
<ol class="method-steps">
|
||||
<li>准备三枚硬币，在现实中投掷一次。</li>
|
||||
<li>在页面逐枚记录字面或背面，确认后形成一爻。</li>
|
||||
<li>从下往上重复六次；程序只换算，不替你随机生成。</li>
|
||||
</ol>
|
||||
|
||||
<div class="score-table" aria-label="硬币计分规则">
|
||||
<div><strong>字 · 2</strong><span>字面记两分</span></div>
|
||||
<div><strong>背 · 3</strong><span>背面记三分</span></div>
|
||||
</div>
|
||||
<p class="fine-print">合计 6 为老阴、7 为少阳、8 为少阴、9 为老阳；6 与 9 是动爻。</p>
|
||||
<button class="button button--secondary" style="width:100%" type="button" data-action="close-modal">知道了</button>
|
||||
</section>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function renderModal() {
|
||||
if (state.modal === "interpretation") modalRoot.innerHTML = interpretationModal();
|
||||
else if (state.modal === "consent") modalRoot.innerHTML = consentModal();
|
||||
else if (state.modal === "method") modalRoot.innerHTML = methodModal();
|
||||
else modalRoot.innerHTML = "";
|
||||
|
||||
document.body.style.overflow = state.modal ? "hidden" : "";
|
||||
if (state.modal) {
|
||||
window.setTimeout(() => {
|
||||
modalRoot.querySelector("button, input")?.focus();
|
||||
}, 20);
|
||||
}
|
||||
}
|
||||
|
||||
function render(options = {}) {
|
||||
if (state.screen === "welcome") screen.innerHTML = welcomeView();
|
||||
else if (state.screen === "question") screen.innerHTML = questionView();
|
||||
else if (state.screen === "casting") screen.innerHTML = castingView();
|
||||
else if (state.screen === "result") screen.innerHTML = resultView();
|
||||
else if (state.screen === "loading") screen.innerHTML = loadingView();
|
||||
else if (state.screen === "explanation") screen.innerHTML = explanationView();
|
||||
|
||||
backButton.hidden = state.screen === "welcome";
|
||||
renderModal();
|
||||
|
||||
if (!options.preserveFocus) {
|
||||
screen.focus({ preventScroll: true });
|
||||
window.scrollTo({ top: 0, behavior: "auto" });
|
||||
}
|
||||
}
|
||||
|
||||
function showToast(message) {
|
||||
toastRegion.innerHTML = `<div class="toast">${escapeHtml(message)}</div>`;
|
||||
window.setTimeout(() => {
|
||||
toastRegion.innerHTML = "";
|
||||
}, 1800);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
state.modal = null;
|
||||
state.consent = false;
|
||||
renderModal();
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
if (state.modal) {
|
||||
closeModal();
|
||||
return;
|
||||
}
|
||||
if (state.screen === "question") state.screen = "welcome";
|
||||
else if (state.screen === "casting") state.screen = "question";
|
||||
else if (state.screen === "result") state.screen = "question";
|
||||
else if (state.screen === "loading" || state.screen === "explanation") state.screen = "result";
|
||||
render();
|
||||
}
|
||||
|
||||
function beginAiExplanation() {
|
||||
state.modal = null;
|
||||
state.screen = "loading";
|
||||
state.explanationSource = "ai";
|
||||
render();
|
||||
window.setTimeout(() => {
|
||||
if (state.screen !== "loading") return;
|
||||
state.screen = "explanation";
|
||||
render();
|
||||
}, 900);
|
||||
}
|
||||
|
||||
document.addEventListener("input", (event) => {
|
||||
if (!event.target.matches("[data-question-input]")) return;
|
||||
state.question = event.target.value;
|
||||
document.querySelector("[data-char-count]").textContent = `${state.question.length}/120`;
|
||||
const startButton = document.querySelector("[data-action='start-casting']");
|
||||
if (startButton) startButton.disabled = !state.question.trim();
|
||||
});
|
||||
|
||||
document.addEventListener("change", (event) => {
|
||||
if (!event.target.matches("[data-action='consent-toggle']")) return;
|
||||
state.consent = event.target.checked;
|
||||
const confirm = document.querySelector("[data-action='confirm-ai']");
|
||||
if (confirm) confirm.disabled = !state.consent;
|
||||
});
|
||||
|
||||
document.addEventListener("click", (event) => {
|
||||
const actionTarget = event.target.closest("[data-action]");
|
||||
if (!actionTarget) return;
|
||||
const action = actionTarget.dataset.action;
|
||||
|
||||
if (action === "dismiss-modal" && event.target.closest("[data-modal-sheet]")) return;
|
||||
|
||||
if (action === "back") goBack();
|
||||
else if (action === "begin") {
|
||||
state.screen = "question";
|
||||
render();
|
||||
} else if (action === "skip-question") {
|
||||
state.question = "未记录具体问题（仅作自我观察）";
|
||||
state.lines = [];
|
||||
state.coins = [null, null, null];
|
||||
state.screen = "casting";
|
||||
render();
|
||||
} else if (action === "start-casting") {
|
||||
if (!state.question.trim()) return;
|
||||
state.lines = [];
|
||||
state.coins = [null, null, null];
|
||||
state.screen = "casting";
|
||||
render();
|
||||
} else if (action === "toggle-coin") {
|
||||
const index = Number(actionTarget.dataset.index);
|
||||
const current = state.coins[index];
|
||||
state.coins[index] = current === null || current === 3 ? 2 : 3;
|
||||
render({ preserveFocus: true });
|
||||
document.querySelector(`[data-action='toggle-coin'][data-index='${index}']`)?.focus();
|
||||
} else if (action === "confirm-line") {
|
||||
if (!state.coins.every((value) => value !== null)) return;
|
||||
state.lines.push(state.coins.reduce((total, value) => total + value, 0));
|
||||
state.coins = [null, null, null];
|
||||
if (state.lines.length === 6) {
|
||||
state.screen = "result";
|
||||
}
|
||||
render();
|
||||
} else if (action === "undo-line") {
|
||||
state.lines.pop();
|
||||
state.coins = [null, null, null];
|
||||
render();
|
||||
showToast("已撤销上一爻");
|
||||
} else if (action === "open-interpretation") {
|
||||
state.modal = "interpretation";
|
||||
renderModal();
|
||||
} else if (action === "choose-ai") {
|
||||
state.modal = "consent";
|
||||
state.consent = false;
|
||||
renderModal();
|
||||
} else if (action === "choose-local") {
|
||||
state.modal = null;
|
||||
state.explanationSource = "local";
|
||||
state.screen = "explanation";
|
||||
render();
|
||||
} else if (action === "confirm-ai") {
|
||||
if (!state.consent) return;
|
||||
beginAiExplanation();
|
||||
} else if (action === "retry-ai") {
|
||||
state.aiError = false;
|
||||
state.modal = "consent";
|
||||
state.consent = false;
|
||||
renderModal();
|
||||
} else if (action === "restart") {
|
||||
state.question = "";
|
||||
state.lines = [];
|
||||
state.coins = [null, null, null];
|
||||
state.aiError = false;
|
||||
state.screen = "welcome";
|
||||
render();
|
||||
} else if (action === "back-to-result") {
|
||||
state.screen = "result";
|
||||
render();
|
||||
} else if (action === "open-method") {
|
||||
state.modal = "method";
|
||||
renderModal();
|
||||
} else if (action === "close-modal" || action === "dismiss-modal") {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape" && state.modal) closeModal();
|
||||
});
|
||||
|
||||
function seedPreview() {
|
||||
const view = new URLSearchParams(window.location.search).get("view");
|
||||
if (!view || view === "welcome") return;
|
||||
|
||||
if (view === "question") {
|
||||
state.screen = "question";
|
||||
state.question = SAMPLE_QUESTION;
|
||||
return;
|
||||
}
|
||||
|
||||
state.question = SAMPLE_QUESTION;
|
||||
if (view === "casting") {
|
||||
state.screen = "casting";
|
||||
state.lines = [9, 8];
|
||||
state.coins = [2, 3, null];
|
||||
return;
|
||||
}
|
||||
|
||||
state.lines = view === "static" ? [7, 7, 7, 7, 7, 7] : [...SAMPLE_LINES];
|
||||
state.screen = "result";
|
||||
|
||||
if (view === "consent") state.modal = "consent";
|
||||
else if (view === "explanation") {
|
||||
state.screen = "explanation";
|
||||
state.explanationSource = "ai";
|
||||
} else if (view === "local") {
|
||||
state.screen = "explanation";
|
||||
state.explanationSource = "local";
|
||||
} else if (view === "error") {
|
||||
state.aiError = true;
|
||||
}
|
||||
}
|
||||
|
||||
seedPreview();
|
||||
render();
|
||||
})();
|
||||
@@ -0,0 +1,342 @@
|
||||
import { spawn } from "node:child_process";
|
||||
import { existsSync } from "node:fs";
|
||||
import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
|
||||
import net from "node:net";
|
||||
import os from "node:os";
|
||||
import path from "node:path";
|
||||
import process from "node:process";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const screenshotDir = path.join(__dirname, "screenshots");
|
||||
const baseUrl = process.env.BRAINWAVE_PROTOTYPE_URL ?? "http://127.0.0.1:4173/prototype/";
|
||||
|
||||
const cases = [
|
||||
{ view: "welcome", file: "01-welcome.png", fullPage: true },
|
||||
{ view: "question", file: "02-question.png", fullPage: true },
|
||||
{ view: "casting", file: "03-casting.png", fullPage: true },
|
||||
{ view: "result", file: "04-result-moving.png", fullPage: true },
|
||||
{ view: "static", file: "05-result-static.png", fullPage: true },
|
||||
{ view: "consent", file: "06-ai-consent.png", fullPage: false },
|
||||
{ view: "explanation", file: "07-ai-explanation.png", fullPage: true },
|
||||
{ view: "error", file: "08-ai-error.png", fullPage: true }
|
||||
];
|
||||
|
||||
function findChrome() {
|
||||
const candidates = process.platform === "win32"
|
||||
? [
|
||||
"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
|
||||
"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
|
||||
"C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe",
|
||||
"C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe"
|
||||
]
|
||||
: process.platform === "darwin"
|
||||
? ["/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"]
|
||||
: ["/usr/bin/google-chrome", "/usr/bin/chromium", "/usr/bin/chromium-browser"];
|
||||
|
||||
const executable = candidates.find(existsSync);
|
||||
if (!executable) {
|
||||
throw new Error("未找到 Chrome/Edge。请安装浏览器，或扩展 capture.mjs 中的候选路径。");
|
||||
}
|
||||
return executable;
|
||||
}
|
||||
|
||||
function getFreePort() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const server = net.createServer();
|
||||
server.unref();
|
||||
server.on("error", reject);
|
||||
server.listen(0, "127.0.0.1", () => {
|
||||
const address = server.address();
|
||||
server.close(() => resolve(address.port));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function delay(milliseconds) {
|
||||
return new Promise((resolve) => setTimeout(resolve, milliseconds));
|
||||
}
|
||||
|
||||
async function waitForDebugTarget(port) {
|
||||
const endpoint = `http://127.0.0.1:${port}/json/list`;
|
||||
for (let attempt = 0; attempt < 50; attempt += 1) {
|
||||
try {
|
||||
const response = await fetch(endpoint);
|
||||
if (response.ok) {
|
||||
const targets = await response.json();
|
||||
const page = targets.find((target) => target.type === "page");
|
||||
if (page?.webSocketDebuggerUrl) return page.webSocketDebuggerUrl;
|
||||
}
|
||||
} catch {
|
||||
// Chrome may still be starting; retry within the bounded loop.
|
||||
}
|
||||
await delay(100);
|
||||
}
|
||||
throw new Error("Chrome DevTools endpoint did not become ready.");
|
||||
}
|
||||
|
||||
class CdpClient {
|
||||
constructor(webSocketUrl) {
|
||||
this.socket = new WebSocket(webSocketUrl);
|
||||
this.nextId = 1;
|
||||
this.pending = new Map();
|
||||
this.listeners = new Map();
|
||||
}
|
||||
|
||||
async connect() {
|
||||
await new Promise((resolve, reject) => {
|
||||
this.socket.addEventListener("open", resolve, { once: true });
|
||||
this.socket.addEventListener("error", reject, { once: true });
|
||||
});
|
||||
this.socket.addEventListener("message", (event) => this.#handleMessage(event));
|
||||
}
|
||||
|
||||
#handleMessage(event) {
|
||||
const message = JSON.parse(String(event.data));
|
||||
if (message.id) {
|
||||
const pending = this.pending.get(message.id);
|
||||
if (!pending) return;
|
||||
this.pending.delete(message.id);
|
||||
if (message.error) pending.reject(new Error(message.error.message));
|
||||
else pending.resolve(message.result);
|
||||
return;
|
||||
}
|
||||
|
||||
const listeners = this.listeners.get(message.method) ?? [];
|
||||
for (const listener of listeners) listener(message.params);
|
||||
}
|
||||
|
||||
send(method, params = {}) {
|
||||
const id = this.nextId;
|
||||
this.nextId += 1;
|
||||
return new Promise((resolve, reject) => {
|
||||
this.pending.set(id, { resolve, reject });
|
||||
this.socket.send(JSON.stringify({ id, method, params }));
|
||||
});
|
||||
}
|
||||
|
||||
on(method, listener) {
|
||||
const listeners = this.listeners.get(method) ?? [];
|
||||
listeners.push(listener);
|
||||
this.listeners.set(method, listeners);
|
||||
}
|
||||
|
||||
waitFor(method, timeoutMs = 5000) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const timeout = setTimeout(() => reject(new Error(`Timed out waiting for ${method}`)), timeoutMs);
|
||||
const listener = (params) => {
|
||||
clearTimeout(timeout);
|
||||
const listeners = this.listeners.get(method) ?? [];
|
||||
this.listeners.set(method, listeners.filter((candidate) => candidate !== listener));
|
||||
resolve(params);
|
||||
};
|
||||
this.on(method, listener);
|
||||
});
|
||||
}
|
||||
|
||||
close() {
|
||||
this.socket.close();
|
||||
}
|
||||
}
|
||||
|
||||
async function evaluate(client, expression) {
|
||||
const result = await client.send("Runtime.evaluate", {
|
||||
expression,
|
||||
returnByValue: true,
|
||||
awaitPromise: true
|
||||
});
|
||||
if (result.exceptionDetails) {
|
||||
throw new Error(result.exceptionDetails.text ?? "Runtime evaluation failed.");
|
||||
}
|
||||
return result.result.value;
|
||||
}
|
||||
|
||||
async function navigate(client, view) {
|
||||
const loaded = client.waitFor("Page.loadEventFired");
|
||||
await client.send("Page.navigate", { url: `${baseUrl}?view=${view}` });
|
||||
await loaded;
|
||||
await delay(320);
|
||||
}
|
||||
|
||||
async function capture(client, item) {
|
||||
await navigate(client, item.view);
|
||||
const dimensions = await evaluate(client, `(() => ({
|
||||
width: document.documentElement.scrollWidth,
|
||||
height: Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)
|
||||
}))()`);
|
||||
const height = item.fullPage ? dimensions.height : 792;
|
||||
const screenshot = await client.send("Page.captureScreenshot", {
|
||||
format: "png",
|
||||
fromSurface: true,
|
||||
captureBeyondViewport: true,
|
||||
clip: { x: 0, y: 0, width: 360, height, scale: 1 }
|
||||
});
|
||||
await writeFile(path.join(screenshotDir, item.file), Buffer.from(screenshot.data, "base64"));
|
||||
return { view: item.view, file: item.file, width: 360, height };
|
||||
}
|
||||
|
||||
async function auditView(client, view) {
|
||||
await navigate(client, view);
|
||||
return evaluate(client, `(() => {
|
||||
const visible = (element) => {
|
||||
const style = getComputedStyle(element);
|
||||
const rect = element.getBoundingClientRect();
|
||||
return style.display !== "none" && style.visibility !== "hidden" && rect.width > 0 && rect.height > 0;
|
||||
};
|
||||
const buttons = [...document.querySelectorAll("button")].filter(visible);
|
||||
const touchIssues = buttons.map((button) => {
|
||||
const rect = button.getBoundingClientRect();
|
||||
return {
|
||||
name: button.getAttribute("aria-label") || button.innerText.trim(),
|
||||
width: Math.round(rect.width),
|
||||
height: Math.round(rect.height)
|
||||
};
|
||||
}).filter((item) => item.width < 48 || item.height < 48);
|
||||
const unnamedButtons = buttons
|
||||
.filter((button) => !(button.getAttribute("aria-label") || button.innerText.trim()))
|
||||
.length;
|
||||
const checkboxes = [...document.querySelectorAll('input[type="checkbox"]')].filter(visible);
|
||||
const smallCheckboxLabels = checkboxes.filter((checkbox) => {
|
||||
const label = checkbox.closest("label");
|
||||
if (!label) return true;
|
||||
const rect = label.getBoundingClientRect();
|
||||
return rect.width < 48 || rect.height < 48;
|
||||
}).length;
|
||||
return { view: ${JSON.stringify(view)}, unnamedButtons, touchIssues, smallCheckboxLabels };
|
||||
})()`);
|
||||
}
|
||||
|
||||
async function run() {
|
||||
const health = await fetch(baseUrl);
|
||||
if (!health.ok) {
|
||||
throw new Error(`原型服务不可用：${baseUrl} (${health.status})`);
|
||||
}
|
||||
|
||||
const chrome = findChrome();
|
||||
const port = await getFreePort();
|
||||
const profileDir = await mkdtemp(path.join(os.tmpdir(), "brainwave-prototype-capture-"));
|
||||
const chromeProcess = spawn(chrome, [
|
||||
"--headless=new",
|
||||
"--disable-gpu",
|
||||
"--no-first-run",
|
||||
"--no-default-browser-check",
|
||||
`--remote-debugging-port=${port}`,
|
||||
`--user-data-dir=${profileDir}`,
|
||||
"about:blank"
|
||||
], { stdio: "ignore", windowsHide: true });
|
||||
|
||||
let client;
|
||||
try {
|
||||
const webSocketUrl = await waitForDebugTarget(port);
|
||||
client = new CdpClient(webSocketUrl);
|
||||
await client.connect();
|
||||
await Promise.all([
|
||||
client.send("Page.enable"),
|
||||
client.send("Runtime.enable"),
|
||||
client.send("Network.enable"),
|
||||
client.send("Log.enable"),
|
||||
client.send("Emulation.setDeviceMetricsOverride", {
|
||||
width: 360,
|
||||
height: 792,
|
||||
deviceScaleFactor: 1,
|
||||
mobile: false,
|
||||
screenWidth: 360,
|
||||
screenHeight: 792
|
||||
})
|
||||
]);
|
||||
|
||||
const consoleErrors = [];
|
||||
const runtimeErrors = [];
|
||||
const externalRequests = [];
|
||||
client.on("Log.entryAdded", ({ entry }) => {
|
||||
if (entry.level === "error") consoleErrors.push(entry.text);
|
||||
});
|
||||
client.on("Runtime.exceptionThrown", ({ exceptionDetails }) => {
|
||||
runtimeErrors.push(exceptionDetails.exception?.description ?? exceptionDetails.text);
|
||||
});
|
||||
client.on("Network.requestWillBeSent", ({ request }) => {
|
||||
const url = new URL(request.url);
|
||||
if (!["127.0.0.1", "localhost"].includes(url.hostname) && url.protocol !== "data:") {
|
||||
externalRequests.push(request.url);
|
||||
}
|
||||
});
|
||||
|
||||
await mkdir(screenshotDir, { recursive: true });
|
||||
const screenshots = [];
|
||||
for (const item of cases) screenshots.push(await capture(client, item));
|
||||
|
||||
await navigate(client, "result");
|
||||
const movingResult = await evaluate(client, `(() => ({
|
||||
names: [...document.querySelectorAll(".hexagram-name")].map((node) => node.textContent.trim()),
|
||||
numbers: [...document.querySelectorAll(".hexagram-number")].map((node) => node.textContent.trim()),
|
||||
moving: document.querySelector(".result-kicker")?.textContent.replace(/\\s+/g, " ").trim()
|
||||
}))()`);
|
||||
|
||||
await navigate(client, "static");
|
||||
const staticResult = await evaluate(client, `(() => ({
|
||||
names: [...document.querySelectorAll(".hexagram-name")].map((node) => node.textContent.trim()),
|
||||
transformCount: document.querySelectorAll(".transform-arrow").length,
|
||||
label: document.querySelector(".static-indicator")?.textContent.trim()
|
||||
}))()`);
|
||||
|
||||
await navigate(client, "consent");
|
||||
const consentBefore = await evaluate(client, "document.querySelector('[data-action=\"confirm-ai\"]')?.disabled");
|
||||
await evaluate(client, `(() => {
|
||||
document.querySelector('[data-action="consent-toggle"]').click();
|
||||
return document.querySelector('[data-action="confirm-ai"]').disabled;
|
||||
})()`);
|
||||
const consentAfter = await evaluate(client, "document.querySelector('[data-action=\"confirm-ai\"]')?.disabled");
|
||||
await evaluate(client, "document.querySelector('[data-action=\"confirm-ai\"]')?.click()");
|
||||
await delay(1050);
|
||||
const explanationSource = await evaluate(client, "document.querySelector('.source-badge')?.textContent.trim()");
|
||||
|
||||
const accessibility = [];
|
||||
for (const item of cases) accessibility.push(await auditView(client, item.view));
|
||||
|
||||
const report = {
|
||||
chrome,
|
||||
baseUrl,
|
||||
screenshots,
|
||||
movingResult,
|
||||
staticResult,
|
||||
consentGate: {
|
||||
disabledBeforeConsent: consentBefore,
|
||||
disabledAfterConsent: consentAfter,
|
||||
explanationSource
|
||||
},
|
||||
consoleErrors,
|
||||
runtimeErrors,
|
||||
externalRequests: [...new Set(externalRequests)],
|
||||
accessibility
|
||||
};
|
||||
|
||||
const failed =
|
||||
movingResult.names.join(",") !== "复,坤" ||
|
||||
movingResult.numbers.join(",") !== "第 24 卦,第 2 卦" ||
|
||||
!movingResult.moving.includes("1 个动爻") ||
|
||||
staticResult.names.join(",") !== "乾" ||
|
||||
staticResult.transformCount !== 0 ||
|
||||
consentBefore !== true ||
|
||||
consentAfter !== false ||
|
||||
explanationSource !== "AI 生成" ||
|
||||
consoleErrors.length > 0 ||
|
||||
runtimeErrors.length > 0 ||
|
||||
externalRequests.length > 0 ||
|
||||
accessibility.some((item) =>
|
||||
item.unnamedButtons > 0 || item.touchIssues.length > 0 || item.smallCheckboxLabels > 0
|
||||
);
|
||||
|
||||
console.log(JSON.stringify(report, null, 2));
|
||||
if (failed) process.exitCode = 1;
|
||||
} finally {
|
||||
client?.close();
|
||||
chromeProcess.kill();
|
||||
await delay(150);
|
||||
await rm(profileDir, { recursive: true, force: true });
|
||||
}
|
||||
}
|
||||
|
||||
run().catch((error) => {
|
||||
console.error(error.stack ?? error.message);
|
||||
process.exitCode = 1;
|
||||
});
|
||||
@@ -0,0 +1,58 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#f7f2e8" />
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%238c2f2b'/%3E%3Cpath d='M8 11h16M8 21h6m4 0h6' stroke='%23fffdf7' stroke-width='3'/%3E%3C/svg%3E" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Brainwave 东方文化反思工具的移动端高保真交互原型"
|
||||
/>
|
||||
<title>一问 · Brainwave 高保真原型</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<script src="./app.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#screen">跳到主要内容</a>
|
||||
|
||||
<div class="prototype-stage">
|
||||
<div class="app-shell" data-app-shell>
|
||||
<header class="topbar" data-topbar>
|
||||
<button
|
||||
class="icon-button topbar__back"
|
||||
type="button"
|
||||
data-action="back"
|
||||
aria-label="返回"
|
||||
>
|
||||
<svg aria-hidden="true" viewBox="0 0 24 24">
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="wordmark" aria-label="Brainwave 原型，工作名一问">
|
||||
<span class="wordmark__name">一问</span>
|
||||
<span class="wordmark__meta">BRAINWAVE · 原型</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="icon-button"
|
||||
type="button"
|
||||
data-action="open-method"
|
||||
aria-label="查看起卦方法说明"
|
||||
>
|
||||
<svg aria-hidden="true" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="8.5" />
|
||||
<path d="M12 10.8v5.2M12 7.4v.1" />
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<main id="screen" class="screen" tabindex="-1"></main>
|
||||
<div id="toast-region" class="toast-region" aria-live="polite"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modal-root"></div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user