网页里搞定 Git：Gemini-CLI-UI 可视化暂存、提交与分支切换完整教程

【免费下载链接】Gemini-CLI-UIA responsive web-based UI that provides an intuitive interface for Googles Gemini CLI, enabling AI-assisted coding from any device. Features include interactive chat, integrated terminal, file explorer with live editing, Git integration, and session management.项目地址https://gitcode.com/gh_mirrors/ge/Gemini-CLI-UI点击查看免费下载Gemini-CLI-UI 是 Google Gemini CLI 的开源响应式网页界面除了 AI 对话和文件编辑它还内置了可视化 Git 面板Source Control在浏览器里就能完成文件暂存、代码提交、分支切换和 Pull/Push 同步全程不用打开终端敲命令。本文带你完整走一遍这套网页版 Git 操作流程零基础也能快速上手。 Gemini-CLI-UI 的 Source Control 面板能做什么打开一个项目后界面顶部的Source Control标签页就是可视化 Git 面板。它把命令行里最常用的 Git 操作变成了按钮和清单功能说明 变更总览实时显示已修改M、新增A、删除D、未跟踪U四类文件 逐行 Diff点击文件即可展开行级差异对比绿色新增、红色删除✅ 暂存与提交勾选文件、填写说明后一键 Commit支持快捷键和 AI 生成提交说明 分支管理下拉切换分支、一键新建分支并显示领先/落后远程的提交数 远程同步按需出现 Pull / Push / Fetch 按钮带二次确认防误操作 提交历史查看最近 10 条提交记录可展开查看每次提交的 Diff前端实现位于 GitPanel.jsx所有 Git 命令都由后端 git.js 中的 REST 接口执行。 快速开始进入 Git 面板只需 3 步前置条件已安装 Node.js v20 和 Gemini CLI并在至少一个项目目录里运行过gemini。1️⃣ 克隆并启动项目git clone https://gitcode.com/gh_mirrors/ge/Gemini-CLI-UI cd Gemini-CLI-UI npm install npm run dev2️⃣ 浏览器访问http://localhost:4009在左侧边栏选中一个已存在的 Git 项目。3️⃣ 点击顶部导航栏的Source Control标签页即可进入 Git 操作界面标签页的渲染逻辑在 MainContent.jsx选中后页面会切换渲染 GitPanel 组件。 如果面板提示 Not a git repository只需在终端对项目目录执行一次git init即可。 第一步查看并暂存文件变更进入面板后顶部显示当前分支名下方按状态分组成文件清单每个文件右侧有一个彩色状态角标角标颜色含义M黄色Modified已修改A绿色Added新增/已暂存D红色Deleted已删除U灰色Untracked未跟踪的新文件这些状态来自后端 git status 接口 对git status --porcelain输出的解析。查看逐行 Diff点击文件左侧的展开箭头文件下方的差异区域会自动加载该文件的逐行对比绿色行 新增内容红色行 删除内容蓝色行是定位头未跟踪文件U会把整个文件内容按新增行展示实现见 fetchFileDiff 函数对应后端 diff 接口。勾选要提交的文件每个文件前的复选框就是暂存操作勾选的文件会随本次 Commit 一起提交默认全选使用Select All / Deselect All快速全选或清空M/D 状态的文件旁有 ️Discard按钮点击并确认后可放弃该文件的全部改动不可撤销谨慎使用✅ 第二步提交代码Commit文件勾选完成后在提交输入框填写说明然后点Commit按钮或直接按CtrlEnter快捷键提交。点击后会出现二次确认弹窗防止误提交。提交流程在 handleCommit 函数 中后端 commit 接口 会先对勾选文件逐个执行git add再执行git commit -m一次点击完成暂存 提交两个动作。✨ 一键 AI 生成提交说明不想手写提交信息点击输入框右上角的 ✨ 图标系统会根据所选文件的 Diff 内容自动生成一条规范的 commit message例如Update GitPanel、Add multiple components填好后确认提交即可。前端触发generateCommitMessage 函数后端生成逻辑generate-commit-message 接口 第三步分支切换与新建分支一键切换分支点击面板左上角的分支下拉框显示当前分支名会列出所有本地与远程分支当前分支带绿色对勾。点击任意分支即完成切换成功后状态面板自动刷新。分支列表来自 branches 接口切换动作由 switchBranch 函数 调用 checkout 接口 执行。新建分支下拉框底部有Create new branch入口在弹窗中填入分支名如feature/new-feature回车即可。它会基于当前分支创建并立即切换过去相当于git checkout -b实现见 createBranch 函数。读懂 ↑ / ↓ 同步指示器分支名旁边的箭头指示本地与远程的差异↑N绿色本地领先远程 N 个提交可以 Push↓N蓝色本地落后远程 N 个提交建议 Pull✓与远程完全同步 第四步同步远程仓库Pull / Push / FetchSource Control 面板的同步按钮是智能的——只在需要时才出现Pull 按钮绿色仅当落后远程时显示按钮上直接标出要拉取的提交数Push 按钮橙色仅当领先远程时显示标出要推送的提交数Fetch 按钮蓝色领先或分叉时可单独刷新远程引用每个操作都有确认弹窗遇到冲突、未提交改动、网络错误等情况后端会返回对应的中文友好提示例如 Merge conflicts detected。Pull 逻辑handlePull 函数 → pull 接口Push 逻辑handlePush 函数 → push 接口领先/落后计数remote-status 接口 附加技能查看最近提交历史History切换到History标签页可以看到当前分支最近 10 条提交提交说明、作者、相对时间和短哈希。点击任一条提交可展开查看该次提交的完整 Diff 和文件统计来源是 commits 接口 与 commit-diff 接口。❓ 常见问题FAQQ1面板显示 Not a git repository 怎么办项目目录还不是 Git 仓库在终端进入该目录执行git init初始化后刷新面板即可。Q2提示 Project directory is not a git repository 但目录明明有 .git你选中的可能是某个仓库的子目录。Git 操作必须在仓库根目录进行请把项目指向仓库顶层目录校验逻辑见 validateGitRepository。Q3为什么看不到 Pull / Push 按钮说明当前分支与远程完全同步或没有配置远程跟踪分支此时无需任何同步操作。小结通过 Gemini-CLI-UI 的 Source Control 面板你在浏览器里就完成了一整套网页版 Git 工作流看状态角标 逐行 Diff 掌握所有改动存勾选文件、AI 生成说明、一键提交切分支下拉框切换/新建分支↑↓ 指示器掌握同步状态推智能 Pull / Push / Fetch 按钮安全同步远程配合同项目里的 AI 对话、文件编辑器和 Shell 终端Gemini-CLI-UI 把AI 写代码 网页管 Git整合在了同一个界面中非常适合喜欢轻操作、少敲命令的开发者。赞分享【免费下载链接】Gemini-CLI-UIA responsive web-based UI that provides an intuitive interface for Googles Gemini CLI, enabling AI-assisted coding from any device. Features include interactive chat, integrated terminal, file explorer with live editing, Git integration, and session management.项目地址https://gitcode.com/gh_mirrors/ge/Gemini-CLI-UI点击查看免费下载相关推荐5分钟搞定B站缓存视频转换m4s转MP4完整教程5分钟搞定B站缓存视频转换m4s转MP4完整教程 还在为B站缓存视频无法播放而烦恼吗那些珍贵的收藏视频难道只能永远困在客户端里今天为大家带来一款神器—音视频CLI5分钟搞定B站缓存视频转换m4s转MP4完整教程还在为B站缓存的m4s格式视频无法在普通播放器中播放而苦恼吗m4s converter作为一款专门针对B站PC端缓存视频设计的转换工具能够轻松将m4s格式转音视频CLI5分钟搞定B站缓存视频转换m4s转MP4完整教程5分钟搞定B站缓存视频转换m4s转MP4完整教程 还在为B站缓存视频无法正常播放而烦恼吗m4s converter这款开源工具完美解决了B站m4s视频文件转音视频CLI上一篇万能导登录与凭证保存教程如何一次性登录实现知识库全量导出下一篇SguanFOC速度环控制深度解析PID、LADRC、SMC、STA四种控制器切换完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考