一个基于 Nuxt 4 + Nuxt UI 构建的现代化聊天应用，支持用户认证、频道管理和消息功能。
- 前端框架: Nuxt 4.2.2 + Vue 3.5.26
- UI 组件库: Nuxt UI 4.3.0
- 样式方案: Tailwind CSS 4.1.18
- 数据库: SQLite (通过 Drizzle ORM)
- ORM: Drizzle ORM 1.0.0-beta
- 密码加密: Argon2
- HTTP 框架: H3
- 工具函数库: Radashi
- 验证库: Zod 4.3.5
- 代码规范: ESLint + Oxlint + Prettier
- ✅ 用户注册和登录
- ✅ 基于令牌的身份认证
- ✅ 用户信息管理
- ✅ 频道创建
- ✅ 数据库模型设计（用户、频道、消息、文件、关系表）
项目采用 SQLite 数据库，包含以下数据表：
- users - 用户表（用户名、邮箱、手机、密码、头像等）
- auth_tokens - 认证令牌表（令牌管理、过期控制）
- channels - 频道表（公开/私密/直接消息三种类型）
- messages - 消息表（消息元数据）
- text_contents - 文本内容表（支持富文本消息）
- file_contents - 文件内容表（支持文件附件）
- user_channels - 用户频道关系表（成员管理、访问时间）
.
├── app/
│ ├── assets/css/ # 样式文件（含 Mi Sans 字体）
│ ├── pages/ # 页面组件
│ │ ├── index.vue # 首页
│ │ ├── login.vue # 登录页
│ │ └── register.vue # 注册页
│ └── app.vue # 应用根组件
├── db/
│ └── schema.ts # 数据库 Schema 定义
├── server/
│ ├── api/ # API 接口
│ │ ├── channel/ # 频道相关接口
│ │ └── user/ # 用户相关接口（登录、注册、登出等）
│ └── utils/
│ └── drizzle.ts # 数据库工具
├── shared/utils/ # 共享工具函数
│ ├── fetch.ts # 请求封装
│ └── uuid.ts # UUID 生成
└── drizzle.config.ts # Drizzle 配置
pnpm install启动开发服务器（默认运行在 http://localhost:3000/chat/）：
pnpm dev生成数据库迁移文件：
pnpm drizzle-kit generate应用数据库迁移：
pnpm drizzle-kit migrate打开 Drizzle Studio 管理数据库：
pnpm drizzle-kit studio运行代码检查和格式化：
pnpm lint该命令会依次执行：
- Oxlint 快速检查
- ESLint 全面检查
- Nuxt 类型检查
构建生产版本：
pnpm build- baseURL: 应用部署在
/chat/路径下 - 数据库文件:
./sqlite/database.sqlite - 字体: 使用自定义 Mi Sans 字体，禁用了 Nuxt UI 默认字体
为方便开发和测试，系统预设了两个测试用户账号：
| 字段 | 值 |
|---|---|
| 用户名 | 张三 |
| 邮箱 | [email protected] |
| 手机号 | 13800138001 |
| 密码 | Test123456 |
| 用途 | 主测试账号，用于测试基本功能 |
| 字段 | 值 |
|---|---|
| 用户名 | 李四 |
| 邮箱 | [email protected] |
| 手机号 | 13800138002 |
| 密码 | Test123456 |
| 用途 | 辅助测试账号，用于测试多用户交互场景 |
使用上述测试账号可以测试以下场景：
- ✅ 用户登录（使用用户名/邮箱/手机号）
- ✅ 用户信息查询
- ✅ 创建频道
- ✅ 多用户频道交互
- ✅ 令牌认证和过期处理
⚠️ 注意: 这些是测试账号，仅用于开发环境。生产环境请勿使用默认密码。
- 实时消息推送
- 文件上传功能
- 频道成员管理
- 消息搜索功能
- 用户在线状态
- 消息通知系统