# huxiu-app

**Repository Path**: code-me/huxiu-app

## Basic Information

- **Project Name**: huxiu-app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-12
- **Last Updated**: 2026-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 虎嗅 APP · 移动端高保真复刻

用 **React 18 + Vite 5** 复刻的虎嗅 App 移动端 H5 单页应用。移动端优先布局，桌面浏览器下自动套上手机外壳，模拟原生 App 的观感与交互。

---

## 快速开始

```bash
cd huxiu-app
npm install
npm run dev        # → http://127.0.0.1:5273/
```

其它脚本：

```bash
npm run build                    # 产出 dist/
node scripts/build-standalone.mjs # 把 dist 打成单文件 dist/standalone.html（可离线双击打开）
```

> `dist/standalone.html` 是完全自包含的（CSS/JS 内联），不依赖任何服务器，直接双击即可浏览。

---

## 设计还原依据

品牌色并非凭感觉挑选，而是**从虎嗅官方 logo 逐像素采样**得到的：

| Token | 值 | 来源 |
| --- | --- | --- |
| `--hx-black` | `#221E1F` | 官方字标「虎嗅」主色（偏暖的近黑） |
| `--hx-red` | `#EE2222` | 字标中「嗅」字右上角的红色三角 |

内容层面，频道结构、栏目命名、卡片形态、24小时播报文体均对照真实的
[m.huxiu.com](https://m.huxiu.com/) 信息架构复刻；资讯正文与配图取自虎嗅公开内容，
并已**全部本地化**到 `public/images/`（24 张），因此离线也能完整渲染。

---

## 已实现的模块

| 模块 | 路由 | 说明 |
| --- | --- | --- |
| 首页信息流 | `/` | 频道 Tab 切换、大图头条、双列卡片、24小时预览、`#大新闻` 专题、频道区块、虎嗅视界、源流讨论、视频精选 |
| 文章详情 | `/article/:id` | 原创标、作者 + 关注、速览框、图文正文（小标题/引用/图注）、相关阅读、评论区、底部互动栏 |
| 24小时 | `/moments` | 时间轴 + 实时标记、来源标签、热点标记、加载更多 |
| 快讯详情 | `/moment/:id` | 全文 + 最新播报 |
| 视频 / 直播 | `/videos` | 正在直播横滑、视频精选双列、分类 Tab |
| 播放页 | `/video/:id` | 播放器（进度条/控制）、作者关注、相关推荐、发弹幕入口 |
| 我的 | `/mine` | 深色渐变头图、会员卡片、数据统计、我的服务九宫格、设置列表 |
| 会员中心 | `/vip` | 金色主题、会员权益、套餐选择、底部开通 CTA |
| 搜索 | `/search` | 实时检索、搜索历史、虎嗅热榜（热/沸/新标签） |
| 频道管理 | `/channels` | **指针拖拽排序**、点击增删、编辑态 |
| 频道页 | `/channel/:id` | 单频道文章流 |

---

## 交互细节

- **页面转场**：`push` 从右滑入、`pop` 从左回退、Tab 间切换交叉淡入 —— 由 `NavDirContext` 统一下发方向。
- **滚动记忆**：`Page` 按路由记忆滚动位置，返回信息流时回到原处。
- **沉浸式导航栏**：文章页顶部栏滚动 120px 后浮出作者信息并毛玻璃实心化。
- **原生手感**：`safe-area` 适配、点击态、下拉惯性滚动、`prefers-reduced-motion` 降级。

---

## 目录结构

```
src/
├── components/     Icon(手绘 SVG 图标集) · Page(转场+滚动记忆) · Phone(手机外壳)
│                   NavBar · TabBar · cards(信息流卡片族)
├── data/content.js 内容模型：频道 / 文章 / 快讯 / 视频 / 讨论 / 会员 / 热搜
├── pages/          11 个页面
├── styles/         tokens · base · layout · cards · pages
└── navdir.js       转场方向 context
scripts/
├── vendor-images.sh      从虎嗅 CDN 拉取并本地化配图
├── build-standalone.mjs  打包为单文件 HTML
└── cdp-shot.mjs          无头 Chrome 逐路由截图 + 控制台报错巡检
```

---

## 验证

`scripts/cdp-shot.mjs` 通过 DevTools Protocol 驱动无头 Chrome，逐路由确认
React 挂载成功、统计图片加载与破图数量、收集控制台异常，并输出整屏截图：

```bash
npm run build && node scripts/build-standalone.mjs
node scripts/cdp-shot.mjs file://$PWD/dist/standalone.html /tmp/hxshots
```

最近一次结果：**12/12 路由挂载成功，0 破图，0 控制台报错**。

---

## 说明

本项目为前端界面复刻练习，仅用于技术演示，未接入真实后端与支付。
资讯文字、图片版权归虎嗅及原作者所有。