fix: 票券打孔改 mask 差集——两端 1/4 圆硬停剪切，孔真穿透露底、描边真断开；孔心对齐撕线 172.75px

apps/design-lab/e2e/pages.spec.ts

@@ -140,13 +140,19 @@ test.describe('票券规格契约', () => {
     expect(s.headBg).not.toBe('rgba(0, 0, 0, 0)')
   })
 
-  test('打孔伪元素在位（完成票 ×2 孔）', async ({ page }) => {
+  test('打孔差集在位（mask 两端 1/4 圆，完成票）', async ({ page }) => {
-    const holes = await page.locator('.ticket-pk').first().evaluate((el) => {
+    const mask = await page.locator('.ticket-pk').first().evaluate((el) => {
-      const b = getComputedStyle(el, '::before')
+      const cs = getComputedStyle(el)
-      const a = getComputedStyle(el, '::after')
+      return cs.maskImage || cs.webkitMaskImage || 'none'
-      return [b.content, a.content].filter((c) => c !== 'none').length
     })
-    expect(holes).toBe(2)
+    expect(mask).toContain('radial-gradient')
+    expect(mask.split('radial-gradient').length - 1).toBe(2) // 上下各一孔
+    // 未开始票不带 mask
+    const plain = await page.evaluate(() => {
+      const t = [...document.querySelectorAll('div')].filter((d) => String(d.className).includes('w-[216px]') && !String(d.className).includes('ticket-pk'))[0]
+      return t ? getComputedStyle(t).maskImage : 'none'
+    })
+    expect(plain === 'none' || plain === '').toBeTruthy()
   })
 
   test('撕线：完成=虚线、未开始=实线', async ({ page }) => {

apps/design-lab/src/styles/tokens.css

@@ -32,21 +32,17 @@
   filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9));
 }
 
-/* 票券打孔：⌀14 圆跨边，被 overflow-hidden 裁成半圆缺口（完成票专用） */
+/* 票券打孔：两端各以 1/4 圆做差集（完成票专用）。
-.ticket-pk::before,
+ * mask 硬停只做形状剪切（非色彩渐变）：孔真正穿透票体——露出页面底色，
-.ticket-pk::after {
+ * 描边与硬投影在孔处真实断开，无需伪元素盖色近似。 */
-  content: '';
+.ticket-pk {
-  position: absolute;
+  --hole-x: 172.75px; /* 撕线中心：216 − 右描边 2 − stub 42 + 撕线半宽 */
-  left: 160px;
+  -webkit-mask-image:
-  width: 14px;
+    radial-gradient(circle 7px at var(--hole-x) 0, transparent 6.5px, #000 7px),
-  height: 14px;
+    radial-gradient(circle 7px at var(--hole-x) 100%, transparent 6.5px, #000 7px);
-  border-radius: 50%;
+  -webkit-mask-composite: source-in;
-  background: var(--color-paper);
+  mask-image:
-  border: 2px solid var(--color-ink);
+    radial-gradient(circle 7px at var(--hole-x) 0, transparent 6.5px, #000 7px),
-}
+    radial-gradient(circle 7px at var(--hole-x) 100%, transparent 6.5px, #000 7px);
-.ticket-pk::before {
+  mask-composite: intersect;
-  top: -10px;
-}
-.ticket-pk::after {
-  bottom: -10px;
 }