diff --git a/activities/part-substitution-assessment/__tests__/activity.test.ts b/activities/part-substitution-assessment/__tests__/activity.test.ts index 75eac39..ca4c786 100644 --- a/activities/part-substitution-assessment/__tests__/activity.test.ts +++ b/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 用户:「这个界面都不再需要表格来展示数据了」;抽屉连表带功能一并退役)', () => { diff --git a/activities/part-substitution-assessment/src/manifest.ts b/activities/part-substitution-assessment/src/manifest.ts index f5c3075..5d771f8 100644 --- a/activities/part-substitution-assessment/src/manifest.ts +++ b/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', diff --git a/activities/part-substitution-assessment/src/views/report.ts b/activities/part-substitution-assessment/src/views/report.ts index a7ceedd..e382afe 100644 --- a/activities/part-substitution-assessment/src/views/report.ts +++ b/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 = `
+const DOSSIERS = `
点击翻面 · 核心参数点击翻回 · 主数据 diff --git a/activities/part-substitution-assessment/src/views/style.ts b/activities/part-substitution-assessment/src/views/style.ts index 9c4628b..3e4fd0e 100644 --- a/activities/part-substitution-assessment/src/views/style.ts +++ b/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}