mars
f20988b90c
- 更新 DashboardLayout 组件，统一使用演示模式布局 - 实现仪表盘页面的完整演示数据和功能 - 完成用户管理页面的演示模式，包含搜索、过滤、分页等功能 - 实现通话记录页面的演示数据和录音播放功能 - 完成翻译员管理页面的演示模式 - 实现订单管理页面的完整功能 - 完成发票管理页面的演示数据 - 更新文档管理页面 - 添加 utils.ts 工具函数库 - 完善 API 路由和数据库结构 - 修复各种 TypeScript 类型错误 - 统一界面风格和用户体验
183 lines
4.5 KiB
Markdown
183 lines
4.5 KiB
Markdown
# 修复说明文档
|
|
|
|
## 已解决的问题
|
|
|
|
### 1. 多个 GoTrueClient 实例问题
|
|
**问题描述**: 应用程序中同时使用了多种 Supabase 客户端创建方式，导致浏览器中出现多个 GoTrueClient 实例的警告。
|
|
|
|
**解决方案**:
|
|
- 统一使用单一的 Supabase 客户端实例
|
|
- 移除了 `createClientComponentClient` 和重复的客户端创建代码
|
|
- 在 `lib/supabase.ts` 中导出统一的 `supabase` 客户端
|
|
|
|
### 2. 路由跳转和认证状态管理
|
|
**问题描述**: 登录后出现 "Abort fetching component" 错误，路由跳转不稳定。
|
|
|
|
**解决方案**:
|
|
- 简化了认证状态监听逻辑
|
|
- 统一使用 `auth` 模块中的认证方法
|
|
- 改进了路由跳转的时机和方式
|
|
- 添加了防重复提交机制
|
|
|
|
### 3. 代码结构优化
|
|
**问题描述**: 代码重复，结构混乱，维护困难。
|
|
|
|
**解决方案**:
|
|
- 重构了 `lib/supabase.ts`，提供了统一的 API
|
|
- 创建了 `auth`、`db`、`storage`、`realtime` 等模块化功能
|
|
- 添加了错误处理和权限检查功能
|
|
- 简化了组件中的 Supabase 调用
|
|
|
|
## 主要改动文件
|
|
|
|
### 1. `lib/supabase.ts`
|
|
- 统一了 Supabase 客户端创建
|
|
- 提供了模块化的功能接口
|
|
- 添加了演示模式支持
|
|
- 改进了错误处理
|
|
|
|
### 2. `app/auth/login/page.tsx`
|
|
- 使用统一的认证 API
|
|
- 改进了用户体验
|
|
- 添加了防重复提交
|
|
- 优化了错误提示
|
|
|
|
### 3. `app/dashboard/page.tsx`
|
|
- 简化了认证检查逻辑
|
|
- 使用统一的 Supabase 客户端
|
|
- 改进了加载状态处理
|
|
- 添加了用户友好的界面
|
|
|
|
## 使用说明
|
|
|
|
### 开发环境设置
|
|
|
|
1. **配置环境变量**:
|
|
```bash
|
|
cp .env.example .env.local
|
|
```
|
|
|
|
编辑 `.env.local` 文件，填入你的 Supabase 项目信息：
|
|
```env
|
|
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
|
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
|
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
|
|
```
|
|
|
|
2. **启动开发服务器**:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
3. **访问应用**:
|
|
打开浏览器访问 `http://localhost:3000`
|
|
|
|
### 演示模式
|
|
|
|
如果没有配置 Supabase 环境变量，应用会自动进入演示模式：
|
|
- 显示模拟数据
|
|
- 禁用实际的数据库操作
|
|
- 提供完整的界面预览
|
|
|
|
### 认证流程
|
|
|
|
1. **注册**: `/auth/register`
|
|
2. **登录**: `/auth/login`
|
|
3. **仪表板**: `/dashboard` (需要登录)
|
|
4. **登出**: 点击仪表板右上角的登出按钮
|
|
|
|
## API 使用示例
|
|
|
|
### 认证操作
|
|
```typescript
|
|
import { auth } from '../lib/supabase';
|
|
|
|
// 登录
|
|
const { user, session } = await auth.signIn(email, password);
|
|
|
|
// 注册
|
|
const { user, session } = await auth.signUp(email, password, userData);
|
|
|
|
// 获取当前用户
|
|
const user = await auth.getCurrentUser();
|
|
|
|
// 登出
|
|
await auth.signOut();
|
|
```
|
|
|
|
### 数据库操作
|
|
```typescript
|
|
import { db } from '../lib/supabase';
|
|
|
|
// 查询数据
|
|
const users = await db.findMany('users', { status: 'active' });
|
|
|
|
// 插入数据
|
|
const newUser = await db.insert('users', userData);
|
|
|
|
// 更新数据
|
|
const updatedUser = await db.update('users', userId, updates);
|
|
|
|
// 删除数据
|
|
await db.delete('users', userId);
|
|
```
|
|
|
|
### 实时订阅
|
|
```typescript
|
|
import { realtime } from '../lib/supabase';
|
|
|
|
// 订阅表变化
|
|
const channel = realtime.subscribe('users', (payload) => {
|
|
console.log('用户数据变化:', payload);
|
|
});
|
|
|
|
// 取消订阅
|
|
realtime.unsubscribe(channel);
|
|
```
|
|
|
|
## 故障排除
|
|
|
|
### 1. 多个 GoTrueClient 实例警告
|
|
这个警告已经通过统一客户端实例解决。如果仍然出现，请检查：
|
|
- 是否有其他地方创建了额外的 Supabase 客户端
|
|
- 浏览器缓存是否需要清理
|
|
|
|
### 2. 路由跳转问题
|
|
如果登录后仍然出现路由问题：
|
|
- 检查浏览器控制台的错误信息
|
|
- 确保 Supabase 配置正确
|
|
- 尝试清理浏览器缓存和 localStorage
|
|
|
|
### 3. 认证状态不同步
|
|
如果用户状态显示不正确：
|
|
- 检查网络连接
|
|
- 确认 Supabase 项目状态
|
|
- 查看浏览器开发者工具的网络请求
|
|
|
|
## 下一步开发建议
|
|
|
|
1. **添加实际的数据库表结构**
|
|
2. **实现完整的用户权限系统**
|
|
3. **添加更多的业务功能模块**
|
|
4. **集成 Twilio API 进行实际的通话功能**
|
|
5. **添加文件上传和文档翻译功能**
|
|
6. **实现支付和订单管理系统**
|
|
|
|
## 技术栈
|
|
|
|
- **前端**: Next.js 14, React 18, TypeScript
|
|
- **样式**: Tailwind CSS
|
|
- **后端**: Supabase (PostgreSQL + Auth + Storage)
|
|
- **部署**: Vercel (推荐)
|
|
|
|
## 支持
|
|
|
|
如果遇到问题，请检查：
|
|
1. Node.js 版本 (推荐 18+)
|
|
2. npm 或 yarn 版本
|
|
3. Supabase 项目配置
|
|
4. 环境变量设置
|
|
|
|
---
|
|
|
|
*最后更新: 2024年12月* |