444 lines
14 KiB
Vue
444 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { RouterLink } from 'vue-router'
|
|
|
|
// KBX v60 Exception-Driven Work Queue Metrics (§2.4 Exception Driven)
|
|
const workQueueSummary = [
|
|
{ label: '전체 모델 수', count: 42, status: 'normal', filter: 'all' },
|
|
{ label: 'Shadow Run 실시간', count: 6, status: 'running', filter: 'running' },
|
|
{ label: '승인 대기 (Maker-Checker)', count: 8, status: 'warning', filter: 'approval' },
|
|
{ label: 'PBO/DSR 검증 경고', count: 3, status: 'danger', filter: 'warning' },
|
|
{ label: '데이터 수집 예외', count: 2, status: 'danger', filter: 'exception' }
|
|
]
|
|
|
|
// KBX v60 Exception Items (처리 대상 13건 노출)
|
|
const exceptionItems = [
|
|
{ id: 'EX-2026-001', type: 'DSR/PBO 미달', model: 'Aegis-Core-Alpha-v1.4', module: '매도 의사결정', status: '경고', time: '10분 전', route: '/governance/approvals' },
|
|
{ id: 'EX-2026-002', type: 'Maker-Checker 승인대기', model: 'K-Trend-Sell-v2.1', module: '포트폴리오 리밸런싱', status: '대기', time: '25분 전', route: '/governance/approvals' },
|
|
{ id: 'EX-2026-003', type: 'KIS API 수집 오류', model: 'MarketData-KRX-Realtime', module: '시장 데이터 수집', status: '오류', time: '1시간 전', route: '/ops/market-data-history' },
|
|
{ id: 'EX-2026-004', type: 'Shadow Run 타임아웃', model: 'Shadow-Batch-Job-8492', module: 'Shadow Run', status: '오류', time: '2시간 전', route: '/model-ops/shadow-run-jobs' },
|
|
]
|
|
|
|
// KBX Quick System Rules (§2.1 Familiar First)
|
|
const operationalGuides = [
|
|
{ title: '단축키 가이드', desc: '조회 [F3], 저장 [F8], 메뉴 검색 [Ctrl+K] 키로 업무를 고속 수행합니다.' },
|
|
{ title: '감사 추적 보존', desc: '모든 데이터 및 모델 승인 변경은 수정/삭제 없이 Correction Event로 영구 보존됩니다.' },
|
|
{ title: '자동주문 차단', desc: '현재 KIS 실제 주문 제출 기능은 OFF 상태이며 오직 Shadow 평가 모드만 동작합니다.' },
|
|
]
|
|
|
|
// KBX v60 Command Action Handler (F3/F8)
|
|
const activeFilter = ref('all')
|
|
|
|
const handleFilter = (filterKey: string) => {
|
|
activeFilter.value = filterKey
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="kbx-business-home">
|
|
<!-- KBX Page Header (§7: Height 48px) -->
|
|
<header class="kbx-page-header">
|
|
<div class="kbx-page-header__breadcrumb">K-ArtSell Aegis > 홈 > 업무 워크스페이스</div>
|
|
<div class="kbx-page-header__title-row">
|
|
<h1 class="kbx-page-header__title">업무 워크스페이스 (Work Queue & Reconcile)</h1>
|
|
<div class="kbx-page-header__actions">
|
|
<span class="kbx-badge kbx-badge--info">KBX v60 Standard</span>
|
|
<span class="kbx-badge kbx-badge--warning">자동주문/KIS OFF</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- KBX Command Bar (§5: Height 44px) -->
|
|
<div class="kbx-command-bar">
|
|
<div class="kbx-command-bar__group">
|
|
<button type="button" class="kbx-btn kbx-btn--primary">
|
|
<span class="kbx-btn__shortcut">[F3]</span> 새로고침
|
|
</button>
|
|
<button type="button" class="kbx-btn kbx-btn--secondary">
|
|
예외건만 보기
|
|
</button>
|
|
</div>
|
|
<div class="kbx-command-bar__group">
|
|
<RouterLink to="/model-ops/shadow-run-jobs" class="kbx-btn kbx-btn--secondary">
|
|
Shadow Run 실행
|
|
</RouterLink>
|
|
<RouterLink to="/governance/approvals" class="kbx-btn kbx-btn--secondary">
|
|
승인 큐 이동
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KBX Search Panel (§6: Dense 34px) -->
|
|
<div class="kbx-search-panel">
|
|
<div class="kbx-search-panel__row">
|
|
<div class="kbx-search-field">
|
|
<label for="home-search-date">조회기간</label>
|
|
<input id="home-search-date" type="text" value="2026-08-08 ~ 2026-08-15" class="kbx-input" readonly />
|
|
</div>
|
|
<div class="kbx-search-field">
|
|
<label for="home-search-module">업무모듈</label>
|
|
<select id="home-search-module" class="kbx-select">
|
|
<option value="all">전체 모듈</option>
|
|
<option value="research">Research / 매도</option>
|
|
<option value="model">ModelOps</option>
|
|
<option value="governance">Governance</option>
|
|
</select>
|
|
</div>
|
|
<div class="kbx-search-field">
|
|
<label for="home-search-keyword">통합검색</label>
|
|
<input id="home-search-keyword" type="text" placeholder="모델ID / 예외코드 / 담당자" class="kbx-input" />
|
|
</div>
|
|
<button type="button" class="kbx-btn kbx-btn--primary">조회 [F3]</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KBX Exception-Driven KPI Toolbar (KBX Reference Screen §11) -->
|
|
<div class="kbx-kpi-bar" role="toolbar" aria-label="예외 상태 요약">
|
|
<div
|
|
v-for="item in workQueueSummary"
|
|
:key="item.filter"
|
|
class="kbx-kpi-item kbx-card"
|
|
:class="[
|
|
`kbx-kpi-item--${item.status}`,
|
|
{ 'kbx-kpi-item--active': activeFilter === item.filter }
|
|
]"
|
|
@click="handleFilter(item.filter)"
|
|
>
|
|
<div class="kbx-kpi-item__label">{{ item.label }}</div>
|
|
<div class="kbx-kpi-item__count ks-financial-number">{{ item.count }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KBX Exception Work Queue Grid (T06 / T07 Reference Screen) -->
|
|
<section class="kbx-workspace-grid kbx-card">
|
|
<div class="kbx-section-header">
|
|
<h2 class="kbx-section-title">⚡ 긴급 처리 필요 예외 건 (Exception Driven Work Queue)</h2>
|
|
<span class="kbx-section-count">총 {{ exceptionItems.length }}건 처리 필요</span>
|
|
</div>
|
|
|
|
<div class="kbx-table-container">
|
|
<table class="kbx-grid-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 40px;"><input type="checkbox" aria-label="전체 선택" /></th>
|
|
<th style="width: 120px;">예외ID</th>
|
|
<th style="width: 160px;">예외 유형</th>
|
|
<th>대상 모델</th>
|
|
<th style="width: 140px;">업무 모듈</th>
|
|
<th style="width: 80px;">상태</th>
|
|
<th style="width: 100px;">발생 시간</th>
|
|
<th style="width: 100px;">조치</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="ex in exceptionItems" :key="ex.id" class="kbx-grid-row">
|
|
<td><input type="checkbox" :aria-label="`${ex.id} 선택`" /></td>
|
|
<td class="ks-financial-number">{{ ex.id }}</td>
|
|
<td>
|
|
<span class="kbx-exception-tag" :class="ex.status === '오류' ? 'kbx-exception-tag--danger' : 'kbx-exception-tag--warning'">
|
|
⚠ {{ ex.type }}
|
|
</span>
|
|
</td>
|
|
<td class="kbx-model-name"><strong>{{ ex.model }}</strong></td>
|
|
<td>{{ ex.module }}</td>
|
|
<td>
|
|
<span class="kbx-status-badge" :class="`kbx-status-badge--${ex.status}`">{{ ex.status }}</span>
|
|
</td>
|
|
<td class="ks-financial-number">{{ ex.time }}</td>
|
|
<td>
|
|
<RouterLink :to="ex.route" class="kbx-btn kbx-btn--xs kbx-btn--secondary">
|
|
조치하기 →
|
|
</RouterLink>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- KBX System Operational Rules (§2.1 Familiar First) -->
|
|
<section class="kbx-guide-grid">
|
|
<div v-for="guide in operationalGuides" :key="guide.title" class="kbx-guide-card kbx-card">
|
|
<h3 class="kbx-guide-title">📌 {{ guide.title }}</h3>
|
|
<p class="kbx-guide-desc">{{ guide.desc }}</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.kbx-business-home {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--ks-space-3);
|
|
background: var(--ks-color-canvas);
|
|
color: var(--ks-color-text);
|
|
font-family: Pretendard, system-ui, sans-serif;
|
|
}
|
|
|
|
/* Page Header 48px (§7) */
|
|
.kbx-page-header {
|
|
min-height: var(--ks-shell-pageheader-height);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
border-bottom: 1px solid var(--ks-color-border);
|
|
padding: var(--ks-space-2) var(--ks-space-4);
|
|
background: var(--ks-color-surface);
|
|
border-radius: var(--ks-radius-md);
|
|
}
|
|
|
|
.kbx-page-header__breadcrumb {
|
|
font-size: var(--ks-font-caption);
|
|
color: var(--ks-color-text-muted);
|
|
}
|
|
|
|
.kbx-page-header__title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.kbx-page-header__title {
|
|
font-size: var(--ks-font-page);
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.kbx-badge {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 2px 6px;
|
|
border-radius: var(--ks-radius-sm);
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.kbx-badge--info { background: var(--ks-color-neutral-100); color: var(--ks-color-info); }
|
|
.kbx-badge--warning { background: var(--ks-color-neutral-100); color: var(--ks-color-warning); }
|
|
|
|
/* Command Bar 44px */
|
|
.kbx-command-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--ks-space-2) var(--ks-space-4);
|
|
background: var(--ks-color-surface);
|
|
border: 1px solid var(--ks-color-border);
|
|
border-radius: var(--ks-radius-md);
|
|
gap: var(--ks-space-2);
|
|
}
|
|
|
|
.kbx-command-bar__group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--ks-space-2);
|
|
}
|
|
|
|
/* Search Panel */
|
|
.kbx-search-panel {
|
|
background: var(--ks-color-surface);
|
|
border: 1px solid var(--ks-color-border);
|
|
border-radius: var(--ks-radius-md);
|
|
padding: var(--ks-space-3) var(--ks-space-4);
|
|
}
|
|
|
|
.kbx-search-panel__row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--ks-space-4);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.kbx-search-field {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--ks-space-2);
|
|
}
|
|
|
|
.kbx-search-field label {
|
|
font-size: var(--ks-font-caption);
|
|
font-weight: 600;
|
|
color: var(--ks-color-text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.kbx-input, .kbx-select {
|
|
height: var(--ks-control-height);
|
|
padding: 0 var(--ks-space-3);
|
|
border: 1px solid var(--ks-color-border);
|
|
border-radius: var(--ks-radius-sm);
|
|
background: var(--ks-color-surface);
|
|
font-size: var(--ks-font-body);
|
|
}
|
|
|
|
/* KPI Toolbar Grid */
|
|
.kbx-kpi-bar {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: var(--ks-space-3);
|
|
}
|
|
|
|
.kbx-kpi-item {
|
|
padding: var(--ks-space-3) var(--ks-space-4);
|
|
background: var(--ks-color-surface);
|
|
border: 1px solid var(--ks-color-border);
|
|
border-radius: var(--ks-radius-md);
|
|
cursor: pointer;
|
|
transition: var(--ks-transition-smooth);
|
|
}
|
|
|
|
.kbx-kpi-item:hover {
|
|
border-color: var(--ks-color-action);
|
|
box-shadow: var(--ks-shadow-md);
|
|
}
|
|
|
|
.kbx-kpi-item--active {
|
|
border-color: var(--ks-color-action);
|
|
background: rgba(37, 99, 235, 0.04);
|
|
}
|
|
|
|
.kbx-kpi-item__label {
|
|
font-size: var(--ks-font-caption);
|
|
color: var(--ks-color-text-muted);
|
|
}
|
|
|
|
.kbx-kpi-item__count {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--ks-color-text);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.kbx-kpi-item--warning .kbx-kpi-item__count { color: var(--ks-color-warning); }
|
|
.kbx-kpi-item--danger .kbx-kpi-item__count { color: var(--ks-color-danger); }
|
|
|
|
/* Table Container & Dense Grid */
|
|
.kbx-workspace-grid {
|
|
background: var(--ks-color-surface);
|
|
border: 1px solid var(--ks-color-border);
|
|
border-radius: var(--ks-radius-md);
|
|
padding: var(--ks-space-4);
|
|
}
|
|
|
|
.kbx-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--ks-space-3);
|
|
}
|
|
|
|
.kbx-section-title {
|
|
font-size: var(--ks-font-section);
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.kbx-section-count {
|
|
font-size: var(--ks-font-caption);
|
|
color: var(--ks-color-text-muted);
|
|
}
|
|
|
|
.kbx-table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.kbx-grid-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: var(--ks-font-grid);
|
|
}
|
|
|
|
.kbx-grid-table th {
|
|
height: var(--ks-grid-header-height);
|
|
background: var(--ks-color-neutral-100);
|
|
border-bottom: 2px solid var(--ks-color-border-strong);
|
|
padding: 0 var(--ks-space-3);
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: var(--ks-color-neutral-800);
|
|
}
|
|
|
|
.kbx-grid-table td {
|
|
height: var(--ks-grid-row-height);
|
|
border-bottom: 1px solid var(--ks-color-border);
|
|
padding: 0 var(--ks-space-3);
|
|
}
|
|
|
|
.kbx-grid-row:hover {
|
|
background: var(--ks-color-neutral-50);
|
|
}
|
|
|
|
/* Button & Badge Standards */
|
|
.kbx-btn {
|
|
height: var(--ks-control-height);
|
|
padding: 0 var(--ks-space-3);
|
|
border-radius: var(--ks-radius-sm);
|
|
font-size: var(--ks-font-body);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--ks-space-1);
|
|
border: 1px solid transparent;
|
|
text-decoration: none;
|
|
transition: var(--ks-transition-fast);
|
|
}
|
|
|
|
.kbx-btn--primary {
|
|
background: var(--ks-color-action);
|
|
color: var(--ks-color-text-on-dark);
|
|
border-color: var(--ks-color-action);
|
|
}
|
|
.kbx-btn--primary:hover { background: var(--ks-color-action-hover); }
|
|
|
|
.kbx-btn--secondary {
|
|
background: var(--ks-color-surface);
|
|
color: var(--ks-color-text);
|
|
border-color: var(--ks-color-border-strong);
|
|
}
|
|
.kbx-btn--secondary:hover { background: var(--ks-color-neutral-100); }
|
|
|
|
.kbx-btn--xs {
|
|
height: 26px;
|
|
padding: 0 8px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.kbx-status-badge {
|
|
padding: 2px 6px;
|
|
border-radius: var(--ks-radius-sm);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
.kbx-status-badge--오류 { background: rgba(220, 38, 38, 0.1); color: var(--ks-color-danger); }
|
|
.kbx-status-badge--경고, .kbx-status-badge--대기 { background: rgba(217, 119, 6, 0.1); color: var(--ks-color-warning); }
|
|
|
|
/* Guide Cards Grid */
|
|
.kbx-guide-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: var(--ks-space-3);
|
|
}
|
|
|
|
.kbx-guide-card {
|
|
background: var(--ks-color-surface);
|
|
border: 1px solid var(--ks-color-border);
|
|
border-radius: var(--ks-radius-sm);
|
|
padding: var(--ks-space-3);
|
|
}
|
|
|
|
.kbx-guide-title {
|
|
font-size: var(--ks-font-body);
|
|
font-weight: 600;
|
|
margin: 0 0 var(--ks-space-1) 0;
|
|
}
|
|
|
|
.kbx-guide-desc {
|
|
font-size: var(--ks-font-caption);
|
|
color: var(--ks-color-text-muted);
|
|
margin: 0;
|
|
line-height: 1.4;
|
|
}
|
|
</style>
|