登陆信息同步和接口联调

2026-05-14 10:47:51 +08:00
parent 84a2a3993a
commit c86c570896
8 changed files with 272 additions and 87 deletions
@@ -1,5 +1,6 @@
 import { config } from "~config"
 import { createHttp } from "./request"
+import type { ResumeData } from "~lib/types"

 /** Python AI 后端接口 */
 const http = createHttp(config.aiBaseApi)
@@ -8,3 +9,8 @@ const http = createHttp(config.aiBaseApi)
 export function healthCheck() {
  return http.get('/health/')
 }
+
+/** 查询岗位定制简历 */
+export function getCustomizeResume(jobId: number) {
+  return http.get<ResumeData>('/job/customize-resume', { params: { job_id: String(jobId) } })
+}
@@ -1,12 +1,13 @@
 import { config } from "~config"
 import { createHttp } from "./request"
+import type { JobInfo } from "~lib/types"

 /** Java 后端接口 */
 const http = createHttp(config.dataBaseApi)

 /** 根据岗位来源地址查询岗位信息 */
 export function findJobBySourceUrl(sourceUrl: string) {
-  return http.get('/job/findByUrl', { params: { sourceUrl } })
+  return http.get<JobInfo>('/job/findByUrl', { params: { sourceUrl } })
 }

 /** 校验登录状态 */
@@ -9,6 +9,7 @@ $radius-sm: 12px;
  top: 10px;
  right: 10px;
  width: 384px;
+  min-height: 480px;
  max-height: calc(100vh - 20px);
  background: #fff;
  border-radius: $radius-lg;
@@ -251,3 +252,35 @@ $radius-sm: 12px;
    transition: width 0.3s;
  }
 }
