1375 lines
61 KiB
TypeScript
1375 lines
61 KiB
TypeScript
/**
|
||
* 侧边栏面板组件
|
||
* 插件的主操作界面，固定在浏览器右上角
|
||
* 包含：职位信息卡片、自动填写按钮、简历管理、填写进度等功能区域
|
||
*/
|
||
|
||
import { useState, useEffect, useRef, useCallback } from "react"
|
||
import { getCookieValue } from "~utils/cookie"
|
||
import { get as storageGet, set as storageSet, remove as storageRemove } from "~utils/storage"
|
||
import { getCustomizeResume } from "~api/aiApi"
|
||
import { getMemberStatus, preloadRegionTree } from "~api/dataApi"
|
||
import { handleAutoFillCommon } from "~handlers/handleAutoFillCommon"
|
||
import { handleAutoFillBeisen } from "~handlers/handleAutoFillBeisen"
|
||
import { handleAutoFillMoka } from "~handlers/handleAutoFillMoka"
|
||
import { handleAutoFillFeishu } from "~handlers/handleAutoFillFeishu"
|
||
import { handleAutoFillHotjob } from "~handlers/handleAutoFillHotjob"
|
||
import { scanPageFields, extractNonResumeFields, printFieldStats, collectPickerOptionTexts, getPickerDisplayValue } from "~lib/fillStats"
|
||
import type { TitleStat } from "~lib/fillStats"
|
||
import type { MatchedFormField, ResumeData, JobInfo } from "~lib/types"
|
||
import { createChannelBridge } from "~lib/channelBridge"
|
||
import { buildResumeExcludeTexts } from "~lib/resumeDataHelper"
|
||
import logoImg from "data-base64:~/../assets/logo-offerpai.png"
|
||
import { config as appConfig } from "~config"
|
||
import "./SidebarPanel.scss"
|
||
|
||
/** 投递链接列表数据类型（跨域通信用） */
|
||
interface OfferpaieDeliveryLinkListData {
|
||
linkList: string[]
|
||
}
|
||
|
||
/** 创建通信桥接实例（用于投递链接列表的跨域读写） */
|
||
const panelBridge = createChannelBridge({ domain: appConfig.bridgeDomain, isPlugin: true })
|
||
|
||
/** 侧边栏面板的 Props */
|
||
interface SidebarPanelProps {
|
||
/** 当前标签页的来源链接 */
|
||
sourceUrl: string
|
||
/** 岗位信息（由 sidebar 层查询后传入） */
|
||
jobInfo: JobInfo | null
|
||
/** 关闭面板的回调函数 */
|
||
onClose: () => void
|
||
}
|
||
|
||
export function SidebarPanel({ sourceUrl, jobInfo, onClose }: SidebarPanelProps) {
|
||
/** 是否已登录（有 Token） */
|
||
const [isLoggedIn, setIsLoggedIn] = useState<boolean | null>(null)
|
||
/** 是否为会员（null=未检测，true=会员，false=非会员） */
|
||
const [isMember, setIsMember] = useState<boolean | null>(null)
|
||
/** 是否正在执行自动填写 */
|
||
const [filling, setFilling] = useState(false)
|
||
/** 页面语言类型：中文 / 英文 */
|
||
const [pageLang, setPageLang] = useState<"zh" | "en">("zh")
|
||
/** 是否为职位申请表单页面 */
|
||
const [isFormPage, setIsFormPage] = useState(false)
|
||
/** 匹配到的表单字段列表 */
|
||
const [formFields, setFormFields] = useState<MatchedFormField[]>([])
|
||
/** 当前使用的简历数据 */
|
||
const [resumeData, setResumeData] = useState<ResumeData | null>(null)
|
||
/** 自动填写流程是否已完成（控制模拟提交按钮可用） */
|
||
const [fillCompleted, setFillCompleted] = useState(false)
|
||
/** 页面字段扫描统计结果（用于面板底部展示已填/待填字段列表） */
|
||
const [fieldStats, setFieldStats] = useState<TitleStat[]>([])
|
||
/** 顶部状态文字 */
|
||
const [headerStatus, setHeaderStatus] = useState<string>("准备中, 请登录到投递表单页~")
|
||
|
||
/** 是否启用字段更新时自动滚动到该字段，模拟跟踪（常量开关，方便调试关闭） */
|
||
const ENABLE_AUTO_SCROLL_TO_UPDATED = true
|
||
|
||
/** 循环扫描定时器引用 */
|
||
const scanIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
|
||
/** 上一次扫描结果快照（用于对比哪些字段刚刚更新） */
|
||
const prevFieldSnapshotRef = useRef<Map<Element, string>>(new Map())
|
||
/** 字段列表容器 ref（用于滚动） */
|
||
const fieldListRef = useRef<HTMLDivElement | null>(null)
|
||
/** 最新一次更新的字段 inputElement（用于定位滚动目标） */
|
||
const [lastUpdatedFieldEl, setLastUpdatedFieldEl] = useState<Element | null>(null)
|
||
/** 是否显示"助手已记住的表单"弹窗 */
|
||
const [showCacheModal, setShowCacheModal] = useState(false)
|
||
/** 弹窗中编辑的表单数据（从 localStorage 读取后在弹窗内编辑） */
|
||
const [cacheModalData, setCacheModalData] = useState<any[] | null>(null)
|
||
|
||
/** 面板是否收起（收起时只显示 logo 圆圈） */
|
||
const [collapsed, setCollapsed] = useState(false)
|
||
/** 拖拽位置偏移量（相对于初始位置） */
|
||
const [dragOffset, setDragOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 })
|
||
/** 是否已经被拖动过（用于判断是否显示拖拽提示气泡） */
|
||
const [hasDragged, setHasDragged] = useState(false)
|
||
/** 拖拽提示：收起状态已提示过 */
|
||
const collapsedTooltipShownRef = useRef(false)
|
||
/** 拖拽提示：展开状态已提示过 */
|
||
const expandedTooltipShownRef = useRef(false)
|
||
/** 是否正在显示拖拽提示气泡 */
|
||
const [showDragTooltip, setShowDragTooltip] = useState(false)
|
||
/** 拖拽提示气泡定时器 */
|
||
const dragTooltipTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||
/** 面板容器 ref（用于拖拽） */
|
||
const containerRef = useRef<HTMLDivElement | null>(null)
|
||
/** 拖拽状态 ref */
|
||
const dragStateRef = useRef<{ isDragging: boolean; startX: number; startY: number; startOffsetX: number; startOffsetY: number; longPressTimer: ReturnType<typeof setTimeout> | null; isLongPress: boolean }>({
|
||
isDragging: false, startX: 0, startY: 0, startOffsetX: 0, startOffsetY: 0, longPressTimer: null, isLongPress: false
|
||
})
|
||
|
||
/** 选择器选项文字缓存（collectPickerOptionTexts 收集后存入，handleSaveUserInput 用于排除） */
|
||
const pickerOptionTextsRef = useRef<Set<string>>(new Set())
|
||
|
||
/** 停止当前循环扫描 */
|
||
const stopScanLoop = () => {
|
||
if (scanIntervalRef.current) {
|
||
clearInterval(scanIntervalRef.current)
|
||
scanIntervalRef.current = null
|
||
}
|
||
}
|
||
|
||
/** 对比前后快照，找出刚刚变为已填写的字段 */
|
||
const findUpdatedField = (newStats: TitleStat[]): Element | null => {
|
||
const prevMap = prevFieldSnapshotRef.current
|
||
let updatedEl: Element | null = null
|
||
const newMap = new Map<Element, string>()
|
||
|
||
for (const ts of newStats) {
|
||
for (const f of ts.fields) {
|
||
if (!f.inputElement) continue
|
||
const newColor = f.color
|
||
newMap.set(f.inputElement, newColor)
|
||
const prevColor = prevMap.get(f.inputElement)
|
||
// 从非绿变成绿/greenTwo → 刚刚被填写（取最后一个变化的）
|
||
if (prevColor && prevColor !== "green" && prevColor !== "greenTwo" && (newColor === "green" || newColor === "greenTwo")) {
|
||
updatedEl = f.inputElement
|
||
}
|
||
}
|
||
}
|
||
|
||
prevFieldSnapshotRef.current = newMap
|
||
return updatedEl
|
||
}
|
||
|
||
/** 开启循环扫描（每秒执行一次） */
|
||
const startScanLoop = (params: { siteMode?: "beisen" | "moka" | "feishu" | "hotjob"; sectionResults?: any[]; expandedResults?: any[]; excludeTexts?: Set<string> }) => {
|
||
stopScanLoop()
|
||
const hasFullData = !!(params.sectionResults && params.expandedResults)
|
||
|
||
/**
|
||
* 同步构建排除集合：合并 params.excludeTexts + 当前 resumeData 中的所有值
|
||
* 避免将已填入表单的简历值（如"汉族"、"广州"等）误认为表单标签
|
||
*/
|
||
const buildExcludeTexts = (): Set<string> => {
|
||
const baseSet = buildResumeExcludeTexts(resumeData)
|
||
// 合并外部传入的静态排除集合（第二次调用时由 fillResult.resumeData 构建）
|
||
if (params.excludeTexts) {
|
||
for (const t of params.excludeTexts) baseSet.add(t)
|
||
}
|
||
return baseSet
|
||
}
|
||
|
||
/**
|
||
* 补充选择器展示值：遍历已识别字段，对 value 为空的字段调用 getPickerDisplayValue
|
||
* 从 DOM 中提取展示文字与已收集的弹出层选项比对，匹配成功则更新字段 value
|
||
*/
|
||
const fillPickerDisplayValues = (fieldStats: TitleStat[]) => {
|
||
const options = pickerOptionTextsRef.current
|
||
if (options.size === 0) return
|
||
// 北森模式（zhiye.com）的选择器值直接写在输入框里，不需要额外提取展示值
|
||
if (window.location.hostname.includes("zhiye.com")) return
|
||
for (const ts of fieldStats) {
|
||
for (let fIdx = 0; fIdx < ts.fields.length; fIdx++) {
|
||
const f = ts.fields[fIdx]
|
||
// 已有值的跳过
|
||
if (f.value) continue
|
||
if (!f.inputElement) continue
|
||
const inputEl = f.inputElement as HTMLElement
|
||
// input.value 有值的跳过
|
||
if ((inputEl as HTMLInputElement).value?.trim()) continue
|
||
// 找同大标题内下一个字段的标签文字作为边界
|
||
const nextField = ts.fields[fIdx + 1]
|
||
const nextLabelText = nextField?.labelText || null
|
||
// 调用 getPickerDisplayValue 比对
|
||
const displayVal = getPickerDisplayValue(inputEl, f.labelText, nextLabelText, options)
|
||
if (displayVal) {
|
||
f.value = displayVal
|
||
f.filled = true
|
||
f.color = "green"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 立即执行一次
|
||
const stats = scanPageFields({ ...params, excludeTexts: buildExcludeTexts() })
|
||
// 补充选择器展示值：对 value 为空的字段，从 DOM 中提取展示文字与选项比对
|
||
fillPickerDisplayValues(stats)
|
||
setFieldStats(stats)
|
||
findUpdatedField(stats) // 初始化快照，不滚动
|
||
if (hasFullData) handleSaveUserInput()
|
||
// 每秒循环
|
||
scanIntervalRef.current = setInterval(() => {
|
||
const s = scanPageFields({ ...params, excludeTexts: buildExcludeTexts() })
|
||
// 补充选择器展示值
|
||
fillPickerDisplayValues(s)
|
||
setFieldStats(s)
|
||
if (ENABLE_AUTO_SCROLL_TO_UPDATED) {
|
||
const updatedEl = findUpdatedField(s)
|
||
if (updatedEl) setLastUpdatedFieldEl(updatedEl)
|
||
}
|
||
if (hasFullData) handleSaveUserInput()
|
||
}, 1000)
|
||
}
|
||
|
||
/** 组件卸载时清理定时器 */
|
||
useEffect(() => {
|
||
return () => { stopScanLoop() }
|
||
}, [])
|
||
|
||
/** 页面加载 & SPA 路由变化时检测是否有足够的输入框，显示"准备就绪" */
|
||
useEffect(() => {
|
||
const hostDoc = document.getRootNode() === document ? document : (document.getRootNode() as ShadowRoot).ownerDocument
|
||
|
||
/** 检测页面是否有足够的表单输入框 */
|
||
const checkInputs = () => {
|
||
const inputs = hostDoc.querySelectorAll("input:not([type='hidden']):not([type='submit']):not([type='button']):not([type='file']), textarea")
|
||
if (inputs.length > 2) {
|
||
setHeaderStatus("准备就绪，请点击开始填写")
|
||
return true
|
||
}
|
||
return false
|
||
}
|
||
|
||
/** 路由变化后延迟多次重试检测（等待新页面 DOM 渲染） */
|
||
const timers: ReturnType<typeof setTimeout>[] = []
|
||
const scheduleCheck = () => {
|
||
setHeaderStatus("准备中, 请登录到投递表单页~")
|
||
if (checkInputs()) return
|
||
timers.push(setTimeout(checkInputs, 500))
|
||
timers.push(setTimeout(checkInputs, 1500))
|
||
timers.push(setTimeout(checkInputs, 3000))
|
||
timers.push(setTimeout(checkInputs, 5000))
|
||
}
|
||
|
||
// 初次挂载时检测
|
||
scheduleCheck()
|
||
|
||
// URL 轮询：每秒检查一次 URL 是否变化（兼容所有 SPA 路由方式）
|
||
let lastUrl = window.location.href
|
||
const urlPollInterval = setInterval(() => {
|
||
const currentUrl = window.location.href
|
||
if (currentUrl !== lastUrl) {
|
||
lastUrl = currentUrl
|
||
console.log("[OfferPie] 检测到 URL 变化:", currentUrl)
|
||
scheduleCheck()
|
||
}
|
||
}, 1000)
|
||
|
||
return () => {
|
||
clearInterval(urlPollInterval)
|
||
timers.forEach(clearTimeout)
|
||
}
|
||
}, [])
|
||
|
||
/** 字段更新时自动滚动字段列表到对应项 */
|
||
useEffect(() => {
|
||
if (!ENABLE_AUTO_SCROLL_TO_UPDATED || !lastUpdatedFieldEl || !fieldListRef.current) return
|
||
// 计算该字段在渲染中的全局索引（按渲染顺序：按大标题 → 按段 → 按字段）
|
||
let globalIdx = 0
|
||
let targetIdx = -1
|
||
for (const ts of fieldStats) {
|
||
if (ts.fields.length === 0) continue
|
||
if (ts.isExpType && ts.segmentCount > 1) {
|
||
for (let sIdx = 0; sIdx < ts.segmentCount; sIdx++) {
|
||
const segFields = ts.fields.filter((f) => f.segmentIndex === sIdx)
|
||
for (const f of segFields) {
|
||
if (f.inputElement === lastUpdatedFieldEl) { targetIdx = globalIdx }
|
||
globalIdx++
|
||
}
|
||
}
|
||
} else {
|
||
for (const f of ts.fields) {
|
||
if (f.inputElement === lastUpdatedFieldEl) { targetIdx = globalIdx }
|
||
globalIdx++
|
||
}
|
||
}
|
||
if (targetIdx >= 0) break
|
||
}
|
||
if (targetIdx >= 0) {
|
||
const targetItem = fieldListRef.current.querySelector(`[data-field-idx="${targetIdx}"]`)
|
||
if (targetItem) {
|
||
// 滚动到居中位置再往上偏移30px，让下一个字段更接近视口中心（模拟实时跟踪效果）
|
||
const container = fieldListRef.current
|
||
const itemRect = targetItem.getBoundingClientRect()
|
||
const containerRect = container.getBoundingClientRect()
|
||
const offsetTop = itemRect.top - containerRect.top + container.scrollTop
|
||
const targetScroll = offsetTop - container.clientHeight / 2 + itemRect.height / 2 + 50
|
||
container.scrollTo({ top: Math.max(0, targetScroll), behavior: "smooth" })
|
||
}
|
||
}
|
||
setLastUpdatedFieldEl(null)
|
||
}, [lastUpdatedFieldEl])
|
||
|
||
/** 页面加载时检查 Token，有岗位信息则查询定制简历，并检查会员状态 */
|
||
useEffect(() => {
|
||
getCookieValue("Token").then((token) => {
|
||
console.log("[OfferPie] SidebarPanel 获取到的 Token:", token)
|
||
setIsLoggedIn(!!token)
|
||
|
||
if (!token) {
|
||
setHeaderStatus("请登录后继续使用")
|
||
return
|
||
}
|
||
|
||
// 预加载省市区行政区划数据（供摩卡级联选择器使用）
|
||
preloadRegionTree()
|
||
|
||
// 查询会员状态
|
||
getMemberStatus().then((memberData) => {
|
||
console.log("[OfferPie] 会员状态:", memberData)
|
||
setIsMember(memberData.isMember)
|
||
if (!memberData.isMember) {
|
||
setHeaderStatus("请开通会员后继续使用")
|
||
}
|
||
}).catch((err) => {
|
||
console.warn("[OfferPie] 查询会员状态失败:", err)
|
||
setIsMember(false)
|
||
setHeaderStatus("请开通会员后继续使用")
|
||
})
|
||
|
||
// 有岗位 ID 时，查询定制简历
|
||
if (jobInfo?.id) {
|
||
getCustomizeResume(jobInfo.id).then((resumeRes: any) => {
|
||
console.log("[OfferPie] 定制简历数据:", resumeRes)
|
||
// 接口返回的 resume 字段映射为 main
|
||
const mappedData: ResumeData = {
|
||
main: resumeRes.resume || {},
|
||
education: resumeRes.education || [],
|
||
work: resumeRes.work || [],
|
||
internship: resumeRes.internship || [],
|
||
project: resumeRes.project || [],
|
||
competition: resumeRes.competition || [],
|
||
}
|
||
setResumeData(mappedData)
|
||
}).catch((err) => {
|
||
console.warn("[OfferPie] 查询定制简历失败:", err)
|
||
})
|
||
}
|
||
})
|
||
}, [jobInfo?.id])
|
||
|
||
/**
|
||
* 自动填写按钮点击处理
|
||
* 内部根据当前页面域名判断走哪个处理模式：
|
||
* - handleAutoFillBeisen：北森模式（域名包含 zhiye.com，如 avicsz.zhiye.com）
|
||
* - handleAutoFillCommon：通用模式（其他所有网站）
|
||
* - 后续特殊网站会在此处加条件分支（如根据 domain 或 jobInfo 来源判断）
|
||
*/
|
||
/** 显示全页面填写遮罩层（黑色半透明 + 提示文字 + 闪烁圆点动画） */
|
||
function showFillingOverlay() {
|
||
// 防止重复创建
|
||
if (document.getElementById("offerpie-filling-overlay")) return
|
||
|
||
const overlay = document.createElement("div")
|
||
overlay.id = "offerpie-filling-overlay"
|
||
Object.assign(overlay.style, {
|
||
position: "fixed",
|
||
top: "0",
|
||
left: "0",
|
||
width: "100vw",
|
||
height: "100vh",
|
||
backgroundColor: "rgba(0, 0, 0, 0.05)",
|
||
zIndex: "2147483646",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
pointerEvents: "auto",
|
||
})
|
||
|
||
// 提示文字容器
|
||
const content = document.createElement("div")
|
||
Object.assign(content.style, {
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "4px",
|
||
userSelect: "none",
|
||
})
|
||
|
||
// 文字
|
||
const text = document.createElement("span")
|
||
text.textContent = "填写中..."
|
||
Object.assign(text.style, {
|
||
color: "rgba(255,255,255, 1)",
|
||
background:"rgba(107, 114, 128, 0.5)",
|
||
height:"40px",
|
||
"line-height":"40px",
|
||
width:"370px",
|
||
"text-align":"center",
|
||
"border-radius":"4px",
|
||
fontSize: "18px",
|
||
fontWeight: "500",
|
||
letterSpacing: "1px",
|
||
})
|
||
content.appendChild(text)
|
||
|
||
// 5个按顺序消失闪烁的圆点
|
||
for (let i = 0; i < 5; i++) {
|
||
const dot = document.createElement("span")
|
||
Object.assign(dot.style, {
|
||
display: "inline-block",
|
||
width: "6px",
|
||
height: "6px",
|
||
borderRadius: "50%",
|
||
backgroundColor: "rgba(82, 202, 209, 0.3)",
|
||
marginLeft: i === 0 ? "6px" : "3px",
|
||
animation: `offerpie-dot-blink 1.5s ${i * 0.3}s infinite`,
|
||
})
|
||
content.appendChild(dot)
|
||
}
|
||
|
||
overlay.appendChild(content)
|
||
|
||
// 注入关键帧动画样式（按顺序消失闪烁）
|
||
if (!document.getElementById("offerpie-dot-style")) {
|
||
const style = document.createElement("style")
|
||
style.id = "offerpie-dot-style"
|
||
style.textContent = `
|
||
@keyframes offerpie-dot-blink {
|
||
0%, 20% { opacity: 1; }
|
||
40%, 100% { opacity: 0; }
|
||
}
|
||
`
|
||
document.head.appendChild(style)
|
||
}
|
||
|
||
document.body.appendChild(overlay)
|
||
}
|
||
|
||
/** 移除全页面填写遮罩层（先显示完成提示，2秒后再移除） */
|
||
function hideFillingOverlay() {
|
||
const overlay = document.getElementById("offerpie-filling-overlay")
|
||
if (!overlay) return
|
||
// 找到提示文字元素，更新为完成状态
|
||
const text = overlay.querySelector("span") as HTMLElement | null
|
||
if (text) {
|
||
text.textContent = "填写完成，请检查"
|
||
text.style.background = "rgba(118, 213, 132, 0.5)"
|
||
}
|
||
// 隐藏闪烁圆点
|
||
const dots = overlay.querySelectorAll("span:not(:first-child)")
|
||
dots.forEach((dot) => {
|
||
;(dot as HTMLElement).style.display = "none"
|
||
})
|
||
// 2秒后移除遮罩层
|
||
setTimeout(() => {
|
||
overlay.remove()
|
||
}, 2000)
|
||
}
|
||
|
||
/**
|
||
* 自动填写入口
|
||
* 根据当前页面域名分发到不同的处理器：
|
||
* - 北森系统（zhiye.com）→ handleAutoFillBeisen：适配北森 Phoenix UI 组件库的特殊 DOM 结构
|
||
* - 其他招聘网站 → handleAutoFillCommon：通用模式，基于 DOM 差异对比适配各种 UI 框架
|
||
*
|
||
* 两个处理器内部流程一致：
|
||
* 1. extractDomStructure 提取页面 DOM 树结构
|
||
* 2. detectPageLanguage 检测中/英文
|
||
* 3. isJobApplicationForm 判断是否为求职表单页（非表单页直接跳过）
|
||
* 4. 获取简历数据（接口优先，无接口时 fallback 到 mock 数据）
|
||
* 5. locateExperienceSections 定位5大经历区块（教育/工作/实习/项目/竞赛）
|
||
* 6. expandExperienceSections 对比简历段数，点击添加按钮补足经历段
|
||
* 7. 逐段匹配字段 + 填充（走 fillMatchedField 统一入口）
|
||
* 8. matchMainFields 匹配非经历区域字段（姓名/手机/邮箱等）并填充
|
||
* 9. 收集剩余未匹配的空白字段（unmatchedFields），后续交给 AI 生成答案
|
||
*
|
||
/** 重置按钮：恢复到开始填写状态，重新检测页面 */
|
||
const handleReset = () => {
|
||
setFillCompleted(false)
|
||
// 重新检测页面输入框状态
|
||
setHeaderStatus("准备中, 请登录到投递表单页~")
|
||
const hostDoc = document.getRootNode() === document ? document : (document.getRootNode() as ShadowRoot).ownerDocument
|
||
const inputs = hostDoc.querySelectorAll("input:not([type='hidden']):not([type='submit']):not([type='button']):not([type='file']), textarea")
|
||
if (inputs.length > 2) {
|
||
setHeaderStatus("准备就绪，请点击开始填写")
|
||
} else {
|
||
// 延迟重试
|
||
setTimeout(() => {
|
||
const inputs2 = hostDoc.querySelectorAll("input:not([type='hidden']):not([type='submit']):not([type='button']):not([type='file']), textarea")
|
||
if (inputs2.length > 2) setHeaderStatus("准备就绪，请点击开始填写")
|
||
}, 1000)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 自动填写主流程
|
||
* 填写完成后更新组件状态，供后续"保存用户修改"和"AI补填"使用
|
||
*/
|
||
const handleAutoFill = async () => {
|
||
setFilling(true)
|
||
setHeaderStatus("正在填写表单，请勿跳转页面")
|
||
// 停止之前的循环扫描（如果有）
|
||
stopScanLoop()
|
||
// 操作中打开遮罩
|
||
showFillingOverlay()
|
||
try {
|
||
// 检测当前页面域名，判断走哪个处理模式
|
||
const currentHost = window.location.hostname
|
||
const isBeisen = currentHost.includes("zhiye.com") // 北森招聘平台域名特征
|
||
const isMoka = currentHost.includes("mokahr.com") // 摩卡招聘平台域名特征
|
||
const isFeishu = currentHost.includes("feishu.cn") // 飞书招聘平台域名特征
|
||
const isHotjob = currentHost.includes("hotjob.cn") // Hotjob招聘平台域名特征
|
||
const scanSiteMode = isBeisen ? "beisen" as const
|
||
: isMoka ? "moka" as const
|
||
: isFeishu ? "feishu" as const
|
||
: isHotjob ? "hotjob" as const
|
||
: undefined
|
||
|
||
// 第一次开启循环扫描（不传 sectionResults，阶段A之前就开始展示）
|
||
startScanLoop({ siteMode: scanSiteMode })
|
||
|
||
const fillResult = isBeisen
|
||
? await handleAutoFillBeisen({ resumeData, jobInfo })
|
||
: isMoka
|
||
? await handleAutoFillMoka({ resumeData, jobInfo })
|
||
: isFeishu
|
||
? await handleAutoFillFeishu({ resumeData, jobInfo })
|
||
: isHotjob
|
||
? await handleAutoFillHotjob({ resumeData, jobInfo })
|
||
: await handleAutoFillCommon({ resumeData, jobInfo })
|
||
|
||
// 将处理器返回的结果同步到组件状态
|
||
setPageLang(fillResult.lang) // 页面语言（影响后续标签匹配用中文还是英文）
|
||
setIsFormPage(fillResult.isFormPage) // 是否为表单页（非表单页不显示填写相关 UI）
|
||
if (fillResult.resumeData) setResumeData(fillResult.resumeData) // 更新简历数据（可能从 mock 切换为接口数据）
|
||
setFormFields(fillResult.formFields) // 已匹配的字段列表（用于后续高亮/状态展示）
|
||
setFillCompleted(true) // 标记填写流程已完成，解锁"保存修改"等按钮
|
||
setHeaderStatus("表单填写完成，请检查后提交")
|
||
hideFillingOverlay() // 填写完成，移除遮罩
|
||
|
||
// 停止第一次循环扫描，开启第二次循环扫描（传入 sectionResults + expandedResults，分段精确）
|
||
// 构建排除集合：从简历数据中提取所有值，避免将已填值误认为标签
|
||
const scanExcludeTexts = new Set<string>()
|
||
const scanResumeData = fillResult.resumeData || resumeData
|
||
if (scanResumeData) {
|
||
const main = scanResumeData.main
|
||
if (main) {
|
||
for (const val of Object.values(main)) {
|
||
if (typeof val === "string" && val.trim()) scanExcludeTexts.add(val.trim())
|
||
if (Array.isArray(val)) val.forEach((v) => { if (typeof v === "string" && v.trim()) scanExcludeTexts.add(v.trim()) })
|
||
}
|
||
}
|
||
const expKeys: ("education" | "work" | "internship" | "project" | "competition")[] = ["education", "work", "internship", "project", "competition"]
|
||
for (const sec of expKeys) {
|
||
const items = scanResumeData[sec]
|
||
if (!Array.isArray(items)) continue
|
||
for (const item of items) {
|
||
for (const val of Object.values(item as Record<string, any>)) {
|
||
if (typeof val === "string" && val.trim()) scanExcludeTexts.add(val.trim())
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 收集页面上所有选择器字段的下拉选项文字，合并到排除集合
|
||
// 避免选择器已选值（如"维吾尔族"）被误认为表单标签
|
||
// 北森模式（zhiye.com）选择器值直接写在输入框里，跳过整套弹出层收集逻辑
|
||
if (!isBeisen) {
|
||
const preFieldStats = scanPageFields({
|
||
siteMode: scanSiteMode,
|
||
sectionResults: fillResult.sectionResults,
|
||
expandedResults: fillResult.expandedResults,
|
||
excludeTexts: scanExcludeTexts,
|
||
})
|
||
const pickerOptionTexts = await collectPickerOptionTexts(preFieldStats)
|
||
for (const t of pickerOptionTexts) scanExcludeTexts.add(t)
|
||
// 存入 ref，供 handleSaveUserInput 使用
|
||
pickerOptionTextsRef.current = pickerOptionTexts
|
||
}
|
||
|
||
startScanLoop({
|
||
siteMode: scanSiteMode,
|
||
sectionResults: fillResult.sectionResults,
|
||
expandedResults: fillResult.expandedResults,
|
||
excludeTexts: scanExcludeTexts,
|
||
})
|
||
|
||
} catch (e) {
|
||
console.error("OfferPie: 自动填写异常", e)
|
||
hideFillingOverlay() // 异常时也移除遮罩
|
||
}
|
||
setTimeout(() => setFilling(false), 1000)
|
||
}
|
||
|
||
/**
|
||
* 模拟提交：通过 fillStats 扫描页面字段，过滤出 B2 阶段字段数据，更新到缓存
|
||
* 【注意】弹窗打开时不执行，避免覆盖用户正在编辑的数据
|
||
*/
|
||
const handleSaveUserInput = async () => {
|
||
// 弹窗打开时直接跳过，不更新缓存
|
||
if (showCacheModal) return
|
||
try {
|
||
const cacheData = await storageGet<any>("offerpie_unfilled_form")
|
||
if (!cacheData) { return }
|
||
|
||
// 检测当前网站模式
|
||
const currentHost = window.location.hostname
|
||
const siteMode = currentHost.includes("zhiye.com") ? "beisen" as const
|
||
: currentHost.includes("mokahr.com") ? "moka" as const
|
||
: currentHost.includes("feishu.cn") ? "feishu" as const
|
||
: currentHost.includes("hotjob.cn") ? "hotjob" as const
|
||
: undefined
|
||
|
||
// 从简历数据和缓存数据中提取所有已填值，构建排除集合
|
||
// 避免 findLabelForInput 把这些值文字误认为是表单字段标签
|
||
const excludeTexts = new Set<string>()
|
||
if (resumeData) {
|
||
// 主表字段值
|
||
const main = resumeData.main
|
||
if (main) {
|
||
for (const val of Object.values(main)) {
|
||
if (typeof val === "string" && val.trim()) excludeTexts.add(val.trim())
|
||
if (Array.isArray(val)) val.forEach((v) => { if (typeof v === "string" && v.trim()) excludeTexts.add(v.trim()) })
|
||
}
|
||
}
|
||
// 5大经历字段值
|
||
const expSections: ("education" | "work" | "internship" | "project" | "competition")[] = ["education", "work", "internship", "project", "competition"]
|
||
for (const sec of expSections) {
|
||
const items = resumeData[sec]
|
||
if (!Array.isArray(items)) continue
|
||
for (const item of items) {
|
||
for (const val of Object.values(item as Record<string, any>)) {
|
||
if (typeof val === "string" && val.trim()) excludeTexts.add(val.trim())
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 缓存中已记住的表单字段值
|
||
if (cacheData.unfilledFormData) {
|
||
for (const sec of cacheData.unfilledFormData as any[]) {
|
||
const items = sec.formItems
|
||
if (!items) continue
|
||
if (sec.isExperience && Array.isArray(items)) {
|
||
for (const seg of items) {
|
||
if (Array.isArray(seg)) {
|
||
for (const f of seg) { if (f.value && typeof f.value === "string") excludeTexts.add(f.value.trim()) }
|
||
}
|
||
}
|
||
} else if (Array.isArray(items)) {
|
||
for (const f of items) { if (f.value && typeof f.value === "string") excludeTexts.add(f.value.trim()) }
|
||
}
|
||
}
|
||
}
|
||
// 合并选择器选项文字（collectPickerOptionTexts 收集的下拉选项）
|
||
for (const t of pickerOptionTextsRef.current) excludeTexts.add(t)
|
||
|
||
// 调用 fillStats 扫描页面所有字段
|
||
const titleStats = scanPageFields({ siteMode, excludeTexts })
|
||
|
||
// 补充选择器展示值（与 startScanLoop 逻辑一致）
|
||
const pickerOpts = pickerOptionTextsRef.current
|
||
if (pickerOpts.size > 0) {
|
||
for (const ts of titleStats) {
|
||
for (let fIdx = 0; fIdx < ts.fields.length; fIdx++) {
|
||
const f = ts.fields[fIdx]
|
||
if (f.value) continue
|
||
if (!f.inputElement) continue
|
||
if ((f.inputElement as HTMLInputElement).value?.trim()) continue
|
||
const nextField = ts.fields[fIdx + 1]
|
||
const nextLabelText = nextField?.labelText || null
|
||
const displayVal = getPickerDisplayValue(f.inputElement as HTMLElement, f.labelText, nextLabelText, pickerOpts)
|
||
if (displayVal) {
|
||
f.value = displayVal
|
||
f.filled = true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 过滤日期/时间字段值中的年龄后缀，如 "1997-05 (29岁)" → "1997-05"
|
||
* 匹配中英文括号包裹的"数字+岁/years old"格式
|
||
*/
|
||
const stripAgeSuffix = (label: string, value: string): string => {
|
||
if (!value) return value
|
||
const dateKeywords = ["日期", "时间", "年月", "生日", "出生", "date", "birth", "年龄"]
|
||
const isDateField = dateKeywords.some((k) => label.toLowerCase().includes(k.toLowerCase()))
|
||
if (!isDateField) return value
|
||
// 去掉中英文括号包裹的年龄信息：(29岁)（29岁）(29 years old) 等
|
||
return value.replace(/\s*[(\uff08]\s*\d+\s*(岁|years?\s*old)\s*[)\uff09]/gi, "").trim()
|
||
}
|
||
|
||
/**
|
||
* 地区类字段空格转斜杠：如 "山西 大同市" → "山西/大同市"
|
||
* 适用于：籍贯、户口、所在地、出生地、工作地等地区相关字段
|
||
* @param label - 字段标签名（用于判断是否为地区字段）
|
||
* @param value - 字段当前值
|
||
* @returns 处理后的值（非地区字段原样返回）
|
||
*/
|
||
const formatRegionValue = (label: string, value: string): string => {
|
||
if (!value) return value
|
||
const regionKeywords = ["籍贯", "户口", "所在地", "出生地", "工作地", "居住地", "家庭地址", "户籍", "地区", "城市", "省市", "location", "birthplace", "hometown", "residence"]
|
||
const isRegionField = regionKeywords.some((k) => label.toLowerCase().includes(k.toLowerCase()))
|
||
if (!isRegionField) return value
|
||
// 将空格替换为 /（如 "山西 大同市" → "山西/大同市"）
|
||
return value.replace(/\s+/g, "/")
|
||
}
|
||
|
||
// 提取非简历格式字段（B2阶段字段）
|
||
const nonResumeData = extractNonResumeFields(titleStats)
|
||
|
||
// 更新缓存中的 unfilledFormData
|
||
// 策略：新数据中有的字段用新值替换，新数据中没有但旧数据中有的字段保留
|
||
const oldSections = cacheData.unfilledFormData as any[] || []
|
||
for (const newSec of nonResumeData) {
|
||
const oldSecIdx = oldSections.findIndex((s: any) => s.title === newSec.title)
|
||
if (oldSecIdx < 0) {
|
||
oldSections.push(newSec)
|
||
} else {
|
||
const oldSec = oldSections[oldSecIdx]
|
||
if (newSec.isExperience && oldSec.isExperience) {
|
||
// 经历类型：按段合并，保留旧字段
|
||
const oldSegments = oldSec.formItems as any[][]
|
||
const newSegments = newSec.formItems as any[][]
|
||
for (let sIdx = 0; sIdx < newSegments.length; sIdx++) {
|
||
if (sIdx >= oldSegments.length) {
|
||
oldSegments.push(newSegments[sIdx])
|
||
} else {
|
||
// 新字段更新值，旧字段中有但新字段中没有的保留
|
||
const oldFields = oldSegments[sIdx]
|
||
const newFields = newSegments[sIdx]
|
||
for (const nf of newFields) {
|
||
const of_ = oldFields.find((f: any) => f.label === nf.label)
|
||
if (of_) {
|
||
if (nf.value) of_.value = formatRegionValue(nf.label || "", stripAgeSuffix(nf.label || "", nf.value))
|
||
} else {
|
||
oldFields.push(nf)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} else if (!newSec.isExperience && !oldSec.isExperience) {
|
||
// 非经历类型：按字段合并，保留旧字段
|
||
const oldFields = oldSec.formItems as any[]
|
||
const newFields = newSec.formItems as any[]
|
||
for (const nf of newFields) {
|
||
const of_ = oldFields.find((f: any) => f.label === nf.label)
|
||
if (of_) {
|
||
if (nf.value) of_.value = formatRegionValue(nf.label || "", stripAgeSuffix(nf.label || "", nf.value))
|
||
} else {
|
||
oldFields.push(nf)
|
||
}
|
||
}
|
||
} else {
|
||
// 类型变化，直接替换
|
||
oldSections[oldSecIdx] = newSec
|
||
}
|
||
}
|
||
}
|
||
|
||
cacheData.unfilledFormData = oldSections
|
||
cacheData.timestamp = Date.now()
|
||
await storageSet("offerpie_unfilled_form", cacheData)
|
||
|
||
// 打印所有字段数据
|
||
printFieldStats(titleStats)
|
||
} catch (e) {
|
||
console.error("[OfferPie] 模拟提交失败:", e)
|
||
}
|
||
}
|
||
|
||
/** 打开"助手已记住的表单"弹窗，从 chrome.storage 加载数据 */
|
||
const openCacheModal = async () => {
|
||
try {
|
||
const cacheData = await storageGet<any>("offerpie_unfilled_form")
|
||
if (!cacheData) {
|
||
setCacheModalData([])
|
||
} else {
|
||
setCacheModalData(cacheData.unfilledFormData || [])
|
||
}
|
||
} catch {
|
||
setCacheModalData([])
|
||
}
|
||
setShowCacheModal(true)
|
||
}
|
||
|
||
/** 关闭弹窗 */
|
||
const closeCacheModal = () => {
|
||
setShowCacheModal(false)
|
||
setCacheModalData(null)
|
||
}
|
||
|
||
/** 弹窗内更新某个字段的值 */
|
||
const updateCacheFieldValue = (sectionIdx: number, segIdx: number | null, fieldIdx: number, newValue: string) => {
|
||
if (!cacheModalData) return
|
||
const updated = [...cacheModalData]
|
||
const section = updated[sectionIdx]
|
||
if (segIdx !== null) {
|
||
// 经历类型：formItems 是二维数组
|
||
;(section.formItems as any[][])[segIdx][fieldIdx].value = newValue
|
||
} else {
|
||
// 普通类型：formItems 是一维数组
|
||
;(section.formItems as any[])[fieldIdx].value = newValue
|
||
}
|
||
setCacheModalData(updated)
|
||
}
|
||
|
||
/** 弹窗内保存数据到 chrome.storage */
|
||
const saveCacheModalData = async () => {
|
||
try {
|
||
const cacheData = await storageGet<any>("offerpie_unfilled_form") || {}
|
||
cacheData.unfilledFormData = cacheModalData || []
|
||
cacheData.timestamp = Date.now()
|
||
await storageSet("offerpie_unfilled_form", cacheData)
|
||
alert("已保存表单数据")
|
||
} catch (e) {
|
||
console.error("[OfferPie] 保存缓存数据失败:", e)
|
||
alert("保存失败，请查看控制台")
|
||
}
|
||
}
|
||
|
||
/** 弹窗内清空缓存数据（带确认） */
|
||
const clearCacheFromModal = async () => {
|
||
const confirmed = window.confirm("是否清空已记录的表单数据？清空后下次填简历那些数据需要您一个个手动填。")
|
||
if (!confirmed) return
|
||
// 先停止循环扫描，防止 handleSaveUserInput 又把数据写回去
|
||
stopScanLoop()
|
||
await storageRemove("offerpie_unfilled_form")
|
||
setCacheModalData([])
|
||
alert("已清空缓存数据")
|
||
console.log("[OfferPie] 已清空 offerpie_unfilled_form 缓存")
|
||
}
|
||
|
||
// ============ 拖拽逻辑 ============
|
||
|
||
/** 即时拖拽：收起状态横条 / 展开状态顶部 header，按住即可拖动（无需长按） */
|
||
const handleInstantDragDown = useCallback((e: React.MouseEvent) => {
|
||
// 如果点击的是箭头按钮，不启动拖拽
|
||
const target = e.target as HTMLElement
|
||
if (target.closest("button, .op-collapsed-arrow, .op-collapse-btn")) return
|
||
|
||
e.preventDefault()
|
||
const state = dragStateRef.current
|
||
state.startX = e.clientX
|
||
state.startY = e.clientY
|
||
state.startOffsetX = dragOffset.x
|
||
state.startOffsetY = dragOffset.y
|
||
state.isDragging = true
|
||
state.isLongPress = true // 标记为已激活拖拽
|
||
if (containerRef.current) {
|
||
containerRef.current.style.cursor = "grabbing"
|
||
}
|
||
|
||
const handleMouseMove = (ev: MouseEvent) => {
|
||
const dx = ev.clientX - state.startX
|
||
const dy = ev.clientY - state.startY
|
||
setDragOffset({ x: state.startOffsetX + dx, y: state.startOffsetY + dy })
|
||
if (!hasDragged) setHasDragged(true)
|
||
}
|
||
|
||
const handleMouseUp = () => {
|
||
state.isDragging = false
|
||
state.isLongPress = false
|
||
if (containerRef.current) {
|
||
containerRef.current.style.cursor = ""
|
||
}
|
||
document.removeEventListener("mousemove", handleMouseMove)
|
||
document.removeEventListener("mouseup", handleMouseUp)
|
||
}
|
||
|
||
document.addEventListener("mousemove", handleMouseMove)
|
||
document.addEventListener("mouseup", handleMouseUp)
|
||
}, [dragOffset, hasDragged])
|
||
|
||
/** 鼠标按下（非 header 区域）：启动长按计时，300ms 后才可拖拽 */
|
||
const handleMouseDown = useCallback((e: React.MouseEvent) => {
|
||
// 如果点击的是交互元素（按钮、链接、输入框等），不启动拖拽
|
||
const target = e.target as HTMLElement
|
||
if (target.closest("button, a, input, textarea, select, [role='button'], .op-credits-link, .op-field-item, .op-cache-modal-mask, .op-header, .op-collapsed-bar")) return
|
||
|
||
e.preventDefault()
|
||
const state = dragStateRef.current
|
||
state.startX = e.clientX
|
||
state.startY = e.clientY
|
||
state.startOffsetX = dragOffset.x
|
||
state.startOffsetY = dragOffset.y
|
||
state.isLongPress = false
|
||
|
||
// 300ms 后认为是长按，开始拖拽
|
||
state.longPressTimer = setTimeout(() => {
|
||
state.isLongPress = true
|
||
state.isDragging = true
|
||
if (containerRef.current) {
|
||
containerRef.current.style.cursor = "grabbing"
|
||
}
|
||
}, 300)
|
||
|
||
const handleMouseMove = (ev: MouseEvent) => {
|
||
if (!state.isLongPress) {
|
||
// 还没触发长按，如果移动太远就取消（避免误触）
|
||
const dist = Math.abs(ev.clientX - state.startX) + Math.abs(ev.clientY - state.startY)
|
||
if (dist > 5 && state.longPressTimer) {
|
||
clearTimeout(state.longPressTimer)
|
||
state.longPressTimer = null
|
||
}
|
||
return
|
||
}
|
||
// 长按中拖拽
|
||
const dx = ev.clientX - state.startX
|
||
const dy = ev.clientY - state.startY
|
||
setDragOffset({ x: state.startOffsetX + dx, y: state.startOffsetY + dy })
|
||
if (!hasDragged) setHasDragged(true)
|
||
}
|
||
|
||
const handleMouseUp = () => {
|
||
if (state.longPressTimer) {
|
||
clearTimeout(state.longPressTimer)
|
||
state.longPressTimer = null
|
||
}
|
||
state.isDragging = false
|
||
if (containerRef.current) {
|
||
containerRef.current.style.cursor = ""
|
||
}
|
||
document.removeEventListener("mousemove", handleMouseMove)
|
||
document.removeEventListener("mouseup", handleMouseUp)
|
||
}
|
||
|
||
document.addEventListener("mousemove", handleMouseMove)
|
||
document.addEventListener("mouseup", handleMouseUp)
|
||
}, [dragOffset, hasDragged])
|
||
|
||
/** 鼠标移入：显示拖拽提示气泡（收起状态提示1次，展开状态提示1次，拖动过后不再提示） */
|
||
const handleMouseEnter = useCallback(() => {
|
||
if (hasDragged) return
|
||
if (collapsed) {
|
||
if (collapsedTooltipShownRef.current) return
|
||
collapsedTooltipShownRef.current = true
|
||
} else {
|
||
if (expandedTooltipShownRef.current) return
|
||
expandedTooltipShownRef.current = true
|
||
}
|
||
setShowDragTooltip(true)
|
||
if (dragTooltipTimerRef.current) clearTimeout(dragTooltipTimerRef.current)
|
||
dragTooltipTimerRef.current = setTimeout(() => {
|
||
setShowDragTooltip(false)
|
||
}, 3000)
|
||
}, [hasDragged, collapsed])
|
||
|
||
/** 组件卸载时清理拖拽提示定时器 */
|
||
useEffect(() => {
|
||
return () => {
|
||
if (dragTooltipTimerRef.current) clearTimeout(dragTooltipTimerRef.current)
|
||
}
|
||
}, [])
|
||
|
||
return (
|
||
<div
|
||
className={`op-container ${collapsed ? "op-container--collapsed" : ""}`}
|
||
ref={containerRef}
|
||
style={{ transform: `translate(${dragOffset.x}px, ${dragOffset.y}px)` }}
|
||
onMouseDown={handleMouseDown}
|
||
onMouseEnter={handleMouseEnter}
|
||
>
|
||
{/* 拖拽提示气泡 */}
|
||
{showDragTooltip && (
|
||
<div className="op-drag-tooltip">助手位置可以拖动</div>
|
||
)}
|
||
|
||
{/* 收起状态：显示 logo + 提示文字 + 向下箭头 */}
|
||
{collapsed ? (
|
||
<div className="op-collapsed-bar" onMouseDown={handleInstantDragDown}>
|
||
<img src={logoImg} alt="OfferPie" width={28} height={31} className="op-header-logo" />
|
||
<span className="op-collapsed-text">{headerStatus || "Offer派助手"}</span>
|
||
<svg className="op-collapsed-arrow" onClick={() => setCollapsed(false)} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||
<polyline points="6 9 12 15 18 9" />
|
||
</svg>
|
||
</div>
|
||
) : (
|
||
<>
|
||
{/* 填写中遮罩：覆盖整个面板，阻止用户操作 */}
|
||
{filling && <div className="op-filling-overlay" />}
|
||
<div className="op-inner">
|
||
{/* 新顶部：logo + 提示文字 + 收起箭头（按住即可拖动） */}
|
||
<div className="op-header" onMouseDown={handleInstantDragDown}>
|
||
<div className="op-header-left">
|
||
<img src={logoImg} alt="OfferPie" width={28} height={31} className="op-header-logo" />
|
||
<span className="op-header-status">{headerStatus || "Offer派助手"}</span>
|
||
</div>
|
||
<button className="op-collapse-btn" onClick={() => setCollapsed(true)}>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||
<polyline points="9 6 15 12 9 18" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
{/* 未登录状态：显示登录提示 */}
|
||
{!isLoggedIn && isLoggedIn !== null && (
|
||
<div className="op-nonmember">
|
||
<div className="op-nonmember-divider" />
|
||
<div className="op-nonmember-title">登录 Offer 派，开启智能投递</div>
|
||
<div className="op-nonmember-desc">登录后将自动同步你的会员状态、简历和求职信息</div>
|
||
<button
|
||
className="op-nonmember-btn"
|
||
onClick={() => { window.open("https://test.offerpai.com.cn/jobs", "_blank") }}
|
||
>
|
||
前往登录
|
||
</button>
|
||
<div
|
||
className="op-nonmember-refresh"
|
||
onClick={() => { window.location.reload() }}
|
||
>
|
||
已完成登录？刷新登录状态
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 已登录状态：显示完整功能 */}
|
||
{isLoggedIn && (
|
||
<>
|
||
{/* 非会员状态：显示开通会员提示 */}
|
||
{isMember === false && (
|
||
<div className="op-nonmember">
|
||
<div className="op-nonmember-divider" />
|
||
<div className="op-nonmember-title">智能投递助手为会员专享功能</div>
|
||
<div className="op-nonmember-desc">开通会员后，即可自动识别并填写网申表单，减少重复操作</div>
|
||
<button
|
||
className="op-nonmember-btn"
|
||
onClick={() => { window.open("https://test.offerpai.com.cn/jobs", "_blank") }}
|
||
>
|
||
开通会员，立即使用
|
||
</button>
|
||
<div
|
||
className="op-nonmember-refresh"
|
||
onClick={() => { window.location.reload() }}
|
||
>
|
||
已开通会员？刷新会员状态
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 会员状态：显示完整功能 */}
|
||
{isMember === true && (
|
||
<>
|
||
{/* 职位信息卡片 */}
|
||
<div className="op-job-card">
|
||
|
||
<div className="op-job-info">
|
||
<div className="op-job-title">{jobInfo?.title || "未匹配到岗位信息"}</div>
|
||
<div className="op-job-meta">
|
||
{jobInfo
|
||
? [jobInfo.companyName || jobInfo.companyShortName]
|
||
.filter(Boolean)
|
||
.join(" · ") || "—"
|
||
: "当前页面暂未关联岗位"}
|
||
</div>
|
||
</div>
|
||
{jobInfo?.matchScore != null && (
|
||
<div className="op-match-score">
|
||
<svg width="48" height="48" viewBox="0 0 48 48">
|
||
<circle cx="24" cy="24" r="20" fill="none" stroke="#f0f0f0" strokeWidth="3" />
|
||
<circle cx="24" cy="24" r="20" fill="none" stroke="#52CAD1" strokeWidth="3"
|
||
strokeDasharray={`${(jobInfo.matchScore) / 100 * 2 * Math.PI * 20} ${2 * Math.PI * 20}`}
|
||
strokeLinecap="round" transform="rotate(-90 24 24)" />
|
||
<text x="24" y="26" textAnchor="middle" fontSize="13" fontWeight="700" fill="#000">
|
||
{jobInfo.matchScore}%
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 自动填写按钮区域 */}
|
||
{fillCompleted ? (
|
||
<div className="op-fill-done-row">
|
||
<button className="op-reset-btn" onClick={handleReset}>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#52CAD1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<polyline points="23 4 23 10 17 10" />
|
||
<polyline points="1 20 1 14 7 14" />
|
||
<path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15" />
|
||
</svg>
|
||
</button>
|
||
<div className="op-fill-done-label">填写完成，请检查</div>
|
||
</div>
|
||
) : (
|
||
<button className={`op-autofill-btn${filling ? " op-autofill-btn--filling" : ""}`} onClick={handleAutoFill} disabled={filling || headerStatus !== "准备就绪，请点击开始填写"}>
|
||
{filling ? "填写中...." : "开始填写"}
|
||
</button>
|
||
)}
|
||
|
||
{/* 操作链接 */}
|
||
<div className="op-credits-row">
|
||
<span className="op-credits-link" onClick={async () => {
|
||
const cachedUrl = sessionStorage.getItem("offerpie_source_url") || sourceUrl
|
||
if (!cachedUrl) return
|
||
|
||
try {
|
||
// 通过跨域 CSL 模式读取投递链接列表
|
||
const result = await panelBridge.get<OfferpaieDeliveryLinkListData>(appConfig.bridgeDomain, "offerpaiDeliveryLinkList", true)
|
||
const linkList = result?.linkList || []
|
||
|
||
// 检查当前投递链接是否已在列表中
|
||
if (!linkList.includes(cachedUrl)) {
|
||
linkList.push(cachedUrl)
|
||
}
|
||
|
||
// 写回跨域通信（让网页端能读到）
|
||
await panelBridge.put<OfferpaieDeliveryLinkListData>(appConfig.bridgeDomain, "offerpaiDeliveryLinkList", { linkList }, true)
|
||
console.log("[OfferPie] 已更新投递链接列表:", linkList)
|
||
} catch (err) {
|
||
console.warn("[OfferPie] 更新投递链接列表失败:", err)
|
||
}
|
||
|
||
// 跳转到投递链接
|
||
window.location.href = cachedUrl
|
||
}}>打开投递链接</span>
|
||
<span className="op-credits-link" onClick={openCacheModal}>助手已记住的表单</span>
|
||
</div>
|
||
|
||
{/* 简历区域 */}
|
||
<div className="op-section-label">简历</div>
|
||
<div className="op-resume-card">
|
||
<div className="op-resume-avatar">
|
||
{resumeData?.main?.name ? '已优化' : ""}
|
||
|
||
</div>
|
||
<div className="op-resume-info">
|
||
<span className="op-resume-name">
|
||
{resumeData?.main?.name || "暂无简历"}.pdf
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 按钮 */}
|
||
|
||
{/* 填写进度区域 */}
|
||
<div className="op-progress-row">
|
||
<span className="op-progress-label">填写进度</span>
|
||
<span className="op-progress-value">
|
||
{fieldStats.length > 0
|
||
? `${fieldStats.reduce((s, t) => s + t.fields.filter((f) => f.color === "green" || f.color === "greenTwo").length, 0)}/${fieldStats.reduce((s, t) => s + t.fields.length, 0)}`
|
||
: "0/0"}
|
||
</span>
|
||
</div>
|
||
<div className="op-progress-bar-bg">
|
||
<div
|
||
className="op-progress-bar-fill"
|
||
style={{
|
||
width: fieldStats.length > 0
|
||
? `${Math.round(fieldStats.reduce((s, t) => s + t.fields.filter((f) => f.color === "green" || f.color === "greenTwo").length, 0) / Math.max(fieldStats.reduce((s, t) => s + t.fields.length, 0), 1) * 100)}%`
|
||
: "0%"
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{/* 已识别字段列表 */}
|
||
{fieldStats.length > 0 && (() => {
|
||
/** 点击字段名时滚动到对应输入框 */
|
||
const scrollToField = (el: Element | null) => {
|
||
if (!el || !(el instanceof HTMLElement)) return
|
||
el.scrollIntoView({ behavior: "smooth", block: "center" })
|
||
// 闪烁高亮提示
|
||
const origOutline = el.style.outline
|
||
el.style.outline = "2px solid #52cad1"
|
||
setTimeout(() => { el.style.outline = origOutline }, 1500)
|
||
}
|
||
|
||
return (
|
||
<>
|
||
{/* 已识别字段区域（合并展示所有字段） */}
|
||
<div className="op-field-section">
|
||
<div className="op-field-section-title">
|
||
<span className="op-field-section-dot op-field-section-dot--green" />
|
||
已识别字段
|
||
<span className="op-field-section-required-count">（剩余必填:{fieldStats.reduce((s, t) => s + t.fields.filter((f) => f.color === "red").length, 0)}）</span>
|
||
</div>
|
||
<div className="op-field-list" ref={fieldListRef}>
|
||
{(() => {
|
||
let globalIdx = 0
|
||
return fieldStats.map((ts) => {
|
||
if (ts.fields.length === 0) return null
|
||
return (
|
||
<div key={ts.titleText} className="op-field-group">
|
||
<div className="op-field-group-title">{ts.titleText}</div>
|
||
{ts.isExpType && ts.segmentCount > 1
|
||
? Array.from({ length: ts.segmentCount }, (_, sIdx) => {
|
||
const segFields = ts.fields.filter((f) => f.segmentIndex === sIdx)
|
||
if (segFields.length === 0) return null
|
||
return (
|
||
<div key={sIdx}>
|
||
<div className="op-field-group-segment">经历{sIdx + 1}</div>
|
||
{segFields.map((f, idx) => {
|
||
const isFilled = f.color === "green" || f.color === "greenTwo"
|
||
const fieldIdx = globalIdx++
|
||
return (
|
||
<div
|
||
key={`${f.labelText}-${sIdx}-${idx}`}
|
||
className="op-field-item"
|
||
data-field-idx={fieldIdx}
|
||
onClick={() => scrollToField(f.inputElement)}
|
||
>
|
||
{isFilled ? (
|
||
<svg className="op-field-item-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="11" fill="#52cad1" />
|
||
<path d="M7 12.5l3 3 7-7" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
) : (
|
||
<svg className="op-field-item-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="10" stroke="#999" strokeWidth="2.5" />
|
||
</svg>
|
||
)}
|
||
<span className="op-field-item-name">{f.labelText}</span>
|
||
{f.color === "red" && <span className="op-field-item-required">必填</span>}
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)
|
||
})
|
||
: ts.fields.map((f, idx) => {
|
||
const isFilled = f.color === "green" || f.color === "greenTwo"
|
||
const fieldIdx = globalIdx++
|
||
return (
|
||
<div
|
||
key={`${f.labelText}-${idx}`}
|
||
className="op-field-item"
|
||
data-field-idx={fieldIdx}
|
||
onClick={() => scrollToField(f.inputElement)}
|
||
>
|
||
{isFilled ? (
|
||
<svg className="op-field-item-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="11" fill="#52cad1" />
|
||
<path d="M7 12.5l3 3 7-7" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
) : (
|
||
<svg className="op-field-item-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="12" cy="12" r="10" stroke="#999" strokeWidth="2.5" />
|
||
</svg>
|
||
)}
|
||
<span className="op-field-item-name">{f.labelText}</span>
|
||
{f.color === "red" && <span className="op-field-item-required">必填</span>}
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
)
|
||
})
|
||
})()}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
})()}
|
||
</>
|
||
)}
|
||
</>
|
||
)}
|
||
{/* 版本号（未登录或非会员时隐藏） */}
|
||
{isLoggedIn && isMember !== false && (
|
||
<div className="op-version">ver: {appConfig.pluginVersion}</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 助手已记住的表单 弹窗 */}
|
||
{showCacheModal && (() => {
|
||
// 因为 op-container 有 transform，内部的 fixed 定位会相对于容器而非视口
|
||
// 需要计算反向偏移让弹窗遮罩覆盖整个视口
|
||
const containerEl = containerRef.current
|
||
const rect = containerEl?.getBoundingClientRect()
|
||
const maskStyle: React.CSSProperties = rect ? {
|
||
position: "fixed" as const,
|
||
top: -rect.top,
|
||
left: -rect.left,
|
||
width: "100vw",
|
||
height: "100vh",
|
||
} : {}
|
||
return (
|
||
<div className="op-cache-modal-mask" style={maskStyle} onClick={closeCacheModal}>
|
||
<div className="op-cache-modal" onClick={(e) => e.stopPropagation()}>
|
||
<div className="op-cache-modal-header">
|
||
<span className="op-cache-modal-title">助手已记住的表单</span>
|
||
<button className="op-cache-modal-close" onClick={closeCacheModal}>✕</button>
|
||
</div>
|
||
<div className="op-cache-modal-body">
|
||
{(!cacheModalData || cacheModalData.length === 0) ? (
|
||
<div className="op-cache-modal-empty">暂无缓存数据</div>
|
||
) : (
|
||
<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 是二维数组，每段经历分开展示
|
||
(section.formItems as any[][]).map((segFields: any[], segIdx: number) => (
|
||
<div key={segIdx} className="op-cache-modal-segment">
|
||
<div className="op-cache-modal-segment-title">经历{segIdx + 1}</div>
|
||
<div className="op-cache-modal-fields">
|
||
{segFields.map((field: any, fIdx: number) => {
|
||
// 标签名包含"内容"二字的字段用 textarea 单独一行
|
||
const isLongText = field.label && field.label.includes("内容")
|
||
if (isLongText) {
|
||
return (
|
||
<div key={fIdx} className="op-cache-modal-field op-cache-modal-field--full">
|
||
<label className="op-cache-modal-label">{field.label}</label>
|
||
<textarea
|
||
className="op-cache-modal-textarea"
|
||
rows={3}
|
||
value={field.value || ""}
|
||
onChange={(e) => updateCacheFieldValue(sIdx, segIdx, fIdx, e.target.value)}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
return (
|
||
<div key={fIdx} className="op-cache-modal-field">
|
||
<label className="op-cache-modal-label">{field.label}</label>
|
||
<input
|
||
className="op-cache-modal-input"
|
||
type="text"
|
||
value={field.value || ""}
|
||
onChange={(e) => updateCacheFieldValue(sIdx, segIdx, fIdx, e.target.value)}
|
||
/>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
))
|
||
) : (
|
||
// 普通类型：formItems 是一维数组
|
||
<div className="op-cache-modal-fields">
|
||
{(section.formItems as any[]).map((field: any, fIdx: number) => (
|
||
<div key={fIdx} className="op-cache-modal-field">
|
||
<label className="op-cache-modal-label">{field.label}</label>
|
||
<input
|
||
className="op-cache-modal-input"
|
||
type="text"
|
||
value={field.value || ""}
|
||
onChange={(e) => updateCacheFieldValue(sIdx, null, fIdx, e.target.value)}
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="op-cache-modal-footer">
|
||
<button className="op-cache-modal-btn op-cache-modal-btn--clear" onClick={clearCacheFromModal}>清空缓存</button>
|
||
<button className="op-cache-modal-btn op-cache-modal-btn--save" onClick={saveCacheModalData}>确认保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})()}
|
||
</>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|