# paynote

**Repository Path**: mennnnn/paynote

## Basic Information

- **Project Name**: paynote
- **Description**: 支付记账app
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-13
- **Last Updated**: 2026-05-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PayNote - 团队记账应用

一个纯前端的团队记账 Web 应用，支持多项目管理、消费分类、账单记录与自动债务结算。

## 功能特性

- **成员管理** — 维护全局成员池，按需加入各项目
- **项目管理** — 以项目为单位记账（如团队旅游、年会聚餐）
- **分类管理** — 每个项目独立管理消费分类，支持 emoji 图标
- **账单记录** — 记录金额、分类、付款人、参与者，自动计算均摊金额
- **消费统计** — 总消费、人均消费、分类占比、成员排行
- **债务结算** — 自动生成最优结算方案，最小化转账次数
- **数据持久化** — 数据存储在浏览器 localStorage，刷新不丢失
- **响应式布局** — 桌面端侧边栏 + 移动端底部导航

## 技术栈

| 类别 | 技术 |
|------|------|
| 框架 | React 19 + Vite 6 |
| 语言 | TypeScript |
| 样式 | Tailwind CSS + shadcn/ui |
| 状态管理 | Zustand（含 localStorage 持久化） |
| 包管理 | pnpm |

## 快速开始

### 环境要求

- Node.js >= 18
- pnpm >= 8

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm dev
```

浏览器访问 [http://localhost:5173](http://localhost:5173)

### 构建生产版本

```bash
pnpm build
```

构建产物输出到 `dist/` 目录。

### 预览生产构建

```bash
pnpm preview
```

## 使用流程

1. **添加成员** — 进入「成员」页面，添加参与活动的团队成员
2. **创建项目** — 进入「项目」页面，新建一个项目（如"五一旅游"）
3. **配置项目** — 进入项目详情，在「成员」标签页将成员加入项目，在「分类」标签页添加消费分类（如交通、餐饮）
4. **记录账单** — 在「账单」标签页添加每笔消费，选择付款人和参与者
5. **查看统计** — 在「统计」标签页查看消费汇总和结算方案

## 项目结构

```
src/
├── types/          # TypeScript 类型定义
├── store/          # Zustand 状态管理
├── lib/
│   ├── utils.ts        # 工具函数
│   ├── settlement.ts   # 债务结算算法
│   └── statistics.ts   # 消费统计计算
├── components/
│   ├── ui/             # shadcn/ui 基础组件
│   ├── layout/         # 布局组件（侧边栏、底部导航）
│   ├── members/        # 成员管理组件
│   ├── projects/       # 项目管理组件
│   ├── expenses/       # 账单管理组件
│   ├── categories/     # 分类管理组件
│   └── statistics/     # 统计展示组件
└── views/          # 页面级组件
```

## 数据说明

所有数据存储在浏览器 `localStorage`，key 为 `paynote-v1`。清除浏览器数据会导致数据丢失，建议定期通过浏览器开发者工具导出备份。