棱镜 · 多端下载

1️⃣ 注册并获取配置 ▼

📌 创建项目
访问 Supabase 官网，创建新项目。妥善保存 Database Password。

📌 获取 Project URL 和 anon public 密钥
在 Settings → API 中复制 Project URL 和 anon public 密钥（非 service_role）。

2️⃣ 生成专属应用链接 ▼

填入 Project URL 和 anon public 密钥，生成可直接访问的应用链接。

复制此链接，在浏览器中打开即可使用

3️⃣ 执行数据库初始化 SQL ▼

在 Supabase SQL Editor 中执行以下完整脚本（创建表、函数、RLS、存储桶）。
注意：本脚本已移除「用户心声」评价表，如需评价功能请自行添加。

-- ============================================================
-- 1. 核心表
-- ============================================================
CREATE TABLE IF NOT EXISTS public.profiles (
  id uuid PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
  username text UNIQUE,
  is_admin boolean DEFAULT false,
  created_at timestamptz DEFAULT now(),
  updated_at timestamptz DEFAULT now()
);

CREATE TABLE IF NOT EXISTS public.messages (
  id bigint PRIMARY KEY GENERATED BY DEFAULT AS IDENTITY,
  content text,
  media_url text,
  created_at timestamptz DEFAULT now(),
  user_id uuid REFERENCES public.profiles(id) ON DELETE SET NULL
);

CREATE INDEX IF NOT EXISTS idx_messages_created_at ON public.messages(created_at DESC);

-- ============================================================
-- 2. 触发器：新用户自动创建资料
-- ============================================================
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS TRIGGER
LANGUAGE plpgsql
SECURITY DEFINER
SET search_path = public
AS $$
BEGIN
  INSERT INTO public.profiles (id, username)
  VALUES (NEW.id, NEW.raw_user_meta_data->>'username');
  RETURN NEW;
END;
$$;

DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users;
CREATE TRIGGER on_auth_user_created
  AFTER INSERT ON auth.users
  FOR EACH ROW
  EXECUTE FUNCTION public.handle_new_user();

-- ============================================================
-- 3. 注销账户存储过程
-- ============================================================
CREATE OR REPLACE FUNCTION public.delete_user_account(user_id uuid)
RETURNS void
LANGUAGE plpgsql
SECURITY DEFINER
SET search_path = public
AS $$
BEGIN
  DELETE FROM public.messages WHERE user_id = delete_user_account.user_id;
  DELETE FROM public.profiles WHERE id = delete_user_account.user_id;
  DELETE FROM auth.users WHERE id = delete_user_account.user_id;
END;
$$;

-- ============================================================
-- 4. RLS 策略
-- ============================================================
ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.messages ENABLE ROW LEVEL SECURITY;

DROP POLICY IF EXISTS "Public profiles viewable" ON public.profiles;
CREATE POLICY "Public profiles viewable" ON public.profiles
  FOR SELECT USING (true);

DROP POLICY IF EXISTS "Anyone can view messages" ON public.messages;
CREATE POLICY "Anyone can view messages" ON public.messages
  FOR SELECT USING (true);

DROP POLICY IF EXISTS "Anyone can insert messages" ON public.messages;
CREATE POLICY "Anyone can insert messages" ON public.messages
  FOR INSERT WITH CHECK (true);

DROP POLICY IF EXISTS "Admin can update messages" ON public.messages;
CREATE POLICY "Admin can update messages" ON public.messages
  FOR UPDATE USING (
    EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND is_admin = true)
  );

DROP POLICY IF EXISTS "Admin can delete messages" ON public.messages;
CREATE POLICY "Admin can delete messages" ON public.messages
  FOR DELETE USING (
    EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND is_admin = true)
  );

-- ============================================================
-- 5. 存储桶 (media)
-- ============================================================
INSERT INTO storage.buckets (id, name, public)
VALUES ('media', 'media', true)
ON CONFLICT (id) DO NOTHING;

DROP POLICY IF EXISTS "Public read media" ON storage.objects;
DROP POLICY IF EXISTS "Authenticated upload media" ON storage.objects;
DROP POLICY IF EXISTS "Authenticated update media" ON storage.objects;
DROP POLICY IF EXISTS "Admin delete media" ON storage.objects;

CREATE POLICY "Public read media" ON storage.objects
  FOR SELECT USING (bucket_id = 'media' AND true);

CREATE POLICY "Authenticated upload media" ON storage.objects
  FOR INSERT WITH CHECK (bucket_id = 'media' AND auth.role() = 'authenticated');

CREATE POLICY "Authenticated update media" ON storage.objects
  FOR UPDATE USING (bucket_id = 'media' AND auth.role() = 'authenticated')
  WITH CHECK (bucket_id = 'media' AND auth.role() = 'authenticated');

-- 仅管理员可删除媒体文件
CREATE POLICY "Admin delete media" ON storage.objects
  FOR DELETE USING (
    bucket_id = 'media' AND EXISTS (
      SELECT 1 FROM public.profiles WHERE id = auth.uid() AND is_admin = true
    )
  );

-- 执行完毕后，数据库即准备就绪。

此脚本包含完整的表、函数、RLS 策略及存储桶，执行后即可使用核心功能。

4️⃣ 部署应用 ▼

选择以下任一方式部署你的应用：

