2026Ecosentinel项目实训

EcoSentinel项目周度报告

EcoSentinel项目前端开发实战总结

项目概述

EcoSentinel是专注于电商评论数据分析的智能平台，致力于通过AI技术 帮助商家深度挖掘用户反馈价值。作为前端开发负责人，我主要负责数据工程+数据管理、用户画像、市场洞察与报告页面前端页面

项目目标

本周我们项目组聚焦于优化用户画像8维特征工程体系与竞品分析能力的建设，旨在通过KMeans聚类算法实现用户群体划分，构建BHI口碑健康指数体系，以及开发市场趋势追踪功能，为电商评论数据分析提供深度洞察能力，我主要完成了在市场洞察板块的前端界面优化。

实验内容

一、竞品横向对比分析

实现一个竞品横向对比分析页面，包含BHI口碑健康指数排名柱状图、八维对比雷达图、详细指标对比表和AI总结卡片，使用React + TypeScript + Ant Design + ECharts技术栈。

使用技术

React 18 + TypeScript
Ant Design 组件库
ECharts 可视化库
React Query 状态管理

实现成果

1. BHI指数排名柱状图：展示各商品口碑健康指数，排名前三使用金银铜三色区分
2. 八维对比雷达图：平均评分、好评率、差评率、物流体验、产品质量、外观颜值、客服态度、性价比
3. 详细指标对比表：动态列生成，数值精确到3位小数
4. AI竞品总结：大模型自动生成对比分析报告

核心代码

// BHI指数柱状图配置constbhiOption={xAxis:{type:'category',data:result.bhi_ranking.map((p:any)=>p.name)},yAxis:{type:'value',name:'BHI指数',min:0,max:100},series:[{type:'bar',data:result.bhi_ranking.map((p:any)=>({value:p.bhi_score,itemStyle:{color:p.rank===1?'#52c41a':p.rank===2?'#1890ff':p.rank===3?'#fa8c16':'#8c8c8c'},})),}],}// 八维雷达图配置constradarOption={radar:{indicator:Object.keys(DIMENSION_NAMES).map(key=>({name:DIMENSION_NAMES[key],max:1,})),},series:[{type:'radar',data:result.products?.map((product:any,i:number)=>({name:product.name,value:Object.keys(DIMENSION_NAMES).map(key=>result.dimension_comparison?.[i]?.[key]||0),}))||[],}],}

二、市场趋势追踪

实现市场趋势追踪页面，包含关键词热度热力图（Top20词×12期）、新兴词汇标签、衰退词汇标签，支持日/周/月时间粒度切换。

使用技术

React + TypeScript
ECharts热力图组件
Ant Design Select选择器
React Query数据查询

实现成果

1. 关键词热度热力图：展示Top20关键词在近12个时间段内的热度变化
2. 新兴词汇识别：红色标签标注新出现词汇，橙色标注上升趋势词汇
3. 衰退词汇识别：灰色标签标注热度下降词汇
4. 时间粒度切换：支持按日、按周、按月查看趋势

核心代码

// 关键词热度热力图配置constwordHeatOption={xAxis:{type:'category',data:trendData.trend.slice(-12).map((d:any)=>d.period)},yAxis:{type:'category',data:Array.from(newSet(trendData.trend.slice(-12).flatMap((d:any)=>d.top_words.slice(0,10).map((w:any)=>w.word)))).slice(0,20),},visualMap:{min:0,max:50,calculable:true,orient:'horizontal'},series:[{type:'heatmap',data:trendData.trend.slice(-12).flatMap((d:any,xi:number)=>d.top_words.slice(0,10).map((w:any)=>[xi,w.word,w.count])),}],}// 新兴词汇标签{trendData.emerging_words?.slice(0,20).map((w:any)=>(<Tag key={w.word}color={w.type==='new'?'red':'orange'}>{w.type==='new'?'🆕':'📈'}{w.word}({w.count})</Tag>))}

三、报告生成中心

实现报告生成中心页面，支持三种报告模板选择（运营周报、月度分析报告、竞品对标报告），包含生成进度跟踪、历史报告列表、Word/PDF双格式下载功能。

使用技术

React + TypeScript
Ant Design Card/List组件
React Query异步状态管理
轮询机制跟踪生成进度

