# fanqie-read-ui

**Repository Path**: zhang_fei_123/fanqie-read-ui

## Basic Information

- **Project Name**: fanqie-read-ui
- **Description**: 模仿番茄小说阅读器
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-30
- **Last Updated**: 2025-10-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 📚 番茄小说 - 在线阅读与任务管理平台

<div align="center">

![Logo](static/logo.png)

一款集在线阅读、社区互动、任务打卡于一体的综合性应用，为用户提供优质的阅读体验和学习管理功能。

[![uni-app](https://img.shields.io/badge/uni--app-4.03-brightgreen)](https://uniapp.dcloud.io/)
[![Vue](https://img.shields.io/badge/Vue-3.x-brightgreen)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue)](https://www.typescriptlang.org/)
[![License](https://img.shields.io/badge/license-MIT-blue)](LICENSE)

</div>

---

## 📖 目录

- [项目简介](#项目简介)
- [核心功能](#核心功能)
- [技术栈](#技术栈)
- [项目结构](#项目结构)
- [快速开始](#快速开始)
- [功能模块](#功能模块)
- [主题系统](#主题系统)
- [API接口](#api接口)
- [开发指南](#开发指南)
- [更新日志](#更新日志)

---

## 🎯 项目简介

**番茄小说** 是一款基于 uni-app 开发的跨平台应用，支持 H5、微信小程序、App 等多端运行。应用整合了：

- 📚 **在线阅读平台** - 海量图书资源，流畅阅读体验
- 💬 **社区互动** - 书评、分享、作者互动
- ✅ **任务管理** - 学习打卡、习惯养成、数据统计

### ✨ 特色亮点

- 📖 **海量图书资源** - 涵盖多种分类的优质图书
- 🎨 **多主题支持** - 6种精美主题，护眼阅读
- 📊 **数据可视化** - 阅读统计、任务完成情况一目了然
- 🔍 **智能搜索** - 书名、作者、分类多维度搜索
- 💾 **本地书架** - 离线阅读，随时随地
- 🏆 **排行榜** - 热门榜单、新书推荐
- ✅ **任务打卡** - 学习计划、习惯养成
- 🔐 **安全可靠** - 数据加密，隐私保护

---

## 🚀 核心功能

### 📚 阅读模块

#### 1️⃣ 书城
- 📱 **首页推荐**: 精选图书、热门推荐、新书上架
- 🔥 **热门榜单**: 
  - 畅销榜
  - 新书榜
  - 好评榜
  - 收藏榜
- 🎯 **分类浏览**: 
  - 都市
  - 玄幻
  - 言情
  - 科幻
  - 历史
  - 悬疑
  - 等多种分类

#### 2️⃣ 图书详情
- 📖 **基本信息**: 封面、书名、作者、简介
- ⭐ **评分系统**: 用户评分、评价数量
- 💬 **书评展示**: 用户评论、互动点赞
- 👥 **作者信息**: 作者简介、作品列表
- 🔖 **章节目录**: 完整章节列表
- 📥 **加入书架**: 一键收藏，方便阅读

#### 3️⃣ 阅读体验
- 📄 **章节阅读**: 流畅的阅读体验
- 🎨 **阅读设置**: 
  - 字体大小调节
  - 背景颜色切换
  - 夜间模式
  - 行间距调整
- 🔖 **书签功能**: 记录阅读位置
- 📊 **阅读进度**: 实时显示阅读百分比
- ⏱️ **阅读时长**: 统计阅读时间

#### 4️⃣ 书架管理
- 📚 **我的书架**: 管理收藏的图书
- 🗑️ **删除管理**: 移除不需要的图书
- 📊 **阅读记录**: 查看历史阅读
- 🔄 **同步功能**: 云端数据同步

#### 5️⃣ 搜索功能
- 🔍 **智能搜索**: 
  - 书名搜索
  - 作者搜索
  - 关键词搜索
- 🏷️ **分类筛选**: 按分类、标签筛选
- 📈 **热门搜索**: 热搜词推荐
- 🕐 **搜索历史**: 记录搜索记录

### 💬 社区模块

#### 1️⃣ 社区广场
- 📝 **动态发布**: 分享读书心得
- 💬 **互动评论**: 评论、点赞、转发
- 👥 **用户关注**: 关注感兴趣的用户
- 🔥 **热门话题**: 参与讨论

#### 2️⃣ 书评系统
- ✍️ **发表书评**: 撰写图书评价
- ⭐ **评分打分**: 为图书打分
- 👍 **点赞收藏**: 支持优质书评
- 💬 **评论互动**: 与其他读者交流

#### 3️⃣ 作者中心
- 👨‍💼 **作者主页**: 查看作者信息
- 📚 **作品列表**: 浏览作者所有作品
- ⭐ **关注作者**: 追更喜爱的作者
- 📢 **作者动态**: 接收作者更新通知

### ✅ 任务管理模块

#### 1️⃣ 任务首页
- 📊 **数据概览**: 
  - 今日任务数
  - 完成情况
  - 完成率统计
  - 连续打卡天数
- 📝 **任务列表**: 
  - 待完成任务
  - 已完成任务
  - 任务标签分类
- ➕ **快速添加**: 一键创建新任务

#### 2️⃣ 任务创建
- 📋 **任务信息**: 
  - 任务名称
  - 任务图标
  - 任务标签（学习/家务等）
  - 任务分数
- 🎯 **任务设置**: 
  - 重要程度
  - 截止时间
  - 提醒设置

#### 3️⃣ 历史记录
- 📅 **日期筛选**: 查看指定日期范围的任务
- 📊 **完成统计**: 
  - 完成任务数
  - 未完成任务数
  - 总得分统计
- 🔖 **补卡功能**: 补签历史任务

#### 4️⃣ 数据统计
- 📈 **图表展示**: 
  - 任务完成趋势
  - 分类任务占比
  - 得分统计
- 📊 **详细数据**: 
  - 周统计
  - 月统计
  - 年度报告

### 👤 个人中心

#### 1️⃣ 用户信息
- 🎭 **个人资料**: 
  - 头像上传
  - 昵称修改
  - 个性签名
  - 联系方式
- 📊 **我的统计**: 
  - 阅读时长
  - 完成任务数
  - 获得积分

#### 2️⃣ 系统设置
- 🎨 **主题切换**: 6种主题风格
- 🔔 **通知设置**: 推送通知管理
- 🔐 **账号安全**: 
  - 修改密码
  - 手机绑定
  - 邮箱绑定
- 🌐 **其他设置**: 
  - 清除缓存
  - 关于我们
  - 隐私政策

---

## 🛠️ 技术栈

### 前端框架
- **uni-app** `v4.03+` - 跨平台应用开发框架
- **Vue 3** - 渐进式 JavaScript 框架（Composition API）
- **TypeScript** `v5.x` - JavaScript 的超集，提供类型安全

### UI组件库
- **uni-ui** - uni-app 官方UI组件库
  - uni-badge - 徽章组件
  - uni-card - 卡片组件
  - uni-list - 列表组件
  - uni-popup - 弹窗组件
  - uni-icons - 图标组件
  - uni-forms - 表单组件
  - uni-datetime-picker - 日期选择器
  - 等40+组件
- **qiun-data-charts** - 高性能跨全端图表组件

### 核心依赖
- **crypto-js** `v4.2.0` - JavaScript 加密库
- **pinia** - Vue 3 状态管理

### 开发工具
- **HBuilderX** `v3.1.0+` - 官方IDE
- **SCSS** - CSS 预处理器
- **TypeScript** - 类型系统

---

## 📁 项目结构

```
fanqie-03-uniapp/
├── components/              # 全局组件
│   └── user-overview.vue   # 用户概览组件
│
├── pages/                   # 页面文件
│   ├── login/              # 登录模块
│   │   ├── index.vue       # 登录页
│   │   └── forget-password.vue # 忘记密码
│   │
│   ├── bookstore/          # 书城
│   │   └── index.vue       # 书城首页
│   │
│   ├── category/           # 分类
│   │   ├── index.vue       # 分类首页
│   │   └── categorySearch.vue # 分类搜索
│   │
│   ├── bookshelf/          # 书架
│   │   └── index.vue       # 我的书架
│   │
│   ├── book/               # 图书
│   │   ├── index.vue       # 图书详情
│   │   └── chapter.vue     # 章节阅读
│   │
│   ├── rank/               # 排行榜
│   │   └── index.vue       # 排行榜页
│   │
│   ├── search/             # 搜索
│   │   └── index.vue       # 搜索页
│   │
│   ├── review/             # 书评
│   │   └── index.vue       # 书评列表
│   │
│   ├── author/             # 作者
│   │   └── index.vue       # 作者主页
│   │
│   ├── community/          # 社区
│   │   └── index.vue       # 社区广场
│   │
│   ├── fenxiang/           # 分享
│   │   └── index.vue       # 分享页
│   │
│   ├── task/               # 任务模块
│   │   ├── index/          
│   │   │   └── index.vue   # 任务首页
│   │   ├── history/
│   │   │   └── history.vue # 历史记录
│   │   └── stats/
│   │       └── stats.vue   # 数据统计
│   │
│   └── my/                 # 个人中心
│       ├── index.vue       # 个人中心主页
│       ├── info/
│       │   └── index.vue   # 个人信息
│       └── setting/
│           └── index.vue   # 系统设置
│
├── services/               # API服务层
│   ├── book.ts             # 图书API
│   ├── bookstore.ts        # 书城API
│   ├── bookshelf.ts        # 书架API
│   ├── category.ts         # 分类API
│   ├── rank.ts             # 排行榜API
│   ├── search.ts           # 搜索API
│   ├── review.ts           # 书评API
│   ├── author.ts           # 作者API
│   ├── task.ts             # 任务API
│   ├── user.ts             # 用户API
│   ├── login.ts            # 登录API
│   └── global.ts           # 全局API
│
├── stores/                 # 状态管理
│   ├── theme.ts            # 主题管理
│   └── user.ts             # 用户状态
│
├── types/                  # TypeScript类型定义
│   ├── book.d.ts           # 图书类型
│   ├── category.d.ts       # 分类类型
│   ├── rank.d.ts           # 排行榜类型
│   ├── search.d.ts         # 搜索类型
│   ├── review.d.ts         # 书评类型
│   ├── author.d.ts         # 作者类型
│   ├── task.d.ts           # 任务类型
│   ├── user.d.ts           # 用户类型
│   ├── login.d.ts          # 登录类型
│   ├── components.d.ts     # 组件类型
│   └── global.d.ts         # 全局类型
│
├── utils/                  # 工具函数
│   ├── http.ts             # HTTP请求封装
│   ├── config.ts           # 配置文件
│   └── global.ts           # 全局工具
│
├── static/                 # 静态资源
│   ├── logo.png            # 应用Logo
│   └── tabs/               # 底部导航图标
│       ├── bookstore_*.png # 书城图标
│       ├── community_*.png # 社区图标
│       ├── category_*.png  # 分类图标
│       ├── bookshelf_*.png # 书架图标
│       └── user_*.png      # 我的图标
│
├── uni_modules/            # uni-app插件
│   ├── qiun-data-charts/   # 图表组件
│   └── uni-ui/             # UI组件库
│
├── App.vue                 # 应用入口
├── main.js                 # 主入口文件
├── pages.json              # 页面配置
├── manifest.json           # 应用配置
└── uni.scss                # 全局样式变量
```

---

## 🏃 快速开始

### 环境要求

- **HBuilderX** 3.1.0+
- **Node.js** 14.0+
- **npm** / **yarn** / **pnpm**

### 安装步骤

#### 1. 克隆项目

```bash
git clone https://gitee.com/your-username/fanqie-03-uniapp.git
cd fanqie-03-uniapp
```

#### 2. 安装依赖

```bash
# 安装 crypto-js
npm install crypto-js --save

# 或使用 pnpm
pnpm install crypto-js
```

#### 3. 安装 uni-app 插件

在 HBuilderX 中：
1. 打开项目
2. 点击菜单 `工具` -> `插件安装`
3. 搜索并安装：
   - `qiun-data-charts` (图表组件)
   - `uni-ui` (UI组件库)

#### 4. 配置后端接口

修改 `utils/config.ts` 文件：

```typescript
// 开发环境
export const baseURL = 'http://localhost:8080/api'

// 生产环境
// export const baseURL = 'https://your-api.com/api'
```

#### 5. 运行项目

**H5端运行**
```bash
# 在 HBuilderX 中点击"运行 -> 运行到浏览器"
# 或按快捷键 Ctrl + R
```

**微信小程序运行**
```bash
# 1. 配置微信小程序 appid（manifest.json）
# 2. 在 HBuilderX 中点击"运行 -> 运行到小程序模拟器 -> 微信开发者工具"
```

**App运行**
```bash
# 在 HBuilderX 中点击"运行 -> 运行到手机或模拟器"
```

---

## 📖 功能模块

### 书城模块使用说明

#### 浏览图书
1. 打开应用，默认进入任务首页
2. 点击底部导航"书城"进入书城首页
3. 浏览推荐图书、热门榜单

#### 搜索图书
1. 点击顶部搜索框
2. 输入书名或作者名
3. 查看搜索结果

#### 阅读图书
1. 点击图书封面进入详情页
2. 点击"开始阅读"按钮
3. 选择章节开始阅读

#### 收藏图书
1. 在图书详情页点击"加入书架"
2. 在"书架"标签查看收藏的图书

### 任务模块使用说明

#### 创建任务
1. 进入任务首页
2. 点击右下角"+"按钮
3. 填写任务信息
4. 点击"创建"按钮

#### 完成任务
1. 在任务列表找到待完成任务
2. 点击"完成"按钮
3. 任务状态更新为已完成

#### 查看历史
1. 点击底部导航"历史"
2. 选择日期范围
3. 点击"查询历史"按钮
4. 查看历史任务记录

#### 数据统计
1. 点击底部导航"统计"
2. 查看图表和数据分析
3. 了解任务完成情况

---

## 🎨 主题系统

### 主题列表

| 主题名称 | 主题值 | 主色调 | 适用场景 |
|---------|--------|--------|---------|
| 默认风格 | default | 紫粉渐变 | 现代活力 |
| 清新绿 | green | 绿色系 | 清新自然 |
| 彩虹风格 | orange | 彩虹渐变 | Instagram风 |
| 科技蓝 | blue | 深蓝渐变 | 科技感 |
| 梦幻粉 | pink | 粉蓝渐变 | 柔和梦幻 |
| 暗夜黑 | dark | 深色系 | 护眼夜间 |

### 切换方式

1. 进入"我的"页面
2. 点击"设置"
3. 选择"主题设置"
4. 选择喜欢的主题

---

## 🔌 API接口

### 基础配置

**Base URL**: `/api`

**请求头**:
```json
{
  "Content-Type": "application/json",
  "Authorization": "Bearer {token}"
}
```

### 主要接口

#### 1. 图书相关

```typescript
// 获取图书详情
GET /book/detail/{bookId}

// 获取章节列表
GET /book/chapters/{bookId}

// 获取章节内容
GET /book/chapter/content/{chapterId}

// 书城首页
GET /bookstore/home

// 分类图书列表
GET /bookstore/category/{categoryId}
```

#### 2. 搜索相关

```typescript
// 搜索图书
GET /search/books?keyword={keyword}

// 热门搜索
GET /search/hot

// 搜索建议
GET /search/suggest?keyword={keyword}
```

#### 3. 书架相关

```typescript
// 获取书架列表
GET /bookshelf/list

// 添加到书架
POST /bookshelf/add
Body: { bookId: number }

// 从书架移除
DELETE /bookshelf/remove/{bookId}
```

#### 4. 排行榜

```typescript
// 获取排行榜
GET /rank/list?type={type}
// type: hot(热门), new(新书), rating(好评), collect(收藏)
```

#### 5. 书评相关

```typescript
// 获取书评列表
GET /review/list/{bookId}

// 发表书评
POST /review/create
Body: ReviewData

// 点赞书评
POST /review/like/{reviewId}
```

#### 6. 任务相关

```typescript
// 获取任务列表
GET /task/list

// 添加任务
POST /task/add
Body: TaskData

// 完成任务
POST /task/complete/{taskId}

// 查询历史任务
GET /task/history?startDate={date}&endDate={date}

// 获取统计数据
GET /task/stats
```

#### 7. 用户相关

```typescript
// 用户登录
POST /user/login
Body: { account: string, password: string }

// 用户注册
POST /user/register

// 获取用户信息
GET /user/info

// 更新用户信息
PUT /user/update

// 上传头像
POST /user/avatar/upload
```

---

## 📐 开发指南

### 代码规范

#### 命名规范
- **文件名**: kebab-case (如 `book-detail.vue`)
- **组件名**: PascalCase (如 `UserCard`)
- **变量/函数**: camelCase (如 `getUserInfo`)
- **常量**: UPPER_SNAKE_CASE (如 `BASE_URL`)

#### 组件结构

```vue
<template>
  <view class="page-container">
    <!-- 页面内容 -->
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 响应式数据
const data = ref()

// 方法
const loadData = async () => {
  // 加载逻辑
}

// 生命周期
onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.page-container {
  // 样式
}
</style>
```

### Git提交规范

```bash
# 新功能
feat: 添加图书搜索功能

# Bug修复
fix: 修复章节加载失败问题

# 样式更新
style: 优化书城页面布局

# 文档更新
docs: 更新README文档

# 代码重构
refactor: 重构任务管理模块

# 性能优化
perf: 优化图表渲染性能
```

---

## 📝 更新日志

### [1.0.0] - 2025-10-30

#### ✨ 新增功能
- 📚 完整的图书阅读功能
- 💬 社区互动系统
- ✅ 任务管理模块
- 🎨 6种主题支持
- 📊 数据统计图表
- 🔍 智能搜索功能

#### 🔧 技术实现
- ✅ Vue 3 + TypeScript
- ✅ uni-app 跨平台支持
- ✅ Pinia 状态管理
- ✅ 组件化架构

#### 🎨 UI/UX
- ✨ 现代化界面设计
- ✨ 流畅的交互动画
- ✨ 响应式布局

---

## 🤝 贡献指南

### 参与贡献

1. Fork 本仓库
2. 创建功能分支 (`git checkout -b feat/your-feature`)
3. 提交代码 (`git commit -m 'feat: 添加新功能'`)
4. 推送到远程 (`git push origin feat/your-feature`)
5. 创建 Pull Request

---

## 📄 许可证

本项目采用 [MIT License](LICENSE)

---

## 🔗 相关链接

- [uni-app 官方文档](https://uniapp.dcloud.io/)
- [Vue 3 官方文档](https://cn.vuejs.org/)
- [TypeScript 官方文档](https://www.typescriptlang.org/)
- [qiun-data-charts 文档](https://www.ucharts.cn/)
- [uni-ui 组件文档](https://uniapp.dcloud.io/component/uniui/uni-ui.html)

---

## 👥 联系方式

- **Issues**: [提交问题](https://gitee.com/your-username/fanqie-03-uniapp/issues)
- **Email**: your-email@example.com

---

## 🙏 致谢

感谢以下开源项目：

- [uni-app](https://uniapp.dcloud.io/) - 跨平台开发框架
- [qiun-data-charts](https://www.ucharts.cn/) - 图表组件
- [uni-ui](https://github.com/dcloudio/uni-ui) - UI组件库
- [crypto-js](https://github.com/brix/crypto-js) - 加密库

---

<div align="center">

**如果这个项目对你有帮助，请给个 ⭐ Star 支持一下！**

Made with ❤️ by Development Team

</div>