修「振动 CMS」看着没内容: 影子树内门户 CSS 的 `:root{}` 匹配不到元素 => 变量(--ground/--ink)全失效, 深色底与文字色丢失; 改为 :host 并补宿主背景/文字色; 核验 :host 生效/无裸 :root/变量在/文本可见

app_frontEnd/web/src/views/Vibration.vue

@@ -37,7 +37,11 @@ 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)
+  // ★P74 门户 CSS 把变量定义在 `:root{}`，而影子树里 `:root` 匹配不到任何元素 ⇒ 变量全失效
+  //      （深色底/文字色丢失 ⇒ 白字白底，看着"没内容"）。改为 `:host`，并在宿主上落门户的底色与文字色。
+  const css = PORTAL_CSS.replace(/:root/g, ':host')
+  const hostBg = ":host{display:block;background:var(--ground,#070C14);color:var(--ink,#E8EBEF);}"
+  root.innerHTML = '<style>' + css + hostBg + '</style>' + portalCmsHtml(props.d, cmsData.value)
 }
 watch([() => props.sub, () => props.d, cmsData], () => { if (props.sub === 'portal_cms') renderCmsShadow() },
   { immediate: true, flush: 'post' })

app_frontEnd/web/tools/_check_shadow2.mjs

@@ -0,0 +1,30 @@
+
+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: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('SHADOW ' + (sr ? 'Y' : 'N') + ' LEN ' + inner.length)
+console.log('HOST_SELECTOR ' + /:host\{/.test(inner))
+console.log('NO_BARE_ROOT ' + !/(^|[^:a-z-]):root\s*\{/.test(inner))
+console.log('HAS_VARS ' + /--ground:/.test(inner))
+console.log('HAS_HERO ' + /振动与 SCADA 联合分析/.test(inner))
+console.log('VISIBLE_TEXT ' + /需关注|当前时间窗/.test((sr ? sr.textContent : '') || ''))

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-CYRD7G4g.js"></script>
+  <script type="module" crossorigin src="/web/assets/index-B1NQBBlz.js"></script>
   <link rel="stylesheet" crossorigin href="/web/assets/index--i9X4JtS.css">
 </head>
 <body>