示例功能
供替换的 Todos 与个人资料/头像示例。
这些是可运行的模式，不是预设的产品领域。两者都标为 Example，并需要先完成
Supabase Setup 中的 profiles、todos 和私有 avatars storage。
Todos — Example
src/services/todos.ts 展示完整的数据路径：用于 list、create、toggle、delete 的小型、带类型
Supabase service functions。Showcase Todos route 通过 TanStack Query 使用它们。它只选择
id、user_id、title、completed、sort_order、created_at、updated_at；限制行访问的是
RLS，而不是 client-side filter。
为产品功能复用这一结构：
- 把 transport code 放入不依赖 components 的
src/services/<domain>.ts。 - 在 UI 中使用
useQuery和useMutation处理读取、mutation 和 cache invalidation。 - 用 RLS 强制所有权；不要把传入的
user_id当作权限依据。 - 明确设计 loading、empty、offline、error states。
service 是替换点。即使把 Supabase calls 换成另一种 backend，route 也不必了解该 transport 变化。
Profile 与 avatar — Example
src/services/profile.ts 读取和更新已登录用户的 profiles row。src/services/avatar.ts
展示 private-object storage：
- 验证 PNG、JPEG、WebP，最大 5 MB。
- 将文件 upsert 到
avatars的<userId>/avatar.<extension>，再把 storage path 保存到profiles.avatar_url。 - 用七天有效的 signed URL 读取；更新后以
updated_at作为 cache key。 - 删除时移除 object，再清空
avatar_url。
不要为了方便显示图片而把 bucket 设为 public。Supabase Setup 中的 storage policies 会将每个 已认证用户限制在自己的 folder。
有意不提供的内容
这里没有 dashboard-with-charts、admin panel、CRM 或通用 SaaS back office。这些结构会替你的 桌面产品做假设。可复用 primitives 请在 Components gallery 查看；Showcase 是可删除 demo layer， 不是应用的信息架构。