DevLoopOps.vue
1.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<template>
<div class="devloop-ops">
<header class="hdr">
<router-link :to="`/devloop/${pid}`" class="back">← Dashboard</router-link>
<h1>Ops · {{ pid }}</h1>
</header>
<nav class="tabs">
<router-link
v-for="t in tabs"
:key="t.id"
:to="`/devloop/${pid}/ops/${t.id}`"
:class="['tab', { active: t.id === tab }]"
>{{ t.label }}</router-link>
</nav>
<component :is="activeView" :pid="pid" />
</div>
</template>
<script setup>
import { computed } from 'vue';
import BuglistView from '@/components/devloop/ops/BuglistView.vue';
import LoopLogView from '@/components/devloop/ops/LoopLogView.vue';
import ChangelogView from '@/components/devloop/ops/ChangelogView.vue';
import ProgressView from '@/components/devloop/ops/ProgressView.vue';
const props = defineProps({
pid: { type: String, required: true },
tab: { type: String, required: true },
});
const tabs = [
{ id: 'bugs', label: 'Bugs' },
{ id: 'loops', label: 'Loops (Timeline)' },
{ id: 'changelog', label: 'Changelog' },
{ id: 'progress', label: 'Progress' },
];
const viewMap = {
bugs: BuglistView,
loops: LoopLogView,
changelog: ChangelogView,
progress: ProgressView,
};
const activeView = computed(() => viewMap[props.tab] || BuglistView);
</script>
<style scoped>
.devloop-ops { max-width: 1280px; margin: 0 auto; padding: 16px 24px; }
.hdr { display:flex; align-items:center; gap:14px; padding-bottom:8px; border-bottom:1px solid #eee; }
.back { color:#888; text-decoration:none; font-size:13px; }
.back:hover { color:#222; }
h1 { font-size:18px; margin:0; font-family: ui-monospace, monospace; }
.tabs { display:flex; gap:0; margin:16px 0; border-bottom:1px solid #e3e3e8; }
.tab {
padding:8px 16px; text-decoration:none; color:#666; border-bottom:2px solid transparent;
font-size:13px; font-weight:500;
}
.tab:hover { color:#222; }
.tab.active { color:#0a6; border-bottom-color:#0a6; }
</style>