fix(web): 对齐手动起卦页面六爻显示与设计稿

- 老阳显示 ○ 符号,老阴显示 × 符号
- 未确认的爻显示灰色线,确认后显示紫色线
- 移除"待录入"/"老阴/少阳"等文字,改用符号显示
- 移除硬币选择区域的结果显示
This commit is contained in:
ZL-Q
2026-05-09 21:47:51 +08:00
parent d84599adca
commit e31d88e788
+16 -11
View File
@@ -47,9 +47,11 @@ function CoinImage({ face, selected }: { face: CoinFace; selected?: boolean }) {
);
}
function YaoGlyph({ type, active }: { type?: YaoType; active?: boolean }) {
const color = active || type ? 'bg-violet-700' : 'bg-slate-200';
function YaoGlyph({ type, confirmed }: { type?: YaoType; confirmed?: boolean }) {
// Gray for unconfirmed, violet for confirmed
const color = confirmed ? 'bg-violet-700' : 'bg-slate-200';
// Yang: solid line, Yin: split line
if (!type || type === 'youngYang' || type === 'oldYang') {
return <div className={`h-2.5 w-full rounded-full ${color}`} />;
}
@@ -62,6 +64,12 @@ function YaoGlyph({ type, active }: { type?: YaoType; active?: boolean }) {
);
}
function YaoChangeMark({ type }: { type?: YaoType }) {
if (type === 'oldYang') return <span className="text-violet-700 font-bold"></span>;
if (type === 'oldYin') return <span className="text-violet-700 font-bold">×</span>;
return null;
}
const copy = {
zh: {
title: '手动起卦',
@@ -250,17 +258,18 @@ export default function ManualDivinationPage({ locale, divination: d }: Props) {
{[5, 4, 3, 2, 1, 0].map((index) => {
const result = yaoResults[index];
const active = index === progress && progress < TOTAL_YAO_COUNT;
const confirmed = !!result;
return (
<div
key={index}
className={`flex h-[62px] items-center gap-4 rounded-[10px] px-3.5 ${active ? 'border border-violet-600 bg-violet-50' : result ? 'border border-slate-200 bg-white' : 'bg-slate-50'}`}
className={`flex h-[62px] items-center gap-4 rounded-[10px] px-3.5 ${active ? 'border border-violet-600 bg-violet-50' : confirmed ? 'border border-slate-200 bg-white' : 'bg-slate-50'}`}
>
<span className={`w-16 text-sm font-bold ${active || result ? 'text-violet-700' : 'text-slate-400'}`}>{text.lineNames[index]}</span>
<span className={`w-16 text-sm font-bold ${active || confirmed ? 'text-violet-700' : 'text-slate-400'}`}>{text.lineNames[index]}</span>
<div className="min-w-0 flex-1">
<YaoGlyph type={result} active={active} />
<YaoGlyph type={result} confirmed={confirmed} />
</div>
<span className={`w-20 text-right text-[13px] font-bold ${result ? 'text-violet-700' : 'text-slate-400'}`}>
{result ? text.yaoTypeNames[result] : text.pending}
<span className="w-6 text-center">
<YaoChangeMark type={result} />
</span>
</div>
);
@@ -285,10 +294,6 @@ export default function ManualDivinationPage({ locale, divination: d }: Props) {
</div>
</div>
<div className="rounded-xl border border-violet-100 bg-violet-50 px-4 py-3 text-center text-[13px] font-semibold text-violet-800">
{text.yaoTypeNames[currentYaoType]}
</div>
<button
type="button"
onClick={confirmYao}