+
+/* 未登录提示区域 */
+.op-login-prompt {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+}
+
+.op-login-text {
+  font-size: 15px;
+  color: #555;
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+.op-login-btn {
+  width: 100%;
+  height: 48px;
+  background: $primary;
+  color: #fff;
+  border: none;
+  border-radius: $radius-md;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+
+  &:hover { opacity: 0.85; }
+}
@@ -4,25 +4,33 @@
 * 包含：职位信息卡片、自动填写按钮、简历管理、填写进度等功能区域
 */

-import { useState } from "react"
+import { useState, useEffect } from "react"
+import { getCookieValue } from "~utils/cookie"
+import { getCustomizeResume } from "~api/aiApi"
 import { fillMatchedField, delay, isSearchPickerField, fillSearchPickerField, isTimePeriodField, isTimeSingleField, fillTimePeriodField, fillTimeSingleField } from "~lib/autofill"
 import { extractDomStructure, detectPageLanguage, isJobApplicationForm } from "~lib/dom"
 import { matchFormFields, matchFormFieldsInRange, matchMainFields } from "~lib/formMatcher"
 import { detectPickerField } from "~lib/pickerDetector"
 import { detectAndUploadResume } from "~lib/resumeUpload"
-import { getMockResumeData } from "~lib/constants"
+import { getMockResumeData2 } from "~lib/constants"
 import { getResumeFieldValue } from "~lib/resumeDataHelper"
 import { locateExperienceSections, expandExperienceSections, sortExperienceByTime, relocateSegmentContainer } from "~lib/experienceSection"
-import type { MatchedFormField, ResumeData, ExperienceSection } from "~lib/types"
+import type { MatchedFormField, ResumeData, ExperienceSection, JobInfo } from "~lib/types"
 import "./SidebarPanel.scss"

 /** 侧边栏面板的 Props */
 interface SidebarPanelProps {
+  /** 当前标签页的来源链接 */
+  sourceUrl: string
+  /** 岗位信息（由 sidebar 层查询后传入） */
+  jobInfo: JobInfo | null
  /** 关闭面板的回调函数 */
  onClose: () => void
 }

-export function SidebarPanel({ onClose }: SidebarPanelProps) {
+export function SidebarPanel({ sourceUrl, jobInfo, onClose }: SidebarPanelProps) {
+  /** 是否已登录（有 Token） */
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean | null>(null)
  /** 是否正在执行自动填写 */
  const [filling, setFilling] = useState(false)
  /** 页面语言类型：中文 / 英文 */
@@ -34,6 +42,33 @@ export function SidebarPanel({ onClose }: SidebarPanelProps) {
  /** 当前使用的简历数据 */
  const [resumeData, setResumeData] = useState<ResumeData | null>(null)

+  /** 页面加载时检查 Token，有岗位信息则查询定制简历 */
+  useEffect(() => {
+    getCookieValue("Token").then((token) => {
+      console.log("[OfferPie] SidebarPanel 获取到的 Token:", token)
+      setIsLoggedIn(!!token)
+
+      // 有 Token 且有岗位 ID 时，查询定制简历
+      if (token && 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)
+        })
+      }
+    })
+  }, [])
+
  /**
   * 自动填写按钮点击处理
   * 流程：提取 DOM → 检测语言 → 判断是否表单页 → 检测简历上传 → 匹配字段 → 识别选择器 → 填充测试数据
@@ -58,17 +93,16 @@ export function SidebarPanel({ onClose }: SidebarPanelProps) {
      console.log(`===== OfferPie: 是否为职位申请表单页面 = ${isForm} =====`)

      if (isForm) {
-        // 4. 获取简历数据（当前使用 mock 数据，后续替换为接口调用）
-        // TODO: 替换为真实接口 → const res = await javaApi.get<{resume: ..., education: ..., ...}>("/resume/detail")
-        const currentResumeData = getMockResumeData()
-        setResumeData(currentResumeData)
+        // 4. 获取简历数据（优先使用接口数据，无接口数据时 fallback 到 mock）
+        const currentResumeData = resumeData || getMockResumeData2()
+        if (!resumeData) setResumeData(currentResumeData)
        console.log(`===== OfferPie: 已加载简历数据，教育${currentResumeData.education.length}段 工作${currentResumeData.work.length}段 实习${currentResumeData.internship.length}段 项目${currentResumeData.project.length}段 竞赛${currentResumeData.competition.length}段 =====`)

-        // // 4.1 检测并上传简历文件
-        // const resumeUrl = "https://offerpie.oss-cn-guangzhou.aliyuncs.com/%E4%BA%8E%E5%A4%A7%E6%98%A5.pdf"
-        // const uploaded = await detectAndUploadResume(resumeUrl)
-        // console.log(`===== OfferPie: 简历上传 ${uploaded ? "成功" : "跳过（未找到上传按钮或失败）"} =====`)
-        // if (uploaded) await delay(1000) // 等待网站解析简历
+        // 4.1 检测并上传简历文件
+        const resumeUrl = "https://offerpie.oss-cn-guangzhou.aliyuncs.com/%E4%BA%8E%E5%A4%A7%E6%98%A5.pdf"
+        const uploaded = await detectAndUploadResume(resumeUrl)
+        console.log(`===== OfferPie: 简历上传 ${uploaded ? "成功" : "跳过（未找到上传按钮或失败）"} =====`)
+        if (uploaded) await delay(1000) // 等待网站解析简历

        // 4.5 定位经历区块并统计已展开段数
        const sectionResults = locateExperienceSections(document.body, lang)
@@ -307,11 +341,10 @@ export function SidebarPanel({ onClose }: SidebarPanelProps) {

  return (
    <div className="op-container">
-      {/* 顶部操作栏：反馈、设置、关闭按钮 */}
+      {/* 顶部操作栏：关闭按钮始终显示，反馈和设置仅登录后显示 */}
      <div className="op-header">
-        <span className="op-header-link">反馈123456789</span>
-        <span className="op-header-link">设置</span>
-        {/* 关闭按钮：点击后隐藏侧边栏 */}
+        {isLoggedIn && <span className="op-header-link">反馈12</span>}
+        {isLoggedIn && <span className="op-header-link">设置</span>}
        <button className="op-close-btn" onClick={onClose}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
            <circle cx="12" cy="12" r="10" />
