fix(w05): 互换动画提到与卡同级 —— 三列网格中间留实体动画道,卡片相应收窄

2026-08-31 用户:「不要把这个动画做到背景板上,会被卡片覆盖;和卡片做到一级,
可以压缩一点卡片的大小」—— 上一稿的对向穿行点走在卡后,只在缝里闪现,基本看不见。
.dossiers 改三列网格(minmax(0,1fr) 76px minmax(0,1fr)):卡片各占左右列自然收窄,
中间 76px 是**谁也盖不住的实体动画道** —— ⇄ 徽居中轻呼吸,两枚信号点绕徽轨道对转
(此上彼下绕圈 = 两颗料换位),底下的虚线总线在道里露出来把两张卡接起来。
窄屏(<620px)卡片竖排,动画道随之收起。浏览器两帧相位实证在转;
105 包内 + 2531 全仓;2.12.1 装库核过(orbit/lane)。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LKMZDwMbyKzjw6Hembwvet

activities/part-substitution-assessment/__tests__/activity.test.ts

@@ -628,12 +628,13 @@ describe('件① 评估输入补全', () => {
     expect(html).toContain('.dossier:has(.pback.on) .flip-in{transform:rotateY(180deg)}');
     /* 悬浮提示丸:看得出点击可翻 */
     expect(html).toContain('点击翻面');
-    /* 两卡之间的「可替换」动画:对向双信号点 + 中央 ⇄ 徽(2026-08-31 用户定) */
+    /* 「可替换」动画与卡同级(2026-08-31 第二稿:不做背景板 —— 会被卡盖住):
+       三列网格中间留实体动画道,⇄ 徽 + 双点轨道对转 */
     expect(html).toContain('class="swapfx"');
-    expect(html).toContain('class="sw-dot sw-ltr"');
-    expect(html).toContain('class="sw-dot sw-rtl"');
-    expect(html).toContain('@keyframes swltr');
-    expect(html).toContain('@keyframes swrtl');
+    expect(html).toContain('class="sw-orbit"');
+    expect(html).toContain('@keyframes sworbit');
+    expect(html).toContain('grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr)');
+    expect(html).toContain('.dossiers > .dossier:nth-of-type(even){grid-column:3}');
   });
 
   it('整件零表格(2026-08-31 用户:「这个界面都不再需要表格来展示数据了」;抽屉连表带功能一并退役)', () => {

activities/part-substitution-assessment/src/manifest.ts

@@ -54,7 +54,7 @@ export const manifest: ActivityManifest = {
     activityId: ACTIVITY_ID,
     name: 'ACT-WORK-05 · 差异评估',
     /* 重写不是改 —— 同版重装是 no-op(静默丢失,踩过) */
-    packageVersion: '2.12.0',
+    packageVersion: '2.12.1',
     category: '需求分析与方案匹配',
     sdkVersion: '0.1.0-m5',
     checksum: 'dev-checksum-part-substitution-assessment',

activities/part-substitution-assessment/src/views/report.ts

@@ -208,7 +208,7 @@ ${badgeCss('.rl', [
  * data-edit 祖先」,packages/ui-kit/__tests__/view-container-multihost.test.ts 钉着);
  * 开哪面的编辑,卡就停在哪面(主数据编辑锁正面、参数编辑自动翻背面,CSS 兜底)。
  */
-const DOSSIERS = `<section class="board"><span class="swapfx" aria-hidden="true"><i class="sw-dot sw-ltr"></i><i class="sw-dot sw-rtl"></i><svg class="sw-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/></svg></span><article class="dossiers" data-rows="mine:parts.profile" data-edit="parts.profile"><section class="dossier">
+const DOSSIERS = `<section class="board"><span class="swapfx" aria-hidden="true"><span class="sw-orbit"><i class="sw-dot sw-d1"></i><i class="sw-dot sw-d2"></i></span><svg class="sw-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/></svg></span><article class="dossiers" data-rows="mine:parts.profile" data-edit="parts.profile"><section class="dossier">
   <label class="flip-hit"><input class="flip-tg" type="checkbox" aria-label="翻转这张卡"></label>
   <span class="flip-cue"><i class="cue-front">点击翻面 · 核心参数</i><i class="cue-back">点击翻回 · 主数据</i></span>
   <span class="fabs">

activities/part-substitution-assessment/src/views/style.ts

@@ -269,18 +269,23 @@ table.on tr.jc-row-static td{background:var(--acc-wash);border-top:1px dashed va
     repeating-linear-gradient(90deg, rgba(46,107,255,.045) 0 1px, transparent 1px 26px),
     linear-gradient(158deg, var(--acc-wash) 0%, #fff 62%, var(--acc-wash) 100%)}
 .board::before{content:"";position:absolute;left:4%;right:4%;top:50%;border-top:2px dashed var(--acc-line)}
-/* 「可替换」动画(2026-08-31 用户定:两卡之间要做出可互换的效果)——
-   两枚信号点沿总线**对向穿行**(左料换到右、右料换到左),中央一枚 ⇄ 徽轻呼吸;
-   点走在卡片背后(z 序),只在两卡之间的缝里现身 —— 像两颗料在板上换位。 */
-.swapfx{position:absolute;left:0;right:0;top:50%;height:0;z-index:0;pointer-events:none;--swx:min(26vw,240px)}
-.sw-ic{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:34px;height:34px;padding:7px;box-sizing:border-box;color:var(--acc);background:#fff;border:1px solid var(--acc-line);border-radius:999px;box-shadow:0 4px 12px rgba(18,38,63,.14);z-index:2;animation:swbreathe 2.8s ease-in-out infinite}
-.sw-dot{position:absolute;left:50%;top:-13px;width:8px;height:8px;margin-left:-4px;border-radius:999px;background:var(--acc);box-shadow:0 0 8px 2px var(--acc-soft)}
-.sw-ltr{animation:swltr 3.2s linear infinite}
-.sw-rtl{top:7px;animation:swrtl 3.2s linear infinite}
-@keyframes swltr{0%{transform:translateX(calc(-1 * var(--swx)));opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(var(--swx));opacity:0}}
-@keyframes swrtl{0%{transform:translateX(var(--swx));opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(calc(-1 * var(--swx)));opacity:0}}
+/* 「可替换」动画(2026-08-31 用户第二稿:「不要做到背景板上,背景板会被卡片覆盖;
+   和卡片做到一级,可以压缩一点卡片的大小」)—— .dossiers 改三列网格,中间留一条
+   **实体动画道**(卡片各占左右列、相应收窄,谁也盖不住它):中央 ⇄ 徽轻呼吸,
+   两枚信号点绕徽**轨道对转**(此上彼下地绕圈 = 两颗料换位),底下横穿的虚线总线
+   在道里露出来把两张卡接起来。 */
+.swapfx{position:absolute;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);z-index:1;pointer-events:none}
+.sw-ic{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;padding:8px;box-sizing:border-box;color:var(--acc);background:#fff;border:1px solid var(--acc-line);border-radius:999px;box-shadow:0 4px 12px rgba(18,38,63,.16);animation:swbreathe 2.8s ease-in-out infinite}
+.sw-orbit{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;animation:sworbit 4.5s linear infinite}
+.sw-dot{position:absolute;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:999px;background:var(--acc);box-shadow:0 0 8px 2px var(--acc-soft)}
+.sw-d1{top:-4px}
+.sw-d2{bottom:-4px}
+@keyframes sworbit{to{transform:rotate(360deg)}}
 @keyframes swbreathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}
-.dossiers{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px}
+/* 三列网格:左右两列给卡,中间 76px 是动画道 —— 与卡同级的真实空间,不被覆盖 */
+.dossiers{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);row-gap:16px}
+.dossiers > .dossier:nth-of-type(odd){grid-column:1}
+.dossiers > .dossier:nth-of-type(even){grid-column:3}
 .dossier{display:flex;flex-direction:column;gap:11px;background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:15px 16px 14px;box-shadow:0 8px 22px rgba(18,38,63,.09);transition:box-shadow .18s,transform .18s}
 .dossier:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(18,38,63,.13)}
 .dz-top{display:flex;align-items:center;gap:12px}
@@ -439,6 +444,8 @@ html.editable .dossier:not(.on):not(:has(.pback.on)):has(.flip-tg:checked) .pen-
   .card-head{padding:16px 14px 18px}
   .dz-grid{grid-template-columns:1fr}
   .swapfx{display:none}
+  .dossiers{grid-template-columns:1fr}
+  .dossiers > .dossier:nth-of-type(odd),.dossiers > .dossier:nth-of-type(even){grid-column:1}
   .pback{grid-template-columns:1fr}
   .ftiles{grid-template-columns:1fr}
   .card-bd{padding:16px 14px 6px}