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
111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { SkeletonLoader } from '@shared/ui/components'
|
|
import { useModelDetail } from '../composables/useModels'
|
|
|
|
const route = useRoute()
|
|
|
|
const modelId = computed(() => route.params.modelId as string)
|
|
|
|
const modelQuery = useModelDetail(modelId.value)
|
|
|
|
const model = computed(() => modelQuery.data as any)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="model-detail-page">
|
|
<header class="page-header">
|
|
<h1>Model Details</h1>
|
|
</header>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="modelQuery.isPending" class="loading-state">
|
|
<SkeletonLoader type="card" />
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div v-else-if="modelQuery.isError" class="error-state">
|
|
<p>Failed to load model</p>
|
|
</div>
|
|
|
|
<!-- Data State -->
|
|
<div v-else-if="model && model.name" class="model-detail">
|
|
<div class="detail-section">
|
|
<h2>{{ model.name }}</h2>
|
|
<div class="detail-grid">
|
|
<div class="detail-item">
|
|
<label>Model ID</label>
|
|
<p>{{ model.id }}</p>
|
|
</div>
|
|
<div class="detail-item">
|
|
<label>Phase</label>
|
|
<p>{{ model.phase }}</p>
|
|
</div>
|
|
<div class="detail-item">
|
|
<label>Status</label>
|
|
<p>{{ model.active ? 'Active' : 'Inactive' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.model-detail-page {
|
|
padding: 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.page-header h1 {
|
|
margin: 0;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.loading-state,
|
|
.error-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);
|
|
}
|
|
|
|
.model-detail {
|
|
border: 1px solid var(--color-border-primary);
|
|
border-radius: var(--border-radius-md);
|
|
padding: 2rem;
|
|
background-color: var(--color-background-secondary);
|
|
}
|
|
|
|
.detail-section h2 {
|
|
margin: 0 0 1.5rem 0;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.detail-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.detail-item label {
|
|
display: block;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.detail-item p {
|
|
margin: 0;
|
|
color: var(--color-text-primary);
|
|
}
|
|
</style>
|