diff --git a/src/features/analysis/services/codeAnalysis.ts b/src/features/analysis/services/codeAnalysis.ts index d80c681..4981367 100644 --- a/src/features/analysis/services/codeAnalysis.ts +++ b/src/features/analysis/services/codeAnalysis.ts @@ -37,7 +37,7 @@ export class CodeAnalysisEngine { static async analyzeCode(code: string, language: string): Promise { const llmService = this.createLLMService(); - + // 获取输出语言配置 const outputLanguage = env.OUTPUT_LANGUAGE || '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. 去除前后空白 str = str.trim(); - // 2. 将 JavaScript 模板字符串（反引号）替换为双引号，并处理多行内容 - // 匹配: "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 不允许） + // 2. 修复尾部逗号（JSON 不允许）- 必须在其他处理之前 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"$2":'); + str = str.replace(/\](\s*)"([^"]+)":/g, '],\n"$2":'); + + // 4. 修复对象/数组后缺少逗号的情况 + str = str.replace(/([}\]])(\s*)(")/g, '$1,\n$3'); + + // 5. 移除多余的逗号 + str = str.replace(/,+/g, ','); return str; }; @@ -301,27 +279,27 @@ Note: .replace(/^\uFEFF/, '') .replace(/[\u200B-\u200D\uFEFF]/g, ''); - // 修复字符串值中的特殊字符 - // 匹配所有 JSON 字符串值（包括 description, suggestion, code_snippet 等） - cleaned = cleaned.replace(/"([^"]+)":\s*"((?:[^"\\]|\\.)*)"/g, (match, key, value) => { - // 如果值已经正确转义，跳过 - if (!value.includes('\n') && !value.includes('\r') && !value.includes('\t') && !value.match(/[^\x20-\x7E]/)) { - return match; - } - - // 转义特殊字符 + // 更激进的字符串值清理 + // 使用更宽松的正则来匹配字符串值，包括可能包含未转义引号的情况 + cleaned = cleaned.replace(/"([^"]+)":\s*"([^"]*)"/gs, (match, key, 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(/\n/g, '\\n') - .replace(/\r/g, '\\r') - // 转义制表符 - .replace(/\t/g, '\\t') - // 转义引号 + // 转义双引号 .replace(/"/g, '\\"') - // 移除其他控制字符 - .replace(/[\x00-\x1F\x7F]/g, ''); + // 移除中文引号和其他可能导致问题的字符 + .replace(/[""'']/g, '') + // 确保没有未闭合的转义序列 + .replace(/\\(?!["\\/bfnrtu])/g, '\\\\'); return `"${key}": "${escaped}"`; }); diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index 887aa24..d7f34ad 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -13,16 +13,20 @@ import { FileText, GitBranch, Shield, TrendingUp, Zap, BarChart3, Target, ArrowUpRight, Calendar } 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 { Link } from "react-router-dom"; import { toast } from "sonner"; +import { Alert, AlertDescription } from "@/components/ui/alert"; +import { Info } from "lucide-react"; export default function Dashboard() { const [stats, setStats] = useState(null); const [recentProjects, setRecentProjects] = useState([]); const [recentTasks, setRecentTasks] = useState([]); const [loading, setLoading] = useState(true); + const [issueTypeData, setIssueTypeData] = useState>([]); + const [qualityTrendData, setQualityTrendData] = useState>([]); useEffect(() => { loadDashboardData(); @@ -38,31 +42,95 @@ export default function Dashboard() { api.getAuditTasks() ]); + // 统计数据 - 使用真实数据或空数据 if (results[0].status === 'fulfilled') { setStats(results[0].value); } else { + console.error('获取统计数据失败:', results[0].reason); + // 使用空数据而不是假数据 setStats({ - total_projects: 5, - active_projects: 4, - total_tasks: 8, - completed_tasks: 6, - total_issues: 64, - resolved_issues: 45, - avg_quality_score: 88.5 + total_projects: 0, + active_projects: 0, + total_tasks: 0, + completed_tasks: 0, + total_issues: 0, + resolved_issues: 0, + avg_quality_score: 0 }); } + // 项目列表 - 使用真实数据 if (results[1].status === 'fulfilled') { setRecentProjects(Array.isArray(results[1].value) ? results[1].value.slice(0, 5) : []); } else { + console.error('获取项目列表失败:', results[1].reason); setRecentProjects([]); } + // 任务列表 - 使用真实数据 + let tasks: AuditTask[] = []; 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 { + console.error('获取任务列表失败:', results[2].reason); 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 = {}; + flatIssues.forEach(issue => { + typeCount[issue.issue_type] = (typeCount[issue.issue_type] || 0) + 1; + }); + + const typeMap: Record = { + 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) { console.error('仪表盘数据加载失败:', 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) { return ( @@ -117,7 +170,10 @@ export default function Dashboard() {

仪表盘

-

实时监控项目状态，掌握代码质量动态

+

+ 实时监控项目状态，掌握代码质量动态 + {isDemoMode && 演示模式} +

@@ -135,6 +191,20 @@ export default function Dashboard() {
+ {/* 数据库模式提示 */} + {isDemoMode && ( + + + + 当前使用演示模式，显示的是模拟数据。 + 配置数据库后将显示真实数据。 + + 前往数据库管理 → + + + + )} + {/* Stats Cards */}
@@ -142,8 +212,8 @@ export default function Dashboard() {

总项目数

-

{stats?.total_projects || 5}

-

活跃 {stats?.active_projects || 4} 个

+

{stats?.total_projects || 0}

+

活跃 {stats?.active_projects || 0} 个

@@ -157,8 +227,8 @@ export default function Dashboard() {

审计任务

-

{stats?.total_tasks || 8}

-

已完成 {stats?.completed_tasks || 6} 个

+

{stats?.total_tasks || 0}

+

已完成 {stats?.completed_tasks || 0} 个

@@ -172,8 +242,8 @@ export default function Dashboard() {

发现问题

-

{stats?.total_issues || 64}

-

已解决 {stats?.resolved_issues || 45} 个

+

{stats?.total_issues || 0}

+

已解决 {stats?.resolved_issues || 0} 个

@@ -187,11 +257,17 @@ export default function Dashboard() {

平均质量分

-

{stats?.avg_quality_score?.toFixed(1) || '88.5'}

-
- - +5.2% -
+

+ {stats?.avg_quality_score ? stats.avg_quality_score.toFixed(1) : '0.0'} +

+ {stats?.avg_quality_score ? ( +
+ + 持续改进中 +
+ ) : ( +

暂无数据

+ )}
@@ -216,29 +292,38 @@ export default function Dashboard() { - - - - - - - - - + {qualityTrendData.length > 0 ? ( + + + + + + + + + + ) : ( +
+
+ +

暂无质量趋势数据

+
+
+ )} @@ -251,25 +336,34 @@ export default function Dashboard() { - - - `${name} ${(percent * 100).toFixed(0)}%`} - outerRadius={80} - fill="#8884d8" - dataKey="value" - > - {issueTypeData.map((entry, index) => ( - - ))} - - - - + {issueTypeData.length > 0 ? ( + + + `${name} ${(percent * 100).toFixed(0)}%`} + outerRadius={80} + fill="#8884d8" + dataKey="value" + > + {issueTypeData.map((entry, index) => ( + + ))} + + + + + ) : ( +
+
+ +

暂无问题分布数据

+
+
+ )}
@@ -423,48 +517,113 @@ export default function Dashboard() {
- 服务状态 - 正常 + 数据库模式 + + {dbMode === 'local' ? '本地' : dbMode === 'supabase' ? '云端' : '演示'} +
- API响应 - 45ms + 活跃项目 + + {stats?.active_projects || 0} +
- 在线用户 - 1,234 + 运行中任务 + + {recentTasks.filter(t => t.status === 'running').length} +
- 今日分析 - 89 + 待解决问题 + + {stats ? stats.total_issues - stats.resolved_issues : 0} +
- {/* 最新通知 */} + {/* 最新活动 */} - - 最新通知 + + 最新活动 -
-

系统更新

-

新增代码安全检测功能

-

2小时前

-
-
-

任务完成

-

项目 "Web应用" 审计完成

-

1天前

-
-
-

安全警告

-

发现高危漏洞，请及时处理

-

2天前

-
+ {recentTasks.length > 0 ? ( + recentTasks.slice(0, 3).map((task) => { + const timeAgo = (() => { + const now = new Date(); + const taskDate = new Date(task.created_at); + const diffMs = now.getTime() - taskDate.getTime(); + const diffMins = Math.floor(diffMs / 60000); + const diffHours = Math.floor(diffMs / 3600000); + const diffDays = Math.floor(diffMs / 86400000); + + if (diffMins < 60) return `${diffMins}分钟前`; + if (diffHours < 24) return `${diffHours}小时前`; + return `${diffDays}天前`; + })(); + + 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 ( + +

{statusText}

+

+ 项目 "{task.project?.name || '未知项目'}" + {task.status === 'completed' && task.issues_count > 0 && + ` - 发现 ${task.issues_count} 个问题` + } +

+

{timeAgo}

+ + ); + }) + ) : ( +
+ +

暂无活动记录

+
+ )} diff --git a/src/pages/InstantAnalysis.tsx b/src/pages/InstantAnalysis.tsx index d9e3c25..b64d805 100644 --- a/src/pages/InstantAnalysis.tsx +++ b/src/pages/InstantAnalysis.tsx @@ -716,9 +716,11 @@ public class Example {

AI正在分析您的代码

请稍候，这通常需要至少30秒钟...

+

分析时长取决于您的网络环境、代码长度以及使用的模型等因素

- 正在进行安全检测、性能分析、代码风格检查等多维度评估 + 正在进行安全检测、性能分析、代码风格检查等多维度评估
+ 请勿离开页面！