From bc8ef50bd173f57ae5449e18d33af6cf4b443a12 Mon Sep 17 00:00:00 2001
From: xuxin <15279969124@163.com>
Date: Mon, 3 Aug 2026 10:43:01 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=8A=A8=E8=AE=B0=E5=BF=86=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E9=9D=A2=E6=9D=BF=E6=B7=BB=E5=8A=A0tab=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SidebarPanel.scss | 57 ++++++++++++++++++++++++++++++++
 src/components/SidebarPanel.tsx  | 27 +++++++++++++--
 2 files changed, 81 insertions(+), 3 deletions(-)

diff --git a/src/components/SidebarPanel.scss b/src/components/SidebarPanel.scss
index 88a867e..8d746c4 100644
--- a/src/components/SidebarPanel.scss
+++ b/src/components/SidebarPanel.scss
@@ -580,6 +580,63 @@ $radius-sm: 12px;
 }
 
 .op-cache-modal-body {
+  flex: 1;
+  overflow: hidden;
+  padding: 0;
+
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #ddd;
+    border-radius: 3px;
+  }
+}
+
+/* 左右布局容器 */
+.op-cache-modal-body-inner {
+  display: flex;
+  height: 100%;
+}
+
+/* 左侧竖直 tab 导航 */
+.op-cache-modal-tabs {
+  width: 110px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  border-right: 1px solid #f0f0f0;
+  padding: 8px 0;
+  background: #fafafa;
+
+  &::-webkit-scrollbar {
+    width: 3px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #ddd;
+    border-radius: 2px;
+  }
+}
+
+.op-cache-modal-tab {
+  padding: 8px 10px;
+  font-size: 12px;
+  color: #555;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-left: 3px solid transparent;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+
+  &:hover {
+    background: #e8f8f9;
+    color: #333;
+    border-left-color: #52CAD1;
+  }
+}
+
+/* 右侧内容区域 */
+.op-cache-modal-content {
   flex: 1;
   overflow-y: auto;
   padding: 16px 20px;
diff --git a/src/components/SidebarPanel.tsx b/src/components/SidebarPanel.tsx
index 5b0d335..087c115 100644
--- a/src/components/SidebarPanel.tsx
+++ b/src/components/SidebarPanel.tsx
@@ -1133,8 +1133,27 @@ export function SidebarPanel({ sourceUrl, jobInfo, onClose }: SidebarPanelProps)
               {(!cacheModalData || cacheModalData.length === 0) ? (
                 <div className="op-cache-modal-empty">暂无缓存数据</div>
               ) : (
-                cacheModalData.map((section: any, sIdx: number) => (
-                  <div key={sIdx} className="op-cache-modal-section">
+                <div className="op-cache-modal-body-inner">
+                  {/* 左侧竖直 tab 导航 */}
+                  <div className="op-cache-modal-tabs">
+                    {cacheModalData.map((section: any, sIdx: number) => (
+                      <div
+                        key={sIdx}
+                        className="op-cache-modal-tab"
+                        onClick={() => {
+                          const contentEl = containerRef.current?.querySelector(".op-cache-modal-content")
+                          const targetEl = contentEl?.querySelector(`[data-cache-section-idx="${sIdx}"]`)
+                          if (targetEl) targetEl.scrollIntoView({ behavior: "smooth", block: "start" })
+                        }}
+                      >
+                        {section.title}
+                      </div>
+                    ))}
+                  </div>
+                  {/* 右侧内容区域 */}
+                  <div className="op-cache-modal-content">
+                {cacheModalData.map((section: any, sIdx: number) => (
+                  <div key={sIdx} className="op-cache-modal-section" data-cache-section-idx={sIdx}>
                     <div className="op-cache-modal-section-title">{section.title}</div>
                     {section.isExperience ? (
                       // 经历类型：formItems 是二维数组，每段经历分开展示
@@ -1190,7 +1209,9 @@ export function SidebarPanel({ sourceUrl, jobInfo, onClose }: SidebarPanelProps)
                       </div>
                     )}
                   </div>
-                ))
+                ))}
+                  </div>
+                </div>
               )}
             </div>
             <div className="op-cache-modal-footer">