# 狐阅

**Repository Path**: hu-yuanbiao/fox-reading

## Basic Information

- **Project Name**: 狐阅
- **Description**: 1.狐阅移动端在线图文阅读，核心功能是找书和看书，简化而不失高格的用户搜索&分类&书阁海选等流程的复杂程度。
2.绝佳视觉效果，高亮文本与图文镶嵌，并且用户群体以青年人为主即主要是网文而非严肃文学，相比传统阅读本项目优势显著。
3.新趋势同人文&图文小说，创作大神作者坐镇，你想要的书籍这都有。热力推荐作者创作网文。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2022-12-01
- **Last Updated**: 2025-08-28

## Categories & Tags

**Categories**: mobile-app

**Tags**: Pinia, Vuex, Vue

## README

# 狐阅

## 项目介绍

<ul>
    <li>
        狐阅移动端在线图文阅读，核心功能是找书和看书，简化而不失高格的用户搜索&分类&书阁海选等流程的复杂程度。
    </li>
    <li>
        绝佳视觉效果，高亮文本与图文镶嵌，并且用户群体以青年人为主即主要是网文而非严肃文学，相比传统阅读本项目优势显著。
    </li>
    <li>
        新趋势同人文&图文小说，创作大神作者坐镇，你想要的书籍这都有。热力推荐作者创作网文。
    </li>
</ul>

## 系统架构

<img src='./狐阅.png' />

## 功能介绍

### 引导页&登录页

<code>
首次进入 => 引导页 => 轮播图(跳过按钮) => 登录页 => 书阁页
</code>

<div>
    <img src="./effect/引导页和登录页/anigif.gif" />
</div>
<div>
    <img src="./effect/引导页和登录页/引导页和登录页%20(5).png" width="100" />
    <img src="./effect/引导页和登录页/引导页和登录页%20(6).png" width="100" />
    <img src="./effect/引导页和登录页/引导页和登录页%20(1).png" width="100" />
    <img src="./effect/引导页和登录页/引导页和登录页%20(2).png" width="100" />
    <img src="./effect/引导页和登录页/引导页和登录页%20(3).png" width="100" />
    <img src="./effect/引导页和登录页/引导页和登录页%20(4).png" width="100" />
</div>

### 我的页和个人中心

<code>书阁页 => 侧边个人中心 => 充值页面-充值狐豆 => 回到个人中心-展示充值成果 => 签到页-签到领狐币-兑换狐豆 => 回到个人中心-展示签到和兑换成果 => 作者专区页 => 展示作者专区 =>回到个人中心(退出登录) => 登录页</code>

<div>
    <img src="./effect/我的页和个人中心页/anigif.gif" />
</div>
<div>
    <img src="./effect/我的页和个人中心页/我的页和个人中心页%20(10).png" width="100" />
    <img src="./effect/我的页和个人中心页/我的页和个人中心页%20(11).png" width="100" />
    <img src="./effect/我的页和个人中心页/我的页和个人中心页%20(12).png" width="100" />
    <img src="./effect/我的页和个人中心页/我的页和个人中心页%20(13).png" width="100" />
    <img src="./effect/我的页和个人中心页/我的页和个人中心页%20(14).png" width="100" />
    <img src="./effect/我的页和个人中心页/我的页和个人中心页%20(15).png" width="100" />
    <img src="./effect/我的页和个人中心页/我的页和个人中心页%20(16).png" width="100" />
    <img src="./effect/我的页和个人中心页/我的页和个人中心页%20(1).png" width="100" />
    <img src="./effect/我的页和个人中心页/我的页和个人中心页%20(2).png" width="100" />
    <img src="./effect/我的页和个人中心页/我的页和个人中心页%20(3).png" width="100" />
    <img src="./effect/我的页和个人中心页/我的页和个人中心页%20(4).png" width="100" />
    <img src="./effect/我的页和个人中心页/我的页和个人中心页%20(5).png" width="100" />
    <img src="./effect/我的页和个人中心页/我的页和个人中心页%20(6).png" width="100" />
    <img src="./effect/我的页和个人中心页/我的页和个人中心页%20(7).png" width="100" />
    <img src="./effect/我的页和个人中心页/我的页和个人中心页%20(8).png" width="100" />
    <img src="./effect/我的页和个人中心页/我的页和个人中心页%20(9).png" width="100" />
