移动开发前端应用【免费下载链接】legado-with-MD3使用 Material Design 3 全新设计的阅读 3.0项目地址https://gitcode.com/gh_mirrors/le/legado-with-MD3点击查看免费下载「阅读3.0」legado-with-MD3在 Android 客户端之外还内置了一套基于 Vue3 的 Web 端阅读器本文即以 modules/web/src/pages/bookshelf/README.md 为主体结合仓库源码完整讲解这套 Web 书架的定位、技术栈、功能实现、构建命令与调试方法。读完本文你将掌握如何在同一局域网内把电脑浏览器变成「阅读3.0」的第二块屏幕书架管理 正文阅读如何本地搭建开发环境并连接手机端联调以及 Web 端与 App 端通过 HTTP/WebSocket 通信的底层链路。一、定位打包进 App 的配套 Web 端README.md开篇就明确了本模块的定位——它是「阅读3.0」的配套 Web 端且已打包进阅读3.0不能设置 IP。这意味着它不是一个独立的云端阅读站点而是随 App 一起发布、随 App 内嵌 Web 服务一起启动的浏览器阅读界面使用前提是手机和电脑处于同一局域网然后在手机端打开 Web 服务App 内会暴露一个本地 HTTP 服务电脑浏览器访问后即可读写手机端的书架与阅读数据由于服务端就是手机上的 App 进程README.md中标注的旧在线地址alanskycn.gitee.io/vip/reader/已废弃现在全部以 App 内置服务为准。从仓库结构看Web 端源码位于 modules/web 下采用src/pages/多入口组织bookshelf/书架与source/书源编辑共用一套基础组件与 store本文聚焦书架阅读链路。二、技术栈Vue3 Vite Element Plus PiniaREADME.md明确说明本程序使用Vue3开发。结合 modules/web/package.json 可以还原出完整的工程化技术栈领域技术选型版本要求框架Vue 3vue^3.5.12Node20、pnpm9构建Vitevite^5.4.8vue-tsc类型检查—UI 组件库Element Pluselement-plus2.8.5锁定版本—状态管理Piniapinia^2.2.4—路由vue-routervue-router^4.4.5Hash 模式—HTTP / 实时通信axios 原生 WebSocket—滚动列表vue3-virtual-scroll-list虚拟滚动—快捷键hotkeys-js—代码规范ESLint 9 Prettier eslint-plugin-vue—工具函数vueuse/core、vueuse/shared—脚本定义package.json的scripts字段与 README 中给出的命令一一对应dev: vite, build: run-p type-check \build-only {}\ -- node ./scripts/sync.js, type-check: vue-tsc --build --force, lint:fix: eslint . --fix, format: prettier --write src/可见pnpm build实际会先并行执行类型检查与 Vite 构建build-only最后再跑 modules/web/scripts/sync.js 做产物同步。三、功能特性与源码印证README.md列出 6 项核心特性下面逐项对应到源码说明它们是如何实现的。1. 本地存储阅读记录与设置书架页与阅读页会把「最近阅读」、章节位置等数据写入浏览器本地存储保证刷新、误关后不丢阅读现场书架页toDetail()在跳转前把书籍信息写入sessionStoragebookUrl/bookName/bookAuthor/chapterIndex/chapterPos/isSeachBook并把最近阅读对象写入localStorage见 modules/web/src/views/BookShelf.vue阅读页对store.readingBook做深度 watch每次翻章同步更新localStorage(readingRecent)与sessionStorage见 modules/web/src/views/BookChapter.vue书架页onMounted时从localStorage恢复「最近阅读」记录见 modules/web/src/views/BookShelf.vue。同时store.saveBookProgress()会把进度同步回 App 端常规场景走 HTTPPOST saveBookProgress为应对「直接关闭浏览器时 http 请求可能被取消」的问题专门实现了saveBookProgressWithBeacon()使用navigator.sendBeacon可靠发送进度见 modules/web/src/api/api.ts 与 modules/web/src/store/bookStore.ts。阅读页还通过useThrottleFn做了60 秒节流的定时进度保存并在visibilitychange切后台、关标签页时立即保存一次。2. 阅读主题切换与夜间模式阅读主题定义在 modules/web/src/config/themeConfig.ts内置 7 套主题下标 06每套包含body / content / popup三组配色其中body_*、content_*直接引用 modules/web/src/assets/imgs/themes 下的纹理图。夜间模式的判定逻辑在 modules/web/src/store/bookStore.tstheme: state state.config.theme, isNight: state state.config.theme 6,即主题下标 6 就是夜间主题。main.js中通过 watch 该状态在document.documentElement上增删darkclass从而同步 Element Plus 的暗色变量见 modules/web/src/pages/bookshelf/main.js。书架页与章节页也各自根据isNight切换 SCSS 中的.night样式背景色、边框、弹窗阴影等实现全界面夜间化。3. 字号、字体与阅读宽度调节阅读配置项webReadConfig在 modules/web/src/web.d.ts 中有完整类型定义包含theme / font / fontSize / readWidth / infiniteLoading / customFontName / jumpDuration / autoPage / autoPageSpeed / spacing(paragraph/line/letter)。默认值集中在 modules/web/src/store/bookStore.tsconst default_config: webReadConfig { theme: 0, // 主题下标 font: 0, // 内置字体下标 fontSize: 18, // 正文字号px readWidth: 800, // 阅读宽度含 padding infiniteLoading: false, // 无限加载 customFontName: , // 自定义字体名 jumpDuration: 1000, // 翻页动画时长ms autoPage: false, // 自动翻页 autoPageSpeed: 10, // 自动翻页速度秒/页 spacing: { paragraph: 1, line: 0.8, letter: 0 }, // 段落/行距/字距 }字号fontSize以 px 为单位参与渲染ReadSettings.vue中的-/按钮直接修改该值字体内置 3 组字体族微软雅黑/苹方、苹方/宋体、楷体定义在themeConfig.ts的fonts数组当config.font 0时取内置字体否则使用用户输入的customFontName支持输入本机已装字体名或从网络下载字体见 modules/web/src/views/BookChapter.vue 与 modules/web/src/components/ReadSettings.vue阅读宽度readWidth默认 800px章节容器按该值渲染页面还带宽度自适应修正——小于 776px 视口时切换为移动端「miniInterface」全宽布局PC 端宽度低于 640px 会被抬升到 640px超出窗口则自动回缩 160px见 modules/web/src/views/BookChapter.vue。此外webReadConfig还包含infiniteLoading无限滚动加载章节、jumpDuration方向键翻页动画时长与autoPage / autoPageSpeed自动翻页速度默认 10 秒/页、范围 1120 秒非法值回落到 10见 modules/web/src/views/BookChapter.vue这些都是 README 之外、由源码体现的扩展能力。四、构建与使用README.md给出的完整命令如下在modules/web目录下执行pnpm install #安装项目 pnpm dev #开发模式 pnpm build #打包 pnpm lint:fix #格式化代码补充说明依据package.json环境要求node 20、pnpm 9engines字段pnpm dev等价于执行vite启动本地开发服务器pnpm build会先执行vue-tsc --build --force类型检查通过后再 Vite 打包最后运行scripts/sync.js同步产物pnpm lint:fix使用 ESLint 9 自动修复代码规范问题另有pnpm formatPrettier与pnpm preview预览构建产物两个辅助脚本。五、调试连接手机端联调README.md提示「调试的时候可以修改.env.development里面的地址连接手机端调试。」结合源码可以还原出完整的地址解析优先级见 modules/web/src/api/axios.tsbaseURL: import.meta.env.VITE_API || localStorage.getItem(baseURL_localStorage_key) || location.origin,即 Web 端后端地址按以下顺序确定环境变量VITE_API即.env.development中配置的值本地开发时指向手机 App 的 Web 服务地址如http://192.168.x.x:9527localStorage中的remoteUrl键在书架页「基本设定 → 连接状态」弹窗中手动输入并保存的后端地址校验规则见 modules/web/src/views/BookShelf.vue支持局域网地址与内网穿透地址location.origin生产打包后Web 端由 App 内嵌服务同源托管直接访问当前源即可。BookShelf.vue的连接设置逻辑还做了细节处理若填入的地址恰好等于当前页面源则移除remoteUrl缓存回退到同源访问否则写入缓存输入时会先通过getReadConfig校验连通性成功后才应用新地址。六、Web 端与 App 端的通信链路Web 书架本身不存储书籍数据所有书架、目录、正文都来自手机 App。前端 API 封装集中在 modules/web/src/api/api.ts链路如下HTTP 接口书架、目录、正文、配置Web 端方法App 端接口作用getBookShelf()GET getBookshelf获取书架书籍列表getChapterList(bookUrl)GET getChapterList?url...获取某书目录getBookContent(bookUrl, index)GET getBookContent?url...index...获取指定章节正文getReadConfig()/saveReadConfig()getReadConfig/POST saveReadConfig读取/保存阅读配置saveBookProgress()POST saveBookProgress保存阅读进度saveBookProgressWithBeacon()navigator.sendBeacon发送关闭页面时可靠保存进度saveBook(book)/deleteBook(book)POST saveBook / deleteBook加书/删书getProxyCoverUrl()/getProxyImageUrl()/cover?path、/image?pathurlwidth图片代理绕过防盗链App 端对应路由与实现位于 app/src/main/java/io/legado/app/api/ReaderProvider.kt 与 app/src/main/java/io/legado/app/api/controller/BookController.kt。以getChapterList为例先从本地数据库BookChapterDao.getChapterList(bookUrl)读目录若为空则调用refreshToc()触发目录刷新本地书走LocalBook.getChapterList网络书走WebBook.getChapterListAwait抓取书源目录并落库getBookContent则优先读取本地已缓存章节否则通过WebBook.getContentAwait按书源实时抓取并经过ContentProcessor处理后返回。WebSocket 接口在线搜索书籍搜索采用 WebSocket 实时推送结果search()会连接searchBook端点onopen时发送{key:搜索词}逐条接收SeachBook结果直到onclose见 modules/web/src/api/api.ts。书源调试bookSourceDebug/rssSourceDebug也走同样的 WebSocket 通道。入口地址通过setApiEntryPoint()统一设置见 modules/web/src/api/api.ts。七、页面结构与阅读流程Web 端书架是一个多页面应用路由定义在 modules/web/src/router/bookRouter.ts采用Hash 模式路由共两条路由路径名称组件/shelfBookShelf.vue书架页/chapterchapterBookChapter.vue阅读页入口 modules/web/src/pages/bookshelf/main.js 依次完成创建 Vue 应用 → 挂载 Pinia store → 挂载书架路由 → 挂载到#app。书架页BookShelf.vue核心流程onMounted→loadShelf()先loadWebConfig()拉取 App 端阅读配置再saveBookProgress()兜底保存上次进度最后loadBookShelf()拉取书架见 modules/web/src/store/bookStore.ts书架数据按durChapterTime倒序排列且已拉取过时直接复用内存缓存避免重复请求搜索框回车触发searchBook()经 WebSocket 在线搜索命中结果自动加入searchBooks点击书籍 → 若是搜索结果先API.saveBook()入书架 → 把书籍与章节位置写入 sessionStorage → 跳转/chapter。阅读页BookChapter.vue核心流程从 sessionStorage 恢复书籍与章节位置loadWebCatalog()拉取目录getContent(chapterIndex)请求正文正文按\n切分为段落数组渲染并会把正文里的img src...重写为image?urlbookUrlpathsrc代理地址见 modules/web/src/views/BookChapter.vue配合 App 端getImg接口BookController.kt完成防盗链图片加载支持顶部工具栏目录/设置/书架/顶部/底部、左右侧翻章按钮、方向键翻页ArrowUp/Down按jumpDuration平滑滚动ArrowLeft/Right切章、IntersectionObserver无限加载、自动翻页requestAnimationFrame驱动弹窗打开或用户滚轮/触摸时暂停停止操作 3 秒后恢复章节切换、进度变化时通过 60 秒节流 visibilitychange Beacon 三重机制把进度回写 App 端。八、响应式与扩展Web 端针对窄屏max-width: 750px的书架页样式、max-width: 776px的阅读页样式做了完整适配侧栏收起、工具栏变为顶部/底部通栏、正文全宽显示宽度临界点 776px 与 App 端「阅读宽度 左右工具栏68px 52px」的布局约束一致最小可阅读宽度为 640px见 modules/web/src/views/BookChapter.vue 的注释与checkPageWidth。此外Web 端还支持 Xbox 手柄操作initXboxGamepad映射目录开关按键见 modules/web/src/utils/xboxGamepad.ts这是 README 未提及、但源码中实际存在的输入扩展。九、小结「阅读3.0」的 Web 端书架是一个典型的「浏览器客户端 App 服务端」局域网阅读方案前端由 Vue3 Vite Element Plus Pinia 构建通过 HTTP 读写书架/目录/正文/进度、通过 WebSocket 进行实时搜索与调试把手机上的全部阅读能力镜像到了电脑浏览器。开发调试时只需在.env.development中配置VITE_API指向手机端 Web 服务地址或直接在页面「连接状态」弹窗中填写局域网/内网穿透地址即可实现完整的双端联调。相关阅读模块总览、书架路由定义、阅读配置类型、App 端接口控制器。赞分享移动开发前端应用【免费下载链接】legado-with-MD3使用 Material Design 3 全新设计的阅读 3.0项目地址https://gitcode.com/gh_mirrors/le/legado-with-MD3点击查看免费下载相关推荐10 分钟装好的网盘直链下载器从安装到批量提速完整指南10 分钟装好的网盘直链下载器从安装到批量提速完整指南 同事把一份 2GB 的文档以百度网盘分享链接发给你开官方客户端排队要二十分钟装好 LinkSwif移动开发前端应用palera1n 实战A8–A11 老设备越狱操作手册palera1n 实战A8–A11 老设备越狱操作手册 palera1n 是面向 A8–A11 芯片与 T2 芯片设备、支持 iOS 15.0 及以上版本的移动开发前端应用hyperdx 搜索结果表行选择交互优化基于 hover 渐显复选框的完整设计与源码解析hyperdx 搜索结果表行选择交互优化基于 hover 渐显复选框的完整设计与源码解析 本篇文章围绕 hyperdx 仓库中的变更集changeset文移动开发前端应用上一篇Flink CDC 版本迁移实战指南6 步完成 2.x 到 3.x 平滑升级的完整避坑清单下一篇tsParticles 调色板指南用 particles.palette 一个字符串为粒子批量注入配色方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考