agentworkshop 0.7.70 → 0.8.0

package/app/pages/ontology/index.vue

@@ -0,0 +1,779 @@
+<script setup lang="ts">
+/**
+ * 本体模型管理台(/ontology)—— 工业本体与语义资产的构建、审核、发布与编译预览。
+ *
+ * 三块职责:
+ *  1) 资产面:实体/关系/约束规则/语义绑定(本体 ↔ 数采/数控/配方参数)的可读可编辑视图;
+ *  2) 治理面:规则生命周期推进(proposed→reviewed→validated→approved_for_control)、
+ *     第二人批准、版本冻结与退役(发布仅 admin);
+ *  3) 解释面:编译预览四类产物 + Rule Trace,回答「这条建议为什么受此限制」。
+ *
+ * 设计纪律:页面不自己发明约束语义 —— 所有校验/编译/审批判定由服务端裁决,
+ * 前端只呈现结果与可行动原因(409/422 原样展示)。
+ */
+import { computed, onMounted, ref } from 'vue'
+import { message } from 'ant-design-vue'
+import { apiErrorMessage } from '@/app/utils/api-error'
+import { useUserStore } from '@/app/stores/workshop/user'
+import { ontologyApi } from './api'
+import type {
+  CompileDto, DraftDetailDto, DraftSummary, IssueDto, OverviewDto,
+  VersionDiffDto, VersionDto,
+} from './types'
+
+const { t } = useI18n()
+const userStore = useUserStore()
+
+type TabKey = 'overview' | 'graph' | 'rules' | 'bindings' | 'versions' | 'compile'
+const tab = ref<TabKey>('overview')
+const tabs: TabKey[] = ['overview', 'graph', 'rules', 'bindings', 'versions', 'compile']
+
+const loading = ref(false)
+const busy = ref(false)
+const overview = ref<OverviewDto>({ ontologies: [], drafts: [] })
+const draftId = ref('')
+const detail = ref<DraftDetailDto | null>(null)
+const versions = ref<VersionDto[]>([])
+const diff = ref<VersionDiffDto | null>(null)
+const preview = ref<CompileDto | null>(null)
+const diffFrom = ref<number | undefined>(undefined)
+const diffTo = ref<number | undefined>(undefined)
+
+const isAdmin = computed(() => userStore.isAdmin)
+const doc = computed(() => detail.value?.doc ?? null)
+const issues = computed<IssueDto[]>(() => detail.value?.validation.issues ?? [])
+const errors = computed(() => issues.value.filter(i => i.severity === 'error'))
+const bindingFailures = computed(() => detail.value?.bindings.failures ?? [])
+const draftOptions = computed(() => overview.value.drafts.map(d => ({
+  value: d.id,
+  label: `${d.ontologyId} · rev ${d.rev}${d.baseVersion ? ` · 基线 v${d.baseVersion}` : ''}`,
+})))
+const versionOptions = computed(() => versions.value.map(v => ({ value: v.version, label: `v${v.version}(${v.status})` })))
+
+const entityColumns = [
+  { title: 'key', dataIndex: 'key', key: 'key', width: 180 },
+  { title: t('ontology.col.kind'), dataIndex: 'kind', key: 'kind', width: 140 },
+  { title: t('ontology.col.name'), dataIndex: 'name', key: 'name' },
+  { title: t('ontology.col.role'), dataIndex: 'role', key: 'role', width: 110 },
+  { title: t('ontology.col.unit'), dataIndex: 'unit', key: 'unit', width: 90 },
+]
+const relationColumns = [
+  { title: 'id', dataIndex: 'id', key: 'id', width: 180 },
+  { title: t('ontology.col.predicate'), dataIndex: 'kind', key: 'kind', width: 130 },
+  { title: 'src → dst', key: 'edge', width: 300 },
+  { title: t('ontology.col.evidenceTier'), key: 'tier', width: 170 },
+]
+const ruleColumns = [
+  { title: 'id', dataIndex: 'id', key: 'id', width: 160 },
+  { title: t('ontology.col.ruleKind'), dataIndex: 'kind', key: 'kind', width: 140 },
+  { title: t('ontology.col.level'), dataIndex: 'constraintLevel', key: 'level', width: 90 },
+  { title: t('ontology.col.status'), dataIndex: 'status', key: 'status', width: 170 },
+  { title: t('ontology.col.evidence'), key: 'evidence', width: 200 },
+  { title: t('ontology.col.action'), key: 'action', width: 260 },
+]
+const bindingColumns = [
+  { title: 'id', dataIndex: 'id', key: 'id', width: 150 },
+  { title: t('ontology.col.entity'), dataIndex: 'entityKey', key: 'entityKey', width: 180 },
+  { title: t('ontology.col.target'), key: 'target' },
+  { title: t('ontology.col.direction'), dataIndex: 'direction', key: 'direction', width: 110 },
+  { title: t('ontology.col.unitPair'), key: 'unitPair', width: 160 },
+]
+const versionColumns = [
+  { title: t('ontology.col.version'), dataIndex: 'version', key: 'version', width: 90 },
+  { title: t('ontology.col.status'), dataIndex: 'status', key: 'status', width: 110 },
+  { title: 'hash', dataIndex: 'contentHash', key: 'contentHash', width: 220 },
+  { title: t('ontology.col.line'), dataIndex: 'lineId', key: 'lineId', width: 140 },
+  { title: t('ontology.col.parent'), dataIndex: 'parentVersion', key: 'parentVersion', width: 90 },
+  { title: t('ontology.col.createdAt'), dataIndex: 'createdAt', key: 'createdAt' },
+]
+const traceColumns = [
+  { title: 'ruleId', dataIndex: 'ruleId', key: 'ruleId', width: 150 },
+  { title: t('ontology.col.decision'), dataIndex: 'decision', key: 'decision', width: 110 },
+  { title: t('ontology.col.code'), dataIndex: 'decisionCode', key: 'decisionCode', width: 220 },
+  { title: t('ontology.col.evidence'), dataIndex: 'evidenceLevel', key: 'evidenceLevel', width: 160 },
+  { title: t('ontology.col.message'), dataIndex: 'message', key: 'message' },
+]
+
+function statusColor(status: string): string {
+  if (status === 'approved_for_control') return 'green'
+  if (status === 'validated') return 'blue'
+  if (status === 'reviewed') return 'cyan'
+  if (status === 'deprecated') return 'red'
+  return 'default'
+}
+
+function tierColor(tier: string): string {
+  if (tier === 'validated_control') return 'green'
+  if (tier === 'observed_correlation') return 'blue'
+  return 'default'
+}
+
+async function loadOverview(): Promise<void> {
+  loading.value = true
+  try {
+    overview.value = await ontologyApi<OverviewDto>('')
+    if (!draftId.value && overview.value.drafts.length > 0) draftId.value = overview.value.drafts[0]!.id
+  }
+  catch (e) {
+    message.error(apiErrorMessage(e, t('ontology.loadFail')))
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+async function loadDraft(): Promise<void> {
+  if (!draftId.value) {
+    detail.value = null
+    return
+  }
+  try {
+    detail.value = await ontologyApi<DraftDetailDto>(`/drafts/${encodeURIComponent(draftId.value)}`)
+  }
+  catch (e) {
+    message.error(apiErrorMessage(e, t('ontology.loadDraftFail')))
+  }
+}
+
+async function loadVersions(ontologyId: string): Promise<void> {
+  if (!ontologyId) {
+    versions.value = []
+    return
+  }
+  try {
+    const res = await ontologyApi<{ versions: VersionDto[] }>(`/versions/${encodeURIComponent(ontologyId)}`)
+    versions.value = res.versions
+    if (versions.value.length >= 2) {
+      diffTo.value = versions.value[0]!.version
+      diffFrom.value = versions.value[1]!.version
+    }
+  }
+  catch (e) {
+    message.error(apiErrorMessage(e, t('ontology.loadVersionsFail')))
+  }
+}
+
+async function createDraft(): Promise<void> {
+  const ontologyId = window.prompt(t('ontology.prompt.ontologyId'))
+  if (!ontologyId) return
+  const lineId = window.prompt(t('ontology.prompt.lineId')) ?? ''
+  busy.value = true
+  try {
+    const res = await ontologyApi<{ draft: DraftSummary }>('', { method: 'POST', body: { ontologyId, lineId } })
+    message.success(t('ontology.draftCreated', { id: res.draft.id }))
+    draftId.value = res.draft.id
+    await loadOverview()
+    await loadDraft()
+  }
+  catch (e) {
+    message.error(apiErrorMessage(e, t('ontology.draftCreateFail')))
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+async function runValidate(): Promise<void> {
+  if (!draftId.value) return
+  busy.value = true
+  try {
+    const res = await ontologyApi<{ ok: boolean }>(`/drafts/${encodeURIComponent(draftId.value)}/validate`, { method: 'POST', body: {} })
+    message[res.ok ? 'success' : 'warning'](res.ok ? t('ontology.validateOk') : t('ontology.validateFail'))
+    await loadDraft()
+  }
+  catch (e) {
+    message.error(apiErrorMessage(e, t('ontology.validateFail')))
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+async function runCompile(): Promise<void> {
+  if (!draftId.value) return
+  busy.value = true
+  try {
+    preview.value = await ontologyApi<CompileDto>(`/drafts/${encodeURIComponent(draftId.value)}/compile`, { method: 'POST', body: {} })
+    tab.value = 'compile'
+    message.success(t('ontology.compileOk', { status: preview.value.status }))
+  }
+  catch (e) {
+    message.error(apiErrorMessage(e, t('ontology.compileFail')))
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+async function runPublish(): Promise<void> {
+  if (!draftId.value) return
+  busy.value = true
+  try {
+    const res = await ontologyApi<{ version: { version: number }, packHash: string }>(`/drafts/${encodeURIComponent(draftId.value)}/publish`, { method: 'POST', body: {} })
+    message.success(t('ontology.publishOk', { version: res.version.version }))
+    if (doc.value) await loadVersions(doc.value.name ? (overview.value.drafts.find(d => d.id === draftId.value)?.ontologyId ?? '') : '')
+    await loadDraft()
+  }
+  catch (e) {
+    message.error(apiErrorMessage(e, t('ontology.publishFail')))
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+async function transitionRule(ruleId: string, to: string): Promise<void> {
+  if (!draftId.value) return
+  busy.value = true
+  try {
+    await ontologyApi(`/drafts/${encodeURIComponent(draftId.value)}/rules/${encodeURIComponent(ruleId)}/transition`, {
+      method: 'POST', body: { to },
+    })
+    message.success(t('ontology.ruleTransitionOk', { rule: ruleId, to }))
+    await loadDraft()
+  }
+  catch (e) {
+    message.error(apiErrorMessage(e, t('ontology.ruleTransitionFail')))
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+async function requestApproval(ruleId: string): Promise<void> {
+  if (!draftId.value) return
+  busy.value = true
+  try {
+    const res = await ontologyApi<{ approvalId: string }>(`/drafts/${encodeURIComponent(draftId.value)}/rules/${encodeURIComponent(ruleId)}/approval`, { method: 'POST', body: {} })
+    message.success(t('ontology.approvalRequested', { id: res.approvalId }))
+    const approvalId = window.prompt(t('ontology.prompt.approvalId'), res.approvalId)
+    if (approvalId) {
+      await ontologyApi(`/drafts/${encodeURIComponent(draftId.value)}/rules/${encodeURIComponent(ruleId)}/approval-decision`, {
+        method: 'POST', body: { approvalId, approved: true },
+      })
+      message.success(t('ontology.approvalDecided'))
+      await loadDraft()
+    }
+  }
+  catch (e) {
+    message.error(apiErrorMessage(e, t('ontology.approvalFail')))
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+async function runCompare(): Promise<void> {
+  const ontologyId = overview.value.drafts.find(d => d.id === draftId.value)?.ontologyId ?? overview.value.ontologies[0]?.id ?? ''
+  if (!ontologyId || diffFrom.value === undefined || diffTo.value === undefined) return
+  try {
+    diff.value = await ontologyApi<VersionDiffDto>(`/versions/${encodeURIComponent(ontologyId)}/compare?from=${diffFrom.value}&to=${diffTo.value}`)
+  }
+  catch (e) {
+    message.error(apiErrorMessage(e, t('ontology.compareFail')))
+  }
+}
+
+async function retire(version: number): Promise<void> {
+  const ontologyId = overview.value.drafts.find(d => d.id === draftId.value)?.ontologyId ?? overview.value.ontologies[0]?.id ?? ''
+  if (!ontologyId) return
+  busy.value = true
+  try {
+    await ontologyApi(`/versions/${encodeURIComponent(ontologyId)}`, { method: 'POST', body: { version } })
+    message.success(t('ontology.retireOk', { version }))
+    await loadVersions(ontologyId)
+  }
+  catch (e) {
+    message.error(apiErrorMessage(e, t('ontology.retireFail')))
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+function currentOntologyId(): string {
+  return overview.value.drafts.find(d => d.id === draftId.value)?.ontologyId ?? overview.value.ontologies[0]?.id ?? ''
+}
+
+onMounted(async () => {
+  await loadOverview()
+  await loadDraft()
+  await loadVersions(currentOntologyId())
+})
+
+function onDraftChange(): void {
+  void loadDraft()
+  void loadVersions(currentOntologyId())
+}
+
+function issueColor(severity: string): string {
+  return severity === 'error' ? 'red' : 'orange'
+}
+
+function diffLabel(part: { added: string[], removed: string[], changed: string[] }): string {
+  return `+${part.added.length} / −${part.removed.length} / ±${part.changed.length}`
+}
+</script>
+
+<template>
+  <div class="ontology-page">
+    <header class="aw-page-head">
+      <div>
+        <p class="aw-kicker">
+          {{ t('ontology.kicker') }}
+        </p>
+        <h1>{{ t('ontology.title') }}</h1>
+        <p class="sub">
+          {{ t('ontology.subtitle') }}
+        </p>
+      </div>
+      <div class="head-actions">
+        <a-button
+          :loading="loading"
+          @click="loadOverview"
+        >
+          {{ t('ontology.refresh') }}
+        </a-button>
+        <a-button
+          type="primary"
+          :loading="busy"
+          @click="createDraft"
+        >
+          {{ t('ontology.newDraft') }}
+        </a-button>
+      </div>
+    </header>
+
+    <section class="toolbar">
+      <a-select
+        :value="draftId"
+        style="min-width: 320px"
+        :options="draftOptions"
+        :placeholder="t('ontology.pickDraft')"
+        show-search
+        @change="(v: unknown) => { draftId = String(v ?? ''); onDraftChange() }"
+      />
+      <a-button
+        :disabled="!draftId"
+        :loading="busy"
+        @click="runValidate"
+      >
+        {{ t('ontology.validate') }}
+      </a-button>
+      <a-button
+        :disabled="!draftId"
+        :loading="busy"
+        @click="runCompile"
+      >
+        {{ t('ontology.compile') }}
+      </a-button>
+      <a-button
+        v-if="isAdmin"
+        :disabled="!draftId || errors.length > 0 || bindingFailures.length > 0"
+        type="primary"
+        :loading="busy"
+        @click="runPublish"
+      >
+        {{ t('ontology.publish') }}
+      </a-button>
+      <span class="hint">{{ t('ontology.publishHint') }}</span>
+    </section>
+
+    <div class="tabs">
+      <button
+        v-for="key in tabs"
+        :key="key"
+        class="pill-btn"
+        :class="{ active: tab === key }"
+        @click="tab = key"
+      >
+        {{ t(`ontology.tab.${key}`) }}
+      </button>
+    </div>
+
+    <!-- 总览 -->
+    <section
+      v-if="tab === 'overview'"
+      class="panel"
+    >
+      <div class="stats">
+        <div class="stat">
+          <span>{{ t('ontology.stat.ontologies') }}</span>
+          <strong>{{ overview.ontologies.length }}</strong>
+        </div>
+        <div class="stat">
+          <span>{{ t('ontology.stat.drafts') }}</span>
+          <strong>{{ overview.drafts.length }}</strong>
+        </div>
+        <div class="stat">
+          <span>{{ t('ontology.stat.entities') }}</span>
+          <strong>{{ doc?.entities.length ?? 0 }}</strong>
+        </div>
+        <div class="stat">
+          <span>{{ t('ontology.stat.rules') }}</span>
+          <strong>{{ doc?.rules.length ?? 0 }}</strong>
+        </div>
+        <div class="stat">
+          <span>{{ t('ontology.stat.bindings') }}</span>
+          <strong>{{ doc?.bindings.length ?? 0 }}</strong>
+        </div>
+      </div>
+      <div class="two-col">
+        <div>
+          <h2>{{ t('ontology.section.ontologies') }}</h2>
+          <ul class="plain">
+            <li
+              v-for="o in overview.ontologies"
+              :key="o.id"
+            >
+              <strong>{{ o.id }}</strong>
+              <span>{{ o.lineId || t('ontology.global') }} · v{{ o.latest }} · {{ o.status }}</span>
+            </li>
+            <li
+              v-if="overview.ontologies.length === 0"
+              class="muted"
+            >
+              {{ t('ontology.empty.ontologies') }}
+            </li>
+          </ul>
+        </div>
+        <div>
+          <h2>{{ t('ontology.section.issues') }}</h2>
+          <ul class="plain">
+            <li
+              v-for="(issue, index) in issues.slice(0, 20)"
+              :key="`${issue.code}-${index}`"
+            >
+              <a-tag :color="issueColor(issue.severity)">
+                {{ issue.severity }}
+              </a-tag>
+              <strong>{{ issue.code }}</strong>
+              <span>{{ issue.message }}</span>
+              <em v-if="issue.hint">{{ issue.hint }}</em>
+            </li>
+            <li
+              v-if="issues.length === 0"
+              class="muted"
+            >
+              {{ t('ontology.empty.issues') }}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- 实体与关系 -->
+    <section
+      v-else-if="tab === 'graph'"
+      class="panel"
+    >
+      <h2>{{ t('ontology.section.entities') }}</h2>
+      <a-table
+        :columns="entityColumns"
+        :data-source="doc?.entities ?? []"
+        row-key="key"
+        size="small"
+        :pagination="{ pageSize: 12 }"
+      />
+      <h2>{{ t('ontology.section.relations') }}</h2>
+      <a-table
+        :columns="relationColumns"
+        :data-source="doc?.relations ?? []"
+        row-key="id"
+        size="small"
+        :pagination="{ pageSize: 12 }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'edge'">
+            <code>{{ record.srcKey }}</code> → <code>{{ record.dstKey }}</code>
+          </template>
+          <template v-else-if="column.key === 'tier'">
+            <a-tag :color="tierColor(record.properties?.evidenceTier)">
+              {{ record.properties?.evidenceTier }}
+            </a-tag>
+            <span
+              v-if="record.properties?.lagMs !== undefined"
+              class="muted"
+            >lag {{ record.properties.lagMs }}ms</span>
+          </template>
+        </template>
+      </a-table>
+    </section>
+
+    <!-- 约束规则 -->
+    <section
+      v-else-if="tab === 'rules'"
+      class="panel"
+    >
+      <a-table
+        :columns="ruleColumns"
+        :data-source="doc?.rules ?? []"
+        row-key="id"
+        size="small"
+        :pagination="{ pageSize: 10 }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'status'">
+            <a-tag :color="statusColor(record.status)">
+              {{ record.status }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'evidence'">
+            <span
+              v-for="(e, i) in record.evidence"
+              :key="i"
+            >
+              <a-tag :color="tierColor(e.level)">{{ e.level }}</a-tag>
+            </span>
+            <span
+              v-if="record.evidence.length === 0"
+              class="muted"
+            >{{ t('ontology.noEvidence') }}</span>
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <a-button
+              v-if="record.status === 'proposed'"
+              size="small"
+              :loading="busy"
+              @click="transitionRule(record.id, 'reviewed')"
+            >
+              {{ t('ontology.action.review') }}
+            </a-button>
+            <a-button
+              v-if="record.status === 'reviewed'"
+              size="small"
+              :loading="busy"
+              @click="transitionRule(record.id, 'validated')"
+            >
+              {{ t('ontology.action.validate') }}
+            </a-button>
+            <a-button
+              v-if="record.status === 'validated'"
+              size="small"
+              type="primary"
+              :loading="busy"
+              @click="requestApproval(record.id)"
+            >
+              {{ t('ontology.action.approve') }}
+            </a-button>
+          </template>
+        </template>
+      </a-table>
+    </section>
+
+    <!-- 语义绑定 -->
+    <section
+      v-else-if="tab === 'bindings'"
+      class="panel"
+    >
+      <a-table
+        :columns="bindingColumns"
+        :data-source="doc?.bindings ?? []"
+        row-key="id"
+        size="small"
+        :pagination="{ pageSize: 12 }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'target'">
+            <code>{{ record.platformKind }}:{{ record.platformId }}{{ record.targetSub ? `#${record.targetSub}` : '' }}</code>
+          </template>
+          <template v-else-if="column.key === 'unitPair'">
+            <span>{{ record.unitDeclared || '—' }} → {{ record.unitTarget || '—' }}</span>
+          </template>
+        </template>
+      </a-table>
+      <div
+        v-if="bindingFailures.length"
+        class="failures"
+      >
+        <h3>{{ t('ontology.section.bindingFailures') }}</h3>
+        <p
+          v-for="f in bindingFailures"
+          :key="f.bindingId"
+        >
+          <a-tag color="red">
+            {{ f.code }}
+          </a-tag>{{ f.message }}
+        </p>
+      </div>
+    </section>
+
+    <!-- 版本与发布 -->
+    <section
+      v-else-if="tab === 'versions'"
+      class="panel"
+    >
+      <a-table
+        :columns="versionColumns"
+        :data-source="versions"
+        row-key="version"
+        size="small"
+        :pagination="{ pageSize: 10 }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'status'">
+            <a-tag :color="record.status === 'published' ? 'green' : (record.status === 'retired' ? 'red' : 'default')">
+              {{ record.status }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'contentHash'">
+            <code>{{ String(record.contentHash).slice(0, 16) }}…</code>
+          </template>
+          <template v-else-if="column.key === 'createdAt'">
+            <span>{{ record.createdAt }}</span>
+            <a-button
+              v-if="isAdmin && record.status === 'published'"
+              size="small"
+              danger
+              class="retire"
+              :loading="busy"
+              @click="retire(record.version)"
+            >
+              {{ t('ontology.action.retire') }}
+            </a-button>
+          </template>
+        </template>
+      </a-table>
+      <div class="compare">
+        <a-select
+          v-model:value="diffFrom"
+          :options="versionOptions"
+          style="width: 140px"
+          :placeholder="t('ontology.from')"
+        />
+        <span>→</span>
+        <a-select
+          v-model:value="diffTo"
+          :options="versionOptions"
+          style="width: 140px"
+          :placeholder="t('ontology.to')"
+        />
+        <a-button
+          :loading="busy"
+          @click="runCompare"
+        >
+          {{ t('ontology.compare') }}
+        </a-button>
+      </div>
+      <div
+        v-if="diff"
+        class="diff"
+      >
+        <p><strong>v{{ diff.from }} → v{{ diff.to }}</strong></p>
+        <p>{{ t('ontology.diff.entities') }}: {{ diffLabel(diff.entities) }}</p>
+        <p>{{ t('ontology.diff.relations') }}: {{ diffLabel(diff.relations) }}</p>
+        <p>{{ t('ontology.diff.rules') }}: {{ diffLabel(diff.rules) }}</p>
+        <p>{{ t('ontology.diff.bindings') }}: {{ diffLabel(diff.bindings) }}</p>
+        <p v-if="diff.rules.changed.length">
+          <strong>{{ t('ontology.diff.rulesChanged') }}:</strong>
+          <code
+            v-for="id in diff.rules.changed"
+            :key="id"
+            class="chip"
+          >{{ id }}</code>
+        </p>
+      </div>
+    </section>
+
+    <!-- 编译预览 -->
+    <section
+      v-else
+      class="panel"
+    >
+      <div
+        v-if="!preview"
+        class="muted"
+      >
+        {{ t('ontology.compileEmpty') }}
+      </div>
+      <template v-else>
+        <div class="stats">
+          <div class="stat">
+            <span>{{ t('ontology.col.status') }}</span><strong>{{ preview.status }}</strong>
+          </div>
+          <div class="stat">
+            <span>compiled</span><strong>{{ preview.counts.compiled }}</strong>
+          </div>
+          <div class="stat">
+            <span>guard</span><strong>{{ preview.counts.guard }}</strong>
+          </div>
+          <div class="stat">
+            <span>explained</span><strong>{{ preview.counts.explained }}</strong>
+          </div>
+          <div class="stat">
+            <span>rejected</span><strong>{{ preview.counts.rejected }}</strong>
+          </div>
+        </div>
+        <p class="muted">
+          packHash <code>{{ preview.packHash.slice(0, 24) }}…</code>
+        </p>
+        <h2>{{ t('ontology.section.artifacts') }}</h2>
+        <div class="artifacts">
+          <div>
+            <h3>problem_ir</h3>
+            <pre>{{ JSON.stringify({ mvBounds: preview.artifacts.problemIr.mvBounds, cvBounds: preview.artifacts.problemIr.cvBounds }, null, 2) }}</pre>
+          </div>
+          <div>
+            <h3>control_guard</h3>
+            <pre>{{ JSON.stringify(preview.artifacts.controlGuard, null, 2) }}</pre>
+          </div>
+          <div>
+            <h3>process_model</h3>
+            <pre>{{ JSON.stringify({ featureCandidates: preview.artifacts.processModel.featureCandidates.length, delayPriors: preview.artifacts.processModel.delayPriors.length }, null, 2) }}</pre>
+          </div>
+          <div>
+            <h3>scene_contract</h3>
+            <pre>{{ JSON.stringify({ variables: preview.artifacts.sceneContract.variables.length, constraints: preview.artifacts.sceneContract.constraints.length, relations: preview.artifacts.sceneContract.inferredRelations.length }, null, 2) }}</pre>
+          </div>
+        </div>
+        <h2>{{ t('ontology.section.ruleTrace') }}</h2>
+        <a-table
+          :columns="traceColumns"
+          :data-source="preview.traces"
+          row-key="ruleId"
+          size="small"
+          :pagination="{ pageSize: 10 }"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'decision'">
+              <a-tag :color="record.decision === 'compiled' ? 'green' : (record.decision === 'guard' ? 'blue' : (record.decision === 'rejected' ? 'red' : 'default'))">
+                {{ record.decision }}
+              </a-tag>
+            </template>
+          </template>
+        </a-table>
+      </template>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.ontology-page { padding: 20px 24px 48px; display: flex; flex-direction: column; gap: 16px; }
+.aw-page-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
+.aw-page-head h1 { margin: 2px 0 6px; font-size: 22px; }
+.sub { margin: 0; color: var(--ink-soft); max-width: 72ch; }
+.head-actions { display: flex; gap: 8px; }
+.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.hint { color: var(--ink-faint); font-size: 12px; }
+.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
+.panel { display: flex; flex-direction: column; gap: 14px; }
+.panel h2 { font-size: 14px; margin: 8px 0 0; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
+.stats { display: flex; gap: 10px; flex-wrap: wrap; }
+.stat { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; min-width: 120px; display: flex; flex-direction: column; gap: 4px; }
+.stat span { font-size: 12px; color: var(--ink-faint); }
+.stat strong { font-size: 20px; }
+.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
+.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.plain li { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
+.plain li span { color: var(--ink-soft); font-size: 12px; }
+.plain li em { color: var(--ink-faint); font-size: 12px; font-style: normal; }
+.muted { color: var(--ink-faint); }
+.failures { border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
+.artifacts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.artifacts h3 { margin: 0 0 6px; font-size: 12px; color: var(--ink-faint); }
+.artifacts pre { margin: 0; background: var(--surface-2, rgba(255,255,255,.03)); border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: 11px; max-height: 260px; overflow: auto; }
+.compare { display: flex; gap: 8px; align-items: center; }
+.diff { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
+.chip { margin-right: 6px; }
+.retire { margin-left: 8px; }
+</style>