logo
1
1
Login
提交远端分支

AI Travel Assistant

AI Travel Assistant 是一个现代化的旅行路书应用程序,帮助用户规划和定制他们的旅行行程。该应用采用了最新的Web技术,提供了流畅的用户体验和丰富的功能。

主要功能

  • 🗺️ 智能路书定制:根据用户偏好自动生成个性化旅行路线
  • 🌍 目的地探索:浏览热门旅游目的地,包含详细介绍和图片展示
  • 📍 周边游推荐:发现周边有趣的景点和活动
  • 🎯 主题旅行:根据不同主题(如文化、美食、自然等)筛选旅行目的地
  • 📱 移动优先设计:针对移动设备优化的界面,支持触控操作和手势
  • 🔄 下拉刷新:原生APP般的下拉刷新体验
  • 💫 触感反馈:集成触感反馈,提供更好的交互体验

技术栈

  • 框架: Next.js 14.2.25
  • 前端库: React 18
  • 开发语言: TypeScript
  • 样式方案: Tailwind CSS
  • UI组件: 自定义组件库
  • 状态管理: React Hooks
  • 路由系统: Next.js App Router

项目结构

src/ ├── app/ # 页面组件 │ ├── customize/ # 路书定制相关页面 │ ├── destinations/ # 目的地相关页面 │ ├── map/ # 地图相关功能 │ └── trip-detail/ # 行程详情页面 ├── components/ # 可复用组件 │ ├── common/ # 通用组件 │ ├── shared/ # 共享组件 │ ├── trip/ # 行程相关组件 │ └── ui/ # UI基础组件 ├── hooks/ # 自定义Hooks ├── lib/ # 工具函数和API └── types/ # TypeScript类型定义

开始使用

  1. 安装依赖:
npm config set registry https://mirrors.cloud.tencent.com/npm/ npm install
  1. 启动开发服务器:
npm run dev
  1. 构建生产版本:
npm run build
  1. 启动生产服务器:
npm run start

特色功能实现

触感反馈

应用集成了iOS风格的触感反馈,在用户进行关键操作时提供适当的振动反馈,增强交互体验。

下拉刷新

实现了原生APP风格的下拉刷新功能,包含平滑的动画效果和加载状态指示。

响应式设计

  • 适配不同屏幕尺寸
  • 支持深色模式
  • iOS风格的UI组件和动画

性能优化

  • 图片懒加载
  • 组件按需加载
  • 路由预加载

开发指南

目录结构说明

  • app/: 包含所有页面组件,采用Next.js 14的App Router架构
  • components/: 可复用的React组件
  • hooks/: 自定义React Hooks,处理常用的业务逻辑
  • lib/: 工具函数和API调用封装
  • types/: TypeScript类型定义文件

组件开发规范

  1. 使用TypeScript编写所有组件
  2. 遵循React Hooks的最佳实践
  3. 使用Tailwind CSS进行样式开发
  4. CodeBuddy Code 是怎么做到 90% 代码都是 AI 来写的(1).md确保组件的可复用性和可维护性

样式指南

  • 使用Tailwind CSS的工具类
  • 遵循iOS设计规范
  • 保持一致的间距和圆角风格
  • 使用预定义的颜色变量

贡献指南

  1. Fork 项目
  2. 创建特性分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 开启 Pull Request

许可证

MIT License