<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>Imber Visual Docs Blog</title>
        <link>https://imber-visual-docs.netlify.app/blog</link>
        <description>Imber Visual Docs Blog</description>
        <lastBuildDate>Tue, 07 Jul 2026 00:00:00 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>zh-CN</language>
        <item>
            <title><![CDATA[Visual Worktree 上手指南：从配置到清理，每一步都有截图]]></title>
            <link>https://imber-visual-docs.netlify.app/blog/visual-worktree-product-tour</link>
            <guid>https://imber-visual-docs.netlify.app/blog/visual-worktree-product-tour</guid>
            <pubDate>Tue, 07 Jul 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[一篇面向新用户的 Visual Worktree 图文上手指南，按真实操作顺序讲清设置、创建 worktree、项目扫描、批量操作、流程、环境检查、看板和历史任务。]]></description>
            <content:encoded><![CDATA[<p>Visual Worktree 适合这种研发日常：一个需求同时改前端、接口层、小程序，几个仓库都要建分支、拉更新、开编辑器、跑环境，最后还要记得清理 worktree。</p>
<p>这篇文章不只介绍功能，而是按第一次使用的顺序走一遍。你可以照着截图完成配置、创建第一个跨仓库任务，并知道每个页面应该重点看什么。</p>
<p>源码仓库：<a href="https://github.com/imberZsk/visual-worktree" target="_blank" rel="noopener noreferrer" class="">imberZsk/visual-worktree</a></p>
<h2 class="anchor anchorTargetStickyNavbar_Xcgl" id="0-先准备两个目录">0. 先准备两个目录<a href="https://imber-visual-docs.netlify.app/blog/visual-worktree-product-tour#0-%E5%85%88%E5%87%86%E5%A4%87%E4%B8%A4%E4%B8%AA%E7%9B%AE%E5%BD%95" class="hash-link" aria-label="0. 先准备两个目录的直接链接" title="0. 先准备两个目录的直接链接" translate="no">​</a></h2>
<p>Visual Worktree 的目录模型很简单：源项目放一处，任务 worktree 放另一处。</p>
<div class="language-text codeBlockContainer_Lu8E theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_MOlq"><pre tabindex="0" class="prism-code language-text codeBlock__Is8 thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_cvRK"><div class="token-line" style="color:#bfc7d5"><span class="token plain">~/work/projects/</span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  frontend-shell/</span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  api-gateway/</span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  miniapp-client/</span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">~/work/worktrees/</span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  FEAT-231 多端结算页联调/</span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    frontend-shell/</span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    api-gateway/</span><br></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    miniapp-client/</span><br></div></code></pre></div></div>
<p>源项目目录是你平时维护的本地 Git 仓库集合；worktree 根目录是 Visual Worktree 按任务创建临时工作区的地方。推荐把两者分开，这样主工作区保持干净，需求开发都落在任务目录里。</p>
<h2 class="anchor anchorTargetStickyNavbar_Xcgl" id="1-配置源项目和-worktree-根目录">1. 配置源项目和 Worktree 根目录<a href="https://imber-visual-docs.netlify.app/blog/visual-worktree-product-tour#1-%E9%85%8D%E7%BD%AE%E6%BA%90%E9%A1%B9%E7%9B%AE%E5%92%8C-worktree-%E6%A0%B9%E7%9B%AE%E5%BD%95" class="hash-link" aria-label="1. 配置源项目和 Worktree 根目录的直接链接" title="1. 配置源项目和 Worktree 根目录的直接链接" translate="no">​</a></h2>
<p>打开右上角「设置」，先填两个必需路径：</p>
<ul>
<li class=""><strong>源项目根目录</strong>：存放多个 Git 仓库的目录。</li>
<li class=""><strong>Worktree 根目录</strong>：按任务生成 worktree 的目录。</li>
</ul>
<p><img decoding="async" loading="lazy" alt="设置源项目和 Worktree 根目录" src="https://imber-visual-docs.netlify.app/assets/images/09-settings-f20653e1bf66cb48aea4f04b3d9fd4c9.png" width="1440" height="728" class="img_Efyx"></p>
<p>这里还可以顺手检查主分支名。默认支持 <code>main</code> 和 <code>master</code>，后续批量切回主分支时，应用会自动选择仓库真实存在的那个主分支。</p>
<p>实用建议：</p>
<ul>
<li class="">源项目目录只放一级仓库，扫描会更清楚。</li>
<li class="">忽略不常用仓库，避免项目列表太吵。</li>
<li class="">日常可以先关闭自动 fetch，刷新会更快；需要精确 behind 状态时再打开。</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Xcgl" id="2-创建一个跨仓库任务">2. 创建一个跨仓库任务<a href="https://imber-visual-docs.netlify.app/blog/visual-worktree-product-tour#2-%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E8%B7%A8%E4%BB%93%E5%BA%93%E4%BB%BB%E5%8A%A1" class="hash-link" aria-label="2. 创建一个跨仓库任务的直接链接" title="2. 创建一个跨仓库任务的直接链接" translate="no">​</a></h2>
<p>回到 Worktree 视图，点击右上角「创建 Worktree」。输入任务名，选择这个需求涉及的项目，应用会在 <code>worktreesRoot/{任务名}/{项目名}</code> 下创建对应 worktree。</p>
<p><img decoding="async" loading="lazy" alt="创建跨仓库 Worktree" src="https://imber-visual-docs.netlify.app/assets/images/02-create-worktree-2fc9cc512f9a44b7ef46ffb06215253c.png" width="1440" height="728" class="img_Efyx"></p>
<p>这个操作适合在需求刚开始时做。比如 <code>FEAT-231 多端结算页联调</code> 同时涉及 <code>api-gateway</code>、<code>frontend-shell</code>、<code>miniapp-client</code>，创建后每个项目都有独立分支和独立工作区。</p>
<p>创建时可以关注三件事：</p>
<ul>
<li class="">任务名最好和 Jira、需求单或发布单一致，后面查历史更方便。</li>
<li class="">分支名可以按团队规范填写，例如 <code>feat/settlement-panel</code>。</li>
<li class="">Node 项目可以复用源项目的 <code>node_modules</code> 软链接，减少重复安装依赖。</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Xcgl" id="3-在任务视图里看全局状态">3. 在任务视图里看全局状态<a href="https://imber-visual-docs.netlify.app/blog/visual-worktree-product-tour#3-%E5%9C%A8%E4%BB%BB%E5%8A%A1%E8%A7%86%E5%9B%BE%E9%87%8C%E7%9C%8B%E5%85%A8%E5%B1%80%E7%8A%B6%E6%80%81" class="hash-link" aria-label="3. 在任务视图里看全局状态的直接链接" title="3. 在任务视图里看全局状态的直接链接" translate="no">​</a></h2>
<p>创建完成后，任务会在 Worktree 视图里按任务聚合。展开任务，可以看到这个需求下每个仓库的分支、路径、未提交变更和快捷操作。</p>
<p><img decoding="async" loading="lazy" alt="任务总览" src="https://imber-visual-docs.netlify.app/assets/images/01-worktree-overview-c7fb05ad1a0d0d18e771032c4b2ef999.png" width="1440" height="728" class="img_Efyx"></p>
<p>这张图里最值得看的不是某一个项目，而是一整个任务的状态：</p>
<ul>
<li class=""><code>3 项目</code> 表示这个需求包含 3 个仓库。</li>
<li class=""><code>开发中</code> 是任务当前阶段，可以手动调整。</li>
<li class="">需求链接、Jira 链接会跟着任务展示，回到任务时不用翻聊天记录。</li>
<li class=""><code>1 个环境问题</code> 会提示这个任务目录还没完全准备好。</li>
<li class="">每个项目行右侧可以快速打开编辑器、终端、Finder、复制路径或删除 worktree。</li>
</ul>
<p>如果你每天要切多个需求，这个视图就是主入口。它回答的是：“这个需求现在牵涉哪些仓库？有没有改动？下一步该处理什么？”</p>
<h2 class="anchor anchorTargetStickyNavbar_Xcgl" id="4-切到项目视图先把仓库状态扫干净">4. 切到项目视图，先把仓库状态扫干净<a href="https://imber-visual-docs.netlify.app/blog/visual-worktree-product-tour#4-%E5%88%87%E5%88%B0%E9%A1%B9%E7%9B%AE%E8%A7%86%E5%9B%BE%E5%85%88%E6%8A%8A%E4%BB%93%E5%BA%93%E7%8A%B6%E6%80%81%E6%89%AB%E5%B9%B2%E5%87%80" class="hash-link" aria-label="4. 切到项目视图，先把仓库状态扫干净的直接链接" title="4. 切到项目视图，先把仓库状态扫干净的直接链接" translate="no">​</a></h2>
<p>项目视图看的是源项目目录里的所有仓库。它适合在创建任务前后确认本地状态：哪些仓库不在主分支、哪些有未提交变更、哪些落后远端。</p>
<p><img decoding="async" loading="lazy" alt="项目扫描视图" src="https://imber-visual-docs.netlify.app/assets/images/03-projects-scan-ba41bf564b34b3d7b1dcef4e93101afb.png" width="1440" height="728" class="img_Efyx"></p>
<p>顶部统计卡片会把关键风险提出来：</p>
<ul>
<li class=""><strong>非主分支</strong>：说明仓库还停在需求分支或临时分支。</li>
<li class=""><strong>有未提交变更</strong>：切分支或删除 worktree 前要小心。</li>
<li class=""><strong>可拉取更新</strong>：说明本地落后远端，需要 pull。</li>
</ul>
<p>表格里的「操作」按钮是高频入口。你可以直接打开详情、Finder、VSCode、GitLab、终端，也可以复制路径或置顶项目。对多仓库项目来说，这比在终端里不断 <code>cd</code> 要省很多上下文切换。</p>
<h2 class="anchor anchorTargetStickyNavbar_Xcgl" id="5-多选项目后做批量操作">5. 多选项目后做批量操作<a href="https://imber-visual-docs.netlify.app/blog/visual-worktree-product-tour#5-%E5%A4%9A%E9%80%89%E9%A1%B9%E7%9B%AE%E5%90%8E%E5%81%9A%E6%89%B9%E9%87%8F%E6%93%8D%E4%BD%9C" class="hash-link" aria-label="5. 多选项目后做批量操作的直接链接" title="5. 多选项目后做批量操作的直接链接" translate="no">​</a></h2>
<p>当你要整理一批仓库时，先在项目表格里勾选项目，再点「批量操作」。常用动作包括批量切到主分支、批量拉取更新、批量暂存变更。</p>
<p><img decoding="async" loading="lazy" alt="批量操作项目" src="https://imber-visual-docs.netlify.app/assets/images/04-batch-actions-b17bd67366cff5d8cab3dd88d6fb845c.png" width="1440" height="728" class="img_Efyx"></p>
<p>这一步的价值在收尾阶段尤其明显。比如需求开发结束后，你可以：</p>
<ul>
<li class="">勾选相关源项目。</li>
<li class="">批量切回 <code>main</code> 或 <code>master</code>。</li>
<li class="">批量拉取远端更新。</li>
<li class="">对临时改动做批量 stash。</li>
</ul>
<p>批量操作是逐项执行的，单个项目失败不会让整批直接中断。遇到失败时，先点项目详情看错误，再单独处理那个仓库。</p>
<h2 class="anchor anchorTargetStickyNavbar_Xcgl" id="6-用流程步骤管理需求推进">6. 用流程步骤管理需求推进<a href="https://imber-visual-docs.netlify.app/blog/visual-worktree-product-tour#6-%E7%94%A8%E6%B5%81%E7%A8%8B%E6%AD%A5%E9%AA%A4%E7%AE%A1%E7%90%86%E9%9C%80%E6%B1%82%E6%8E%A8%E8%BF%9B" class="hash-link" aria-label="6. 用流程步骤管理需求推进的直接链接" title="6. 用流程步骤管理需求推进的直接链接" translate="no">​</a></h2>
<p>任务行里的「流程」按钮会打开当前任务的步骤面板。每一步都可以打勾；带命令的步骤还可以直接执行，例如跑测试、构建或自定义脚本。</p>
<p><img decoding="async" loading="lazy" alt="任务流程步骤" src="https://imber-visual-docs.netlify.app/assets/images/05-workflow-steps-491bf03ea073312220b4023658cd24bc.png" width="1440" height="728" class="img_Efyx"></p>
<p>推荐把流程配置成团队真实会做的动作，而不是写得太理想化。比如：</p>
<ul>
<li class="">确认需求范围</li>
<li class="">创建多仓库 worktree</li>
<li class="">开发与联调</li>
<li class="">自测与截图</li>
<li class="">发布前检查</li>
</ul>
<p>这样做的好处是，任务不再只是一堆目录。你能看到它推进到哪一步、还差什么、哪些步骤可以自动执行。对跨仓库需求来说，这比只看 Git 状态更接近真实工作流。</p>
<h2 class="anchor anchorTargetStickyNavbar_Xcgl" id="7-运行环境检查先发现跑不起来的问题">7. 运行环境检查，先发现跑不起来的问题<a href="https://imber-visual-docs.netlify.app/blog/visual-worktree-product-tour#7-%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E6%A3%80%E6%9F%A5%E5%85%88%E5%8F%91%E7%8E%B0%E8%B7%91%E4%B8%8D%E8%B5%B7%E6%9D%A5%E7%9A%84%E9%97%AE%E9%A2%98" class="hash-link" aria-label="7. 运行环境检查，先发现跑不起来的问题的直接链接" title="7. 运行环境检查，先发现跑不起来的问题的直接链接" translate="no">​</a></h2>
<p>点击任务上的环境提示，可以看到环境检查详情。它会按项目列出依赖、端口、外部服务和 Git 状态。</p>
<p><img decoding="async" loading="lazy" alt="环境健康检查" src="https://imber-visual-docs.netlify.app/assets/images/06-env-health-668a25fe6b1bd34731bdd76d444cc908.png" width="1440" height="728" class="img_Efyx"></p>
<p>这张图里，<code>frontend-shell</code> 提示 <code>node_modules 未安装</code>，并给出修复建议 <code>运行 pnpm install</code>。同一个面板里还可以看到端口是否可用、服务是否缺失、是否存在未提交改动。</p>
<p>环境检查适合放在两个时机：</p>
<ul>
<li class=""><strong>刚创建 worktree 后</strong>：确认依赖、端口、服务是否可用。</li>
<li class=""><strong>提测或交接前</strong>：确认任务目录不是只有你本机能跑。</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Xcgl" id="8-用看板做任务巡检">8. 用看板做任务巡检<a href="https://imber-visual-docs.netlify.app/blog/visual-worktree-product-tour#8-%E7%94%A8%E7%9C%8B%E6%9D%BF%E5%81%9A%E4%BB%BB%E5%8A%A1%E5%B7%A1%E6%A3%80" class="hash-link" aria-label="8. 用看板做任务巡检的直接链接" title="8. 用看板做任务巡检的直接链接" translate="no">​</a></h2>
<p>当任务多起来后，列表不一定好扫。看板视图会按状态把任务放到不同列里，适合每天早上看一眼当前有哪些需求待启动、进行中、已完成。</p>
<p><img decoding="async" loading="lazy" alt="任务看板" src="https://imber-visual-docs.netlify.app/assets/images/07-kanban-ee0b32e96e869e0a64226bce8865a253.png" width="1440" height="728" class="img_Efyx"></p>
<p>看板卡片会保留任务名、进度、卡点和风险标签。比如图里的任务进度是 <code>40%</code>，流程完成 <code>2/5</code>，同时还有 <code>有变更 3</code> 的提示。它适合回答：“现在团队或个人手上哪些需求还在推进？哪个卡住了？”</p>
<h2 class="anchor anchorTargetStickyNavbar_Xcgl" id="9-清理后从历史任务找回上下文">9. 清理后从历史任务找回上下文<a href="https://imber-visual-docs.netlify.app/blog/visual-worktree-product-tour#9-%E6%B8%85%E7%90%86%E5%90%8E%E4%BB%8E%E5%8E%86%E5%8F%B2%E4%BB%BB%E5%8A%A1%E6%89%BE%E5%9B%9E%E4%B8%8A%E4%B8%8B%E6%96%87" class="hash-link" aria-label="9. 清理后从历史任务找回上下文的直接链接" title="9. 清理后从历史任务找回上下文的直接链接" translate="no">​</a></h2>
<p>任务完成后，可以清理 worktree 并归档工作文档。清理过的任务会进入「历史任务」，保留任务名、状态、链接和归档路径。</p>
<p><img decoding="async" loading="lazy" alt="历史任务" src="https://imber-visual-docs.netlify.app/assets/images/08-history-a7348e7818e9ba4f6d5f3f7689757d7f.png" width="1440" height="728" class="img_Efyx"></p>
<p>历史任务不是为了让你继续堆积旧目录，而是为了安全收尾：</p>
<ul>
<li class="">任务目录可以删掉，磁盘空间回收。</li>
<li class="">Jira、发布单、工作文档路径还能找回来。</li>
<li class="">后续有人问“上次那个修复在哪”，不需要靠记忆检索。</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Xcgl" id="一条推荐的日常路径">一条推荐的日常路径<a href="https://imber-visual-docs.netlify.app/blog/visual-worktree-product-tour#%E4%B8%80%E6%9D%A1%E6%8E%A8%E8%8D%90%E7%9A%84%E6%97%A5%E5%B8%B8%E8%B7%AF%E5%BE%84" class="hash-link" aria-label="一条推荐的日常路径的直接链接" title="一条推荐的日常路径的直接链接" translate="no">​</a></h2>
<p>如果你刚开始用 Visual Worktree，可以先按这条路径跑：</p>
<ol>
<li class="">设置源项目根目录和 Worktree 根目录。</li>
<li class="">创建一个任务，选择本次需求涉及的多个仓库。</li>
<li class="">展开任务，确认每个 worktree 分支和路径。</li>
<li class="">在项目视图里扫一遍仓库状态。</li>
<li class="">开发中用任务流程记录进度和可执行命令。</li>
<li class="">提测前跑环境检查，把依赖、端口、Git 状态问题处理掉。</li>
<li class="">任务多时用看板巡检状态和卡点。</li>
<li class="">发布后归档文档并清理 worktree，再从历史任务保留上下文。</li>
</ol>
<p>Visual Worktree 不替代 Git，也不替代你的代码编辑器。它更像一个本地任务工作台：Git 继续负责版本控制，VSCode/终端继续负责开发，Visual Worktree 负责把跨仓库需求的状态、路径、流程和风险放到同一个地方。</p>
<p>更多完整能力可以继续看：<a class="" href="https://imber-visual-docs.netlify.app/features">功能总览</a>。首次运行和开发命令见：<a class="" href="https://imber-visual-docs.netlify.app/getting-started">快速开始</a>。</p>]]></content:encoded>
            <category>Electron</category>
            <category>Git</category>
            <category>Worktree</category>
            <category>多仓库开发</category>
        </item>
    </channel>
</rss>