1. 项目概述一个为 Cursor AI 编辑器打造的规则管理平台如果你和我一样深度依赖 Cursor 这款 AI 驱动的代码编辑器那你一定对它的.cursorrules文件又爱又恨。爱的是它能精准地约束 AI 的行为让代码生成、重构和问答都符合你的项目规范恨的是管理这些规则文件本身就是一件琐碎且容易出错的事情。当你有多个项目、多个团队或者需要在不同仓库间复用一套规则时手动复制粘贴.cursorrules文件或者在不同分支间同步更新很快就会变成一场噩梦。CursorRulesCraft正是为了解决这个痛点而生的。它是一个现代化的、开源的 Web 应用核心目标就是帮你集中化、可视化地管理所有 Cursor 规则。你可以把它想象成一个专为.cursorrules文件打造的“GitHub Gist”或“代码片段管理器”但功能更聚焦体验更流畅。它允许你创建、编辑、分类、搜索规则并通过一键复制或直接生成 GitHub Gist 链接的方式快速应用到任何项目中。对于团队而言它更是提供了一个统一的规则中心确保所有成员使用的都是最新、最一致的 AI 编码规范。这个项目本身也是一个绝佳的全栈开发学习案例。它采用了当前最受追捧的“现代 Web 开发技术栈”使用React 19和TypeScript构建响应式前端通过Vite获得极速的开发体验用Tailwind CSS和Radix UI打造美观且无障碍的界面依赖TanStack Query处理复杂的服务器状态并以Supabase作为全栈后端提供数据库、认证、实时订阅等一体化服务。整个项目基于Nx构建为单体仓库结构清晰配置优雅非常适合中级开发者学习如何将这一系列明星技术整合成一个真正的生产级应用。2. 技术栈深度解析与选型逻辑2.1 为什么选择这个“全家桶”看到CursorRulesCraft的技术栈列表你可能会觉得“这很主流”。没错但每一项选择背后都有其深思熟虑的考量而不仅仅是追逐潮流。这套组合拳在开发效率、性能、类型安全和开发者体验之间取得了很好的平衡。前端基石Vite React 19 TypeScriptVite取代 Webpack 成为现代前端构建工具的首选根本原因在于其基于原生 ES 模块的极速冷启动和热更新。在开发一个需要频繁修改组件和样式的管理后台时每次保存代码后近乎无感的更新速度能极大提升开发心流。其清晰的配置和优秀的插件生态如对 React、TypeScript 的开箱即用支持也减少了前期搭建的复杂度。React 19作为项目启动时的最新稳定版它带来了诸如 Actions、use 钩子等新特性虽然在本项目初期可能未全部用到但采用最新稳定版可以避免未来重大的升级断代并能逐步享受新 API 带来的开发模式优化。TypeScript对于任何严肃的项目尤其是涉及复杂数据状态如规则内容、用户权限的应用TypeScript 提供的类型安全是必不可少的。它能将大量运行时错误提前到编译时配合 Vite 的快速类型检查使得在编写数据查询、表单提交等逻辑时信心大增。样式与UITailwind CSS Radix UITailwind CSS实用优先的 CSS 框架。在开发需要大量定制化 UI 组件如规则编辑器、卡片布局的应用时Tailwind 允许你在 JSX/TSX 中快速迭代样式无需在 CSS 文件和组件文件间反复跳转。其设计系统间距、颜色、字体大小也保证了整个应用视觉上的一致性。项目中搭配的tailwind-merge和clsx更是解决了条件类名合并时的冲突问题是编写动态样式的最佳实践。Radix UI这是一个关键选择。我们不想从零开始构建可访问的对话框、下拉菜单或标签页但也不想引入一个自带沉重样式、难以定制的组件库。Radix UI 提供了完全无样式、行为完整且严格遵循 WAI-ARIA 标准的底层 UI 原语。这意味着我们可以用 Tailwind CSS 随心所欲地为其添加样式同时确保了键盘导航、屏幕阅读器支持等可访问性需求从一开始就得到满足这对于一个工具类产品至关重要。数据层TanStack Query SupabaseTanStack Query (原 React Query)它彻底改变了我们处理服务器状态的方式。在CursorRulesCraft中规则列表的获取、单个规则的加载、用户收藏的更新等都是典型的“服务器状态”。TanStack Query 自动为我们处理了缓存、后台刷新、依赖数据更新、分页、无限加载等复杂逻辑。你不再需要手动维护useState和useEffect来管理加载和错误状态代码会简洁很多。Supabase这是后端选择的精髓。作为一个开源的 Firebase 替代品Supabase 提供了一个实时的 PostgreSQL 数据库、身份验证、存储和边缘函数。对于这样一个中等复杂度的项目使用 Supabase 意味着免去后端语言选择烦恼我们直接用 SQL 定义表结构通过其 JavaScript 客户端在前端进行安全的 CRUD 操作。内置认证集成 Clerk另一个优秀的认证服务或 Supabase 自身的 Auth 都非常方便本项目选择了 Clerk 以利用其丰富的预置 UI 组件。实时功能如果未来需要实现“团队内规则实时更新”功能Supabase 的实时订阅可以轻松实现。行级安全直接在数据库层面通过策略控制用户对数据的访问权限安全性更高。开发体验与质量ESLint Prettier NxESLint Prettier保证代码风格统一和质量的自动化工具。Prettier 专注于格式化ESLint 则捕捉潜在错误和不良模式。将它们与编辑器保存自动格式化结合能让团队协作毫无摩擦。Nx这是一个单体仓库构建系统。CursorRulesCraft采用了简单的 Nx 结构将前端应用、后端 API本项目使用 NestJS和共享类型定义放在一个仓库中。这样做的好处是代码共享极其方便比如前后端共用 TypeScript 类型并且可以利用 Nx 的智能构建缓存和依赖图加速构建和测试过程。2.2 环境配置的“单点真理”设计项目文档中特别强调了环境配置这是很多初学者容易踩坑的地方。CursorRulesCraft采用了一种非常清晰且高效的策略在项目根目录使用唯一的一个.env文件。注意这是一个关键的最佳实践。很多项目会在apps/frontend和apps/backend下分别放置.env.local等文件这容易导致配置不一致或泄露。集中管理则避免了这个问题。它的工作原理是前端 (Vite)在apps/frontend/vite.config.ts中通过envDir: ../../配置告诉 Vite 去上一级目录即项目根目录寻找.env文件。只有以VITE_开头的变量才会被暴露给客户端代码。后端 (NestJS)在apps/backend的启动配置中通过envFilePath: ../../.env指定环境文件路径。Nx在nx.json中将.env文件标记为sharedGlobalInputs这样当.env文件变化时Nx 知道需要重新构建依赖它的所有应用。这样做的好处是你只需要维护一份密钥和配置。无论是本地开发还是部署到生产环境配置的来源都是单一的极大降低了管理成本。3. 从零开始的本地开发环境搭建实操3.1 前期准备工具链安装在克隆代码之前请确保你的机器上已经安装了以下工具。这是保证后续一切顺利的基础。Node.js v22这是运行时基础。强烈建议使用版本管理工具如nvm(macOS/Linux) 或fnm(跨平台)。# 使用 nvm 安装并切换 nvm install 22 nvm use 22 # 验证 node --version # 应输出 v22.x.x项目根目录下的.nvmrc文件会在你进入目录时自动提示使用正确版本如果你安装了相关 shell 插件。Bun作为比 npm/yarn/pnpm 更快的 JavaScript 运行时和包管理器。安装非常简单curl -fsSL https://bun.sh/install | bash安装后重启终端运行bun --version确认。Docker因为 Supabase 本地开发环境依赖于 Docker 容器来运行 PostgreSQL 数据库和相关的服务。请前往 Docker 官网 下载并安装适合你操作系统的 Docker Desktop。安装后确保 Docker 守护进程正在运行。Supabase CLI这是管理本地和远程 Supabase 项目的命令行工具。# macOS 推荐使用 Homebrew brew install supabase/tap/supabase # 其他平台或备用方案 npm install -g supabase安装后运行supabase --version验证。3.2 项目初始化与启动假设你已经将项目克隆到本地。安装依赖使用 Bun 安装所有依赖包。在项目根目录执行bun install这个过程会读取根目录的package.json和bun.lockb安装所有工作区前端、后端、共享包的依赖。Bun 的速度通常比 npm/yarn 快一个数量级。启动本地 Supabase这是最关键的一步。Supabase 本地服务包含了项目所需的 PostgreSQL 数据库、管理 API 和 Studio 图形界面。bun run supabase:start # 或者直接使用 supabase CLI supabase start首次运行会下载 Docker 镜像可能需要几分钟。成功后终端会打印出类似以下的关键信息Started supabase local development setup. API URL: http://127.0.0.1:54321 GraphQL URL: http://127.0.0.1:54321/graphql/v1 Database URL: postgresql://postgres:postgres127.0.0.1:54322/postgres Studio URL: http://127.0.0.1:54323 Inbucket URL: http://127.0.0.1:54324 anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...务必保存好anon key和service_role key下一步配置环境变量需要它们。同时你可以打开Studio URL(通常是 http://127.0.0.1:54323) 在浏览器中查看和管理本地数据库。配置环境变量在项目根目录复制环境变量模板文件并填充真实值。cp .env.example .env然后用文本编辑器打开.env文件。你需要填充以下几个部分Supabase 部分将上一步获取的API URL、anon key、service_role key填入对应变量。Clerk 部分你需要注册 Clerk 创建一个应用然后在 API Keys 页面获取Publishable Key和Secret Key。前者以pk_开头用于前端后者以sk_开头用于后端。将VITE_CLERK_PUBLISHABLE_KEY和CLERK_SECRET_KEY分别填入。GitHub OAuth (可选)如果你需要实现从 GitHub 仓库导入规则的功能需要配置此项。在 GitHub Developer Settings 中创建 OAuth App填写正确的回调地址然后填入对应的GITHUB_CLIENT_ID和GITHUB_CLIENT_SECRET。实操心得.env文件默认被.gitignore忽略所以不用担心密钥被提交。env.example文件则应该被提交作为所有必需环境变量的文档。确保所有以VITE_为前缀的变量都已设置否则前端可能无法获取到配置。启动应用一切就绪后使用 Nx 提供的命令同时启动前端和后端开发服务器。bun run dev:all这个命令会并行启动前端开发服务器运行在 http://localhost:3000提供热重载的 React 应用。后端开发服务器运行在 http://localhost:4000提供 NestJS API 服务。 打开浏览器访问 http://localhost:3000你应该能看到CursorRulesCraft的登录/注册界面由 Clerk 提供。完成认证后即可进入主应用界面。3.3 数据库迁移与结构管理项目的数据库结构定义在supabase/migrations/目录下的 SQL 文件中。当你执行supabase start时CLI 会自动应用所有这些迁移文件在本地数据库中创建对应的表。000_create_users.sql通常与 Clerk 的用户表进行关联可能在 Supabase 中创建一个profiles表通过user_id字段与 Clerk 的用户 ID 关联用于存储用户的额外信息。001_create_workspaces.sql创建“工作区”和“成员”表支持团队协作功能。一个用户可以属于多个工作区一个工作区可以有多条规则。002_create_repositories.sql创建“仓库”表用于关联 GitHub 仓库可能存储仓库名称、URL 以及与之绑定的规则集。如果你需要修改数据库结构例如添加一个新字段正确的做法是生成一个新的迁移文件# 首先在 Supabase Studio 或通过 SQL 直接修改本地数据库 # 然后生成差异迁移文件 supabase db diff -f add_description_to_rules这会在supabase/migrations/下生成一个类似003_add_description_to_rules.sql的文件其中包含了从当前状态到你所做修改的 SQL 语句。这个文件可以被提交到版本控制确保所有开发者和生产环境的数据结构变更是一致的。4. 核心功能模块实现与代码剖析4.1 前端架构基于 Radix UI 和 TanStack Query 的组件化实践前端应用位于apps/frontend目录。其核心是构建一个响应迅速、交互友好的规则管理界面。状态管理与数据获取应用的核心状态是“规则”。我们使用 TanStack Query 来管理规则的服务器状态。通常会在src/lib/queryClient.ts中配置一个全局的QueryClient并设置合理的默认选项如缓存时间、重试逻辑。在src/providers/下会有一个QueryClientProvider包裹整个应用。获取规则列表的钩子可能如下所示// src/hooks/useRules.ts import { useQuery, useMutation, useQueryClient } from tanstack/react-query; import { supabase } from /lib/supabase; import type { Rule } from shared-types; export function useRules(workspaceId?: string) { return useQuery({ queryKey: [rules, workspaceId], queryFn: async () { let query supabase.from(rules).select(*); if (workspaceId) { query query.eq(workspace_id, workspaceId); } const { data, error } await query.order(created_at, { ascending: false }); if (error) throw new Error(error.message); return data as Rule[]; }, // 只有当用户登录且有 workspaceId 时才启用查询 enabled: !!workspaceId, }); } export function useCreateRule() { const queryClient useQueryClient(); return useMutation({ mutationFn: async (newRule: OmitRule, id | created_at | updated_at) { const { data, error } await supabase.from(rules).insert([newRule]).select().single(); if (error) throw error; return data; }, onSuccess: () { // 规则创建成功后使规则列表缓存失效触发重新获取 queryClient.invalidateQueries({ queryKey: [rules] }); }, }); }这个模式非常经典useQuery用于获取数据useMutation用于创建/更新/删除数据并在成功后通过invalidateQueries使相关缓存失效保持 UI 与服务器状态同步。UI 组件构建项目大量使用了 Radix UI 原语来构建可访问的组件。例如一个用于创建新规则的对话框组件可能这样实现// src/components/CreateRuleDialog.tsx import * as Dialog from radix-ui/react-dialog; import { Cross2Icon } from radix-ui/react-icons; import { Button } from ./Button; import { cn } from /lib/utils; interface CreateRuleDialogProps { open: boolean; onOpenChange: (open: boolean) void; workspaceId: string; } export function CreateRuleDialog({ open, onOpenChange, workspaceId }: CreateRuleDialogProps) { const { mutate, isPending } useCreateRule(); const handleSubmit (event: React.FormEventHTMLFormElement) { event.preventDefault(); const formData new FormData(event.currentTarget); const name formData.get(name) as string; const content formData.get(content) as string; mutate({ name, content, workspace_id: workspaceId }, { onSuccess: () { onOpenChange(false); // 关闭对话框 // 可以在这里添加 Toast 通知 }, }); }; return ( Dialog.Root open{open} onOpenChange{onOpenChange} Dialog.Portal Dialog.Overlay classNamefixed inset-0 bg-black/50>// apps/backend/src/github/github.controller.ts import { Controller, Post, Headers, Body, HttpCode } from nestjs/common; import { GithubService } from ./github.service; Controller(webhooks/github) export class GithubController { constructor(private readonly githubService: GithubService) {} Post() HttpCode(200) async handleWebhook( Headers(x-github-event) event: string, Headers(x-hub-signature-256) signature: string, Body() payload: any, ) { // 1. 验证 Webhook 签名确保请求来自 GitHub const isValid this.githubService.verifySignature(signature, payload); if (!isValid) { throw new UnauthorizedException(Invalid signature); } // 2. 根据事件类型处理 switch (event) { case push: await this.githubService.handlePush(payload); break; case installation: await this.githubService.handleInstallation(payload); break; // ... 处理其他事件 } return { received: true }; } }后端服务会使用supabase/supabase-js的服务端客户端使用SUPABASE_SERVICE_ROLE_KEY来绕过行级安全执行一些管理操作或者在 Webhook 处理中更新数据库。4.3 数据库设计与行级安全策略Supabase 的强大之处在于其 PostgreSQL 数据库和行级安全。在supabase/migrations/中定义表结构后我们还需要定义 RLSRow Level Security策略以确保用户只能访问他们有权访问的数据。例如对于rules表我们可能创建如下策略-- 在迁移文件中创建表后启用 RLS ALTER TABLE rules ENABLE ROW LEVEL SECURITY; -- 策略1登录用户可以读取自己所在工作区的规则 CREATE POLICY Users can view rules in their workspaces ON rules FOR SELECT USING ( EXISTS ( SELECT 1 FROM workspace_members wm WHERE wm.workspace_id rules.workspace_id AND wm.user_id auth.uid() -- auth.uid() 来自 Supabase Auth ) ); -- 策略2工作区管理员可以插入、更新、删除规则 CREATE POLICY Workspace admins can manage rules ON rules FOR ALL USING ( EXISTS ( SELECT 1 FROM workspace_members wm WHERE wm.workspace_id rules.workspace_id AND wm.user_id auth.uid() AND wm.role admin ) );这些策略直接在数据库层面实施即使有人直接连接到数据库也无法绕过这些权限规则。前端使用带有用户 JWT 的 Supabase 客户端发起请求时这些策略会自动生效。5. 部署上线与生产环境配置5.1 数据库部署Supabase 生产项目本地开发完成后你需要一个线上的 Supabase 项目来服务生产环境。创建 Supabase 项目登录 Supabase 官网 创建一个新项目。选择离你的用户群体近的区域。链接项目在本地项目根目录使用 CLI 链接到线上项目。supabase login # 登录后在 Supabase 控制台找到你的项目引用 ID (类似 abcdefghijklmnopqrst) supabase link --project-ref abcdefghijklmnopqrst推送数据库架构将本地迁移文件应用到生产数据库。supabase db push警告这是一个危险操作会直接修改生产数据库。务必确保你已经备份了重要数据并且在非业务高峰期进行。更好的实践是先在 Supabase 控制台的 SQL 编辑器中预览生成的 SQL。获取生产环境变量在 Supabase 项目设置 - API 页面找到你的生产环境URL、anonpublic密钥和service_role密钥。这些将替换你本地.env文件中的对应值。5.2 应用部署以 Render 为例项目文档推荐使用 Render 进行部署并提供了 Docker 配置。CursorRulesCraft支持两种部署模式组合服务将前端静态文件和后端 Node.js 服务打包进同一个 Docker 容器由 Nginx 提供前端文件并代理 API 请求。这种方式部署简单成本低。分离服务前端和后端作为独立的服务部署更适合大规模或需要独立扩展的场景。这里以组合服务为例在 Render 创建 Web 服务选择“从 Dockerfile 部署”。配置构建命令关键是指定构建目标和构建参数。Build Command: docker build --target combined --build-arg VITE_API_URLhttps://your-app.onrender.com --build-arg VITE_CLERK_PUBLISHABLE_KEY$VITE_CLERK_PUBLISHABLE_KEY -t cursorrulecraft .VITE_API_URL需要设置为你的 Render 服务最终域名因为前端需要知道 API 地址。VITE_CLERK_PUBLISHABLE_KEY通过构建参数传入其值来自 Render 的环境变量。配置启动命令Start Command: docker run -p 10000:80 cursorrulecraft注意Render 会动态分配端口但容器内部应监听 80 端口Dockerfile 中已配置设置环境变量在 Render 控制台添加所有必需的环境变量SUPABASE_URL,SUPABASE_ANON_KEY,CLERK_SECRET_KEY,FRONTEND_URL等。切勿将.env文件提交到仓库或放入 Docker 镜像。部署连接你的 GitHub 仓库Render 会在每次推送时自动构建和部署。5.3 部署后的验证与监控部署完成后需要进行验证健康检查访问https://your-app.onrender.com/health前端和https://your-app.onrender.com/api/health后端 API应返回成功状态。功能测试在浏览器中打开应用完成完整的用户旅程注册、登录、创建规则、编辑规则。检查日志在 Render 的控制台查看应用日志确保没有未处理的错误。配置自定义域名可选在 Render 服务设置中绑定你自己的域名并按照指引配置 DNS。6. 常见问题排查与实战技巧6.1 本地开发环境问题问题启动后端时出现“Error 500: Cannot read properties of undefined”排查这几乎总是因为环境变量缺失或 Supabase 服务未运行。解决确认项目根目录下存在.env文件ls -la .env。检查.env文件中SUPABASE_URL、SUPABASE_ANON_KEY等变量是否已正确填写值非空。运行supabase status确认本地 Supabase 服务正在运行。如果没有运行supabase start。确保.env文件中的 Supabase 配置与supabase status输出的本地配置一致端口、密钥。问题前端无法连接到后端 API出现 CORS 错误排查在浏览器开发者工具的 Network 标签页中API 请求失败并显示 CORS 错误。解决检查后端 NestJS 应用的 CORS 配置。在apps/backend/src/main.ts中确保app.enableCors包含了前端的开发服务器地址如http://localhost:3000。在生产环境中应配置为实际的前端域名。问题Bun install 失败或速度慢排查网络问题或 Bun 版本不兼容。解决尝试使用bun install --verbose查看详细日志。检查 Bun 版本是否为最新bun upgrade。作为备选方案你可以尝试使用npm install或yarn install但需要确保package.json中的脚本与bun命令兼容通常bun run可以直接运行npm scripts。6.2 生产环境问题问题部署后应用无法登录Clerk 回调失败排查Clerk 仪表板中显示“回调 URL 不匹配”。解决登录 Clerk Dashboard 进入你的应用。在路径下检查重定向 URL和回调 URL。确保其中包含了你的生产环境前端 URL如https://your-app.onrender.com/*和 Render 服务的后端 API URL如https://your-app.onrender.com/api/auth/*。同时检查环境变量VITE_CLERK_PUBLISHABLE_KEY和CLERK_SECRET_KEY是否已正确设置为生产环境的密钥以pk_live_和sk_live_开头。问题Supabase 实时订阅在生产环境不工作排查本地开发正常但线上数据更新后界面不自动刷新。解决确认生产环境的.env中SUPABASE_URL使用的是https://协议且指向你的生产 Supabase 项目。在 Supabase 项目控制台的Database - Replication中确保你订阅的表如rules的“实时”功能是开启的。你需要为表启用REPLICA IDENTITY FULL这通常可以通过运行 SQLALTER TABLE your_table REPLICA IDENTITY FULL;来实现。最好将此命令写入一个新的迁移文件中。问题Docker 构建镜像体积过大排查docker build时间过长最终镜像尺寸超过 1GB。解决优化Dockerfile利用多阶段构建和 Bun 的安装速度。# 使用更小的基础镜像如 alpine FROM oven/bun:1-alpine AS base WORKDIR /app # 依赖安装阶段 FROM base AS deps COPY package.json bun.lockb ./ RUN bun install --frozen-lockfile --productionfalse # 构建阶段 FROM base AS builder COPY --fromdeps /app/node_modules ./node_modules COPY . . # 设置构建时的环境变量 ARG VITE_API_URL ENV VITE_API_URL$VITE_API_URL RUN bun run build:frontend bun run build:backend # 最终运行阶段 FROM nginx:alpine AS combined COPY --frombuilder /app/apps/frontend/dist /usr/share/nginx/html COPY --frombuilder /app/apps/backend/dist /usr/share/nginx/html/api COPY nginx.conf /etc/nginx/nginx.conf EXPOSE 80 CMD [nginx, -g, daemon off;]通过多阶段构建最终镜像只包含运行所需的文件可以显著减小体积。6.3 开发技巧与最佳实践1. 利用 Nx 的生成器Nx 提供了强大的代码生成器可以快速创建组件、服务、库等。在项目根目录运行# 在前端应用生成一个组件 npx nx generate nx/react:component MyComponent --projectfrontend --directorycomponents # 在后端应用生成一个服务 npx nx generate nx/nest:service MyService --projectbackend这能保证文件被创建在正确的位置并自动更新相关的模块导出。2. 共享类型的妙用packages/shared-types目录是存放前后端共享 TypeScript 接口/类型定义的地方。例如定义Rule接口// packages/shared-types/src/rule.ts export interface Rule { id: string; workspace_id: string; name: string; content: string; description?: string; tags?: string[]; created_at: string; updated_at: string; }然后在前端和后端的tsconfig.json中配置路径映射shared-types/*指向这个包。这样数据库查询、API 响应、前端状态管理的类型都能保持绝对一致从根源上减少 bug。3. 使用 Supabase 本地 Studio 进行数据调试本地开发时supabase start后会启动 Studio (http://127.0.0.1:54323)。你可以在这里直接查看和编辑数据库表用于快速插入测试数据或验证数据结构。运行任意 SQL 查询测试你的 RLS 策略是否生效。查看认证用户如果你使用了 Supabase Auth。4. 为 TanStack Query 设置开发工具在开发环境中启用 TanStack Query 的开发工具可以直观地查看所有查询的状态、缓存和数据。// 在 src/main.tsx 或 App.tsx 中 import { ReactQueryDevtools } from tanstack/react-query-devtools; function App() { return ( QueryClientProvider client{queryClient} {/* 你的应用组件 */} ReactQueryDevtools initialIsOpen{false} / /QueryClientProvider ); }这样你的应用界面上会出现一个浮动的调试图标点击可以打开查询管理器。5. 处理 Supabase 客户端的最佳位置建议在src/lib/supabase.ts中初始化 Supabase 客户端并导出供全局使用。这样可以集中管理配置并方便地注入认证状态如果与 Clerk 等第三方认证集成可能需要一个自定义的getSession函数来获取 token 并设置给 Supabase 客户端。