《智能代码审查系统》编码实现-第08节：项目前端页面的设计与实现

作者：冰河
星球：http://m6z.cn/6aeFbs
博客：https://binghe.site
文章汇总：https://binghe.site/md/all/all.html
源码获取地址：https://t.zsxq.com/UIr1U

沉淀，成长，突破，帮助他人，成就自我。

大家好，我是冰河~~

经过前面几个章节的实现，又完善了AI智能代码审查系统的CodeReview服务层的功能，能够生成CR记录和日报，对接微信-钉钉-飞书-自定义WebHook实现了发送通知消息。并且设计和实现了基于Gitea、Github和Gitlab三大类型代码仓库的核心WebHook，分别对Gitea、Github和Gitlab的Push和PR/MR等代码的Code Review进行了设计和实现。

一、项目整体进展

1.1 已完成的七个阶段

第一阶段：基础配置与数据层（已完成）

配置类

  • AsyncConfig：异步任务线程池配置

    • 核心线程池：5个
    • 最大线程池：20个
    • 队列容量：100个
    • 拒绝策略：CallerRunsPolicy

  • WebConfig：Web MVC配置

    • 静态资源处理
    • CORS配置

  • AiReviewConstants：全局常量管理

数据层

  • MrReviewLog：MR审查日志实体
  • PushReviewLog：Push审查日志实体
  • MrReviewLogRepository：MR数据访问层
  • PushReviewLogRepository：Push数据访问层

第二阶段：LLM客户端层（已完成）

核心类

  • BaseOpenAIClient：LLM客户端抽象基类
  • LLMClient：统一LLM接口
  • LLMFactory：客户端工厂类
  • OpenAIClient、DeepSeekClient、QwenClient、GlmClient：具体实现

第三阶段：通知服务层（已完成）

服务接口和实现

  • NotificationService：通知服务接口
  • NotificationServiceImpl：通知服务实现
  • DingTalkNotifier、WeComNotifier、FeishuNotifier、ExtraWebhookNotifier：通知器实现

第四阶段：业务逻辑层（已完成）

核心服务

  • ReviewService：审核服务
  • CodeReviewService：代码审查服务
  • ReportService：日报生成服务

第五阶段：Git平台集成层（已完成）

三个Webhook Handler

  • GitHubWebhookHandler：GitHub平台适配器
  • GitLabWebhookHandler：GitLab平台适配器
  • GiteaWebhookHandler：Gitea平台适配器

第六阶段：提示词模板配置（已完成）

核心配置文件

  • application.yml：SpringBoot主配置文件
  • prompt_templates.yml：多语言提示词模板

第七阶段：项目启动和数据库（已完成）

数据库建表脚本

  • data/ai_review.sql：数据库建表脚本

项目启动类

  • AiReviewApplication：项目启动类

1.2 本节新增内容

前端页面设计

  • 系统首页：代码审查数据大盘
  • 页面结构：头部导航、筛选器、统计卡片、标签页（数据表格+统计图表）
  • 主题切换：亮色/暗色模式
  • 响应式设计：适配不同屏幕尺寸

二、前端页面详细说明

2.1 index.html - 前端页面结构

2.1.1 页面头部

<nav class="bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center">
                <h1 class="text-2xl font-bold">&#128202; 代码审查-系统大盘</h1>
            </div>
            <div class="flex items-center space-x-4">
                <span id="lastUpdate" class="text-sm text-blue-100"></span>
                <!-- 主题切换按钮 -->
                <button id="themeToggle" onclick="toggleTheme()">
                    <!-- 太阳/月亮图标 -->
                </button>
            </div>
        </div>
    </div>
</nav>

功能说明：

  • 渐变色背景（蓝色到紫色）
  • 显示最后更新时间
  • 主题切换按钮（支持localStorage持久化）
  • 平滑过渡动画

