105 lines
2.0 KiB
Markdown
105 lines
2.0 KiB
Markdown
# 文本阅读器 - 用户端
|
||
|
||
这是一个基于 Vue 3 + TypeScript + Vite + Vant 构建的移动端文本阅读器应用。
|
||
|
||
## 功能特性
|
||
|
||
- 📱 响应式设计，自适应各种屏幕尺寸
|
||
- 📖 流畅的文本阅读体验
|
||
- 🔍 文件搜索功能
|
||
- 🎨 多种阅读主题（白色、护眼黄、绿色、灰色、夜间模式）
|
||
- 📏 可调节字体大小和行间距
|
||
- 💾 自动保存阅读设置
|
||
- ⚡ 下拉刷新
|
||
|
||
## 技术栈
|
||
|
||
- Vue 3
|
||
- TypeScript
|
||
- Vite
|
||
- Vant 4（移动端组件库）
|
||
- Vue Router
|
||
- Pinia（状态管理）
|
||
- Axios
|
||
- Sass
|
||
|
||
## 快速开始
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
# 或
|
||
pnpm install
|
||
```
|
||
|
||
### 开发模式
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### 生产构建
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 预览生产构建
|
||
|
||
```bash
|
||
npm run preview
|
||
```
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
src/
|
||
├── api/ # API 接口
|
||
│ ├── request.ts # axios 封装
|
||
│ └── reader.ts # 阅读器相关接口
|
||
├── router/ # 路由配置
|
||
├── styles/ # 全局样式
|
||
├── views/ # 页面组件
|
||
│ ├── Home.vue # 首页（文件列表）
|
||
│ └── Reader.vue # 阅读页面
|
||
├── App.vue # 根组件
|
||
└── main.ts # 入口文件
|
||
```
|
||
|
||
## 配置说明
|
||
|
||
### API 代理配置
|
||
|
||
在 `vite.config.ts` 中配置了 API 代理：
|
||
|
||
```typescript
|
||
server: {
|
||
proxy: {
|
||
'/api': {
|
||
target: 'http://localhost:9220',
|
||
changeOrigin: true,
|
||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||
},
|
||
},
|
||
}
|
||
```
|
||
|
||
请根据实际后端服务地址修改 `target`。
|
||
|
||
## 使用说明
|
||
|
||
1. 在首页可以查看所有可用的文本文件
|
||
2. 点击文件卡片进入阅读页面
|
||
3. 在阅读页面点击右上角设置图标可以调整阅读设置
|
||
4. 支持下拉刷新文件列表
|
||
5. 支持搜索文件名或描述
|
||
|
||
## 注意事项
|
||
|
||
- 确保后端服务已启动并运行在正确的端口
|
||
- 建议使用现代浏览器以获得最佳体验
|
||
- 移动端访问时建议添加到主屏幕以获得类似原生应用的体验
|
||
|
||
|