项目概述
FutureSonic 是待绘科技旗下面向音乐与创意创作者的协作平台。它借鉴 GitHub 的仓库协作模式，为创作者提供项目管理、版本浏览、议题讨论、动态展示等工程化能力；同时针对音乐场景原生集成乐谱渲染（abcjs）与音频播放，让创作者可以在项目页直接展示和预览音乐内容。
我独立负责该平台前端系统的架构设计与全部业务实现。项目基于 Next.js 16（App Router）、React 19、TypeScript、Ant Design 6 与 Tailwind CSS 4，通过 Redux Toolkit 管理客户端状态，React Query 处理服务端异步数据，Framer Motion 驱动交互动画。
技术架构
- 前端框架与技术栈：Next.js 16 App Router + React 19 + TypeScript + Tailwind CSS 4 + Ant Design 6。
- 状态管理：Redux Toolkit 负责客户端全局状态（如存储配额、消息通知）；React Query 负责服务端状态缓存、分页与自动重验证。
- 路由与目录结构：采用 App Router 的嵌套布局体系。
app/project/[project_id]/repo/[...slug]实现类 GitHub 的仓库文件树浏览；app/composer/[composer_id]实现创作者个人主页；app/search实现四维度搜索；app/message实现消息中心。 - 关键第三方库：
abcjs：乐谱渲染，将 ABC 记谱法转化为可视五线谱。react-markdown+remark-gfm：Markdown 内容渲染，用于 README、话题正文与评论。framer-motion：页面过渡与组件交互动画。react-infinite-scroll-component：搜索与列表场景的无限滚动加载。react-quill-new：富文本编辑器，用于话题创建与评论输入。
核心功能
项目仓库系统
类 GitHub 的仓库体验是平台的核心：
- 文件浏览：通过
[...slug]动态路由实现层级文件树浏览，支持面包屑导航、文件图标识别与 README 自动渲染。 - 项目侧边栏：集中展示项目标签（Label）、团队成员（Team Members）、近期动态（Recent Activity）、观察者与报告者（Observers & Reporters）等元信息。
- 多 Tab 内容区：涵盖议题（Topic）、动态（Dynamic）、配置（Configuration，含基础设置与删除仓库）、授权（Authorization）、关联（Relation）与开放数据（Open）等模块。
- 存储状态看板：实时展示项目存储配额使用情况。
议题与讨论系统
- 议题列表：支持创建新议题、筛选与排序。
- 议题详情：独立话题页展示正文、回复卡片（Reply Card）与嵌套讨论流。
- 富文本创作：基于 React Quill 的编辑器支持格式化文本、图片与链接插入，用于话题发布与评论回复。
创作者主页（Composer）
为每位创作者生成个人落地页，包含多个内容 Tab：
- Home：个人简介与精选内容。
- Projects：关联的项目列表。
- Collections：收藏合集。
- Issues：参与或发起的议题。
- Management：账号隐私设置、资料管理等。
- Support & Follow：关注列表与社交互动。
站内搜索
四维度统一搜索入口，覆盖：
- Projects：项目搜索，支持多条件筛选。
- Articles：文章搜索。
- Issues：议题搜索。
- Users：用户搜索。
每个维度配备独立的过滤组件（Filter），结果列表支持无限滚动与分页缓存。
消息中心
完整的站内通知与私信系统：
- 私信（Direct Messages）：一对一实时会话页。
- 通知分类：@提及（Mentions）、回复（Replies）、系统通知（System）、收藏（Favorites）、关注（Follows）、创作动态（Creations）。
- 设置页：消息偏好与通知开关管理。
音乐内容展示
针对音乐场景的原生能力：
- 乐谱渲染：基于
abcjs将 ABC 记谱文本渲染为可交互的五线谱，支持播放同步与参数调整。 - FlexiblePlayer：自研音频播放器组件，用于项目页中的音频预览与播放控制。
社区与后台
- 社区 Banner：轮播与展示社区活动、热门创作者。
- 后端管理（Backend）：平台运营后台入口，提供内容审核与系统配置能力。
独立开发挑战
- 复杂嵌套路由与状态共享：仓库文件浏览使用
[...slug]动态捕获，需要与侧边栏、面包屑、项目信息栏保持状态同步。解决方案：通过ProjectRepoContext提供项目级上下文，统一维护当前路径、分支与文件元数据。 - 多维度搜索的缓存与分页：四维度搜索各自拥有不同的过滤条件与分页策略。解决方案：使用 React Query 的
useInfiniteQuery封装usePaginatedFetchListHook，按搜索维度生成独立的查询键，保证分页状态隔离与缓存复用。 - 音乐组件性能：abcjs 乐谱渲染在大段乐谱下存在重绘开销。解决方案：将乐谱渲染拆分为独立组件，仅在数据变更时触发重渲染，并使用 React.memo 与 useMemo 减少不必要的 DOM 操作。
技术亮点
- 类 GitHub 仓库体验的前端实现：从文件树路由、README 渲染到议题讨论，完整复刻了开发者熟悉的仓库协作交互模式。
- 四维度统一搜索与无限滚动：通过 React Query 的无限查询能力，实现丝滑的滚动加载与维度切换。
- 音乐原生能力嵌入：乐谱渲染与音频播放不是外部链接跳转，而是直接嵌入项目页的原生交互组件。
- 完整的消息与社交链路：从私信到通知、从关注到创作者主页，形成创作者社交闭环。
