[Reviewer] Dashboard Review: Interface-Bereinigung, SVG-Composable-Extraktion, Komponenten-Renaming, CSS-Fix
- AgentNodeData: Remove redundant fields task/runtime (dup of currentTask/runtimeSeconds) - useTeamNetworkSvg: Extract SVG layout, path computation + pulse animation from TeamNetwork - TeamNetwork: Use AgentNodeData type, fix undefined pulseElements2/storePulseRef2, remove unused props - Rename MissionCard.vue → TaskCard.vue (matches actual usage) - Extract FeedDetailModal from OperationsFeed (eliminates :global() CSS conflict with AgentModal) - DashboardView: Fix type import path (../../ → ../), remove dead TeamNetwork props - AgentModal: Remove unused thinkingStreamRef template ref Build: vue-tsc --noEmit 0 errors, vite build ✓
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { Activity, ChevronLeft, ChevronRight, X } from '@lucide/vue'
|
||||
import { Activity } from '@lucide/vue'
|
||||
import type { FeedEntry } from '../../composables/useDashboardData'
|
||||
import FeedDetailModal from './FeedDetailModal.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
entries: FeedEntry[]
|
||||
@@ -12,41 +13,10 @@ const compactEntries = computed(() => props.entries.slice(0, 5))
|
||||
|
||||
// ── Feed Detail Modal ──
|
||||
const showDetailModal = ref(false)
|
||||
const selectedDayOffset = ref(0) // 0 = today, -1 = yesterday, etc.
|
||||
|
||||
function openDetailModal() {
|
||||
selectedDayOffset.value = 0
|
||||
showDetailModal.value = true
|
||||
}
|
||||
|
||||
function closeDetailModal() {
|
||||
showDetailModal.value = false
|
||||
}
|
||||
|
||||
function dayLabel(offset: number): string {
|
||||
if (offset === 0) return 'Heute'
|
||||
if (offset === -1) return 'Gestern'
|
||||
if (offset === -2) return 'Vorgestern'
|
||||
const d = new Date()
|
||||
d.setDate(d.getDate() + offset)
|
||||
return d.toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long' })
|
||||
}
|
||||
|
||||
function navigateDay(dir: -1 | 1) {
|
||||
const next = selectedDayOffset.value + dir
|
||||
if (next >= -6 && next <= 0) {
|
||||
selectedDayOffset.value = next
|
||||
}
|
||||
}
|
||||
|
||||
const filteredEntries = computed(() => {
|
||||
const targetDate = new Date()
|
||||
targetDate.setDate(targetDate.getDate() + selectedDayOffset.value)
|
||||
const targetStr = targetDate.toISOString().slice(0, 10)
|
||||
return props.entries.filter(e => e.timestamp.slice(0, 10) === targetStr)
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -81,55 +51,11 @@ const filteredEntries = computed(() => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ── Feed Detail Modal ── -->
|
||||
<Teleport to="body">
|
||||
<div v-if="showDetailModal" class="modal-overlay" @click.self="closeDetailModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Operations Log</h2>
|
||||
<button class="modal-close-btn" @click="closeDetailModal">
|
||||
<X :size="16" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-nav">
|
||||
<button
|
||||
class="nav-btn"
|
||||
:disabled="selectedDayOffset <= -6"
|
||||
@click="navigateDay(-1)"
|
||||
>
|
||||
<ChevronLeft :size="14" />
|
||||
</button>
|
||||
<span class="nav-label">{{ dayLabel(selectedDayOffset) }}</span>
|
||||
<button
|
||||
class="nav-btn"
|
||||
:disabled="selectedDayOffset >= 0"
|
||||
@click="navigateDay(1)"
|
||||
>
|
||||
<ChevronRight :size="14" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-entries">
|
||||
<div v-if="filteredEntries.length === 0" class="modal-empty">
|
||||
Keine Einträge für diesen Tag.
|
||||
</div>
|
||||
<div
|
||||
v-for="(entry, idx) in filteredEntries"
|
||||
:key="entry.timestamp + '-' + idx"
|
||||
class="feed-entry"
|
||||
>
|
||||
<span class="feed-time">{{ entry.time }}</span>
|
||||
<span class="feed-bullet">·</span>
|
||||
<span class="feed-agent" :class="'agent-' + entry.agent.toLowerCase()">
|
||||
{{ entry.agent }}
|
||||
</span>
|
||||
<span class="feed-action">{{ entry.action }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
<FeedDetailModal
|
||||
:entries="entries"
|
||||
:model-value="showDetailModal"
|
||||
@update:model-value="showDetailModal = $event"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -267,104 +193,4 @@ const filteredEntries = computed(() => {
|
||||
.feed-move {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* ── Modal Overlay ── */
|
||||
:global(.modal-overlay) {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
padding: 20px;
|
||||
}
|
||||
:global(.modal-content) {
|
||||
background: #161b22;
|
||||
border: 1px solid rgba(139, 124, 246, 0.15);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
:global(.modal-header) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
:global(.modal-title) {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #e8eaf0;
|
||||
}
|
||||
:global(.modal-close-btn) {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 6px;
|
||||
color: #7e8799;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
:global(.modal-close-btn:hover) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #e8eaf0;
|
||||
}
|
||||
:global(.modal-nav) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
:global(.nav-btn) {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid rgba(139, 124, 246, 0.15);
|
||||
background: rgba(139, 124, 246, 0.08);
|
||||
border-radius: 8px;
|
||||
color: #a78bfa;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
:global(.nav-btn:hover:not(:disabled)) {
|
||||
background: rgba(139, 124, 246, 0.16);
|
||||
border-color: rgba(139, 124, 246, 0.3);
|
||||
}
|
||||
:global(.nav-btn:disabled) {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
:global(.nav-label) {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #d1d5db;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
:global(.modal-entries) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
overflow-y: auto;
|
||||
max-height: 50vh;
|
||||
padding-right: 4px;
|
||||
}
|
||||
:global(.modal-empty) {
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
font-size: 11px;
|
||||
color: #6b7385;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user