# caipu

**Repository Path**: Strongbb/caipu

## Basic Information

- **Project Name**: caipu
- **Description**: 家庭用菜谱
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 家庭菜谱

给家里人一起用的手机菜谱本：记下常做的菜，按分类快速找到；两个人各自点菜，会合并成同一份今日菜单，之后还能回看历史菜单。界面尽量简单，添加菜谱只需图片、名称和类型。

## 页面预览

以下截图使用通用演示菜品，不包含家庭真实菜谱或订单。更多页面预览图见 [`assets/screenshots/`](assets/screenshots/)。

<table>
  <tr>
    <td align="center"><img src="assets/screenshots/01-home.jpg" width="220" alt="家庭菜谱首页" /><br/>首页：今天想吃和最近添加</td>
    <td align="center"><img src="assets/screenshots/02-recipes.jpg" width="220" alt="菜谱分类与列表" /><br/>菜谱：搜索、单品套餐和分类</td>
  </tr>
  <tr>
    <td align="center"><img src="assets/screenshots/04-today-menu.jpg" width="220" alt="今日菜单" /><br/>今日菜单：两部手机共用一份点菜结果</td>
    <td align="center"><img src="assets/screenshots/05-history.jpg" width="220" alt="历史菜单" /><br/>历史菜单：按日期回看吃过的菜</td>
  </tr>
</table>

其他页面截图：点菜列表 [`03-orders.jpg`](assets/screenshots/03-orders.jpg)、菜谱详情 [`06-recipe-detail.jpg`](assets/screenshots/06-recipe-detail.jpg)、随机选菜 [`07-random.jpg`](assets/screenshots/07-random.jpg)。

## 技术栈

- Vue 3、TypeScript、Vite、Vue Router、Pinia、Vant
- Node.js API、PostgreSQL
- 菜谱图片自动压缩并保存到 API 配置的上传目录

## 本地运行

需要 Node.js 20+ 和 PostgreSQL。

1. 安装依赖：

   ```bash
   npm install
   ```

2. 复制配置模板并填写数据库连接和访问码：

   ```bash
   cp server/.env.example server/.env
   ```

   至少设置 `DATABASE_URL` 和 `FAMILY_ACCESS_CODE`。首次运行会自动创建数据表，不会写入个人菜谱示例。

3. 启动 API：

   ```bash
   npm run dev:api
   ```

4. 新开终端启动网页：

   ```bash
   npm run dev
   ```

   浏览器打开 Vite 显示的本地地址。

## 构建

```bash
npm run build
npm run preview
```

前端构建产物位于 `dist/`。部署时将 `VITE_API_BASE_URL` 设置为 API 地址；若网页和 API 使用同一域名反向代理，可留空。使用 Vue Router history 模式时，静态托管需要把未知路径回退到 `index.html`。

## Docker Compose

项目包含 `compose.yaml`、`Dockerfile.web` 和 `Dockerfile.api`。运行前在项目根目录创建 `.env` 并设置：

```dotenv
DATABASE_URL=postgresql://用户名:密码@数据库地址:5432/数据库名
FAMILY_ACCESS_CODE=请设置一个自己的访问码
APP_ORIGIN=https://你的网页域名
```

API 使用 PostgreSQL；数据库需要由你自行准备，并允许 API 容器访问。上传图片保存在项目的 `uploads/` 目录，请为其配置持久化备份。Compose 默认只把网页绑定到本机 `127.0.0.1:18180`，可由自己的 HTTPS 网关反向代理。不要把真实 `.env` 文件或访问码提交到代码仓库。

## 数据与配置

前端通过 `src/services/api.ts` 访问 API。数据库连接、访问码、上传目录和端口通过环境变量配置；模板见 `server/.env.example`。数据库结构见 `server/schema.sql`。`server/seed.sql` 留空，不包含任何个人菜谱数据。