teach_sys_Demo/src/pages/ProjectLibraryPage/index.jsx

import { useState } from "react";
import { Tooltip } from "@arco-design/web-react";
import toast from "@/components/Toast";
import InfiniteScroll from "@/components/InfiniteScroll";
import ProjectCasesModal from "./components/ProjectCasesModal";
import { getProjectsList, getProjectsdetail } from "@/services/projectLibrary";
// 我的项目库数据
const myProjectsData = [
  {
    unitName: "商业活动策略设计与创意策划",
    projects: [
      "校园特色摆摊创意策划与出摊运营项目",
      "社区水果店节日促销创意方案设计与落地执行项目"
    ]
  },
  {
    unitName: "商业活动全程策划执行与运营优化",
    projects: [
      "社区便利店促销活动策划落地项目",
      "校园二手物品交易活动策划执行与运营项目"
    ]
  },
  {
    unitName: "商业空间与文创产品设计",
    projects: [
      "街边小型咖啡馆主题空间布置与配套文创周边设计项目",
      "社区书店文创体验区空间规划项目"
    ]
  },
  {
    unitName: "短视频与自媒体运营",
    projects: [
      "本地某餐厅生活服务新媒体账号运营项目",
      "某猫咖宠物日常类短视频账号运营实操项目"
    ]
  },
  {
    unitName: "漫展与二次元活动策划与执行",
    projects: [
      "南京 Comic Festival 周边展区活动统筹项目",
      "盐城 ICGC 动漫嘉年华品牌互动区运营项目"
    ]
  },
  {
    unitName: "户外音乐节主题策划与流程统筹",
    projects: [
      "青春旋律校园户外音乐节活动策划与实施项目",
      "环湖露天音乐节活动策划与组织项目"
    ]
  },
  {
    unitName: "城市 IP 赛事活动整合与策划",
    projects: [
      "2025 城市电竞对抗赛整体策划与落地项目",
      "城市龙舟赛活动统筹与文化主题策划项目",
      "成都跑酷&街舞跨界赛事活动策划与组织项目"
    ]
  },
  {
    unitName: "消费电子展品牌策划与执行",
    projects: [
      "智能穿戴设备消费电子展展区策划与执行项目",
      "智能生活类消费电子展策划项目"
    ]
  },
  {
    unitName: "品牌招商展全案策划与招商运营",
    projects: [
      "苏州文旅文创产业品牌招商展策划与落地运营项目",
      "南京青年创客品牌招商展策划项目"
    ]
  },
  {
    unitName: "商业街区打卡空间视觉呈现",
    projects: [
      "南京老门东历史街区创意打卡点策划项目",
      "苏州观前街沉浸式商业打卡体验空间设计项目",
      "无锡拈花湾文旅商业街区夜景灯光打卡点策划项目"
    ]
  },
  {
    unitName: "文旅衍生文创产品设计",
    projects: [
      "南京云锦纹样衍生丝巾与服饰配件设计项目",
      "苏州园林拙政园窗棂纹样衍生文创书签与文具设计项目"
    ]
  }
];
import "./index.css";


const PAGE_SIZE = 10;

