83 lines
2.2 KiB
Vue
83 lines
2.2 KiB
Vue
<script setup lang="ts">
|
||
import { KsStatusTag } from '../../../shared/ui/components'
|
||
|
||
defineProps<{
|
||
algorithmStatus: string
|
||
orderCapability: string
|
||
modelMutationBoundary: string
|
||
}>()
|
||
</script>
|
||
|
||
<template>
|
||
<div class="boundary-panel">
|
||
<h3 class="panel-title">🛡️ 모델 운영 및 자동화 통제 경계</h3>
|
||
<div class="boundary-grid">
|
||
<div class="boundary-item">
|
||
<span class="label">알고리즘 상태</span>
|
||
<KsStatusTag :value="algorithmStatus" severity="info" />
|
||
</div>
|
||
<div class="boundary-item">
|
||
<span class="label">자동주문 제출 Capability</span>
|
||
<KsStatusTag :value="orderCapability" severity="danger" />
|
||
</div>
|
||
<div class="boundary-item">
|
||
<span class="label">모델 변이 (Mutation) 경계</span>
|
||
<KsStatusTag :value="modelMutationBoundary" severity="warning" />
|
||
</div>
|
||
</div>
|
||
<div class="boundary-notice">
|
||
ℹ️ <strong>통제 지침:</strong> 스케줄러는 평가 증거 및 개선 제안만 생성합니다. 모델 승격·롤백·임계값 변경은 독립 검증과 Maker-Checker 승인을 거쳐야 합니다.
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.boundary-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--ks-space-3);
|
||
padding: var(--ks-space-3);
|
||
background: var(--ks-color-surface);
|
||
border: 1px solid var(--ks-color-border);
|
||
border-radius: var(--ks-radius-sm);
|
||
}
|
||
|
||
.panel-title {
|
||
margin: 0;
|
||
font-size: var(--ks-font-section);
|
||
font-weight: 700;
|
||
color: var(--ks-color-neutral-800);
|
||
}
|
||
|
||
.boundary-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||
gap: var(--ks-space-3);
|
||
}
|
||
|
||
.boundary-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--ks-space-1);
|
||
padding: var(--ks-space-2) var(--ks-space-3);
|
||
background: var(--ks-color-canvas);
|
||
border: 1px solid var(--ks-color-neutral-200);
|
||
border-radius: var(--ks-radius-sm);
|
||
}
|
||
|
||
.boundary-item .label {
|
||
font-size: var(--ks-font-caption);
|
||
color: var(--ks-color-neutral-600);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.boundary-notice {
|
||
font-size: var(--ks-font-caption);
|
||
color: #1e3a8a;
|
||
background: #eff6ff;
|
||
border: 1px solid #bfdbfe;
|
||
padding: var(--ks-space-2) var(--ks-space-3);
|
||
border-radius: var(--ks-radius-sm);
|
||
}
|
||
</style>
|