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 }) {
|
function YaoGlyph({ type, confirmed }: { type?: YaoType; confirmed?: boolean }) {
|
||||||
const color = active || type ? 'bg-violet-700' : 'bg-slate-200';
|
// 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') {
|
if (!type || type === 'youngYang' || type === 'oldYang') {
|
||||||
return <div className={`h-2.5 w-full rounded-full ${color}`} />;
|
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 = {
|
const copy = {
|
||||||
zh: {
|
zh: {
|
||||||
title: '手动起卦',
|
title: '手动起卦',
|
||||||
@@ -250,17 +258,18 @@ export default function ManualDivinationPage({ locale, divination: d }: Props) {
|
|||||||
{[5, 4, 3, 2, 1, 0].map((index) => {
|
{[5, 4, 3, 2, 1, 0].map((index) => {
|
||||||
const result = yaoResults[index];
|
const result = yaoResults[index];
|
||||||
const active = index === progress && progress < TOTAL_YAO_COUNT;
|
const active = index === progress && progress < TOTAL_YAO_COUNT;
|
||||||
|
const confirmed = !!result;
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={index}
|
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">
|
<div className="min-w-0 flex-1">
|
||||||
<YaoGlyph type={result} active={active} />
|
<YaoGlyph type={result} confirmed={confirmed} />
|
||||||
</div>
|
</div>
|
||||||
<span className={`w-20 text-right text-[13px] font-bold ${result ? 'text-violet-700' : 'text-slate-400'}`}>
|
<span className="w-6 text-center">
|
||||||
{result ? text.yaoTypeNames[result] : text.pending}
|
<YaoChangeMark type={result} />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -285,10 +294,6 @@ export default function ManualDivinationPage({ locale, divination: d }: Props) {
|
|||||||
</div>
|
</div>
|
||||||
</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
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={confirmYao}
|
onClick={confirmYao}
|
||||||
|
|||||||
Reference in New Issue
Block a user