Museum Guide v4.0

深圳自然博物馆智能导览应用

项目结构

museum-guide-v4.0/
├── src/
│   ├── App.vue                 # 应用根组件（设计系统 CSS 变量）
│   ├── main.ts                 # 入口文件
│   ├── pages.json              # 页面路由配置
│   ├── manifest.json           # 应用配置
│   ├── components/             # 组件库
│   │   ├── navigation/         # 导航组件
│   │   │   └── BottomTabBar.vue
│   │   ├── search/             # 搜索组件
│   │   │   └── SearchBar.vue
│   │   ├── floor/              # 楼层组件
│   │   │   └── FloorSelector.vue
│   │   ├── poi/                # POI 标记组件
│   │   │   └── POIMarker.vue
│   │   └── content/            # 内容卡片组件
│   │       ├── HallCard.vue
│   │       ├── ExhibitCard.vue
│   │       └── FacilityCard.vue
│   ├── pages/                  # 页面
│   │   ├── index/              # 首页（地图导览）
│   │   ├── search/             # 搜索页面
│   │   ├── exhibit/            # 展品详情
│   │   ├── hall/               # 展厅详情
│   │   ├── facility/           # 设施详情
│   │   └── route/              # 路线详情
│   ├── assets/                 # 静态资源
│   │   └── data/               # Mock 数据
│   │       ├── exhibits.json
│   │       ├── halls.json
│   │       ├── facilities.json
│   │       ├── floors.json
│   │       └── routes.json
│   ├── utils/                  # 工具函数
│   │   ├── dataLoader.ts       # 数据加载
│   │   ├── format.ts           # 格式化工具
│   │   └── search.ts           # 搜索工具
│   ├── types/                  # 类型定义
│   │   └── index.ts
│   └── styles/                 # 样式文件
│       ├── variables.scss      # CSS 变量
│       └── common.scss         # 通用样式
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

技术栈

• 框架: uni-app
• 语言: Vue 3 + TypeScript
• 语法: <script setup lang="ts">
• 构建工具: Vite
• 样式: SCSS + CSS Variables

设计系统

颜色规范

• 主色调: #E0E100 (黄色强调色)
• 背景色: #F3F3F3 (浅灰), #FFFFFF (白色), #6D6D6D (地图背景)
• 文字色: #262421 (主文字), #424754 (次要文字), #333333 (三级文字)
• 边框色: #E5E5E5, #DEDEDE, #C2C6D6
• 辅助色: #5ED0E4 (POI 标记青色)

圆角规范

• 手机外框: 32px
• 卡片: 12px
• 按钮: 8px
• 小圆角: 6px

间距规范

• xs: 4px
• sm: 8px
• md: 16px
• lg: 24px
• xl: 32px

安装依赖

pnpm install

开发运行

# H5 开发
pnpm dev:h5

# 微信小程序开发
pnpm dev:mp-weixin

# 类型检查
pnpm type-check

构建

# H5 构建
pnpm build:h5

# 微信小程序构建
pnpm build:mp-weixin

部署

H5 线上部署、Nginx 配置、模型资源校验和回滚步骤见 docs/H5_DEPLOYMENT_GUIDE.md。

功能特性

• ✅ 地图导览（楼层切换、POI 标记）
• ✅ 智能搜索（展品、展厅、设施）
• ✅ 展品详情（音频讲解、收藏、分享）
• ✅ 展厅浏览（展品列表、导航）
• ✅ 设施查询（洗手间、咖啡厅、商店等）
• ✅ 推荐路线（经典艺术之旅、印象派精选等）
• ✅ 响应式设计（适配多种屏幕尺寸）
• ✅ 毛玻璃效果（backdrop-filter）
• ✅ 流畅动画（transition）

组件说明

导航组件

• BottomTabBar: 底部导航栏

搜索组件

• SearchBar: 搜索输入框

楼层组件

• FloorSelector: 楼层选择器（3F/2F/1F/B1）

POI 组件

• POIMarker: 地图标记点

内容组件

• HallCard: 展厅卡片
• ExhibitCard: 展品卡片
• FacilityCard: 设施卡片

数据结构

详见 src/types/index.ts 和 src/assets/data/ 目录下的 JSON 文件。

开发规范

1. 使用 <script setup lang="ts"> 语法
2. 组件使用 TypeScript 类型定义
3. 样式使用 SCSS 和 CSS Variables
4. 遵循 uni-app 开发规范
5. 保持代码简洁和可维护性

注意事项

• 图片资源需放置在 static/ 目录下
• 音频资源需放置在 static/audio/ 目录下
• 地图图片需要实际的场馆平面图
• 音频讲解需要录制实际的讲解内容

License

MIT