实现成果

1. 模板选择：卡片式展示三种报告模板，选中状态高亮
2. 生成进度：轮询机制实时跟踪报告生成状态
3. 状态管理：支持已完成、生成中、排队中、失败四种状态
4. 格式下载：支持Word和PDF双格式下载

核心代码

// 报告模板配置constTEMPLATE_INFO={weekly:{title:'运营周报',desc:'近7天评论总量、情感趋势、Top3差评原因',icon:'📅'},monthly:{title:'月度分析报告',desc:'LDA主题分析、用户画像、归因分析',icon:'📊'},competitor:{title:'竞品对标报告',desc:'BHI指数、五维对比雷达图',icon:'⚖️'},}// 状态配置constSTATUS_CONFIG={done:{badge:'success',text:'已完成',icon:<CheckCircleOutlined/>},running:{badge:'processing',text:'生成中…',icon:<SyncOutlined spin/>},pending:{badge:'default',text:'排队中',icon:<SyncOutlined/>},failed:{badge:'error',text:'失败',icon:<CloseCircleOutlined/>},}// 轮询机制useEffect(()=>{consthasInProgress=items.some(r=>r.status==='pending'||r.status==='running')setShouldPoll(hasInProgress)},[reportsData])

四、营销文案生成

实现营销文案生成页面，支持多种风格选择（高级质感风、小红书种草风、专业硬核风等）、多平台适配（商品标题、详情页文案、短视频口播等）、场景选择，以及文案质量评分展示。

使用技术

React + TypeScript
Ant Design Tabs/Tag组件
ECharts图表
剪贴板API

实现成果

1. 风格选择：5种文案风格可选，每种风格有独特的颜色和图标
2. 平台适配**：支持商品标题、详情页文案、短视频口播、小红书种草、朋友圈文案、广告语
3. 场景选择：通勤、居家、送礼、出差旅行、学生宿舍
4. 质量评分：原创性、吸引力、转化率潜力、合规性、风格匹配度、卖点命中率

核心代码

// 风格配置constSTYLE_META={quality:{name:'高级质感风',color:'#595959',icon:<StarOutlined/>},xiaohongshu:{name:'小红书种草风',color:'#ff2442',icon:<HeartOutlined/>},professional:{name:'专业硬核风',color:'#1890ff',icon:<ThunderboltOutlined/>},emotional:{name:'温情走心风',color:'#fa8c16',icon:<HeartOutlined/>},promotional:{name:'促销逼单风',color:'#f5222d',icon:<FireOutlined/>},}// 平台配置constPLATFORM_META={title:{name:'商品标题',limit:'≤30字',color:'#1890ff'},detail_page:{name:'详情页文案',limit:'≥80字',color:'#52c41a'},short_video:{name:'短视频口播',limit:'30~60字',color:'#722ed1'},xiaohongshu:{name:'小红书种草',limit:'50~100字',color:'#ff2442'},}// 复制按钮组件functionCopyButton({text}){consthandleCopy=()=>{navigator.clipboard.writeText(text).then(()=>{message.success('已复制到剪贴板')})}return<Button icon={<CopyOutlined/>}onClick={handleCopy}/>}

市场洞察模块通过四个核心页面为用户提供全面的市场分析能力：

这些页面共同构成了一个完整的市场洞察分析平台，帮助商家从竞品分析、趋势追踪、报告生成到营销文案一站式完成市场分析工作。

个人感悟

参与 EcoSentinel 电商评论分析平台的前端开发，让我对数据可视化和用户体验有了更深的理解。从数据管理的拖拽上传，到用户画像的八维雷达图，再到市场洞察的热力图和报告生成中心，每一个模块都是一次从需求到实现的完整旅程。最让我印象深刻的是如何将复杂的多维数据转化为直观的图表，需要在技术实现和用户理解之间找到平衡。

这段经历让我深刻体会到组件化开发的重要性，也认识到数据可视化不仅仅是展示数据，更是讲述数据之下的故事。同时，尽管AI 辅助工具大大提高了开发效率，但开发者的核心价值在于对业务需求的深度理解和对用户体验的精准把握。团队协作中，良好的沟通才是项目顺利推进的关键。