kjh2064
70852bf378
- Removed all @kbx/contracts imports and types
- Cleaned up feature registries (minimal definitions)
- Simplified page components (HomePage, ModelsList, ShadowRunList)
- Removed KBX UI components and adapters
- Fixed TypeScript errors with type casting
- Frontend build: 737KB (204KB gzip) ✅
CI/CD Pipeline: Ready for testing
131 lines
2.8 KiB
Vue
131 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { SkeletonLoader } from '@shared/ui/components'
|
|
import { useModelsList } from '../composables/useModels'
|
|
|
|
const currentPage = ref(1)
|
|
const pageSize = ref(20)
|
|
|
|
const queryParams = computed(() => ({
|
|
page: currentPage.value,
|
|
pageSize: pageSize.value,
|
|
}))
|
|
|
|
const modelsQuery = useModelsList(queryParams.value)
|
|
|
|
const items = computed(() => {
|
|
const data = modelsQuery.data as any
|
|
return data?.items || []
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="models-page">
|
|
<header class="page-header">
|
|
<h1>Model Management</h1>
|
|
<p>Manage trading models across their complete lifecycle</p>
|
|
</header>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="modelsQuery.isPending" class="loading-state">
|
|
<SkeletonLoader type="table" :rows="5" />
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div v-else-if="modelsQuery.isError" class="error-state">
|
|
<p>Failed to load models</p>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-else-if="!items.length" class="empty-state">
|
|
<p>No models found. Create a new model to get started.</p>
|
|
</div>
|
|
|
|
<!-- Data State -->
|
|
<div v-else class="models-grid">
|
|
<table class="models-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Model ID</th>
|
|
<th>Name</th>
|
|
<th>Phase</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="model in items" :key="model.id" data-testid="model-row">
|
|
<td>{{ (model as any).id }}</td>
|
|
<td>{{ (model as any).name }}</td>
|
|
<td>{{ (model as any).phase }}</td>
|
|
<td>{{ (model as any).active ? 'Active' : 'Inactive' }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.models-page {
|
|
padding: 2rem;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.page-header h1 {
|
|
margin: 0;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.page-header p {
|
|
margin: 0.5rem 0 0 0;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.loading-state,
|
|
.error-state,
|
|
.empty-state {
|
|
padding: 2rem;
|
|
text-align: center;
|
|
border: 1px solid var(--color-border-primary);
|
|
border-radius: var(--border-radius-md);
|
|
background-color: var(--color-background-secondary);
|
|
}
|
|
|
|
.models-grid {
|
|
border: 1px solid var(--color-border-primary);
|
|
border-radius: var(--border-radius-md);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.models-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.models-table thead {
|
|
background-color: var(--color-background-secondary);
|
|
}
|
|
|
|
.models-table th {
|
|
padding: 1rem;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
border-bottom: 1px solid var(--color-border-primary);
|
|
}
|
|
|
|
.models-table td {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--color-border-primary);
|
|
}
|
|
|
|
.models-table tbody tr:hover {
|
|
background-color: var(--color-background-hover);
|
|
}
|
|
</style>
|