抖音小程序 - 共享会议室预约

源码摘要（源码用途） 抖音小程序 - 共享会议室预约 · 源码说明 本源码是一套原生抖音小程序工程，面向「企业 / 园区 / 联合办公」场景下的共享会议室在线预约需求。项目为纯前端实现，不调用任何后端 API，所有数据基于小程序本地缓存（tt.setStorageSync）持久化，开箱即用，可直接在「抖音开发者工具」中导入运行。 一、技术栈 维度 选型 平台 抖音小程序（原生开发，douyinProjectType: native） 语言 JavaScript + TTML 模板 + TTSS 样式 图标 IconPark 官方 SVG（运行时着色，自研 icon 组件） 数据 本地缓存 mr_db，无网络请求 UI 自研组件库（设计令牌 + 渐变卡片 + 微交互动效） 导航 自定义导航栏 + 自定义底部 TabBar 二、目录结构 14_会议室预约/ ├── app.js # 应用入口：全局数据、主题切换、数据访问层、事件总线 ├── app.json # 全局配置：页面注册、自定义导航 ├── app.ttss # 全局样式：设计令牌（颜色/圆角/阴影）、通用类、动画 ├── project.config.json # 抖音开发者工具工程配置 ├── icon.png # 小程序图标 ├── components/ │ ├── icon/ # 图标组件：SVG 运行时着色 + base64 渲染（核心） │ └── tabbar/ # 自定义底部导航（含中央预约悬浮按钮） ├── pages/ │ ├── index/ # 首页：渐变 Hero、搜索、日期、分类、会议室列表 │ ├── detail/ # 详情页：设备展示、时段网格、连续选时、确认弹窗 │ ├── success/ # 成功页：成功动画、票据卡片、流程时间轴、倒计时 │ ├── my/ # 我的预约：即将到来/历史 Tab、取消流程 │ └── profile/ # 个人中心：用户卡片、主题换肤、设置开关 ├── utils/ │ ├── seed.js # 种子数据：8 间会议室 + 13 条预约 │ └── icons.js # 图标资源（自动生成，50 枚，主色占位符化） └── tools/ └── gen-icons.js # 图标生成脚本（开发工具，非运行时依赖） 三、核心源码用途 文件 用途 app.js 提供全局用户信息、5 套主题、简易事件总线、以及会议室/预约的增删查改数据访问层 components/icon/icon.js 把 SVG 中的占位主色 __C__ 替换为任意目标色，再做 UTF-8→base64 编码内联渲染，实现图标任意换色且零图片资源依赖 pages/detail/detail.js 时段预约核心逻辑：8:00–21:00 半小时网格、连续多选、冲突检测、快捷时长、确认提交 pages/index/index.js 搜索 + 分类筛选 + 滚动视差 Hero + 空闲会议室实时统计 utils/seed.js 演示数据工厂，日期随「今天」浮动，保证每次打开都有合理的未来/历史数据 四、运行方式 打开「抖音开发者工具」； 选择「导入项目」，指向本工程根目录； 填入自有 AppID（或使用测试号）； 编译运行即可预览全部界面与功能。 五、亮点 原创界面与业务，未引用任何现成模板； 5 套主题实时换肤，全局配色一键切换； 时段冲突检测与连续选时算法； 丰富的入场动画、视差、弹层、票据等 UI 细节。