# React.js 项目：天气预报 Web 应用

## 概述

使用 React.js 和天气 API (如 OpenWeatherMap) 构建一个界面美观的天气预报应用。支持全球城市搜索、查看当前和未来天气，并可将城市保存到收藏夹。

## 功能需求

### 1. 核心天气功能
- **默认城市**: 加载时通过浏览器 Geolocation 获取用户位置天气，若失败则显示默认城市。
- **城市搜索**: 提供带自动补全/建议的搜索栏。
- **当前天气**: 显示城市名、温度、天气状况及图标、体感温度、湿度、风速等。
- **每小时预报**: 水平滚动列表展示未来 24 小时天气。
- **未来天气**: 列表展示未来 5-7 天天气预报。

### 2. 用户体验
- **收藏夹**: 允许用户添加、删除和快速切换收藏的城市，使用 `localStorage` 持久化。
- **单位切换**: 提供摄氏度 (°C) / 华氏度 (°F) 切换开关。
- **状态显示**: API 请求时显示加载指示器，请求失败时显示错误消息。
- **响应式设计**: 适配桌面和移动设备。

## 技术栈

- **框架**: React.js 18+ (函数组件和 Hooks)
- **脚手架**: Vite 或 Create React App
- **状态管理**: React Context API 或 Zustand / Redux Toolkit
- **数据请求**: React Query (`@tanstack/react-query`) + `axios`/`fetch`
- **路由**: React Router (可选)
- **样式**: Styled-Components, Emotion, 或 Tailwind CSS
- **图标**: `react-icons`

## 项目结构 (Vite)

```
/react-weather-app
├── src/
│   ├── api/                # API 请求逻辑
│   ├── components/         # UI 组件
│   ├── hooks/              # 自定义 Hooks
│   ├── contexts/           # React Context
│   ├── pages/              # 页面组件
│   ├── App.jsx
│   └── main.jsx
├── .env                    # 存放 API 密钥
└── package.json
```

## 任务步骤

1.  **初始化**: 使用 Vite 创建 React 项目。
2.  **API准备**: 获取 OpenWeatherMap API 密钥并存入 `.env` 文件。
3.  **API层封装**: 创建模块封装所有对天气 API 的调用。
4.  **状态管理**: 使用 React Query 的 `QueryClientProvider` 包裹应用，并创建所需 Context。
5.  **组件开发**: 创建 `SearchBar`, `CurrentWeather`, `HourlyForecast` 等核心 UI 组件。
6.  **数据请求**: 使用 `useQuery` 获取天气数据，自动处理加载和错误状态。
7.  **搜索功能**: 使用 `useDebounce` Hook 优化搜索 API 调用。
8.  **收藏夹功能**: 使用 `localStorage` 和 Context API 实现城市的增、删、查、改。
9.  **地理定位**: 加载时调用 `navigator.geolocation` 获取用户位置作为初始查询。
10. **样式**: 美化应用并确保响应式布局。

**先行任务**: 设计应用的主要界面线框图，并规划好 API 数据到 UI 组件的映射。