经历部分填写逻辑优化

src/components/SidebarPanel.tsx

@@ -5,15 +5,15 @@
  */
 
 import { useState } from "react"
-import { fillMatchedField, delay } from "~lib/autofill"
+import { fillMatchedField, delay, isSearchPickerField, fillSearchPickerField, isTimePeriodField, isTimeSingleField, fillTimePeriodField, fillTimeSingleField } from "~lib/autofill"
 import { extractDomStructure, detectPageLanguage, isJobApplicationForm } from "~lib/dom"
-import { matchFormFields } from "~lib/formMatcher"
+import { matchFormFields, matchFormFieldsInRange, matchMainFields } from "~lib/formMatcher"
 import { detectPickerField } from "~lib/pickerDetector"
 import { detectAndUploadResume } from "~lib/resumeUpload"
 import { getMockResumeData } from "~lib/constants"
 import { getResumeFieldValue } from "~lib/resumeDataHelper"
-import { locateExperienceSections, expandExperienceSections } from "~lib/experienceSection"
-import type { MatchedFormField, ResumeData } from "~lib/types"
+import { locateExperienceSections, expandExperienceSections, sortExperienceByTime, relocateSegmentContainer } from "~lib/experienceSection"
+import type { MatchedFormField, ResumeData, ExperienceSection } from "~lib/types"
 import "./SidebarPanel.scss"
 
 /** 侧边栏面板的 Props */