</div>

### 书籍详情

<code>书籍页 => 加入书架 => 取消书架 => 分享书籍 =>评论区功能-查看-评论-发表 => 订阅下载章节 => 打赏礼物</code>


<div>
    <img src="./effect/书籍详情页/anigif.gif" />
</div>
<div>
    <img src="./effect/书籍详情页/书籍详情页%20(10).png" width="100" />
    <img src="./effect/书籍详情页/书籍详情页%20(11).png" width="100" />
    <img src="./effect/书籍详情页/书籍详情页%20(12).png" width="100" />
    <img src="./effect/书籍详情页/书籍详情页%20(13).png" width="100" />
    <img src="./effect/书籍详情页/书籍详情页%20(14).png" width="100" />
    <img src="./effect/书籍详情页/书籍详情页%20(15).png" width="100" />
    <img src="./effect/书籍详情页/书籍详情页%20(16).png" width="100" />
    <img src="./effect/书籍详情页/书籍详情页%20(1).png" width="100" />
    <img src="./effect/书籍详情页/书籍详情页%20(2).png" width="100" />
    <img src="./effect/书籍详情页/书籍详情页%20(3).png" width="100" />
    <img src="./effect/书籍详情页/书籍详情页%20(7).png" width="100" />
    <img src="./effect/书籍详情页/书籍详情页%20(8).png" width="100" />
    <img src="./effect/书籍详情页/书籍详情页%20(9).png" width="100" />
    <img src="./effect/书籍详情页/书籍详情页%20(4).png" width="100" />
    <img src="./effect/书籍详情页/书籍详情页%20(5).png" width="100" />
    <img src="./effect/书籍详情页/书籍详情页%20(6).png" width="100" />
</div>

### 书城页

<code>书城页 => 轮播图展示 => 各区书籍展示-金刚区以下</code>

<div>
    <img src="./effect/书城页/anigif.gif" />
</div>
<div>
    <img src="./effect/书城页/书城页%20(1).png" width="100" />
    <img src="./effect/书城页/书城页%20(2).png" width="100" />
    <img src="./effect/书城页/书城页%20(3).png" width="100" />
    <img src="./effect/书城页/书城页%20(4).png" width="100" />
    <img src="./effect/书城页/书城页%20(5).png" width="100" />
    <img src="./effect/书城页/书城页%20(6).png" width="100" />
</div>

### 阅读页

<code>书籍详情页-立即阅读 => 阅读页 => 切换下一章 => 调节亮度 => 往下阅读查看进度功能 => 字体主体字号调节 => 订阅下载章节(目录内可以查看下载章节的图标) => 自动订阅下一章(目录内可以查看已经自动订阅并缓存的下一章) => 添加标签 => 查看所有标签 => 切换其他章节-打开标签栏实现标签跳转 => 投票 => 查看评论 => 发表章评 </code>

<div>
    <img src="./effect/阅读页/anigif.gif" />
</div>
<div>
    <img src="./effect/阅读页/阅读页%20(3).png"  width="100" />
    <img src="./effect/阅读页/阅读页%20(4).png"  width="100" />
    <img src="./effect/阅读页/阅读页%20(5).png"  width="100" />
    <img src="./effect/阅读页/阅读页%20(6).png"  width="100" />
    <img src="./effect/阅读页/阅读页%20(7).png"  width="100" />
    <img src="./effect/阅读页/阅读页%20(8).png"  width="100" />
    <img src="./effect/阅读页/阅读页%20(9).png"  width="100" />
    <img src="./effect/阅读页/阅读页%20(10).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(11).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(12).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(13).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(14).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(15).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(16).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(2).png"  width="100" />
    <img src="./effect/阅读页/阅读页%20(17).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(18).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(19).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(20).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(21).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(22).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(23).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(24).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(25).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(26).png" width="100"  />
    <img src="./effect/阅读页/阅读页%20(1).png"  width="100" />
</div>

#### 支付下一章&会员特权图文镶嵌

