|
|
<!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-folder"></i>
|
|
|
</div>
|
|
|
<div class="stat-content">
|
|
|
<h3 id="totalProjects">0</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">0%</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">0</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">0</h3>
|
|
|
<p>高危漏洞</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="stat-card">
|
|
|
<div class="stat-icon primary">
|
|
|
<i class="fas fa-file-code"></i>
|
|
|
</div>
|
|
|
<div class="stat-content">
|
|
|
<h3 id="totalFiles">0</h3>
|
|
|
<p>已检查文件</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="stat-card">
|
|
|
<div class="stat-icon success">
|
|
|
<i class="fas fa-tasks"></i>
|
|
|
</div>
|
|
|
<div class="stat-content">
|
|
|
<h3 id="checkedProjects">0</h3>
|
|
|
<p>已检查项目</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 功能区域 -->
|
|
|
<div class="function-grid fade-in" style="grid-template-columns: 1fr 1fr;">
|
|
|
<!-- 快速开始指南 -->
|
|
|
<div class="main-panel">
|
|
|
<div class="panel-header">
|
|
|
<h2 class="panel-title"><i class="fas fa-rocket"></i> 快速开始</h2>
|
|
|
</div>
|
|
|
<div class="panel-content">
|
|
|
<div style="line-height: 2;">
|
|
|
<div style="margin-bottom: 15px; padding: 12px; background: #f8f9fa; border-radius: 6px; border-left: 4px solid #1e3c72;">
|
|
|
<strong><i class="fas fa-folder-open"></i> 1. 导入项目</strong>
|
|
|
<p style="margin: 8px 0 0 0; color: #666; font-size: 14px;">进入"项目管理"页面，点击"导入文件夹为项目"按钮，选择您的Python项目文件夹。</p>
|
|
|
</div>
|
|
|
<div style="margin-bottom: 15px; padding: 12px; background: #f8f9fa; border-radius: 6px; border-left: 4px solid #28a745;">
|
|
|
<strong><i class="fas fa-play"></i> 2. 运行检查</strong>
|
|
|
<p style="margin: 8px 0 0 0; color: #666; font-size: 14px;">在项目详情页点击"运行检查"按钮，系统将使用 pylint、flake8、bandit 进行代码质量检查。</p>
|
|
|
</div>
|
|
|
<div style="margin-bottom: 15px; padding: 12px; background: #f8f9fa; border-radius: 6px; border-left: 4px solid #ffc107;">
|
|
|
<strong><i class="fas fa-search"></i> 3. 查看结果</strong>
|
|
|
<p style="margin: 8px 0 0 0; color: #666; font-size: 14px;">检查完成后，在"检查结果详情"面板查看问题列表，点击"定位"按钮可跳转到问题代码位置。</p>
|
|
|
</div>
|
|
|
<div style="padding: 12px; background: #f8f9fa; border-radius: 6px; border-left: 4px solid #17a2b8;">
|
|
|
<strong><i class="fas fa-edit"></i> 4. 编辑修复</strong>
|
|
|
<p style="margin: 8px 0 0 0; color: #666; font-size: 14px;">使用"文件编辑"功能在线修改代码，保存后重新运行检查验证修复效果。</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 系统功能说明 -->
|
|
|
<div class="main-panel">
|
|
|
<div class="panel-header">
|
|
|
<h2 class="panel-title"><i class="fas fa-info-circle"></i> 系统功能</h2>
|
|
|
</div>
|
|
|
<div class="panel-content">
|
|
|
<div style="line-height: 2;">
|
|
|
<div style="margin-bottom: 12px; display: flex; align-items: start; gap: 10px;">
|
|
|
<i class="fas fa-check" style="color: #28a745; margin-top: 4px;"></i>
|
|
|
<div>
|
|
|
<strong>多工具协同检查</strong>
|
|
|
<p style="margin: 4px 0 0 0; color: #666; font-size: 13px;">集成 pylint、flake8、bandit 三大工具，全面检测代码质量和安全问题</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="margin-bottom: 12px; display: flex; align-items: start; gap: 10px;">
|
|
|
<i class="fas fa-check" style="color: #28a745; margin-top: 4px;"></i>
|
|
|
<div>
|
|
|
<strong>自定义规则集</strong>
|
|
|
<p style="margin: 4px 0 0 0; color: #666; font-size: 13px;">支持上传 setup.cfg、.pylintrc、.flake8 等配置文件，灵活定制检查规则</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="margin-bottom: 12px; display: flex; align-items: start; gap: 10px;">
|
|
|
<i class="fas fa-check" style="color: #28a745; margin-top: 4px;"></i>
|
|
|
<div>
|
|
|
<strong>在线代码编辑</strong>
|
|
|
<p style="margin: 4px 0 0 0; color: #666; font-size: 13px;">内置代码编辑器，支持文件浏览、编辑、保存，快速修复问题</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="margin-bottom: 12px; display: flex; align-items: start; gap: 10px;">
|
|
|
<i class="fas fa-check" style="color: #28a745; margin-top: 4px;"></i>
|
|
|
<div>
|
|
|
<strong>精确定位问题</strong>
|
|
|
<p style="margin: 4px 0 0 0; color: #666; font-size: 13px;">检查结果精确到文件、行、列，一键定位到问题代码位置</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="display: flex; align-items: start; gap: 10px;">
|
|
|
<i class="fas fa-check" style="color: #28a745; margin-top: 4px;"></i>
|
|
|
<div>
|
|
|
<strong>项目历史管理</strong>
|
|
|
<p style="margin: 4px 0 0 0; color: #666; font-size: 13px;">记录每次检查结果，追踪代码质量变化趋势</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 最近项目列表 -->
|
|
|
<div class="main-panel fade-in" style="margin-top: 20px;">
|
|
|
<div class="panel-header">
|
|
|
<h2 class="panel-title"><i class="fas fa-history"></i> 最近项目</h2>
|
|
|
<a href="#projects" class="btn btn-secondary" style="text-decoration: none; padding: 6px 12px; font-size: 12px;">查看全部</a>
|
|
|
</div>
|
|
|
<div class="panel-content">
|
|
|
<div id="recentProjectsList" style="min-height: 100px;">
|
|
|
<div style="text-align: center; padding: 40px; color: #999;">
|
|
|
<i class="fas fa-folder-open" style="font-size: 48px; margin-bottom: 15px; opacity: 0.3;"></i>
|
|
|
<p>暂无项目，请先导入项目</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 规则集管理页面 -->
|
|
|
<div id="rules-page" class="page-content">
|
|
|
<div class="page-header fade-in">
|
|
|
<h1 class="page-title">规则集管理</h1>
|
|
|
<p class="page-subtitle">上传、查看、编辑与删除自定义规则配置（pylint/flake8 等）</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="projects-container">
|
|
|
<div class="projects-header">
|
|
|
<div class="projects-actions">
|
|
|
<button class="btn btn-primary" id="uploadRuleBtn">
|
|
|
<i class="fas fa-upload"></i> 上传规则文件
|
|
|
</button>
|
|
|
<button class="btn btn-secondary" id="refreshRuleBtn">
|
|
|
<i class="fas fa-rotate"></i> 刷新
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="projects-grid" id="rulesList">
|
|
|
<!-- 规则项通过 JavaScript 动态生成 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 编辑规则文件模态框 -->
|
|
|
<div id="editRuleModal" class="modal" style="display: none;">
|
|
|
<div class="modal-content" style="max-width: 800px; width: 90%;">
|
|
|
<div class="modal-header">
|
|
|
<h2 id="editRuleTitle">编辑规则</h2>
|
|
|
<span class="close" id="closeEditRule">×</span>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<div class="form-group">
|
|
|
<label>内容</label>
|
|
|
<textarea id="editRuleTextarea" rows="18" style="width: 100%;"></textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<button type="button" class="btn btn-secondary" id="cancelEditRule">取消</button>
|
|
|
<button type="button" class="btn btn-success" id="saveRuleBtn"><i class="fas fa-save"></i>
|
|
|
保存</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 配置中心页面 -->
|
|
|
<div id="settings-page" class="page-content">
|
|
|
<div class="page-header fade-in">
|
|
|
<h1 class="page-title">配置中心</h1>
|
|
|
<p class="page-subtitle">管理系统配置和AI模型设置</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="settings-container">
|
|
|
<div class="settings-tabs">
|
|
|
<div class="settings-tab active" data-tab="ai-config">
|
|
|
<i class="fas fa-robot"></i> AI配置
|
|
|
</div>
|
|
|
<div class="settings-tab" data-tab="local-models">
|
|
|
<i class="fas fa-server"></i> 本地模型
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="settings-content">
|
|
|
<!-- AI配置面板 -->
|
|
|
<div class="settings-panel active" id="ai-config-panel">
|
|
|
<div class="settings-section">
|
|
|
<h3><i class="fas fa-cog"></i> AI分析配置</h3>
|
|
|
<div class="form-group">
|
|
|
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
|
|
|
<input type="checkbox" id="useLocalAi" style="width: auto; margin: 0; cursor: pointer;">
|
|
|
<span style="font-weight: 500;">使用本地AI模型</span>
|
|
|
</label>
|
|
|
<p style="margin-top: 8px; font-size: 12px; color: #666; line-height: 1.5;">
|
|
|
启用后，系统将使用本地部署的AI模型进行分析，而不是云端API。需要先上传并配置本地模型。
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<div id="localModelSelectGroup" style="display: none; margin-top: 20px;">
|
|
|
<div class="form-group">
|
|
|
<label for="localModelSelect" style="font-weight: 500; margin-bottom: 8px; display: block;">
|
|
|
<i class="fas fa-list"></i> 选择本地模型
|
|
|
</label>
|
|
|
<select id="localModelSelect" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; background: white; cursor: pointer;">
|
|
|
<option value="">请选择本地模型...</option>
|
|
|
</select>
|
|
|
<p style="margin-top: 8px; font-size: 12px; color: #666; line-height: 1.5;">
|
|
|
<i class="fas fa-info-circle" style="color: #1e3c72; margin-right: 4px;"></i>
|
|
|
选择已上传的本地AI模型。如果列表为空，请先上传模型。
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="cloudAiConfigGroup" style="margin-top: 20px;">
|
|
|
<div class="form-group">
|
|
|
<label style="font-weight: 500; margin-bottom: 12px; display: block;">
|
|
|
<i class="fas fa-cloud"></i> 云端AI配置
|
|
|
</label>
|
|
|
<div style="padding: 12px; background: #f8f9fa; border-radius: 6px; border: 1px solid #e9ecef;">
|
|
|
<p style="margin: 0 0 10px 0; font-size: 13px; color: #666;">
|
|
|
当前使用的云端AI服务：<strong id="currentCloudProvider">未配置</strong>
|
|
|
</p>
|
|
|
<p style="margin: 0; font-size: 12px; color: #999;">
|
|
|
云端AI配置通过环境变量设置，请修改启动脚本中的环境变量。
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="settings-actions" style="margin-top: 30px;">
|
|
|
<button type="button" class="btn btn-primary" id="saveAiConfigBtn">
|
|
|
<i class="fas fa-save"></i> 保存配置
|
|
|
</button>
|
|
|
<button type="button" class="btn btn-secondary" id="testAiConfigBtn">
|
|
|
<i class="fas fa-vial"></i> 测试连接
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 本地模型管理面板 -->
|
|
|
<div class="settings-panel" id="local-models-panel">
|
|
|
<div class="settings-section">
|
|
|
<h3><i class="fas fa-server"></i> 本地模型管理</h3>
|
|
|
|
|
|
<div style="margin-bottom: 20px;">
|
|
|
<button type="button" class="btn btn-primary" id="uploadModelBtn">
|
|
|
<i class="fas fa-upload"></i> 上传模型
|
|
|
</button>
|
|
|
<button type="button" class="btn btn-secondary" id="refreshModelsBtn">
|
|
|
<i class="fas fa-rotate"></i> 刷新列表
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
<div id="localModelsList" style="min-height: 200px;">
|
|
|
<div style="text-align: center; padding: 40px; color: #999;">
|
|
|
<i class="fas fa-server" style="font-size: 48px; margin-bottom: 15px; opacity: 0.3;"></i>
|
|
|
<p>暂无本地模型，请先上传模型</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div style="margin-top: 20px; padding: 15px; background: #f0f7ff; border-radius: 6px; border: 1px solid #b3d9ff;">
|
|
|
<h4 style="margin: 0 0 10px 0; font-size: 14px; color: #1e3c72;">
|
|
|
<i class="fas fa-info-circle"></i> 使用说明
|
|
|
</h4>
|
|
|
<ul style="margin: 0; padding-left: 20px; font-size: 12px; color: #666; line-height: 1.8;">
|
|
|
<li>本地模型需要部署Ollama服务（推荐）或兼容OpenAI API的本地服务</li>
|
|
|
<li>上传的模型文件将存储在本地，确保有足够的磁盘空间</li>
|
|
|
<li>支持的模型格式：Ollama模型、GGUF格式等</li>
|
|
|
<li>模型文件较大，上传可能需要较长时间</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 上传模型模态框 -->
|
|
|
<div id="uploadModelModal" class="modal" style="display: none;">
|
|
|
<div class="modal-content" style="max-width: 600px;">
|
|
|
<div class="modal-header">
|
|
|
<h2>上传本地AI模型</h2>
|
|
|
<span class="close" id="closeUploadModelModal">×</span>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<div class="form-group">
|
|
|
<label for="modelName">模型名称 *</label>
|
|
|
<input type="text" id="modelName" name="modelName" required placeholder="例如: llama2, qwen, mistral">
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="modelDescription">模型描述</label>
|
|
|
<textarea id="modelDescription" name="modelDescription" rows="3" placeholder="描述模型的用途和特点"></textarea>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="modelApiUrl">API地址 *</label>
|
|
|
<input type="text" id="modelApiUrl" name="modelApiUrl" required placeholder="http://localhost:11434/v1" value="http://localhost:11434/v1">
|
|
|
<p style="margin-top: 8px; font-size: 12px; color: #666;">
|
|
|
本地AI服务的API地址。Ollama默认地址：http://localhost:11434/v1<br>
|
|
|
<strong>注意</strong>：系统会自动添加 /chat/completions 端点，您只需填写基础地址即可。
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="modelFile">模型文件（可选）</label>
|
|
|
<input type="file" id="modelFile" name="modelFile" accept=".gguf,.bin,.safetensors">
|
|
|
<p style="margin-top: 8px; font-size: 12px; color: #666;">
|
|
|
如果使用Ollama，模型文件会自动从Ollama服务加载，无需上传。如果使用其他服务，可以上传模型文件。
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<button type="button" class="btn btn-secondary" id="cancelUploadModel">取消</button>
|
|
|
<button type="button" class="btn btn-primary" id="confirmUploadModel">
|
|
|
<i class="fas fa-upload"></i> 上传
|
|
|
</button>
|
|
|
</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-secondary" id="importFolderProjectBtn">
|
|
|
<i class="fas fa-folder-open"></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="openEditorModalBtn">
|
|
|
<i class="fas fa-pen"></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>
|
|
|
|
|
|
<!-- 检查结果详情 -->
|
|
|
<div class="check-results-panel" id="checkResultsPanel" style="display: none;">
|
|
|
<div class="panel-header">
|
|
|
<h2 class="panel-title">检查结果详情</h2>
|
|
|
<div style="display: flex; align-items: center; gap: 10px;">
|
|
|
<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>
|
|
|
<button id="downloadReportBtn" class="btn btn-primary" style="margin-left: auto;">
|
|
|
<i class="fas fa-download"></i> 下载报告
|
|
|
</button>
|
|
|
</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>
|
|
|
|
|
|
<!-- 文件编辑模态框 -->
|
|
|
<div id="editorModal" class="modal" style="display: none;">
|
|
|
<div class="modal-content"
|
|
|
style="max-width: 1000px; width: 95%; height: 80vh; display: flex; flex-direction: column;">
|
|
|
<div class="modal-header">
|
|
|
<h2>项目文件编辑</h2>
|
|
|
<span class="close" id="closeEditorModal">×</span>
|
|
|
</div>
|
|
|
<div class="modal-body" style="flex:1; display:flex; overflow:hidden;">
|
|
|
<div id="modalSidebar" style="width: 320px; min-width: 220px; max-width: 60%; border-right: 1px solid #eee; display:flex; flex-direction:column;">
|
|
|
<div class="file-path" style="padding:8px 12px;">
|
|
|
<span id="modalCurrentPath">/</span>
|
|
|
</div>
|
|
|
<div class="file-tree" id="modalFileTree" style="flex:1; overflow:auto;"></div>
|
|
|
</div>
|
|
|
<div id="modalResizer" style="width:6px; cursor: col-resize; background: transparent; position: relative;">
|
|
|
<div style="position:absolute; top:0; bottom:0; left:2px; width:2px; background:#e5e7eb;"></div>
|
|
|
</div>
|
|
|
<div style="flex:1; display:flex; flex-direction:column;">
|
|
|
<div class="panel-header" style="padding:8px 12px;">
|
|
|
<div style="display:flex; align-items:center; gap:10px;">
|
|
|
<h3 class="panel-title" id="modalEditorTitle" style="margin:0;">代码编辑器</h3>
|
|
|
<div class="editor-actions" style="margin-left:auto; display:flex; gap:8px;">
|
|
|
<button class="btn btn-success" id="modalSaveFileBtn"><i class="fas fa-save"></i>
|
|
|
保存</button>
|
|
|
<button class="btn" id="modalCloseBtn"><i class="fas fa-times"></i> 关闭</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="file-info"><span id="modalCurrentFilePath">未选择文件</span></div>
|
|
|
</div>
|
|
|
<div class="editor-content" style="flex:1; padding:0; position:relative; overflow:hidden; display:flex; flex-direction:column;">
|
|
|
<div id="codeEditorWrapper" style="flex:1; display:flex; overflow:hidden; position:relative; height:100%; align-items:stretch;">
|
|
|
<div id="lineNumbers" style="background:#f5f5f5; color:#999; padding:15px 8px 15px 15px; font-family:'Courier New', monospace; font-size:14px; line-height:1.6; text-align:right; user-select:none; border-right:1px solid #e0e0e0; min-width:50px; width:50px; overflow-y:scroll; overflow-x:hidden; flex-shrink:0;"></div>
|
|
|
<textarea id="modalCodeEditor" placeholder="选择文件开始编辑..." style="flex:1; width:100%; border:none; padding:15px 15px 15px 8px; font-family:'Courier New', monospace; font-size:14px; line-height:1.6; resize:none; outline:none; background:#fafafa; color:#333; tab-size:4; overflow-y:scroll; overflow-x:auto;"></textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 规则集选择对话框 -->
|
|
|
<div id="ruleSetSelectModal" class="modal" style="display: none;">
|
|
|
<div class="modal-content" style="max-width: 500px;">
|
|
|
<div class="modal-header">
|
|
|
<h2>检查配置</h2>
|
|
|
<span class="close" id="closeRuleSetModal">×</span>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<p style="margin-bottom: 20px; color: #666; font-size: 14px;">
|
|
|
<i class="fas fa-info-circle" style="color: #1e3c72; margin-right: 8px;"></i>
|
|
|
选择检查工具和规则集配置。至少需要选择一个检查工具。
|
|
|
</p>
|
|
|
|
|
|
<!-- 工具选择 -->
|
|
|
<div class="form-group">
|
|
|
<label style="font-weight: 500; margin-bottom: 12px; display: block;">
|
|
|
<i class="fas fa-tools" style="color: #1e3c72; margin-right: 8px;"></i>
|
|
|
选择检查工具
|
|
|
</label>
|
|
|
<div style="display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #f8f9fa; border-radius: 6px; border: 1px solid #e9ecef;">
|
|
|
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
|
|
|
<input type="checkbox" id="toolPylint" class="tool-checkbox" value="pylint" checked style="width: auto; margin: 0; cursor: pointer;">
|
|
|
<span style="flex: 1;">
|
|
|
<strong>Pylint</strong>
|
|
|
<span style="color: #666; font-size: 12px; margin-left: 8px;">代码质量检查</span>
|
|
|
</span>
|
|
|
</label>
|
|
|
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
|
|
|
<input type="checkbox" id="toolFlake8" class="tool-checkbox" value="flake8" checked style="width: auto; margin: 0; cursor: pointer;">
|
|
|
<span style="flex: 1;">
|
|
|
<strong>Flake8</strong>
|
|
|
<span style="color: #666; font-size: 12px; margin-left: 8px;">代码风格检查</span>
|
|
|
</span>
|
|
|
</label>
|
|
|
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
|
|
|
<input type="checkbox" id="toolBandit" class="tool-checkbox" value="bandit" checked style="width: auto; margin: 0; cursor: pointer;">
|
|
|
<span style="flex: 1;">
|
|
|
<strong>Bandit</strong>
|
|
|
<span style="color: #666; font-size: 12px; margin-left: 8px;">安全漏洞检查</span>
|
|
|
</span>
|
|
|
</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 规则集选择 -->
|
|
|
<div class="form-group" style="margin-top: 20px;">
|
|
|
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px; background: #f8f9fa; border-radius: 6px; border: 1px solid #e9ecef;">
|
|
|
<input type="checkbox" id="useCustomRuleSet" style="width: auto; margin: 0; cursor: pointer;">
|
|
|
<span style="font-weight: 500;">使用自定义规则集</span>
|
|
|
</label>
|
|
|
</div>
|
|
|
<div class="form-group" id="ruleSetSelectGroup" style="display: none; margin-top: 15px;">
|
|
|
<label for="ruleSetSelect" style="font-weight: 500; margin-bottom: 8px; display: block;">选择规则集</label>
|
|
|
<select id="ruleSetSelect" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; background: white; cursor: pointer;">
|
|
|
<option value="">请选择规则集...</option>
|
|
|
</select>
|
|
|
<p style="margin-top: 8px; font-size: 12px; color: #666; line-height: 1.5;">
|
|
|
<i class="fas fa-check-circle" style="color: #28a745; margin-right: 4px;"></i>
|
|
|
选中的规则集文件将应用于已选择的检查工具
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<!-- AI分析选项 -->
|
|
|
<div class="form-group" style="margin-top: 20px; padding: 12px; background: #f0f7ff; border-radius: 6px; border: 1px solid #b3d9ff;">
|
|
|
<label style="display: flex; align-items: start; gap: 10px; cursor: pointer;">
|
|
|
<input type="checkbox" id="useAiAnalysis" checked style="width: auto; margin: 0; cursor: pointer; margin-top: 2px;">
|
|
|
<div style="flex: 1;">
|
|
|
<span style="font-weight: 500; display: flex; align-items: center; gap: 6px;">
|
|
|
<i class="fas fa-robot" style="color: #1e3c72;"></i>
|
|
|
启用AI智能分析
|
|
|
</span>
|
|
|
<p style="margin: 6px 0 0 0; font-size: 12px; color: #666; line-height: 1.5;">
|
|
|
自动去重、风险评估和生成修改建议。需要配置OPENAI_API_KEY环境变量才能使用完整AI功能。
|
|
|
</p>
|
|
|
</div>
|
|
|
</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<button type="button" class="btn btn-secondary" id="cancelRuleSetBtn">取消</button>
|
|
|
<button type="button" class="btn btn-primary" id="confirmRuleSetBtn">开始检查</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script src="js/app.js"></script>
|
|
|
</body>
|
|
|
|
|
|
</html> |
