guanlan-src/app_frontEnd/web/src/views/Vibration.vue

<script setup lang="ts">
import { vUnwrap } from '../lib/unwrap'
/**
 * 振动融合分析（vibration）——对应重构前 `app.js` 的 `vibration()`。
 *
 * 该页签内部有 **5 个子视图**（旧 `FUS.sub`）：matrix（判级矩阵，默认）/ loop / units / events / cms。
 * 本版只迁 **matrix**，其余如实标"迁移中"；5 个子视图全过对拍后才列入 DONE。
 */
import {computed, ref, watch } from 'vue'
import { t } from '../i18n/zh'
import { FUS_SUBS, cmsHtml, eventsHtml, loopHtml, matrixHtml, portalCmsHtml, unitsHtml } from '../lib/vib'

const props = defineProps<{ d: any; sub?: string | null; cms?: any }>()
const emit = defineEmits<{ (e: 'sub', id: string): void }>()

const sub = computed(() => props.sub || 'matrix')
/** ★P63 照旧页 app.js:980 —— 选中 cms 子视图时**按需异步取** `/api/vibcms`（prop 优先，用于对拍同源）。
 *  实逮：此前应用从不取该接口 ⇒ 真实打开「振动分析」时无数据（对拍工具喂数据把它掩盖了）。 */
const cmsLocal = ref<any>(null)
const cmsErr = ref<string>('')
watch(sub, async (s) => {
  if ((s === 'cms' || s === 'portal_cms') && !cmsLocal.value && !props.cms && !cmsErr.value) {
    try {
      const r = await fetch('/api/vibcms')
      cmsLocal.value = await r.json()
    } catch (e) {
      cmsErr.value = String((e as any)?.message || e)
    }
  }
}, { immediate: true })
const cmsData = computed<any>(() => props.cms ?? cmsLocal.value)
const F = computed<any>(() => props.d?.fus)

const bodyHtml = computed(() => {
  const f = F.value
  if (!f || f.err) return `<section><div class="panel"><p>${t('fus.unavailable', { e: String((f && f.err) || '') })}</p></div></section>`
  if (sub.value === 'matrix') return matrixHtml(f)
  if (sub.value === 'loop') return loopHtml(f)
  if (sub.value === 'units') return unitsHtml(f, null)
  if (sub.value === 'events') return eventsHtml(f, props.d)
  if (sub.value === 'cms') return cmsHtml(cmsData.value)
  if (sub.value === 'portal_cms') return portalCmsHtml(props.d, cmsData.value)   // ★P65 门户「振动·CMS」（受时间窗影响）
  return `<div class="panel mb"><p class="small muted">子视图「${t('fus.sub.' + sub.value)}」尚未迁移到 Vue（迁移中）。</p></div>`
})
</script>

<template>
  <section>
    <div class="eyebrow">{{ t('fus.eyebrow') }}</div>
    <div style="display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap">
      <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>
    <div class="unwrap-host" v-html="bodyHtml"></div>
  </section>
</template>