仪表盘接口调整

src/pages/ResumeInterviewPage/index.jsx

@@ -1,15 +1,15 @@
 import { useRef, useState, useEffect } from "react";
 import InterviewQuestionsModal from "./components/InterviewQuestionsModal";
-import { mockData } from "@/data/mockData";
+import { getPageData } from "@/services/resumeInterview";
 
 import "./index.css";
 
-const { resumeInterview } = mockData;
-
 const ResumeInterviewPage = () => {
   const [activeIndustry, setActiveIndustry] = useState("frontend");
   const [resumeModalVisible, setResumeModalVisible] = useState(false);
   const [modalData, setModalData] = useState(undefined);
+  const [pageData, setPageData] = useState(null);
+  const [loading, setLoading] = useState(true);
   const sectionsRef = useRef({});
 
   // 导航到指定行业段落
@@ -32,12 +32,37 @@ const ResumeInterviewPage = () => {
     setModalData(undefined);
   };
 
+  // 获取页面数据
+  useEffect(() => {
+    const fetchPageData = async () => {
+      try {
+        setLoading(true);
+        const response = await getPageData();
+        if (response.success) {
+          setPageData(response.data);
+          // 设置默认选中第一个行业
+          if (response.data.industries && response.data.industries.length > 0) {
+            setActiveIndustry(response.data.industries[0].id);
+          }
+        }
+      } catch (error) {
+        console.error("Failed to fetch page data:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPageData();
+  }, []);
+
   // 监听滚动位置更新导航状态
   useEffect(() => {
+    if (!pageData?.industries) return;
+
     const handleScroll = () => {
       const scrollPosition = window.scrollY + 200;
 
-      resumeInterview.industries.forEach((industry) => {
+      pageData.industries.forEach((industry) => {
         const section = sectionsRef.current[industry.id];
         if (section) {
           const sectionTop = section.offsetTop;
@@ -52,12 +77,28 @@ const ResumeInterviewPage = () => {
 
     window.addEventListener("scroll", handleScroll);
     return () => window.removeEventListener("scroll", handleScroll);
-  }, [resumeInterview.industries]);
+  }, [pageData?.industries]);
+
+  if (loading) {
+    return (
+      <div className="resume-interview-page">
+        <div className="loading">加载中...</div>
+      </div>
+    );
+  }
+
+  if (!pageData) {
+    return (
+      <div className="resume-interview-page">
+        <div className="error">加载失败，请刷新重试</div>
+      </div>
+    );
+  }
 
   return (
     <div className="resume-interview-page">
       <ul className="resume-interview-navigation">
-        {resumeInterview.industries.map((industry) => (
+        {pageData.industries.map((industry) => (
           <li
             key={industry.id}
             className={`resume-interview-navigation-item ${
@@ -70,7 +111,7 @@ const ResumeInterviewPage = () => {
         ))}
       </ul>
       <ul className="resume-interview-content-wrapper">
-        {resumeInterview?.industries?.map((item) => (
+        {pageData.industries.map((item) => (
           <li
             className="resume-interview-content-item-wrapper"
             key={item.id}
@@ -80,23 +121,26 @@ const ResumeInterviewPage = () => {
             <p className="item-subtitle">简历与面试题</p>
             <div className="item-content-wrapper">
               <ul className="jobs-list">
-                {item.positions.map((i) => (
-                  <li className="job-item job-item-change" key={i.id}>
-                    <span>{i.level}</span>
+                {item.positions.map((position) => (
+                  <li className="job-item job-item-change" key={position.id}>
+                    <span>{position.level}</span>
                     <div className="job-name">
-                      <p>{i.name}</p>
+                      <p>{position.name}</p>
                       <span>详情 &gt;</span>
                     </div>
                   </li>
                 ))}
               </ul>
               <ul className="resumes-list">
-                <li
-                  className="resume-item"
-                  onClick={() => handleHookQuestionClick(item)}
-                >
-                  <p>面试题1122345</p>
-                </li>
+                {item.questions.map((question) => (
+                  <li
+                    key={question.id}
+                    className="resume-item"
+                    onClick={() => handleHookQuestionClick({ ...item, question })}
+                  >
+                    <p>{question.question}</p>
+                  </li>
+                ))}
               </ul>
             </div>
           </li>
@@ -105,6 +149,7 @@ const ResumeInterviewPage = () => {
       <InterviewQuestionsModal
         visible={resumeModalVisible}
         onClose={handleCloseModal}
+        data={modalData}
       />
     </div>
   );