mirror of
https://github.com/fawney19/Aether.git
synced 2026-01-08 10:42:29 +08:00
431c6de8d2
- 用户用量API增加search参数支持密钥名、模型名搜索 - 用户用量API返回api_key信息（id、name、display） - 用户页面记录表格增加密钥列显示 - 前端统一管理员和用户页面的分页/搜索逻辑 - 后端LIKE查询增加特殊字符转义防止SQL注入 - 添加escape_like_pattern和safe_truncate_escaped工具函数
522 lines
16 KiB
Vue
522 lines
16 KiB
Vue
<template>
|
||
<div class="space-y-6 pb-8">
|
||
<!-- 活跃度热图 + 请求间隔时间线 -->
|
||
<div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
|
||
<ActivityHeatmapCard
|
||
:data="activityHeatmapData"
|
||
:title="isAdminPage ? '总体活跃天数' : '我的活跃天数'"
|
||
:is-loading="isLoadingHeatmap"
|
||
:has-error="heatmapError"
|
||
/>
|
||
<IntervalTimelineCard
|
||
:title="isAdminPage ? '请求间隔时间线' : '我的请求间隔'"
|
||
:is-admin="isAdminPage"
|
||
:hours="24"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 分析统计 -->
|
||
<!-- 管理员：模型 + 提供商 + API格式（3列） -->
|
||
<div
|
||
v-if="isAdminPage"
|
||
class="grid grid-cols-1 lg:grid-cols-3 gap-4"
|
||
>
|
||
<UsageModelTable
|
||
:data="enhancedModelStats"
|
||
:is-admin="authStore.isAdmin"
|
||
/>
|
||
<UsageProviderTable
|
||
:data="providerStats"
|
||
:is-admin="authStore.isAdmin"
|
||
/>
|
||
<UsageApiFormatTable
|
||
:data="apiFormatStats"
|
||
:is-admin="authStore.isAdmin"
|
||
/>
|
||
</div>
|
||
<!-- 用户：模型 + API格式（2列） -->
|
||
<div
|
||
v-else
|
||
class="grid grid-cols-1 lg:grid-cols-2 gap-4"
|
||
>
|
||
<UsageModelTable
|
||
:data="enhancedModelStats"
|
||
:is-admin="authStore.isAdmin"
|
||
/>
|
||
<UsageApiFormatTable
|
||
:data="apiFormatStats"
|
||
:is-admin="false"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 请求详情 -->
|
||
<UsageRecordsTable
|
||
:records="displayRecords"
|
||
:is-admin="isAdminPage"
|
||
:show-actual-cost="authStore.isAdmin"
|
||
:loading="isLoadingRecords"
|
||
:selected-period="selectedPeriod"
|
||
:filter-search="filterSearch"
|
||
:filter-user="filterUser"
|
||
:filter-model="filterModel"
|
||
:filter-provider="filterProvider"
|
||
:filter-status="filterStatus"
|
||
:available-users="availableUsers"
|
||
:available-models="availableModels"
|
||
:available-providers="availableProviders"
|
||
:current-page="currentPage"
|
||
:page-size="pageSize"
|
||
:total-records="totalRecords"
|
||
:page-size-options="pageSizeOptions"
|
||
:auto-refresh="globalAutoRefresh"
|
||
@update:selected-period="handlePeriodChange"
|
||
@update:filter-search="handleFilterSearchChange"
|
||
@update:filter-user="handleFilterUserChange"
|
||
@update:filter-model="handleFilterModelChange"
|
||
@update:filter-provider="handleFilterProviderChange"
|
||
@update:filter-status="handleFilterStatusChange"
|
||
@update:current-page="handlePageChange"
|
||
@update:page-size="handlePageSizeChange"
|
||
@update:auto-refresh="handleAutoRefreshChange"
|
||
@refresh="refreshData"
|
||
@export="exportData"
|
||
@show-detail="showRequestDetail"
|
||
/>
|
||
|
||
<!-- 请求详情抽屉 - 仅管理员可见 -->
|
||
<RequestDetailDrawer
|
||
v-if="isAdminPage"
|
||
:is-open="detailModalOpen"
|
||
:request-id="selectedRequestId"
|
||
@close="detailModalOpen = false"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
import { usageApi } from '@/api/usage'
|
||
import { usersApi } from '@/api/users'
|
||
import { meApi } from '@/api/me'
|
||
import {
|
||
UsageModelTable,
|
||
UsageProviderTable,
|
||
UsageApiFormatTable,
|
||
UsageRecordsTable,
|
||
ActivityHeatmapCard,
|
||
RequestDetailDrawer,
|
||
IntervalTimelineCard
|
||
} from '@/features/usage/components'
|
||
import {
|
||
useUsageData,
|
||
getDateRangeFromPeriod
|
||
} from '@/features/usage/composables'
|
||
import type { PeriodValue, FilterStatusValue } from '@/features/usage/types'
|
||
import type { UserOption } from '@/features/usage/components/UsageRecordsTable.vue'
|
||
import { log } from '@/utils/logger'
|
||
import type { ActivityHeatmap } from '@/types/activity'
|
||
import { useToast } from '@/composables/useToast'
|
||
|
||
const route = useRoute()
|
||
const { warning } = useToast()
|
||
const authStore = useAuthStore()
|
||
|
||
// 判断是否是管理员页面
|
||
const isAdminPage = computed(() => route.path.startsWith('/admin'))
|
||
|
||
// 时间段选择
|
||
const selectedPeriod = ref<PeriodValue>('today')
|
||
|
||
// 分页状态
|
||
const currentPage = ref(1)
|
||
const pageSize = ref(20)
|
||
const pageSizeOptions = [10, 20, 50, 100]
|
||
|
||
// 筛选状态
|
||
const filterSearch = ref('')
|
||
const filterUser = ref('__all__')
|
||
const filterModel = ref('__all__')
|
||
const filterProvider = ref('__all__')
|
||
const filterStatus = ref<FilterStatusValue>('__all__')
|
||
|
||
// 用户列表（仅管理员页面使用）
|
||
const availableUsers = ref<UserOption[]>([])
|
||
|
||
// 使用 composables
|
||
const {
|
||
isLoadingRecords,
|
||
providerStats,
|
||
apiFormatStats,
|
||
currentRecords,
|
||
totalRecords,
|
||
enhancedModelStats,
|
||
availableModels,
|
||
availableProviders,
|
||
loadStats,
|
||
loadRecords
|
||
} = useUsageData({ isAdminPage })
|
||
|
||
// 热力图状态
|
||
const activityHeatmapData = ref<ActivityHeatmap | null>(null)
|
||
const isLoadingHeatmap = ref(false)
|
||
const heatmapError = ref(false)
|
||
|
||
// 加载热力图数据
|
||
async function loadHeatmapData() {
|
||
isLoadingHeatmap.value = true
|
||
heatmapError.value = false
|
||
try {
|
||
if (isAdminPage.value) {
|
||
activityHeatmapData.value = await usageApi.getActivityHeatmap()
|
||
} else {
|
||
activityHeatmapData.value = await meApi.getActivityHeatmap()
|
||
}
|
||
} catch (error) {
|
||
log.error('加载热力图数据失败:', error)
|
||
heatmapError.value = true
|
||
} finally {
|
||
isLoadingHeatmap.value = false
|
||
}
|
||
}
|
||
|
||
// 用户页面需要前端筛选
|
||
const filteredRecords = computed(() => {
|
||
if (!isAdminPage.value) {
|
||
let records = [...currentRecords.value]
|
||
|
||
if (filterModel.value !== '__all__') {
|
||
records = records.filter(record => record.model === filterModel.value)
|
||
}
|
||
|
||
if (filterProvider.value !== '__all__') {
|
||
records = records.filter(record => record.provider === filterProvider.value)
|
||
}
|
||
|
||
if (filterStatus.value !== '__all__') {
|
||
if (filterStatus.value === 'stream') {
|
||
records = records.filter(record =>
|
||
record.is_stream && !record.error_message && (!record.status_code || record.status_code === 200)
|
||
)
|
||
} else if (filterStatus.value === 'standard') {
|
||
records = records.filter(record =>
|
||
!record.is_stream && !record.error_message && (!record.status_code || record.status_code === 200)
|
||
)
|
||
} else if (filterStatus.value === 'error') {
|
||
records = records.filter(record =>
|
||
record.error_message || (record.status_code && record.status_code >= 400)
|
||
)
|
||
} else if (filterStatus.value === 'active') {
|
||
records = records.filter(record =>
|
||
record.status === 'pending' || record.status === 'streaming'
|
||
)
|
||
} else if (filterStatus.value === 'pending') {
|
||
records = records.filter(record => record.status === 'pending')
|
||
} else if (filterStatus.value === 'streaming') {
|
||
records = records.filter(record => record.status === 'streaming')
|
||
} else if (filterStatus.value === 'completed') {
|
||
records = records.filter(record => record.status === 'completed')
|
||
} else if (filterStatus.value === 'failed') {
|
||
// 失败请求需要同时考虑新旧两种判断方式：
|
||
// 1. 新方式：status = "failed"
|
||
// 2. 旧方式：status_code >= 400 或 error_message 不为空
|
||
records = records.filter(record =>
|
||
record.status === 'failed' ||
|
||
(record.status_code && record.status_code >= 400) ||
|
||
record.error_message
|
||
)
|
||
}
|
||
}
|
||
|
||
return records
|
||
}
|
||
return currentRecords.value
|
||
})
|
||
|
||
// 获取活跃请求的 ID 列表
|
||
const activeRequestIds = computed(() => {
|
||
return currentRecords.value
|
||
.filter(record => record.status === 'pending' || record.status === 'streaming')
|
||
.map(record => record.id)
|
||
})
|
||
|
||
// 检查是否有活跃请求
|
||
const hasActiveRequests = computed(() => activeRequestIds.value.length > 0)
|
||
|
||
// 自动刷新定时器
|
||
let autoRefreshTimer: ReturnType<typeof setInterval> | null = null
|
||
let globalAutoRefreshTimer: ReturnType<typeof setInterval> | null = null
|
||
const AUTO_REFRESH_INTERVAL = 1000 // 1秒刷新一次（用于活跃请求）
|
||
const GLOBAL_AUTO_REFRESH_INTERVAL = 10000 // 10秒刷新一次（全局自动刷新）
|
||
const globalAutoRefresh = ref(false) // 全局自动刷新开关
|
||
|
||
// 轮询活跃请求状态（轻量级，只更新状态变化的记录）
|
||
async function pollActiveRequests() {
|
||
if (!hasActiveRequests.value) return
|
||
|
||
try {
|
||
// 根据页面类型选择不同的 API
|
||
const idsParam = activeRequestIds.value.join(',')
|
||
const { requests } = isAdminPage.value
|
||
? await usageApi.getActiveRequests(activeRequestIds.value)
|
||
: await meApi.getActiveRequests(idsParam)
|
||
|
||
let shouldRefresh = false
|
||
|
||
for (const update of requests) {
|
||
const record = currentRecords.value.find(r => r.id === update.id)
|
||
if (!record) {
|
||
// 后端返回了未知的活跃请求，触发刷新以获取完整数据
|
||
shouldRefresh = true
|
||
continue
|
||
}
|
||
|
||
// 状态变化：completed/failed 需要刷新获取完整数据
|
||
if (record.status !== update.status) {
|
||
record.status = update.status
|
||
}
|
||
if (update.status === 'completed' || update.status === 'failed') {
|
||
shouldRefresh = true
|
||
}
|
||
|
||
// 进行中状态也需要持续更新（provider/key/TTFB 可能在 streaming 后才落库）
|
||
record.input_tokens = update.input_tokens
|
||
record.output_tokens = update.output_tokens
|
||
record.cost = update.cost
|
||
record.response_time_ms = update.response_time_ms ?? undefined
|
||
record.first_byte_time_ms = update.first_byte_time_ms ?? undefined
|
||
// 管理员接口返回额外字段
|
||
if ('provider' in update && typeof update.provider === 'string') {
|
||
record.provider = update.provider
|
||
}
|
||
if ('api_key_name' in update) {
|
||
record.api_key_name = typeof update.api_key_name === 'string' ? update.api_key_name : undefined
|
||
}
|
||
}
|
||
|
||
if (shouldRefresh) {
|
||
await refreshData()
|
||
}
|
||
} catch (error) {
|
||
log.error('轮询活跃请求状态失败:', error)
|
||
}
|
||
}
|
||
|
||
// 启动自动刷新
|
||
function startAutoRefresh() {
|
||
if (autoRefreshTimer) return
|
||
autoRefreshTimer = setInterval(pollActiveRequests, AUTO_REFRESH_INTERVAL)
|
||
}
|
||
|
||
// 停止自动刷新
|
||
function stopAutoRefresh() {
|
||
if (autoRefreshTimer) {
|
||
clearInterval(autoRefreshTimer)
|
||
autoRefreshTimer = null
|
||
}
|
||
}
|
||
|
||
// 监听活跃请求状态，自动启动/停止刷新
|
||
watch(hasActiveRequests, (hasActive) => {
|
||
if (hasActive) {
|
||
startAutoRefresh()
|
||
} else {
|
||
stopAutoRefresh()
|
||
}
|
||
}, { immediate: true })
|
||
|
||
// 启动全局自动刷新
|
||
function startGlobalAutoRefresh() {
|
||
if (globalAutoRefreshTimer) return
|
||
globalAutoRefreshTimer = setInterval(refreshData, GLOBAL_AUTO_REFRESH_INTERVAL)
|
||
}
|
||
|
||
// 停止全局自动刷新
|
||
function stopGlobalAutoRefresh() {
|
||
if (globalAutoRefreshTimer) {
|
||
clearInterval(globalAutoRefreshTimer)
|
||
globalAutoRefreshTimer = null
|
||
}
|
||
}
|
||
|
||
// 处理自动刷新开关变化
|
||
function handleAutoRefreshChange(value: boolean) {
|
||
globalAutoRefresh.value = value
|
||
if (value) {
|
||
refreshData() // 立即刷新一次
|
||
startGlobalAutoRefresh()
|
||
} else {
|
||
stopGlobalAutoRefresh()
|
||
}
|
||
}
|
||
|
||
// 组件卸载时清理定时器
|
||
onUnmounted(() => {
|
||
stopAutoRefresh()
|
||
stopGlobalAutoRefresh()
|
||
})
|
||
|
||
// 用户页面的前端分页
|
||
const paginatedRecords = computed(() => {
|
||
if (!isAdminPage.value) {
|
||
const start = (currentPage.value - 1) * pageSize.value
|
||
const end = start + pageSize.value
|
||
return filteredRecords.value.slice(start, end)
|
||
}
|
||
return currentRecords.value
|
||
})
|
||
|
||
// 显示的记录
|
||
const displayRecords = computed(() => paginatedRecords.value)
|
||
|
||
|
||
// 详情弹窗状态
|
||
const detailModalOpen = ref(false)
|
||
const selectedRequestId = ref<string | null>(null)
|
||
|
||
// 初始化加载
|
||
onMounted(async () => {
|
||
const dateRange = getDateRangeFromPeriod(selectedPeriod.value)
|
||
|
||
// 并行加载统计数据和热力图（使用 allSettled 避免其中一个失败影响另一个）
|
||
const [statsResult, heatmapResult] = await Promise.allSettled([
|
||
loadStats(dateRange),
|
||
loadHeatmapData()
|
||
])
|
||
|
||
// 检查加载结果并通知用户
|
||
if (statsResult.status === 'rejected') {
|
||
log.error('加载统计数据失败:', statsResult.reason)
|
||
warning('统计数据加载失败，请刷新重试')
|
||
}
|
||
if (heatmapResult.status === 'rejected') {
|
||
log.error('加载热力图数据失败:', heatmapResult.reason)
|
||
// 热力图加载失败不提示，因为 UI 已显示占位符
|
||
}
|
||
|
||
// 加载记录和用户列表
|
||
if (isAdminPage.value) {
|
||
// 管理员页面：并行加载用户列表和记录
|
||
const [users] = await Promise.all([
|
||
usersApi.getAllUsers(),
|
||
loadRecords({ page: currentPage.value, pageSize: pageSize.value }, getCurrentFilters())
|
||
])
|
||
availableUsers.value = users.map(u => ({ id: u.id, username: u.username, email: u.email }))
|
||
} else {
|
||
// 用户页面：加载记录
|
||
await loadRecords({ page: currentPage.value, pageSize: pageSize.value }, getCurrentFilters())
|
||
}
|
||
})
|
||
|
||
// 处理时间段变化
|
||
async function handlePeriodChange(value: string) {
|
||
selectedPeriod.value = value as PeriodValue
|
||
currentPage.value = 1 // 重置到第一页
|
||
|
||
const dateRange = getDateRangeFromPeriod(selectedPeriod.value)
|
||
await loadStats(dateRange)
|
||
await loadRecords({ page: 1, pageSize: pageSize.value }, getCurrentFilters())
|
||
}
|
||
|
||
// 处理分页变化
|
||
async function handlePageChange(page: number) {
|
||
currentPage.value = page
|
||
await loadRecords({ page, pageSize: pageSize.value }, getCurrentFilters())
|
||
}
|
||
|
||
// 处理每页大小变化
|
||
async function handlePageSizeChange(size: number) {
|
||
pageSize.value = size
|
||
currentPage.value = 1 // 重置到第一页
|
||
await loadRecords({ page: 1, pageSize: size }, getCurrentFilters())
|
||
}
|
||
|
||
// 获取当前筛选参数
|
||
function getCurrentFilters() {
|
||
return {
|
||
search: filterSearch.value.trim() || undefined,
|
||
user_id: filterUser.value !== '__all__' ? filterUser.value : undefined,
|
||
model: filterModel.value !== '__all__' ? filterModel.value : undefined,
|
||
provider: filterProvider.value !== '__all__' ? filterProvider.value : undefined,
|
||
status: filterStatus.value !== '__all__' ? filterStatus.value : undefined
|
||
}
|
||
}
|
||
|
||
// 处理筛选变化
|
||
async function handleFilterSearchChange(value: string) {
|
||
filterSearch.value = value
|
||
currentPage.value = 1
|
||
|
||
await loadRecords({ page: 1, pageSize: pageSize.value }, getCurrentFilters())
|
||
}
|
||
|
||
async function handleFilterUserChange(value: string) {
|
||
filterUser.value = value
|
||
currentPage.value = 1 // 重置到第一页
|
||
|
||
if (isAdminPage.value) {
|
||
await loadRecords({ page: 1, pageSize: pageSize.value }, getCurrentFilters())
|
||
}
|
||
}
|
||
|
||
async function handleFilterModelChange(value: string) {
|
||
filterModel.value = value
|
||
currentPage.value = 1 // 重置到第一页
|
||
|
||
if (isAdminPage.value) {
|
||
await loadRecords({ page: 1, pageSize: pageSize.value }, getCurrentFilters())
|
||
}
|
||
}
|
||
|
||
async function handleFilterProviderChange(value: string) {
|
||
filterProvider.value = value
|
||
currentPage.value = 1
|
||
|
||
if (isAdminPage.value) {
|
||
await loadRecords({ page: 1, pageSize: pageSize.value }, getCurrentFilters())
|
||
}
|
||
}
|
||
|
||
async function handleFilterStatusChange(value: string) {
|
||
filterStatus.value = value as FilterStatusValue
|
||
currentPage.value = 1
|
||
|
||
if (isAdminPage.value) {
|
||
await loadRecords({ page: 1, pageSize: pageSize.value }, getCurrentFilters())
|
||
}
|
||
}
|
||
|
||
// 刷新数据
|
||
async function refreshData() {
|
||
const dateRange = getDateRangeFromPeriod(selectedPeriod.value)
|
||
await loadStats(dateRange)
|
||
await loadRecords({ page: currentPage.value, pageSize: pageSize.value }, getCurrentFilters())
|
||
}
|
||
|
||
// 显示请求详情
|
||
function showRequestDetail(id: string) {
|
||
if (!isAdminPage.value) return
|
||
selectedRequestId.value = id
|
||
detailModalOpen.value = true
|
||
}
|
||
|
||
// 导出数据
|
||
async function exportData(format: 'csv' | 'json') {
|
||
try {
|
||
const blob = await usageApi.exportUsage(format)
|
||
const url = window.URL.createObjectURL(blob)
|
||
const a = document.createElement('a')
|
||
a.href = url
|
||
a.download = `usage-stats.${format}`
|
||
a.click()
|
||
window.URL.revokeObjectURL(url)
|
||
} catch (error) {
|
||
log.error('导出失败:', error)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
</style>
|