From baef48752f4828d3212c27900808d1f0069143c3 Mon Sep 17 00:00:00 2001
From: geekgeekrun <geekgeekrun>
Date: Mon, 9 Feb 2026 08:38:03 +0800
Subject: [PATCH] enhance side nav ui

---
 .../renderer/src/page/MainLayout/index.vue    | 317 ++++++++++--------
 1 file changed, 171 insertions(+), 146 deletions(-)

diff --git a/packages/ui/src/renderer/src/page/MainLayout/index.vue b/packages/ui/src/renderer/src/page/MainLayout/index.vue
index ad68d0b..b1b7bef 100644
--- a/packages/ui/src/renderer/src/page/MainLayout/index.vue
+++ b/packages/ui/src/renderer/src/page/MainLayout/index.vue
@@ -1,140 +1,155 @@
 <template>
   <div class="flex h100vh">
-    <div class="flex flex-col min-w250px w250px pt30px pl30px aside-nav of-hidden">
+    <div class="flex flex-col min-w200px w200px pt30px pl30px aside-nav of-hidden">
       <div class="nav-list flex-1 of-auto">
         <RouterLink v-show="false" to="./TaskManager">任务管理</RouterLink>
-        <RouterLink to="./GeekAutoStartChatWithBoss">
-          自动开聊
-          <el-tooltip
-            placement="right"
-            :enterable="false"
-            @show="gtagRenderer('tooltip_show_for_nav_boss_b_entry')"
-          >
-            <template #content>
-              <div w-480px>
-                <div>扩列神器！按照你所设置的求职偏好，自动开聊推荐职位列表中的匹配的BOSS。</div>
-                <br />
-                <div>匹配步骤</div>
-                <ol m0 pl2em>
-                  <li>
-                    按照公司名称查找职位，查找到目标职位后，自动点击这个职位，右侧将会展示职位详情
-                  </li>
-                  <li>
-                    检查BOSS活跃度
-                    <ul pl2em>
+        <div class="group-item">
+          <div class="group-title">BOSS直聘</div>
+          <div flex flex-col class="link-list">
+            <RouterLink to="./GeekAutoStartChatWithBoss">
+              自动开聊
+              <el-tooltip
+                placement="right"
+                :enterable="false"
+                @show="gtagRenderer('tooltip_show_for_nav_boss_b_entry')"
+              >
+                <template #content>
+                  <div w-480px>
+                    <div>扩列神器！按照你所设置的求职偏好，自动开聊推荐职位列表中的匹配的BOSS。</div>
+                    <br />
+                    <div>匹配步骤</div>
+                    <ol m0 pl2em>
                       <li>
-                        如果BOSS活跃度为本月活跃或更往前的时间，则会把职位标记为不合适，一段时间内你将不会在BOSS上看到这个职位，且将会推荐新职位置换这个职位
+                        按照公司名称查找职位，查找到目标职位后，自动点击这个职位，右侧将会展示职位详情
+                      </li>
+                      <li>
+                        检查BOSS活跃度
+                        <ul pl2em>
+                          <li>
+                            如果BOSS活跃度为本月活跃或更往前的时间，则会把职位标记为不合适，一段时间内你将不会在BOSS上看到这个职位，且将会推荐新职位置换这个职位
+                          </li>
+                        </ul>
+                      </li>
+                      <li>
+                        对职位名称、职位类型、职位描述进行匹配
+                        <ul pl2em>
+                          <li>如果匹配则自动点击开聊按钮</li>
+                          <li>
+                            不匹配则标记这个职位为不合适，一段时间内你将不会在BOSS上看到这个职位，且将会推荐新职位置换这个职位
+                          </li>
+                        </ul>
+                      </li>
+                    </ol>
+                    <br />
+                    <div>异常情况</div>
+                    <ol m0 pl2em>
+                      <li>
+                        当前页面筛选条件下，如果没有更多职位，则自动切换备选筛选条件，以获取更多新职位
+                      </li>
+                      <li>
+                        如当天开聊次数用完，本程序会暂停运行60分钟，之后尝试继续重新运行；如重新运行时间已在第二天，则将会继续开聊
+                      </li>
+                    </ol>
+                  </div>
+                </template>
+                <QuestionFilled w-1em h-1em mr10px />
+              </el-tooltip>
+            </RouterLink>
+            <RouterLink to="./ReadNoReplyReminder">
+              已读不回自动复聊
+              <el-tooltip
+                placement="right"
+                :enterable="false"
+                @show="gtagRenderer('tooltip_show_for_rnrr_entry')"
+              >
+                <template #content>
+                  <div w-480px>
+                    <div>
+                      BOSS不明原因已读不回？简历就是投不出去？<br />
+                      已读不回自动复聊，提醒一下已读不回的 BOSS，助力把握每次机会
+                    </div>
+                    <br />
+                    <div>匹配逻辑</div>
+                    <div>在聊天列表中查找对你消息已读不回的BOSS，再发一条消息，多次复聊；同时：</div>
+                    <ul m0 pl2em>
+                      <li>如果设置了“跟进时限”，那么在这个时间之前活跃的聊天将不会被检查</li>
+                      <li>
+                        如果设置了“跟进间隔”，且再次检查时发现BOSS已读不回，且距离上次提醒时间间隔小于这个时间，那么聊天将暂时不会跟进，直到下次检查时距离上次提醒时间间隔大于这个时间
                       </li>
                     </ul>
