StoryStorm
UNI-APP · 一云多端

AI 影像赛事社区,
一套代码,两端运行

StoryStorm 是面向 AI 影像创作者的赛事与社区平台:办赛、投稿、打榜、找同城队友、 代投影展、按 IP 追剧。同一套 uni-app 代码同时产出微信小程序与 H5 网站, 数据层与 UI 完全共用。

46
页面路由
1
套代码 / 双端
3
层影库结构
0
新增运行时依赖

它是什么

一个让 AI 影像创作者「参赛 → 曝光 → 组队 → 投奖 → 被看见」闭环跑起来的社区产品。

微信小程序

主阵地。投稿、投票、看榜、接招募都在微信里完成,分享与传播天然顺滑。

H5 网站

同一份代码编译出的网页版,桌面端自动切换为左右分屏布局,适合大屏浏览与放映。

运营后台

内容审核、赛事与活动的增删改查、人员与权限管理,与用户站共用同一套数据契约。

设计体系见仓库内 DESIGN.md(StoryStorm Tech V1.0):冷灰纸面 + 发丝描边 + 等宽数字微标签 + 克制的极光渐变,六色语义贯穿全站。

核心功能

底部五个 Tab 构成主骨架:发现、活动、发帖、排行榜、我的。

🏆 线上赛事

赛程时间线 + 奖项 + 规则 + 人气榜 + 作品墙 + 底部参赛栏,站酷 / 天池式结构。限时赛、周赛、闪电写作赛等赛制可直接配置。

📈 排行榜

总榜 / 地区 / 好友 / 分类多维切换,前三名领奖台 + 词元积分;横屏下左屏领奖台固定、右屏长榜独立滚动。

🏙 城市社区

按城市 + 类型筛选活动流,活动详情含封面、信息栅格、嘉宾、同城推荐与报名栏。圈子与动态广场沉淀日常创作。

🎬 影展代投

FilmFreeway 式影展库:截稿倒计时、报名费、单元、投递要求、代投流程一站式,标签筛选直达目标影展。

🤝 共创招募

找队友、接活、共创拍片。招募帖支持报名与提交,把「一个人做不了」的片子凑齐人。

👤 创作者主页

关注 / 粉丝 / 获赞 / 作品统计,基础档案与创作标签,作品、片单、获奖履历分栏展示。

多层影库:IP → 剧集 → 分集

参考 Netflix / Hulu 的内容结构,把「一部片子 + 一堆物料 + 一堆评论」组织成可逐层深入的树。

1
IP 页
宇宙级入口:剧集与电影索引、预告片与物料、更多类似作品、全 IP 评论总汇总。
2
剧集 / 电影页
Netflix 式分集列表(缩略图 · 集数 · 简介 · 时长 · 评论数)、本片物料、本季评论汇总。
3
分集页
站内正片播放器、上下集切换、当前季分集 strip、本集评论与本集点赞。

评论逐层向上汇总

在任意一层发言,评论会按归属自动向上汇聚,且始终保留来源标签可跳回原处:

你在哪评论会出现在哪标签
第 3 集第 3 集 + 所属剧集 + 整个 IP第3集 可点击跳回该集
剧集页该片 + 整个 IP片名 跳回该片
IP 页仅在 IP 总墙IP 级
电影被建模为「单集剧集」(n = 0),所以电影与系列共用同一套分集、评论与汇总逻辑, 不需要为电影单独写一条分支。

技术实现

uni-app + Vue 3 + Vite,数据层为本地优先的 mock,无需后端即可完整体验。

层面做法
框架uni-app(Vue 3 + Vite 5),一套代码编译到 mp-weixinh5
UIwot-design-uni 组件库 + 自研 SDUI 渲染器(schema 驱动搭建页面)
样式storystorm.css 统一 rpx 令牌;H5 横屏自动切左右分屏,竖屏堆叠
数据种子数据 seed.ts + 覆盖层 ss-store.ts(localStorage,跨页签同步)
接口ss-api.ts 模拟异步返回,接口形状与真实后端一致,替换成本低
多语言内置中英双语 i18n.ts,切换即时生效
主题支持深色模式,偏好持久化
SDUI 渲染器的递归深度是实测出来的:源码 SdNode.src.vue 单一维护, 执行 npm run gen:sdui 生成 6 层递归组件。调小层数前必须重测——层数不够会静默截断内容。

本地运行

需要 Node 18+。

目标命令
安装依赖npm install
H5 网站(默认端口)npm run dev:h5
指定端口npx uni --port 5174
微信小程序npm run dev:mp-weixin,再用微信开发者工具打开 dist/dev/mp-weixin
类型检查npm run type-check
重新生成 SDUI 渲染器npm run gen:sdui
小程序端有页面栈 10 层上限,src/main.ts 已全局包装 navigateTo, 即将触顶时自动降级为 redirectTo,避免跳转静默失败。