feat: 🎸 更新了很多信息

src/pages/Portfolio/index.css

@@ -57,7 +57,11 @@
         border: 1px solid #e5e6eb;
         margin-right: 20px;
         margin-bottom: 20px;
-
+        overflow: hidden;
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-direction: column;
         > span {
           border: 1px solid #2c7aff;
           background-color: #e8f3ff;
@@ -69,7 +73,7 @@
           font-size: 12px;
           font-weight: 600;
         }
-        > div {
+        .user-portfolio-item-content {
           width: 100%;
           height: 24px;
           display: flex;

src/pages/Portfolio/index.jsx

@@ -1,16 +1,29 @@
 import { Input } from "@arco-design/web-react";
+import { useState } from "react";
 import { mockData } from "@/data/mockData";
+import ProjectCasesModal from "@/pages/ProjectLibraryPage/components/ProjectCasesModal";
 import "./index.css";
 
 const InputSearch = Input.Search;
 const { projectLibrary } = mockData;
 
 const Portfolio = () => {
+  const [modalData, setModalData] = useState(undefined);
+  const [projectCasesModalVisible, setProjectCasesModalVisible] =
+    useState(false);
+
+  const handleCloseModal = () => {
+    setProjectCasesModalVisible(false);
+    setModalData(undefined);
+  };
+
   const onSearch = (value) => {
     console.log(value);
   };
 
-  const handleClickBtn = () => {
+  const handleClickBtn = (item) => {
+    setModalData(item);
+    setProjectCasesModalVisible(true);
     console.log("点击了详情按钮");
   };
 
@@ -28,14 +41,19 @@ const Portfolio = () => {
           {projectLibrary?.projects?.map((item) => (
             <li className="user-portfolio-item" key={item.id}>
               <span>{item.subtitle}</span>
-              <div>
+              <div className="user-portfolio-item-content">
                 <p>{item.title}</p>
-                <span onClick={() => handleClickBtn()}>详情 &gt; </span>
+                <span onClick={() => handleClickBtn(item)}>详情 &gt; </span>
               </div>
             </li>
           ))}
         </ul>
       </div>
+      <ProjectCasesModal
+        data={modalData}
+        visible={projectCasesModalVisible}
+        onClose={handleCloseModal}
+      />
     </div>
   );
 };