2.1.2 筛选器区域

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <!-- 开始日期 -->
        <div>
            <label class="block text-sm font-medium">开始日期</label>
            <input type="date" id="startDate">
        </div>
        <!-- 结束日期 -->
        <div>
            <label class="block text-sm font-medium">结束日期</label>
            <input type="date" id="endDate">
        </div>
        <!-- 用户名下拉框 -->
        <div>
            <label class="block text-sm font-medium">用户名</label>
            <select id="authors">
                <option value="">全部</option>
            </select>
        </div>
        <!-- 项目名下拉框 -->
        <div>
            <label class="block text-sm font-medium">项目名</label>
            <select id="projectNames">
                <option value="">全部</option>
            </select>
        </div>
    </div>
    <div class="mt-4 flex items-center space-x-4">
        <button onclick="loadData()">查询</button>
        <button onclick="resetFilters()">重置</button>
        <div>
            <input type="radio" name="reviewType" value="mr" checked>
            <label>Merge Request</label>
            <input type="radio" name="reviewType" value="push">
            <label>Push</label>
        </div>
    </div>
</div>

功能说明：

  • 日期范围筛选（默认最近7天）
  • 用户名多选筛选
  • 项目名多选筛选
  • 审查类型切换（MR/Push）
  • 查询和重置按钮

2.1.3 统计卡片

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
    <div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg shadow-lg p-6 text-white">
        <h3 class="text-lg font-semibold mb-2">总记录数</h3>
        <p class="text-4xl font-bold" id="totalRecords">0</p>
    </div>
    <div class="bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg shadow-lg p-6 text-white">
        <h3 class="text-lg font-semibold mb-2">平均分数</h3>
        <p class="text-4xl font-bold" id="averageScore">0.00</p>
    </div>
</div>

功能说明：

  • 总记录数统计
  • 平均分数计算
  • 渐变色卡片设计

2.1.4 标签页导航

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-6">
    <div class="border-b border-gray-200 dark:border-gray-700">
        <nav class="flex -mb-px">
            <button onclick="switchTab('data')" id="tabData" class="tab-button active">
                数据表格
            </button>
            <button onclick="switchTab('charts')" id="tabCharts" class="tab-button">
                统计图表
            </button>
        </nav>
    </div>

    <!-- 数据表格内容 -->
    <div id="tabContentData" class="tab-content p-6">
        <table>
            <thead>
                <tr>
                    <th>项目名</th>
                    <th>作者</th>
                    <th>源分支</th>
                    <th>目标分支</th>
                    <th>更新时间</th>
                    <th>提交信息</th>
                    <th>代码变更</th>
                    <th>分数</th>
                    <th>链接</th>
                </tr>
            </thead>
            <tbody id="dataTableBody"></tbody>
        </table>
    </div>

    <!-- 统计图表内容 -->
    <div id="tabContentCharts" class="tab-content hidden p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <canvas id="projectCountChart"></canvas>
            <canvas id="projectScoreChart"></canvas>
            <canvas id="authorCountChart"></canvas>
            <canvas id="authorScoreChart"></canvas>
            <canvas id="authorCodeLineChart" class="md:col-span-2"></canvas>
        </div>
    </div>
</div>

功能说明：

  • 数据表格标签页：展示审查记录详情
  • 统计图表标签页：多种可视化图表
  • 响应式布局：不同屏幕尺寸自适应

2.2 app.js - 前端业务逻辑

2.2.1 全局变量和初始化

// 全局变量
let currentData = [];
let charts = {};
let currentReviewType = 'mr';

// 初始化
document.addEventListener('DOMContentLoaded', function() {
    // 设置默认日期（最近7天）
    const today = new Date();
    const sevenDaysAgo = new Date(today);
    sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);

    document.getElementById('startDate').value = formatDate(sevenDaysAgo);
    document.getElementById('endDate').value = formatDate(today);

    // 监听审查类型变化
    document.querySelectorAll('input[name="reviewType"]').forEach(radio => {
        radio.addEventListener('change', function() {
            currentReviewType = this.value;
            // 更新表头显示
            updateHeaders();
            // 重新加载筛选器选项和数据
            loadFilterOptions().then(() => loadData());
        });
    });

    // 初始加载数据
    loadFilterOptions().then(() => loadData());

    // 定时更新（每30秒）
    setInterval(updateLastUpdateTime, 30000);
    updateLastUpdateTime();
});

