# 哈夫币展示页

一个轻量展示前端，数据直接读取 `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` 运行后：

```bash
npm install
npm run dev
```

打开 `http://127.0.0.1:5174`。

如果后端地址不同：

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

VITE_API_PROXY_TARGET=https://hao858.com/ npm run dev
```

## 构建

```bash
npm run build
```

产物在 `dist/`。

## 部署方案

### 方案一：跟 `hfb_sys` 同机 Docker 部署

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

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

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

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

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

3. 启动展示页：

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

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

### 方案二：复用现有 Nginx

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

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

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