引言：随着年轻一代线下社交与泛娱乐消费的升级，剧本杀与实景沉浸式密室逃脱已发展为超百亿规模的体验式实景娱乐产业。传统实体门店普遍依赖人工微信群拉人拼车、手工便签记账、对讲机口头喊话提示、实体机关手动复位等粗放经营模式，饱受“缺一缺二久拼不成车、临时跳车放鸽子、声光电机关分散易故障、多角色分账繁琐”等现实痛点困扰。
针对上述痛点，本项目创新研发了【沉浸式剧本杀密室拼车预约与中控管理系统】。系统基于 Vue 3.4 + Pinia + Tailwind CSS + Spring Boot 3.2 + MQTT 物联微动中控联动 架构，严格遵循 modern-ui-designer 复古浅羊皮纸与绛红拿铁配色体系（Parchment & Wine Latte，晨雾浅羊皮白 #faf8f5 / 纯白高光圆角 #ffffff + 优雅勃艮第绛红 #9f1239 / 暖琥珀棕 #d97706 + 莫兰迪鼠尾草绿 #059669，彻底杜绝深黑背景 AI Slop），深度打通“线上智能拼车秒组局 + 履约信用防跳车防咕 + 密室声光烟电 IoT 自动化机关中控 + DM/NPC 剧本节奏导演调度 + 赛后智能复盘推凶分账”的全链路闭环生态。
一、系统总体技术架构与美学规范
系统采用现代化前后端分离架构与分布式微服务设计思想：
- 前端应用层：采用 Vite 5.2 构建生态与 Vue 3.4 (Composition API)，集成 Pinia 进行跨组件状态同步，集成 Vue Router 4 (Hash 路由) 实现 PC 端、运营中台与手机端三端平滑秒级切换；
- 视觉美学规范：严格落实清淡、通透、高质感的复古浅羊皮纸色调（底色
#faf8f5），搭配纯白圆角卡片、柔和微阴影与优雅勃艮第绛红，营造高端私享侦探沙龙与沉浸密室质感； - 后端物联与业务中枢：基于 Spring Boot 3.2，采用 MQTT 协议直连密室物联电磁门禁、DMX512 声光控制器、智能瞬时烟雾发生器与 RFID 射频道具；利用 Redis 时序队列处理高并发拼车锁座与履约定金扣划；
- 安全脱扣防灾体系：设计硬连线与软件双重防灾断电脱扣回路，一键触发全店逃生门瞬间释放（< 300ms）。
二、PC 电脑端：沉浸大屏态势舱与智能组局中控 (5大核心工作台)
三、Admin 运营管理中台：资产、排班与消防安全治理 (5大核心视图)
四、Mobile 微信小程序：玩家端极速锁座与搜证互动终端 (4大核心视图)
五、核心源码实现精选
1. 后端 Spring Boot 3.2 密室 IoT 机关状态机与 MQTT 双向中控调度
// Spring Boot 3.2 密室 IoT 机关状态机与 MQTT 双向长连接调度中枢
@RestController
@RequestMapping("/api/v1/chamber-control")
@Tag(name = "ChamberControlController", description = "实景密室声光电机关与MQTT物联双向中控调度")
public class ChamberControlController {
@Autowired
private MqttGatewayService mqttGateway;
@Autowired
private RedisTemplate<String, Object> redisTemplate;
@Autowired
private ChamberSafetyAuditService safetyAuditService;
@PostMapping("/rooms/{roomId}/iot-action")
@Operation(summary = "下发密室声光烟电一体化机关指令")
public ResponseEntity<ApiResponse> dispatchIotAction(
@PathVariable String roomId,
@RequestParam String actionType,
@RequestParam(required = false) String param) {
// 1. 状态校验与安全互锁 (若处于火警或应急状态，强制禁止锁死电磁门)
if ("LOCK_DOOR".equals(actionType) && safetyAuditService.isEmergencyActive(roomId)) {
return ResponseEntity.badRequest().body(ApiResponse.fail("当前处于消防应急脱扣状态，禁止闭锁电磁门！"));
}
// 2. 构造 MQTT 控制负载
IotCommandPayload payload = IotCommandPayload.builder()
.roomId(roomId)
.action(actionType)
.param(param)
.issuedTime(System.currentTimeMillis())
.traceId(UUID.randomUUID().toString())
.build();
String topic = String.format("larp/chamber/%s/command", roomId);
boolean sent = mqttGateway.publish(topic, payload);
// 3. 记录操作审计轨迹与时序缓存
redisTemplate.opsForList().leftPush("chamber:audit:" + roomId, payload);
return ResponseEntity.ok(ApiResponse.success(sent));
}
@PostMapping("/safety/emergency-release-all")
@Operation(summary = "最高优先级物理全脱扣断电开门")
public ResponseEntity<ApiResponse> triggerEmergencyReleaseAll() {
safetyAuditService.executePhysicalPowerCut();
mqttGateway.publish("larp/chamber/all/emergency", "EMERGENCY_RELEASE_CUT_POWER");
return ResponseEntity.ok(ApiResponse.success("已切断所有实景密室电磁锁供电，逃生通道已全部释放！"));
}
}2. 前端 Vue 3.4 + Pinia 剧本密室智能组局与声光机关联动状态机
// Vue 3.4 + Pinia: 剧本密室组局与声光机关联动状态机
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useLarpStore = defineStore('larp', () => {
const carPools = ref([
{
id: 'CAR-0918-01',
scriptTitle: '雾都孤儿院的第十三位访客',
startTime: '今日 19:30',
currentPlayers: 5,
totalPlayers: 6,
genderStatus: '3男2女 (急缺1女维多利亚)',
deposit: 50,
status: 'MATCHING'
}
])
// 玩家锁座上车与履约保证金冻结
function joinCar(carId, roleId) {
const car = carPools.value.find(c => c.id === carId)
if (!car || car.currentPlayers >= car.totalPlayers) {
return { success: false, message: '车队已满员或已封车' }
}
car.currentPlayers++
if (car.currentPlayers === car.totalPlayers) {
car.status = 'FULL'
car.genderStatus = '已满员·准备锁座开局'
}
return { success: true, message: '上车成功！履约保证金已冻结，请准时赴约' }
}
return { carPools, joinCar }
})六、源码与工程交付物下载说明
本项目提供整套完整前后端高保真工程源码包、三端一体化高保真原型、超百页 Enterprise 级 PRD 需求规格说明书与实机截图高清图集，开箱即用，支持一键 npm run dev 启动本地服务与生产编译构建。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
