feat: enhance usage analytics dashboard (#666)
- visualize input, output, and cache token segments in usage charts - add usage period selector for 7d, 30d, 90d, and 365d - guard usage stats against stale overlapping period requests - normalize blank model usage into unknown buckets - add client and server coverage for usage analytics behavior
This commit is contained in:
Zhicheng Han
@@ -25,7 +25,7 @@ function cacheHitRate(d: { input_tokens: number; cache_read_tokens: number }): s
|
||||
}
|
||||
|
||||
const maxTokens = computed(() =>
|
||||
Math.max(...usageStore.dailyUsage.map(d => d.input_tokens + d.output_tokens), 1),
|
||||
Math.max(...usageStore.dailyUsage.map(d => d.visualTokens), 1),
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -41,12 +41,25 @@ const maxTokens = computed(() =>
|
||||
>
|
||||
<div class="bar-track">
|
||||
<div
|
||||
class="bar-fill"
|
||||
:style="{
|
||||
height: ((d.input_tokens + d.output_tokens) / maxTokens * 100) + '%',
|
||||
'--output-pct': (d.output_tokens / Math.max(d.input_tokens + d.output_tokens, 1) * 100) + '%',
|
||||
}"
|
||||
/>
|
||||
class="bar-stack"
|
||||
:style="{ height: (d.visualTokens / maxTokens * 100) + '%' }"
|
||||
>
|
||||
<div
|
||||
v-if="d.output_tokens > 0"
|
||||
class="bar-segment output"
|
||||
:style="{ height: d.outputPercent + '%' }"
|
||||
/>
|
||||
<div
|
||||
v-if="d.input_tokens > 0"
|
||||
class="bar-segment input"
|
||||
:style="{ height: d.inputPercent + '%' }"
|
||||
/>
|
||||
<div
|
||||
v-if="d.cache_read_tokens > 0"
|
||||
class="bar-segment cache"
|
||||
:style="{ height: d.cachePercent + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar-tooltip">
|
||||
<div class="tooltip-date">{{ d.date }}</div>
|
||||
@@ -65,6 +78,12 @@ const maxTokens = computed(() =>
|
||||
<span>{{ usageStore.dailyUsage[usageStore.dailyUsage.length - 1]?.date.slice(5) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="chart-legend" aria-label="Token type legend">
|
||||
<div class="legend-item"><span class="legend-swatch input" />{{ t('usage.inputTokens') }}</div>
|
||||
<div class="legend-item"><span class="legend-swatch output" />{{ t('usage.outputTokens') }}</div>
|
||||
<div class="legend-item"><span class="legend-swatch cache" />{{ t('usage.cacheRead') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="trend-table">
|
||||
<table>
|
||||
<thead>
|
||||
@@ -80,7 +99,7 @@ const maxTokens = computed(() =>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="d in [...usageStore.dailyUsage].reverse().slice(0, 30)" :key="d.date">
|
||||
<tr v-for="d in [...usageStore.dailyUsage].reverse()" :key="d.date">
|
||||
<td>{{ d.date }}</td>
|
||||
<td>{{ formatTokens(d.input_tokens) }}</td>
|
||||
<td>{{ formatTokens(d.output_tokens) }}</td>
|
||||
@@ -135,21 +154,38 @@ const maxTokens = computed(() =>
|
||||
border-radius: 2px 2px 0 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bar-fill {
|
||||
.bar-stack {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
|
||||
.bar-segment {
|
||||
width: 100%;
|
||||
border-radius: 2px 2px 0 0;
|
||||
min-height: 0;
|
||||
transition: height 0.3s ease;
|
||||
/* Bottom = output (teal), top = input (blue) */
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
#26a69a 0%,
|
||||
#26a69a var(--output-pct, 50%),
|
||||
#5c6bc0 var(--output-pct, 50%),
|
||||
#5c6bc0 100%
|
||||
);
|
||||
}
|
||||
|
||||
.bar-segment.output,
|
||||
.legend-swatch.output {
|
||||
background: #26a69a;
|
||||
}
|
||||
|
||||
.bar-segment.input,
|
||||
.legend-swatch.input {
|
||||
background: #5c6bc0;
|
||||
}
|
||||
|
||||
.bar-segment.cache,
|
||||
.legend-swatch.cache {
|
||||
background: #f6ad55;
|
||||
}
|
||||
|
||||
.bar-tooltip {
|
||||
@@ -184,12 +220,10 @@ const maxTokens = computed(() =>
|
||||
|
||||
.tooltip-date {
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.tooltip-row {
|
||||
font-size: 10px;
|
||||
opacity: 0.85;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -198,46 +232,59 @@ const maxTokens = computed(() =>
|
||||
justify-content: space-between;
|
||||
font-size: 10px;
|
||||
color: $text-muted;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 14px;
|
||||
margin: 0 0 16px;
|
||||
color: $text-muted;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.legend-swatch {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.trend-table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
text-align: right;
|
||||
padding: 6px 8px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
padding: 8px 10px;
|
||||
font-weight: 600;
|
||||
color: $text-muted;
|
||||
border-bottom: 1px solid $border-color;
|
||||
background: $bg-card;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
th:first-child,
|
||||
td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 6px 10px;
|
||||
color: $text-secondary;
|
||||
border-bottom: 1px solid $border-light;
|
||||
font-family: $font-code;
|
||||
font-size: 11px;
|
||||
}
|
||||
th {
|
||||
color: $text-muted;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
td {
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,28 +5,61 @@ import { useUsageStore } from '@/stores/hermes/usage'
|
||||
|
||||
const { t } = useI18n()
|
||||
const usageStore = useUsageStore()
|
||||
const maxModelTokens = computed(() => Math.max(usageStore.modelUsage[0]?.totalTokens || 0, 1))
|
||||
const maxModelTokens = computed(() => Math.max(...usageStore.modelUsage.map(m => m.visualTokens), 1))
|
||||
|
||||
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 cacheHitRate(m: { inputTokens: number; cacheTokens: number }): string {
|
||||
const total = m.inputTokens + m.cacheTokens
|
||||
if (total === 0) return '--'
|
||||
return ((m.cacheTokens / total) * 100).toFixed(1) + '%'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="model-breakdown">
|
||||
<h3 class="section-title">{{ t('usage.modelBreakdown') }}</h3>
|
||||
|
||||
<div class="model-legend" aria-label="Token type legend">
|
||||
<div class="legend-item"><span class="legend-swatch input" />{{ t('usage.inputTokens') }}</div>
|
||||
<div class="legend-item"><span class="legend-swatch output" />{{ t('usage.outputTokens') }}</div>
|
||||
<div class="legend-item"><span class="legend-swatch cache" />{{ t('usage.cacheRead') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="model-list">
|
||||
<div v-for="m in usageStore.modelUsage" :key="m.model" class="model-row">
|
||||
<span class="model-name">{{ m.model }}</span>
|
||||
<span class="model-swatch" :style="{ background: m.color }" />
|
||||
<span class="model-name" :title="m.model">{{ m.model }}</span>
|
||||
<div class="model-bar-wrap">
|
||||
<div
|
||||
class="model-bar"
|
||||
:style="{ width: (m.totalTokens / maxModelTokens * 100) + '%' }"
|
||||
/>
|
||||
:style="{ width: (m.visualTokens / maxModelTokens * 100) + '%' }"
|
||||
>
|
||||
<div
|
||||
v-if="m.inputTokens > 0"
|
||||
class="model-bar-segment input"
|
||||
:style="{ width: m.inputPercent + '%' }"
|
||||
/>
|
||||
<div
|
||||
v-if="m.outputTokens > 0"
|
||||
class="model-bar-segment output"
|
||||
:style="{ width: m.outputPercent + '%' }"
|
||||
/>
|
||||
<div
|
||||
v-if="m.cacheTokens > 0"
|
||||
class="model-bar-segment cache"
|
||||
:style="{ width: m.cachePercent + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span class="model-tokens">{{ formatTokens(m.totalTokens) }}</span>
|
||||
<span class="model-tokens" :title="`${t('usage.inputTokens')}: ${formatTokens(m.inputTokens)} · ${t('usage.outputTokens')}: ${formatTokens(m.outputTokens)} · ${t('usage.cacheRead')}: ${formatTokens(m.cacheTokens)} · ${t('usage.cacheHitRate')}: ${cacheHitRate(m)}`">
|
||||
{{ formatTokens(m.totalTokens) }}
|
||||
<small v-if="m.cacheTokens > 0">+{{ formatTokens(m.cacheTokens) }}</small>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,6 +83,44 @@ function formatTokens(n: number): string {
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.model-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 14px;
|
||||
margin: 0 0 12px;
|
||||
color: $text-muted;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.legend-swatch,
|
||||
.model-swatch {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.legend-swatch.input,
|
||||
.model-bar-segment.input {
|
||||
background: #5c6bc0;
|
||||
}
|
||||
|
||||
.legend-swatch.output,
|
||||
.model-bar-segment.output {
|
||||
background: #26a69a;
|
||||
}
|
||||
|
||||
.legend-swatch.cache,
|
||||
.model-bar-segment.cache {
|
||||
background: #f6ad55;
|
||||
}
|
||||
|
||||
.model-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -83,21 +154,29 @@ function formatTokens(n: number): string {
|
||||
|
||||
.model-bar {
|
||||
height: 100%;
|
||||
background: $text-primary;
|
||||
border-radius: 3px;
|
||||
min-width: 2px;
|
||||
transition: width 0.3s ease;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dark & {
|
||||
background: #66bb6a;
|
||||
}
|
||||
.model-bar-segment {
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.model-tokens {
|
||||
font-size: 12px;
|
||||
color: $text-muted;
|
||||
width: 60px;
|
||||
width: 86px;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
|
||||
small {
|
||||
color: #f6ad55;
|
||||
margin-left: 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -751,7 +751,7 @@ jobTriggered: 'Job ausgelost',
|
||||
estimatedCost: 'Gesch. Kosten',
|
||||
cacheHitRate: 'Cache-Trefferquote',
|
||||
modelBreakdown: 'Modellaufschluesselung',
|
||||
dailyTrend: 'Tagliche Nutzung (letzte 30 Tage)',
|
||||
dailyTrend: 'Tagliche Nutzung',
|
||||
date: 'Datum',
|
||||
tokens: 'Tokens',
|
||||
cache: 'Cache',
|
||||
|
||||
@@ -973,7 +973,7 @@ export default {
|
||||
estimatedCost: 'Est. Cost',
|
||||
cacheHitRate: 'Cache Hit Rate',
|
||||
modelBreakdown: 'Model Breakdown',
|
||||
dailyTrend: 'Daily Usage (Last 30 Days)',
|
||||
dailyTrend: 'Daily Usage',
|
||||
date: 'Date',
|
||||
tokens: 'Tokens',
|
||||
cache: 'Cache',
|
||||
|
||||
@@ -747,7 +747,7 @@ jobTriggered: 'Job ejecutado',
|
||||
estimatedCost: 'Costo est.',
|
||||
cacheHitRate: 'Tasa de acierto de cache',
|
||||
modelBreakdown: 'Desglose por modelo',
|
||||
dailyTrend: 'Uso diario (ultimos 30 dias)',
|
||||
dailyTrend: 'Uso diario',
|
||||
date: 'Fecha',
|
||||
tokens: 'Tokens',
|
||||
cache: 'Caché',
|
||||
|
||||
@@ -747,7 +747,7 @@ jobTriggered: 'Job declenche',
|
||||
estimatedCost: 'Cout est.',
|
||||
cacheHitRate: 'Taux de succes du cache',
|
||||
modelBreakdown: 'Repartition par modele',
|
||||
dailyTrend: 'Utilisation quotidienne (30 derniers jours)',
|
||||
dailyTrend: 'Utilisation quotidienne',
|
||||
date: 'Date',
|
||||
tokens: 'Jetons',
|
||||
cache: 'Cache',
|
||||
|
||||
@@ -747,7 +747,7 @@ export default {
|
||||
estimatedCost: '推定コスト',
|
||||
cacheHitRate: 'キャッシュヒット率',
|
||||
modelBreakdown: 'モデル別内訳',
|
||||
dailyTrend: '日別使用量（過去30日間）',
|
||||
dailyTrend: '日別使用量',
|
||||
date: '日付',
|
||||
tokens: 'トークン',
|
||||
cache: 'キャッシュ',
|
||||
|
||||
@@ -747,7 +747,7 @@ export default {
|
||||
estimatedCost: '예상 비용',
|
||||
cacheHitRate: '캐시 적중률',
|
||||
modelBreakdown: '모델별 분포',
|
||||
dailyTrend: '일별 사용량 (최근 30일)',
|
||||
dailyTrend: '일별 사용량',
|
||||
date: '날짜',
|
||||
tokens: '토큰',
|
||||
cache: '캐시',
|
||||
|
||||
@@ -747,7 +747,7 @@ jobTriggered: 'Job acionado',
|
||||
estimatedCost: 'Custo est.',
|
||||
cacheHitRate: 'Taxa de acerto de cache',
|
||||
modelBreakdown: 'Detalhamento por modelo',
|
||||
dailyTrend: 'Uso diario (ultimos 30 dias)',
|
||||
dailyTrend: 'Uso diario',
|
||||
date: 'Data',
|
||||
tokens: 'Tokens',
|
||||
cache: 'Cache',
|
||||
|
||||
@@ -975,7 +975,7 @@ export default {
|
||||
estimatedCost: '預估費用',
|
||||
cacheHitRate: '快取命中率',
|
||||
modelBreakdown: '模型分布',
|
||||
dailyTrend: '每日用量（近 30 天）',
|
||||
dailyTrend: '每日用量',
|
||||
date: '日期',
|
||||
tokens: 'Token',
|
||||
cache: '快取',
|
||||
|
||||
@@ -975,7 +975,7 @@ export default {
|
||||
estimatedCost: '预估费用',
|
||||
cacheHitRate: '缓存命中率',
|
||||
modelBreakdown: '模型分布',
|
||||
dailyTrend: '每日用量（近 30 天）',
|
||||
dailyTrend: '每日用量',
|
||||
date: '日期',
|
||||
tokens: 'Token',
|
||||
cache: '缓存',
|
||||
|
||||
@@ -11,6 +11,10 @@ interface DailyUsage {
|
||||
sessions: number
|
||||
errors: number
|
||||
cost: number
|
||||
visualTokens: number
|
||||
inputPercent: number
|
||||
outputPercent: number
|
||||
cachePercent: number
|
||||
}
|
||||
|
||||
interface ModelUsage {
|
||||
@@ -18,22 +22,70 @@ interface ModelUsage {
|
||||
inputTokens: number
|
||||
outputTokens: number
|
||||
cacheTokens: number
|
||||
cacheWriteTokens: number
|
||||
totalTokens: number
|
||||
visualTokens: number
|
||||
sessions: number
|
||||
color: string
|
||||
inputPercent: number
|
||||
outputPercent: number
|
||||
cachePercent: number
|
||||
}
|
||||
|
||||
const MODEL_COLORS = [
|
||||
'#4fd1c5',
|
||||
'#63b3ed',
|
||||
'#f6ad55',
|
||||
'#b794f4',
|
||||
'#68d391',
|
||||
'#fc8181',
|
||||
'#f687b3',
|
||||
'#90cdf4',
|
||||
'#fbd38d',
|
||||
'#9ae6b4',
|
||||
]
|
||||
|
||||
function normalizeModel(model: string | null | undefined): string {
|
||||
const trimmed = (model || '').trim()
|
||||
return trimmed || 'unknown'
|
||||
}
|
||||
|
||||
function percent(part: number, total: number): number {
|
||||
if (total <= 0) return 0
|
||||
return part / total * 100
|
||||
}
|
||||
|
||||
function getModelColor(model: string): string {
|
||||
const normalized = normalizeModel(model)
|
||||
let hash = 0
|
||||
for (let i = 0; i < normalized.length; i += 1) {
|
||||
hash = ((hash << 5) - hash) + normalized.charCodeAt(i)
|
||||
hash |= 0
|
||||
}
|
||||
return MODEL_COLORS[Math.abs(hash) % MODEL_COLORS.length]
|
||||
}
|
||||
|
||||
export const useUsageStore = defineStore('usage', () => {
|
||||
const stats = ref<UsageStatsResponse | null>(null)
|
||||
const isLoading = ref(false)
|
||||
let latestRequestId = 0
|
||||
|
||||
async function loadSessions(days = 30) {
|
||||
const requestId = ++latestRequestId
|
||||
isLoading.value = true
|
||||
try {
|
||||
stats.value = await fetchUsageStats(days)
|
||||
const response = await fetchUsageStats(days)
|
||||
if (requestId === latestRequestId) {
|
||||
stats.value = response
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to load usage stats:', err)
|
||||
if (requestId === latestRequestId) {
|
||||
console.error('Failed to load usage stats:', err)
|
||||
}
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
if (requestId === latestRequestId) {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,17 +108,46 @@ export const useUsageStore = defineStore('usage', () => {
|
||||
|
||||
const modelUsage = computed<ModelUsage[]>(() => {
|
||||
if (!stats.value) return []
|
||||
return stats.value.model_usage.map(m => ({
|
||||
model: m.model || 'unknown',
|
||||
inputTokens: m.input_tokens,
|
||||
outputTokens: m.output_tokens,
|
||||
cacheTokens: m.cache_read_tokens,
|
||||
totalTokens: m.input_tokens + m.output_tokens,
|
||||
sessions: m.sessions,
|
||||
})).sort((a, b) => b.totalTokens - a.totalTokens)
|
||||
return stats.value.model_usage.map(m => {
|
||||
const model = normalizeModel(m.model)
|
||||
const totalTokens = m.input_tokens + m.output_tokens
|
||||
const visualTokens = totalTokens + m.cache_read_tokens
|
||||
return {
|
||||
model,
|
||||
inputTokens: m.input_tokens,
|
||||
outputTokens: m.output_tokens,
|
||||
cacheTokens: m.cache_read_tokens,
|
||||
cacheWriteTokens: m.cache_write_tokens,
|
||||
totalTokens,
|
||||
visualTokens,
|
||||
sessions: m.sessions,
|
||||
color: getModelColor(model),
|
||||
inputPercent: percent(m.input_tokens, visualTokens),
|
||||
outputPercent: percent(m.output_tokens, visualTokens),
|
||||
cachePercent: percent(m.cache_read_tokens, visualTokens),
|
||||
}
|
||||
}).sort((a, b) => b.visualTokens - a.visualTokens)
|
||||
})
|
||||
|
||||
const dailyUsage = computed<DailyUsage[]>(() => stats.value?.daily_usage ?? [])
|
||||
const modelLegend = computed(() => {
|
||||
const seen = new Set<string>()
|
||||
return modelUsage.value.filter(m => {
|
||||
if (seen.has(m.model)) return false
|
||||
seen.add(m.model)
|
||||
return true
|
||||
}).map(m => ({ model: m.model, color: m.color }))
|
||||
})
|
||||
|
||||
const dailyUsage = computed<DailyUsage[]>(() => (stats.value?.daily_usage ?? []).map(d => {
|
||||
const visualTokens = d.input_tokens + d.output_tokens + d.cache_read_tokens
|
||||
return {
|
||||
...d,
|
||||
visualTokens,
|
||||
inputPercent: percent(d.input_tokens, visualTokens),
|
||||
outputPercent: percent(d.output_tokens, visualTokens),
|
||||
cachePercent: percent(d.cache_read_tokens, visualTokens),
|
||||
}
|
||||
}))
|
||||
|
||||
const avgSessionsPerDay = computed(() => {
|
||||
if (!stats.value || stats.value.daily_usage.length === 0) return 0
|
||||
@@ -88,7 +169,9 @@ export const useUsageStore = defineStore('usage', () => {
|
||||
cacheHitRate,
|
||||
estimatedCost,
|
||||
modelUsage,
|
||||
modelLegend,
|
||||
dailyUsage,
|
||||
avgSessionsPerDay,
|
||||
getModelColor,
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { NButton } from 'naive-ui'
|
||||
import { onMounted } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useUsageStore } from '@/stores/hermes/usage'
|
||||
import StatCards from '@/components/hermes/usage/StatCards.vue'
|
||||
@@ -10,8 +10,22 @@ import DailyTrend from '@/components/hermes/usage/DailyTrend.vue'
|
||||
const { t } = useI18n()
|
||||
const usageStore = useUsageStore()
|
||||
|
||||
const periodOptions = [
|
||||
{ label: '7d', days: 7 },
|
||||
{ label: '30d', days: 30 },
|
||||
{ label: '90d', days: 90 },
|
||||
{ label: '365d', days: 365 },
|
||||
] as const
|
||||
|
||||
const selectedPeriod = ref(30)
|
||||
|
||||
function loadUsage(days = selectedPeriod.value) {
|
||||
selectedPeriod.value = days
|
||||
usageStore.loadSessions(days)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
usageStore.loadSessions()
|
||||
loadUsage(30)
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -19,9 +33,26 @@ onMounted(() => {
|
||||
<div class="usage-view">
|
||||
<header class="page-header">
|
||||
<h2 class="header-title">{{ t('usage.title') }}</h2>
|
||||
<NButton size="small" quaternary :loading="usageStore.isLoading" @click="usageStore.loadSessions()">
|
||||
{{ t('usage.refresh') }}
|
||||
</NButton>
|
||||
<div class="usage-toolbar">
|
||||
<div class="period-selector" role="group" aria-label="Usage statistics period">
|
||||
<NButton
|
||||
v-for="option in periodOptions"
|
||||
:key="option.days"
|
||||
class="period-option"
|
||||
size="small"
|
||||
:type="selectedPeriod === option.days ? 'primary' : 'default'"
|
||||
:secondary="selectedPeriod === option.days"
|
||||
:quaternary="selectedPeriod !== option.days"
|
||||
:aria-pressed="selectedPeriod === option.days"
|
||||
@click="loadUsage(option.days)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</NButton>
|
||||
</div>
|
||||
<NButton class="refresh-button" size="small" quaternary :loading="usageStore.isLoading" @click="loadUsage()">
|
||||
{{ t('usage.refresh') }}
|
||||
</NButton>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="usage-content">
|
||||
@@ -51,6 +82,37 @@ onMounted(() => {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 21px 20px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
margin: 0;
|
||||
color: $text-primary;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.usage-toolbar,
|
||||
.period-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.period-selector {
|
||||
padding: 2px;
|
||||
border: 1px solid $border-light;
|
||||
border-radius: $radius-sm;
|
||||
background: $bg-secondary;
|
||||
}
|
||||
|
||||
.usage-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
@@ -73,4 +135,20 @@ onMounted(() => {
|
||||
color: $text-muted;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
.page-header,
|
||||
.usage-toolbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.usage-toolbar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.period-selector {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user