一个基于React和Supabase构建的全栈H5活动创建与管理系统，支持可视化拖拽编辑活动页面，实时数据统计分析，以及多角色权限管理。为佛山传媒文旅集团设计，用于高效管理各类营销活动、抽奖活动、用户调研等H5活动。
登录页
首页
可视化编辑
具有以下优势：
- 技术先进：使用React+TailwindCSS+Supabase现代栈
- 开发高效：无需构建工具，修改保存即可看到效果
- 部署简单：静态文件托管，无需后端服务器
- 功能完整：从用户登录到活动创建、编辑、发布、统计全流程覆盖
- 可视化编辑：拖拽式编辑，无需编码即可创建H5活动
- 权限完善：多角色权限管理，数据安全隔离
| 层级 | 文件/表名 | 说明 |
|---|---|---|
| 前端页面（HTML + React） | login.html | 登录页面 |
| homepage.html | 首页仪表盘 | |
| list.html | 活动列表管理 | |
| detail.html | 活动详情编辑（基础信息/奖品/数据/QR） | |
| canvas.html | 活动页面可视化编辑器 | |
| page.html | 活动用户端展示（最终用户访问） | |
| JavaScript API层 | auth_checker.js | 权限检查与登录状态管理 |
| supabase_api.js | Supabase API封装 | |
| config-loader.js | 配置加载器 | |
| Supabase Backend | users | 用户账号表 |
| activities | 活动表 | |
| prizes | 奖品表 | |
| submissions | 用户提交表 | |
| visit_stats | 访问统计表 |
| 层级 | 技术 | 说明 |
|---|---|---|
| 前端框架 | React 18 | 使用CDN引入，无需构建工具，纯浏览器端JSX |
| 样式框架 | Tailwind CSS | 实用优先的CSS框架，快速开发 |
| 后端服务 | Supabase | 开源Firebase替代，提供PostgreSQL数据库+认证 |
| 图形渲染 | WebGL | 登录页动态背景着色器效果 |
| Markdown解析 | 自定义解析器 | 支持富文本内容渲染 |
| 密码安全 | bcryptjs | 客户端密码加密验证 |
| 二维码 | qrcodejs | 生成活动链接二维码 |
h5/
├── login.html # 登录页面
├── homepage.html # 首页仪表盘
├── list.html # 活动列表页面
├── detail.html # 活动详情编辑
├── canvas.html # 可视化编辑器
├── page.html # 活动用户端展示
├── account.html # 账号管理（仅管理员）
├── js/
│ ├── auth_checker.js # 权限检查
│ ├── config.js # 配置模板
│ ├── config-loader.js # 配置加载器
│ └── supabase_api.js # API封装
└── images/ # 静态资源
核心功能：
-
LoginManager - 登录状态管理器
- 24小时登录过期机制
- localStorage持久化存储
- 自动续期功能
- 剩余登录时间计算
-
PageAuthChecker - 页面权限检查器
- 基于meta标签配置自动初始化
- 支持角色白名单控制
- 定时（每5分钟）检查登录状态
- 未登录自动重定向到登录页
设计亮点：
- 通过HTML meta标签声明权限需求，无需编码
<meta name="requires-auth" content="true"> <meta name="allowed-roles" content="super_admin,admin,operator"> <meta name="redirect-to" content="login.html">
- 单例模式避免重复初始化
- 完善的调试日志输出
核心功能：
- 多种配置加载方式（ConfigLoader → window.env → meta标签 → 默认配置）
- CDN加载失败 fallback 到自定义REST客户端
- 完整的日志记录，每个API调用都有请求ID、耗时记录
- bcrypt密码加密验证
模块化API设计：
AuthAPI- 用户认证（登录、获取用户信息、创建/更新/删除用户、重置密码）ActivityAPI- 活动管理（列表获取、详情、创建、更新、删除）StatisticsAPI- 统计数据（活动统计、趋势数据、用户提交记录）
特色：
- WebGL Fragment Shader 实现动态渐变背景
- 支持明暗度、色相偏移、噪声等参数调节
- 响应式布局，适配移动端和桌面端
- bcrypt安全密码验证
- 记住我功能
功能：
- 数据统计卡片（总活动数、进行中、总浏览量、总参与人数）
- 最近活动快速访问
- 快捷操作入口
- 系统状态监测（API连接状态显示）
- 骨架屏加载动画
功能：
- 分页列表展示
- 关键词搜索（活动名称、标识符、活动码）
- 状态筛选（全部/未发布/已发布/已停止）
- 创建者筛选
- 基于角色的权限过滤：
- 超级管理员/管理员：查看全部活动
- 运营人员：只能查看自己创建的活动
- 新建活动弹窗，标识符重复验证（防抖500ms）
- 支持跳转到不同编辑模块：
- 基础信息编辑
- 奖品信息编辑
- 界面可视化编辑
- 数据看板
- 链接生成器
多标签编辑：
- 基础信息 - 活动名称、时间、费用、邀请码、分享配置等
- 奖品管理 - CRUD管理奖品，支持概率配置、库存管理
- 数据看板 - 图表展示访问趋势、来源分布、用户提交记录
- 链接生成器 - 生成活动二维码，可下载
核心特性：
- 拖拽式组件添加
- 支持两种布局模式：
- 自由模式 - 绝对定位，任意拖拽调整位置
- 列表模式 - 流式列表，自动垂直排列
- 支持多种组件类型：
- 文本/图片/按钮/富文本
- 输入框/文本域/日期/时间
- 单选/复选/下拉选择/评分
- 图片轮播/视频/分割线/色块
- 电话/地址/身份证/文件上传
- 支持多页面管理，每个页面可独立配置背景
- 组件支持透明度控制、圆角设置、间距调整
功能：
- 移动端优先设计，固定宽度390px，自适应屏幕
- 完全响应式，组件位置根据实际画布宽度自动计算
- 支持表单交互，按钮跳转功能
- 浏览量自动统计
- Markdown渲染支持（代码块、引用、列表、图片）
- 双布局模式：自由模式支持绝对定位拖拽，列表模式支持流式排列
- 精确坐标计算：根据设计宽度390px自动适配实际屏幕宽度，保持相对位置正确
- 组件化设计：易于扩展新的组件类型
- 本地存储：自动保存草稿，防止数据丢失
- 三级角色：超级管理员 → 管理员 → 运营人员
- 基于角色的数据隔离：运营人员只能查看自己创建的活动
- 登录过期：24小时自动过期，需要重新登录
- 定期检查：每5分钟自动验证登录状态
- 密码安全：bcrypt加密存储，不在网络传输明文密码
- 每日访问量、提交量统计
- 访问来源分析（微信朋友圈/公众号/直接访问/其他）
- 转化率计算（提交数/访问数）
- 近7天访问趋势图表
- 用户提交记录实时查看
- 全部使用CDN加载，无需npm install，无需构建
- 纯静态HTML+JS，可部署在任何静态服务器
- 后端使用Supabase云服务，无需自己维护服务器
- 配置化设计，修改配置即可投入使用
- 骨架屏：加载时显示骨架屏，提升感知性能
- 防抖验证：活动标识符检查防抖，避免频繁请求
- 平滑动画：所有模态框、弹窗都有过渡动画
- 响应式：完全适配移动端，管理后台适配桌面端
- 自定义滚动条：美观的滚动条样式
- 多层配置回退：ConfigLoader → 环境变量 → meta标签 → 默认配置
- CDN加载失败 fallback：Supabase CDN失败后使用自定义REST客户端
- 详细的调试日志：每个API调用都有完整日志，方便排查问题
- 预览模式支持：即使不保存到数据库也可以预览活动
登录页面使用自定义Fragment Shader实现：
- 平滑的颜色渐变动画
- 基于蓝-浅蓝-白的主题配色
- 可控的噪声扰动
- 性能优异，使用GPU硬件加速
活动页面专为移动端设计：
- 固定最大宽度430px，适配主流手机屏幕
- 点击元素有点击波纹反馈
- 去除滚动条，更接近原生App体验
- 支持深色/浅色背景配置
| 表名 | 说明 |
|---|---|
users |
用户账号，存储用户名、密码哈希、角色、状态 |
activities |
活动，存储基础信息、页面配置、统计数据 |
prizes |
奖品，每个活动关联多个奖品 |
submissions |
用户提交记录 |
visit_stats |
每日访问统计 |
- 开发：直接打开HTML文件即可开发调试
- 部署：上传到任何静态文件服务器（Cloudflare Pages、Vercel、NGINX等）
- 配置：通过环境变量配置Supabase URL和密钥，不硬编码在代码中
- 扩展：模块化设计，易于添加新功能