Lizzie 艺术家网站与 Aletheia 演出归档
Lizzie 艺术家网站与 Aletheia 演出归档
项目从 Lizzie 的演出作品 Aletheia 开始：演出前接受观众预约，演出后转为归档。之后扩展为 Lizzie 的艺术家个人网站，Aletheia 归档作为其中独立的一部分保留。两者是同一项目的两项关联成果，这里各写一次；后来的网站承接了之前的工作，而不是取代它。
2026
为艺术家 Lizzie 完成的网站项目，包含两项成果：演出作品 Aletheia 的预约网站与演后归档，以及 2026 年 10 月上线、以可交互 3D 剧场为入口的艺术家个人网站。
概览
第一项成果服务一场真实演出：作品介绍、场次与场地、到场路线，以及带候补的预约流程。预约系统曾对外开放，并收到真实观众预约。演出结束后移除预约后台，网站转为归档，保留完整录像、演职人员署名和排练资料。第二项成果于 2026 年 10 月 9 日上线，是呈现艺术家整体的个人网站，涵盖创作实践、作品、研究、履历和联系方式，以可交互的 3D 剧场为入口，并为三件作品建立独立页面。
问题
同一个项目需要随时间改变形态：演出前是席位有限的预约服务，演出后是长期留存的档案，最后成为呈现艺术家整体实践的网站。每个阶段都要有清楚的范围，又不能丢掉之前的工作；艺术化的呈现也不能牺牲阅读、播放和可访问性。
我的角色
Aletheia 预约网站与归档由我端到端负责，从设计、构建到部署；艺术家网站由我主导产品方向、体验设计和技术交付。两个阶段的需求、架构、方案取舍、验收标准、集成、review 和发布都由我负责。Lizzie 的艺术创作、演出、论文与履历属于 Lizzie 本人；我的贡献是网站、内容结构和技术交付。
背景与约束
席位有限，又允许双人预约，席位统计和预约写入必须保持一致。
演出结束后不再需要预约后台，但录像和旧链接必须继续可用。
素材分散在照片库、外置硬盘、录像和文档中，正式视频不能依赖本机媒体路径。
真实摄影、录像取帧和 AI 生成的宣传素材要区分清楚，艺术创作署名和网站署名也要分开。
每件作品要有自己的表达，全站又要保持一致，并在窄屏、触屏、减少动态效果和无 JavaScript 时都能阅读。
交付内容
演出预约与候补流程：单人或双人预约、同行者信息校验、重复预约检查、预约编号及确认／候补反馈，并提供受保护的管理页面，显示两份名单、剩余容量，支持 CSV 导出。
演后归档：关闭预约，移除管理后台和数据库，保留完整录像、作品说明、演职人员署名，以及按三期整理的七段排练影像。
艺术家层级的网站结构，涵盖创作实践、作品、研究、履历与联系方式；完整作品目录与三件精选作品的独立页面并存。
3D 剧场入口，包含舞台材质、灯光、幕布和镜头运动；默认是短开场，也可以选择完整版，并支持跳过、重播、状态保持和减少动态效果。
每件作品有独立的互动：Aletheia 把身体、材料、影像和研究组织成连续阅读；THE FIFTH INSTAR 用可牵拉的布带、回弹和文字响应；《走在希望的田野上》用六框空间、透视、灯光和章节变化。
技术路径
全程使用 Next.js、TypeScript 和 Tailwind CSS；预约阶段使用 Prisma 和 PostgreSQL，用数据库事务和锁协调席位统计与写入。归档不再需要后，移除了这套预约技术栈。
剧场入口和作品场景使用 Three.js / React Three Fiber。
从原始素材制作网页视频、静音预览、封面、轻量图片和音轨，保留原件和处理记录；正式视频通过 Cloudflare Stream 交付。
共享播放器处理就绪、慢加载、错误重试、离屏和后台暂停，以及背景音乐与演出录像的互斥；修复媒体域名许可和异步播放状态问题。
键盘操作、窄屏与触屏适配、减少动态效果和无 JavaScript 阅读入口；修复浏览中发现的遮字、跨页滚动位置和菜单与播放器冲突。
把开发环境从 WSL 迁回 Mac 并保留 Git 历史，升级依赖，限定发布文件范围，处理旧路径跳转，补充页面元数据和站点地图，部署到 Render。
结果
预约系统曾对外开放，并收到真实观众预约。
演出后项目转为长期归档，艺术家网站继续承接这套归档和旧链接。
艺术家网站于 2026 年 10 月 9 日在正式域名上线。
这不是售票或支付系统，这里也不提供预约或到场人数；当前归档已不再运行预约数据库。
复盘
把阶段分清楚，是这个项目能连贯起来的原因。预约服务、归档和艺术家网站各有明确范围，后来的网站才能承接之前的工作，而不是覆盖它。3D 入口再吸引人，也要让位于阅读、播放和可访问性。