# demo-ionic-react

**Repository Path**: huangshaomo/demo-ionic-react

## Basic Information

- **Project Name**: demo-ionic-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**: 2024-12-09
- **Last Updated**: 2024-12-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI Travel Assistant

基于 Ionic React 和 OpenAI 构建的智能旅行助手移动应用，提供多种服务包括旅行规划、翻译、电话服务等。

## 功能特点

- 🌍 中国文化顾问 - 了解中国历史文化
- 💼 商务助理 - 提供商业咨询和建议
- ✈️ 旅行秘书 - 规划旅程和行程安排
- 🎓 留学顾问 - 提供留学相关建议
- 🗣️ 翻译服务 - 支持多语言翻译
- 📞 电话服务 - 通讯录管理和拨号功能

## 技术栈

- **框架**: Ionic React 7.5.7
- **UI 组件**: IonComponents
- **状态管理**: Zustand 4.4.7
- **AI 集成**: OpenAI API
- **本地存储**: Capacitor Preferences
- **HTTP 客户端**: Capacitor HTTP
- **路由**: React Router 5.3.4
- **工具库**: 
  - date-fns 2.30.0
  - react-markdown 9.0.1
  - remark-gfm 4.0.0

## 系统要求

- Node.js >= 16.14.0
- npm >= 8.0.0
- Ionic CLI >= 7.1.1

## 安装部署

1. 克隆项目

```bash
git clone <repository-url>
cd ai-travel-assistant
```

2. 安装依赖

```bash
npm install
```

3. 环境配置

创建 `.env` 文件并添加以下配置：

```env
REACT_APP_OPENAI_API_KEY=your-openai-api-key
```

4. 开发环境运行

```bash
ionic serve
```

5. 生产环境构建

```bash
ionic build
```

6. 添加移动平台

```bash
# 添加 Android 平台
ionic cap add android

# 添加 iOS 平台
ionic cap add ios
```

7. 运行移动应用

```bash
# Android
ionic cap run android

# iOS
ionic cap run ios
```

## 项目结构

```
src/
├── components/     # React 组件
├── pages/         # 页面组件
├── services/      # 服务层
├── store/         # 状态管理
├── hooks/         # 自定义 Hooks
├── guards/        # 路由守卫
├── theme/         # 主题样式
└── utils/         # 工具函数
```

## 主要功能模块

- **聊天系统**: 基于 OpenAI API 的智能对话系统
- **翻译服务**: 支持多语言实时翻译
- **电话系统**: 通讯录管理和拨号功能
- **用户管理**: 用户信息和设置管理
- **历史记录**: 聊天和服务使用记录

## 开发指南

### 代码规范

- 使用 TypeScript 进行类型检查
- 遵循 React Hooks 最佳实践
- 使用 Ionic 组件进行界面开发
- 组件采用函数式编程方式

### 新增功能流程

1. 在 `components` 目录创建新组件
2. 在 `pages` 目录添加新页面
3. 在 `services` 目录添加相关服务
4. 在 `store` 目录添加状态管理
5. 更新相关测试用例

## 部署说明

支持多种部署方式：

- **Android**: 通过 Android Studio 部署
- **iOS**: 通过 Xcode 部署
- **PWA**: 支持渐进式网页应用部署

## 版本历史

- v0.1.0 - 初始版本发布
  - 基础聊天功能
  - 翻译服务
  - 电话系统

## 许可证

MIT License

## 贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进项目。

## 联系方式

如有问题或建议，请通过 Issue 系统反馈。