ekko
351c861777
- Migrate source to packages/client and packages/server directories - Namespace all Hermes-specific code under hermes/ subdirectories (api/hermes/, components/hermes/, views/hermes/, stores/hermes/) - Add hermes.* route names and /hermes/* path prefixes - Upgrade @koa/router to v15, adapt path-to-regexp v8 syntax - Fix proxy path rewriting: /api/hermes/v1/* → /v1/*, /api/hermes/* → /api/* - Fix frontend API paths to match backend /api/hermes/* routes - Fix WebSocket terminal path to /api/hermes/terminal - Add proxyMiddleware for reliable unmatched route proxying - Add profiles route module and hermes-cli profile commands - Update CLAUDE.md development guide with new architecture - Add Chinese README (README_zh.md) - Add Web Terminal feature to README Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
98 lines
2.5 KiB
Vue
98 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useUsageStore } from '@/stores/hermes/usage'
|
|
|
|
const { t } = useI18n()
|
|
const usageStore = useUsageStore()
|
|
|
|
function formatTokens(n: number): string {
|
|
if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M'
|
|
if (n >= 1000) return (n / 1000).toFixed(1) + 'K'
|
|
return String(n)
|
|
}
|
|
|
|
function formatCost(n: number): string {
|
|
if (n === 0) return '$0.00'
|
|
if (n < 0.01) return '<$0.01'
|
|
return '$' + n.toFixed(2)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="stat-cards">
|
|
<div class="stat-card">
|
|
<div class="stat-label">{{ t('usage.totalTokens') }}</div>
|
|
<div class="stat-value">{{ formatTokens(usageStore.totalTokens) }}</div>
|
|
<div class="stat-sub">
|
|
{{ formatTokens(usageStore.totalInputTokens) }} {{ t('usage.inputTokens') }} /
|
|
{{ formatTokens(usageStore.totalOutputTokens) }} {{ t('usage.outputTokens') }}
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">{{ t('usage.totalSessions') }}</div>
|
|
<div class="stat-value">{{ usageStore.totalSessions }}</div>
|
|
<div class="stat-sub">{{ t('usage.avgPerDay', { n: usageStore.avgSessionsPerDay.toFixed(1) }) }}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">{{ t('usage.estimatedCost') }}</div>
|
|
<div class="stat-value">{{ formatCost(usageStore.estimatedCost) }}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">{{ t('usage.cacheHitRate') }}</div>
|
|
<div class="stat-value">{{ usageStore.cacheHitRate !== null ? usageStore.cacheHitRate.toFixed(1) + '%' : '--' }}</div>
|
|
<div class="stat-sub" v-if="usageStore.cacheHitRate !== null">
|
|
{{ formatTokens(usageStore.totalCacheTokens) }} {{ t('usage.tokens') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@use '@/styles/variables' as *;
|
|
|
|
.stat-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: $bg-card;
|
|
border: 1px solid $border-color;
|
|
border-radius: $radius-md;
|
|
padding: 16px;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 12px;
|
|
color: $text-muted;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: $text-primary;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.stat-sub {
|
|
font-size: 11px;
|
|
color: $text-muted;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.stat-cards {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.stat-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|