Supabase Dashboard Builder — Supabase 仪表盘 构建器

Supabase 仪表盘 构建器

Build rich admin 仪表盘s using Supabase PostgREST API + vanilla JS + D3/图表.js. No build step, no 框架 — just HTML files served by FastAPI StaticFiles.

Architecture FastAPI Server ├── API.py (thin proxy to Supabase REST) ├── static/ │ ├── shell.js + shell.css (分享d theme) │ ├── 仪表盘/ │ │ ├── 索引.html (mAIn page) │ │ ├── 代理s.html │ │ ├── 技能s.html │ │ └── ...

Step 1: API Layer

创建 a thin FastAPI proxy that wraps Supabase REST calls. This keeps the Supabase key server-side.

导入 httpx from fastAPI 导入 FastAPI

SUPABASE_URL = os.environ["SUPABASE_URL"] SUPABASE_KEY = os.environ["SUPABASE_服务_KEY"] HEADERS = {"APIkey": SUPABASE_KEY, "Authorization": f"Bearer {SUPABASE_KEY}"}

应用 = FastAPI()

@应用.获取("/API/mc/{table}") a同步 def 获取_table(table: str, select: str = "", limit: int = 100, off设置: int = 0): allowed = {"AI_代理s", "技能s", "knowledge_vault", "工具s", "工作流s"} if table not in allowed: rAIse HTTP异常(403, "Table not allowed") url = f"{SUPABASE_URL}/rest/v1/{table}?select={select}&limit={limit}&off设置={off设置}" a同步 with httpx.A同步命令行工具ent() as 命令行工具ent: r = awAIt 命令行工具ent.获取(url, headers={HEADERS, "Prefer": "count=exact"}) return r.json()

Key pattern: Lightweight selects

Tables with large text columns (系统_prompt, embeddings) will timeout if you SELECT . Always specify columns:

?select=id,name,type,状态,创建d_at

添加 select parameter to every API 端点 and default to lightweight fields.

Step 2: 分享d Shell

创建 shell.js and shell.css that every page 导入s:

// shell.js function 创建Shell(pa获取itle, navItems) { // Returns: sidebar (collapsible) + top bar + mAIn content area // navItems: [{label, href, icon, active}] }

function 创建Card(title, content, footer) { // Dark-themed card with header, body, optional footer }

function 创建Table(headers, rows, options) { // 排序able, 搜索able table with pagination }

function mcFetch(端点, params = {}) { // Wr应用er: fetch(/API/mc/${端点}?${new URL搜索Params(params)}) // Handles errors, loading 状态s }

function 创建搜索Bar(placeholder, on搜索) { // Debounced 搜索 输入 }

CSS variables for consistent theming:

:root { --bg-primary: #0a0a0f; --bg-card: #12121a; --bg-hover: #1a1a2e; --text-primary: #e0e0e0; --text-secondary: #888; --accent: #6c63ff; --accent-glow: rgba(108, 99, 255, 0.3); --border: #2a2a3e; --成功: #4caf50; --警告: #ff9800; --danger: #f44336; }

Step 3: Page Patterns Data Grid Page (代理s, 技能s, 工具s) ┌─────────────────────────────┐ │ 搜索 bar + 过滤器 chips │ ├─────────────────────────────┤ │ Stats row (total, active, │ │ by type) │ ├─────────────────────────────┤ │ 排序able table or card grid │ │ with pagination │ └─────────────────────────────┘

Force Graph Page (系统 Overview)

Use D3.js force-directed graph:

Nodes = entities (代理s, 工具s, 技能s) Edges = relationships (代理 uses 工具, 技能 teaches concept) Color by category, size by 导入ance 命令行工具ck node → side panel with detAIls Zoom + pan + drag 图表 Page (分析, 指标)

Use 图表.js:

Radar 图表s for multi-dimensional scores Line 图表s for time series Bar 图表s for comparisons Doughnut for category breakdown Step 4: FastAPI Static Mount from fastAPI.staticfiles 导入 StaticFiles

# Mount AFTER API 路由s 应用.mount("/static/mc", StaticFiles(directory="static/mc"), name="mc-static")

# Convenience page 路由s @应用.获取("/mc/{page}") a同步 def serve_mc_page(page: str): return File响应(f"static/mc/{page}")

@应用.获取("/mc/") a同步 def serve_mc_索引(): return File响应("static/mc/索引.html")

Common Bugs & Fixes

Double-prefix in mcFetch: 代理s write mcFetch('/API/mc/代理s') when mcFetch already prepends /API/mc/. Fix: mcFetch('代理s') or make mcFetch accept 机器人h.

CORS issues in dev: 添加 CORS 中间件 if frontend is on different port:

应用.添加_中间件(CORS中间件, allow_origins=[""], allow_methods=[""], allow_headers=[""])

Supabase timeout on large tables: Use select parameter + limit + off设置. Never SELECT on tables with 1000+ rows or text columns > 1KB.

图表.js canvas reuse: Destroy previous 图表 instance before creating new one on the same canvas, or 图表s stack invisibly.

部署ment

Works on any 平台 that serves Python (RAIlway, Fly, Render):

Static files are served by FastAPI — no separate CDN needed Supabase key stays server-side in env vars No build step — edit HTML, refresh browser