feat: 初始化项目

This commit is contained in:
Daniel
2026-03-07 19:37:38 +08:00
parent ea760bb71c
commit 382aa955ef
13 changed files with 447 additions and 166 deletions

5
docs/readm.md Normal file
View File

@@ -0,0 +1,5 @@
这里曾是一座依山而居、世代相传的原始村落。青瓦土墙、石板小路、院落炊烟,记录着村民们质朴而悠长的生活记忆。随着时代的发展,国家重大交通工程 西渝高铁 的线路从这里经过,为区域带来新的机遇与活力。为了配合建设,村民们整体搬迁至新的安置点,开启了更加便利、现代的生活。
如今,这片旧址被完整保留下来,以最原始的村落风貌呈现在人们面前。通过全景影像,曾经的院落布局、街巷肌理与自然环境得以真实记录,也让人们得以重新走进这段乡村记忆。
这幅全景图不仅是一份空间记录,更是一段关于 时代变迁、乡愁记忆与发展轨迹 的见证。旧村虽迁,但生活的印记与文化的脉络,依然在这片土地上静静延续。

101
docs/部署说明.md Normal file
View File

@@ -0,0 +1,101 @@
# 前后端分离部署说明
项目支持**前后端分离**部署:前端为纯静态资源,后端为独立 Node API便于分别部署到静态主机与 API 服务器。
---
## 一、目录与职责
| 类型 | 目录/文件 | 说明 |
|------|-----------|------|
| **前端(静态)** | `index.html`, `config.json`, `api.config.json`, `lib/`, `image/` | 可部署到 Nginx、OSS、Vercel、GitHub Pages 等 |
| **后端API** | `server/`(含 `server.js`, `db.js`, `index.js`, `package.json` | 单独部署到 Node 主机,仅提供 `/api/*` 接口 |
---
## 二、前端部署
1. **构建静态包**(在项目根目录):
```bash
npm run build
```
产出目录 `dist/`,内含:`index.html`, `config.json`, `api.config.json`, `lib/`, `image/`。
2. **配置 API 地址**
将 `dist/` 部署到你的静态站点后,修改 **`dist/api.config.json`**(或部署前在根目录改好再 build
```json
{
"apiBase": "https://你的API域名"
}
```
- 不填或空字符串 `""` 表示与当前页面同源(例如 Nginx 反向代理了 `/api` 到后端时可用 `""`)。
- 前后端不同域时填后端根地址,例如 `https://api.example.com`(不要以 `/` 结尾)。
前端会请求 `apiBase + '/api/config'`、`apiBase + '/api/stats'` 等。
3. **上传**:将 `dist/` 内所有文件上传到静态主机或 CDN。
---
## 三、后端部署
1. **只部署 API**:进入后端目录并安装依赖、启动:
```bash
cd server
npm install
npm start
```
默认端口 3000可通过环境变量 `PORT` 修改。
数据库文件为 `server/data/pano.db`(首次运行自动创建)。
2. **生产环境建议**
- 使用 pm2、systemd 等保活。
- 如需限制跨域,设置环境变量 `CORS_ORIGIN` 为前端域名,例如:
`CORS_ORIGIN=https://你的前端域名`
---
## 四、弹幕配置(后端)
弹幕**默认不显示**,由后端配置控制。
- 接口:**GET /api/config** 返回示例:
```json
{
"danmakuEnabled": false,
"danmakuPosition": "top"
}
```
- 数据来源SQLite 表 `settings`(在 `server/data/pano.db` 所在库):
- `danmaku_enabled``1` 开启弹幕,`0` 关闭(默认)。
- `danmaku_position`:弹幕区域位置,目前仅使用 `top`(顶部)。
**开启弹幕**:在部署后端的机器上执行(或通过自建管理接口写入):
```bash
cd server
node -e "
const db = require('better-sqlite3')('data/pano.db');
db.prepare(\"INSERT OR REPLACE INTO settings (key, value) VALUES ('danmaku_enabled', '1')\").run();
db.close();
"
```
或使用 SQLite 客户端执行:
```sql
INSERT OR REPLACE INTO settings (key, value) VALUES ('danmaku_enabled', '1');
```
前端会周期性/首次请求 `/api/config`,收到 `danmakuEnabled: true` 后显示顶部弹幕并拉取留言。
---
## 五、本地联合运行(不分离)
在项目根目录:
```bash
npm install
npm start
```
会同时提供静态资源与 `/api` 接口(根目录 `server.js` 挂载 `server/` 的 API适合本地开发。此时 `api.config.json` 的 `apiBase` 保持为 `""` 即可。