-                  </li>
-                  <li>
-                    对职位名称、职位类型、职位描述进行匹配
-                    <ul pl2em>
-                      <li>如果匹配则自动点击开聊按钮</li>
-                      <li>
-                        不匹配则标记这个职位为不合适，一段时间内你将不会在BOSS上看到这个职位，且将会推荐新职位置换这个职位
-                      </li>
+                    <br />
+                    <div>发送内容</div>
+                    <ul m0 pl2em>
+                      <li>“[盼回复]”表情</li>
+                      <li>由大语言模型（根据简历及当前聊天上下文）生成的内容</li>
                     </ul>
-                  </li>
-                </ol>
-                <br />
-                <div>异常情况</div>
-                <ol m0 pl2em>
-                  <li>
-                    当前页面筛选条件下，如果没有更多职位，则自动切换备选筛选条件，以获取更多新职位
-                  </li>
-                  <li>
-                    如当天开聊次数用完，本程序会暂停运行60分钟，之后尝试继续重新运行；如重新运行时间已在第二天，则将会继续开聊
-                  </li>
-                </ol>
-              </div>
-            </template>
-            <QuestionFilled w-1em h-1em mr10px />
-          </el-tooltip>
-        </RouterLink>
-        <RouterLink to="./ReadNoReplyReminder">
-          已读不回自动复聊
-          <el-tooltip
-            placement="right"
-            :enterable="false"
-            @show="gtagRenderer('tooltip_show_for_rnrr_entry')"
-          >
-            <template #content>
-              <div w-480px>
-                <div>
-                  BOSS不明原因已读不回？简历就是投不出去？<br />
-                  已读不回自动复聊，提醒一下已读不回的 BOSS，助力把握每次机会
-                </div>
-                <br />
-                <div>匹配逻辑</div>
-                <div>在聊天列表中查找对你消息已读不回的BOSS，再发一条消息，多次复聊；同时：</div>
-                <ul m0 pl2em>
-                  <li>如果设置了“跟进时限”，那么在这个时间之前活跃的聊天将不会被检查</li>
-                  <li>
-                    如果设置了“跟进间隔”，且再次检查时发现BOSS已读不回，且距离上次提醒时间间隔小于这个时间，那么聊天将暂时不会跟进，直到下次检查时距离上次提醒时间间隔大于这个时间
-                  </li>
-                </ul>
-                <br />
-                <div>发送内容</div>
-                <ul m0 pl2em>
-                  <li>“[盼回复]”表情</li>
-                  <li>由大语言模型（根据简历及当前聊天上下文）生成的内容</li>
-                </ul>
-              </div>
-            </template>
-            <QuestionFilled w-1em h-1em mr10px />
-          </el-tooltip>
-        </RouterLink>
-        <a href="javascript:void(0)" @click="handleClickLaunchBossLogin">
-          编辑登录凭据<TopRight w-1em h-1em mr10px />
-        </a>
-        <a href="javascript:void(0)" @click="handleLaunchBossSite">
-          手动逛<TopRight w-1em h-1em mr10px />
-        </a>
-        <hr w230px />
-        <a href="javascript:void(0)" @click="handleClickBrowserSetting">
-          编辑浏览器偏好<TopRight w-1em h-1em mr10px />
-        </a>
-        <a href="javascript:void(0)" @click="handleClickConfigLlm">
-          配置大语言模型
-          <div>
-            <el-tooltip
-              placement="right"
-              :enterable="false"
-              @show="gtagRenderer('tooltip_show_for_rnrr_entry')"
-            >
-              <template #content>
-                <div class="font-size-12px">
-                  支持
-                  <span
-                    class="pl6px pr6px pt4px pb2px color-white border-rd-full font-size-0.8em"
-                    style="background-color: #3c4efd"
-                    >DeepSeek-V3</span
-                  >
-                  <span
-                    class="ml4px pl6px pr6px pt4px pb2px color-black border-rd-full font-size-0.8em"
-                    style="background-color: #fff"
-                    >GPT-4o mini</span
-                  >
-                  <span
-                    class="ml4px pl6px pr6px pt4px pb2px color-white border-rd-full font-size-0.8em"
-                    style="background-color: #462ac4"
-                    >Qwen2.5</span
-                  >
-                  模型<br />支持多个“服务商-模型”组合按权重搭配使用
-                </div>
-              </template>
-              <QuestionFilled w-1em h-1em mr10px />
-            </el-tooltip>
-            <TopRight w-1em h-1em mr10px />
+                  </div>
+                </template>
+                <QuestionFilled w-1em h-1em mr10px />
+              </el-tooltip>
+            </RouterLink>
+            <a href="javascript:void(0)" @click="handleClickLaunchBossLogin">
+              编辑登录凭据<TopRight w-1em h-1em mr10px />
+            </a>
+            <a href="javascript:void(0)" @click="handleLaunchBossSite">
+              手动逛<TopRight w-1em h-1em mr10px />
+            </a>
           </div>
