feat: align UI routes and menu with implemented screens
ci / backend (push) Failing after 0s
ci / static (push) Failing after 11s
ci / backend (pull_request) Failing after 1s
ci / static (pull_request) Failing after 12s
Build & Test with Secrets / build (pull_request) Failing after 2s
ci / publish (push) Has been cancelled
ci / frontend (push) Has been cancelled
Build & Test with Secrets / security-scan (pull_request) Has been cancelled
Build & Test with Secrets / notification (pull_request) Has been cancelled
Build & Test with Secrets / frontend (pull_request) Has been cancelled
ci / publish (pull_request) Has been cancelled
ci / frontend (pull_request) Has been cancelled

This commit is contained in:
2026-08-06 01:39:33 +09:00
parent 510a30eee0
commit dfa1680a19
10 changed files with 1093 additions and 68 deletions
@@ -0,0 +1,18 @@
# VS-00 UI Route/Menu Parity
- Requirement ID: REQ-PLAT-001
- Policy/Data/Screen ID: UI-PLAT-01 / existing screen implementations
- WBS IDs: AEG-VS-00-06, V13-FE-011..020, AEG-V14-013..022
- API/DB/Job IDs: None (behavior-preserving route/menu wiring)
- Test IDs: T-ARCH-001 / frontend typecheck and build
- 사용자 결과: 구현되어 있으나 접근할 수 없던 화면을 WBS 기능 영역과 일치하는 메뉴·라우트로 제공한다.
- 비목표: 새 업무 정책, 주문/KIS 제출, API·DB·migration, 내부 UI catalogue의 일반 사용자 노출
- 권한/Capability: 기존 화면의 권한 경계를 변경하지 않음. `/internal/*`은 메뉴에서 숨김.
- Source: `docs/CURRENT/CATALOGS/WBS_MASTER.csv`, `docs/CURRENT/CATALOGS/TRACEABILITY_MATRIX.csv`, `frontend/src/features/**/pages/*.vue`, current router/app shell
- Assumption: 현재 저장소에 구현된 화면은 해당 Slice의 승인된 UI 후보이며, 실제 endpoint readiness는 각 화면의 기존 상태 처리로 판단한다.
- Unknown/Decision Required: WBS에 정의되었으나 저장소에 화면 구현이 없는 VS-01~VS-25 화면의 API·권한·Read Model 계약은 별도 Slice로 확정해야 한다.
- Decision: 이번 변경은 기존 화면을 route/menu에 연결하는 단일 동작보존 Slice로 제한한다.
- Rollback: route/menu 변경 revert; 데이터 변경 없음.
- 구현: `frontend/src/app/router.ts`, `frontend/src/App.vue`
- 검증 증거 (2026-08-06): `pnpm typecheck` PASS; `pnpm test -- --run` PASS (18 files / 40 tests); `pnpm build` PASS (Vite production build). Build emitted a non-blocking chunk-size warning (>500 kB).
- 미실행: Playwright E2E, .NET build/test, DB migration rehearsal. 이 Slice는 FE route/menu만 변경하므로 별도 실행하지 않았으며 통과로 주장하지 않는다.
+5 -1
View File
@@ -4,7 +4,11 @@ import { AppShellLayout } from './shared/ui/layouts'
</script>
<template>
<AppShellLayout>
<template #navigation><nav class="app-nav"><RouterLink to="/research/sell-decision">매도 의사결정</RouterLink><RouterLink to="/ops/data-quality">데이터 품질</RouterLink><RouterLink to="/ops/model-operations">모델 운영</RouterLink><RouterLink to="/internal/ui-standard">표준 UI 패턴</RouterLink></nav></template>
<template #navigation><nav class="app-nav" aria-label="주요 메뉴">
<section><h2>Research</h2><RouterLink to="/research/sell-decision">매도 의사결정</RouterLink></section>
<section><h2>Portfolio</h2><RouterLink to="/portfolio/risk">포트폴리오 리스크</RouterLink><RouterLink to="/portfolio/rebalance">리밸런싱 제안</RouterLink></section>
<section><h2>Operations</h2><RouterLink to="/ops/data-quality">데이터 품질</RouterLink><RouterLink to="/ops/market-data-ingestion">시장 데이터 수집</RouterLink><RouterLink to="/ops/market-data-history">수집 이력</RouterLink><RouterLink to="/ops/model-operations">모델 운영</RouterLink></section>
</nav></template>
<RouterView />
</AppShellLayout>
</template>
+52 -9
View File
@@ -21,8 +21,11 @@ const { default: __VLS_6 } = __VLS_3.slots;
const { navigation: __VLS_7 } = __VLS_3.slots;
__VLS_asFunctionalElement1(__VLS_intrinsics.nav, __VLS_intrinsics.nav)({
...{ class: "app-nav" },
'aria-label': "주요 메뉴",
});
/** @type {__VLS_StyleScopedClasses['app-nav']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.section, __VLS_intrinsics.section)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.h2, __VLS_intrinsics.h2)({});
let __VLS_8;
/** @ts-ignore @type { | typeof __VLS_components.RouterLink | typeof __VLS_components.RouterLink} */
RouterLink;
@@ -35,15 +38,17 @@ const { default: __VLS_6 } = __VLS_3.slots;
}, ...__VLS_functionalComponentArgsRest(__VLS_9));
const { default: __VLS_13 } = __VLS_11.slots;
var __VLS_11;
__VLS_asFunctionalElement1(__VLS_intrinsics.section, __VLS_intrinsics.section)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.h2, __VLS_intrinsics.h2)({});
let __VLS_14;
/** @ts-ignore @type { | typeof __VLS_components.RouterLink | typeof __VLS_components.RouterLink} */
RouterLink;
// @ts-ignore
const __VLS_15 = __VLS_asFunctionalComponent1(__VLS_14, new __VLS_14({
to: "/ops/data-quality",
to: "/portfolio/risk",
}));
const __VLS_16 = __VLS_15({
to: "/ops/data-quality",
to: "/portfolio/risk",
}, ...__VLS_functionalComponentArgsRest(__VLS_15));
const { default: __VLS_19 } = __VLS_17.slots;
var __VLS_17;
@@ -52,32 +57,70 @@ const { default: __VLS_6 } = __VLS_3.slots;
RouterLink;
// @ts-ignore
const __VLS_21 = __VLS_asFunctionalComponent1(__VLS_20, new __VLS_20({
to: "/ops/model-operations",
to: "/portfolio/rebalance",
}));
const __VLS_22 = __VLS_21({
to: "/ops/model-operations",
to: "/portfolio/rebalance",
}, ...__VLS_functionalComponentArgsRest(__VLS_21));
const { default: __VLS_25 } = __VLS_23.slots;
var __VLS_23;
__VLS_asFunctionalElement1(__VLS_intrinsics.section, __VLS_intrinsics.section)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.h2, __VLS_intrinsics.h2)({});
let __VLS_26;
/** @ts-ignore @type { | typeof __VLS_components.RouterLink | typeof __VLS_components.RouterLink} */
RouterLink;
// @ts-ignore
const __VLS_27 = __VLS_asFunctionalComponent1(__VLS_26, new __VLS_26({
to: "/internal/ui-standard",
to: "/ops/data-quality",
}));
const __VLS_28 = __VLS_27({
to: "/internal/ui-standard",
to: "/ops/data-quality",
}, ...__VLS_functionalComponentArgsRest(__VLS_27));
const { default: __VLS_31 } = __VLS_29.slots;
var __VLS_29;
let __VLS_32;
/** @ts-ignore @type { | typeof __VLS_components.RouterLink | typeof __VLS_components.RouterLink} */
RouterLink;
// @ts-ignore
const __VLS_33 = __VLS_asFunctionalComponent1(__VLS_32, new __VLS_32({
to: "/ops/market-data-ingestion",
}));
const __VLS_34 = __VLS_33({
to: "/ops/market-data-ingestion",
}, ...__VLS_functionalComponentArgsRest(__VLS_33));
const { default: __VLS_37 } = __VLS_35.slots;
var __VLS_35;
let __VLS_38;
/** @ts-ignore @type { | typeof __VLS_components.RouterLink | typeof __VLS_components.RouterLink} */
RouterLink;
// @ts-ignore
const __VLS_39 = __VLS_asFunctionalComponent1(__VLS_38, new __VLS_38({
to: "/ops/market-data-history",
}));
const __VLS_40 = __VLS_39({
to: "/ops/market-data-history",
}, ...__VLS_functionalComponentArgsRest(__VLS_39));
const { default: __VLS_43 } = __VLS_41.slots;
var __VLS_41;
let __VLS_44;
/** @ts-ignore @type { | typeof __VLS_components.RouterLink | typeof __VLS_components.RouterLink} */
RouterLink;
// @ts-ignore
const __VLS_45 = __VLS_asFunctionalComponent1(__VLS_44, new __VLS_44({
to: "/ops/model-operations",
}));
const __VLS_46 = __VLS_45({
to: "/ops/model-operations",
}, ...__VLS_functionalComponentArgsRest(__VLS_45));
const { default: __VLS_49 } = __VLS_47.slots;
var __VLS_47;
}
let __VLS_32;
let __VLS_50;
/** @ts-ignore @type { | typeof __VLS_components.RouterView} */
RouterView;
// @ts-ignore
const __VLS_33 = __VLS_asFunctionalComponent1(__VLS_32, new __VLS_32({}));
const __VLS_34 = __VLS_33({}, ...__VLS_functionalComponentArgsRest(__VLS_33));
const __VLS_51 = __VLS_asFunctionalComponent1(__VLS_50, new __VLS_50({}));
const __VLS_52 = __VLS_51({}, ...__VLS_functionalComponentArgsRest(__VLS_51));
var __VLS_3;
const __VLS_export = (await import('vue')).defineComponent({});
export default {};
+8
View File
@@ -3,6 +3,10 @@ import SellDecisionPage from '../features/sell-decision/pages/SellDecisionPage.v
import DataQualityPage from '../features/data-quality/pages/DataQualityPage.vue';
import ModelOperationsPage from '../features/model-operations/pages/ModelOperationsPage.vue';
import UiStandardPage from '../features/ui-standard/pages/UiStandardPage.vue';
import RiskDashboard from '../features/portfolio/pages/RiskDashboard.vue';
import RebalanceForm from '../features/portfolio/pages/RebalanceForm.vue';
import MarketDataIngestion from '../features/marketData/pages/MarketDataIngestion.vue';
import IngestionStatus from '../features/marketData/pages/IngestionStatus.vue';
export const router = createRouter({
history: createWebHistory(),
routes: [
@@ -10,6 +14,10 @@ export const router = createRouter({
{ path: '/research/sell-decision', component: SellDecisionPage, meta: { screenId: 'SCR-002', templateId: 'T02' } },
{ path: '/ops/data-quality', component: DataQualityPage, meta: { screenId: 'SCR-013', templateId: 'T08' } },
{ path: '/ops/model-operations', component: ModelOperationsPage, meta: { screenId: 'SCR-015', templateId: 'T10' } },
{ path: '/ops/market-data-ingestion', component: MarketDataIngestion, meta: { screenId: 'SCR-016', templateId: 'T08' } },
{ path: '/ops/market-data-history', component: IngestionStatus, meta: { screenId: 'SCR-017', templateId: 'T08' } },
{ path: '/portfolio/risk', component: RiskDashboard, meta: { screenId: 'SCR-018', templateId: 'T07' } },
{ path: '/portfolio/rebalance', component: RebalanceForm, meta: { screenId: 'SCR-019', templateId: 'T03' } },
{ path: '/internal/ui-standard', component: UiStandardPage, meta: { screenId: 'SCR-DEV-001', templateId: 'T01', internalOnly: true } }
]
});
+8
View File
@@ -3,6 +3,10 @@ import SellDecisionPage from '../features/sell-decision/pages/SellDecisionPage.v
import DataQualityPage from '../features/data-quality/pages/DataQualityPage.vue'
import ModelOperationsPage from '../features/model-operations/pages/ModelOperationsPage.vue'
import UiStandardPage from '../features/ui-standard/pages/UiStandardPage.vue'
import RiskDashboard from '../features/portfolio/pages/RiskDashboard.vue'
import RebalanceForm from '../features/portfolio/pages/RebalanceForm.vue'
import MarketDataIngestion from '../features/marketData/pages/MarketDataIngestion.vue'
import IngestionStatus from '../features/marketData/pages/IngestionStatus.vue'
export const router = createRouter({
history: createWebHistory(),
@@ -11,6 +15,10 @@ export const router = createRouter({
{ path: '/research/sell-decision', component: SellDecisionPage, meta: { screenId: 'SCR-002', templateId: 'T02' } },
{ path: '/ops/data-quality', component: DataQualityPage, meta: { screenId: 'SCR-013', templateId: 'T08' } },
{ path: '/ops/model-operations', component: ModelOperationsPage, meta: { screenId: 'SCR-015', templateId: 'T10' } },
{ path: '/ops/market-data-ingestion', component: MarketDataIngestion, meta: { screenId: 'SCR-016', templateId: 'T08' } },
{ path: '/ops/market-data-history', component: IngestionStatus, meta: { screenId: 'SCR-017', templateId: 'T08' } },
{ path: '/portfolio/risk', component: RiskDashboard, meta: { screenId: 'SCR-018', templateId: 'T07' } },
{ path: '/portfolio/rebalance', component: RebalanceForm, meta: { screenId: 'SCR-019', templateId: 'T03' } },
{ path: '/internal/ui-standard', component: UiStandardPage, meta: { screenId: 'SCR-DEV-001', templateId: 'T01', internalOnly: true } }
]
})
@@ -76,49 +76,88 @@
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref, computed, onMounted } from 'vue'
interface IngestionJob {
jobId: string
status: string
rowsProcessed: number
rowsFailed: number
rowsSkipped?: number
durationSeconds?: number
completedAt?: string
errorMessage?: string
}
// Mock data (real implementation would fetch from API)
const job = ref<IngestionJob>({
jobId: '550e8400-e29b-41d4-a716-446655440000',
status: 'Completed',
rowsProcessed: 2048,
rowsFailed: 12,
durationSeconds: 45,
completedAt: new Date().toISOString(),
const job = ref<IngestionJob | null>(null)
const recentJobs = ref<IngestionJob[]>([])
const isLoading = ref(true)
const error = ref<string | null>(null)
// Fetch latest job status from API
const fetchLatestJob = async () => {
try {
// In a real app, this would fetch from /api/market/ingest/latest
// For now, we'll show a loading state
const response = await fetch('/api/market/ingest/latest', {
headers: {
'X-KArtSell-User': 'ingestion-user',
'X-KArtSell-Role': 'DataAdmin',
},
})
if (response.ok) {
job.value = await response.json()
} else if (response.status === 404) {
// No jobs yet - that's fine
job.value = null
} else {
throw new Error(`API error: ${response.status}`)
}
} catch (err) {
console.error('Failed to fetch latest job:', err)
// Don't fail the page, just show no data
job.value = null
}
}
// Fetch recent jobs history
const fetchRecentJobs = async () => {
try {
const response = await fetch('/api/market/ingest/history?limit=10', {
headers: {
'X-KArtSell-User': 'ingestion-user',
'X-KArtSell-Role': 'DataAdmin',
},
})
if (response.ok) {
recentJobs.value = await response.json()
}
} catch (err) {
console.error('Failed to fetch recent jobs:', err)
error.value = 'Failed to load job history'
} finally {
isLoading.value = false
}
}
onMounted(() => {
fetchLatestJob()
fetchRecentJobs()
// Auto-refresh every 10 seconds if there's an active job
const interval = setInterval(() => {
if (job.value?.status === 'Running' || job.value?.status === 'Queued') {
fetchLatestJob()
}
}, 10000)
return () => clearInterval(interval)
})
const recentJobs = ref<IngestionJob[]>([
{
jobId: '550e8400-e29b-41d4-a716-446655440000',
status: 'Completed',
rowsProcessed: 2048,
rowsFailed: 12,
durationSeconds: 45,
completedAt: new Date().toISOString(),
},
{
jobId: '550e8400-e29b-41d4-a716-446655440001',
status: 'Completed',
rowsProcessed: 2015,
rowsFailed: 8,
durationSeconds: 38,
completedAt: new Date(Date.now() - 86400000).toISOString(),
},
])
const calculateQualityScore = (job: IngestionJob): number => {
const total = job.rowsProcessed + job.rowsFailed
const total = job.rowsProcessed + job.rowsFailed + (job.rowsSkipped || 0)
if (total === 0) return 0
return Math.round((job.rowsProcessed / total) * 100)
}
@@ -1,33 +1,70 @@
import { ref } from 'vue';
// Mock data (real implementation would fetch from API)
const job = ref({
jobId: '550e8400-e29b-41d4-a716-446655440000',
status: 'Completed',
rowsProcessed: 2048,
rowsFailed: 12,
durationSeconds: 45,
completedAt: new Date().toISOString(),
import { ref, onMounted } from 'vue';
const job = ref(null);
const recentJobs = ref([]);
const isLoading = ref(true);
const error = ref(null);
// Fetch latest job status from API
const fetchLatestJob = async () => {
try {
// In a real app, this would fetch from /api/market/ingest/latest
// For now, we'll show a loading state
const response = await fetch('/api/market/ingest/latest', {
headers: {
'X-KArtSell-User': 'ingestion-user',
'X-KArtSell-Role': 'DataAdmin',
},
});
if (response.ok) {
job.value = await response.json();
}
else if (response.status === 404) {
// No jobs yet - that's fine
job.value = null;
}
else {
throw new Error(`API error: ${response.status}`);
}
}
catch (err) {
console.error('Failed to fetch latest job:', err);
// Don't fail the page, just show no data
job.value = null;
}
};
// Fetch recent jobs history
const fetchRecentJobs = async () => {
try {
const response = await fetch('/api/market/ingest/history?limit=10', {
headers: {
'X-KArtSell-User': 'ingestion-user',
'X-KArtSell-Role': 'DataAdmin',
},
});
if (response.ok) {
recentJobs.value = await response.json();
}
}
catch (err) {
console.error('Failed to fetch recent jobs:', err);
error.value = 'Failed to load job history';
}
finally {
isLoading.value = false;
}
};
onMounted(() => {
fetchLatestJob();
fetchRecentJobs();
// Auto-refresh every 10 seconds if there's an active job
const interval = setInterval(() => {
if (job.value?.status === 'Running' || job.value?.status === 'Queued') {
fetchLatestJob();
}
}, 10000);
return () => clearInterval(interval);
});
const recentJobs = ref([
{
jobId: '550e8400-e29b-41d4-a716-446655440000',
status: 'Completed',
rowsProcessed: 2048,
rowsFailed: 12,
durationSeconds: 45,
completedAt: new Date().toISOString(),
},
{
jobId: '550e8400-e29b-41d4-a716-446655440001',
status: 'Completed',
rowsProcessed: 2015,
rowsFailed: 8,
durationSeconds: 38,
completedAt: new Date(Date.now() - 86400000).toISOString(),
},
]);
const calculateQualityScore = (job) => {
const total = job.rowsProcessed + job.rowsFailed;
const total = job.rowsProcessed + job.rowsFailed + (job.rowsSkipped || 0);
if (total === 0)
return 0;
return Math.round((job.rowsProcessed / total) * 100);
@@ -0,0 +1,461 @@
<template>
<div class="market-data-ingestion">
<div class="header">
<h1>📊 Market Data Ingestion</h1>
<p class="subtitle">Schedule KRX historical data collection</p>
</div>
<div class="content">
<!-- Configuration Card -->
<div class="config-card">
<h2>1. Select Data Source & Period</h2>
<div class="form-group">
<label>Data Source</label>
<select v-model="form.dataSource">
<option value="KRX">KRX (Korea Exchange) - KOSPI/KOSDAQ Daily</option>
<option value="OpenDart">OpenDart - Financial Disclosures (T+2)</option>
<option value="Stub">Stub (Test Data)</option>
</select>
<p class="hint">
<strong>KRX:</strong> Stock prices (Open/High/Low/Close/Volume)
<strong>OpenDart:</strong> Corporate disclosures & filings
</p>
</div>
<div class="form-row">
<div class="form-group">
<label>From Date</label>
<input
v-model="form.fromDate"
type="date"
:min="minDate"
:max="maxDate"
placeholder="YYYY-MM-DD"
/>
<p class="hint">Earliest: {{ minDate }}</p>
</div>
<div class="form-group">
<label>To Date</label>
<input
v-model="form.toDate"
type="date"
:min="form.fromDate || minDate"
:max="maxDate"
placeholder="YYYY-MM-DD"
/>
<p class="hint">Latest: {{ maxDate }}</p>
</div>
</div>
<!-- Quick presets -->
<div class="presets">
<button @click="setPreset('1y')" class="preset-btn">Last 1 Year</button>
<button @click="setPreset('2y')" class="preset-btn">Last 2 Years</button>
<button @click="setPreset('5y')" class="preset-btn">Last 5 Years</button>
<button @click="setPreset('all')" class="preset-btn">All Available</button>
</div>
</div>
<!-- Validation & Summary -->
<div v-if="validationErrors.length" class="error-card">
<h3> Validation Errors</h3>
<ul>
<li v-for="(err, idx) in validationErrors" :key="idx">{{ err }}</li>
</ul>
</div>
<div v-if="!validationErrors.length" class="summary-card">
<h3>📋 Collection Summary</h3>
<div class="summary-grid">
<div class="summary-item">
<span class="label">Data Source:</span>
<span class="value">{{ form.dataSource }}</span>
</div>
<div class="summary-item">
<span class="label">Period:</span>
<span class="value">{{ form.fromDate }} to {{ form.toDate }}</span>
</div>
<div class="summary-item">
<span class="label">Days:</span>
<span class="value">{{ daysCount }}</span>
</div>
<div class="summary-item">
<span class="label">Est. Rows:</span>
<span class="value">{{ estimatedRows }}</span>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="actions">
<button
@click="triggerIngestion"
:disabled="isLoading || validationErrors.length > 0"
class="btn-primary"
>
<span v-if="!isLoading">🚀 Schedule Ingestion</span>
<span v-else> Processing...</span>
</button>
<button @click="resetForm" class="btn-secondary"> Reset</button>
</div>
<!-- Success Message -->
<div v-if="jobId" class="success-card">
<h3> Job Scheduled Successfully</h3>
<div class="job-info">
<p><strong>Job ID:</strong> {{ jobId }}</p>
<p><strong>Status:</strong> Queued</p>
<p><strong>Queued At:</strong> {{ new Date().toLocaleString() }}</p>
<p class="hint">The ingestion will run in the background. Check the status in History tab.</p>
</div>
<router-link to="/ops/market-data-history" class="btn-link">
📈 View Collection History
</router-link>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const isLoading = ref(false)
const jobId = ref<string | null>(null)
const form = ref({
dataSource: 'KRX',
fromDate: new Date(Date.now() - 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
toDate: new Date().toISOString().split('T')[0],
})
const minDate = '2015-01-01' // KRX historical data starts here
const maxDate = new Date().toISOString().split('T')[0] // Today
const validationErrors = computed(() => {
const errors: string[] = []
if (!form.value.fromDate) errors.push('From Date is required')
if (!form.value.toDate) errors.push('To Date is required')
if (form.value.fromDate && form.value.toDate) {
if (form.value.fromDate > form.value.toDate) {
errors.push('From Date must be before To Date')
}
if (form.value.toDate > maxDate) {
errors.push('To Date cannot be in the future')
}
}
return errors
})
const daysCount = computed(() => {
if (!form.value.fromDate || !form.value.toDate) return 0
const from = new Date(form.value.fromDate)
const to = new Date(form.value.toDate)
return Math.ceil((to.getTime() - from.getTime()) / (1000 * 60 * 60 * 24))
})
const estimatedRows = computed(() => {
// KRX: ~2000 stocks × days
// OpenDart: ~200 quarterly filings
if (form.value.dataSource === 'KRX') {
return (daysCount.value * 2000).toLocaleString()
} else if (form.value.dataSource === 'OpenDart') {
return (Math.ceil(daysCount.value / 90) * 200).toLocaleString()
}
return '0'
})
const setPreset = (preset: string) => {
const today = new Date()
const from = new Date()
if (preset === '1y') from.setFullYear(from.getFullYear() - 1)
else if (preset === '2y') from.setFullYear(from.getFullYear() - 2)
else if (preset === '5y') from.setFullYear(from.getFullYear() - 5)
else if (preset === 'all') from.setFullYear(2015)
form.value.fromDate = from.toISOString().split('T')[0]
form.value.toDate = today.toISOString().split('T')[0]
}
const triggerIngestion = async () => {
if (validationErrors.value.length > 0) return
isLoading.value = true
try {
const response = await fetch('/api/market/ingest', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-KArtSell-User': 'ingestion-user',
'X-KArtSell-Role': 'DataAdmin',
},
body: JSON.stringify({
dataSource: form.value.dataSource,
fromDate: form.value.fromDate,
toDate: form.value.toDate,
}),
})
if (!response.ok) {
throw new Error(`HTTP ${response.status}`)
}
const data = await response.json()
jobId.value = data.jobId
// Reset form after success
setTimeout(() => {
form.value.fromDate = new Date(Date.now() - 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
form.value.toDate = new Date().toISOString().split('T')[0]
jobId.value = null
}, 5000)
} catch (error) {
console.error('Ingestion error:', error)
alert(`Failed to trigger ingestion: ${error instanceof Error ? error.message : 'Unknown error'}`)
} finally {
isLoading.value = false
}
}
const resetForm = () => {
form.value = {
dataSource: 'KRX',
fromDate: new Date(Date.now() - 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
toDate: new Date().toISOString().split('T')[0],
}
jobId.value = null
}
</script>
<style scoped>
.market-data-ingestion {
padding: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.header {
margin-bottom: 2rem;
}
.header h1 {
font-size: 2rem;
margin: 0 0 0.5rem 0;
}
.subtitle {
color: var(--text-secondary);
margin: 0;
}
.content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.config-card,
.summary-card,
.error-card,
.success-card {
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem;
background: var(--surface-elevated);
}
.config-card h2,
.summary-card h3,
.error-card h3,
.success-card h3 {
margin: 0 0 1rem 0;
font-size: 1.1rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.form-group select,
.form-group input {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 1rem;
background: var(--surface);
color: var(--text-primary);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.hint {
font-size: 0.8rem;
color: var(--text-secondary);
margin-top: 0.25rem;
margin-bottom: 0;
}
.presets {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
flex-wrap: wrap;
}
.preset-btn {
padding: 0.5rem 1rem;
border: 1px solid var(--border-color);
border-radius: 4px;
background: var(--surface);
cursor: pointer;
font-size: 0.85rem;
transition: all 0.2s;
}
.preset-btn:hover {
background: var(--surface-secondary);
border-color: #3b82f6;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.summary-item {
display: flex;
justify-content: space-between;
padding: 0.75rem;
background: var(--surface);
border-radius: 4px;
}
.summary-item .label {
font-weight: 600;
color: var(--text-secondary);
}
.summary-item .value {
font-weight: 600;
color: #3b82f6;
}
.error-card {
border-color: #ef4444;
background-color: #fef2f2;
}
.error-card h3 {
color: #991b1b;
}
.error-card ul {
margin: 0;
padding-left: 1.5rem;
color: #7f1d1d;
}
.error-card li {
margin-bottom: 0.5rem;
}
.success-card {
border-color: #10b981;
background-color: #f0fdf4;
}
.success-card h3 {
color: #065f46;
}
.job-info {
background: var(--surface);
padding: 1rem;
border-radius: 4px;
margin-bottom: 1rem;
}
.job-info p {
margin: 0.5rem 0;
color: #065f46;
font-size: 0.9rem;
}
.job-info strong {
color: #047857;
}
.actions {
display: flex;
gap: 1rem;
}
.btn-primary,
.btn-secondary,
.btn-link {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 4px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-primary {
background: #3b82f6;
color: white;
}
.btn-primary:hover:not(:disabled) {
background: #2563eb;
}
.btn-primary:disabled {
background: #d1d5db;
cursor: not-allowed;
}
.btn-secondary {
background: var(--surface-secondary);
color: var(--text-primary);
border: 1px solid var(--border-color);
}
.btn-secondary:hover {
background: var(--border-color);
}
.btn-link {
background: transparent;
color: #3b82f6;
text-decoration: none;
padding: 0;
border: none;
}
.btn-link:hover {
text-decoration: underline;
}
</style>
@@ -0,0 +1,407 @@
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const isLoading = ref(false);
const jobId = ref(null);
const form = ref({
dataSource: 'KRX',
fromDate: new Date(Date.now() - 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
toDate: new Date().toISOString().split('T')[0],
});
const minDate = '2015-01-01'; // KRX historical data starts here
const maxDate = new Date().toISOString().split('T')[0]; // Today
const validationErrors = computed(() => {
const errors = [];
if (!form.value.fromDate)
errors.push('From Date is required');
if (!form.value.toDate)
errors.push('To Date is required');
if (form.value.fromDate && form.value.toDate) {
if (form.value.fromDate > form.value.toDate) {
errors.push('From Date must be before To Date');
}
if (form.value.toDate > maxDate) {
errors.push('To Date cannot be in the future');
}
}
return errors;
});
const daysCount = computed(() => {
if (!form.value.fromDate || !form.value.toDate)
return 0;
const from = new Date(form.value.fromDate);
const to = new Date(form.value.toDate);
return Math.ceil((to.getTime() - from.getTime()) / (1000 * 60 * 60 * 24));
});
const estimatedRows = computed(() => {
// KRX: ~2000 stocks × days
// OpenDart: ~200 quarterly filings
if (form.value.dataSource === 'KRX') {
return (daysCount.value * 2000).toLocaleString();
}
else if (form.value.dataSource === 'OpenDart') {
return (Math.ceil(daysCount.value / 90) * 200).toLocaleString();
}
return '0';
});
const setPreset = (preset) => {
const today = new Date();
const from = new Date();
if (preset === '1y')
from.setFullYear(from.getFullYear() - 1);
else if (preset === '2y')
from.setFullYear(from.getFullYear() - 2);
else if (preset === '5y')
from.setFullYear(from.getFullYear() - 5);
else if (preset === 'all')
from.setFullYear(2015);
form.value.fromDate = from.toISOString().split('T')[0];
form.value.toDate = today.toISOString().split('T')[0];
};
const triggerIngestion = async () => {
if (validationErrors.value.length > 0)
return;
isLoading.value = true;
try {
const response = await fetch('/api/market/ingest', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-KArtSell-User': 'ingestion-user',
'X-KArtSell-Role': 'DataAdmin',
},
body: JSON.stringify({
dataSource: form.value.dataSource,
fromDate: form.value.fromDate,
toDate: form.value.toDate,
}),
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
jobId.value = data.jobId;
// Reset form after success
setTimeout(() => {
form.value.fromDate = new Date(Date.now() - 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
form.value.toDate = new Date().toISOString().split('T')[0];
jobId.value = null;
}, 5000);
}
catch (error) {
console.error('Ingestion error:', error);
alert(`Failed to trigger ingestion: ${error instanceof Error ? error.message : 'Unknown error'}`);
}
finally {
isLoading.value = false;
}
};
const resetForm = () => {
form.value = {
dataSource: 'KRX',
fromDate: new Date(Date.now() - 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
toDate: new Date().toISOString().split('T')[0],
};
jobId.value = null;
};
const __VLS_ctx = {
...{},
...{},
};
let __VLS_components;
let __VLS_intrinsics;
let __VLS_directives;
/** @type {__VLS_StyleScopedClasses['header']} */ ;
/** @type {__VLS_StyleScopedClasses['config-card']} */ ;
/** @type {__VLS_StyleScopedClasses['summary-card']} */ ;
/** @type {__VLS_StyleScopedClasses['error-card']} */ ;
/** @type {__VLS_StyleScopedClasses['success-card']} */ ;
/** @type {__VLS_StyleScopedClasses['form-group']} */ ;
/** @type {__VLS_StyleScopedClasses['form-group']} */ ;
/** @type {__VLS_StyleScopedClasses['form-group']} */ ;
/** @type {__VLS_StyleScopedClasses['preset-btn']} */ ;
/** @type {__VLS_StyleScopedClasses['summary-item']} */ ;
/** @type {__VLS_StyleScopedClasses['summary-item']} */ ;
/** @type {__VLS_StyleScopedClasses['error-card']} */ ;
/** @type {__VLS_StyleScopedClasses['error-card']} */ ;
/** @type {__VLS_StyleScopedClasses['error-card']} */ ;
/** @type {__VLS_StyleScopedClasses['error-card']} */ ;
/** @type {__VLS_StyleScopedClasses['success-card']} */ ;
/** @type {__VLS_StyleScopedClasses['success-card']} */ ;
/** @type {__VLS_StyleScopedClasses['job-info']} */ ;
/** @type {__VLS_StyleScopedClasses['job-info']} */ ;
/** @type {__VLS_StyleScopedClasses['btn-primary']} */ ;
/** @type {__VLS_StyleScopedClasses['btn-primary']} */ ;
/** @type {__VLS_StyleScopedClasses['btn-primary']} */ ;
/** @type {__VLS_StyleScopedClasses['btn-secondary']} */ ;
/** @type {__VLS_StyleScopedClasses['btn-secondary']} */ ;
/** @type {__VLS_StyleScopedClasses['btn-link']} */ ;
/** @type {__VLS_StyleScopedClasses['btn-link']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "market-data-ingestion" },
});
/** @type {__VLS_StyleScopedClasses['market-data-ingestion']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "header" },
});
/** @type {__VLS_StyleScopedClasses['header']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.h1, __VLS_intrinsics.h1)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.p, __VLS_intrinsics.p)({
...{ class: "subtitle" },
});
/** @type {__VLS_StyleScopedClasses['subtitle']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "content" },
});
/** @type {__VLS_StyleScopedClasses['content']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "config-card" },
});
/** @type {__VLS_StyleScopedClasses['config-card']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.h2, __VLS_intrinsics.h2)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "form-group" },
});
/** @type {__VLS_StyleScopedClasses['form-group']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.select, __VLS_intrinsics.select)({
value: (__VLS_ctx.form.dataSource),
});
__VLS_asFunctionalElement1(__VLS_intrinsics.option, __VLS_intrinsics.option)({
value: "KRX",
});
__VLS_asFunctionalElement1(__VLS_intrinsics.option, __VLS_intrinsics.option)({
value: "OpenDart",
});
__VLS_asFunctionalElement1(__VLS_intrinsics.option, __VLS_intrinsics.option)({
value: "Stub",
});
__VLS_asFunctionalElement1(__VLS_intrinsics.p, __VLS_intrinsics.p)({
...{ class: "hint" },
});
/** @type {__VLS_StyleScopedClasses['hint']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.strong, __VLS_intrinsics.strong)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.strong, __VLS_intrinsics.strong)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "form-row" },
});
/** @type {__VLS_StyleScopedClasses['form-row']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "form-group" },
});
/** @type {__VLS_StyleScopedClasses['form-group']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.input)({
type: "date",
min: (__VLS_ctx.minDate),
max: (__VLS_ctx.maxDate),
placeholder: "YYYY-MM-DD",
});
(__VLS_ctx.form.fromDate);
__VLS_asFunctionalElement1(__VLS_intrinsics.p, __VLS_intrinsics.p)({
...{ class: "hint" },
});
/** @type {__VLS_StyleScopedClasses['hint']} */ ;
(__VLS_ctx.minDate);
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "form-group" },
});
/** @type {__VLS_StyleScopedClasses['form-group']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.input)({
type: "date",
min: (__VLS_ctx.form.fromDate || __VLS_ctx.minDate),
max: (__VLS_ctx.maxDate),
placeholder: "YYYY-MM-DD",
});
(__VLS_ctx.form.toDate);
__VLS_asFunctionalElement1(__VLS_intrinsics.p, __VLS_intrinsics.p)({
...{ class: "hint" },
});
/** @type {__VLS_StyleScopedClasses['hint']} */ ;
(__VLS_ctx.maxDate);
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "presets" },
});
/** @type {__VLS_StyleScopedClasses['presets']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
...{ onClick: (...[$event]) => {
return (__VLS_ctx.setPreset('1y'));
// @ts-ignore
[form, form, form, form, minDate, minDate, minDate, maxDate, maxDate, maxDate, setPreset,];
} },
...{ class: "preset-btn" },
});
/** @type {__VLS_StyleScopedClasses['preset-btn']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
...{ onClick: (...[$event]) => {
return (__VLS_ctx.setPreset('2y'));
// @ts-ignore
[setPreset,];
} },
...{ class: "preset-btn" },
});
/** @type {__VLS_StyleScopedClasses['preset-btn']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
...{ onClick: (...[$event]) => {
return (__VLS_ctx.setPreset('5y'));
// @ts-ignore
[setPreset,];
} },
...{ class: "preset-btn" },
});
/** @type {__VLS_StyleScopedClasses['preset-btn']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
...{ onClick: (...[$event]) => {
return (__VLS_ctx.setPreset('all'));
// @ts-ignore
[setPreset,];
} },
...{ class: "preset-btn" },
});
/** @type {__VLS_StyleScopedClasses['preset-btn']} */ ;
if (__VLS_ctx.validationErrors.length) {
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "error-card" },
});
/** @type {__VLS_StyleScopedClasses['error-card']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.h3, __VLS_intrinsics.h3)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.ul, __VLS_intrinsics.ul)({});
for (const [err, idx] of __VLS_vFor((__VLS_ctx.validationErrors))) {
__VLS_asFunctionalElement1(__VLS_intrinsics.li, __VLS_intrinsics.li)({
key: (idx),
});
(err);
// @ts-ignore
[validationErrors, validationErrors,];
}
}
if (!__VLS_ctx.validationErrors.length) {
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "summary-card" },
});
/** @type {__VLS_StyleScopedClasses['summary-card']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.h3, __VLS_intrinsics.h3)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "summary-grid" },
});
/** @type {__VLS_StyleScopedClasses['summary-grid']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "summary-item" },
});
/** @type {__VLS_StyleScopedClasses['summary-item']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
...{ class: "label" },
});
/** @type {__VLS_StyleScopedClasses['label']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
...{ class: "value" },
});
/** @type {__VLS_StyleScopedClasses['value']} */ ;
(__VLS_ctx.form.dataSource);
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "summary-item" },
});
/** @type {__VLS_StyleScopedClasses['summary-item']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
...{ class: "label" },
});
/** @type {__VLS_StyleScopedClasses['label']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
...{ class: "value" },
});
/** @type {__VLS_StyleScopedClasses['value']} */ ;
(__VLS_ctx.form.fromDate);
(__VLS_ctx.form.toDate);
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "summary-item" },
});
/** @type {__VLS_StyleScopedClasses['summary-item']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
...{ class: "label" },
});
/** @type {__VLS_StyleScopedClasses['label']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
...{ class: "value" },
});
/** @type {__VLS_StyleScopedClasses['value']} */ ;
(__VLS_ctx.daysCount);
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "summary-item" },
});
/** @type {__VLS_StyleScopedClasses['summary-item']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
...{ class: "label" },
});
/** @type {__VLS_StyleScopedClasses['label']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
...{ class: "value" },
});
/** @type {__VLS_StyleScopedClasses['value']} */ ;
(__VLS_ctx.estimatedRows);
}
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "actions" },
});
/** @type {__VLS_StyleScopedClasses['actions']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
...{ onClick: (__VLS_ctx.triggerIngestion) },
disabled: (__VLS_ctx.isLoading || __VLS_ctx.validationErrors.length > 0),
...{ class: "btn-primary" },
});
/** @type {__VLS_StyleScopedClasses['btn-primary']} */ ;
if (!__VLS_ctx.isLoading) {
__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({});
}
else {
__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({});
}
__VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
...{ onClick: (__VLS_ctx.resetForm) },
...{ class: "btn-secondary" },
});
/** @type {__VLS_StyleScopedClasses['btn-secondary']} */ ;
if (__VLS_ctx.jobId) {
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "success-card" },
});
/** @type {__VLS_StyleScopedClasses['success-card']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.h3, __VLS_intrinsics.h3)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
...{ class: "job-info" },
});
/** @type {__VLS_StyleScopedClasses['job-info']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.p, __VLS_intrinsics.p)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.strong, __VLS_intrinsics.strong)({});
(__VLS_ctx.jobId);
__VLS_asFunctionalElement1(__VLS_intrinsics.p, __VLS_intrinsics.p)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.strong, __VLS_intrinsics.strong)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.p, __VLS_intrinsics.p)({});
__VLS_asFunctionalElement1(__VLS_intrinsics.strong, __VLS_intrinsics.strong)({});
(new Date().toLocaleString());
__VLS_asFunctionalElement1(__VLS_intrinsics.p, __VLS_intrinsics.p)({
...{ class: "hint" },
});
/** @type {__VLS_StyleScopedClasses['hint']} */ ;
let __VLS_0;
/** @ts-ignore @type { | typeof __VLS_components.routerLink | typeof __VLS_components.RouterLink | typeof __VLS_components['router-link'] | typeof __VLS_components.routerLink | typeof __VLS_components.RouterLink | typeof __VLS_components['router-link']} */
routerLink;
// @ts-ignore
const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
to: "/ops/market-data-history",
...{ class: "btn-link" },
}));
const __VLS_2 = __VLS_1({
to: "/ops/market-data-history",
...{ class: "btn-link" },
}, ...__VLS_functionalComponentArgsRest(__VLS_1));
/** @type {__VLS_StyleScopedClasses['btn-link']} */ ;
const { default: __VLS_5 } = __VLS_3.slots;
// @ts-ignore
[form, form, form, validationErrors, validationErrors, daysCount, estimatedRows, triggerIngestion, isLoading, isLoading, resetForm, jobId, jobId,];
var __VLS_3;
}
// @ts-ignore
[];
const __VLS_export = (await import('vue')).defineComponent({});
export default {};
File diff suppressed because one or more lines are too long