# react

**Repository Path**: wsh521zyy/react

## Basic Information

- **Project Name**: react
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-17
- **Last Updated**: 2025-11-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 目标管理应用

这是一个使用React开发的目标管理应用，支持用户登录、添加目标、查看目标列表、收藏目标、更新进度和图表分析等功能。

## 功能特性

- **用户登录**：简单的用户名登录系统
- **目标管理**：添加、查看、管理个人目标
- **目标收藏**：标记重要目标为收藏
- **进度追踪**：更新和查看目标完成进度
- **数据可视化**：通过图表直观展示目标进度和状态分布
- **本地存储**：使用localStorage保存用户数据

## 技术栈

- React 17
- React Router DOM 5
- Chart.js 3
- CSS (响应式设计)

## 安装和运行

### 前置要求

- Node.js 14+
- npm 或 yarn

### 安装步骤

1. 克隆项目到本地

```bash
git clone <项目地址>
cd react-goals-app
```

2. 安装依赖

```bash
npm install
# 或
yarn install
```

3. 启动开发服务器

```bash
npm start
# 或
yarn start
```

4. 在浏览器中访问 `http://localhost:3000`

## 构建生产版本

```bash
npm run build
# 或
yarn build
```

构建产物将输出到 `build` 目录。

## 项目结构

```
react-goals-app/
├── public/
│   └── index.html       # HTML入口文件
├── src/
│   ├── components/      # React组件
│   │   ├── Login.js     # 登录组件
│   │   ├── GoalsList.js # 目标列表组件
│   │   ├── AddGoal.js   # 添加目标组件
│   │   ├── GoalDetail.js # 目标详情组件
│   │   └── Charts.js    # 图表组件
│   ├── App.js           # 应用主组件
│   ├── App.css          # 应用样式
│   ├── index.js         # JavaScript入口文件
│   └── index.css        # 全局样式
├── package.json         # 项目配置和依赖
└── README.md            # 项目说明文档
```

## 使用说明

1. **登录**：输入用户名即可登录系统
2. **添加目标**：点击"添加目标"，填写标题和内容
3. **查看目标列表**：在首页查看所有目标，可切换查看收藏的目标
4. **更新进度**：点击目标卡片进入详情页，使用滑块更新进度
5. **收藏目标**：点击目标卡片上的星星图标收藏/取消收藏
6. **查看图表**：点击"图表查看"查看进度分析图表

## 注意事项

- 本应用使用localStorage存储数据，数据仅保存在当前浏览器中
- 清除浏览器缓存可能会导致数据丢失
- 建议在现代浏览器中使用（Chrome、Firefox、Safari等）

## 许可证

MIT