You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
361 lines
17 KiB
361 lines
17 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>基于多agent协同的军工Python代码合规性检查系统 - FortifyCode</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<!-- 顶部导航栏 -->
|
|
<nav class="navbar">
|
|
<div class="navbar-content">
|
|
<div class="logo">
|
|
<i class="fas fa-shield-alt"></i>
|
|
FortifyCode
|
|
</div>
|
|
<ul class="nav-menu">
|
|
<li><a href="#dashboard" class="nav-link active">仪表板</a></li>
|
|
<li><a href="#projects" class="nav-link">项目管理</a></li>
|
|
<li><a href="#rules" class="nav-link">规则集管理</a></li>
|
|
<li><a href="#settings" class="nav-link">配置中心</a></li>
|
|
</ul>
|
|
<div class="user-info">
|
|
<div class="notification">
|
|
<i class="fas fa-bell"></i>
|
|
<span class="notification-badge">3</span>
|
|
</div>
|
|
<div class="user-avatar">
|
|
<i class="fas fa-user-circle" style="font-size: 24px;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 主内容区域 -->
|
|
<div class="main-content">
|
|
<!-- 仪表板页面 -->
|
|
<div id="dashboard-page" class="page-content active">
|
|
<!-- 页面标题 -->
|
|
<div class="page-header fade-in">
|
|
<h1 class="page-title">基于多agent协同的军工Python代码合规性检查系统</h1>
|
|
<p class="page-subtitle">基于多 Agent 协同的智能代码安全检测平台</p>
|
|
</div>
|
|
|
|
<!-- 统计卡片 -->
|
|
<div class="stats-grid fade-in">
|
|
<div class="stat-card">
|
|
<div class="stat-icon primary">
|
|
<i class="fas fa-code"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h3 id="totalFiles">1,247</h3>
|
|
<p>已检查文件</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon success">
|
|
<i class="fas fa-check-circle"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h3 id="complianceRate">98.5%</h3>
|
|
<p>合规率</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon warning">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h3 id="pendingIssues">23</h3>
|
|
<p>待修复问题</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon danger">
|
|
<i class="fas fa-bug"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h3 id="highRiskIssues">5</h3>
|
|
<p>高危漏洞</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 功能区域 -->
|
|
<div class="function-grid fade-in">
|
|
<!-- 代码上传和检查区域 -->
|
|
<div class="main-panel">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">快捷代码检查</h2>
|
|
<div class="filter-tabs">
|
|
<span class="filter-tab active">Python</span>
|
|
</div>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div class="upload-area" id="uploadArea">
|
|
<div class="upload-icon">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
</div>
|
|
<div class="upload-text">拖拽文件到此处或点击上传</div>
|
|
<div class="upload-hint">支持 .py, .pyx, .pyi 文件，最大 100MB</div>
|
|
<input type="file" class="file-input" id="fileInput" multiple accept=".py,.pyx,.pyi">
|
|
</div>
|
|
|
|
<div class="progress-container" id="progressContainer" style="display: none;">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progressFill" style="width: 0%;"></div>
|
|
</div>
|
|
<div class="progress-text" id="progressText">准备检查...</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px; text-align: center;">
|
|
<button class="btn btn-primary" id="startCheckBtn" style="display: none;">
|
|
<i class="fas fa-play"></i> 开始检查
|
|
</button>
|
|
<button class="btn btn-secondary" id="stopCheckBtn" style="display: none;">
|
|
<i class="fas fa-stop"></i> 停止检查
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 多Agent状态面板 -->
|
|
<div class="agent-status">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">Agent 状态</h2>
|
|
</div>
|
|
<div class="agent-list">
|
|
<div class="agent-item">
|
|
<div class="agent-avatar">A1</div>
|
|
<div class="agent-info">
|
|
<div class="agent-name">pylint Agent</div>
|
|
<span class="agent-status-badge status-idle">空闲</span>
|
|
</div>
|
|
</div>
|
|
<div class="agent-item">
|
|
<div class="agent-avatar">A2</div>
|
|
<div class="agent-info">
|
|
<div class="agent-name">flake8 Agent</div>
|
|
<span class="agent-status-badge status-idle">空闲</span>
|
|
</div>
|
|
</div>
|
|
<div class="agent-item">
|
|
<div class="agent-avatar">A3</div>
|
|
<div class="agent-info">
|
|
<div class="agent-name">bandit Agent</div>
|
|
<span class="agent-status-badge status-idle">空闲</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 检查结果区域 -->
|
|
<div class="results-section fade-in" id="resultsSection" style="display: none;">
|
|
<div class="results-header">
|
|
<h2 class="results-title">检查结果</h2>
|
|
<div class="filter-tabs">
|
|
<span class="filter-tab active" data-filter="all">全部</span>
|
|
<span class="filter-tab" data-filter="error">错误</span>
|
|
<span class="filter-tab" data-filter="warning">警告</span>
|
|
<span class="filter-tab" data-filter="info">信息</span>
|
|
</div>
|
|
</div>
|
|
<div class="results-content" id="resultsContent">
|
|
<!-- 结果项将通过 JavaScript 动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 项目管理页面 -->
|
|
<div id="projects-page" class="page-content">
|
|
<div class="page-header fade-in">
|
|
<h1 class="page-title">项目管理</h1>
|
|
<p class="page-subtitle">管理您的代码检查项目和任务</p>
|
|
</div>
|
|
|
|
<div class="projects-container">
|
|
<div class="projects-header">
|
|
<div class="projects-actions">
|
|
<button class="btn btn-primary" id="createProjectBtn">
|
|
<i class="fas fa-plus"></i> 新建项目
|
|
</button>
|
|
</div>
|
|
<div class="projects-search">
|
|
<input type="text" placeholder="搜索项目..." class="search-input" id="projectSearch">
|
|
<i class="fas fa-search"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="projects-grid" id="projectsGrid">
|
|
<!-- 项目卡片将通过 JavaScript 动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 项目详情页面 -->
|
|
<div id="project-detail-page" class="page-content">
|
|
<div class="page-header fade-in">
|
|
<div style="display: flex; align-items: center; gap: 15px;">
|
|
<button class="btn btn-secondary" id="backToProjectsBtn">
|
|
<i class="fas fa-arrow-left"></i> 返回项目列表
|
|
</button>
|
|
<div>
|
|
<h1 class="page-title" id="projectDetailTitle">项目详情</h1>
|
|
<p class="page-subtitle" id="projectDetailSubtitle">查看项目信息和运行代码检查</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-detail-container">
|
|
<div class="project-info-panel">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">项目信息</h2>
|
|
<div class="project-actions">
|
|
<button class="btn btn-primary" id="runCheckBtn">
|
|
<i class="fas fa-play"></i> 运行检查
|
|
</button>
|
|
<button class="btn btn-secondary" id="editProjectBtn">
|
|
<i class="fas fa-edit"></i> 编辑项目
|
|
</button>
|
|
<button class="btn btn-danger" id="deleteProjectBtn">
|
|
<i class="fas fa-trash"></i> 删除项目
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-content" id="projectInfoContent">
|
|
<!-- 项目信息将通过 JavaScript 动态生成 -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="check-history-panel">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">检查历史</h2>
|
|
</div>
|
|
<div class="panel-content" id="checkHistoryContent">
|
|
<!-- 检查历史将通过 JavaScript 动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 文件浏览器面板 -->
|
|
<div class="file-browser-panel">
|
|
<div class="panel-header">
|
|
<div style="display: flex; align-items: center; gap: 15px;">
|
|
<h2 class="panel-title">文件浏览器</h2>
|
|
<div class="file-actions">
|
|
<button class="btn btn-primary" id="uploadFileBtn">
|
|
<i class="fas fa-upload"></i> 上传文件
|
|
</button>
|
|
<button class="btn btn-secondary" id="createFileBtn">
|
|
<i class="fas fa-plus"></i> 新建文件
|
|
</button>
|
|
<button class="btn btn-secondary" id="createFolderBtn">
|
|
<i class="fas fa-folder-plus"></i> 新建文件夹
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="file-path">
|
|
<span id="currentPath">/</span>
|
|
</div>
|
|
</div>
|
|
<div class="file-browser-content">
|
|
<div class="file-tree" id="fileTree">
|
|
<!-- 文件树将通过 JavaScript 动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 代码编辑器面板 -->
|
|
<div class="code-editor-panel" id="codeEditorPanel" style="display: none;">
|
|
<div class="panel-header">
|
|
<div style="display: flex; align-items: center; gap: 15px;">
|
|
<h2 class="panel-title" id="editorTitle">代码编辑器</h2>
|
|
<div class="editor-actions">
|
|
<button class="btn btn-success" id="saveFileBtn">
|
|
<i class="fas fa-save"></i> 保存
|
|
</button>
|
|
<button class="btn btn-secondary" id="closeEditorBtn">
|
|
<i class="fas fa-times"></i> 关闭
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="file-info">
|
|
<span id="currentFilePath">未选择文件</span>
|
|
</div>
|
|
</div>
|
|
<div class="editor-content">
|
|
<textarea id="codeEditor" placeholder="选择文件开始编辑..."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 检查结果详情 -->
|
|
<div class="check-results-panel" id="checkResultsPanel" style="display: none;">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">检查结果详情</h2>
|
|
<div class="filter-tabs">
|
|
<span class="filter-tab active" data-filter="all">全部</span>
|
|
<span class="filter-tab" data-filter="error">错误</span>
|
|
<span class="filter-tab" data-filter="warning">警告</span>
|
|
<span class="filter-tab" data-filter="info">信息</span>
|
|
</div>
|
|
</div>
|
|
<div class="panel-content" id="checkResultsContent">
|
|
<!-- 检查结果将通过 JavaScript 动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 新建项目模态框 -->
|
|
<div id="createProjectModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>新建项目</h2>
|
|
<span class="close">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="createProjectForm">
|
|
<div class="form-group">
|
|
<label for="projectName">项目名称 *</label>
|
|
<input type="text" id="projectName" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="projectDescription">项目描述</label>
|
|
<textarea id="projectDescription" name="description" rows="3"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>项目来源 *</label>
|
|
<div class="source-type-tabs">
|
|
<input type="radio" id="sourceGithub" name="source_type" value="github" checked>
|
|
<label for="sourceGithub">GitHub</label>
|
|
|
|
<input type="radio" id="sourceGitee" name="source_type" value="gitee">
|
|
<label for="sourceGitee">Gitee</label>
|
|
|
|
<input type="radio" id="sourceUpload" name="source_type" value="upload">
|
|
<label for="sourceUpload">文件上传</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" id="gitUrlGroup">
|
|
<label for="gitUrl">Git URL *</label>
|
|
<input type="url" id="gitUrl" name="source_url" placeholder="https://github.com/username/repository.git">
|
|
</div>
|
|
<div class="form-group" id="fileUploadGroup" style="display: none;">
|
|
<label for="fileUpload">选择文件或文件夹</label>
|
|
<input type="file" id="fileUpload" name="files" multiple webkitdirectory>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" id="cancelCreateProject">取消</button>
|
|
<button type="button" class="btn btn-primary" id="confirmCreateProject">创建项目</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html> |