fix(web): 对齐手动起卦页面六爻显示与设计稿
- 老阳显示 ○ 符号,老阴显示 × 符号 - 未确认的爻显示灰色线,确认后显示紫色线 - 移除"待录入"/"老阴/少阳"等文字,改用符号显示 - 移除硬币选择区域的结果显示
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user