<div><img src="./effect/阅读页/anigif2.gif" /></div>
<div>
    <img src="./effect/阅读页/支付下一章与会员特权图文镶嵌%20(2).png" width="100"/>
    <img src="./effect/阅读页/支付下一章与会员特权图文镶嵌%20(3).png" width="100"/>
    <img src="./effect/阅读页/支付下一章与会员特权图文镶嵌%20(4).png" width="100"/>
    <img src="./effect/阅读页/支付下一章与会员特权图文镶嵌%20(5).png" width="100"/>
    <img src="./effect/阅读页/支付下一章与会员特权图文镶嵌%20(6).png" width="100"/>
    <img src="./effect/阅读页/支付下一章与会员特权图文镶嵌%20(7).png" width="100"/>
    <img src="./effect/阅读页/支付下一章与会员特权图文镶嵌%20(8).png" width="100"/>
    <img src="./effect/阅读页/支付下一章与会员特权图文镶嵌%20(1).png" width="100"/>
</div>

### 书阁页

<div>
    <img src="./effect/书阁页/anigif.gif" />
</div>
<div>
    <img src="./effect/书阁页/书阁页%20(1).png" width="100" />
    <img src="./effect/书阁页/书阁页%20(2).png" width="100" />
    <img src="./effect/书阁页/书阁页%20(3).png" width="100" />
    <img src="./effect/书阁页/书阁页%20(4).png" width="100" />
    <img src="./effect/书阁页/书阁页%20(5).png" width="100" />
    <img src="./effect/书阁页/书阁页%20(6).png" width="100" />
    <img src="./effect/书阁页/书阁页%20(7).png" width="100" />
</div>

### 狐惠页

<div>
    <img src="./effect/狐惠页/anigif.gif" />
</div>
<div>
    <img src="./effect/狐惠页/狐惠页%20(2).png" width="100" />
    <img src="./effect/狐惠页/狐惠页%20(3).png" width="100" />
    <img src="./effect/狐惠页/狐惠页%20(4).png" width="100" />
    <img src="./effect/狐惠页/狐惠页%20(5).png" width="100" />
    <img src="./effect/狐惠页/狐惠页%20(6).png" width="100" />
    <img src="./effect/狐惠页/狐惠页%20(7).png" width="100" />
    <img src="./effect/狐惠页/狐惠页%20(8).png" width="100" />
    <img src="./effect/狐惠页/狐惠页%20(9).png" width="100" />
    <img src="./effect/狐惠页/狐惠页%20(10).png" width="100" />
    <img src="./effect/狐惠页/狐惠页%20(1).png" width="100" />
</div>





### 书架页

<div>
    <img src="./effect/书架页/anigif.gif"/>
</div>
<div>
    <img src="./effect/书架页/书架页%20(18).png" width="100" />
    <img src="./effect/书架页/书架页%20(19).png" width="100" />
    <img src="./effect/书架页/书架页%20(20).png" width="100" />
    <img src="./effect/书架页/书架页%20(21).png" width="100" />
    <img src="./effect/书架页/书架页%20(22).png" width="100" />
    <img src="./effect/书架页/书架页%20(23).png" width="100" />
    <img src="./effect/书架页/书架页%20(24).png" width="100" />
    <img src="./effect/书架页/书架页%20(1).png" width="100" />
    <img src="./effect/书架页/书架页%20(2).png" width="100" />
    <img src="./effect/书架页/书架页%20(3).png" width="100" />
    <img src="./effect/书架页/书架页%20(4).png" width="100" />
    <img src="./effect/书架页/书架页%20(5).png" width="100" />
    <img src="./effect/书架页/书架页%20(6).png" width="100" />
    <img src="./effect/书架页/书架页%20(7).png" width="100" />
    <img src="./effect/书架页/书架页%20(8).png" width="100" />
    <img src="./effect/书架页/书架页%20(9).png" width="100" />
    <img src="./effect/书架页/书架页%20(10).png" width="100" />
    <img src="./effect/书架页/书架页%20(11).png" width="100" />
    <img src="./effect/书架页/书架页%20(12).png" width="100" />
    <img src="./effect/书架页/书架页%20(13).png" width="100" />
    <img src="./effect/书架页/书架页%20(14).png" width="100" />
    <img src="./effect/书架页/书架页%20(15).png" width="100" />
    <img src="./effect/书架页/书架页%20(16).png" width="100" />
    <img src="./effect/书架页/书架页%20(17).png" width="100" />
