Forráskód Böngészése

修「振动融合分析」点子选项卡页面不变: v-unwrap 原先只在 mounted 解包一次, 之后 v-html 更新写进已脱离文档的宿主 => 改成挂载时留注释锚点 + updated 时把新子节点同步到锚点前(保持无宿主 DOM 口径)

zhouyang.xie 6 napja
szülő
commit
c9b2d40b47

+ 25 - 1
app_frontEnd/web/src/lib/unwrap.ts

@@ -5,18 +5,42 @@
  * 而旧页是把同一段 HTML **直接注入**页签容器(无宿主)⇒ 结构/样式计数不一致。
  * 该指令在挂载后解包,使**运行时 DOM 与 v2.9.2 完全一致**。
  *
+ * ★P64 修(实逮):原先只在 `mounted` 解包一次 ⇒ 宿主被移出文档后,Vue 后续 `v-html` 的更新
+ * 全部写进**已脱离文档的宿主** ⇒ 表现为"点子选项卡页面不变"(振动融合分析的 5 个子视图)。
+ * 现在挂载时先插入**注释锚点**(子节点移到锚点前、宿主移出文档),并在 `updated` 时把宿主
+ * 新写入的子节点再同步到锚点之前 ⇒ 既保持"无宿主"的 DOM 口径,又能随数据/子视图变化更新。
+ *
  * 注:SSR 不执行指令,故结构对拍工具(`tools/struct_diff*.mjs`)对带 `unwrap-host` 类的
  * 元素做等价**解包**后再比 —— 判据与运行时口径一致。
  */
 import type { Directive } from 'vue'
 
+const ANCHORS = new WeakMap<Element, Comment>()
+
 function unwrap(el: Element): void {
   const parent = el.parentNode
   if (!parent) return
-  while (el.firstChild) parent.insertBefore(el.firstChild, el)
+  const anchor = document.createComment('v-unwrap')
+  ANCHORS.set(el, anchor)
+  parent.insertBefore(anchor, el)
+  while (el.firstChild) parent.insertBefore(el.firstChild, anchor)
   parent.removeChild(el)
 }
 
+/** 把宿主当前(Vue 刚写入的)子节点移到锚点之前。 */
+function resync(el: Element): void {
+  const anchor = ANCHORS.get(el)
+  const parent = anchor && anchor.parentNode
+  if (!anchor || !parent) return
+  while (el.firstChild) parent.insertBefore(el.firstChild, anchor)
+}
+
 export const vUnwrap: Directive<HTMLElement> = {
   mounted: (el) => unwrap(el),
+  updated: (el) => resync(el),
+  beforeUnmount: (el) => {
+    const anchor = ANCHORS.get(el)
+    if (anchor && anchor.parentNode) anchor.parentNode.removeChild(anchor)
+    ANCHORS.delete(el)
+  },
 }

+ 29 - 0
app_frontEnd/web/tools/_check_fus_click.mjs

@@ -0,0 +1,29 @@
+
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { dirname, resolve } from 'node:path'
+import { JSDOM, VirtualConsole } from 'jsdom'
+const HERE = dirname(fileURLToPath(import.meta.url))
+const dist = resolve(HERE, '../../../release/web')
+const idx = readFileSync(dist + '/index.html', 'utf8')
+const jsFile = (idx.match(/src="([^"]+\.js)"/) || [])[1].replace(/^.*\//, '')
+const cssFile = (idx.match(/href="([^"]+\.css)"/) || [])[1].replace(/^.*\//, '')
+const code = readFileSync(dist + '/assets/' + jsFile, 'utf8')
+const css = readFileSync(dist + '/assets/' + cssFile, 'utf8')
+const fleet = readFileSync(resolve(HERE, '_fleet_fixture.json'), 'utf8')
+const vib = readFileSync(resolve(HERE, '_vibcms_fixture.json'), 'utf8')
+const dom = new JSDOM(idx.replace('</head>', '<style>' + css + '</style></head>'),
+  { url: 'http://127.0.0.1:28084/detail/v2#tab=vibration', runScripts: 'outside-only', pretendToBeVisual: true, virtualConsole: new VirtualConsole() })
+const w = dom.window
+w.fetch = async (u) => { const s = String(u); const body = /fleet/.test(s) ? fleet : (/vibcms/.test(s) ? vib : '{}')
+  return { ok: true, status: 200, json: async () => JSON.parse(body), text: async () => body } }
+try { w.eval(code) } catch (e) { console.log('EVAL_ERR ' + String(e).slice(0, 120)) }
+for (let i = 0; i < 24; i++) { await new Promise((r) => setTimeout(r, 400)); if (w.document.querySelector('[data-fsub]')) break }
+const sig = () => { const r = w.document.querySelector('#root') || w.document.body
+  return r.querySelectorAll('*').length + '|' + (r.textContent || '').replace(/\s+/g, '').slice(220, 300) }
+for (const s of ['matrix', 'loop', 'units', 'events', 'cms']) {
+  const pill = w.document.querySelector(`[data-fsub="${s}"]`)
+  if (pill) pill.dispatchEvent(new w.MouseEvent('click', { bubbles: true }))
+  await new Promise((r) => setTimeout(r, 1800))
+  console.log(s + ' => 元素/文本指纹 ' + sig())
+}

A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 0 - 0
release/web/assets/index-Cr3KcuZc.js


+ 1 - 1
release/web/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>观澜 · 风电数据分析与决策支持</title>
-  <script type="module" crossorigin src="/web/assets/index-Bw-hblff.js"></script>
+  <script type="module" crossorigin src="/web/assets/index-Cr3KcuZc.js"></script>
   <link rel="stylesheet" crossorigin href="/web/assets/index-DFl-J_Hd.css">
 </head>
 <body>

Nem az összes módosított fájl került megjelenítésre, mert túl sok fájl változott