Zhou Weidong
ecfbd3b8b5
- 按 app / shared / entities / features 分层，路由懒加载并抽出布局组件 - 请求层改为可插拔拦截器，统一错误类型、超时取消与端点拆分 - 抽取播放器、骨架屏、网格等复用组件，点赞收藏接入统一交互反馈 - 关于页重做为无边框极光风格，补充 iOS / Google Play 下载入口 - 修复播放页滚轮切集吞事件、页面误滚动、后台持续播放与声音记忆问题 - 语言按本地偏好与 IP 识别，国旗改为内联 SVG - 清理未使用的旧站点文件，补充 ESLint 配置
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 / 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。
|
||
|
||
## 运行
|
||
|
||
```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`。
|