# 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`

## 安装依赖

```bash
pnpm install
```

## 开发运行

```bash
# H5 开发
pnpm dev:h5

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

# 类型检查
pnpm type-check
```

## 构建

```bash
# H5 构建
pnpm build:h5

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

## 部署

H5 线上部署、Nginx 配置、模型资源校验和回滚步骤见 [docs/H5_DEPLOYMENT_GUIDE.md](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