IntelliGit 项目个人工作总结
本文为山东大学软件学院创新实训项目博客
工作摘要
本人在 IntelliGit 项目中主要负责前端 UI 架构、交互设计实现及用户体验优化工作。工作内容覆盖三大阶段：初期建立了项目前端开发环境与侧边栏基础设施，中期完成了仓库变更界面的核心交互逻辑（含 diff 查看器、部分暂存系统），后期对全项目界面进行了系统性布局重构与视觉风格统一。
具体工作
2.1 前端基础设施搭建
初始化正式前端开发环境，完成开发工具链配置，搭建 Vite + React + TypeScript + Electron 的项目骨架。
2.2 仓库管理系统
仓库生命周期管理
- 实现创建仓库、克隆仓库功能，包含表单验证、路径检测、Git 仓库合法性校验
- 实现设置远程仓库功能，支持远程地址添加/修改/删除
- 实现仓库删除功能，提供安全确认机制，仅移除列表不删除本地文件
- 实现仓库配置修改标记与保存按钮条件控制，防止无效保存
仓库选择交互重构
- 将仓库选择功能从分散位置集中至左侧活动栏，通过侧边栏面板统一管理
- 实现侧边栏可拖拽拉伸功能，支持最小/最大宽度限制
- 修复侧边栏控件在极限宽度下的压缩问题
- 实现仓库切换时的状态同步，解决 UI 与数据状态不同步的问题
2.3 侧边栏体系
基础架构
- 设计并实现左侧活动栏（ActivityRail）导航体系，支持主视图与侧边面板的独立切换
- 实现侧边栏弹性布局与主内容区的联动调整
功能面板
- 将智能聊天助手（ChatPanel）从顶栏迁移至侧边栏，实现对话面板的独立展示
- 实现全局设置面板（GlobalSettingsPanel），将 LLM 配置、安全策略等设置集中管理
- 实现 NLP 自然语言助手从全屏视图向侧边栏的架构迁移，统一交互模式
2.4 仓库变更界面与 Diff 查看器
界面布局
- 重新设计仓库变更界面布局，将未暂存/已暂存文件列表、Diff 查看器和提交面板整合为水平可拖拽分割的弹性布局
- 实现文件区域（未暂存/已暂存）的垂直分割，支持通过拖拽调节比例
Diff 查看器
- 实现不同状态文件的差异化 diff 比较对象选择（工作区 vs 暂存区 vs HEAD）
- 实现 diff 加载过程中的 loading 状态提示
- 实现选中文件后再次点击取消选中、返回空界面的交互
- 实现 diff 界面样式优化，包括文件图标更换、行号显示
代码折叠与统计
- 实现 diff 文件中未修改部分的折叠展开功能，减少长 diff 的视觉干扰
- 实现文件增删行数统计显示
- 优化 diff 计算逻辑，提升大型 diff 的渲染性能
- 修复新增空文件 diff 加载卡住的问题
- 实现选中文件的 diff 自动刷新功能
部分暂存系统
- 从架构层面实现局部暂存操作骨架，设计选择注册与跨层通信机制
- 实现部分暂存的完整交互流程，支持行级和 hunk 级选择、暂存/取消暂存
- 实现部分暂存文件状态转化时的选择状态自动同步
- 修复部分暂存场景下的状态-UI 不一致问题
2.5 仓库历史界面
- 优化 Commit Graph 与 Commit 详情之间的布局关系
- 从固定 Grid 三栏布局改为 Flex + 可拖拽分割线，支持自由调节 Commit Graph 与详情的宽度比例
2.6 仓库变更界面提交面板
- 重构提交信息输入区域，去除外层装饰框，简化视觉层级
- 将 AI 生成按钮和字数统计移入输入框内部，压缩占用空间
- 智能提交工具栏改造为纯图标按钮 + Tooltip 提示
- 智能分析卡片添加展开/收起和关闭功能
- 实现面板内容自适应高度：无分析内容时紧凑，分析内容出现时自动撑开
- 统一提交面板各组件的滚动条风格
2.7 全局样式与交互优化
滚动条风格统一
- 为全项目全部滚动区域统一应用暗色主题滚动条样式
- 修复侧边栏因嵌套 padding 导致的滚动条无法贴右边界问题
- 消除双层 overflow: auto 导致浏览器默认滚动条覆盖自定义滚动条的问题
NLP 界面优化
- NLP 提示词标签支持折叠展开，默认仅展示 3 条
- 历史记录区添加分隔横线，与上方操作区视觉区分
- 移除浮动加载动画（按钮已有 loading 状态），修正动画位置偏差
Diff 聚合摘要
- 将固定展示的"聚合摘要"改为可折叠组件，默认收起
视觉细节
- 修复仓库变更界面文件图标样式
- 修复添加上下文按钮的图标显示问题
- 修复多处代码标红问题
- 调整局部样式与默认模型配置
工作总结
3.1 工作成果
- 完成42 个功能/修复/优化提交，累计代码变更约6000+ 行
- 覆盖范围从前端基础设施到核心交互功能的完整链路
- 主导了侧边栏体系的架构设计与实现，奠定了项目 UI 框架
- 独立完成仓库变更界面从布局到 diff 查看器到部分暂存的完整功能链
- 系统性进行了全项目的 UI 优化与视觉风格统一
3.2 技术亮点
- 弹性布局系统：实现多层级可拖拽分割的弹性布局（变更界面的水平/垂直分割、历史界面的 Graph/详情分割、侧边栏宽度拖拽）
- 部分暂存系统：设计并实现了跨层的选择状态管理机制，支持行级和 hunk 级精确暂存
- 组件架构思维：推动智能聊天和 NLP 从独立视图向可复用的侧边面板组件迁移，统一交互模式
- CSS 工程化：统一全项目滚动条风格，消除嵌套滚动等隐性 UI 问题
3.3 经验与展望
本次工作从零基础开始接触 Electron + React + TypeScript 技术栈，在近两个月的实践中逐步掌握了前端项目架构设计、组件化开发和交互优化等技能。未来可进一步关注：
- 编写自动化测试用例，提升代码质量保障
- 提取可复用的组件和 Hook，降低代码重复
- 持续跟踪用户反馈，迭代优化交互细节