# Author: fruit.com.cn

# YMB Site

YMB 公开站点 React + Vite 项目，参考 YouTube 的内容发现信息架构，支持桌面端与移动端。

## 企业级目录

```text
src/
├── app/          # 路由与全局 Store
├── layouts/      # AppShell、顶部栏、侧栏、移动端导航
├── pages/        # Home、Shorts、Subscriptions、Library、History、Search、Watch
├── components/   # MediaCard、SectionHeading 等复用组件
├── features/     # 后续业务域扩展入口
├── services/     # 目录检索与接口边界
├── data/         # 演示目录数据
├── i18n/         # ID / EN / zh-CN 语言包
└── lib/seo.js    # 页面 SEO 元数据入口
```

## YouTube 对照的信息架构

- 顶部 AppBar：品牌、全局搜索、语言、通知、用户入口。
- 桌面侧栏：Home、Shorts、Subscriptions、Library、History、Liked videos。
- 首页：Hero 推荐、Topic chips、视频网格、Shorts 横滑、频道推荐。
- 观看页：16:9 播放器、标题/频道信息、Up next 推荐队列。
- 移动端：抽屉侧栏、底部四项导航、两列视频卡与横滑 Shorts。

## 运行

```bash
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`、`app.js`、`robots.txt` 与 `sitemap.xml`。