功能说明：

  • 默认日期：最近7天
  • 审查类型切换监听
  • 初始加载数据
  • 定时更新最后更新时间（每30秒）

2.2.2 数据加载

查看完整文章

加入冰河技术知识星球，解锁完整技术文章、小册、视频与完整代码

写在最后

在冰河技术知识星球， 《AI智能代码审查平台》、《AI全链路短剧生成平台》 已完结，同时，《企业级微服务开放平台》 项目热更中，还有其他二十几个项目，像实战Claude Code、AI知识库系统、智流助手平台、智能成语挑战赛项目、多轮AI智能对话系统、一站式AI智能平台、AI智能客服系统、AI智能问答系统、实战AI大模型、手写高性能敏组件、手写线程池、手写高性能SQL引擎、手写高性能Polaris网关、手写高性能熔断组件、手写通用指标上报组件、手写高性能数据库路由组件、手写分布式IM即时通讯系统、手写Seckill分布式秒杀系统、手写高性能RPC、实战高并发设计模式、简易商城系统等等。

这些项目的需求、方案、架构、落地等均来自互联网真实业务场景，让你真正学到互联网大厂的业务与技术落地方案，并将其有效转化为自己的知识储备。

值得一提的是：冰河自研的Polaris高性能网关比某些开源网关项目性能更高，目前正在热更AI一体化项目，也正在实现MCP，全程带你分析原理和手撸代码。

你还在等啥？不少小伙伴经过星球硬核技术和项目的历练，早已成功跳槽加薪，实现薪资翻倍，而你，还在原地踏步，抱怨大环境不好。抛弃焦虑和抱怨，我们一起塌下心来沉淀硬核技术和项目，让自己的薪资更上一层楼。

🚀PS：目前已开通最大优惠：长按或扫码加入星球立减30，注意：随着项目和专栏的更新，星球也即将涨价！！


目前，领券加入星球就可以跟冰河一起学习《实战Claude Code》、《多轮AI智能对话系统》、《一站式AI智能平台》、《AI智能客服系统》、《AI智能问答系统》、《实战AI大模型》、《手写高性能Redis组件》、《手写高性能脱敏组件》、《手写线程池》、《手写高性能SQL引擎》、《手写高性能Polaris网关》、《手写高性能RPC项目》、《分布式Seckill秒杀系统》、《分布式IM即时通讯系统》《手写高性能通用熔断组件项目》、《手写高性能通用监控指标上报组件》、《手写高性能数据库路由组件》、《手写简易商城脚手架项目》、《Spring6核心技术与源码解析》和《实战高并发设计模式》，从零开始介绍原理、设计架构、手撸代码。

花很少的钱就能学这么多硬核技术、中间件项目和大厂秒杀系统、分布式IM即时通讯系统，AI大模型项目，比其他培训机构不知便宜多少倍，硬核多少倍，如果是我，我会买他个十年！

加入要趁早，后续还会随着项目和加入的人数涨价，而且只会涨，不会降，先加入的小伙伴就是赚到。

另外，还有一个限时福利，邀请一个小伙伴加入，冰河就会给一笔 分享有奖 ，有些小伙伴都邀请了50+人，早就回本了！

其他方式加入星球

  • 链接 ：打开链接 http://m6z.cn/6aeFbs 加入星球。
  • 回复 ：在公众号 冰河技术 回复 星球 领取优惠券加入星球。

特别提醒： 苹果用户进圈或续费，请加微信 hacker_binghe 扫二维码，或者去公众号 冰河技术 回复 星球 扫二维码加入星球。

好了，今天就到这儿吧，我是冰河，我们下期见~~