问题与解决方案总结

1. 图片生成后端接入

需求：

• 用户点击生成图片后，自动扣除 1 个点数
• 图片生成成功后，保存到历史记录表
• 图片生成失败，回滚点数
• 使用数据库数据，移除 mock 数据
• 使用 SUPABASE_SERVICE_ROLE_KEY 的 adminClient 进行数据库操作

解决方案：

• 修改 generateImageAction 使用 adminClient 进行所有数据库操作
• 修改 getUserCreditsAction 和 getUserHistoryAction 使用 adminClient 读取数据
• 实现点数扣减逻辑和失败回滚机制

遇到的问题：

• RLS 策略阻止 update 操作：虽然使用了 SERVICE_ROLE_KEY，但 update 仍受 RLS 限制
• 根本原因：Server Action 中 auth.uid() 为 null，RLS 条件 auth.uid() = user_id 永远不满足
• 最终方案：创建 security definer 函数 update_credits_by_user_id 绕过 RLS

create or replace function update_credits_by_user_id(user_id_param uuid, new_credits bigint)
returns json
language plpgsql
security definer
as $$
...
$$;

---

2. 布局与导航栏

问题：

• 导航栏消失
• 要求导航栏只显示在营销页面，不在 /protected 页面显示

解决方案：

• app/(marketing)/layout.tsx – 包含 Navbar
• app/protected/layout.tsx – 不包含 Navbar
• 根布局只包含 ThemeProvider，不返回 html 标签

---

3. 注册赠送点数

需求：新用户注册自动赠送 5 个点数

解决方案：

• 修改 signUpAction，注册成功后使用 adminClient 插入点数记录
• 或创建 SQL trigger handle_new_user_credits

---

4. 历史记录展示

需求：在 /protected 页面展示数据库中的历史图片

解决方案：

• 创建 components/history-gallery.tsx 组件
• 使用 getUserHistoryAction 获取数据
• 卡片式展示：首图预览、提示词、生成时间、消耗点数

---

5. 图片加载优化

问题：图片加载慢

原因：

• 使用 unoptimized 属性禁用了 Next.js 图片优化
• 图片来自阿里云 OSS，尺寸大（1024×1024）

解决方案：

• next.config.ts 添加阿里云 OSS 域名到 remotePatterns
• 移除 unoptimized 属性
• 添加 sizes 属性实现响应式尺寸
• 添加 priority 属性优先加载首屏图片

---

关键文件

文件	用途
app/actions.ts	Server Actions（图片生成、获取点数、历史记录）
utils/supabase/admin.ts	创建 Admin Client（SERVICE_ROLE_KEY）
components/image-generator.tsx	图片生成前端组件
components/history-gallery.tsx	历史记录展示组件
app/protected/page.tsx	保护页面
app/(marketing)/layout.tsx	营销页面布局
app/protected/layout.tsx	保护页面布局

---

重要经验

1. Supabase RLS 注意事项：
   • select() 使用 SERVICE_ROLE_KEY 可以绕过 RLS
   • update/insert/delete 使用 SERVICE_ROLE_KEY 仍受 RLS 限制
   • 需要使用 security definer 函数来绕过写入限制的 RLS
2. Next.js 图片优化：
   • 远程图片需要配置 remotePatterns
   • 避免使用 unoptimized，除非必须
   • 使用 sizes 和 priority 优化加载性能