const ProjectLibrary = () => {
  // 处理我的项目数据
  const processMyProjects = () => {
    const projects = [];
    myProjectsData.forEach(unit => {
      unit.projects.forEach(projectName => {
        projects.push({
          id: `my-${projects.length + 1}`,
          unitName: unit.unitName,
          name: projectName,
          isMyProject: true
        });
      });
    });
    return projects;
  };

  const myProjects = processMyProjects();

  // 三个可点击查看的特殊项目
  const clickableProjects = [
    {
      id: "clickable-1",
      name: "宝可梦品牌青春治愈系全场景视觉与周边设计策划方案",
      unitName: "商业空间与文创产品设计",
      isClickable: true,
      content: {
        title: "宝可梦品牌青春治愈系全场景视觉与周边设计策划方案",
        description: "本套设计围绕让品牌成为可触摸的生活伙伴核心理念，打造视觉统一+场景沉浸的全链路品牌表达系统。",
        images: [
          { url: "/images/project-library/29aab970-92d1-4a79-84d3-5a29d9e299eb.jpeg", title: "奶茶杯设计" },
          { url: "/images/project-library/20250824-121446.jpg", title: "品牌海报设计" },
          { url: "/images/project-library/outputs_20250824_3k4iaqnnbt.jpeg", title: "线下空间设计" },
          { url: "/images/project-library/img_v3_02pf_f256578f-91f0-43f6-9e25-37fe423fd23g.jpg", title: "帽子周边设计" }
        ],
        sections: [
          {
            title: "一、设计说明",
            content: "本套设计围绕让品牌成为可触摸的生活伙伴核心理念，打造视觉统一+场景沉浸的全链路品牌表达系统。整体风格融合清新潮酷与温暖治愈，以马卡龙渐变色系+软萌IP符号为核心视觉语言，串联周边产品（奶茶杯、帽子）、线下空间、视觉海报三大场景，核心方向聚焦从视觉符号到情感连接——通过产品的实用性、空间的体验感、海报的传播力，将品牌年轻、治愈、有温度的认知，转化为用户可感知、可参与、可分享的生活场景，强化品牌=青春治愈伙伴的心智联想。"
          },
          {
            title: "二、设计亮点", 
            content: `1. 全场景视觉闭环：从周边产品的细节图案（如奶茶杯的渐变花纹、帽子的IP刺绣），到空间设计的元素延续（如墙面装饰呼应杯子造型），再到海报的色彩体系，所有设计均源于同一IP视觉库，实现看海报→逛空间→买周边的认知连贯，让品牌记忆点在不同场景中反复强化。

2. 情感化仪式感植入：奶茶杯内置温度感应隐藏图案（倒入热饮后浮现IP符号），将喝奶茶变成解锁小惊喜的仪式；空间设计预留奶茶杯打卡墙（与周边杯子1:10比例的巨型装置），满足用户拍美照、晒社交的需求；帽子采用可拆卸IP徽章，让用户通过DIY搭配，将品牌元素融入个人风格，增加互动感。

3. 年轻群体精准共鸣：色彩选择（浅粉、淡蓝、奶黄）契合Z世代治愈系审美，图案设计用简笔奶茶泡、软萌云朵等拟态符号，降低认知门槛；所有产品均兼顾潮流性与实用性（如帽子的软顶版型适配日常穿搭、杯子的防烫材质适合高频使用），让设计不仅好看，更好用。`
          }
        ]
      }
    },
    {
      id: "clickable-2", 
      name: "四川大熊猫扇子文创产品设计",
      unitName: "文旅衍生文创产品设计",
      isClickable: true,
      content: {
        title: "四川大熊猫扇子文创产品设计",
        description: "以\"熊猫·蜀韵\"为核心主题，聚焦\"四川文化的当代表达\"，将\"大熊猫、蜀绣、传统折扇\"三大符号融合为兼具文化意味与日常实用的文创产品。",
        images: [
          { url: "/images/project-library/四川大熊猫扇子设计图.jpeg", title: "熊猫扇子效果图" },
          { url: "/images/project-library/四川大熊猫扇子项目效果图2.jpg", title: "熊猫扇子展开效果" },
          { url: "/images/project-library/四川大熊猫扇子项目效果图3.jpg", title: "熊猫扇子细节展示" },
          { url: "/images/project-library/四川大熊猫扇子项目效果图4.jpg", title: "熊猫扇子包装设计" }
        ],
        sections: [
          {
            title: "一、项目介绍",
            content: "本方案以\"熊猫·蜀韵\"为核心主题，聚焦\"四川文化的当代表达\"，旨在将\"大熊猫、蜀绣、传统折扇\"三大符号，融合为兼具文化意味与日常实用的文创产品。整体风格定位为「熊猫蜀绣·新雅致」——既保留四川非遗的文化内核（如蜀绣的精细针法、大熊猫的国宝形象、川地传统折扇），又摒弃单纯\"符号拼贴\"的套路，转而用简洁的线条、精细的工艺和舒适的材质，让熊猫与蜀韵真正走进日常场景。"
          },
          {
            title: "二、设计策划案",
            content: "以 \"新中式非遗美学\" 为核心风格，融合四川 \"自然生态\" 与 \"非遗技艺\" 双重属性 —— 扇面以柔和雅致的 \"竹绿 + 浅金 + 淡青\" 为基调，搭配双宫绸的温润光泽与蜀绣的细腻针脚，营造 \"雅致不张扬、精致不堆砌\" 的视觉质感；扇骨采用四川楠竹碳化工艺，浅褐色自然纹理与浅青色棉麻流苏呼应，整体呈现 \"自然材质承载非遗文化\" 的和谐氛围。"
          }
        ]
      }
    },
    {
      id: "clickable-3",
      name: "戴森吹风机：科技护发新风尚品牌运营策划案", 
      unitName: "短视频与自媒体运营",
      isClickable: true,
      content: {
        title: "《戴森吹风机：科技护发新风尚》品牌运营策划案",
        description: "通过整合营销文案、宣传方案、活动策划及私域运营方案，全面提升戴森吹风机在目标消费群体中的品牌影响力与市场转化率。",
        images: [
          { url: "/images/project-library/1.png", title: "品牌视觉设计" },
          { url: "/images/project-library/2.png", title: "产品展示设计" },
          { url: "/images/project-library/3.png", title: "营销物料设计" },
          { url: "/images/project-library/4.png", title: "活动策划方案" }
        ],
        sections: [
          {
            title: "一、项目介绍", 
            content: "本项目旨在通过整合营销文案、宣传方案、活动策划及私域运营方案，全面提升戴森吹风机在目标消费群体中的品牌影响力与市场转化率。项目以\"高端科技+精致生活\"为核心定位，既关注产品性能优势的突出，也注重用户体验的细腻塑造。通过线上线下结合的多渠道传播，项目将实现从品牌认知、兴趣激发、消费决策到复购沉淀的闭环路径。"
          },
          {
            title: "二、品牌运营策略",
            content: "以\"高端科技美学\"为核心风格，融合\"科技感\"与\"人性化\"双重属性——文案以简洁、专业、富有科技感的语言为基础，搭配生动、贴近生活的案例和情感化表达，营造\"科技不冰冷、高端亦亲和\"的语言质感；视觉设计上，以戴森标志性的蓝色为主色调，搭配简洁的线条和现代感的排版，整体呈现\"科技与人文融合\"的和谐氛围。"
          }
        ]
      }
    }
  ];
  const [modalData, setModalData] = useState(undefined);
  const [projectList, setProjectList] = useState([]);
  const [projectCasesModalVisible, setProjectCasesModalVisible] =
    useState(false);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);



  const handleProjectClick = async (item) => {
    // 如果是我的普通项目，不允许点击
    if (item?.isMyProject && !item?.isClickable) {
      return;
    }
    
    // 如果是可点击的特殊项目，直接显示内容
    if (item?.isClickable && item?.content) {
      setModalData(item.content);
      setProjectCasesModalVisible(true);
      return;
    }
    
    if (item?.id) {
      const res = await getProjectsdetail(item.id);
      if (res.success) {
        setModalData(res.data);
        setProjectCasesModalVisible(true);
      } else {
        toast.error(res.message);
      }
    } else {
      toast.error("加载数据失败，请刷新重试");
    }
  };

  const handleCloseModal = () => {
    setProjectCasesModalVisible(false);
    setModalData(undefined);
  };

  const fetchProjects = async (pageNum) => {
    try {
      const res = await getProjectsList({
        page: pageNum ?? page,
        pageSize: PAGE_SIZE,
      });
      if (res.success) {
        setProjectList((prevList) => {
          const newList = [...prevList, ...res.data];
          if (res.total === newList?.length) {
            setHasMore(false);
          } else {
            setPage((prevPage) => prevPage + 1);
          }
          return newList;
        });
      }
    } catch (error) {
      console.error("Failed to fetch projects:", error);
    }
  };

  return (
    <div className="project-library-page">
      <div className="project-library-wrapper">
        <p className="project-library-title">文旅班级项目库</p>
        <InfiniteScroll
          loadMore={fetchProjects}
          hasMore={hasMore}
          empty={projectList.length === 0}
          className="project-library-list"
        >
          {projectList.map((item) => (
            <li className="project-library-item" key={item.id}>
              <p className="project-library-item-title">{item.description}</p>
              <div>
                <p>{item.name}</p>
                <span onClick={() => handleProjectClick(item)}>详情 &gt;</span>
              </div>
            </li>
          ))}
        </InfiniteScroll>
      </div>
      
      {/* 我的项目库板块 */}
      <div className="project-library-wrapper my-project-library">
        <p className="project-library-title">我完成的项目库</p>
        <div className="project-library-list">
          {/* 可点击的特殊项目 */}
          {clickableProjects.map((item) => (
            <li 
              key={item.id} 
              className="project-library-item clickable-project-item"
              onClick={() => handleProjectClick(item)}
            >
              <p className="project-library-item-title">{item.unitName}</p>
              <div>
                <p>{item.name}</p>
                <span>详情 &gt;</span>
              </div>
            </li>
          ))}
          
          {/* 普通的灰色项目 */}
          {myProjects.map((item) => (
            <Tooltip 
              key={item.id}
              content="非学员及导师无查看权限"
              position="top"
            >
              <li className="project-library-item my-project-item">
                <p className="project-library-item-title">{item.unitName}</p>
                <div>
                  <p>{item.name}</p>
                  <span className="disabled-detail">详情 &gt;</span>
                </div>
              </li>
            </Tooltip>
          ))}
        </div>
      </div>
      
      <ProjectCasesModal
        data={modalData}
        visible={projectCasesModalVisible}
        onClose={handleCloseModal}
      />
    </div>
  );
};

export default ProjectLibrary;