@@ -323,76 +356,103 @@ export function SidebarPanel({ onClose }: SidebarPanelProps) {
      {/* 插件标题 */}
      <div className="op-title">大学生求职助手</div>

-      {/* 职位信息卡片：展示当前页面识别到的职位信息和匹配度 */}
-      <div className="op-job-card">
-        {/* 职位图标 */}
-        <div className="op-job-icon">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="#666">
-            <rect x="3" y="3" width="7" height="7" rx="1" />
-            <rect x="14" y="3" width="7" height="7" rx="1" />
-            <rect x="3" y="14" width="7" height="7" rx="1" />
-            <rect x="14" y="14" width="7" height="7" rx="1" />
-          </svg>
+      {/* 未登录状态：显示登录提示 */}
+      {!isLoggedIn && isLoggedIn !== null && (
+        <div className="op-login-prompt">
+          <p className="op-login-text">请先前往 Offer派 官网进行登录</p>
+          <button
+            className="op-login-btn"
+            onClick={() => {
+              onClose()
+              window.open("http://localhost:5173/jobs", "_blank")
+            }}
+          >
+            前往 Offer派
+          </button>
        </div>
-        {/* 职位名称和公司信息 */}
-        <div className="op-job-info">
-          <div className="op-job-title">数据产品经理</div>
-          <div className="op-job-meta">北京 · 字节跳动　独角兽</div>
-        </div>
-        {/* 匹配度环形进度条 */}
-        <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" />
-            {/* 进度圆环：60% 匹配度 */}
-            <circle cx="24" cy="24" r="20" fill="none" stroke="#000" strokeWidth="3"
-              strokeDasharray={`${0.6 * 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">60%</text>
-          </svg>
-        </div>
-      </div>
+      )}

-      {/* 自动填写按钮：点击后获取页面结构，后续会调用 AI 接口自动填表 */}
-      <button className="op-autofill-btn" onClick={handleAutoFill} disabled={filling}>
-        {filling ? "分析中..." : "自动填写"}
-      </button>
+      {/* 已登录状态：显示完整功能 */}
+      {isLoggedIn && (
+        <>
+          {/* 职位信息卡片 */}
+          <div className="op-job-card">
+            <div className="op-job-icon">
+              {jobInfo?.companyLogoUrl ? (
+                <img src={jobInfo.companyLogoUrl} alt="logo" style={{ width: 40, height: 40, borderRadius: 10, objectFit: "cover" }} />
+              ) : (
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="#666">
+                  <rect x="3" y="3" width="7" height="7" rx="1" />
+                  <rect x="14" y="3" width="7" height="7" rx="1" />
+                  <rect x="3" y="14" width="7" height="7" rx="1" />
+                  <rect x="14" y="14" width="7" height="7" rx="1" />
+                </svg>
+              )}
+            </div>
+            <div className="op-job-info">
+              <div className="op-job-title">{jobInfo?.title || "未匹配到岗位信息"}</div>
+              <div className="op-job-meta">
+                {jobInfo
+                  ? [jobInfo.regionName, jobInfo.companyShortName || jobInfo.companyName, jobInfo.companyType]
+                      .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="#000" 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>

-      {/* 使用次数信息 */}
-      <div className="op-credits-row">
-        <span className="op-credits-text">剩余4次</span>
-        <span className="op-credits-link">立即获得无限次数</span>
-      </div>
+          {/* 自动填写按钮 */}
+          <button className="op-autofill-btn" onClick={handleAutoFill} disabled={filling}>
+            {filling ? "分析中..." : "自动填写"}
+          </button>

-      {/* 简历区域 */}
-      <div className="op-section-label">简历</div>
-      {/* 简历卡片：展示当前选中的简历信息 */}
-      <div className="op-resume-card">
-        {/* 简历头像 */}
-        <div className="op-resume-avatar">B</div>
-        {/* 简历名称和标签 */}
-        <div className="op-resume-info">
-          <span className="op-resume-name">李华-产品经理</span>
-          <span className="op-resume-tag">默认</span>
-          <span className="op-resume-tag">竞争力分析</span>
-        </div>
-        {/* 更改简历按钮 */}
-        <span className="op-resume-change">更改</span>
-      </div>
+          {/* 使用次数信息 */}
+          <div className="op-credits-row">
+            <span className="op-credits-text">剩余4次</span>
+            <span className="op-credits-link">立即获得无限次数</span>
+          </div>

-      {/* 针对性优化简历按钮 */}
-      <button className="op-optimize-btn">针对性优化简历</button>
+          {/* 简历区域 */}
+          <div className="op-section-label">简历</div>
+          <div className="op-resume-card">
+            <div className="op-resume-avatar">
+              {resumeData?.main?.name ? resumeData.main.name.charAt(0) : "—"}
+            </div>
+            <div className="op-resume-info">
+              <span className="op-resume-name">
+                {resumeData?.main?.name || "暂无简历"}
+              </span>
+              {resumeData && <span className="op-resume-tag">默认</span>}
+            </div>
+            {/* <span className="op-resume-change">更改</span> */}
+          </div>

-      {/* 填写进度区域 */}
-      <div className="op-progress-row">
-        <span className="op-progress-label">填写进度</span>
-        <span className="op-progress-value">50%</span>
-      </div>
-      {/* 进度条 */}
-      <div className="op-progress-bar-bg">
-        <div className="op-progress-bar-fill" />
-      </div>
+          {/* 针对性优化简历按钮 */}
+          <button className="op-optimize-btn">针对性优化简历</button>
+
+          {/* 填写进度区域 */}
+          <div className="op-progress-row">
+            <span className="op-progress-label">填写进度</span>
+            <span className="op-progress-value">50%</span>
+          </div>
+          <div className="op-progress-bar-bg">
+            <div className="op-progress-bar-fill" />
+          </div>
+        </>
+      )}
    </div>
  )
 }
@@ -13,6 +13,7 @@ const envConfigs: Record<string, {
 }> = {
  dev: {
    dataBaseApi: 'http://localhost:8080/api',
+    // aiBaseApi: 'http://192.168.31.133:8000',
    aiBaseApi: 'http://localhost:8000',
    cookieSourceUrl: 'http://192.168.31.135:5173',
  },
@@ -6,8 +6,11 @@

 import styleText from "data-text:~components/SidebarPanel.scss"
 import type { PlasmoCSConfig, PlasmoGetStyle } from "plasmo"
-import { useEffect, useState } from "react"
+import { useEffect, useState, useRef } from "react"
 import { SidebarPanel } from "~components/SidebarPanel"
+import { getCookieValue } from "~utils/cookie"
+import { findJobBySourceUrl } from "~api/dataApi"
+import type { JobInfo } from "~lib/types"

 /** Content Script 配置：匹配所有网页 */
 export const config: PlasmoCSConfig = {
@@ -31,8 +34,38 @@ export const getStyle: PlasmoGetStyle = () => {
 function Sidebar() {
  /** 侧边栏是否可见 */
  const [visible, setVisible] = useState(false)
+  /** 当前标签页的来源链接 */
+  const [sourceUrl, setSourceUrl] = useState("")
+  /** 岗位信息（在 sidebar 层查询，传给 SidebarPanel） */
+  const [jobInfo, setJobInfo] = useState<JobInfo | null>(null)
+  /** 是否已自动打开过面板（避免重复打开） */
+  const autoOpenedRef = useRef(false)

  useEffect(() => {
+    // 页面打开时获取 Token 和当前页面 URL 作为 sourceUrl
+    const currentUrl = window.location.href
+    setSourceUrl(currentUrl)
+    console.log("[OfferPie] 当前页面 sourceUrl:", currentUrl)
+
+    getCookieValue("Token").then((token) => {
+      console.log("[OfferPie] 页面加载时获取到的 Token:", token)
+      if (!token) return
+
+      // 有 token 时，先查询岗位信息，有岗位才自动打开面板
+      findJobBySourceUrl(currentUrl).then((data) => {
+        console.log("[OfferPie] 岗位信息:", data)
+        if (data && data.id) {
+          setJobInfo(data)
+          if (!autoOpenedRef.current) {
+            autoOpenedRef.current = true
+            setVisible(true)
+          }
+        }
+      }).catch((err) => {
+        console.warn("[OfferPie] 查询岗位信息失败:", err)
+      })
+    })
+
    /**
     * 消息监听器：接收来自 background 或 popup 的消息
     * 当收到 TOGGLE_SIDEBAR 消息时，切换侧边栏的显示状态
@@ -40,6 +73,9 @@ function Sidebar() {
    const handler = (message: any) => {
      if (message.type === "TOGGLE_SIDEBAR") {
        setVisible((prev) => !prev)
+        getCookieValue("Token").then((token) => {
+          console.log("[OfferPie] 点击插件按钮时获取到的 Token:", token)
+        })
      }
    }
    chrome.runtime.onMessage.addListener(handler)
@@ -50,7 +86,7 @@ function Sidebar() {
  // 不可见时不渲染任何内容
  if (!visible) return null

-  return <SidebarPanel onClose={() => setVisible(false)} />
+  return <SidebarPanel sourceUrl={sourceUrl} jobInfo={jobInfo} onClose={() => setVisible(false)} />
 }

 export default Sidebar
@@ -268,10 +268,10 @@ export const EXPERIENCE_SECTION_CONFIGS: ExperienceSectionConfig[] = [
 // ============ Mock 简历数据（模拟接口返回） ============

 /**
- * 模拟后端接口返回的完整简历数据
- * 后续会替换为真实接口调用：javaApi.get<ResumeData>("/resume/detail")
+ * 模拟后端接口返回的完整简历数据（测试用）
+ * 已被接口替代，保留用于离线调试
 */
-export function getMockResumeData(): ResumeData {
+export function getMockResumeData2(): ResumeData {
  return {
    main: {
      avatarUrl: "",
@@ -3,6 +3,54 @@
 * 包含简历数据接口、表单标签接口、匹配字段接口、UI组件库配置接口等所有共享类型
 */

+// ============ 岗位信息类型 ============
+
+/** 岗位匹配度详情 */
+export interface JobMatchScoreDto {
+  /** 教育得分（0-100） */
+  educationScore?: number
+  /** 技能得分（0-100） */
+  skillScore?: number
+  /** 经验得分（0-100） */
+  experienceScore?: number
+}
+
+/** 岗位信息 */
+export interface JobInfo {
+  /** 岗位ID */
+  id?: number
+  /** 岗位名称 */
+  title?: string
+  /** 薪资描述 */
+  salary?: string
+  /** 公司名称 */
+  companyName?: string
+  /** 公司简称 */
+  companyShortName?: string
+  /** 公司类型 */
+  companyType?: string
+  /** 公司Logo */
+  companyLogoUrl?: string
+  /** 地区名称 */
+  regionName?: string
+  /** 岗位类型名称 */
+  categoryName?: string
+  /** 岗位标签 */
+  tags?: string[]
+  /** 来源链接 */
+  sourceUrl?: string
+  /** 是否收藏 */
+  isFavorite?: boolean
+  /** 投递状态（null=未投递，0=已投递 1=面试中 2=有Offer 3=未通过 4=已结束） */
+  applicationStatus?: number | null
+  /** 岗位状态（0=有效 1=已下架 2=已过期） */
+  status?: number
+  /** 匹配总分（0-90） */
+  matchScore?: number
+  /** 匹配度详情 */
+  matchDetail?: JobMatchScoreDto
+}
+
 // ============ 简历数据类型 ============

 /** 描述段落（富文本段落） */