哈夫币展示页

一个轻量展示前端，数据直接读取 hfb_sys 的公开接口。

数据来源分析

• 商品列表：GET /api/listings?page=1&page_size=12&keyword=&sort=&zone=
• 首页配置：GET /api/mobile-home-config
• 图片资源：商品返回的 cover_url、screenshot_urls 已经是 /api/... 相对路径，前端无需额外拼接。
• 生产部署建议：展示页只作为静态站点运行，Nginx 将 /api/ 反向代理到 hfb_sys 后端。

本地开发

确认 hfb_sys 后端已经在 127.0.0.1:8080 运行后：

npm install
npm run dev

打开 http://127.0.0.1:5174。

如果后端地址不同：

VITE_API_PROXY_TARGET=http://127.0.0.1:8080 npm run dev

构建

npm run build

产物在 dist/。

部署方案

方案一：跟 hfb_sys 同机 Docker 部署

1. 先让 hfb_sys 的后端容器加入一个共享网络，或者创建外部网络：

docker network create hfb_sys_net
docker network connect hfb_sys_net hfb_sys-backend-1

2. 确认 nginx.conf 里的后端主机名能解析到后端容器：

proxy_pass http://hfb_sys_backend:8080/api/;

如果后端容器名不是 hfb_sys_backend，改成真实容器名或在 compose 里加 network alias。

3. 启动展示页：

docker compose -f deploy/docker-compose.yml up -d --build

默认访问 http://服务器IP:8090。

方案二：复用现有 Nginx

执行 npm run build，把 dist/ 配到一个新站点，新增：

location /api/ {
    proxy_pass http://127.0.0.1:8080/api/;
}

这样展示页和 hfb_sys 共用一套数据库、后台审核、图片存储和公开接口。