自动记忆表单面板添加tab切换跳转
This commit is contained in:
@@ -580,6 +580,63 @@ $radius-sm: 12px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.op-cache-modal-body {
|
.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;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 16px 20px;
|
padding: 16px 20px;
|
||||||
|
|||||||
@@ -1133,8 +1133,27 @@ export function SidebarPanel({ sourceUrl, jobInfo, onClose }: SidebarPanelProps)
|
|||||||
{(!cacheModalData || cacheModalData.length === 0) ? (
|
{(!cacheModalData || cacheModalData.length === 0) ? (
|
||||||
<div className="op-cache-modal-empty">暂无缓存数据</div>
|
<div className="op-cache-modal-empty">暂无缓存数据</div>
|
||||||
) : (
|
) : (
|
||||||
cacheModalData.map((section: any, sIdx: number) => (
|
<div className="op-cache-modal-body-inner">
|
||||||
<div key={sIdx} className="op-cache-modal-section">
|
{/* 左侧竖直 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>
|
<div className="op-cache-modal-section-title">{section.title}</div>
|
||||||
{section.isExperience ? (
|
{section.isExperience ? (
|
||||||
// 经历类型:formItems 是二维数组,每段经历分开展示
|
// 经历类型:formItems 是二维数组,每段经历分开展示
|
||||||
@@ -1190,7 +1209,9 @@ export function SidebarPanel({ sourceUrl, jobInfo, onClose }: SidebarPanelProps)
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
))
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="op-cache-modal-footer">
|
<div className="op-cache-modal-footer">
|
||||||
|
|||||||
Reference in New Issue
Block a user