Commit 2b8ba8b4 by luoqi

fix(web): 准星最边上那一列/那一行被裁 —— 放大挪到数字上,别放大按钮盒子

现场:「3 年以上」那列(最右)瞄中时,左两角完好,右两角只剩两个短横杠、
竖臂一条不见。

几何(格子 90px):

  渐变面为圆角带 overflow-hidden
  button 上的 scale(1.06) → 盒子右边缘外溢 2.70px
  准星 ::after inset:2px  → 右边缘落在「容器右 + 0.58px」
  ⇒ 竖臂(缩放后 1.59px 宽)被裁掉 0.58px,横臂同样丢掉外侧一截

修法:把 scale 从 button 挪到里面包数字的 span。
盒子回到格子内,准星竖臂稳稳落在 [右-3.5px, 右-2.0px];
而「数字微微抬起」这个原意一点没丢。

 别改成去掉 overflow-hidden:它是用来把**行/列高亮的白纱**裁进圆角的,
   去掉之后首行末行的纱会把四个圆角戳成方的。
 也别把 HARD 值往里缩(inset 调大):那会让准星整体离格子边更远,
   四个角互相靠拢,读起来就不是"框住这一格"了。

顺带:pacReticleLock 的 from 从 inset:-2px 改成 0 —— 负 inset = 画到格子外面,
最边上那一格的入场帧同样会被裁半个角。0 → 2px 一样读得出"从边缘咬进来"。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
parent 9f992b4f
...@@ -350,9 +350,12 @@ body { ...@@ -350,9 +350,12 @@ body {
/* 扣扳机的那一下:准星收紧,紧接着交给粒子(pacStreamFly) */ /* 扣扳机的那一下:准星收紧,紧接着交给粒子(pacStreamFly) */
.pac-reticle:active::after { inset: 3.5px; animation: none; transition: inset 0.08s ease-out; } .pac-reticle:active::after { inset: 3.5px; animation: none; transition: inset 0.08s ease-out; }
/* ⚠️ from 从 `-2px` 改成 `0`(2026-08-20):负 inset = 画到格子**外面**,
而渐变面带 `overflow-hidden` —— 最边上那一格的这一帧会被裁掉半个角。
0 → 2px 一样读得出"从边缘一口咬进来",且全程在盒子内。 */
@keyframes pacReticleLock { @keyframes pacReticleLock {
from { inset: -2px; opacity: 0; } from { inset: 0; opacity: 0; }
to { inset: 2px; opacity: 1; } to { inset: 2px; opacity: 1; }
} }
@keyframes pacReticleBreathe { @keyframes pacReticleBreathe {
0%, 100% { inset: 2px; opacity: 1; } 0%, 100% { inset: 2px; opacity: 1; }
......
...@@ -352,14 +352,28 @@ function MatrixRow({ ...@@ -352,14 +352,28 @@ function MatrixRow({
* 走 state 才能保证"点不动的格子不给准星"; * 走 state 才能保证"点不动的格子不给准星";
* ② 准星和十字必须**同生同灭**,同一个来源才不会一个亮一个不亮。 * ② 准星和十字必须**同生同灭**,同一个来源才不会一个亮一个不亮。
* ⚠️ 数字**微微抬起** —— `nums` 是等宽数字,放大不会把邻居推歪。 * ⚠️ 数字**微微抬起** —— `nums` 是等宽数字,放大不会把邻居推歪。
* 🔴 放大挂在**里面那个 span** 上,⛔ 不挂在 button 上(2026-08-20 修):
* 渐变面为了圆角带 `overflow-hidden`,button 一 `scale(1.06)`,
* **最边上那一列/那一行**的盒子就顶出容器约 3px —— 准星的竖臂
* (`inset:2px` 处、宽 1.5px)整条落在容器外被裁光,横臂只剩内侧一截。
* 现场是「3 年以上」那列:左两角完好,右两角只剩两个短横杠。
* ⛔ 别改成去掉 `overflow-hidden`:它是用来把**行/列高亮的白纱**裁进圆角的,
* 去掉之后首行末行的纱会把四个圆角戳成方的。
*/ */
isAimed && 'pac-reticle scale-[1.06] bg-white/12', isAimed && 'pac-reticle bg-white/12',
// 其余整片退让 —— ⚠️ 只压**不在十字上**的,压全部等于什么都没压 // 其余整片退让 —— ⚠️ 只压**不在十字上**的,压全部等于什么都没压
aim && !onCross && 'opacity-45', aim && !onCross && 'opacity-45',
isSelected && 'outline-solid outline-2 -outline-offset-2 outline-brand-600', isSelected && 'outline-solid outline-2 -outline-offset-2 outline-brand-600',
)} )}
> >
{n ? n.toLocaleString() : '—'} <span
className={cn(
'inline-block transition-transform duration-150',
isAimed && 'scale-[1.06]',
)}
>
{n ? n.toLocaleString() : '—'}
</span>
</button> </button>
); );
})} })}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment