Note
部署预览目前保留项目所有者访问门禁。公开访客可以通过下方截图了解完整界面，或在本地运行全部交互。
教材不该在一次课程结束后就被遗忘。
BITerStore 希望把校园里的闲置书籍重新连接起来：同学可以按课程、成色、校区和价格找到需要的书，也可以快速发布旧书、联系卖家并约定校内当面交易。产品以温和的纸张质感、低饱和鼠尾草绿和书童角色 Tobby，降低传统二手平台的交易感，保留校园社区应有的信任与温度。
这个仓库不是把设计稿贴成网页。页面中的标题、卡片、筛选、表单、聊天、按钮、状态和导航均由真实 DOM 与可交互组件实现。
| 发现好书 | 发布闲置 | 校园沟通 | 状态完整 |
|---|---|---|---|
| 关键词、分类、成色、校区、价格与排序组合筛选 | 图片上传、草稿恢复、表单校验、预览确认 | 通知分类、商品分享、文字与图片消息演示 | Loading、Empty、Network、Maintenance、404 等完整反馈 |
| 收藏、热榜、商品详情与可交易状态 | Tobby 本地规则模拟识别并自动补全文案 | 未读状态和校内当面交易安全提示 | 首次资源初始化、离线缓存与平滑路由动画 |
以 390px 为主要验收宽度，同时覆盖 360px 与 430px；桌面访问时显示居中的移动应用画布。
flowchart LR
A[欢迎与引导] --> B[发现与筛选]
B --> C[商品详情]
C --> D[收藏 / 联系卖家]
D --> E[站内聊天]
E --> F[校内当面交易]
B --> G[发布闲置]
G --> H[Tobby 补全文案]
H --> I[预览并发布]
I --> C
主要路由：
| 路由 | 内容 |
|---|---|
/ · /onboarding |
首次欢迎、品牌介绍与三步引导 |
/home · /category |
首页、搜索、分类与组合筛选 |
/books/:id |
商品信息、卖家、收藏与联系入口 |
/publish |
上传、识别模拟、草稿、表单、预览与发布 |
/messages · /messages/:id |
通知详情、会话列表与聊天 |
/profile · /favorites · /my-listings |
个人中心、收藏和发布管理 |
/states/:type |
空态、错误、维护、不可用与成功状态 |
flowchart TB
UI[React 组件与移动端视觉系统]
Repo[异步 DemoRepository 数据边界]
LS[(LocalStorage)]
IDB[(IndexedDB)]
SW[Service Worker 资源缓存]
UI --> Repo
Repo --> LS
Repo --> IDB
UI --> SW
- React + TypeScript：真实组件、表单、导航与状态管理。
- 自定义 CSS：不使用通用 UI 框架，保留原创纸张质感和品牌层级。
- DemoRepository：页面不直接耦合浏览器存储，后续可以整体替换成真实 API。
- LocalStorage + IndexedDB：保存引导、收藏、筛选、草稿、消息及压缩后的上传图片。
- Service Worker：首次启动预热 Tobby 与 UI 素材，后续访问直接命中缓存。
- 确定性演示数据：所有延迟和状态可复现，不会随机破坏正常流程。
| Token | 色值 | 用途 |
|---|---|---|
| Primary Sage | #6F7956 |
品牌主色、按钮与激活态 |
| Dark Olive | #4F5940 |
标题、Logo 与重要信息 |
| Cream Background | #F7F4EA |
应用背景与纸张氛围 |
| Warm Border | #D5C7A7 |
卡片边框与低饱和分隔 |
| Price Accent | #C56E3B |
价格与交易重点 |
| Holographic Aqua | #78D8C6 |
焦点与少量高光反馈 |
环境要求：Node.js 22.13+。
git clone https://github.com/AnonymousUser443/BITerStore.git
cd BITerStore/web
npm install
npm run dev浏览器打开 http://localhost:3000。
质量检查：
npm run lint
npm test
npm run buildBITerStore/
├─ Assets/ # 原始设计参考与 Tobby 素材，不覆盖源文件
├─ docs/avatars/ # 开发团队头像素材
├─ qa-screenshots/ # 360 / 390 / 430px 浏览器验收截图
├─ web/
│ ├─ app/
│ │ ├─ components/ # 页面与通用移动组件
│ │ └─ lib/ # 类型、种子数据、仓库与本地图片存储
│ ├─ public/assets/ # WebP 响应式角色与背景资源
│ ├─ public/sw.js # 首次资源包缓存
│ └─ package.json
├─ LICENSE # Apache License 2.0
├─ TODO.md # 持续开发与验收记录
└─ README.md
BITerStore 目前是纯前端高保真交互原型，默认用户已经完成北理校园身份认证。项目暂不连接真实后端、支付、短信、地图、内容审核或 AI 服务；所有外部能力都通过可替换的异步接口进行本地模拟。
本项目采用 Apache License 2.0 开源。你可以在遵守许可证条款并保留版权与许可声明的前提下使用、修改和分发本项目。
StudentOP Aiden Frontend Developer · 前端开发 移动端 UI、交互体验与前端工程 |
Smal_Young Backend Developer · 后端开发 杨景博 · 后端仓库筹备中 |
书页轻翻 · 好物续航
Made for the BIT campus community.