فهرست منبع

用户令: ① 门户去掉「振动·CMS」「交付文档」「数据重算」导航项; ② 「振动 CMS」内容展示不出 => 改用 Shadow DOM 渲染(门户 CSS 隔离生效, 不再依赖 iframe/srcdoc/blob); 核验导航已无三项、shadowRoot 含门户 CSS/hero/.chips/实时值

zhouyang.xie 5 روز پیش
والد
کامیت
cf84ee8df0

+ 3 - 0
app_frontEnd/web/src/views/PortalView.vue

@@ -50,6 +50,9 @@ onMounted(async () => {
         '<a$1target="_top" href="/detail/v2#workbench"'],
     ]
     for (const [re, to] of TARGET_TOP) shell = shell.replace(re, to)
+    // ★P73 用户令:门户页去掉「振动·CMS」「交付文档」「数据重算」三个导航项(它们已迁入工作台)
+    const DROP_NAV = ['cms', 'documents', 'recalc']
+    for (const id of DROP_NAV) shell = shell.replace(new RegExp('<a[^>]*data-nav="' + id + '"[^>]*>[^<]*</a>', 'g'), '')
     info.value = t('pv.assembled', { n: ids.length })
     const blob = new Blob([shell], { type: 'text/html;charset=utf-8' })
     if (frame.value) frame.value.src = URL.createObjectURL(blob)

+ 14 - 10
app_frontEnd/web/src/views/Vibration.vue

@@ -8,7 +8,7 @@ import { vUnwrap } from '../lib/unwrap'
  */
 import {computed, ref, watch } from 'vue'
 import { t } from '../i18n/zh'
-import { FUS_SUBS, cmsHtml, eventsHtml, loopHtml, matrixHtml, portalCmsDoc, unitsHtml } from '../lib/vib'
+import { FUS_SUBS, cmsHtml, eventsHtml, loopHtml, matrixHtml, portalCmsHtml, unitsHtml } from '../lib/vib'
 import { PORTAL_CSS } from '../lib/portalSections'
 
 const props = defineProps<{ d: any; sub?: string | null; cms?: any }>()
@@ -30,17 +30,22 @@ watch(sub, async (s) => {
   }
 }, { immediate: true })
 const cmsData = computed<any>(() => props.cms ?? cmsLocal.value)
+/** ★P73 用 **Shadow DOM** 渲染门户「振动·CMS」:门户 CSS 在其中隔离生效,
+ *  不依赖 iframe/srcdoc/blob(前几种在真机上均可能有环境差异)。 */
+const cmsHost = ref<HTMLElement | null>(null)
+function renderCmsShadow(): void {
+  const host = cmsHost.value
+  if (!host) return
+  const root = host.shadowRoot || host.attachShadow({ mode: 'open' })
+  root.innerHTML = '<style>' + PORTAL_CSS + '</style>' + portalCmsHtml(props.d, cmsData.value)
+}
+watch([() => props.sub, () => props.d, cmsData], () => { if (props.sub === 'portal_cms') renderCmsShadow() },
+  { immediate: true, flush: 'post' })
+
 const F = computed<any>(() => props.d?.fus)
 
 /** ★P71 门户「振动·CMS」整页文档(同源 iframe)—— 用门户 CSS 渲染,chip 为按窗实时值 */
 const portalCmsSrc = computed<string>(() => portalCmsDoc(props.d, cmsData.value, PORTAL_CSS))
-/** ★P72 用 **Blob URL** 装进 iframe(与门户整页同一手法;真机上比 srcdoc 可靠)。 */
-const cmsBlobUrl = ref<string>('')
-watch(portalCmsSrc, (html) => {
-  const old = cmsBlobUrl.value
-  cmsBlobUrl.value = URL.createObjectURL(new Blob([html], { type: 'text/html;charset=utf-8' }))
-  if (old) { try { URL.revokeObjectURL(old) } catch { /* ignore */ } }
-}, { immediate: true })
 
 const bodyHtml = computed(() => {
   const f = F.value
@@ -62,8 +67,7 @@ const bodyHtml = computed(() => {
       <button v-for="s in FUS_SUBS" :key="s" class="pill" :class="{ on: s === sub }" :data-fsub="s"
               @click="emit('sub', s)">{{ t('fus.sub.' + s) }}</button>
     </div>
-    <iframe v-if="sub === 'portal_cms'" class="portal-cms-frame" title="振动 · CMS"
-            :src="cmsBlobUrl" style="width:100%;height:1080px;border:0;display:block"></iframe>
+    <div v-if="sub === 'portal_cms'" ref="cmsHost" class="portal-cms-shadow" data-fsub-host="portal_cms"></div>
     <div v-else class="unwrap-host" v-html="bodyHtml"></div>
   </section>
 </template>

+ 36 - 0
app_frontEnd/web/tools/_check_shadow.mjs

@@ -0,0 +1,36 @@
+
+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')
+// ① 门户导航
+let shell = readFileSync(dist + '/portal/shell.html', 'utf8')
+const ids = Array.from(shell.matchAll(/<!--@TEMPLATE:([^>]+?)-->/g)).map((m) => m[1])
+for (const id of ids) shell = shell.replace('<!--@TEMPLATE:' + id + '-->', '<template id="' + id + '"></template>')
+for (const id2 of ['cms', 'documents', 'recalc']) shell = shell.replace(new RegExp('<a[^>]*data-nav="' + id2 + '"[^>]*>[^<]*</a>', 'g'), '')
+console.log('NAV_CMS ' + /data-nav="cms"/.test(shell) + ' NAV_DOCS ' + /data-nav="documents"/.test(shell) + ' NAV_RECALC ' + /data-nav="recalc"/.test(shell))
+// ② 振动 CMS(Shadow DOM)
+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:portal_cms', 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, 140)) }
+for (let i = 0; i < 20; i++) { await new Promise((r) => setTimeout(r, 400)); if (w.document.querySelector('[data-fsub-host]')) break }
+const host = w.document.querySelector('[data-fsub-host]')
+const sr = host && host.shadowRoot
+const inner = sr ? sr.innerHTML : ''
+console.log('HOST ' + (host ? 'Y' : 'N') + ' SHADOW ' + (sr ? 'Y' : 'N') + ' LEN ' + inner.length)
+console.log('HAS_PORTAL_CSS ' + /--ground|\.hero/.test(inner))
+console.log('HAS_HERO_TITLE ' + /振动与 SCADA 联合分析/.test(inner))
+console.log('HAS_CHIPS ' + /<div class="chips">/.test(inner) + ' CHIP_COUNT ' + (inner.match(/class="chip/g) || []).length)
+console.log('HAS_LIVE_WIN ' + /当前时间窗 · /.test(inner))

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 0 - 0
release/web/assets/index--i9X4JtS.css


تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 0 - 0
release/web/assets/index-CYRD7G4g.js


+ 2 - 2
release/web/index.html

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

برخی فایل ها در این مقایسه diff نمایش داده نمی شوند زیرا تعداد فایل ها بسیار زیاد است