数据表组件
使用React和InstantDB构建的全栈数据表应用程序，具有实时同步和安全身份验证功能。
认证
此应用程序使用 InstantDB幻码身份验证 对于安全的用户登录：
- 基于电子邮件的登录：用户输入他们的电子邮件地址以接收验证码
- 6位幻码：向用户的电子邮件发送一个安全的6位代码
- 两步验证：电子邮件→ 代码验证流程
- 会话管理：使用InstantDB自动处理会话
- 受保护的路线：所有数据操作都需要身份验证
登录流程
- 用户输入其电子邮件地址
- 系统通过电子邮件发送6位验证码
- 用户输入代码以完成身份验证
- 授予对具有实时同步功能的数据表的访问权限
特性
- 标题段：标题和描述
- 批处理操作栏：选择项目时出现，显示所选计数和操作按钮
- 数据表:
- 带复选框的可选行 - 带有可排序标题的动态列 - 行选择突出显示 - 内联单元格编辑 - 实时数据同步
- 插槽组件：可选占位符组件
- 分页：每页项目选择器、页面导航和项目计数显示
- 黑暗模式切换：只需单击一下即可在浅色和深色主题之间切换
- CRUD操作：通过实时更新创建、读取、更新和删除行
入门指南
再进行
npm install运行开发服务器
npm run dev为生产而建
npm run build特性
- ✅ 带复选框的行选择
- ✅ 选择所有功能
- ✅ 选择项目时的批处理操作栏
- ✅ 分页控制
- ✅ 深色模式 -在浅色和深色主题之间切换
- ✅ 响应式设计
- ✅ 简洁、现代的用户界面与Figma设计相匹配
- ✅ 平滑的主题转换
技术栈
- 反应18 -UI框架
- 维特 -构建工具和开发服务器
- 即时数据库 -具有实时同步功能的后端即服务
- 密码认证 - 实时数据库同步 - 无需后端代码
- 层叠样式表 -自定义样式（无外部CSS框架）
数据库
此应用程序使用 即时数据库 作为其后端数据库：
- 实时同步：所有更改在所有连接的客户端上立即同步
- 模式:
- columns 表：存储列定义（名称、顺序、createdAt） - rows table：将包含单元格的行数据存储为JSON数组
- 认证：内置魔术码电子邮件身份验证
- 权限：共享表-所有经过身份验证的用户都可以读/写数据
环境设置
创建一个 .env 根目录中的文件：
VITE_INSTADB_APP_ID=your-app-id-here应用程序ID已在中配置 src/config/instadb.js 并且可以通过环境变量进行覆盖。
部署
- 实时应用程序: https://table-test-mcp.vercel.app
- 平台：Vercel
- 自动部署：从主分支启用
- 备选网址:
- https://table-test-mcp-juan-llerenas-projects.vercel.app - https://table-test-mcp-git-main-juan-llerenas-projects.vercel.app
仓库
- GitHub: 表测试mcp
- 最后更新：2025年1月15日