内容
# 香山公园洗手间导览系统
这是一个为完全没有软件开发经验的用户开发的精美web网站，用于展示香山公园内的洗手间位置信息。通过直观的卡片式界面，游客可以快速了解各个洗手间的位置、状态和设施信息，并支持一键导航功能。
## 项目简介
本项目采用现代化的前端技术栈，为游客提供便捷的洗手间查询和导航服务。每个洗手间以卡片形式展示，包含详细的位置信息、使用状态、清洁度等信息，并支持点击直接打开高德地图进行导航。
## 技术栈
- **框架**: Next.js 14
- **语言**: TypeScript
- **样式**: TailwindCSS
- **地图服务**: 高德地图 URI API
- **UI/UX**: 响应式设计，支持移动端和桌面端
## 功能特点
### 洗手间信息展示
- 卡片式布局，清晰直观
- 显示洗手间名称和位置
- 实时状态显示（正常使用/维修中）
- 清洁度等级展示
- 最近清洁时间
- 特色设施标签（如无障碍设施、母婴室等）
### 导航功能
- 点击卡片即可导航
- 自动打开高德地图
- 支持步行导航模式
- 精确的地理坐标定位
### 用户体验
- 响应式布局设计
- 手机端：单列显示
- 平板端：双列显示
- 桌面端：三列显示
- 无障碍支持
- 键盘导航支持
- ARIA 标签支持
- 适当的颜色对比度
## 数据覆盖
目前收录的洗手间包括：
1. 香山公园北门洗手间
2. 香山塔后洗手间
3. 索道站洗手间
4. 正觉寺洗手间
## 本地开发
1. 克隆项目
\`\`\`bash
git clone [项目地址]
\`\`\`
2. 安装依赖
\`\`\`bash
npm install
\`\`\`
3. 启动开发服务器
\`\`\`bash
npm run dev
\`\`\`
4. 访问 http://localhost:3000 查看效果
## 构建部署
1. 构建项目
\`\`\`bash
npm run build
\`\`\`
2. 启动生产服务器
\`\`\`bash
npm run start
\`\`\`
## 项目结构
\`\`\`
├── app/
│ ├── page.tsx # 主页面组件
│ ├── layout.tsx # 布局组件
│ └── globals.css # 全局样式
├── components/
│ └── ToiletCard.tsx # 洗手间信息卡片组件
├── public/ # 静态资源
└── package.json # 项目配置文件
\`\`\`
## 贡献指南
欢迎提交 Issue 和 Pull Request 来帮助改进项目。
## 许可证
MIT License
MCP 市场