fix: SkillsUsage 页面样式修复与 API server skill usage 统计 (#698)
* Reapply "feat: 新增 Skills Usage 监控统计与图表 (#668)" (#670)
This reverts commit 91de3b12a1.
* fix: count API-server skill usage
* fix: align SkillsUsageView header with other pages and update sidebar icon
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---------
Co-authored-by: Zhicheng Han <zhicheng.han@mathematik.uni-goettingen.de>
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
ekko
@@ -45,11 +45,52 @@ export interface SkillsData {
|
||||
archived: SkillInfo[]
|
||||
}
|
||||
|
||||
export interface SkillUsageRow {
|
||||
skill: string
|
||||
view_count: number
|
||||
manage_count: number
|
||||
total_count: number
|
||||
percentage: number
|
||||
last_used_at: number | null
|
||||
}
|
||||
|
||||
export interface SkillUsageDailySkillRow {
|
||||
skill: string
|
||||
view_count: number
|
||||
manage_count: number
|
||||
total_count: number
|
||||
}
|
||||
|
||||
export interface SkillUsageDailyRow {
|
||||
date: string
|
||||
view_count: number
|
||||
manage_count: number
|
||||
total_count: number
|
||||
skills: SkillUsageDailySkillRow[]
|
||||
}
|
||||
|
||||
export interface SkillUsageStats {
|
||||
period_days: number
|
||||
summary: {
|
||||
total_skill_loads: number
|
||||
total_skill_edits: number
|
||||
total_skill_actions: number
|
||||
distinct_skills_used: number
|
||||
}
|
||||
by_day: SkillUsageDailyRow[]
|
||||
top_skills: SkillUsageRow[]
|
||||
}
|
||||
|
||||
export async function fetchSkills(): Promise<SkillsData> {
|
||||
const res = await request<SkillListResponse>('/api/hermes/skills')
|
||||
return { categories: res.categories, archived: res.archived ?? [] }
|
||||
}
|
||||
|
||||
export async function fetchSkillUsageStats(days = 7): Promise<SkillUsageStats> {
|
||||
const params = new URLSearchParams({ days: String(days) })
|
||||
return request<SkillUsageStats>(`/api/hermes/skills/usage/stats?${params}`)
|
||||
}
|
||||
|
||||
export async function fetchSkillContent(skillPath: string): Promise<string> {
|
||||
const res = await request<{ content: string }>(`/api/hermes/skills/${skillPath}`)
|
||||
return res.content
|
||||
|
||||
@@ -220,6 +220,12 @@ function openChangelog() {
|
||||
</svg>
|
||||
<span>{{ t("sidebar.usage") }}</span>
|
||||
</button>
|
||||
<button class="nav-item" :class="{ active: selectedKey === 'hermes.skillsUsage' }" @click="handleNav('hermes.skillsUsage')">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
|
||||
</svg>
|
||||
<span>{{ t("sidebar.skillsUsage") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -79,6 +79,7 @@ export default {
|
||||
memory: 'Gedachtnis',
|
||||
logs: 'Protokolle',
|
||||
usage: 'Nutzung',
|
||||
skillsUsage: 'Skill-Nutzung',
|
||||
channels: 'Kanale',
|
||||
terminal: 'Terminal',
|
||||
files: 'Dateien',
|
||||
@@ -762,6 +763,28 @@ jobTriggered: 'Job ausgelost',
|
||||
noData: 'Keine Nutzungsdaten',
|
||||
},
|
||||
|
||||
skillsUsage: {
|
||||
title: 'Skill-Nutzung',
|
||||
subtitle: 'Skill-Ladevorgänge und -Bearbeitungen aus Hermes-Sitzungen verfolgen',
|
||||
refresh: 'Aktualisieren',
|
||||
periodSelector: 'Zeitraum der Skill-Nutzung',
|
||||
periodLabel: '{days} T',
|
||||
summary: 'Zusammenfassung',
|
||||
totalActions: 'Aktionen',
|
||||
loads: 'Laden',
|
||||
edits: 'Änd.',
|
||||
distinctSkills: 'Skillzahl',
|
||||
topSkills: 'Top-Skills',
|
||||
dailyTrend: 'Trend',
|
||||
periodSummary: 'Letzte {days} Tage',
|
||||
skill: 'Fähigkeit',
|
||||
share: '%',
|
||||
lastUsed: 'Zuletzt',
|
||||
noData: 'Keine Skill-Nutzungsdaten',
|
||||
loadFailed: 'Skill-Nutzung konnte nicht geladen werden',
|
||||
otherSkills: 'Andere Skills',
|
||||
},
|
||||
|
||||
// Anderungsprotokoll
|
||||
changelog: {
|
||||
|
||||
|
||||
@@ -83,6 +83,7 @@ export default {
|
||||
memory: 'Memory',
|
||||
logs: 'Logs',
|
||||
usage: 'Usage',
|
||||
skillsUsage: 'Skills Usage',
|
||||
channels: 'Channels',
|
||||
gateways: 'Gateways',
|
||||
terminal: 'Terminal',
|
||||
@@ -985,6 +986,28 @@ export default {
|
||||
cost: 'Cost',
|
||||
noData: 'No usage data',
|
||||
},
|
||||
skillsUsage: {
|
||||
title: 'Skills Usage',
|
||||
subtitle: 'Track skill loads and edits from Hermes sessions',
|
||||
refresh: 'Refresh',
|
||||
periodSelector: 'Skill usage period',
|
||||
periodLabel: '{days}d',
|
||||
summary: 'Summary',
|
||||
totalActions: 'Actions',
|
||||
loads: 'Loads',
|
||||
edits: 'Edits',
|
||||
distinctSkills: 'Skills',
|
||||
topSkills: 'Top Skills',
|
||||
dailyTrend: 'Daily Trend',
|
||||
periodSummary: 'Last {days} days',
|
||||
skill: 'Skill',
|
||||
share: 'Share',
|
||||
lastUsed: 'Last Used',
|
||||
noData: 'No skill usage data',
|
||||
loadFailed: 'Failed to load skill usage',
|
||||
otherSkills: 'Other skills',
|
||||
},
|
||||
|
||||
// Files
|
||||
files: {
|
||||
title: 'Files',
|
||||
|
||||
@@ -79,6 +79,7 @@ export default {
|
||||
memory: 'Memoria',
|
||||
logs: 'Registros',
|
||||
usage: 'Uso',
|
||||
skillsUsage: 'Uso de habilidades',
|
||||
channels: 'Canales',
|
||||
terminal: 'Terminal',
|
||||
files: 'Archivos',
|
||||
@@ -758,6 +759,28 @@ jobTriggered: 'Job ejecutado',
|
||||
noData: 'Sin datos de uso',
|
||||
},
|
||||
|
||||
skillsUsage: {
|
||||
title: 'Uso de habilidades',
|
||||
subtitle: 'Sigue las cargas y ediciones de habilidades en sesiones de Hermes',
|
||||
refresh: 'Actualizar',
|
||||
periodSelector: 'Periodo de uso de habilidades',
|
||||
periodLabel: '{days} d',
|
||||
summary: 'Resumen',
|
||||
totalActions: 'Acciones',
|
||||
loads: 'Cargas',
|
||||
edits: 'Ed.',
|
||||
distinctSkills: 'Habs.',
|
||||
topSkills: 'Top habs.',
|
||||
dailyTrend: 'Tendencia diaria',
|
||||
periodSummary: 'Últimos {days} días',
|
||||
skill: 'Hab.',
|
||||
share: '%',
|
||||
lastUsed: 'Últ. uso',
|
||||
noData: 'No hay datos de uso de habilidades',
|
||||
loadFailed: 'No se pudo cargar el uso de habilidades',
|
||||
otherSkills: 'Otras habs.',
|
||||
},
|
||||
|
||||
// Registro de cambios
|
||||
changelog: {
|
||||
|
||||
|
||||
@@ -79,6 +79,7 @@ export default {
|
||||
memory: 'Memoire',
|
||||
logs: 'Journaux',
|
||||
usage: 'Utilisation',
|
||||
skillsUsage: 'Utilisation des compétences',
|
||||
channels: 'Canaux',
|
||||
terminal: 'Terminal',
|
||||
files: 'Fichiers',
|
||||
@@ -758,6 +759,28 @@ jobTriggered: 'Job declenche',
|
||||
noData: 'Aucune donnee d\'utilisation',
|
||||
},
|
||||
|
||||
skillsUsage: {
|
||||
title: 'Utilisation des compétences',
|
||||
subtitle: 'Suivre les chargements et modifications de compétences dans les sessions Hermes',
|
||||
refresh: 'Actualiser',
|
||||
periodSelector: 'Période d\'utilisation des compétences',
|
||||
periodLabel: '{days} j',
|
||||
summary: 'Résumé',
|
||||
totalActions: 'Act.',
|
||||
loads: 'Charg.',
|
||||
edits: 'Modif.',
|
||||
distinctSkills: 'Comp.',
|
||||
topSkills: 'Top comp.',
|
||||
dailyTrend: 'Tendance',
|
||||
periodSummary: '{days} derniers jours',
|
||||
skill: 'Comp.',
|
||||
share: '%',
|
||||
lastUsed: 'Dern. usage',
|
||||
noData: 'Aucune donnée d\'utilisation des compétences',
|
||||
loadFailed: 'Impossible de charger l\'utilisation des compétences',
|
||||
otherSkills: 'Autres comp.',
|
||||
},
|
||||
|
||||
// Journal des modifications
|
||||
changelog: {
|
||||
|
||||
|
||||
@@ -79,6 +79,7 @@ export default {
|
||||
memory: 'メモリ',
|
||||
logs: 'ログ',
|
||||
usage: '使用量',
|
||||
skillsUsage: 'スキル使用状況',
|
||||
channels: 'チャンネル',
|
||||
terminal: 'ターミナル',
|
||||
files: 'ファイル',
|
||||
@@ -758,6 +759,28 @@ export default {
|
||||
noData: '使用データがありません',
|
||||
},
|
||||
|
||||
skillsUsage: {
|
||||
title: 'スキル使用状況',
|
||||
subtitle: 'Hermes セッションでのスキル読み込みと編集を追跡します',
|
||||
refresh: '更新',
|
||||
periodSelector: 'スキル使用期間',
|
||||
periodLabel: '{days}日',
|
||||
summary: '概要',
|
||||
totalActions: '操作数',
|
||||
loads: '読み込み',
|
||||
edits: '編集',
|
||||
distinctSkills: 'スキル数',
|
||||
topSkills: '上位',
|
||||
dailyTrend: '日別',
|
||||
periodSummary: '過去 {days} 日',
|
||||
skill: 'スキル',
|
||||
share: '割合',
|
||||
lastUsed: '最終',
|
||||
noData: 'スキル使用データはありません',
|
||||
loadFailed: 'スキル使用状況の読み込みに失敗しました',
|
||||
otherSkills: 'その他',
|
||||
},
|
||||
|
||||
// 更新履歴
|
||||
changelog: {
|
||||
|
||||
|
||||
@@ -79,6 +79,7 @@ export default {
|
||||
memory: '메모리',
|
||||
logs: '로그',
|
||||
usage: '사용량',
|
||||
skillsUsage: '스킬 사용량',
|
||||
channels: '채널',
|
||||
terminal: '터미널',
|
||||
files: '파일',
|
||||
@@ -758,6 +759,28 @@ export default {
|
||||
noData: '사용량 데이터 없음',
|
||||
},
|
||||
|
||||
skillsUsage: {
|
||||
title: '스킬 사용량',
|
||||
subtitle: 'Hermes 세션의 스킬 로드와 편집을 추적합니다',
|
||||
refresh: '새로고침',
|
||||
periodSelector: '스킬 사용량 기간',
|
||||
periodLabel: '{days}일',
|
||||
summary: '요약',
|
||||
totalActions: '작업 수',
|
||||
loads: '로드',
|
||||
edits: '편집',
|
||||
distinctSkills: '스킬 수',
|
||||
topSkills: '상위',
|
||||
dailyTrend: '일별',
|
||||
periodSummary: '최근 {days}일',
|
||||
skill: '스킬',
|
||||
share: '비중',
|
||||
lastUsed: '마지막',
|
||||
noData: '스킬 사용량 데이터가 없습니다',
|
||||
loadFailed: '스킬 사용량을 불러오지 못했습니다',
|
||||
otherSkills: '기타',
|
||||
},
|
||||
|
||||
// 변경 이력
|
||||
changelog: {
|
||||
|
||||
|
||||
@@ -79,6 +79,7 @@ export default {
|
||||
memory: 'Memoria',
|
||||
logs: 'Logs',
|
||||
usage: 'Uso',
|
||||
skillsUsage: 'Uso de habilidades',
|
||||
channels: 'Canais',
|
||||
terminal: 'Terminal',
|
||||
files: 'Arquivos',
|
||||
@@ -758,6 +759,28 @@ jobTriggered: 'Job acionado',
|
||||
noData: 'Sem dados de uso',
|
||||
},
|
||||
|
||||
skillsUsage: {
|
||||
title: 'Uso de habilidades',
|
||||
subtitle: 'Acompanhe carregamentos e edições de habilidades nas sessões Hermes',
|
||||
refresh: 'Atualizar',
|
||||
periodSelector: 'Período de uso de habilidades',
|
||||
periodLabel: '{days} d',
|
||||
summary: 'Resumo',
|
||||
totalActions: 'Ações',
|
||||
loads: 'Carga',
|
||||
edits: 'Ed.',
|
||||
distinctSkills: 'Habs.',
|
||||
topSkills: 'Top habs.',
|
||||
dailyTrend: 'Tendência diária',
|
||||
periodSummary: 'Últimos {days} dias',
|
||||
skill: 'Hab.',
|
||||
share: '%',
|
||||
lastUsed: 'Últ. uso',
|
||||
noData: 'Nenhum dado de uso de habilidades',
|
||||
loadFailed: 'Falha ao carregar o uso de habilidades',
|
||||
otherSkills: 'Outras habs.',
|
||||
},
|
||||
|
||||
// Registro de alteracoes
|
||||
changelog: {
|
||||
|
||||
|
||||
@@ -83,6 +83,7 @@ export default {
|
||||
memory: '記憶',
|
||||
logs: '日誌',
|
||||
usage: '用量',
|
||||
skillsUsage: '技能用量',
|
||||
channels: '頻道',
|
||||
gateways: '閘道',
|
||||
terminal: '終端機',
|
||||
@@ -986,6 +987,28 @@ export default {
|
||||
noData: '目前無用量資料',
|
||||
},
|
||||
|
||||
skillsUsage: {
|
||||
title: '技能用量',
|
||||
subtitle: '追蹤 Hermes 工作階段中的技能載入與編輯',
|
||||
refresh: '重新整理',
|
||||
periodSelector: '技能用量期間',
|
||||
periodLabel: '{days}天',
|
||||
summary: '總覽',
|
||||
totalActions: '操作',
|
||||
loads: '載入',
|
||||
edits: '編輯',
|
||||
distinctSkills: '技能數',
|
||||
topSkills: '熱門',
|
||||
dailyTrend: '趨勢',
|
||||
periodSummary: '最近 {days} 天',
|
||||
skill: '技能',
|
||||
share: '占比',
|
||||
lastUsed: '最近',
|
||||
noData: '暫無技能用量資料',
|
||||
loadFailed: '技能用量載入失敗',
|
||||
otherSkills: '其他技能',
|
||||
},
|
||||
|
||||
// 檔案管理
|
||||
files: {
|
||||
title: '檔案',
|
||||
|
||||
@@ -83,6 +83,7 @@ export default {
|
||||
memory: '记忆',
|
||||
logs: '日志',
|
||||
usage: '用量',
|
||||
skillsUsage: '技能用量',
|
||||
channels: '频道',
|
||||
gateways: '网关',
|
||||
terminal: '终端',
|
||||
@@ -987,6 +988,28 @@ export default {
|
||||
cost: '费用',
|
||||
noData: '暂无用量数据',
|
||||
},
|
||||
skillsUsage: {
|
||||
title: '技能用量',
|
||||
subtitle: '跟踪 Hermes 会话中的技能加载和编辑',
|
||||
refresh: '刷新',
|
||||
periodSelector: '技能用量周期',
|
||||
periodLabel: '{days}天',
|
||||
summary: '概览',
|
||||
totalActions: '操作',
|
||||
loads: '加载',
|
||||
edits: '编辑',
|
||||
distinctSkills: '技能数',
|
||||
topSkills: '热门',
|
||||
dailyTrend: '趋势',
|
||||
periodSummary: '最近 {days} 天',
|
||||
skill: '技能',
|
||||
share: '占比',
|
||||
lastUsed: '最近',
|
||||
noData: '暂无技能用量数据',
|
||||
loadFailed: '技能用量加载失败',
|
||||
otherSkills: '其他技能',
|
||||
},
|
||||
|
||||
// 文件管理
|
||||
files: {
|
||||
title: '文件',
|
||||
|
||||
@@ -50,6 +50,11 @@ const router = createRouter({
|
||||
name: 'hermes.usage',
|
||||
component: () => import('@/views/hermes/UsageView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/hermes/skills-usage',
|
||||
name: 'hermes.skillsUsage',
|
||||
component: () => import('@/views/hermes/SkillsUsageView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/hermes/skills',
|
||||
name: 'hermes.skills',
|
||||
|
||||
@@ -0,0 +1,681 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { NButton } from 'naive-ui'
|
||||
import {
|
||||
fetchSkillUsageStats,
|
||||
type SkillUsageDailyRow,
|
||||
type SkillUsageRow,
|
||||
type SkillUsageStats,
|
||||
} from '@/api/hermes/skills'
|
||||
|
||||
const { t } = useI18n()
|
||||
const periodOptions = [7, 30, 90, 365]
|
||||
const maxVisibleChartSkills = 6
|
||||
const skillPalette = [
|
||||
'#2f6eea',
|
||||
'#f26d3d',
|
||||
'#f49a5c',
|
||||
'#9aa7ff',
|
||||
'#8f2c8f',
|
||||
'#00c2d1',
|
||||
]
|
||||
const otherSkillColor = '#5b6b84'
|
||||
|
||||
interface ChartSegment {
|
||||
key: string
|
||||
label: string
|
||||
count: number
|
||||
color: string
|
||||
}
|
||||
|
||||
const selectedDays = ref(7)
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const statsByPeriod = ref<Record<number, SkillUsageStats | undefined>>({})
|
||||
let requestSeq = 0
|
||||
const latestRequestByPeriod: Record<number, number> = {}
|
||||
|
||||
const stats = computed(() => statsByPeriod.value[selectedDays.value] ?? null)
|
||||
const hasData = computed(() => (stats.value?.summary.total_skill_actions ?? 0) > 0)
|
||||
const maxDailyActions = computed(() => Math.max(...(stats.value?.by_day ?? []).map(day => day.total_count), 1))
|
||||
const isRefreshing = computed(() => loading.value && !!stats.value)
|
||||
const hoveredDayKey = ref<string | null>(null)
|
||||
const hoveredDayIndex = ref<number | null>(null)
|
||||
const hoveredDay = computed(() => stats.value?.by_day.find(day => day.date === hoveredDayKey.value) ?? null)
|
||||
const hoveredSegments = computed(() => hoveredDay.value ? chartSegments(hoveredDay.value) : [])
|
||||
const tooltipAlignment = computed(() => {
|
||||
const dayCount = stats.value?.by_day.length ?? 0
|
||||
if (hoveredDayIndex.value === null || dayCount <= 0) return 'align-right'
|
||||
return hoveredDayIndex.value >= dayCount / 2 ? 'align-left' : 'align-right'
|
||||
})
|
||||
const chartSkills = computed(() => (stats.value?.top_skills ?? []).slice(0, maxVisibleChartSkills))
|
||||
const chartSkillSet = computed(() => new Set(chartSkills.value.map(skill => skill.skill)))
|
||||
|
||||
function formatPercent(value: number): string {
|
||||
return `${value.toFixed(1)}%`
|
||||
}
|
||||
|
||||
function formatLastUsed(timestamp: number | null): string {
|
||||
if (!timestamp) return '—'
|
||||
return new Date(timestamp * 1000).toLocaleString()
|
||||
}
|
||||
|
||||
function dailyBarHeight(total: number): string {
|
||||
return `${Math.max(2, (total / maxDailyActions.value) * 100)}%`
|
||||
}
|
||||
|
||||
function segmentFlex(value: number): number {
|
||||
return Math.max(value, 0)
|
||||
}
|
||||
|
||||
function totalSkillActions(skill: Pick<SkillUsageRow, 'view_count' | 'manage_count' | 'total_count'>): number {
|
||||
return skill.total_count || skill.view_count + skill.manage_count
|
||||
}
|
||||
|
||||
function otherSkillsLabel(): string {
|
||||
const hiddenCount = Math.max((stats.value?.top_skills.length ?? 0) - maxVisibleChartSkills, 0)
|
||||
return hiddenCount > 0 ? `${t('skillsUsage.otherSkills')} (+${hiddenCount})` : t('skillsUsage.otherSkills')
|
||||
}
|
||||
|
||||
function colorForSkill(skillName: string): string {
|
||||
const index = chartSkills.value.findIndex(skill => skill.skill === skillName)
|
||||
return index >= 0 ? skillPalette[index % skillPalette.length] : otherSkillColor
|
||||
}
|
||||
|
||||
function chartSegments(day: SkillUsageDailyRow): ChartSegment[] {
|
||||
const daySkills = day.skills ?? []
|
||||
const bySkill = new Map(daySkills.map(skill => [skill.skill, totalSkillActions(skill)]))
|
||||
const segments: ChartSegment[] = chartSkills.value
|
||||
.map(skill => ({
|
||||
key: skill.skill,
|
||||
label: skill.skill,
|
||||
count: bySkill.get(skill.skill) ?? 0,
|
||||
color: colorForSkill(skill.skill),
|
||||
}))
|
||||
.filter(segment => segment.count > 0)
|
||||
|
||||
const otherTotal = daySkills
|
||||
.filter(skill => !chartSkillSet.value.has(skill.skill))
|
||||
.reduce((sum, skill) => sum + totalSkillActions(skill), 0)
|
||||
|
||||
if (otherTotal > 0) {
|
||||
segments.push({
|
||||
key: 'other-skills',
|
||||
label: otherSkillsLabel(),
|
||||
count: otherTotal,
|
||||
color: otherSkillColor,
|
||||
})
|
||||
}
|
||||
|
||||
return segments
|
||||
}
|
||||
|
||||
function showTooltip(day: SkillUsageDailyRow, index: number) {
|
||||
hoveredDayKey.value = day.date
|
||||
hoveredDayIndex.value = index
|
||||
}
|
||||
|
||||
function hideTooltip(day: SkillUsageDailyRow) {
|
||||
if (hoveredDayKey.value === day.date) {
|
||||
hoveredDayKey.value = null
|
||||
hoveredDayIndex.value = null
|
||||
}
|
||||
}
|
||||
|
||||
async function loadStats(days = selectedDays.value, force = false) {
|
||||
selectedDays.value = days
|
||||
const seq = ++requestSeq
|
||||
latestRequestByPeriod[days] = seq
|
||||
loading.value = true
|
||||
if (!statsByPeriod.value[days] || force) error.value = ''
|
||||
|
||||
try {
|
||||
const next = await fetchSkillUsageStats(days)
|
||||
if (latestRequestByPeriod[days] === seq) {
|
||||
statsByPeriod.value = {
|
||||
...statsByPeriod.value,
|
||||
[days]: next,
|
||||
}
|
||||
}
|
||||
if (seq === requestSeq) error.value = ''
|
||||
} catch (err: any) {
|
||||
if (seq === requestSeq) error.value = err?.message || t('skillsUsage.loadFailed')
|
||||
} finally {
|
||||
if (seq === requestSeq) loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadStats(7)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="skills-usage-view">
|
||||
<header class="page-header">
|
||||
<div class="header-text">
|
||||
<h2 class="header-title">{{ t('skillsUsage.title') }}</h2>
|
||||
<p class="header-subtitle">{{ t('skillsUsage.subtitle') }}</p>
|
||||
</div>
|
||||
<div class="skills-usage-toolbar">
|
||||
<div class="period-selector" role="group" :aria-label="t('skillsUsage.periodSelector')">
|
||||
<NButton
|
||||
v-for="days in periodOptions"
|
||||
:key="days"
|
||||
size="small"
|
||||
:secondary="selectedDays === days"
|
||||
:quaternary="selectedDays !== days"
|
||||
:type="selectedDays === days ? 'primary' : 'default'"
|
||||
:aria-pressed="selectedDays === days ? 'true' : 'false'"
|
||||
@click="loadStats(days)"
|
||||
>
|
||||
{{ t('skillsUsage.periodLabel', { days }) }}
|
||||
</NButton>
|
||||
</div>
|
||||
<NButton size="small" quaternary :loading="loading" @click="loadStats(selectedDays, true)">
|
||||
{{ t('skillsUsage.refresh') }}
|
||||
</NButton>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="skills-usage-content">
|
||||
<div v-if="error && !stats" class="skills-usage-state error">
|
||||
{{ error }}
|
||||
</div>
|
||||
<div v-else-if="loading && !stats" class="skills-usage-state">
|
||||
{{ t('common.loading') }}
|
||||
</div>
|
||||
<template v-else-if="stats">
|
||||
<div v-if="error" class="inline-error">
|
||||
{{ error }}
|
||||
</div>
|
||||
<section class="overview-grid">
|
||||
<div class="usage-panel chart-panel" :class="{ 'is-refreshing': isRefreshing }" data-testid="skills-usage-chart">
|
||||
<div class="panel-header">
|
||||
<h3>{{ t('skillsUsage.dailyTrend') }}</h3>
|
||||
<span>{{ t('skillsUsage.periodSummary', { days: stats.period_days }) }}</span>
|
||||
</div>
|
||||
<div v-if="!hasData" class="skills-usage-state compact">
|
||||
{{ t('skillsUsage.noData') }}
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="skill-bar-chart">
|
||||
<div
|
||||
v-for="(day, index) in stats.by_day"
|
||||
:key="day.date"
|
||||
class="skill-bar-col"
|
||||
tabindex="0"
|
||||
@mouseenter="showTooltip(day, index)"
|
||||
@focusin="showTooltip(day, index)"
|
||||
@mouseleave="hideTooltip(day)"
|
||||
@focusout="hideTooltip(day)"
|
||||
>
|
||||
<div class="skill-bar-track">
|
||||
<div class="skill-bar-fill" :style="{ height: dailyBarHeight(day.total_count) }">
|
||||
<div
|
||||
v-for="segment in chartSegments(day)"
|
||||
:key="segment.key"
|
||||
class="skill-bar-segment"
|
||||
:data-skill="segment.key"
|
||||
:style="{ flex: segmentFlex(segment.count), background: segment.color }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="hoveredDay" class="floating-tooltip" :class="tooltipAlignment">
|
||||
<div class="tooltip-date">{{ hoveredDay.date }}</div>
|
||||
<div v-for="segment in hoveredSegments" :key="segment.key" class="tooltip-row">
|
||||
<i class="tooltip-dot" :style="{ background: segment.color }" />
|
||||
<span>{{ segment.label }}</span>
|
||||
<strong>{{ segment.count }}</strong>
|
||||
</div>
|
||||
<div class="tooltip-row total">
|
||||
<span>{{ t('skillsUsage.totalActions') }}</span>
|
||||
<strong>{{ hoveredDay.total_count }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar-dates">
|
||||
<span>{{ stats.by_day[0]?.date.slice(5) }}</span>
|
||||
<span>{{ stats.by_day[stats.by_day.length - 1]?.date.slice(5) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="summary-grid" data-testid="skills-usage-stats" :aria-label="t('skillsUsage.summary')">
|
||||
<div class="summary-card primary">
|
||||
<div class="summary-label">{{ t('skillsUsage.totalActions') }}</div>
|
||||
<div class="summary-value">{{ stats.summary.total_skill_actions }}</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="summary-label">{{ t('skillsUsage.loads') }}</div>
|
||||
<div class="summary-value">{{ stats.summary.total_skill_loads }}</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="summary-label">{{ t('skillsUsage.edits') }}</div>
|
||||
<div class="summary-value">{{ stats.summary.total_skill_edits }}</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="summary-label">{{ t('skillsUsage.distinctSkills') }}</div>
|
||||
<div class="summary-value">{{ stats.summary.distinct_skills_used }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="usage-panel">
|
||||
<div class="panel-header">
|
||||
<h3>{{ t('skillsUsage.topSkills') }}</h3>
|
||||
<span>{{ t('skillsUsage.periodSummary', { days: stats.period_days }) }}</span>
|
||||
</div>
|
||||
<div v-if="!hasData" class="skills-usage-state compact">
|
||||
{{ t('skillsUsage.noData') }}
|
||||
</div>
|
||||
<div v-else class="skills-table" role="table" :aria-label="t('skillsUsage.topSkills')">
|
||||
<div class="skills-row table-head" role="row">
|
||||
<span role="columnheader">{{ t('skillsUsage.skill') }}</span>
|
||||
<span role="columnheader">{{ t('skillsUsage.loads') }}</span>
|
||||
<span role="columnheader">{{ t('skillsUsage.edits') }}</span>
|
||||
<span role="columnheader">{{ t('skillsUsage.share') }}</span>
|
||||
<span role="columnheader">{{ t('skillsUsage.lastUsed') }}</span>
|
||||
</div>
|
||||
<div v-for="skill in stats.top_skills" :key="skill.skill" class="skills-row" role="row">
|
||||
<span class="skill-name" role="cell">
|
||||
<i class="skill-color-dot" :style="{ background: colorForSkill(skill.skill) }" />
|
||||
{{ skill.skill }}
|
||||
</span>
|
||||
<span role="cell">{{ skill.view_count }}</span>
|
||||
<span role="cell">{{ skill.manage_count }}</span>
|
||||
<span class="share-cell" role="cell">
|
||||
<span class="share-bar"><span :style="{ width: formatPercent(skill.percentage), background: colorForSkill(skill.skill) }" /></span>
|
||||
{{ formatPercent(skill.percentage) }}
|
||||
</span>
|
||||
<span class="last-used" role="cell">{{ formatLastUsed(skill.last_used_at) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.skills-usage-view {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
padding: 21px 20px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
margin: 4px 0 0;
|
||||
color: $text-muted;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.skills-usage-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.period-selector {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.skills-usage-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
max-width: 1120px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.overview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.summary-card,
|
||||
.usage-panel {
|
||||
background: $bg-secondary;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
padding: 14px;
|
||||
|
||||
&.primary {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
color: $text-muted;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
margin-top: 6px;
|
||||
color: $text-primary;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.usage-panel {
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
|
||||
&.is-refreshing::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 12px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: $accent-primary;
|
||||
box-shadow: 0 0 0 4px $accent-muted;
|
||||
animation: refresh-pulse 1s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes refresh-pulse {
|
||||
0%, 100% {
|
||||
opacity: 0.45;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.inline-error {
|
||||
margin-bottom: 12px;
|
||||
color: $error;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $text-muted;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.skill-bar-chart {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
min-height: 180px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.skill-bar-col {
|
||||
flex: 1;
|
||||
min-width: 3px;
|
||||
position: relative;
|
||||
outline: none;
|
||||
|
||||
&:focus-visible .skill-bar-track {
|
||||
box-shadow: 0 0 0 2px $accent-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.skill-bar-track {
|
||||
height: 180px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
background: $bg-card;
|
||||
border-radius: 3px 3px 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skill-bar-fill {
|
||||
width: 100%;
|
||||
min-height: 2px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
border-radius: 3px 3px 0 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.2s ease;
|
||||
}
|
||||
|
||||
.skill-bar-segment {
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.floating-tooltip {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
width: min(360px, calc(100% - 32px));
|
||||
max-height: calc(100% - 70px);
|
||||
overflow-y: auto;
|
||||
background: $bg-secondary;
|
||||
color: $text-primary;
|
||||
border: 1px solid $border-color;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
|
||||
padding: 8px 10px;
|
||||
border-radius: $radius-sm;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
|
||||
&.align-left {
|
||||
left: 16px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&.align-right {
|
||||
right: 16px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-date {
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.tooltip-row {
|
||||
display: grid;
|
||||
grid-template-columns: 8px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
color: $text-secondary;
|
||||
font-size: 10px;
|
||||
line-height: 1.6;
|
||||
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $text-primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.total {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
margin-top: 4px;
|
||||
padding-top: 4px;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.bar-dates {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: $text-muted;
|
||||
font-size: 11px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.skill-color-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skills-table {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.skills-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 1fr) 80px 80px minmax(120px, 160px) minmax(160px, 1fr);
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 8px;
|
||||
border-radius: 8px;
|
||||
color: $text-secondary;
|
||||
font-size: 13px;
|
||||
|
||||
&:not(.table-head):hover {
|
||||
background: $bg-card-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.table-head {
|
||||
color: $text-muted;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: $text-primary;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.share-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.share-bar {
|
||||
width: 54px;
|
||||
height: 6px;
|
||||
background: $bg-card;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.last-used {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.skills-usage-state {
|
||||
text-align: center;
|
||||
padding: 60px 0;
|
||||
color: $text-muted;
|
||||
font-size: 14px;
|
||||
|
||||
&.compact {
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
&.error {
|
||||
color: $error;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.skills-usage-toolbar {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.overview-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.skills-row {
|
||||
grid-template-columns: minmax(140px, 1fr) repeat(3, 64px);
|
||||
|
||||
span:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user