Zhou Weidong
ecfbd3b8b5
- 按 app / shared / entities / features 分层，路由懒加载并抽出布局组件 - 请求层改为可插拔拦截器，统一错误类型、超时取消与端点拆分 - 抽取播放器、骨架屏、网格等复用组件，点赞收藏接入统一交互反馈 - 关于页重做为无边框极光风格，补充 iOS / Google Play 下载入口 - 修复播放页滚轮切集吞事件、页面误滚动、后台持续播放与声音记忆问题 - 语言按本地偏好与 IP 识别，国旗改为内联 SVG - 清理未使用的旧站点文件，补充 ESLint 配置
2.4 KiB
2.4 KiB
Author: fruit.com.cn
YMB Site
YMB 公开站点 React + Vite 项目，参考 YouTube 的内容发现信息架构，支持桌面端与移动端。
企业级目录
src/
├── app/ # 应用装配：路由（懒加载）、Locale/UI Provider
├── shared/ # 与业务无关的通用能力
│ ├── api/ # fetch 客户端、拦截器、错误类型、领域无关接口
│ ├── hooks/ # useRequest / useMutation / useToast / useEngagement
│ ├── components/ # AsyncBoundary、VideoGrid、MediaCard、骨架屏
│ ├── lib/ # format、media、pagination、seo、watchProgress
│ ├── data/ # 接口不可用时的演示数据
│ └── styles/ # base / enterprise / 组件覆盖样式
├── entities/ # 领域模型与接口（drama、category）
├── features/ # 业务域：home / shorts / watch / search / history / listing / about
├── layouts/ # AppShell + TopBar / SearchBox / Sidebar / BottomNav
└── i18n/ # ID / EN / zh-CN 语言包
依赖方向：features → entities → shared，layouts → shared；shared 不允许反向依赖业务域。
YouTube 对照的信息架构
- 顶部 AppBar：品牌、全局搜索、语言、通知、用户入口。
- 桌面侧栏：Home、Shorts、Subscriptions、Library、History、Liked videos。
- 首页：Hero 推荐、Topic chips、视频网格、Shorts 横滑、频道推荐。
- 观看页：16:9 播放器、标题/频道信息、Up next 推荐队列。
- 移动端：抽屉侧栏、底部四项导航、两列视频卡与横滑 Shorts。
运行
pnpm install
pnpm dev
pnpm build
包含
- 桌面端：顶部搜索、侧边导航、推荐网格、Shorts 横滑区、频道订阅。
- 移动端：顶部紧凑栏、双列内容、横滑 Shorts、底部导航。
- React：搜索、题材筛选、播放提示、关注切换、移动端菜单。
- 多语言：印尼语
?lang=id、English?lang=en、简体中文?lang=zh。 - SEO：动态
lang/title/description、canonical、hreflang、Open Graph、Twitter Card、JSON-LD、robots.txt、sitemap.xml。
部署前请将 ymb.example.com 替换为正式域名，并同步修改 index.html、public/robots.txt 与 public/sitemap.xml。