Zhou Weidong
2d1f754a46
- 移动端移除底部导航，Shorts 视频改为圆角卡片并适配 iOS 裁剪 - 播放进度条全局贴到视频最底，移动端精简控件（仅播放/全屏） - 右侧互动栏下移，首页进入播放页增加模糊封面过渡 - 关于页下载入口改为标准 App Store / Google Play 徽章 - 新增自动连播下一集与自动播放被拦截时的开启声音提示
52 lines
2.4 KiB
Markdown
52 lines
2.4 KiB
Markdown
# Author: fruit.com.cn
|
||
|
||
# YMB Site
|
||
|
||
YMB 公开站点 React + Vite 项目，参考 YouTube 的内容发现信息架构，支持桌面端与移动端。
|
||
|
||
## 企业级目录
|
||
|
||
```text
|
||
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
|
||
└── 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（无底部导航，视频带圆角）。
|
||
|
||
## 运行
|
||
|
||
```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`、`public/robots.txt` 与 `public/sitemap.xml`。
|