我们把这个魔方社群门户
做成了一个真能跑通的平台
从扫码进站、登录下单、解锁学习,到社群交流与邀请裂变,全程在一个站里跑通。下面汇报目前做了什么 —— 前端用户能看到的体验,后端在背后支撑的能力,以及全部页面入口。
一个用户是怎么从扫码走到成交的
这 9 步是平台已经实现的真实流程,每一步都有对应的页面、数据与服务在支撑。
包裹卡二维码落地,或站内全文检索直达
OTP 验证码登录,新用户带邀请码奖励
课程 / 商城 / 赛事 / 资讯分区浏览
优惠券试算,生成订单待支付
微信 / 支付宝 / Stripe,二维码轮询到账
付费墙校验,视频取流防盗链
学习进度自动保存,断点继续
圈子发帖、评论、点赞
专属邀请码拉新,双向发券
把每个环节都做成了好用的页面
不登录也能浏览课程、商城、赛事、社群;登录后下单、学习、发帖、邀请一气呵成。
Next 16 App Router,服务端组件直出,首屏快、SEO 友好。
已购校验决定可看范围,试看课免费,视频经取流接口防盗链。
播放进度按节流自动落库,我的课程一键跳到最近学到的一节。
SQLite FTS5 全文检索,自定义 CJK 分词,课程/商品/赛事/资讯/帖子统一搜。
新手/竞速/盲拧/校园四个圈子,发帖评论点赞,Markdown 正文。
手写 Service Worker 缓存策略,可装到桌面,断网有离线兜底页。
窄屏折叠导航、触摸交互,图表表格面板全部窄屏可用。
详情页动态生成 1200×630 OG 图,微信/Twitter 分享有大图。
不只是好看,而是真能承载交易
鉴权、支付、短信、存储、检索、日志、分成,这些能力在背后默默运转。
better-sqlite3 + Drizzle ORM 类型安全数据层,迁移与种子脚本齐全。
管理端 HMAC-SHA256 session,用户端手机号 OTP,proxy 路由守门。
console / 阿里云 / 腾讯云,手写 V3 签名零 SDK 依赖,缺配置自动降级。
本地 / R2 / S3 / OSS / COS,手写 SigV4 / OSS / COS 签名,上传带真实进度。
微信 V3 Native / 支付宝电脑网站 / Stripe Checkout,回调统一,可退款对账。
5 张虚拟表 + 15 触发器自动同步,CJK 自定义分词函数 cube_seg。
错误日志兜底 + 慢请求(>500ms)埋点,后台分 Tab 查看。
讲师角色 + 课程归属,70% 固定分成月度汇总,后台审核入驻自动建号。
精准引流与运营的工具箱
二维码聚合码、自建埋点、优惠券邀请码、SEO,获客与转化的基建全部自带。
自绘融合魔方元素的二维码,活码随时改向,聚合落地页多链接,2×4cm 卡片打印。
events_track 表 + /api/track,匿名 cookie,page_view / 下单 / 注册自动埋。
下单试算折扣,新用户邀请码注册双向发券,后台批量管理。
动态 sitemap / robots 拉库生成,详情页注入 openGraph + twitter 元信息。
这套实现与众不同的地方
不挂 GA / Sentry / Posthog,不依赖第三方 CDN,埋点搜索支付签名全自建。
增删改走 Server Actions,无需手写 REST,表单直连数据层。
短信 / 存储 / 微信支付 V3 全部手写签名,零厂商 SDK 体积负担。
unicode61 无法分 CJK,自定义 SQL 函数插空格 + 前缀通配,中文也能搜。
push main → CI 构建 + scp,systemd 反代,持久库部署目录外不被覆盖。
站内导航摸不到的页面,这里都能进
扫码落地、管理后台、讲师后台、系统路由这些不在主导航里的页面,这里集中列出,方便验收与演示。
扫码落地页为 noindex,真实场景由印在卡片上的二维码进入;管理后台默认密码 admin123,讲师后台需 instructor 角色;系统路由是给搜索引擎与 PWA 用的非页面资源。
从能跑通,到能上规模
当前支付 / 短信等外部系统多为内置模拟实现,流程已跑通,下一步把它们接成真实服务。
- 现为模拟 / 待办真实支付商户
接入微信 / 支付宝正式商户,替换当前 mock 通道。
- 现为模拟 / 待办视频真实签名 URL
远端存储签发带时效的防盗链地址。
- 现为模拟 / 待办讲师结算落地
新增 instructor_payouts 表,把展示型收益变成可结算。
- 现为模拟 / 待办短信真实通道
配置阿里云 / 腾讯云模板,替换 console 降级。
- 现为模拟 / 待办付费聚合码
聚合码链接级 gating 接现有付费墙(待群里定规则)。