feat(dashboard): Enhance data loading and display for dynamic dashboard
- Implement robust error handling for dashboard data fetching - Add support for real-time data loading with fallback to empty states - Generate dynamic issue type and quality trend data from actual task data - Introduce demo mode indicator and informative alert for data context - Improve console logging for data retrieval failures - Update stats display to handle zero or undefined data gracefully - Add database mode and demo mode context to dashboard rendering Resolves data display inconsistencies and provides more transparent user feedback about current application state
This commit is contained in:
lintsinghua
parent
c403b4a440
commit
6d1071289c
|
|
@ -37,7 +37,7 @@ export class CodeAnalysisEngine {
|
||||||
|
|
||||||
static async analyzeCode(code: string, language: string): Promise<CodeAnalysisResult> {
|
static async analyzeCode(code: string, language: string): Promise<CodeAnalysisResult> {
|
||||||
const llmService = this.createLLMService();
|
const llmService = this.createLLMService();
|
||||||
|
|
||||||
// 获取输出语言配置
|
// 获取输出语言配置
|
||||||
const outputLanguage = env.OUTPUT_LANGUAGE || 'zh-CN';
|
const outputLanguage = env.OUTPUT_LANGUAGE || 'zh-CN';
|
||||||
const isChineseOutput = outputLanguage === 'zh-CN';
|
const isChineseOutput = outputLanguage === 'zh-CN';
|
||||||
|
|
@ -79,7 +79,7 @@ export class CodeAnalysisEngine {
|
||||||
}`;
|
}`;
|
||||||
|
|
||||||
// 根据配置生成不同语言的提示词
|
// 根据配置生成不同语言的提示词
|
||||||
const systemPrompt = isChineseOutput
|
const systemPrompt = isChineseOutput
|
||||||
? `你是一个专业的代码审计助手。
|
? `你是一个专业的代码审计助手。
|
||||||
|
|
||||||
【重要】请严格遵守以下规则：
|
【重要】请严格遵守以下规则：
|
||||||
|
|
@ -254,42 +254,20 @@ Note:
|
||||||
// 1. 去除前后空白
|
// 1. 去除前后空白
|
||||||
str = str.trim();
|
str = str.trim();
|
||||||
|
|
||||||
// 2. 将 JavaScript 模板字符串（反引号）替换为双引号，并处理多行内容
|
// 2. 修复尾部逗号（JSON 不允许）- 必须在其他处理之前
|
||||||
// 匹配: "key": `多行内容` => "key": "转义后的内容"
|
|
||||||
str = str.replace(/:\s*`([\s\S]*?)`/g, (match, content) => {
|
|
||||||
// 转义所有特殊字符
|
|
||||||
let escaped = content
|
|
||||||
.replace(/\\/g, '\\\\') // 反斜杠
|
|
||||||
.replace(/"/g, '\\"') // 双引号
|
|
||||||
.replace(/\n/g, '\\n') // 换行符
|
|
||||||
.replace(/\r/g, '\\r') // 回车符
|
|
||||||
.replace(/\t/g, '\\t') // 制表符
|
|
||||||
.replace(/\f/g, '\\f') // 换页符
|
|
||||||
.replace(/\b/g, '\\b'); // 退格符
|
|
||||||
return `: "${escaped}"`;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 3. 处理字符串中未转义的换行符（防御性处理）
|
|
||||||
// 匹配双引号字符串内的实际换行符
|
|
||||||
str = str.replace(/"([^"]*?)"/g, (match, content) => {
|
|
||||||
if (content.includes('\n') || content.includes('\r') || content.includes('\t')) {
|
|
||||||
const escaped = content
|
|
||||||
.replace(/\n/g, '\\n')
|
|
||||||
.replace(/\r/g, '\\r')
|
|
||||||
.replace(/\t/g, '\\t')
|
|
||||||
.replace(/\f/g, '\\f')
|
|
||||||
.replace(/\b/g, '\\b');
|
|
||||||
return `"${escaped}"`;
|
|
||||||
}
|
|
||||||
return match;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 4. 修复尾部逗号（JSON 不允许）
|
|
||||||
str = str.replace(/,(\s*[}\]])/g, '$1');
|
str = str.replace(/,(\s*[}\]])/g, '$1');
|
||||||
|
|
||||||
// 5. 修复缺少逗号的问题（两个连续的 } 或 ]）
|
// 3. 修复缺少逗号的问题
|
||||||
str = str.replace(/\}(\s*)\{/g, '},\n{');
|
str = str.replace(/\}(\s*)\{/g, '},\n{');
|
||||||
str = str.replace(/\](\s*)\[/g, '],\n[');
|
str = str.replace(/\](\s*)\[/g, '],\n[');
|
||||||
|
str = str.replace(/\}(\s*)"([^"]+)":/g, '},\n"$2":');
|
||||||
|
str = str.replace(/\](\s*)"([^"]+)":/g, '],\n"$2":');
|
||||||
|
|
||||||
|
// 4. 修复对象/数组后缺少逗号的情况
|
||||||
|
str = str.replace(/([}\]])(\s*)(")/g, '$1,\n$3');
|
||||||
|
|
||||||
|
// 5. 移除多余的逗号
|
||||||
|
str = str.replace(/,+/g, ',');
|
||||||
|
|
||||||
return str;
|
return str;
|
||||||
};
|
};
|
||||||
|
|
@ -301,27 +279,27 @@ Note:
|
||||||
.replace(/^\uFEFF/, '')
|
.replace(/^\uFEFF/, '')
|
||||||
.replace(/[\u200B-\u200D\uFEFF]/g, '');
|
.replace(/[\u200B-\u200D\uFEFF]/g, '');
|
||||||
|
|
||||||
// 修复字符串值中的特殊字符
|
// 更激进的字符串值清理
|
||||||
// 匹配所有 JSON 字符串值（包括 description, suggestion, code_snippet 等）
|
// 使用更宽松的正则来匹配字符串值，包括可能包含未转义引号的情况
|
||||||
cleaned = cleaned.replace(/"([^"]+)":\s*"((?:[^"\\]|\\.)*)"/g, (match, key, value) => {
|
cleaned = cleaned.replace(/"([^"]+)":\s*"([^"]*)"/gs, (match, key, value) => {
|
||||||
// 如果值已经正确转义，跳过
|
// 转义所有特殊字符
|
||||||
if (!value.includes('\n') && !value.includes('\r') && !value.includes('\t') && !value.match(/[^\x20-\x7E]/)) {
|
|
||||||
return match;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 转义特殊字符
|
|
||||||
let escaped = value
|
let escaped = value
|
||||||
// 先处理已存在的反斜杠
|
// 移除或替换所有控制字符（包括换行、制表符等）
|
||||||
|
.replace(/[\x00-\x1F\x7F-\x9F]/g, (char) => {
|
||||||
|
const code = char.charCodeAt(0);
|
||||||
|
if (code === 0x0A) return '\\n'; // \n
|
||||||
|
if (code === 0x0D) return '\\r'; // \r
|
||||||
|
if (code === 0x09) return '\\t'; // \t
|
||||||
|
return ''; // 移除其他控制字符
|
||||||
|
})
|
||||||
|
// 转义反斜杠（必须在其他转义之前）
|
||||||
.replace(/\\/g, '\\\\')
|
.replace(/\\/g, '\\\\')
|
||||||
// 转义换行符
|
// 转义双引号
|
||||||
.replace(/\n/g, '\\n')
|
|
||||||
.replace(/\r/g, '\\r')
|
|
||||||
// 转义制表符
|
|
||||||
.replace(/\t/g, '\\t')
|
|
||||||
// 转义引号
|
|
||||||
.replace(/"/g, '\\"')
|
.replace(/"/g, '\\"')
|
||||||
// 移除其他控制字符
|
// 移除中文引号和其他可能导致问题的字符
|
||||||
.replace(/[\x00-\x1F\x7F]/g, '');
|
.replace(/[""'']/g, '')
|
||||||
|
// 确保没有未闭合的转义序列
|
||||||
|
.replace(/\\(?!["\\/bfnrtu])/g, '\\\\');
|
||||||
|
|
||||||
return `"${key}": "${escaped}"`;
|
return `"${key}": "${escaped}"`;
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -13,16 +13,20 @@ import {
|
||||||
FileText, GitBranch, Shield, TrendingUp, Zap,
|
FileText, GitBranch, Shield, TrendingUp, Zap,
|
||||||
BarChart3, Target, ArrowUpRight, Calendar
|
BarChart3, Target, ArrowUpRight, Calendar
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { api } from "@/shared/config/database";
|
import { api, dbMode, isDemoMode } from "@/shared/config/database";
|
||||||
import type { Project, AuditTask, ProjectStats } from "@/shared/types";
|
import type { Project, AuditTask, ProjectStats } from "@/shared/types";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||||
|
import { Info } from "lucide-react";
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
const [stats, setStats] = useState<ProjectStats | null>(null);
|
const [stats, setStats] = useState<ProjectStats | null>(null);
|
||||||
const [recentProjects, setRecentProjects] = useState<Project[]>([]);
|
const [recentProjects, setRecentProjects] = useState<Project[]>([]);
|
||||||
const [recentTasks, setRecentTasks] = useState<AuditTask[]>([]);
|
const [recentTasks, setRecentTasks] = useState<AuditTask[]>([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [issueTypeData, setIssueTypeData] = useState<Array<{ name: string; value: number; color: string }>>([]);
|
||||||
|
const [qualityTrendData, setQualityTrendData] = useState<Array<{ date: string; score: number }>>([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadDashboardData();
|
loadDashboardData();
|
||||||
|
|
@ -38,31 +42,95 @@ export default function Dashboard() {
|
||||||
api.getAuditTasks()
|
api.getAuditTasks()
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
// 统计数据 - 使用真实数据或空数据
|
||||||
if (results[0].status === 'fulfilled') {
|
if (results[0].status === 'fulfilled') {
|
||||||
setStats(results[0].value);
|
setStats(results[0].value);
|
||||||
} else {
|
} else {
|
||||||
|
console.error('获取统计数据失败:', results[0].reason);
|
||||||
|
// 使用空数据而不是假数据
|
||||||
setStats({
|
setStats({
|
||||||
total_projects: 5,
|
total_projects: 0,
|
||||||
active_projects: 4,
|
active_projects: 0,
|
||||||
total_tasks: 8,
|
total_tasks: 0,
|
||||||
completed_tasks: 6,
|
completed_tasks: 0,
|
||||||
total_issues: 64,
|
total_issues: 0,
|
||||||
resolved_issues: 45,
|
resolved_issues: 0,
|
||||||
avg_quality_score: 88.5
|
avg_quality_score: 0
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 项目列表 - 使用真实数据
|
||||||
if (results[1].status === 'fulfilled') {
|
if (results[1].status === 'fulfilled') {
|
||||||
setRecentProjects(Array.isArray(results[1].value) ? results[1].value.slice(0, 5) : []);
|
setRecentProjects(Array.isArray(results[1].value) ? results[1].value.slice(0, 5) : []);
|
||||||
} else {
|
} else {
|
||||||
|
console.error('获取项目列表失败:', results[1].reason);
|
||||||
setRecentProjects([]);
|
setRecentProjects([]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 任务列表 - 使用真实数据
|
||||||
|
let tasks: AuditTask[] = [];
|
||||||
if (results[2].status === 'fulfilled') {
|
if (results[2].status === 'fulfilled') {
|
||||||
setRecentTasks(Array.isArray(results[2].value) ? results[2].value.slice(0, 10) : []);
|
tasks = Array.isArray(results[2].value) ? results[2].value : [];
|
||||||
|
setRecentTasks(tasks.slice(0, 10));
|
||||||
} else {
|
} else {
|
||||||
|
console.error('获取任务列表失败:', results[2].reason);
|
||||||
setRecentTasks([]);
|
setRecentTasks([]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 基于真实任务数据生成质量趋势
|
||||||
|
if (tasks.length > 0) {
|
||||||
|
// 按日期分组计算平均质量分
|
||||||
|
const tasksByDate = tasks
|
||||||
|
.filter(t => t.completed_at && t.quality_score > 0)
|
||||||
|
.sort((a, b) => new Date(a.completed_at!).getTime() - new Date(b.completed_at!).getTime())
|
||||||
|
.slice(-6); // 最近6个任务
|
||||||
|
|
||||||
|
const trendData = tasksByDate.map((task, index) => ({
|
||||||
|
date: new Date(task.completed_at!).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }),
|
||||||
|
score: task.quality_score
|
||||||
|
}));
|
||||||
|
|
||||||
|
setQualityTrendData(trendData.length > 0 ? trendData : []);
|
||||||
|
} else {
|
||||||
|
setQualityTrendData([]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 基于真实数据生成问题类型分布
|
||||||
|
// 需要获取所有问题数据来统计
|
||||||
|
try {
|
||||||
|
const allIssues = await Promise.all(
|
||||||
|
tasks.map(task => api.getAuditIssues(task.id).catch(() => []))
|
||||||
|
);
|
||||||
|
const flatIssues = allIssues.flat();
|
||||||
|
|
||||||
|
if (flatIssues.length > 0) {
|
||||||
|
const typeCount: Record<string, number> = {};
|
||||||
|
flatIssues.forEach(issue => {
|
||||||
|
typeCount[issue.issue_type] = (typeCount[issue.issue_type] || 0) + 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
const typeMap: Record<string, { name: string; color: string }> = {
|
||||||
|
security: { name: '安全问题', color: '#dc2626' },
|
||||||
|
bug: { name: '潜在Bug', color: '#7f1d1d' },
|
||||||
|
performance: { name: '性能问题', color: '#b91c1c' },
|
||||||
|
style: { name: '代码风格', color: '#991b1b' },
|
||||||
|
maintainability: { name: '可维护性', color: '#450a0a' }
|
||||||
|
};
|
||||||
|
|
||||||
|
const issueData = Object.entries(typeCount).map(([type, count]) => ({
|
||||||
|
name: typeMap[type]?.name || type,
|
||||||
|
value: count,
|
||||||
|
color: typeMap[type]?.color || '#6b7280'
|
||||||
|
}));
|
||||||
|
|
||||||
|
setIssueTypeData(issueData);
|
||||||
|
} else {
|
||||||
|
setIssueTypeData([]);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取问题数据失败:', error);
|
||||||
|
setIssueTypeData([]);
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('仪表盘数据加载失败:', error);
|
console.error('仪表盘数据加载失败:', error);
|
||||||
toast.error("数据加载失败");
|
toast.error("数据加载失败");
|
||||||
|
|
@ -80,22 +148,7 @@ export default function Dashboard() {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const issueTypeData = [
|
|
||||||
{ name: '安全问题', value: 15, color: '#dc2626' },
|
|
||||||
{ name: '性能问题', value: 25, color: '#b91c1c' },
|
|
||||||
{ name: '代码风格', value: 35, color: '#991b1b' },
|
|
||||||
{ name: '潜在Bug', value: 20, color: '#7f1d1d' },
|
|
||||||
{ name: '可维护性', value: 5, color: '#450a0a' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const qualityTrendData = [
|
|
||||||
{ date: '1月', score: 75 },
|
|
||||||
{ date: '2月', score: 78 },
|
|
||||||
{ date: '3月', score: 82 },
|
|
||||||
{ date: '4月', score: 85 },
|
|
||||||
{ date: '5月', score: 88 },
|
|
||||||
{ date: '6月', score: 90 }
|
|
||||||
];
|
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
|
|
@ -117,7 +170,10 @@ export default function Dashboard() {
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="page-title">仪表盘</h1>
|
<h1 className="page-title">仪表盘</h1>
|
||||||
<p className="page-subtitle">实时监控项目状态，掌握代码质量动态</p>
|
<p className="page-subtitle">
|
||||||
|
实时监控项目状态，掌握代码质量动态
|
||||||
|
{isDemoMode && <Badge variant="outline" className="ml-2">演示模式</Badge>}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-3">
|
<div className="flex gap-3">
|
||||||
<Link to="/instant-analysis">
|
<Link to="/instant-analysis">
|
||||||
|
|
@ -135,6 +191,20 @@ export default function Dashboard() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* 数据库模式提示 */}
|
||||||
|
{isDemoMode && (
|
||||||
|
<Alert>
|
||||||
|
<Info className="h-4 w-4" />
|
||||||
|
<AlertDescription>
|
||||||
|
当前使用<strong>演示模式</strong>，显示的是模拟数据。
|
||||||
|
配置数据库后将显示真实数据。
|
||||||
|
<Link to="/admin" className="ml-2 text-primary hover:underline">
|
||||||
|
前往数据库管理 →
|
||||||
|
</Link>
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Stats Cards */}
|
{/* Stats Cards */}
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||||
<Card className="stat-card group">
|
<Card className="stat-card group">
|
||||||
|
|
@ -142,8 +212,8 @@ export default function Dashboard() {
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<p className="stat-label">总项目数</p>
|
<p className="stat-label">总项目数</p>
|
||||||
<p className="stat-value">{stats?.total_projects || 5}</p>
|
<p className="stat-value">{stats?.total_projects || 0}</p>
|
||||||
<p className="text-xs text-gray-500 mt-1">活跃 {stats?.active_projects || 4} 个</p>
|
<p className="text-xs text-gray-500 mt-1">活跃 {stats?.active_projects || 0} 个</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="stat-icon from-primary to-accent group-hover:scale-110 transition-transform">
|
<div className="stat-icon from-primary to-accent group-hover:scale-110 transition-transform">
|
||||||
<Code className="w-6 h-6 text-white" />
|
<Code className="w-6 h-6 text-white" />
|
||||||
|
|
@ -157,8 +227,8 @@ export default function Dashboard() {
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<p className="stat-label">审计任务</p>
|
<p className="stat-label">审计任务</p>
|
||||||
<p className="stat-value">{stats?.total_tasks || 8}</p>
|
<p className="stat-value">{stats?.total_tasks || 0}</p>
|
||||||
<p className="text-xs text-gray-500 mt-1">已完成 {stats?.completed_tasks || 6} 个</p>
|
<p className="text-xs text-gray-500 mt-1">已完成 {stats?.completed_tasks || 0} 个</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="stat-icon from-emerald-500 to-emerald-600 group-hover:scale-110 transition-transform">
|
<div className="stat-icon from-emerald-500 to-emerald-600 group-hover:scale-110 transition-transform">
|
||||||
<Activity className="w-6 h-6 text-white" />
|
<Activity className="w-6 h-6 text-white" />
|
||||||
|
|
@ -172,8 +242,8 @@ export default function Dashboard() {
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<p className="stat-label">发现问题</p>
|
<p className="stat-label">发现问题</p>
|
||||||
<p className="stat-value">{stats?.total_issues || 64}</p>
|
<p className="stat-value">{stats?.total_issues || 0}</p>
|
||||||
<p className="text-xs text-gray-500 mt-1">已解决 {stats?.resolved_issues || 45} 个</p>
|
<p className="text-xs text-gray-500 mt-1">已解决 {stats?.resolved_issues || 0} 个</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="stat-icon from-orange-500 to-orange-600 group-hover:scale-110 transition-transform">
|
<div className="stat-icon from-orange-500 to-orange-600 group-hover:scale-110 transition-transform">
|
||||||
<AlertTriangle className="w-6 h-6 text-white" />
|
<AlertTriangle className="w-6 h-6 text-white" />
|
||||||
|
|
@ -187,11 +257,17 @@ export default function Dashboard() {
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<p className="stat-label">平均质量分</p>
|
<p className="stat-label">平均质量分</p>
|
||||||
<p className="stat-value">{stats?.avg_quality_score?.toFixed(1) || '88.5'}</p>
|
<p className="stat-value">
|
||||||
<div className="flex items-center text-xs text-emerald-600 font-medium mt-1">
|
{stats?.avg_quality_score ? stats.avg_quality_score.toFixed(1) : '0.0'}
|
||||||
<TrendingUp className="w-3 h-3 mr-1" />
|
</p>
|
||||||
<span>+5.2%</span>
|
{stats?.avg_quality_score ? (
|
||||||
</div>
|
<div className="flex items-center text-xs text-emerald-600 font-medium mt-1">
|
||||||
|
<TrendingUp className="w-3 h-3 mr-1" />
|
||||||
|
<span>持续改进中</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-xs text-gray-500 mt-1">暂无数据</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="stat-icon from-purple-500 to-purple-600 group-hover:scale-110 transition-transform">
|
<div className="stat-icon from-purple-500 to-purple-600 group-hover:scale-110 transition-transform">
|
||||||
<Target className="w-6 h-6 text-white" />
|
<Target className="w-6 h-6 text-white" />
|
||||||
|
|
@ -216,29 +292,38 @@ export default function Dashboard() {
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<ResponsiveContainer width="100%" height={250}>
|
{qualityTrendData.length > 0 ? (
|
||||||
<LineChart data={qualityTrendData}>
|
<ResponsiveContainer width="100%" height={250}>
|
||||||
<CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
|
<LineChart data={qualityTrendData}>
|
||||||
<XAxis dataKey="date" stroke="#6b7280" fontSize={12} />
|
<CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
|
||||||
<YAxis stroke="#6b7280" fontSize={12} />
|
<XAxis dataKey="date" stroke="#6b7280" fontSize={12} />
|
||||||
<Tooltip
|
<YAxis stroke="#6b7280" fontSize={12} domain={[0, 100]} />
|
||||||
contentStyle={{
|
<Tooltip
|
||||||
backgroundColor: 'white',
|
contentStyle={{
|
||||||
border: 'none',
|
backgroundColor: 'white',
|
||||||
borderRadius: '8px',
|
border: 'none',
|
||||||
boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'
|
borderRadius: '8px',
|
||||||
}}
|
boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'
|
||||||
/>
|
}}
|
||||||
<Line
|
/>
|
||||||
type="monotone"
|
<Line
|
||||||
dataKey="score"
|
type="monotone"
|
||||||
stroke="hsl(var(--primary))"
|
dataKey="score"
|
||||||
strokeWidth={3}
|
stroke="hsl(var(--primary))"
|
||||||
dot={{ fill: 'hsl(var(--primary))', strokeWidth: 2, r: 4 }}
|
strokeWidth={3}
|
||||||
activeDot={{ r: 6 }}
|
dot={{ fill: 'hsl(var(--primary))', strokeWidth: 2, r: 4 }}
|
||||||
/>
|
activeDot={{ r: 6 }}
|
||||||
</LineChart>
|
/>
|
||||||
</ResponsiveContainer>
|
</LineChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center justify-center h-[250px] text-gray-400">
|
||||||
|
<div className="text-center">
|
||||||
|
<TrendingUp className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
||||||
|
<p className="text-sm">暂无质量趋势数据</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
|
@ -251,25 +336,34 @@ export default function Dashboard() {
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<ResponsiveContainer width="100%" height={250}>
|
{issueTypeData.length > 0 ? (
|
||||||
<PieChart>
|
<ResponsiveContainer width="100%" height={250}>
|
||||||
<Pie
|
<PieChart>
|
||||||
data={issueTypeData}
|
<Pie
|
||||||
cx="50%"
|
data={issueTypeData}
|
||||||
cy="50%"
|
cx="50%"
|
||||||
labelLine={false}
|
cy="50%"
|
||||||
label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
|
labelLine={false}
|
||||||
outerRadius={80}
|
label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
|
||||||
fill="#8884d8"
|
outerRadius={80}
|
||||||
dataKey="value"
|
fill="#8884d8"
|
||||||
>
|
dataKey="value"
|
||||||
{issueTypeData.map((entry, index) => (
|
>
|
||||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
{issueTypeData.map((entry, index) => (
|
||||||
))}
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||||
</Pie>
|
))}
|
||||||
<Tooltip />
|
</Pie>
|
||||||
</PieChart>
|
<Tooltip />
|
||||||
</ResponsiveContainer>
|
</PieChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center justify-center h-[250px] text-gray-400">
|
||||||
|
<div className="text-center">
|
||||||
|
<BarChart3 className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
||||||
|
<p className="text-sm">暂无问题分布数据</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -423,48 +517,113 @@ export default function Dashboard() {
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4">
|
<CardContent className="space-y-4">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span className="text-sm text-gray-600">服务状态</span>
|
<span className="text-sm text-gray-600">数据库模式</span>
|
||||||
<Badge className="bg-emerald-100 text-emerald-700">正常</Badge>
|
<Badge className={
|
||||||
|
dbMode === 'local' ? 'bg-blue-100 text-blue-700' :
|
||||||
|
dbMode === 'supabase' ? 'bg-green-100 text-green-700' :
|
||||||
|
'bg-gray-100 text-gray-700'
|
||||||
|
}>
|
||||||
|
{dbMode === 'local' ? '本地' : dbMode === 'supabase' ? '云端' : '演示'}
|
||||||
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span className="text-sm text-gray-600">API响应</span>
|
<span className="text-sm text-gray-600">活跃项目</span>
|
||||||
<span className="text-sm font-medium text-gray-900">45ms</span>
|
<span className="text-sm font-medium text-gray-900">
|
||||||
|
{stats?.active_projects || 0}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span className="text-sm text-gray-600">在线用户</span>
|
<span className="text-sm text-gray-600">运行中任务</span>
|
||||||
<span className="text-sm font-medium text-gray-900">1,234</span>
|
<span className="text-sm font-medium text-gray-900">
|
||||||
|
{recentTasks.filter(t => t.status === 'running').length}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span className="text-sm text-gray-600">今日分析</span>
|
<span className="text-sm text-gray-600">待解决问题</span>
|
||||||
<span className="text-sm font-medium text-gray-900">89</span>
|
<span className="text-sm font-medium text-gray-900">
|
||||||
|
{stats ? stats.total_issues - stats.resolved_issues : 0}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* 最新通知 */}
|
{/* 最新活动 */}
|
||||||
<Card className="card-modern">
|
<Card className="card-modern">
|
||||||
<CardHeader className="pb-3">
|
<CardHeader className="pb-3">
|
||||||
<CardTitle className="text-lg flex items-center">
|
<CardTitle className="text-lg flex items-center">
|
||||||
<AlertTriangle className="w-5 h-5 mr-2 text-orange-600" />
|
<Clock className="w-5 h-5 mr-2 text-orange-600" />
|
||||||
最新通知
|
最新活动
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-3">
|
<CardContent className="space-y-3">
|
||||||
<div className="p-3 bg-red-50 rounded-lg border border-red-200">
|
{recentTasks.length > 0 ? (
|
||||||
<p className="text-sm font-medium text-red-900">系统更新</p>
|
recentTasks.slice(0, 3).map((task) => {
|
||||||
<p className="text-xs text-red-700 mt-1">新增代码安全检测功能</p>
|
const timeAgo = (() => {
|
||||||
<p className="text-xs text-red-600 mt-1">2小时前</p>
|
const now = new Date();
|
||||||
</div>
|
const taskDate = new Date(task.created_at);
|
||||||
<div className="p-3 bg-emerald-50 rounded-lg border border-emerald-200">
|
const diffMs = now.getTime() - taskDate.getTime();
|
||||||
<p className="text-sm font-medium text-emerald-900">任务完成</p>
|
const diffMins = Math.floor(diffMs / 60000);
|
||||||
<p className="text-xs text-emerald-700 mt-1">项目 "Web应用" 审计完成</p>
|
const diffHours = Math.floor(diffMs / 3600000);
|
||||||
<p className="text-xs text-emerald-600 mt-1">1天前</p>
|
const diffDays = Math.floor(diffMs / 86400000);
|
||||||
</div>
|
|
||||||
<div className="p-3 bg-orange-50 rounded-lg border border-orange-200">
|
if (diffMins < 60) return `${diffMins}分钟前`;
|
||||||
<p className="text-sm font-medium text-orange-900">安全警告</p>
|
if (diffHours < 24) return `${diffHours}小时前`;
|
||||||
<p className="text-xs text-orange-700 mt-1">发现高危漏洞，请及时处理</p>
|
return `${diffDays}天前`;
|
||||||
<p className="text-xs text-orange-600 mt-1">2天前</p>
|
})();
|
||||||
</div>
|
|
||||||
|
const bgColor =
|
||||||
|
task.status === 'completed' ? 'bg-emerald-50 border-emerald-200' :
|
||||||
|
task.status === 'running' ? 'bg-blue-50 border-blue-200' :
|
||||||
|
task.status === 'failed' ? 'bg-red-50 border-red-200' :
|
||||||
|
'bg-gray-50 border-gray-200';
|
||||||
|
|
||||||
|
const textColor =
|
||||||
|
task.status === 'completed' ? 'text-emerald-900' :
|
||||||
|
task.status === 'running' ? 'text-blue-900' :
|
||||||
|
task.status === 'failed' ? 'text-red-900' :
|
||||||
|
'text-gray-900';
|
||||||
|
|
||||||
|
const descColor =
|
||||||
|
task.status === 'completed' ? 'text-emerald-700' :
|
||||||
|
task.status === 'running' ? 'text-blue-700' :
|
||||||
|
task.status === 'failed' ? 'text-red-700' :
|
||||||
|
'text-gray-700';
|
||||||
|
|
||||||
|
const timeColor =
|
||||||
|
task.status === 'completed' ? 'text-emerald-600' :
|
||||||
|
task.status === 'running' ? 'text-blue-600' :
|
||||||
|
task.status === 'failed' ? 'text-red-600' :
|
||||||
|
'text-gray-600';
|
||||||
|
|
||||||
|
const statusText =
|
||||||
|
task.status === 'completed' ? '任务完成' :
|
||||||
|
task.status === 'running' ? '任务运行中' :
|
||||||
|
task.status === 'failed' ? '任务失败' :
|
||||||
|
'任务待处理';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={task.id}
|
||||||
|
to={`/tasks/${task.id}`}
|
||||||
|
className={`block p-3 rounded-lg border ${bgColor} hover:shadow-sm transition-shadow`}
|
||||||
|
>
|
||||||
|
<p className={`text-sm font-medium ${textColor}`}>{statusText}</p>
|
||||||
|
<p className={`text-xs ${descColor} mt-1 line-clamp-1`}>
|
||||||
|
项目 "{task.project?.name || '未知项目'}"
|
||||||
|
{task.status === 'completed' && task.issues_count > 0 &&
|
||||||
|
` - 发现 ${task.issues_count} 个问题`
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
<p className={`text-xs ${timeColor} mt-1`}>{timeAgo}</p>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-8 text-gray-400">
|
||||||
|
<Clock className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
||||||
|
<p className="text-sm">暂无活动记录</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -716,9 +716,11 @@ public class Example {
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-2xl font-bold text-gray-900 mb-3">AI正在分析您的代码</h3>
|
<h3 className="text-2xl font-bold text-gray-900 mb-3">AI正在分析您的代码</h3>
|
||||||
<p className="text-gray-600 text-lg mb-6">请稍候，这通常需要至少30秒钟...</p>
|
<p className="text-gray-600 text-lg mb-6">请稍候，这通常需要至少30秒钟...</p>
|
||||||
|
<p className="text-gray-600 text-lg mb-6">分析时长取决于您的网络环境、代码长度以及使用的模型等因素</p>
|
||||||
<div className="bg-red-50 rounded-lg p-6 max-w-md mx-auto">
|
<div className="bg-red-50 rounded-lg p-6 max-w-md mx-auto">
|
||||||
<p className="text-red-700 text-sm">
|
<p className="text-red-700 text-sm">
|
||||||
正在进行安全检测、性能分析、代码风格检查等多维度评估
|
正在进行安全检测、性能分析、代码风格检查等多维度评估<br />
|
||||||
|
请勿离开页面！
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue