香山公园洗手间导览系统

这是一个为完全没有软件开发经验的用户开发的精美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