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。