方式一（推荐）：直接使用生成的链接
即步骤2生成的链接（如 https://my.xiguacity.cn/study/.../example.html?supabaseUrl=...&supabaseKey=...），复制后在浏览器中打开即可立即使用，无需任何额外部署。
方式二：部署到静态托管平台（适合自定义域名、更高稳定性）
下载源码 index.html（已内置示例配置，或可自行修改），将其部署到以下免费平台：
- Cloudflare Pages – 支持 Git 仓库或直接上传文件夹，自动 HTTPS，全球 CDN 加速。
- Netlify – 拖拽上传或连接 Git，自动构建，可配置重定向。
- Vercel – 同样支持静态站点，极速部署，与 GitHub 集成方便。
部署后，你的应用即可通过平台提供的域名访问，所有消息数据均与你的 Supabase 项目实时同步。
方式三：配置环境变量（可选）
如果你希望将敏感信息放在环境变量中，可以在部署平台设置 VITE_SUPABASE_URL 和 VITE_SUPABASE_ANON_KEY，然后在代码中读取。本示例为简化，直接在页面内硬编码，建议生产环境使用环境变量。

提示：如需手动修改配置，打开下载的 index.html，替换 SUPABASE_URL 和 SUPABASE_ANON_KEY（位于脚本开头），保存后上传即可。

5️⃣ 校验部署 ▼

注册与登录 – 点击 “登录” 尝试注册一个新账号（若遇到 “Email not confirmed” 错误，请参考下方常见问题解决）。登录后应能看到用户名显示在右上角。
发送消息 – 在输入框中输入文字，点击发送，消息应立即出现在列表顶部（无需刷新）。
发送媒体 – 点击 📎 按钮，选择图片或录音，上传并发送，应能正常显示预览。
实时性 – 打开两个浏览器窗口（或使用不同设备），分别登录不同账号，互相发送消息，验证实时同步是否正常。
在线状态 – 观察顶部的在线人数圆点，当有人登录或退出时，状态应实时更新。
管理员权限 – 若你已将自己的账号设为管理员（修改 profiles.is_admin = true），消息卡片应出现 “编辑” 和 “删除” 按钮。

如果以上测试全部通过，说明部署成功！🎉

❓ 部署常见问题 ▼

🔐 登录失败：Email not confirmed
原因：Supabase 默认开启了邮箱确认。解决方案：在 Supabase 仪表盘中，进入 Authentication → Settings，将 Confirm email 开关关闭（或开启 “Allow unconfirmed users to sign in”）。保存后重新注册即可。

📊 加载消息失败：Could not find the table 'public.messages' in the schema cache
原因：SQL 脚本未正确执行或表未被创建。解决方案：回到 SQL Editor，重新执行完整的 SQL 脚本（步骤3），确保没有报错。执行后刷新应用。

📎 上传文件失败：Permission denied or Bucket not found
检查存储桶 media 是否已创建，以及 RLS 策略是否已应用。确认 SQL 脚本中包含存储桶创建语句，并已在 SQL Editor 中执行。

🔄 消息不能实时更新
检查浏览器控制台是否有 WebSocket 连接错误。可能原因：Supabase 项目 URL 填写错误，或网络环境阻止了 Realtime 连接。确认 SUPABASE_URL 无误，并检查防火墙设置。

🔑 如何将普通用户升为管理员？
在 Supabase 仪表盘的 Table Editor 中打开 profiles 表，找到目标用户记录，将其 is_admin 字段值由 false 改为 true，点击保存。刷新应用后，该用户即可看到消息的“编辑”和“删除”按钮。

📦 媒体文件存储在哪里？
所有图片、视频、音频均存储在 Supabase Storage 的 media 桶中，文件公开可读，仅管理员可删除（由存储桶策略控制）。

🛡️ RLS 策略是否足够安全？
是的，所有查询都经过行级安全策略限制，匿名用户无法修改任何数据，认证用户只能插入消息（无法更新/删除），仅管理员拥有完整增删改权限。建议定期审查策略以确保符合你的业务需求。

📱 移动端适配如何？
Web 版已完全适配移动端浏览器，适用了所有现代浏览器。

🔧 如果遇到其他错误怎么办？
请按顺序检查：① Supabase 项目是否正常运行；② URL 和 anon key 是否填写正确（无多余空格）；③ 是否已执行完整的 SQL 脚本；④ 浏览器控制台（F12）有无报错。也可使用邮箱联系开发者。

📝 应用名称和图标可以修改吗？
可以。下载源码后，修改 <title> 标签和导航栏中的文字，替换 <link rel="icon"> 即可。

📌 如何升级到最新版本？
重新下载最新源码，替换原有 index.html 文件（注意备份配置）。若使用生成的链接，则始终指向最新在线版本，无需手动升级。

🔮 棱镜 · 即时通信

光线与消息在此交错

📊 棱镜·数据看板

💬 用户心声

📨 最新公共消息

✨ 核心特性

实时消息

多媒体分享

匿名与登录

权限控制

在线状态

玻璃质感 UI

全平台 Web

行级安全 (RLS)

原画质上传

语音录制

滚动加载更多

简约模式

🚀 快速部署

❓ 常见问题

📋 更新日志

🔍 深入技术原理

联系我们

管理员模式