HarmonyOS ArkTS 实战校园竞赛报名与项目管理完整实现摘要项目难度⭐⭐⭐ 中级实战适用人群有 ArkTS 基础、希望学习学习类应用开发的 HarmonyOS 开发者开发环境DevEco Studio Next / API 24代码规模单页面约 700 行可直接运行通过本项目你将掌握进度条组件的实现与进度状态管理多模型关联的数据结构设计竞赛日历与时间轴展示技巧组队管理与成员增删逻辑项目状态流转与获奖展示目录[一、项目概述与功能架构][1.1 应用场景与项目价值][1.2 完整功能清单][1.3 技术选型说明][二、数据结构设计][2.1 团队成员模型 TeamMember][2.2 竞赛模型 Competition][2.3 项目模型 Project][2.4 设计思路说明][三、核心功能实现详解][3.1 竞赛浏览与筛选][3.2 报名竞赛与创建项目][3.3 团队成员管理][3.4 项目进度更新][四、UI 设计与交互体验][4.1 整体布局结构][4.2 主题色与视觉规范][4.3 状态视觉区分表][五、关键技术点解析][5.1 进度条的设计与实现思路][5.2 多对多关系的数据建模][六、常见问题与优化建议][七、项目总结与扩展方向][附录运行方式]一、项目概述与功能架构1.1 应用场景与项目价值学科竞赛是大学生活的重要组成部分从互联网“到挑战杯”从数学建模到程序设计竞赛各类竞赛为学生提供了实践锻炼和能力提升的广阔平台。然而竞赛信息分散、组队困难、项目进度难以追踪等问题一直困扰着参赛学生。本项目基于 HarmonyOS ArkTS 实现了一个校园竞赛报名与项目管理应用整合了竞赛信息浏览、在线报名、组队管理、进度跟踪、作品提交、获奖记录等全流程功能帮助学生系统化管理竞赛生涯。项目核心价值信息聚合价值集中展示各类竞赛信息避免信息遗漏协作效率价值系统化的组队和项目管理提升团队协作效率成长记录价值完整记录参赛历程和获奖情况形成个人成长档案1.2 完整功能清单功能模块具体功能实现难度⭐竞赛信息竞赛浏览、按类型筛选、竞赛详情、收藏竞赛⭐⭐报名参赛在线报名、选择赛道、填写信息、报名确认⭐⭐组队管理创建团队、添加成员、成员角色分配、人数限制⭐⭐⭐项目管理项目创建、进度跟踪、状态更新、作品提交⭐⭐⭐获奖记录获奖展示、证书管理、奖项统计、荣誉墙⭐⭐辅助功能竞赛日历、报名提醒、赛程安排、数据统计⭐⭐⭐1.3 技术选型说明技术维度选型方案选型理由开发语言ArkTS强类型支持适合复杂业务逻辑和多模型关联场景状态管理State 装饰器单页面应用轻量方案响应式更新及时UI 组件ArkUI 基础组件 自定义进度条灵活定制满足进度可视化需求数据存储内存状态演示简化生产环境建议接入云端数据库最低版本API 24兼容主流 HarmonyOS 设备⚠️ 注意本项目为前端演示版本报名、组队等操作均在本地模拟。真实竞赛系统需要对接学校教务系统或竞赛组委会后台进行身份核验和数据同步。二、数据结构设计2.1 团队成员模型 TeamMember团队成员是项目的参与者每个人有明确的角色分工。/** * 团队成员数据模型 * 描述参赛团队中单个成员的信息 */interfaceTeamMember{name:string;// 成员姓名studentId:string;// 学号role:string;// 角色队长/技术/文案/设计 等}2.2 竞赛模型 Competition竞赛是整个系统的基础实体包含竞赛的基本信息和报名状态。/** * 竞赛数据模型 * 描述单个竞赛的完整信息 */interfaceCompetition{id:number;// 竞赛IDname:string;// 竞赛名称type:string;// 竞赛类型学科类/创新创业类/文体类level:string;// 竞赛级别校级/省级/国家级/国际级deadline:string;// 报名截止时间award:string;// 最高奖项设置description:string;// 竞赛简介organizer:string;// 主办方maxMembers:number;// 每队最大人数status:string;// 报名状态报名中/已截止/进行中/已结束isCollected:boolean;// 是否已收藏}2.3 项目模型 Project项目是学生报名竞赛后产生的参赛实体关联具体竞赛和团队成员。/** * 参赛项目数据模型 * 记录学生参与某个竞赛的具体项目信息 */interfaceProject{id:number;// 项目IDcompetitionId:number;// 关联的竞赛IDcompetitionName:string;// 竞赛名称冗余存储便于展示projectName:string;// 项目名称members:TeamMember[];// 团队成员列表progress:number;// 项目进度 0-100status:string;// 项目状态进行中/已提交/已获奖/未获奖submitTime:string;// 提交时间award:string;// 获得奖项}2.4 设计思路说明为什么采用竞赛-项目分离的双层模型这是一个典型的一对多关系设计语义清晰竞赛是赛事项目是我的参赛记录两者概念不同灵活扩展同一个竞赛可以报名多个项目不同赛道同一个项目也可能跨竞赛参赛状态独立竞赛的报名状态和项目的完成状态是两个维度分开管理更清晰数据解耦竞赛信息是公共数据项目是个人数据分离后便于权限控制关于成员角色的设计考量角色字段采用字符串而非枚举原因是不同竞赛的角色分工差异很大技术赛和商业赛角色完全不同字符串灵活性高用户可以自定义角色名称演示项目简化处理生产环境可建立角色字典表三、核心功能实现详解3.1 页面状态初始化/** * 页面状态变量定义 */StateprivateprojectNameText:string;// 新项目名称输入StateprivatememberNameText:string;// 新成员姓名输入StateprivateselectedType:string全部;// 竞赛筛选类型StateprivatenextProjectId:number5;// 下一个项目IDStateprivatecompetitions:Competition[][];// 竞赛列表Stateprivateprojects:Project[][];// 我的项目列表3.2 竞赛浏览与筛选/** * 获取筛选后的竞赛列表 * 支持按类型筛选和收藏筛选 */privategetFilteredCompetitions():Competition[]{letresultthis.competitions;// 按类型筛选if(this.selectedType!全部){resultresult.filter(cc.typethis.selectedType);}// 按截止时间排序即将截止的排在前面returnresult.sort((a,b){returnnewDate(a.deadline).getTime()-newDate(b.deadline).getTime();});}/** * 切换竞赛收藏状态 * param compId 竞赛ID */privatetoggleCollectCompetition(compId:number):void{this.competitionsthis.competitions.map(c{if(c.idcompId){return{...c,isCollected:!c.isCollected};}returnc;});}3.3 报名竞赛与创建项目用户报名某个竞赛时会自动创建一个关联的项目记录。/** * 报名竞赛并创建项目 * param compId 竞赛ID * param compName 竞赛名称 */privateregisterCompetition(compId:number,compName:string):void{// 校验项目名称constprojectNamethis.projectNameText.trim();if(projectName.length0){// 生产环境增加提示return;}// 创建新项目constproject:Project{id:this.nextProjectId,competitionId:compId,competitionName:compName,projectName:projectName,members:[],progress:0,status:进行中,submitTime:,award:};this.projects[project,...this.projects];this.nextProjectId;this.projectNameText;}3.4 团队成员管理添加和移除团队成员同时校验人数上限。/** * 向项目添加团队成员 * param projectId 项目ID * param maxMembers 最大人数限制来自竞赛配置 */privateaddTeamMember(projectId:number,maxMembers:number):void{constmemberNamethis.memberNameText.trim();if(memberName.length0)return;this.projectsthis.projects.map(p{if(p.idprojectId){// 校验人数上限if(p.members.lengthmaxMembers){// 已达人数上限生产环境提示用户returnp;}constnewMember:TeamMember{name:memberName,studentId:,role:成员};return{...p,members:[...p.members,newMember]};}returnp;});this.memberNameText;}/** * 移除团队成员 * param projectId 项目ID * param memberIndex 成员索引 */privateremoveTeamMember(projectId:number,memberIndex:number):void{this.projectsthis.projects.map(p{if(p.idprojectId){constnewMembersp.members.filter((_,idx)idx!memberIndex);return{...p,members:newMembers};}returnp;});}3.5 项目进度更新进度条是项目管理的核心可视化组件支持步进更新和直接设置。/** * 更新项目进度 * param projectId 项目ID * param progress 新的进度值0-100 */privateupdateProgress(projectId:number,progress:number):void{// 进度值边界校验constvalidProgressMath.max(0,Math.min(100,progress));this.projectsthis.projects.map(p{if(p.idprojectId){letnewStatusp.status;// 进度达到100%自动标记为待提交状态if(validProgress100p.status进行中){newStatus待提交;}return{...p,progress:validProgress,status:newStatus};}returnp;});}/** * 标记项目已提交 */privatesubmitProject(projectId:number):void{this.projectsthis.projects.map(p{if(p.idprojectId){return{...p,status:已提交,submitTime:newDate().toLocaleString(),progress:100};}returnp;});}四、UI 设计与交互体验4.1 整体布局结构┌─────────────────────────┐ │ 顶部数据统计栏 │ ← 进行中/已获奖/参赛数/团队人数 ├─────────────────────────┤ │ Tab 切换栏 │ ← 竞赛大厅 / 我的项目 ├─────────────────────────┤ │ 筛选标签栏 │ ← 按类型/级别筛选 ├─────────────────────────┤ │ │ │ 列表内容区 │ ← 竞赛卡片 或 项目卡片 │ │ └─────────────────────────┘4.2 主题色与视觉规范主色调亮蓝色 #3B82F6选择亮蓝色作为主题色的设计考量科技感契合蓝色是科技、创新、智慧的代表色与学科竞赛的学术属性高度匹配专业感传递相比活泼的暖色调蓝色传递理性、专业、可信赖的视觉感受状态扩展性强蓝色系有丰富的色阶变化可用于进度条渐变、级别区分等场景护眼长时间使用竞赛准备是长时间的活动低饱和度蓝色视觉疲劳度更低辅助色规范主色调#3B82F6亮蓝色进度条填充#3B82F6 → #60A5FA 渐变国家级竞赛#EF4444红色标签最高优先级省级竞赛#F59E0B琥珀色标签校级竞赛#6B7280灰色标签获奖高亮#F59E0B金色徽章4.3 状态视觉区分表项目状态进度条颜色状态标签操作按钮进行中蓝色渐变蓝色实心标签更新进度、添加成员待提交蓝色满格蓝色闪烁标签提交作品已提交绿色满格绿色实心标签查看详情已获奖金色渐变金色徽章 奖项名查看证书未获奖灰色满格灰色空心标签复盘总结竞赛级别标签颜色视觉权重排序优先级国际级深紫色最高1国家级红色高2省级琥珀色中3校级灰色低4五、关键技术点解析5.1 进度条的设计与实现思路进度条是项目管理类应用的核心视觉组件设计时需要考虑多个维度视觉设计三要素背景轨道浅灰色背景定义进度条的总长度和边界填充进度主题色渐变填充宽度随进度值变化进度文本百分比数字放在进度条右侧或内部交互设计要点进度变化时增加平滑过渡动画避免生硬跳动不同阶段使用不同颜色如0-30%起步、30-80%进行中、80-100%冲刺关键节点25%/50%/75%/100%可增加里程碑标记技术实现方案在 ArkUI 中可以使用 Stack 组件叠加背景和填充通过 width 属性控制填充比例配合 animation 实现平滑过渡。5.2 多对多关系的数据建模学生和竞赛之间本质上是多对多关系一个学生可以参加多个竞赛一个竞赛有多个学生参加。本项目的简化方案通过 Project 中间表实现关联Project 同时持有 competitionId 和成员列表形成竞赛-项目-成员的三级结构。生产环境的标准方案建立 User 表、Competition 表、Team 表、TeamMember 表Team 关联 CompetitionTeamMember 关联 Team 和 User支持一个用户加入多个团队一个团队对应一个竞赛这种设计虽然复杂但支持更丰富的业务场景如跨项目人员复用、历史队伍复用等。六、常见问题与优化建议踩坑点 1进度值边界溢出问题表现用户连续点击增加进度导致进度超过100%或低于0%解决方案更新进度时使用Math.max(0, Math.min(100, value))进行边界钳制踩坑点 2成员重复添加问题表现同一个人被多次添加到团队中解决方案添加前根据学号或姓名查重重复则提示不添加踩坑点 3截止时间计算错误问题表现跨时区或日期格式问题导致倒计时不准解决方案统一使用时间戳存储和计算展示层再格式化踩坑点 4竞赛列表排序混乱问题表现筛选后排序逻辑失效已截止的竞赛排在前面解决方案按状态分组排序报名中优先同状态内按截止时间升序优化方向增加竞赛日历视图以月历形式展示各竞赛时间节点实现组队大厅功能支持发布招人信息和寻找队伍接入导师匹配系统根据竞赛类型推荐指导老师增加作品互评功能赛前互相评审提升作品质量七、项目总结与扩展方向核心收获通过完成竞赛报名与项目管理项目你将掌握多模型关联的数据结构设计方法进度条组件的实现与动画优化团队成员增删改的完整管理逻辑列表筛选与多维度排序的实现技巧后续扩展功能组队大厅发布招人帖浏览队伍信息一键申请加入导师匹配根据竞赛类型和研究方向智能推荐指导老师作品互评赛前匿名互评互相提建议共同提升⏰赛程提醒重要时间节点自动推送提醒不错过截止日期证书生成获奖后自动生成电子证书支持分享和下载竞赛日历月视图展示所有竞赛安排一目了然运行效果
HarmonyOS ArkTS 实战：实现一个校园竞赛报名与项目管理应用
HarmonyOS ArkTS 实战校园竞赛报名与项目管理完整实现摘要项目难度⭐⭐⭐ 中级实战适用人群有 ArkTS 基础、希望学习学习类应用开发的 HarmonyOS 开发者开发环境DevEco Studio Next / API 24代码规模单页面约 700 行可直接运行通过本项目你将掌握进度条组件的实现与进度状态管理多模型关联的数据结构设计竞赛日历与时间轴展示技巧组队管理与成员增删逻辑项目状态流转与获奖展示目录[一、项目概述与功能架构][1.1 应用场景与项目价值][1.2 完整功能清单][1.3 技术选型说明][二、数据结构设计][2.1 团队成员模型 TeamMember][2.2 竞赛模型 Competition][2.3 项目模型 Project][2.4 设计思路说明][三、核心功能实现详解][3.1 竞赛浏览与筛选][3.2 报名竞赛与创建项目][3.3 团队成员管理][3.4 项目进度更新][四、UI 设计与交互体验][4.1 整体布局结构][4.2 主题色与视觉规范][4.3 状态视觉区分表][五、关键技术点解析][5.1 进度条的设计与实现思路][5.2 多对多关系的数据建模][六、常见问题与优化建议][七、项目总结与扩展方向][附录运行方式]一、项目概述与功能架构1.1 应用场景与项目价值学科竞赛是大学生活的重要组成部分从互联网“到挑战杯”从数学建模到程序设计竞赛各类竞赛为学生提供了实践锻炼和能力提升的广阔平台。然而竞赛信息分散、组队困难、项目进度难以追踪等问题一直困扰着参赛学生。本项目基于 HarmonyOS ArkTS 实现了一个校园竞赛报名与项目管理应用整合了竞赛信息浏览、在线报名、组队管理、进度跟踪、作品提交、获奖记录等全流程功能帮助学生系统化管理竞赛生涯。项目核心价值信息聚合价值集中展示各类竞赛信息避免信息遗漏协作效率价值系统化的组队和项目管理提升团队协作效率成长记录价值完整记录参赛历程和获奖情况形成个人成长档案1.2 完整功能清单功能模块具体功能实现难度⭐竞赛信息竞赛浏览、按类型筛选、竞赛详情、收藏竞赛⭐⭐报名参赛在线报名、选择赛道、填写信息、报名确认⭐⭐组队管理创建团队、添加成员、成员角色分配、人数限制⭐⭐⭐项目管理项目创建、进度跟踪、状态更新、作品提交⭐⭐⭐获奖记录获奖展示、证书管理、奖项统计、荣誉墙⭐⭐辅助功能竞赛日历、报名提醒、赛程安排、数据统计⭐⭐⭐1.3 技术选型说明技术维度选型方案选型理由开发语言ArkTS强类型支持适合复杂业务逻辑和多模型关联场景状态管理State 装饰器单页面应用轻量方案响应式更新及时UI 组件ArkUI 基础组件 自定义进度条灵活定制满足进度可视化需求数据存储内存状态演示简化生产环境建议接入云端数据库最低版本API 24兼容主流 HarmonyOS 设备⚠️ 注意本项目为前端演示版本报名、组队等操作均在本地模拟。真实竞赛系统需要对接学校教务系统或竞赛组委会后台进行身份核验和数据同步。二、数据结构设计2.1 团队成员模型 TeamMember团队成员是项目的参与者每个人有明确的角色分工。/** * 团队成员数据模型 * 描述参赛团队中单个成员的信息 */interfaceTeamMember{name:string;// 成员姓名studentId:string;// 学号role:string;// 角色队长/技术/文案/设计 等}2.2 竞赛模型 Competition竞赛是整个系统的基础实体包含竞赛的基本信息和报名状态。/** * 竞赛数据模型 * 描述单个竞赛的完整信息 */interfaceCompetition{id:number;// 竞赛IDname:string;// 竞赛名称type:string;// 竞赛类型学科类/创新创业类/文体类level:string;// 竞赛级别校级/省级/国家级/国际级deadline:string;// 报名截止时间award:string;// 最高奖项设置description:string;// 竞赛简介organizer:string;// 主办方maxMembers:number;// 每队最大人数status:string;// 报名状态报名中/已截止/进行中/已结束isCollected:boolean;// 是否已收藏}2.3 项目模型 Project项目是学生报名竞赛后产生的参赛实体关联具体竞赛和团队成员。/** * 参赛项目数据模型 * 记录学生参与某个竞赛的具体项目信息 */interfaceProject{id:number;// 项目IDcompetitionId:number;// 关联的竞赛IDcompetitionName:string;// 竞赛名称冗余存储便于展示projectName:string;// 项目名称members:TeamMember[];// 团队成员列表progress:number;// 项目进度 0-100status:string;// 项目状态进行中/已提交/已获奖/未获奖submitTime:string;// 提交时间award:string;// 获得奖项}2.4 设计思路说明为什么采用竞赛-项目分离的双层模型这是一个典型的一对多关系设计语义清晰竞赛是赛事项目是我的参赛记录两者概念不同灵活扩展同一个竞赛可以报名多个项目不同赛道同一个项目也可能跨竞赛参赛状态独立竞赛的报名状态和项目的完成状态是两个维度分开管理更清晰数据解耦竞赛信息是公共数据项目是个人数据分离后便于权限控制关于成员角色的设计考量角色字段采用字符串而非枚举原因是不同竞赛的角色分工差异很大技术赛和商业赛角色完全不同字符串灵活性高用户可以自定义角色名称演示项目简化处理生产环境可建立角色字典表三、核心功能实现详解3.1 页面状态初始化/** * 页面状态变量定义 */StateprivateprojectNameText:string;// 新项目名称输入StateprivatememberNameText:string;// 新成员姓名输入StateprivateselectedType:string全部;// 竞赛筛选类型StateprivatenextProjectId:number5;// 下一个项目IDStateprivatecompetitions:Competition[][];// 竞赛列表Stateprivateprojects:Project[][];// 我的项目列表3.2 竞赛浏览与筛选/** * 获取筛选后的竞赛列表 * 支持按类型筛选和收藏筛选 */privategetFilteredCompetitions():Competition[]{letresultthis.competitions;// 按类型筛选if(this.selectedType!全部){resultresult.filter(cc.typethis.selectedType);}// 按截止时间排序即将截止的排在前面returnresult.sort((a,b){returnnewDate(a.deadline).getTime()-newDate(b.deadline).getTime();});}/** * 切换竞赛收藏状态 * param compId 竞赛ID */privatetoggleCollectCompetition(compId:number):void{this.competitionsthis.competitions.map(c{if(c.idcompId){return{...c,isCollected:!c.isCollected};}returnc;});}3.3 报名竞赛与创建项目用户报名某个竞赛时会自动创建一个关联的项目记录。/** * 报名竞赛并创建项目 * param compId 竞赛ID * param compName 竞赛名称 */privateregisterCompetition(compId:number,compName:string):void{// 校验项目名称constprojectNamethis.projectNameText.trim();if(projectName.length0){// 生产环境增加提示return;}// 创建新项目constproject:Project{id:this.nextProjectId,competitionId:compId,competitionName:compName,projectName:projectName,members:[],progress:0,status:进行中,submitTime:,award:};this.projects[project,...this.projects];this.nextProjectId;this.projectNameText;}3.4 团队成员管理添加和移除团队成员同时校验人数上限。/** * 向项目添加团队成员 * param projectId 项目ID * param maxMembers 最大人数限制来自竞赛配置 */privateaddTeamMember(projectId:number,maxMembers:number):void{constmemberNamethis.memberNameText.trim();if(memberName.length0)return;this.projectsthis.projects.map(p{if(p.idprojectId){// 校验人数上限if(p.members.lengthmaxMembers){// 已达人数上限生产环境提示用户returnp;}constnewMember:TeamMember{name:memberName,studentId:,role:成员};return{...p,members:[...p.members,newMember]};}returnp;});this.memberNameText;}/** * 移除团队成员 * param projectId 项目ID * param memberIndex 成员索引 */privateremoveTeamMember(projectId:number,memberIndex:number):void{this.projectsthis.projects.map(p{if(p.idprojectId){constnewMembersp.members.filter((_,idx)idx!memberIndex);return{...p,members:newMembers};}returnp;});}3.5 项目进度更新进度条是项目管理的核心可视化组件支持步进更新和直接设置。/** * 更新项目进度 * param projectId 项目ID * param progress 新的进度值0-100 */privateupdateProgress(projectId:number,progress:number):void{// 进度值边界校验constvalidProgressMath.max(0,Math.min(100,progress));this.projectsthis.projects.map(p{if(p.idprojectId){letnewStatusp.status;// 进度达到100%自动标记为待提交状态if(validProgress100p.status进行中){newStatus待提交;}return{...p,progress:validProgress,status:newStatus};}returnp;});}/** * 标记项目已提交 */privatesubmitProject(projectId:number):void{this.projectsthis.projects.map(p{if(p.idprojectId){return{...p,status:已提交,submitTime:newDate().toLocaleString(),progress:100};}returnp;});}四、UI 设计与交互体验4.1 整体布局结构┌─────────────────────────┐ │ 顶部数据统计栏 │ ← 进行中/已获奖/参赛数/团队人数 ├─────────────────────────┤ │ Tab 切换栏 │ ← 竞赛大厅 / 我的项目 ├─────────────────────────┤ │ 筛选标签栏 │ ← 按类型/级别筛选 ├─────────────────────────┤ │ │ │ 列表内容区 │ ← 竞赛卡片 或 项目卡片 │ │ └─────────────────────────┘4.2 主题色与视觉规范主色调亮蓝色 #3B82F6选择亮蓝色作为主题色的设计考量科技感契合蓝色是科技、创新、智慧的代表色与学科竞赛的学术属性高度匹配专业感传递相比活泼的暖色调蓝色传递理性、专业、可信赖的视觉感受状态扩展性强蓝色系有丰富的色阶变化可用于进度条渐变、级别区分等场景护眼长时间使用竞赛准备是长时间的活动低饱和度蓝色视觉疲劳度更低辅助色规范主色调#3B82F6亮蓝色进度条填充#3B82F6 → #60A5FA 渐变国家级竞赛#EF4444红色标签最高优先级省级竞赛#F59E0B琥珀色标签校级竞赛#6B7280灰色标签获奖高亮#F59E0B金色徽章4.3 状态视觉区分表项目状态进度条颜色状态标签操作按钮进行中蓝色渐变蓝色实心标签更新进度、添加成员待提交蓝色满格蓝色闪烁标签提交作品已提交绿色满格绿色实心标签查看详情已获奖金色渐变金色徽章 奖项名查看证书未获奖灰色满格灰色空心标签复盘总结竞赛级别标签颜色视觉权重排序优先级国际级深紫色最高1国家级红色高2省级琥珀色中3校级灰色低4五、关键技术点解析5.1 进度条的设计与实现思路进度条是项目管理类应用的核心视觉组件设计时需要考虑多个维度视觉设计三要素背景轨道浅灰色背景定义进度条的总长度和边界填充进度主题色渐变填充宽度随进度值变化进度文本百分比数字放在进度条右侧或内部交互设计要点进度变化时增加平滑过渡动画避免生硬跳动不同阶段使用不同颜色如0-30%起步、30-80%进行中、80-100%冲刺关键节点25%/50%/75%/100%可增加里程碑标记技术实现方案在 ArkUI 中可以使用 Stack 组件叠加背景和填充通过 width 属性控制填充比例配合 animation 实现平滑过渡。5.2 多对多关系的数据建模学生和竞赛之间本质上是多对多关系一个学生可以参加多个竞赛一个竞赛有多个学生参加。本项目的简化方案通过 Project 中间表实现关联Project 同时持有 competitionId 和成员列表形成竞赛-项目-成员的三级结构。生产环境的标准方案建立 User 表、Competition 表、Team 表、TeamMember 表Team 关联 CompetitionTeamMember 关联 Team 和 User支持一个用户加入多个团队一个团队对应一个竞赛这种设计虽然复杂但支持更丰富的业务场景如跨项目人员复用、历史队伍复用等。六、常见问题与优化建议踩坑点 1进度值边界溢出问题表现用户连续点击增加进度导致进度超过100%或低于0%解决方案更新进度时使用Math.max(0, Math.min(100, value))进行边界钳制踩坑点 2成员重复添加问题表现同一个人被多次添加到团队中解决方案添加前根据学号或姓名查重重复则提示不添加踩坑点 3截止时间计算错误问题表现跨时区或日期格式问题导致倒计时不准解决方案统一使用时间戳存储和计算展示层再格式化踩坑点 4竞赛列表排序混乱问题表现筛选后排序逻辑失效已截止的竞赛排在前面解决方案按状态分组排序报名中优先同状态内按截止时间升序优化方向增加竞赛日历视图以月历形式展示各竞赛时间节点实现组队大厅功能支持发布招人信息和寻找队伍接入导师匹配系统根据竞赛类型推荐指导老师增加作品互评功能赛前互相评审提升作品质量七、项目总结与扩展方向核心收获通过完成竞赛报名与项目管理项目你将掌握多模型关联的数据结构设计方法进度条组件的实现与动画优化团队成员增删改的完整管理逻辑列表筛选与多维度排序的实现技巧后续扩展功能组队大厅发布招人帖浏览队伍信息一键申请加入导师匹配根据竞赛类型和研究方向智能推荐指导老师作品互评赛前匿名互评互相提建议共同提升⏰赛程提醒重要时间节点自动推送提醒不错过截止日期证书生成获奖后自动生成电子证书支持分享和下载竞赛日历月视图展示所有竞赛安排一目了然运行效果