-        </a>
-        <hr w230px />
-        <RouterLink to="./StartChatRecord">开聊记录</RouterLink>
-        <RouterLink to="./MarkAsNotSuitRecord">标记不合适记录</RouterLink>
-        <RouterLink to="./JobLibrary">职位库</RouterLink>
-        <RouterLink to="./BossLibrary">BOSS库</RouterLink>
-        <RouterLink to="./CompanyLibrary">公司库</RouterLink>
+        </div>
+        <hr class="group-divider" />
+        <div class="group-item">
+          <div class="group-title">全局设置</div>
+          <div flex flex-col class="link-list">
+            <a href="javascript:void(0)" @click="handleClickBrowserSetting">
+              编辑浏览器偏好<TopRight w-1em h-1em mr10px />
+            </a>
+            <a href="javascript:void(0)" @click="handleClickConfigLlm">
+              配置大语言模型
+              <div>
+                <el-tooltip
+                  placement="right"
+                  :enterable="false"
+                  @show="gtagRenderer('tooltip_show_for_rnrr_entry')"
+                >
+                  <template #content>
+                    <div class="font-size-12px">
+                      支持
+                      <span
+                        class="pl6px pr6px pt4px pb2px color-white border-rd-full font-size-0.8em"
+                        style="background-color: #3c4efd"
+                        >DeepSeek-V3</span
+                      >
+                      <span
+                        class="ml4px pl6px pr6px pt4px pb2px color-black border-rd-full font-size-0.8em"
+                        style="background-color: #fff"
+                        >GPT-4o mini</span
+                      >
+                      <span
+                        class="ml4px pl6px pr6px pt4px pb2px color-white border-rd-full font-size-0.8em"
+                        style="background-color: #462ac4"
+                        >Qwen2.5</span
+                      >
+                      模型<br />支持多个“服务商-模型”组合按权重搭配使用
+                    </div>
+                  </template>
+                  <QuestionFilled w-1em h-1em mr10px />
+                </el-tooltip>
+                <TopRight w-1em h-1em mr10px />
+              </div>
+            </a>
+          </div>
+        </div>
+        <hr class="group-divider" />
+        <div class="group-item">
+          <div class="group-title">运行数据</div>
+          <div flex flex-col class="link-list">
+            <RouterLink to="./StartChatRecord">开聊记录</RouterLink>
+            <RouterLink to="./MarkAsNotSuitRecord">标记不合适记录</RouterLink>
+            <RouterLink to="./JobLibrary">职位库</RouterLink>
+            <RouterLink to="./BossLibrary">BOSS库</RouterLink>
+            <RouterLink to="./CompanyLibrary">公司库</RouterLink>
+          </div>
+        </div>
       </div>
       <div class="pt-16px pb-16px flex-0 font-size-12px">
         <div v-if="updateStore.availableNewRelease" mb16px>
@@ -270,29 +285,39 @@ const handleClickConfigLlm = async () => {
 .aside-nav {
   background-image: linear-gradient(45deg, #eaf4f1, #dcf6f2);
   .nav-list {
-    > a {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      height: 2em;
-      box-sizing: border-box;
-      padding-left: 1.5em;
-      font-size: 14px;
-      &.router-link-active {
-        background-color: #fff;
-        font-weight: 700;
-        color: #2faa9e;
-        border-radius: 9999px 0 0 9999px;
-      }
-    }
-    > hr {
+    hr.group-divider {
+      width: 100%;
       border: 0 solid;
       height: 1px;
       background-color: #b3c8c3;
-      margin-top: 0;
-      margin-bottom: 0;
+      margin-top: 4px;
+      margin-bottom: 4px;
       margin-right: 0;
     }
+    .group-item {
+      .group-title {
+        color: #849492;
+        font-size: 12px;
+        padding: 0.25em 0;
+      }
+      .link-list {
+        a {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 2em;
+          box-sizing: border-box;
+          padding-left: 1em;
+          font-size: 14px;
+          &.router-link-active {
+            background-color: #fff;
+            font-weight: 700;
+            color: #2faa9e;
+            border-radius: 9999px 0 0 9999px;
+          }
+        }
+      }
+    }
   }
   .feedback-button-area,
   .update-button-area {