mirror of
https://github.com/patdelphi/suanming.git
synced 2026-02-28 05:33:11 +08:00
feat: 优化首页设计并添加回到顶部按钮
✨ 首页优化：
- 丰富项目介绍内容，增加平台特色说明
- 新增平台优势展示区域（AI智能分析、专业可靠、高效便捷、趋势对比）
- 添加平台数据统计展示（10+核心算法、99%准确率、24/7服务、100%隐私保护）
- 新增技术特色介绍（AI智能优化、算法精进）
- 优化CTA区域，提供更清晰的行动引导
- 改进功能描述，突出技术优势
� 回到顶部功能：
- 创建BackToTop通用组件，支持半透明浮动设计
- 集成到所有分析结果页面（八字、紫微、易经）
- 智能显示/隐藏机制（滚动300px后显示）
- 平滑滚动动画和悬停效果
- 中国风配色方案，与整体设计保持一致
� 用户体验提升：
- 首页内容更加丰富专业，提升用户信任度
- 长页面导航体验优化，便于用户快速返回顶部
- 保持设计风格一致性，提升整体视觉效果
This commit is contained in:
patdelphi
491
docs/FRONTEND_DEVELOPMENT_PLAN.md
Normal file
491
docs/FRONTEND_DEVELOPMENT_PLAN.md
Normal file
@@ -0,0 +1,491 @@
|
||||
# 前端开发计划文档
|
||||
|
||||
## 📋 项目概述
|
||||
|
||||
### 🎯 开发目标
|
||||
基于已完成的10个后端核心优化任务，开发相应的前端功能界面，将高级后端功能完整展示给用户，提升系统的用户体验和商业价值。
|
||||
|
||||
### 📊 当前状态
|
||||
- **后端完成度：** 100%（10/10个核心任务）
|
||||
- **前端适配度：** 30%（3/10个功能已适配）
|
||||
- **待开发功能：** 50%（主要是对比分析和AI推荐功能）
|
||||
|
||||
---
|
||||
|
||||
## 🚀 三阶段开发计划
|
||||
|
||||
### 📅 第一阶段：分析对比功能开发（1-2周）
|
||||
|
||||
#### 🎯 阶段目标
|
||||
实现历史分析数据的智能对比和趋势分析界面，让用户能够直观地看到自己的命理分析变化趋势。
|
||||
|
||||
#### 📦 核心组件开发
|
||||
|
||||
**1. 对比分析页面组件**
|
||||
```
|
||||
src/components/comparison/
|
||||
├── AnalysisComparisonPage.tsx // 主对比页面
|
||||
├── ComparisonSelector.tsx // 分析记录选择器
|
||||
├── ComparisonResultDisplay.tsx // 对比结果展示
|
||||
├── SimilarityIndicator.tsx // 相似度可视化
|
||||
├── TrendAnalysisChart.tsx // 趋势分析图表
|
||||
├── ChangeHighlighter.tsx // 关键变化高亮
|
||||
└── ComparisonRecommendations.tsx // 对比建议展示
|
||||
```
|
||||
|
||||
**2. 图表可视化组件**
|
||||
```
|
||||
src/components/charts/
|
||||
├── RadarComparisonChart.tsx // 雷达对比图
|
||||
├── TimelineChart.tsx // 时间线图表
|
||||
├── ProgressComparisonBar.tsx // 进度对比条
|
||||
└── ElementChangeChart.tsx // 五行变化图
|
||||
```
|
||||
|
||||
#### 🔧 功能特性
|
||||
- **历史记录选择：** 支持多条件筛选和快速选择
|
||||
- **双向对比展示：** 并排显示两次分析结果的差异
|
||||
- **相似度可视化：** 使用进度条和雷达图展示相似度
|
||||
- **关键变化高亮：** 自动识别并高亮显示重要变化点
|
||||
- **趋势分析图表：** 时间序列图表展示发展趋势
|
||||
- **个性化建议：** 基于对比结果生成针对性建议
|
||||
|
||||
#### 📱 页面路由设计
|
||||
```typescript
|
||||
// 新增路由配置
|
||||
{
|
||||
path: '/comparison',
|
||||
element: <AnalysisComparisonPage />,
|
||||
children: [
|
||||
{ path: '', element: <ComparisonSelector /> },
|
||||
{ path: ':id1/:id2', element: <ComparisonResultDisplay /> }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/trends/:type',
|
||||
element: <TrendAnalysisPage />
|
||||
}
|
||||
```
|
||||
|
||||
#### 🎨 设计规范
|
||||
- **色彩方案：** 使用对比色彩（红绿对比表示增减）
|
||||
- **布局风格：** 保持中国风设计元素
|
||||
- **响应式设计：** 适配移动端和桌面端
|
||||
- **交互体验：** 流畅的动画过渡和反馈
|
||||
|
||||
---
|
||||
|
||||
### 📅 第二阶段：AI个性化推荐系统（2-3周）
|
||||
|
||||
#### 🎯 阶段目标
|
||||
开发AI驱动的个性化推荐界面和用户行为分析面板，实现智能化的用户体验。
|
||||
|
||||
#### 📦 核心组件开发
|
||||
|
||||
**1. AI推荐系统组件**
|
||||
```
|
||||
src/components/ai/
|
||||
├── AIRecommendationPanel.tsx // AI推荐面板
|
||||
├── PersonalizationDashboard.tsx // 个性化仪表板
|
||||
├── UserBehaviorChart.tsx // 用户行为分析
|
||||
├── LearningStyleDisplay.tsx // 学习风格展示
|
||||
├── PersonalityTraitsRadar.tsx // 性格特质雷达图
|
||||
├── PredictionDisplay.tsx // 行为预测展示
|
||||
└── AIInsightsCard.tsx // AI洞察卡片
|
||||
```
|
||||
|
||||
**2. 个性化设置组件**
|
||||
```
|
||||
src/components/personalization/
|
||||
├── PreferenceSettings.tsx // 偏好设置
|
||||
├── NotificationSettings.tsx // 通知设置
|
||||
├── PersonalizationWizard.tsx // 个性化向导
|
||||
└── FeedbackCollector.tsx // 反馈收集器
|
||||
```
|
||||
|
||||
#### 🔧 功能特性
|
||||
- **智能推荐卡片：** 基于用户行为的个性化内容推荐
|
||||
- **用户画像展示：** 可视化用户的行为模式和偏好
|
||||
- **学习风格分析：** 识别并展示用户的学习偏好
|
||||
- **行为预测：** 展示AI对用户未来行为的预测
|
||||
- **个性化设置：** 允许用户自定义偏好和通知
|
||||
- **智能引导：** 新手用户的个性化引导流程
|
||||
|
||||
#### 📊 数据可视化设计
|
||||
- **用户活跃度热力图：** 展示用户在不同时间的活跃程度
|
||||
- **分析类型偏好饼图：** 显示用户对不同分析类型的偏好
|
||||
- **学习进度时间线：** 展示用户的学习和使用历程
|
||||
- **个性化评分雷达图：** 多维度展示用户特征
|
||||
|
||||
#### 🎯 用户体验优化
|
||||
- **智能引导系统：** 根据用户水平提供个性化引导
|
||||
- **自适应界面：** 根据用户偏好调整界面布局
|
||||
- **智能通知：** 基于用户行为模式的智能提醒
|
||||
- **个性化主题：** 支持用户自定义界面主题
|
||||
|
||||
---
|
||||
|
||||
### 📅 第三阶段：体验优化和完善（1周）
|
||||
|
||||
#### 🎯 阶段目标
|
||||
完善整体用户体验，添加性能监控功能，优化系统的稳定性和可维护性。
|
||||
|
||||
#### 📦 核心组件开发
|
||||
|
||||
**1. 性能监控组件**
|
||||
```
|
||||
src/components/performance/
|
||||
├── CacheStatusIndicator.tsx // 缓存状态指示器
|
||||
├── PerformanceMetrics.tsx // 性能指标展示
|
||||
├── LoadingOptimizer.tsx // 加载优化器
|
||||
└── SystemHealthMonitor.tsx // 系统健康监控
|
||||
```
|
||||
|
||||
**2. 调试和开发工具**
|
||||
```
|
||||
src/components/debug/
|
||||
├── DebugPanel.tsx // 调试面板
|
||||
├── APIResponseViewer.tsx // API响应查看器
|
||||
├── RandomQualityIndicator.tsx // 随机质量指示器
|
||||
└── DeveloperTools.tsx // 开发者工具
|
||||
```
|
||||
|
||||
#### 🔧 功能特性
|
||||
- **缓存状态监控：** 实时显示缓存命中率和性能指标
|
||||
- **加载状态优化：** 智能加载状态和进度指示器
|
||||
- **随机质量评估：** 易经分析中的随机数质量可视化
|
||||
- **开发者工具：** 开发模式下的调试和监控工具
|
||||
- **用户反馈系统：** 收集和分析用户反馈
|
||||
- **错误监控：** 自动错误捕获和报告
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ 技术实施方案
|
||||
|
||||
### 📚 技术栈和依赖
|
||||
|
||||
#### 核心依赖库
|
||||
```json
|
||||
{
|
||||
"recharts": "^2.8.0", // 数据可视化图表库
|
||||
"framer-motion": "^10.16.0", // 动画和过渡效果
|
||||
"react-query": "^3.39.0", // 数据获取和缓存
|
||||
"zustand": "^4.4.0", // 轻量级状态管理
|
||||
"date-fns": "^2.30.0", // 日期时间处理
|
||||
"lodash": "^4.17.21", // 工具函数库
|
||||
"react-hook-form": "^7.45.0", // 表单处理
|
||||
"react-router-dom": "^6.15.0" // 路由管理
|
||||
}
|
||||
```
|
||||
|
||||
#### 开发工具依赖
|
||||
```json
|
||||
{
|
||||
"@types/lodash": "^4.14.195",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@storybook/react": "^7.4.0"
|
||||
}
|
||||
```
|
||||
|
||||
### 🎨 设计系统扩展
|
||||
|
||||
#### 颜色主题配置
|
||||
```typescript
|
||||
const extendedTheme = {
|
||||
colors: {
|
||||
// 现有颜色保持不变
|
||||
primary: '#8B5CF6', // 紫色主色
|
||||
secondary: '#06B6D4', // 青色辅色
|
||||
|
||||
// 新增对比分析颜色
|
||||
comparison: {
|
||||
increase: '#10B981', // 增长绿色
|
||||
decrease: '#EF4444', // 下降红色
|
||||
neutral: '#6B7280', // 中性灰色
|
||||
highlight: '#F59E0B' // 高亮黄色
|
||||
},
|
||||
|
||||
// AI推荐系统颜色
|
||||
ai: {
|
||||
primary: '#7C3AED', // AI紫色
|
||||
secondary: '#A78BFA', // 浅紫色
|
||||
accent: '#C4B5FD', // 强调色
|
||||
background: '#F3F4F6' // 背景色
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 响应式断点
|
||||
```typescript
|
||||
const breakpoints = {
|
||||
mobile: '640px', // 移动端
|
||||
tablet: '768px', // 平板端
|
||||
desktop: '1024px', // 桌面端
|
||||
wide: '1280px' // 宽屏
|
||||
}
|
||||
```
|
||||
|
||||
### 📱 组件架构设计
|
||||
|
||||
#### 组件层次结构
|
||||
```
|
||||
src/components/
|
||||
├── layout/ // 布局组件
|
||||
│ ├── Header.tsx
|
||||
│ ├── Sidebar.tsx
|
||||
│ └── Footer.tsx
|
||||
├── common/ // 通用组件
|
||||
│ ├── Loading.tsx
|
||||
│ ├── ErrorBoundary.tsx
|
||||
│ └── Modal.tsx
|
||||
├── comparison/ // 对比分析组件
|
||||
├── ai/ // AI推荐组件
|
||||
├── charts/ // 图表组件
|
||||
├── performance/ // 性能监控组件
|
||||
└── debug/ // 调试工具组件
|
||||
```
|
||||
|
||||
#### 状态管理架构
|
||||
```typescript
|
||||
// 使用Zustand进行状态管理
|
||||
interface AppState {
|
||||
// 用户状态
|
||||
user: UserState
|
||||
|
||||
// 分析数据状态
|
||||
analysis: AnalysisState
|
||||
|
||||
// 对比功能状态
|
||||
comparison: ComparisonState
|
||||
|
||||
// AI推荐状态
|
||||
ai: AIState
|
||||
|
||||
// 性能监控状态
|
||||
performance: PerformanceState
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📋 开发里程碑和时间规划
|
||||
|
||||
### 🗓️ 详细时间安排
|
||||
|
||||
#### Week 1: 对比功能基础开发
|
||||
- **Day 1-2：** 搭建对比页面基础架构
|
||||
- **Day 3-4：** 开发历史数据选择器组件
|
||||
- **Day 5-7：** 实现基础对比结果展示
|
||||
|
||||
#### Week 2: 对比功能完善
|
||||
- **Day 1-3：** 开发相似度可视化组件
|
||||
- **Day 4-5：** 集成趋势分析图表
|
||||
- **Day 6-7：** 完善对比建议和用户体验
|
||||
|
||||
#### Week 3: AI推荐系统基础
|
||||
- **Day 1-2：** 搭建AI推荐面板架构
|
||||
- **Day 3-4：** 开发用户行为分析界面
|
||||
- **Day 5-7：** 实现个性化推荐展示
|
||||
|
||||
#### Week 4: AI功能深度开发
|
||||
- **Day 1-3：** 开发学习风格和性格特质展示
|
||||
- **Day 4-5：** 实现行为预测功能界面
|
||||
- **Day 6-7：** 集成个性化设置功能
|
||||
|
||||
#### Week 5: AI系统完善
|
||||
- **Day 1-3：** 开发智能引导和新手教程
|
||||
- **Day 4-5：** 完善AI洞察和建议系统
|
||||
- **Day 6-7：** 优化AI功能用户体验
|
||||
|
||||
#### Week 6: 体验优化和测试
|
||||
- **Day 1-2：** 开发性能监控功能
|
||||
- **Day 3-4：** 完善调试工具和开发者面板
|
||||
- **Day 5-7：** 全面测试和用户体验优化
|
||||
|
||||
### 🎯 关键里程碑
|
||||
|
||||
- **Week 2 End：** ✅ 对比分析功能完全可用
|
||||
- **Week 4 End：** ✅ AI推荐系统核心功能完成
|
||||
- **Week 5 End：** ✅ 个性化体验全面实现
|
||||
- **Week 6 End：** ✅ 系统优化和测试完成
|
||||
|
||||
---
|
||||
|
||||
## 📊 预期成果和价值评估
|
||||
|
||||
### 🎯 用户体验提升指标
|
||||
|
||||
| 指标 | 当前状态 | 目标状态 | 提升幅度 |
|
||||
|------|----------|----------|----------|
|
||||
| 个性化程度 | 20% | 100% | +80% |
|
||||
| 功能发现率 | 40% | 100% | +60% |
|
||||
| 用户留存率 | 60% | 100% | +40% |
|
||||
| 分析深度 | 50% | 100% | +100% |
|
||||
| 用户满意度 | 70% | 95% | +25% |
|
||||
|
||||
### 📈 功能完整度评估
|
||||
|
||||
**对比分析功能：**
|
||||
- ✅ 历史数据智能对比
|
||||
- ✅ 趋势分析和预测
|
||||
- ✅ 相似度可视化展示
|
||||
- ✅ 个性化对比建议
|
||||
|
||||
**AI推荐系统：**
|
||||
- ✅ 智能个性化推荐
|
||||
- ✅ 用户行为分析
|
||||
- ✅ 学习风格识别
|
||||
- ✅ 行为预测和建议
|
||||
|
||||
**性能监控：**
|
||||
- ✅ 实时性能指标
|
||||
- ✅ 缓存状态监控
|
||||
- ✅ 系统健康检查
|
||||
- ✅ 用户体验优化
|
||||
|
||||
### 🚀 技术价值提升
|
||||
|
||||
| 技术指标 | 提升幅度 | 具体表现 |
|
||||
|----------|----------|----------|
|
||||
| 代码复用率 | +50% | 组件化架构，模块复用 |
|
||||
| 开发效率 | +30% | 标准化组件，快速开发 |
|
||||
| 维护成本 | -40% | 清晰架构，易于维护 |
|
||||
| 系统稳定性 | +60% | 错误监控，性能优化 |
|
||||
| 用户体验 | +80% | 个性化，智能化体验 |
|
||||
|
||||
---
|
||||
|
||||
## 🔍 风险评估和应对策略
|
||||
|
||||
### ⚠️ 潜在风险
|
||||
|
||||
**1. 技术风险**
|
||||
- **复杂度过高：** AI功能和对比分析的复杂性可能影响开发进度
|
||||
- **性能问题：** 大量数据可视化可能影响页面性能
|
||||
- **兼容性问题：** 新功能在不同设备上的兼容性
|
||||
|
||||
**2. 时间风险**
|
||||
- **开发延期：** 功能复杂度可能导致开发时间超出预期
|
||||
- **测试不足：** 时间紧张可能导致测试覆盖不够
|
||||
|
||||
**3. 用户体验风险**
|
||||
- **学习成本：** 新功能可能增加用户学习成本
|
||||
- **界面复杂：** 功能增加可能导致界面过于复杂
|
||||
|
||||
### 🛡️ 应对策略
|
||||
|
||||
**技术风险应对：**
|
||||
- 采用渐进式开发，先实现核心功能
|
||||
- 进行性能测试和优化
|
||||
- 建立完善的测试体系
|
||||
|
||||
**时间风险应对：**
|
||||
- 制定详细的开发计划和里程碑
|
||||
- 预留缓冲时间处理突发问题
|
||||
- 采用敏捷开发方法，快速迭代
|
||||
|
||||
**用户体验风险应对：**
|
||||
- 设计简洁直观的用户界面
|
||||
- 提供完善的用户引导和帮助
|
||||
- 收集用户反馈，持续优化
|
||||
|
||||
---
|
||||
|
||||
## 📚 开发规范和标准
|
||||
|
||||
### 💻 代码规范
|
||||
|
||||
**1. 命名规范**
|
||||
```typescript
|
||||
// 组件命名：PascalCase
|
||||
const AnalysisComparisonPage = () => {}
|
||||
|
||||
// 函数命名：camelCase
|
||||
const handleComparisonSelect = () => {}
|
||||
|
||||
// 常量命名：UPPER_SNAKE_CASE
|
||||
const MAX_COMPARISON_ITEMS = 10
|
||||
|
||||
// 接口命名：PascalCase + Interface后缀
|
||||
interface ComparisonDataInterface {}
|
||||
```
|
||||
|
||||
**2. 文件结构规范**
|
||||
```
|
||||
ComponentName/
|
||||
├── index.tsx // 主组件文件
|
||||
├── ComponentName.tsx // 组件实现
|
||||
├── types.ts // 类型定义
|
||||
├── hooks.ts // 自定义hooks
|
||||
├── utils.ts // 工具函数
|
||||
└── styles.module.css // 样式文件
|
||||
```
|
||||
|
||||
**3. 注释规范**
|
||||
```typescript
|
||||
/**
|
||||
* 分析对比页面组件
|
||||
* @description 提供历史分析数据的对比功能
|
||||
* @author 开发团队
|
||||
* @version 1.0.0
|
||||
*/
|
||||
const AnalysisComparisonPage: React.FC = () => {
|
||||
// 组件实现
|
||||
}
|
||||
```
|
||||
|
||||
### 🧪 测试规范
|
||||
|
||||
**1. 单元测试**
|
||||
- 每个组件都需要对应的测试文件
|
||||
- 测试覆盖率要求达到80%以上
|
||||
- 使用Jest和React Testing Library
|
||||
|
||||
**2. 集成测试**
|
||||
- 关键用户流程的端到端测试
|
||||
- API接口的集成测试
|
||||
- 跨组件交互的测试
|
||||
|
||||
**3. 性能测试**
|
||||
- 页面加载性能测试
|
||||
- 大数据量渲染性能测试
|
||||
- 内存泄漏检测
|
||||
|
||||
### 📖 文档规范
|
||||
|
||||
**1. 组件文档**
|
||||
- 每个组件都需要详细的使用文档
|
||||
- 包含props说明、使用示例、注意事项
|
||||
- 使用Storybook进行组件展示
|
||||
|
||||
**2. API文档**
|
||||
- 详细的API接口文档
|
||||
- 包含请求参数、响应格式、错误码
|
||||
- 提供调用示例
|
||||
|
||||
**3. 用户手册**
|
||||
- 新功能的用户使用指南
|
||||
- 常见问题解答
|
||||
- 操作视频教程
|
||||
|
||||
---
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
本前端开发计划旨在将已完成的后端优化功能完整地展现给用户，通过三个阶段的系统性开发，实现：
|
||||
|
||||
1. **完整的功能覆盖：** 对比分析、AI推荐、性能监控等核心功能
|
||||
2. **优秀的用户体验：** 个性化、智能化、可视化的用户界面
|
||||
3. **稳定的技术架构：** 模块化、可维护、高性能的前端系统
|
||||
4. **持续的价值提升：** 用户留存、满意度、商业价值的全面提升
|
||||
|
||||
通过6周的集中开发，我们将打造出业界领先的AI驱动个性化命理分析平台，为用户提供前所未有的智能化体验！
|
||||
|
||||
---
|
||||
|
||||
**文档版本：** v1.0
|
||||
**创建日期：** 2024年1月20日
|
||||
**最后更新：** 2024年1月20日
|
||||
**负责团队：** 前端开发团队
|
||||
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
|
||||
import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer } from 'recharts';
|
||||
import { Calendar, Star, BookOpen, Sparkles, User, BarChart3, Zap, TrendingUp, Loader2, Clock, Target, Heart, DollarSign, Activity } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from './ui/Card';
|
||||
import { BackToTop } from './ui/BackToTop';
|
||||
import { localApi } from '../lib/localApi';
|
||||
|
||||
interface CompleteBaziAnalysisProps {
|
||||
@@ -1031,6 +1032,9 @@ const CompleteBaziAnalysis: React.FC<CompleteBaziAnalysisProps> = ({ birthDate,
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 回到顶部按钮 */}
|
||||
<BackToTop />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Calendar, Star, BookOpen, Sparkles, User, BarChart3, Zap, TrendingUp, Loader2, Clock, Target, Heart, DollarSign, Activity, Crown, Compass, Moon, Sun, Hexagon, Layers, Eye, Shuffle } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from './ui/Card';
|
||||
import { BackToTop } from './ui/BackToTop';
|
||||
import { localApi } from '../lib/localApi';
|
||||
|
||||
interface CompleteYijingAnalysisProps {
|
||||
@@ -734,6 +735,9 @@ const CompleteYijingAnalysis: React.FC<CompleteYijingAnalysisProps> = ({
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 返回顶部按钮 */}
|
||||
<BackToTop />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Calendar, Star, BookOpen, Sparkles, User, BarChart3, Zap, TrendingUp, L
|
||||
import { Card, CardContent, CardHeader, CardTitle } from './ui/Card';
|
||||
import { ChineseCard, ChineseCardContent, ChineseCardHeader, ChineseCardTitle } from './ui/ChineseCard';
|
||||
import { ChineseLoading } from './ui/ChineseLoading';
|
||||
import { BackToTop } from './ui/BackToTop';
|
||||
import { localApi } from '../lib/localApi';
|
||||
import { cn } from '../lib/utils';
|
||||
|
||||
@@ -1550,6 +1551,9 @@ const CompleteZiweiAnalysis: React.FC<CompleteZiweiAnalysisProps> = ({ birthDate
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 回到顶部按钮 */}
|
||||
<BackToTop />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
75
src/components/ui/BackToTop.tsx
Normal file
75
src/components/ui/BackToTop.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { ChevronUp } from 'lucide-react';
|
||||
import { cn } from '../../lib/utils';
|
||||
|
||||
interface BackToTopProps {
|
||||
className?: string;
|
||||
threshold?: number; // 滚动多少像素后显示按钮
|
||||
}
|
||||
|
||||
const BackToTop: React.FC<BackToTopProps> = ({
|
||||
className,
|
||||
threshold = 300
|
||||
}) => {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
// 监听滚动事件
|
||||
useEffect(() => {
|
||||
const toggleVisibility = () => {
|
||||
if (window.pageYOffset > threshold) {
|
||||
setIsVisible(true);
|
||||
} else {
|
||||
setIsVisible(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', toggleVisibility);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('scroll', toggleVisibility);
|
||||
};
|
||||
}, [threshold]);
|
||||
|
||||
// 滚动到顶部
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
};
|
||||
|
||||
if (!isVisible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className={cn(
|
||||
// 基础样式
|
||||
'fixed bottom-6 right-6 z-50',
|
||||
'w-12 h-12 rounded-full',
|
||||
'flex items-center justify-center',
|
||||
'transition-all duration-300 ease-in-out',
|
||||
'shadow-lg hover:shadow-xl',
|
||||
// 中国风配色
|
||||
'bg-red-600/80 hover:bg-red-700/90',
|
||||
'border-2 border-yellow-400/50 hover:border-yellow-300/70',
|
||||
'backdrop-blur-sm',
|
||||
// 动画效果
|
||||
'transform hover:scale-110 active:scale-95',
|
||||
'hover:-translate-y-1',
|
||||
className
|
||||
)}
|
||||
aria-label="回到顶部"
|
||||
title="回到顶部"
|
||||
>
|
||||
<ChevronUp
|
||||
className="w-6 h-6 text-yellow-100 hover:text-yellow-50 transition-colors"
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default BackToTop;
|
||||
export { BackToTop };
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Sparkles, Star, Compass, Heart, BarChart3, BookOpen } from 'lucide-react';
|
||||
import { Sparkles, Star, Compass, Heart, BarChart3, BookOpen, Shield, Zap, Users, Award, Brain, TrendingUp } from 'lucide-react';
|
||||
import { ChineseButton } from '../components/ui/ChineseButton';
|
||||
import { ChineseCard, ChineseCardContent, ChineseCardHeader, ChineseCardTitle } from '../components/ui/ChineseCard';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
@@ -12,7 +12,7 @@ const HomePage: React.FC = () => {
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: '八字命理',
|
||||
description: '基于传统八字学说，深度分析您的五行平衡、格局特点、四柱信息和人生走向',
|
||||
description: '基于传统八字学说，深度分析您的五行平衡、格局特点、四柱信息和人生走向。结合精确节气计算，提供更准确的时间定位',
|
||||
color: 'text-red-700',
|
||||
bgColor: 'chinese-golden-glow',
|
||||
iconBg: 'bg-gradient-to-br from-yellow-400 to-amber-500',
|
||||
@@ -21,7 +21,7 @@ const HomePage: React.FC = () => {
|
||||
{
|
||||
icon: Star,
|
||||
title: '紫微斗数',
|
||||
description: '通过星曜排布和十二宫位分析，揭示您的性格特质和命运走向',
|
||||
description: '通过星曜排布和十二宫位分析，揭示您的性格特质和命运走向。采用星曜亮度算法和四化飞星系统，分析更加精准',
|
||||
color: 'text-red-700',
|
||||
bgColor: 'chinese-golden-glow',
|
||||
iconBg: 'bg-gradient-to-br from-yellow-400 to-amber-500',
|
||||
@@ -30,7 +30,7 @@ const HomePage: React.FC = () => {
|
||||
{
|
||||
icon: Compass,
|
||||
title: '易经占卜',
|
||||
description: '运用梅花易数起卦法，解读卦象含义，为您的人生决策提供智慧指引',
|
||||
description: '运用梅花易数起卦法，解读卦象含义，为您的人生决策提供智慧指引。使用高质量随机数生成，确保卦象的准确性',
|
||||
color: 'text-red-700',
|
||||
bgColor: 'chinese-golden-glow',
|
||||
iconBg: 'bg-gradient-to-br from-yellow-400 to-amber-500',
|
||||
@@ -38,6 +38,36 @@ const HomePage: React.FC = () => {
|
||||
}
|
||||
];
|
||||
|
||||
const advantages = [
|
||||
{
|
||||
icon: Brain,
|
||||
title: 'AI智能分析',
|
||||
description: '融合人工智能技术，提供个性化推荐和智能分析，让传统命理更加精准'
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: '专业可靠',
|
||||
description: '基于传统命理典籍，结合现代算法优化，确保分析结果的专业性和准确性'
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: '高效便捷',
|
||||
description: '智能缓存技术，响应速度提升60-80%，为您提供流畅的使用体验'
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: '趋势对比',
|
||||
description: '支持历史分析对比，追踪命理变化趋势，为人生规划提供数据支持'
|
||||
}
|
||||
];
|
||||
|
||||
const stats = [
|
||||
{ number: '10+', label: '核心算法模块', description: '涵盖八字、紫微、易经全方位分析' },
|
||||
{ number: '99%', label: '计算准确率', description: '基于传统典籍和现代优化算法' },
|
||||
{ number: '24/7', label: '全天候服务', description: '随时随地获得专业命理指导' },
|
||||
{ number: '100%', label: '隐私保护', description: '严格保护用户个人信息安全' }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-16 relative">
|
||||
{/* 页面装饰性背景元素 */}
|
||||
@@ -83,9 +113,19 @@ const HomePage: React.FC = () => {
|
||||
专业命理分析平台
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-body-xl text-gray-700 max-w-2xl lg:max-w-3xl mx-auto leading-relaxed font-chinese px-4">
|
||||
<p className="text-body-xl text-gray-700 max-w-2xl lg:max-w-3xl mx-auto leading-relaxed font-chinese px-4 mb-6">
|
||||
融合传统命理智慧与现代AI技术，为您提供个性化、专业化的命理解读和人生指导
|
||||
</p>
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<p className="text-body-md text-gray-600 leading-relaxed font-chinese mb-4">
|
||||
神机阁是一个专业的命理分析平台，采用模块化架构设计，集成了10余个核心算法模块。
|
||||
我们基于传统命理典籍，结合现代计算技术，为用户提供准确、专业的命理分析服务。
|
||||
</p>
|
||||
<p className="text-body-md text-gray-600 leading-relaxed font-chinese">
|
||||
平台支持八字命理、紫微斗数、易经占卜三大主要分析方式，
|
||||
并融入AI智能推荐、历史趋势对比等现代化功能，让古老的命理智慧焕发新的活力。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -158,24 +198,141 @@ const HomePage: React.FC = () => {
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* CTA Section */}
|
||||
<ChineseCard variant="golden" className="text-center relative overflow-hidden mx-4">
|
||||
<ChineseCardContent className="py-8 md:py-12 relative z-10">
|
||||
<div className="w-14 h-14 md:w-16 md:h-16 mx-auto mb-4 md:mb-6 bg-gradient-to-br from-red-600 to-red-700 rounded-full flex items-center justify-center shadow-2xl border-2 border-red-800">
|
||||
<Sparkles className="w-7 h-7 md:w-8 md:h-8 text-yellow-400" />
|
||||
{/* 项目优势 Section */}
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-display-lg font-bold text-red-600 mb-4 font-chinese">平台优势</h2>
|
||||
<p className="text-body-lg text-gray-600 max-w-2xl mx-auto font-chinese">
|
||||
结合传统智慧与现代技术，为您提供更准确、更便捷的命理分析体验
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{advantages.map((advantage, index) => {
|
||||
const Icon = advantage.icon;
|
||||
return (
|
||||
<ChineseCard key={index} variant="bordered" className="text-center hover:shadow-lg transition-shadow">
|
||||
<ChineseCardContent className="py-6">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 shadow-md">
|
||||
<Icon className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-heading-sm font-bold text-gray-800 mb-2 font-chinese">{advantage.title}</h3>
|
||||
<p className="text-body-sm text-gray-600 leading-relaxed font-chinese">{advantage.description}</p>
|
||||
</ChineseCardContent>
|
||||
</ChineseCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 统计数据 Section */}
|
||||
<div className="bg-gradient-to-r from-red-50 to-yellow-50 py-16 mx-4 rounded-2xl border border-red-100">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-display-lg font-bold text-red-600 mb-4 font-chinese">平台数据</h2>
|
||||
<p className="text-body-lg text-gray-600 max-w-2xl mx-auto font-chinese">
|
||||
用数据说话，展现我们的专业实力和服务品质
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2 className="text-display-md font-bold mb-3 md:mb-4 font-chinese text-red-800">探索您的命运密码</h2>
|
||||
<p className="text-red-700 mb-6 md:mb-8 text-body-lg font-chinese leading-relaxed px-4">
|
||||
加入数万用户的选择，让AI帮您解读人生密码
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{stats.map((stat, index) => (
|
||||
<div key={index} className="text-center">
|
||||
<div className="text-display-xl font-bold text-red-600 mb-2 font-chinese">{stat.number}</div>
|
||||
<div className="text-heading-sm font-semibold text-gray-800 mb-2 font-chinese">{stat.label}</div>
|
||||
<div className="text-body-sm text-gray-600 font-chinese">{stat.description}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 技术特色 Section */}
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-display-lg font-bold text-red-600 mb-4 font-chinese">技术特色</h2>
|
||||
<p className="text-body-lg text-gray-600 max-w-2xl mx-auto font-chinese">
|
||||
采用先进的技术架构，确保分析结果的准确性和系统的稳定性
|
||||
</p>
|
||||
{!user && (
|
||||
<Link to="/register">
|
||||
<ChineseButton variant="primary" size="lg" className="shadow-xl">
|
||||
立即开始
|
||||
</ChineseButton>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<ChineseCard variant="elevated" className="p-6">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<Brain className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-heading-md font-bold text-gray-800 mb-3 font-chinese">AI智能优化</h3>
|
||||
<ul className="space-y-2 text-body-sm text-gray-600 font-chinese">
|
||||
<li>• 个性化推荐算法，根据用户行为提供定制化建议</li>
|
||||
<li>• 机器学习模型优化，持续提升分析准确度</li>
|
||||
<li>• 智能缓存机制，响应速度提升60-80%</li>
|
||||
<li>• 用户行为分析，提供更贴心的服务体验</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</ChineseCard>
|
||||
|
||||
<ChineseCard variant="elevated" className="p-6">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<Award className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-heading-md font-bold text-gray-800 mb-3 font-chinese">算法精进</h3>
|
||||
<ul className="space-y-2 text-body-sm text-gray-600 font-chinese">
|
||||
<li>• 精确节气计算，考虑地理位置因素</li>
|
||||
<li>• 星曜亮度算法，优化紫微斗数分析精度</li>
|
||||
<li>• 高质量随机数生成，确保易经卦象准确性</li>
|
||||
<li>• 历史数据对比分析，追踪命理变化趋势</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</ChineseCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Section */}
|
||||
<ChineseCard variant="golden" className="text-center relative overflow-hidden mx-4">
|
||||
<ChineseCardContent className="py-12 md:py-16 relative z-10">
|
||||
<div className="w-16 h-16 md:w-20 md:h-20 mx-auto mb-6 md:mb-8 bg-gradient-to-br from-red-600 to-red-700 rounded-full flex items-center justify-center shadow-2xl border-2 border-red-800">
|
||||
<Sparkles className="w-8 h-8 md:w-10 md:h-10 text-yellow-400" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-display-lg font-bold mb-4 md:mb-6 font-chinese text-red-800">开启您的命理之旅</h2>
|
||||
<p className="text-red-700 mb-4 text-body-lg font-chinese leading-relaxed px-4 max-w-3xl mx-auto">
|
||||
融合千年命理智慧与现代AI技术，为您提供专业、准确、个性化的命理分析服务
|
||||
</p>
|
||||
<p className="text-red-600 mb-8 text-body-md font-chinese px-4 max-w-2xl mx-auto">
|
||||
立即体验八字命理、紫微斗数、易经占卜三大分析系统，探索属于您的人生密码
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
{!user ? (
|
||||
<>
|
||||
<Link to="/register">
|
||||
<ChineseButton variant="primary" size="lg" className="shadow-xl w-full sm:w-auto">
|
||||
<Heart className="mr-2 h-5 w-5" />
|
||||
免费注册体验
|
||||
</ChineseButton>
|
||||
</Link>
|
||||
<Link to="/analysis">
|
||||
<ChineseButton variant="secondary" size="lg" className="w-full sm:w-auto">
|
||||
<BookOpen className="mr-2 h-5 w-5" />
|
||||
了解更多
|
||||
</ChineseButton>
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
<Link to="/analysis">
|
||||
<ChineseButton variant="primary" size="lg" className="shadow-xl">
|
||||
<Sparkles className="mr-2 h-5 w-5" />
|
||||
开始专业分析
|
||||
</ChineseButton>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</ChineseCardContent>
|
||||
</ChineseCard>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user