f91ef84832
All checks were successful
Test Asgard Runner / test (push) Successful in 4s
Tokens ported 1:1 from the Claude Design bundle (colors/game-themes/type/spacing/elevation/motion/fonts) with the data-theme/data-game theming contract via useThemeGame (+ cc-skin-swap repaint guard). 23 design-system components reimplemented as Vue SFCs (core/forms/data/navigation/feedback/brand). DashboardLayout rebuilt as the game-aware shell (GameSwitcher, grouped nav with permission gating preserved, agent-health footer, topbar). DashboardView: Fleet + Solo with per-game GAME_FIELDS rows and the themed ECharts PlayersChart; Solo wired to the real server store, Fleet on representative data pending the multi-instance backend. All four game skins (Rust/Dune/Conan/Soulmask). vue-tsc + vite build green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
55 lines
2.4 KiB
Vue
55 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* ConsoleLine — one line in the RCON / server log stream.
|
|
* Monospace, color-coded by level. Optional timestamp and actor (who).
|
|
*/
|
|
withDefaults(
|
|
defineProps<{
|
|
time?: string
|
|
level?: 'cmd' | 'chat' | 'info' | 'warn' | 'error' | 'connect' | 'kill'
|
|
who?: string
|
|
}>(),
|
|
{ level: 'info' },
|
|
)
|
|
|
|
const LABEL: Record<string, string> = {
|
|
cmd: 'cmd',
|
|
chat: 'chat',
|
|
info: 'info',
|
|
warn: 'warn',
|
|
error: 'err',
|
|
connect: 'join',
|
|
kill: 'kill',
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="['cc-line', 'cc-line--' + level]">
|
|
<span v-if="time" class="cc-line__time">{{ time }}</span>
|
|
<span class="cc-line__tag">{{ LABEL[level ?? 'info'] ?? level }}</span>
|
|
<span class="cc-line__msg">
|
|
<span v-if="who" class="cc-line__who">{{ who }} </span>
|
|
<slot />
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.cc-line { display: flex; gap: 10px; padding: 2px 12px; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.65; align-items: baseline; }
|
|
.cc-line:hover { background: var(--surface-hover); }
|
|
.cc-line__time { color: var(--text-muted); flex: none; font-variant-numeric: tabular-nums; }
|
|
.cc-line__tag { flex: none; text-transform: uppercase; font-weight: 600; font-size: 10px; letter-spacing: .05em; padding: 0 5px; border-radius: var(--radius-xs); height: 15px; display: inline-flex; align-items: center; }
|
|
.cc-line__msg { color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; min-width: 0; }
|
|
.cc-line__who { color: var(--accent-text); }
|
|
.cc-line--cmd .cc-line__tag { background: var(--accent-soft); color: var(--accent-text); }
|
|
.cc-line--cmd .cc-line__msg { color: var(--text-primary); }
|
|
.cc-line--chat .cc-line__tag { background: var(--surface-active); color: var(--text-secondary); }
|
|
.cc-line--info .cc-line__tag { background: var(--status-info-soft); color: var(--status-info); }
|
|
.cc-line--warn .cc-line__tag { background: var(--status-warn-soft); color: var(--status-warn); }
|
|
.cc-line--warn .cc-line__msg { color: var(--status-warn); }
|
|
.cc-line--error .cc-line__tag { background: var(--status-offline-soft); color: var(--status-offline); }
|
|
.cc-line--error .cc-line__msg { color: var(--status-offline); }
|
|
.cc-line--connect .cc-line__tag { background: var(--status-online-soft); color: var(--status-online); }
|
|
.cc-line--kill .cc-line__tag { background: var(--status-wiping-soft); color: var(--status-wiping); }
|
|
</style>
|