# poet-project

**Repository Path**: hu_kang/poet-project

## Basic Information

- **Project Name**: poet-project
- **Description**: poet-project
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-04
- **Last Updated**: 2025-08-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 中国古代诗人时间线

一个展示中国古代著名诗人时间线的交互式Web应用。

## 功能特点

- 展示李白、杜甫、王维、辛弃疾、白居易等著名诗人的生平时间线
- 响应式设计，支持各种设备
- 优雅的动画效果和过渡
- 详细的作品展示和生平介绍
- 完善的错误处理机制，确保界面稳定显示
- 全面的移动端适配，提供优秀的移动体验

## 技术栈

- Vue 3
- Vite
- CSS3 动画
- 响应式设计

## 安装和运行

```bash
# 安装依赖
npm install

# 开发模式运行
npm run dev

# 构建生产版本
npm run build
```

## 服务器配置

本项目支持从后端API获取数据。详细配置说明请查看 [SERVER_SETUP.md](./SERVER_SETUP.md)。

### 快速配置

1. 编辑 `src/config.js` 文件
2. 修改 `BASE_URL` 为您的服务器地址
3. 将 `USE_MOCK_DATA` 设置为 `false` 启用服务器数据获取

### 数据格式

后端接口需要返回与 `src/data/poets.js` 相同格式的JSON数据。

**重要**: 后端需要直接返回完整的图片URL，例如：
```json
{
  "backgroundImage": "https://poet.rnigx.cn/images/libai.png"
}
```

### 错误处理

项目具有完善的错误处理机制：

- **网络超时**: 10秒超时设置
- **服务器错误**: 自动回退到本地数据
- **数据格式错误**: 自动使用默认数据
- **图片加载失败**: 自动使用本地图片
- **加载状态**: 显示加载动画

当服务器请求失败时，系统会：
- 使用 `src/data/poets.js` 中的默认数据
- 使用 `images/` 目录中的本地图片
- 确保界面正常显示，不会出现空白页面

## 移动端优化

项目已进行全面移动端适配，详细说明请查看 [MOBILE_OPTIMIZATION.md](./MOBILE_OPTIMIZATION.md)。

### 主要优化特性

- **响应式设计**: 支持手机、平板、桌面各种设备
- **触摸优化**: 44px最小触摸目标，流畅的触摸反馈
- **性能优化**: 硬件加速滚动，优化的动画性能
- **无障碍访问**: 支持屏幕阅读器和键盘导航
- **特殊场景**: 横屏模式、高分辨率屏幕适配

### 支持的设备

- iPhone (所有型号)
- iPad (所有型号)  
- Android手机 (所有主流品牌)
- Android平板
- 其他移动设备

## 项目结构

```
src/
├── components/     # Vue组件
├── data/          # 数据文件
├── services/      # API服务
├── config.js      # 配置文件
└── App.vue        # 主应用组件
images/            # 本地图片文件
```

## 许可证

MIT License