Skip to content

Latest commit

 

History

History
66 lines (48 loc) · 2.52 KB

File metadata and controls

66 lines (48 loc) · 2.52 KB

HackAgent 报名页样式与路径调整 Spec

目标

把 HackAgent 的报名动作从“详情页点击后再跳一个很轻的 apply 页”改成更顺的转化路径:优先在详情页直接完成报名;apply 页保留为兼容入口,但样式和信息层级要更像正式报名入口,而不是一张空表单。

结论

当前 apply 页信息量不足,不适合继续作为唯一主路径。用户从详情页点进来后,得到的只是“再看一遍标题 + 填三个字段”,路径摩擦太高。

方案

方案 A(优先实现)

在公开活动详情页 /events/public/[eventId] 内直接承载报名入口:

  • 已登录且开放报名时,主 CTA 直接显示“立即报名”
  • 点击后优先在详情页内展示报名卡片 / 锚点区,而不是跳到独立 apply 页
  • 提交后原地反馈状态

方案 B(兼容保留)

保留 /apply/[eventId] 作为直达链接和旧入口,但优化其视觉与信息结构:

  • 不要做成“窄、空、弱”的单页表单
  • 更像活动报名工作台的简化版
  • 适度增强标题、说明、截止时间与表单的层级

这次开发范围

必改

  1. app/(public)/events/public/[eventId]/EventDetailClient.tsx
    • 调整报名按钮逻辑
    • 让详情页成为主报名入口
    • 如果不改成内嵌表单,至少把 CTA 改成更明确的“页面内报名/跳转报名”引导
  2. app/apply/[eventId]/ApplyClient.tsx
    • 调整页面视觉层级
    • 提高宽度承载,不要太窄
    • 减少重复标题和无效留白
    • 让报名页像“转化页”而不是“表单页”

不要碰

  • 不改后端报名接口逻辑
  • 不改权限校验
  • 不改报名状态流转
  • 不动提交成功后的业务判断

视觉原则

  • 页面信息分层清楚:活动信息 > 截止时间 > 报名表单 > 提交按钮
  • 详情页和报名动作要连贯,减少跳转感
  • 桌面端不要维持一个过窄的单栏表单
  • 按钮文案要直接,别绕

验收标准

  • 从活动详情页进入报名,用户能明确理解“这是报名动作”,不是又跳进一个弱页面
  • apply 页在桌面端不再显得过窄、过空
  • 详情页与报名页的视觉和文案风格统一
  • 不影响现有报名提交、审核状态、已报名态展示

建议实现优先级

  1. 先把详情页报名 CTA 和路径整理顺
  2. 再优化 apply 页布局
  3. 最后再考虑是否把报名表真正内嵌到详情页

备注

这次先解决“样式 + 路径感”的问题,不要把它扩成完整报名系统重构。