@@ -74,50 +74,211 @@ export function SidebarPanel({ onClose }: SidebarPanelProps) {
         const sectionResults = locateExperienceSections(document.body, lang)
         // 4.6 对比简历数据段数，点击添加按钮补足不够的段数
         const expandedResults = await expandExperienceSections(sectionResults, currentResumeData, lang)
-        // TODO: 后续实现步骤：
-        //   5. 对5种经历的标签关系数据做特殊标记（后续完善）
-        //   6. 所有经历段数添加完毕后，再进入统一的字段匹配和填写流程
 
-        // 5. 匹配表单字段
-        const fields = matchFormFields(document.body, lang)
-        console.log(`===== OfferPie: 匹配到 ${fields.length} 个表单字段 =====`)
-
-        // 6. 逐个：检测选择器 → 填充数据 → 立即填写（一个个来，避免多个选择器同时打开）
+        // 5. 经历数据按时间排序 + 经历区域字段匹配与填写（阶段A）
+        console.log("===== OfferPie: 阶段A - 经历区域填写 =====")
+        const usedInputs = new Set<Element>() // 全局已使用的 input 集合
+        const excludeRanges: { start: Element; end: Element | null }[] = [] // 经历区域范围（用于阶段B排除）
         let success = 0, failed = 0, skipped = 0
-        // 记录上一个非 picker 的输入框，用于每次填完后点击它来关闭残留弹窗
         let lastTextInput: HTMLInputElement | HTMLTextAreaElement | null = null
+        let lastTextInputIsPicker = false
 
-        for (const f of fields) {
-          // 从简历数据中获取填写值（根据 section + sectionIndex + resumeField 定位）
-          if (currentResumeData) {
-            const value = getResumeFieldValue(currentResumeData, f.section, f.sectionIndex, f.resumeField)
-            if (value) f.fillValue = value
+        for (const result of expandedResults) {
+          if (!result.titleElement || result.expandedCount === 0) continue
+          const section = result.section as ExperienceSection
+          const sectionData = currentResumeData[section] as { startDate?: string; endDate?: string }[]
+          if (!sectionData || sectionData.length === 0) continue
+
+          // 5.1 对该经历数据按时间排序（最新的在前面）
+          const sortedIndices = sortExperienceByTime(sectionData)
+          console.log(`  [${section}] 排序后索引: [${sortedIndices.join(",")}]`)
+
+          // 5.2 记录经历区域范围（用于阶段B排除）
+          // 范围：从该经历大标题到下一个大标题
+          const titleEl = result.titleElement
+          // 找下一个大标题作为范围结束
+          const allTitles = expandedResults.filter((r) => r.titleElement)
+          const currentIdx = allTitles.findIndex((r) => r.titleElement === titleEl)
+          const nextResult = currentIdx >= 0 && currentIdx < allTitles.length - 1 ? allTitles[currentIdx + 1] : null
+          excludeRanges.push({ start: titleEl, end: nextResult?.titleElement || null })
+
+          // 5.3 逐段匹配并填写
+          const segments = result.segmentRanges
+          const fillCount = Math.min(sortedIndices.length, segments.length)
+
+          for (let segIdx = 0; segIdx < fillCount; segIdx++) {
+            const dataIdx = sortedIndices[segIdx] // 排序后对应的简历数据索引
+            const segment = segments[segIdx]
+
+            // 确定该段经历的 DOM 搜索范围
+            // 起始：该段的 startElement（第一个输入框前的标签）
+            const segStartEl = segment.startElement
+            // 结束：下一段的 startElement，或下一个大标题
+            const nextSegment = segIdx < segments.length - 1 ? segments[segIdx + 1] : null
+            const segEndEl = nextSegment?.startElement || nextResult?.titleElement || null
+
+            // 在该段范围内匹配字段
+            const segFields = matchFormFieldsInRange(lang, section, dataIdx, segStartEl, segEndEl, usedInputs, segment.containerElement)
+            console.log(`  [${section}] 第${segIdx + 1}段（数据索引${dataIdx}）匹配到 ${segFields.length} 个字段`)
+
+            // 逐个填写
+            for (let fIdx = 0; fIdx < segFields.length; fIdx++) {
+              let f = segFields[fIdx]
+              const value = getResumeFieldValue(currentResumeData, f.section, dataIdx, f.resumeField)
+              if (value) f.fillValue = value
+
+              // 【核心】如果 input 已脱离 DOM（React 重新渲染导致），用 locator 重新定位
+              if (f.inputElement && !f.inputElement.isConnected) {
+                console.log(`  [重新定位] "${f.labelText}" input 已脱离DOM (isConnected=false)`)
+                
+                // 用 locator 重新获取容器
+                let activeContainer: Element | null = null
+                if (segment.locator) {
+                  activeContainer = relocateSegmentContainer(segment.locator)
+                }
+
+                if (activeContainer) {
+                  // 在重新定位的容器内，用 placeholder 找到对应的 input
+                  // 【注意】排除已有值的 input（说明已被填过，可能是其他段重新渲染后的残留）
+                  const freshInputs = activeContainer.querySelectorAll(
+                    "input:not([type='hidden']):not([type='submit']):not([type='button']):not([type='checkbox']):not([type='radio']):not([type='file']):not([disabled]), textarea:not([disabled])"
+                  )
+                  const ph = f.inputElement.getAttribute("placeholder") || ""
+                  let found: HTMLInputElement | HTMLTextAreaElement | null = null
+                  for (const inp of Array.from(freshInputs)) {
+                    const inputEl = inp as HTMLInputElement | HTMLTextAreaElement
+                    if (usedInputs.has(inp)) continue
+                    // 跳过已有值的 input（已被填过）
+                    if (inputEl.value && inputEl.value.length > 0) continue
+                    if (inp.getAttribute("placeholder") === ph) {
+                      found = inputEl
+                      break
+                    }
+                  }
+                  if (found) {
+                    f.inputElement = found
+                    usedInputs.add(found)
+                    console.log(`  [重新定位] "${f.labelText}" ✅ 已通过 locator 重新定位 (placeholder="${ph}")`)
+                  } else {
+                    console.log(`  [重新定位] "${f.labelText}" ❌ 容器内未找到 placeholder="${ph}" 的空 input`)
+                  }
+                } else {
+                  console.log(`  [重新定位] "${f.labelText}" ❌ locator 重新定位容器失败`)
+                }
+              }
+
+              // 【补充】如果 labelElement 也脱离了 DOM（React 重新渲染导致），重新定位
+              // 这对于没有 input 的纯 div 选择器（如 Ant Design Select）尤其重要
+              // 因为 fillMatchedField 的 picker 无 input 逻辑需要点击 labelElement
+              if (f.labelElement && !f.labelElement.isConnected && segment.locator) {
+                const activeContainer = relocateSegmentContainer(segment.locator)
+                if (activeContainer) {
+                  // 在容器内用标签文字重新找到对应的标签元素
+                  const allLabels = activeContainer.querySelectorAll("label, span, div, td, th, p, legend, dt")
+                  for (const el of Array.from(allLabels)) {
+                    const directText = Array.from(el.childNodes)
+                      .filter((n) => n.nodeType === Node.TEXT_NODE)
+                      .map((n) => n.textContent?.trim())
+                      .filter(Boolean)
+                      .join("")
+                    if (directText && directText.includes(f.labelText) && directText.length < f.labelText.length + 20) {
+                      f.labelElement = el
+                      console.log(`  [重新定位] "${f.labelText}" labelElement ✅ 已重新定位`)
+                      break
+                    }
+                  }
+                }
+              }
+
+              // 时间段字段不需要 fillValue（它直接从简历数据取 startDate 和 endDate）
+              if (isTimePeriodField(f.key)) {
+                const startDateVal = getResumeFieldValue(currentResumeData, f.section, dataIdx, "startDate")
+                const endDateVal = getResumeFieldValue(currentResumeData, f.section, dataIdx, "endDate")
+                let ok = await fillTimePeriodField(f, startDateVal, endDateVal, usedInputs)
+                if (!ok) {
+                  // fallback 到集成式时间选择器
+                  f.fillValue = startDateVal // 用开始时间作为 fillValue
+                  await detectPickerField(f, lang)
+                  ok = await fillMatchedField(f)
+                }
+                if (ok) { success++ } else { failed++ }
+              } else if (isTimeSingleField(f.key)) {
+                if (!f.fillValue) { skipped++; continue }
+                let ok = await fillTimeSingleField(f, f.fillValue, usedInputs)
+                if (!ok) {
+                  await detectPickerField(f, lang)
+                  ok = await fillMatchedField(f)
+                }
+                if (ok) { success++ } else { failed++ }
+              } else if (!f.fillValue) {
+                skipped++; continue
+              } else if (isSearchPickerField(f.key)) {
+                const ok = await fillSearchPickerField(f)
+                if (ok) { success++ } else { failed++ }
+                // 搜索选择器内部已处理关闭弹窗，跳过外部关闭逻辑
+                await delay(200)
+                continue
+              } else {
+                await detectPickerField(f, lang)
+                const ok = await fillMatchedField(f)
+                if (ok) { success++ } else { failed++ }
+              }
+
+              // 关闭残留弹窗（只点击纯文本输入框，不点击选择器类型的 input）
+              if (lastTextInput && !lastTextInputIsPicker) {
+                ;(lastTextInput as HTMLElement).click()
+                lastTextInput.focus()
+                await delay(100)
+                lastTextInput.blur()
+              } else {
+                if (document.activeElement instanceof HTMLElement) {
+                  document.activeElement.dispatchEvent(
+                    new KeyboardEvent("keydown", { key: "Escape", code: "Escape", keyCode: 27, bubbles: true })
+                  )
+                  document.activeElement.blur()
+                }
+                document.body.click()
+              }
+              await delay(300)
+
+              if (!f.isPicker && f.inputElement && !isTimePeriodField(f.key) && !isTimeSingleField(f.key)) {
+                lastTextInput = f.inputElement
+                lastTextInputIsPicker = false
+              } else {
+                lastTextInputIsPicker = true
+              }
+            }
           }
+        }
+        console.log(`===== OfferPie: 阶段A完成 成功${success} 失败${failed} 跳过${skipped} =====`)
+
+        // 6. 非经历区域字段匹配与填写（阶段B）
+        console.log("===== OfferPie: 阶段B - 非经历区域填写 =====")
+        const mainFields = matchMainFields(document.body, lang, excludeRanges, usedInputs)
+        console.log(`  匹配到 ${mainFields.length} 个非经历字段`)
+
+        for (const f of mainFields) {
+          const value = getResumeFieldValue(currentResumeData, f.section, f.sectionIndex, f.resumeField)
+          if (value) f.fillValue = value
           if (!f.fillValue) { skipped++; continue }
 
-          // 检测选择器类型（会点击展开再关闭）
           await detectPickerField(f, lang)
 
           console.log(
-            `  [${f.key}] "${f.labelText}" → input: ${f.inputSelector || "未找到"}` +
-            ` | type: ${f.inputType}` +
+            `  [${f.key}] "${f.labelText}" → type: ${f.inputType}` +
             ` | isPicker: ${f.isPicker}` +
-            ` | pickerSelector: ${f.pickerDropdownSelector || "无"}` +
             ` | fillValue: "${f.fillValue}"`
           )
 
-          // 立即填写这个字段
           const ok = await fillMatchedField(f)
           if (ok) { success++ } else { failed++ }
 
-          // 每个字段填完后，点击上一个非 picker 输入框来关闭残留弹窗
           if (lastTextInput) {
             ;(lastTextInput as HTMLElement).click()
             lastTextInput.focus()
             await delay(100)
             lastTextInput.blur()
           } else {
-            // 兜底：只按 Escape 关闭弹窗，不点击任何元素（避免误触链接导致页面跳转）
             if (document.activeElement instanceof HTMLElement) {
               document.activeElement.dispatchEvent(
                 new KeyboardEvent("keydown", { key: "Escape", code: "Escape", keyCode: 27, bubbles: true })
@@ -128,14 +289,11 @@ export function SidebarPanel({ onClose }: SidebarPanelProps) {
           }
           await delay(300)
 
-          // 更新上一个非 picker 输入框的记录
-          if (!f.isPicker && f.inputElement) {
-            lastTextInput = f.inputElement
-          }
+          if (!f.isPicker && f.inputElement) lastTextInput = f.inputElement
         }
 
-        setFormFields(fields)
-        console.log(`===== OfferPie: 填写结果 成功${success} 失败${failed} 跳过${skipped} =====`)
+        setFormFields([...mainFields])
+        console.log(`===== OfferPie: 阶段B完成 总计成功${success} 失败${failed} 跳过${skipped} =====`)
       } else {
         setFormFields([])
         console.log("===== OfferPie: 当前页面不是职位申请表单，跳过字段匹配 =====")
@@ -151,7 +309,7 @@ export function SidebarPanel({ onClose }: SidebarPanelProps) {
     <div className="op-container">
       {/* 顶部操作栏：反馈、设置、关闭按钮 */}
       <div className="op-header">
-        <span className="op-header-link">反馈5</span>
+        <span className="op-header-link">反馈123456789</span>
         <span className="op-header-link">设置</span>
         {/* 关闭按钮：点击后隐藏侧边栏 */}
         <button className="op-close-btn" onClick={onClose}>