From 269c0b60a87413e94306a70ea77190f9a8ac0ee4 Mon Sep 17 00:00:00 2001 From: Leo <98382335+gaoziman@users.noreply.github.com> Date: Tue, 23 Sep 2025 22:28:32 +0800 Subject: [PATCH] =?UTF-8?q?feat(dashboard):=20=E6=96=B0=E5=A2=9E=E4=BB=AA?= =?UTF-8?q?=E8=A1=A8=E7=9B=98=E7=9B=91=E6=8E=A7=E7=B1=BB=E5=9E=8B=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E5=92=8C=E6=A8=A1=E6=8B=9F=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/dashboard/monitor/mockData.ts | 116 ++++++++++++++++++++++++ src/views/dashboard/monitor/types.ts | 44 +++++++++ 2 files changed, 160 insertions(+) create mode 100644 src/views/dashboard/monitor/mockData.ts create mode 100644 src/views/dashboard/monitor/types.ts diff --git a/src/views/dashboard/monitor/mockData.ts b/src/views/dashboard/monitor/mockData.ts new file mode 100644 index 0000000..7ba3c5f --- /dev/null +++ b/src/views/dashboard/monitor/mockData.ts @@ -0,0 +1,116 @@ +import type { DashboardData } from './types' + +// 生成模拟仪表盘数据 +export function generateMockDashboardData(): DashboardData { + return { + // 用户统计数据 + userStats: { + totalUsers: 1286, + todayNewUsers: 23, + activeUsers: 856, + onlineUsers: 142, + }, + + // 登录统计数据 + loginStats: { + todayLogins: 468, + totalLogins: 45672, + loginTrend: generateLoginTrendData(), + }, + + // 存储统计数据 + storageStats: { + totalFiles: 8924, + totalImages: 3420, + totalSize: '2.3 GB', + todayUploads: 67, + storageUsage: 67.5, + availableSpace: '1.2 GB', + }, + + // 今日活跃数据 + dailyActivityStats: { + todayVisits: 1247, + todayOperations: 856, + activeUsers: 142, + newContent: 23, + apiCalls: 3420, + avgResponseTime: 235, + }, + + // 系统状态 + systemStatus: { + diskUsage: 67.5, + memoryUsage: 43.2, + cpuUsage: 28.7, + systemHealth: 'good', + uptime: '15天 8小时 23分钟', + lastBackup: '2024-01-15 02:30:00', + }, + } +} + +// 生成登录趋势数据(最近7天) +function generateLoginTrendData() { + const trendData = [] + const today = new Date() + + for (let i = 6; i >= 0; i--) { + const date = new Date(today) + date.setDate(date.getDate() - i) + + const dateStr = date.toISOString().split('T')[0] + const label = date.toLocaleDateString('zh-CN', { + month: 'short', + day: 'numeric', + }) + + // 生成随机但合理的登录数量 + const baseCount = 300 + const randomVariation = Math.floor(Math.random() * 200) - 100 + const weekendMultiplier + = date.getDay() === 0 || date.getDay() === 6 ? 0.6 : 1 + const count = Math.max( + 50, + Math.floor((baseCount + randomVariation) * weekendMultiplier), + ) + + trendData.push({ + date: dateStr, + count, + label, + }) + } + + return trendData +} + +// 生成随机颜色 +export function generateRandomColor(): string { + const colors = [ + '#18A058', + '#2080F0', + '#F0A020', + '#D03050', + '#722ED1', + '#13C2C2', + '#52C41A', + '#1890FF', + '#FAAD14', + '#F5222D', + ] + return colors[Math.floor(Math.random() * colors.length)] +} + +// 获取状态颜色 +export function getStatusColor(status: string): string { + const colorMap: Record = { + success: 'var(--success-color)', + failed: 'var(--error-color)', + warning: 'var(--warning-color)', + info: 'var(--info-color)', + good: 'var(--success-color)', + critical: 'var(--error-color)', + } + return colorMap[status] || 'var(--text-color-3)' +} diff --git a/src/views/dashboard/monitor/types.ts b/src/views/dashboard/monitor/types.ts new file mode 100644 index 0000000..39a190f --- /dev/null +++ b/src/views/dashboard/monitor/types.ts @@ -0,0 +1,44 @@ +// 仪表盘数据类型定义 + +// 从API模块重新导出类型,保持一致性 +export type { + DailyActivityStatsVo as DailyActivityStats, + LoginStatsVo as LoginStats, + LoginTrendItemVo, + StorageStatsVo as StorageStats, + UserStatsVo as UserStats, +} from '@/service/api/dashboard' + +// 完整的仪表盘数据结构(与后端API保持一致) +export interface DashboardData { + userStats: UserStats + loginStats: LoginStats + storageStats: StorageStats + dailyActivityStats: DailyActivityStats +} + +// 图表数据点类型 +export interface ChartDataPoint { + name: string + value: number + color?: string +} + +// 趋势数据类型 +export interface TrendData { + label: string + value: number + date: string +} + +// 统计卡片属性类型 +export interface StatCardProps { + title: string + value: number | string + subtitle: string + extraInfo?: string + trend?: string + trendUp?: boolean + icon: string + color: string +}