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

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