57e6af74f5
主要更新： 1. CoursesVideoPlayer组件：修复了白底logo容器边框样式 2. 专家支持中心： - 导入文旅产业问答数据 - 清空今天板块对话记录 - 禁用新建对话按钮，添加hover提示"非学员无权限" 3. 就业管家知识树：整个页面替换为iframe嵌入网页 4. 项目库：为四川大熊猫扇子项目添加3张效果图 5. 简历面试模拟：为活动执行和活动策划师岗位添加删除线修改版本 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
330 lines
14 KiB
JavaScript
330 lines
14 KiB
JavaScript
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)}>详情 ></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>详情 ></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">详情 ></span>
|
||
</div>
|
||
</li>
|
||
</Tooltip>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<ProjectCasesModal
|
||
data={modalData}
|
||
visible={projectCasesModalVisible}
|
||
onClose={handleCloseModal}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ProjectLibrary;
|