智旅

--- theme: juejin --- ## 项目概述 **智旅**是一款基于React 19 + Vite 6构建的现代化移动端旅行应用，集成AI智能助手、用户认证系统、高质量图片内容和流畅的用户体验。项目技术栈先进，架构完善，是学习现代前端开发的优秀案例。 ## 项目演示 ![2.gif](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3c6744d87c1b44febb46beacb13bdf7f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg54ix57yW56iL55qE5Za1:q75.awebp?rk3s=f64ab15b&x-expires=1771763863&x-signature=UH2U3UZu2N5ohp1mwOAd8lv033Y%3D) ![2025-08-10213529-ezgif.com-video-to-gif-converter.gif](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/941a57903bd44d868f82ffed485c0ced~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg54ix57yW56iL55qE5Za1:q75.awebp?rk3s=f64ab15b&x-expires=1771763863&x-signature=Snh1jytS5vxxV5WGiNqzVW%2B3bNA%3D) ![3.gif](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5b9502379cc74e68bc53913e68a296d5~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg54ix57yW56iL55qE5Za1:q75.awebp?rk3s=f64ab15b&x-expires=1771763863&x-signature=KNvHfkZPFIxvr1zNg4JtMbiaduQ%3D) ![5.gif](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/324f18aa9c2241fe8919afe5d6dc8bb8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg54ix57yW56iL55qE5Za1:q75.awebp?rk3s=f64ab15b&x-expires=1771763863&x-signature=2yUDTvi8%2BaExvJKnFlVVeoOSNBs%3D) ## 项目结构 ZhiNen_trip/ # 项目根目录 ├── 📁 api/ # Vercel无服务函数 │ ├── 📁 coze/ # Coze AI工作流API │ ├── 📁 doubao/ # 豆包图像生成API │ └── 📁 pexels/ # Pexels图片API ├── 📁 public/ # 静态资源目录 │ └── 📄 vite.svg # Vite图标 ├── 📁 src/ # 源码目录 │ ├── 📁 api/ # API接口封装 │ ├── 📁 assets/ # 静态资源(图片/图标) │ ├── 📁 components/ # 组件库 │ │ ├── 📁 Business/ # 业务组件 │ │ ├── 📁 Dev/ # 开发调试组件 │ │ ├── 📁 ErrorBoundary/ # 错误边界组件 │ │ ├── 📁 JWTDebugPanel/ # JWT调试面板 │ │ ├── 📁 JWTProvider/ # JWT认证提供者 │ │ ├── 📁 Layout/ # 布局组件 │ │ ├── 📁 MainLayout/ # 主布局组件 │ │ ├── 📁 ProtectedRoute/ # 路由保护组件 │ │ ├── 📁 Providers/ # 全局状态提供者 │ │ ├── 📁 UI/ # 通用UI组件 │ │ │ ├── 📁 EmptyState/ # 空状态组件 │ │ │ ├── 📁 LazyImage/ # 懒加载图片组件 │ │ │ ├── 📁 LoadingSpinner/ # 加载动画组件 │ │ │ ├── 📁 UserAvatar/ # 用户头像组件 │ │ │ └── 📄 index.js # UI组件导出 │ │ ├── 📁 WaterfallLayout/ # 瀑布流布局组件 │ │ └── 📄 index.js # 组件统一导出 │ ├── 📁 constants/ # 常量配置 │ ├── 📁 contexts/ # React上下文 │ ├── 📁 hooks/ # 自定义Hook │ ├── 📁 llm/ # AI大模型相关 │ ├── 📁 pages/ # 页面组件 │ │ ├── 📁 AI_chat/ # AI聊天页面 │ │ ├── 📁 Account/ # 个人中心页面 │ │ ├── 📁 Article/ # 旅记详情页面 │ │ ├── 📁 Flight/ # 机票页面 │ │ ├── 📁 Home/ # 首页 │ │ ├── 📁 Hotel/ # 酒店页面 │ │ ├── 📁 Login/ # 登录注册页面 │ │ ├── 📁 Search/ # 搜索页面 │ │ ├── 📁 Taxi/ # 打车页面 │ │ ├── 📁 Tourism/ # 旅游页面 │ │ ├── 📁 Train/ # 火车票页面 │ │ ├── 📁 Trip/ # 行程页面 │ │ ├── 📁 Welcome/ # 欢迎页面 │ │ └── 📁 WriteArticle/ # 写文章页面 │ ├── 📁 services/ # 服务层 │ ├── 📁 stores/ # 状态管理(Zustand) │ ├── 📁 utils/ # 工具函数 │ ├── 📄 App.css # 应用样式 │ ├── 📄 App.jsx # 应用根组件 │ ├── 📄 index.css # 全局样式 │ └── 📄 main.jsx # 应用入口 ├── 📄 .gitignore # Git忽略配置 ├── 📄 README.md # 项目说明文档 ├── 📄 build-test.js # 构建测试脚本 ├── 📄 eslint.config.js # ESLint配置 ├── 📄 index.html # HTML模板 ├── 📄 package.json # 项目依赖配置 ├── 📄 pnpm-lock.yaml # 依赖锁定文件 ├── 📄 postcss.config.cjs # PostCSS配置 ├── 📄 start-dev.bat # Windows启动脚本 ├── 📄 start-dev.ps1 # PowerShell启动脚本 ├── 📄 vercel.json # Vercel部署配置 └── 📄 vite.config.js # Vite构建配置 #### 核心目录分析 `/api/` - Vercel无服务函数 * 专门用于Vercel部署的API路由 * 安全处理第三方API密钥 * 支持Coze、豆包、Pexels三大API服务 `/src/components/` - 组件架构 * **UI/**: 可复用的基础UI组件 * **Business/**: 业务逻辑组件 * **Layout/**: 布局相关组件 * **Providers/**: 全局状态提供者组件 `/src/pages/` - 页面模块 * 采用功能模块化设计 * 每个页面独立目录管理 * 覆盖旅行应用完整功能链路 `/src/stores/` - 状态管理 * 基于Zustand的轻量级状态管理 * 模块化状态设计 * 支持状态持久化 #### 架构特点 1. **模块化设计**: 功能模块清晰分离 2. **组件复用**: UI组件高度可复用 3. **状态集中**: 统一的状态管理方案 4. **API分层**: 前端API封装 + 后端代理 5. **工程化**: 完善的构建和部署配置 ## 项目背景与技术选型 ```json //package.json { "name": "zhinen-trip", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "start": "vite", "build": "vite build", "build:analyze": "ANALYZE=true vite build", "build:test": "node build-test.js", "build:report": "vite build && npx serve dist", "preview": "vite preview", "lint": "eslint .", "lint:fix": "eslint . --fix", "performance:test": "node -e \"import('./src/utils/performanceTest.js').then(m => m.quickPerformanceTest())\"", "performance:mid": "node -e \"import('./src/utils/midPriorityTest.js').then(m => m.quickMidPriorityTest())\"", "size:analyze": "vite build --mode analyze" }, "dependencies": { "@react-vant/icons": "^0.1.0", "axios": "^1.11.0", "js-cookie": "^3.0.5", "jsonwebtoken": "^9.0.2", "lib-flexible": "^0.3.2", "prop-types": "^15.8.1", "react": "^19.1.0", "react-dom": "^19.1.0", "react-router-dom": "^7.7.1", "react-vant": "^3.3.5", "zustand": "^5.0.7" }, "devDependencies": { "@eslint/js": "^9.25.0", "@types/react": "^19.1.2", "@types/react-dom": "^19.1.2", "@vitejs/plugin-react": "^4.4.1", "eslint": "^9.25.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.19", "globals": "^16.0.0", "postcss": "^8.4.47", "autoprefixer": "^10.4.20", "postcss-pxtorem": "^6.1.0", "rollup-plugin-visualizer": "^6.0.3", "terser": "^5.43.1", "vite": "^6.3.5", "vite-plugin-chunk-split": "^0.5.0", "vite-plugin-mock": "^3.0.2" }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] } ``` #### 核心框架版本策略 **React 19.1.0** - 采用最新稳定版本，获得最新特性和性能优化，如并发渲染、自动批处理等新特性。 **React Router 7.7.1** - 使用最新版本，支持新的路由特性和更好的类型安全。 #### UI组件库策略 **React Vant 3.3.5** - 选择移动端优化的组件库，适合构建移动应用，版本相对保守但稳定。 #### 状态管理策略 **Zustand 5.0.7** - 选择轻量级状态管理方案，相比Redux更简洁，版本较新但已稳定。 #### 构建工具策略 **Vite 6.3.5** - 使用最新版本获得最快的开发体验和构建性能。 **ESLint 9.25.0** - 保持代码质量工具的最新版本。 #### 移动端适配策略 **lib-flexible + postcss-pxtorem** - 传统但成熟的移动端适配方案，确保兼容性。 ## 应用根组件路由配置，展示页面级组件懒加载 ```jsx // app.jsx import { lazy, Suspense } from 'react' import { Routes, Route, Navigate } from 'react-router-dom' import { LoadingSpinner } from '@/components/UI' import ZustandProvider from '@/components/Providers/ZustandProvider' import { ProtectedRoute } from '@/components' import ErrorBoundary from '@/components/ErrorBoundary' import JWTProvider from '@/components/JWTProvider' import { useRoutePreloader } from '@/hooks/useRoutePreloader' import './App.css' // 页面组件懒加载 const MainLayout = lazy(() => import('@/components/Layout/MainLayout')) const Login = lazy(() => import('@/pages/Login')) const Home = lazy(() => import('@/pages/Home')) const Article = lazy(() => import('@/pages/Article')) const WriteArticle = lazy(() => import('@/pages/WriteArticle')) const Trip = lazy(() => import('@/pages/Trip')) const Account = lazy(() => import('@/pages/Account')) const Search = lazy(() => import('@/pages/Search')) const Hotel = lazy(() => import('@/pages/Hotel')) const Flight = lazy(() => import('@/pages/Flight')) const Train = lazy(() => import('@/pages/Train')) const Taxi = lazy(() => import('@/pages/Taxi')) const Tourism = lazy(() => import('@/pages/Tourism')) const Coze = lazy(() => import('@/pages/AI_chat/coze')) // 主应用组件包装器 const AppContent = () => { // 启用路由预加载（保持后台运行，但不暴露到全局） useRoutePreloader() return ( <> }> {/* 登录页面 - 不需要认证 */} } /> {/* 主应用布局 - 混合权限控制 */} }> } /> {/* 首页和旅记页 - 未登录也可访问 */} } /> } /> {/* 行程页和我的页 - 需要认证 */} } /> } /> {/* 独立页面 - 需要认证 */} } /> } /> } /> } /> } /> } /> } /> } /> {/* 404页面重定向到首页 */} } /> ) } function App() { return ( ) } export default App ``` ### 架构设计 **分层架构**：使用多个 Provider 层次化管理应用状态 * `ErrorBoundary`：全局错误处理 * `ZustandProvider`：状态管理 * `JWTProvider`：JWT 认证管理 ### 核心功能 **懒加载优化**：所有页面组件都采用 `lazy()` 动态导入，配合 `Suspense` 提供加载状态，提升应用性能 **混合权限控制**： * 公开页面：登录页、首页、旅记页（未登录也可访问） * 受保护页面：使用 `ProtectedRoute` 组件包装，需要认证后才能访问 **路由结构**： * 主布局路由：包含导航的页面（首页、旅记、行程、我的） * 独立页面：全屏显示的功能页面（搜索、预订、AI聊天等） ### 页面分类 * **内容页面**：首页、旅记、写文章 * **功能页面**：搜索、个人账户 * **预订服务**：酒店、机票、火车票、出租车、旅游 * **AI功能**：Coze 聊天页面 ### 用户体验优化 * 使用 `useRoutePreloader` 钩子预加载路由 * 统一的加载动画（球形加载器） * 404 页面自动重定向到首页 * 全局错误边界处理异常情况 ## Zustand状态管理架构，轻量级状态持久化方案 ### 认证状态管理 ```js // src/stores/authStore.js /** * 认证状态管理 - Zustand实现 + JWT集成 */ import { create } from 'zustand' import { persist, createJSONStorage } from 'zustand/middleware' import { getRandomAvatar } from '../api/pexels' import { generateTravelAvatar } from '../api' import { generateJWT, verifyJWT, parseJWT, tokenManager, getUserFromToken, getTokenRemainingTime } from '../utils/jwt' const useAuthStore = create( persist( (set, get) => ({ // 状态 user: null, isAuthenticated: false, isLoading: false, token: null, tokenExpiresIn: 0, // Actions /** * 初始化认证状态 - JWT版本 */ initializeAuth: () => { set({ isLoading: true }) try { // 优先使用JWT token const jwtToken = tokenManager.getToken() if (jwtToken && verifyJWT(jwtToken)) { // JWT token有效，从token中提取用户信息 const userData = getUserFromToken(jwtToken) const remainingTime = getTokenRemainingTime(jwtToken) console.log('✅ JWT认证初始化成功:', userData) console.log('🕐 Token剩余时间:', Math.floor(remainingTime / 60), '分钟') set({ user: userData, token: jwtToken, tokenExpiresIn: remainingTime, isAuthenticated: true, isLoading: false }) // 启动自动刷新机制 tokenManager.startAutoRefresh(jwtToken) } else { // JWT token无效，尝试从旧的localStorage读取并迁移 const storedUser = localStorage.getItem('zhilvUser') const oldToken = localStorage.getItem('zhilvToken') if (storedUser && oldToken) { console.log('🔄 检测到旧版token，正在迁移到JWT...') const userData = JSON.parse(storedUser) // 生成新的JWT token const newJwtToken = generateJWT({ id: userData.id, username: userData.username, email: userData.email, nickname: userData.nickname, avatar: userData.avatar, phone: userData.phone, preferences: userData.preferences }) // 保存新的JWT token tokenManager.setToken(newJwtToken) // 清除旧的存储 localStorage.removeItem('zhilvUser') localStorage.removeItem('zhilvToken') set({ user: userData, token: newJwtToken, tokenExpiresIn: getTokenRemainingTime(newJwtToken), isAuthenticated: true, isLoading: false }) console.log('✅ 成功迁移到JWT认证') } else { // 没有任何有效的认证信息 set({ user: null, token: null, tokenExpiresIn: 0, isAuthenticated: false, isLoading: false }) } } } catch (error) { console.error('初始化认证状态失败:', error) // 清除所有认证数据 tokenManager.removeToken() localStorage.removeItem('zhilvUser') localStorage.removeItem('zhilvToken') set({ user: null, token: null, tokenExpiresIn: 0, isAuthenticated: false, isLoading: false }) } }, /** * 登录 - JWT版本 * @param {Object} credentials - 登录凭据 * @returns {Promise