一个用 Vue 3、Vite、Tailwind、Pinia、Supabase 构建的可视化节点宇宙。
npm install- 在
.env.local设置:VITE_SUPABASE_URL=https://YOUR_PROJECT_ID.supabase.coVITE_SUPABASE_ANON_KEY=YOUR_ANON_KEY
npm run dev打开http://localhost:5173/
npm run dev启动开发服务器npm run build生产构建npm run preview预览构建结果
- 基于
shadcn-vue样式与生成器,配置信息见components.json:1-21- 风格:
new-york,图标库:lucide - Tailwind 配置与样式:
tailwind.config.js、src/styles/globals.css
- 风格:
- 添加组件示例:
npx shadcn-vue@latest add button input dialog- 生成到
src/components/ui(别名ui,见components.json:13-18)
- 生成到
- 组件内部使用
reka-uiprimitives 与 Tailwind 组合
- 在 Supabase 创建 Storage bucket
node-images - 在 SQL Editor 执行
supabase/base.sql(创建users/nodes表并配置存储策略,见supabase/base.sql:2-20、22-45) - 按需启用 RLS 并添加策略(如基于
auth.uid()的访问控制)
src/components组件src/pages页面src/stores状态管理src/api/supabase.jsSupabase 客户端
- GitHub 登录(Supabase Auth)
- 节点 CRUD 与位置保存(表
nodes) - 图片上传至
node-images(签名或公开 URL)