style(fe): standardize Model Operations & Versioning page UI components and layout
This commit is contained in:
@@ -1,39 +1,150 @@
|
||||
<script setup lang="ts">
|
||||
import type { ModelOperationItem } from '../schema'
|
||||
import { KsStatusTag } from '../../../shared/ui/components'
|
||||
|
||||
defineProps<{ operations: ModelOperationItem[] }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section aria-labelledby="operation-plan-title">
|
||||
<h2 id="operation-plan-title">지속 평가·개선 작업 계획</h2>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<div class="operation-plan-panel">
|
||||
<h3 class="panel-title">📋 지속 평가·개선 작업 계획</h3>
|
||||
<div class="table-container">
|
||||
<table class="ks-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Job</th>
|
||||
<th>작업</th>
|
||||
<th>주기</th>
|
||||
<th>자동화 모드</th>
|
||||
<th>Queue</th>
|
||||
<th>Gate</th>
|
||||
<th>Owner</th>
|
||||
<th>산출물</th>
|
||||
<th style="width: 50px; text-align: center;">No.</th>
|
||||
<th style="width: 100px;">Job ID</th>
|
||||
<th>작업명</th>
|
||||
<th style="width: 80px; text-align: center;">주기</th>
|
||||
<th style="width: 130px; text-align: center;">자동화 모드</th>
|
||||
<th style="width: 140px;">Queue</th>
|
||||
<th style="width: 140px;">Gate</th>
|
||||
<th>담당자 (Primary / Secondary)</th>
|
||||
<th>필수 증거 및 산출물</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="operation in operations" :key="operation.operationCode">
|
||||
<td>{{ operation.operationCode }}</td>
|
||||
<td>{{ operation.name }}</td>
|
||||
<td>{{ operation.cadence }}</td>
|
||||
<td>{{ operation.automationMode }}</td>
|
||||
<td>{{ operation.queue }}</td>
|
||||
<td>{{ operation.gate }}</td>
|
||||
<td>{{ operation.primaryOwner }} / {{ operation.secondaryOwner }}</td>
|
||||
<td>{{ operation.output }}</td>
|
||||
<tr v-for="(operation, index) in operations" :key="operation.operationCode" :class="index % 2 === 1 ? 'row-odd' : 'row-even'">
|
||||
<td style="text-align: center;" class="ks-financial-number">{{ index + 1 }}</td>
|
||||
<td class="code-text">{{ operation.operationCode }}</td>
|
||||
<td class="name-text">{{ operation.name }}</td>
|
||||
<td style="text-align: center;"><span class="badge cadence">{{ operation.cadence }}</span></td>
|
||||
<td style="text-align: center;">
|
||||
<KsStatusTag :value="operation.automationMode" severity="warning" />
|
||||
</td>
|
||||
<td><code>{{ operation.queue }}</code></td>
|
||||
<td><span class="badge gate">{{ operation.gate }}</span></td>
|
||||
<td class="owner-text">{{ operation.primaryOwner }} / {{ operation.secondaryOwner }}</td>
|
||||
<td class="output-text">{{ operation.output }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.operation-plan-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);
|
||||
margin-top: var(--ks-space-3);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
margin: 0;
|
||||
font-size: var(--ks-font-section);
|
||||
font-weight: 700;
|
||||
color: var(--ks-color-neutral-800);
|
||||
}
|
||||
|
||||
.table-container {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--ks-color-neutral-300);
|
||||
border-radius: var(--ks-radius-sm);
|
||||
}
|
||||
|
||||
.ks-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--ks-font-body);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ks-table th {
|
||||
background: #f1f5f9;
|
||||
color: var(--ks-color-neutral-800);
|
||||
font-weight: 700;
|
||||
padding: var(--ks-space-2) var(--ks-space-3);
|
||||
border-bottom: 1px solid var(--ks-color-neutral-300);
|
||||
font-size: var(--ks-font-caption);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ks-table td {
|
||||
padding: var(--ks-space-2) var(--ks-space-3);
|
||||
border-bottom: 1px solid var(--ks-color-neutral-200);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ks-table tr.row-even {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.ks-table tr.row-odd {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.ks-table tr:hover {
|
||||
background: #e0f2fe;
|
||||
}
|
||||
|
||||
.code-text {
|
||||
font-weight: 700;
|
||||
color: var(--ks-color-action);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.name-text {
|
||||
font-weight: 600;
|
||||
color: var(--ks-color-neutral-900);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 1px 6px;
|
||||
border-radius: var(--ks-radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.badge.cadence {
|
||||
background: #e2e8f0;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.badge.gate {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
background: #f1f5f9;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.owner-text, .output-text {
|
||||
color: var(--ks-color-neutral-700);
|
||||
font-size: var(--ks-font-caption);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user