</div>


### 分类页&搜索页&排行榜页&完本页

<div>
    <img src="./effect/分类页和搜索页和排行版页和完本页/anigif.gif"/>
</div>
<div>
    <img src="./effect/分类页和搜索页和排行版页和完本页/分类页和搜索页和排行榜页和完本页%20(8).png" width="100" />
    <img src="./effect/分类页和搜索页和排行版页和完本页/分类页和搜索页和排行榜页和完本页%20(9).png" width="100" />
    <img src="./effect/分类页和搜索页和排行版页和完本页/分类页和搜索页和排行榜页和完本页%20(10).png" width="100" />
    <img src="./effect/分类页和搜索页和排行版页和完本页/分类页和搜索页和排行榜页和完本页%20(11).png" width="100" />
    <img src="./effect/分类页和搜索页和排行版页和完本页/分类页和搜索页和排行榜页和完本页%20(12).png" width="100" />
    <img src="./effect/分类页和搜索页和排行版页和完本页/分类页和搜索页和排行榜页和完本页%20(13).png" width="100" />
    <img src="./effect/分类页和搜索页和排行版页和完本页/分类页和搜索页和排行榜页和完本页%20(14).png" width="100" />
    <img src="./effect/分类页和搜索页和排行版页和完本页/分类页和搜索页和排行榜页和完本页%20(1).png" width="100" />
    <img src="./effect/分类页和搜索页和排行版页和完本页/分类页和搜索页和排行榜页和完本页%20(2).png" width="100" />
    <img src="./effect/分类页和搜索页和排行版页和完本页/分类页和搜索页和排行榜页和完本页%20(3).png" width="100" />
    <img src="./effect/分类页和搜索页和排行版页和完本页/分类页和搜索页和排行榜页和完本页%20(4).png" width="100" />
    <img src="./effect/分类页和搜索页和排行版页和完本页/分类页和搜索页和排行榜页和完本页%20(5).png" width="100" />
    <img src="./effect/分类页和搜索页和排行版页和完本页/分类页和搜索页和排行榜页和完本页%20(6).png" width="100" />
    <img src="./effect/分类页和搜索页和排行版页和完本页/分类页和搜索页和排行榜页和完本页%20(7).png" width="100" />
</div>


## 实现过程

<ol>
    <li>寻找项目设计图，寻找满足需求的ui，上百度。</li>
    <li>订好大致架构，去下载超过15款的小说软件进行对比分析并抓包。</li>
    <li>总结各大小说的利弊，权衡下制定好计划。</li>
    <li>整理所有接口，ps工具切好所有psd，做好所有准备。</li>
    <li>严肃按照计划执行，使用vue3+pinia+vant进行开发。</li>
    <li>费时近两周完成项目，达到预期90%，未实现：场景音。实现简述：图文镶嵌，第一印象海选书籍</li>
    <li>规定时间两周内结束，剩下时间轰炸测试项目bug。</li>
    <li>收尾，刚好两周完成项目，结束开发。</li>
</ol>


## 使用到的技术

1. vue3
    - 功能块
    - 组合式api
    - 渐进式 JavaScript 框架
    - 完全响应式的渲染系统
    - 单文件组件 (也被称为 *.vue 文件，英文 Single-File Components，缩写为 SFC)

2. router4
    - 模块化、基于组件的路由配置
    - 自动激活 CSS 类的链接
    - 命名路由传参方式
    - 动态路由选择
    - 路由懒加载方式

3. pinia
    - 极轻 每个Pinia 约 1kb，您甚至会忘记它的存在！
    - 构建多个 Store 并让您的捆绑程序代码自动拆分它们。
    - 响应存储更改以通过事务、本地存储同步等扩展 Pinia。
    - store 就像组件一样熟悉。API 旨在让您编写组织良好的 store。

4. axios
    - 支持 Promise API
    - 拦截请求和响应

5. vant3
    - 🚀 个高质量组件，覆盖移动端60%场景
    - 🚀 性能极佳，组件平均体积小
    - 🍭 按需引入

6. vue-cli
    - 一个丰富的官方插件集合，集成了前端生态中最好的工具。
    - 一套完全图形化的创建和管理 Vue.js 项目的用户界面。