AgileBoot-Mobile/README.md

文本阅读器 - 用户端

这是一个基于 Vue 3 + TypeScript + Vite + Vant 构建的移动端文本阅读器应用。

功能特性

• 📱 响应式设计，自适应各种屏幕尺寸
• 📖 流畅的文本阅读体验
• 🔍 文件搜索功能
• 🎨 多种阅读主题（白色、护眼黄、绿色、灰色、夜间模式）
• 📏 可调节字体大小和行间距
• 💾 自动保存阅读设置
• ⚡ 下拉刷新

技术栈

• Vue 3
• TypeScript
• Vite
• Vant 4（移动端组件库）
• Vue Router
• Pinia（状态管理）
• Axios
• Sass

快速开始

安装依赖

npm install
# 或
pnpm install

开发模式

npm run dev

生产构建

npm run build

预览生产构建

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 代理：

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:9220',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),
    },
  },
}

请根据实际后端服务地址修改 target。

使用说明

1. 在首页可以查看所有可用的文本文件
2. 点击文件卡片进入阅读页面
3. 在阅读页面点击右上角设置图标可以调整阅读设置
4. 支持下拉刷新文件列表
5. 支持搜索文件名或描述

注意事项

• 确保后端服务已启动并运行在正确的端口
• 建议使用现代浏览器以获得最佳体验
• 移动端访问时建议添加到主屏幕以获得类似原生应用的体验