style(fe): standardize Model Operations & Versioning page UI components and layout

This commit is contained in:
2026-08-15 22:28:51 +09:00
parent ecc5c641dc
commit 2b1dc13852
4 changed files with 203 additions and 41 deletions
@@ -1,3 +1,3 @@
<script setup lang="ts">import { computed } from 'vue'; import PageLayout from '../../layouts/PageLayout.vue'; import StandardScreenBoundary from './StandardScreenBoundary.vue'; import type { StandardScreenProps } from '../../contracts/screenContract'; const props=defineProps<StandardScreenProps>(); const governanceBlocked = computed(() => ['LOADING','ERROR','UNAUTHORIZED','FORBIDDEN','CONFLICT','EXPIRED','READONLY','PROCESSING'].includes(props.state ?? 'READY')); defineEmits<{retry:[]}>()</script>
<template><PageLayout :title="props.title" :subtitle="props.subtitle" :status="props.state" :as-of="props.evidence?.asOf" :version="props.evidence?.version" aside-width="28rem"><template #actions><slot name="actions"/></template><template #summary><slot name="gateSummary"/></template><StandardScreenBoundary :state="props.state" :warning="props.warning" @retry="$emit('retry')"><section v-if="!governanceBlocked" class="ks-stack"><div class="ks-card ks-section"><slot name="versionComparison"/></div><div class="ks-card ks-section"><slot name="evidenceMatrix"/></div></section></StandardScreenBoundary><template #aside><section v-if="!governanceBlocked" class="ks-stack"><div class="ks-card ks-section"><slot name="approval"/></div><div class="ks-card ks-section"><slot name="rollback"/></div></section></template><template v-if="$slots.footer && !governanceBlocked" #footer><slot name="footer"/></template></PageLayout></template>
<template><PageLayout :title="props.title" :subtitle="props.subtitle" :status="props.state" :as-of="props.evidence?.asOf" :version="props.evidence?.version" aside-width="28rem"><template v-if="$slots.actions" #actions><slot name="actions"/></template><template v-if="$slots.gateSummary" #summary><slot name="gateSummary"/></template><StandardScreenBoundary :state="props.state" :warning="props.warning" @retry="$emit('retry')"><section v-if="!governanceBlocked" class="ks-stack"><div v-if="$slots.versionComparison" class="ks-card ks-section"><slot name="versionComparison"/></div><div v-if="$slots.evidenceMatrix" class="ks-card ks-section"><slot name="evidenceMatrix"/></div><slot /></section></StandardScreenBoundary><template v-if="$slots.approval || $slots.rollback" #aside><section v-if="!governanceBlocked" class="ks-stack"><div v-if="$slots.approval" class="ks-card ks-section"><slot name="approval"/></div><div v-if="$slots.rollback" class="ks-card ks-section"><slot name="rollback"/></div></section></template><template v-if="$slots.footer && !governanceBlocked" #footer><slot name="footer"/></template></PageLayout></template>
<style scoped>.ks-section{padding:var(--ks-space-4)}</style>