Talebook 移动端适配：5 分钟把个人书库装进手机

Talebook 移动端适配：5 分钟把个人书库装进手机

【免费下载链接】talebook一个简单好用的个人书库项目地址: https://gitcode.com/gh_mirrors/ta/talebook

通勤路上想确认昨晚读到一半的那本书在不在库里，而书库文件都放在家里的 NAS 上。Talebook 的移动适配就是为这种场景准备的：前端基于 Nuxt 4 + Vuetify 构建，同一套页面在 6 英寸手机和桌面显示器上会切换成不同的列数、导航形态和对话框宽度，不需要单独维护一个"手机版"。

📐 同一书架，三种排布

手机上看书库列表，最直观的感受是卡片从横向一行一本，变成大屏上三列网格。这个行为写在书籍卡片的栅格属性里，位于 app/components/BookCards.vue，重点看xs/sm/md三行断点值：

<v-col v-for="(book,idx) in render_books" cols="12" xs="12" <!-- 手机：一行一本 --> sm="6" <!-- 小屏：一行两本 --> md="4" <!-- 中屏及以上：一行三本 --> class="book-list-card" >

Vuetify 的断点是按屏幕宽度自动匹配的，所以改列数不需要任何 JavaScript 判断，写死在模板属性里即可。封面图固定11/15的宽高比，保证不同尺寸的封面在小屏上不会把卡片撑变形。

🔍 手机上的搜索框去哪了

在桌面端，搜索框常驻顶栏右侧；到了手机宽度，它被移进顶栏的扩展行（#extension插槽），点"搜索"按钮时执行一段很短的逻辑：

function do_mobile_search() { if (search.value.trim() != '') { router.push('/search?name=' + search.value.trim()); } else { mobile_search.value?.focus(); } }

有内容就跳/search?name=...，没内容则只是把光标聚焦回输入框——这是个细节：手机上误点按钮不会白跳一次页面。侧边导航在AppHeader.vue里设置了mobile-breakpoint="md"，低于中屏宽度时它变成覆盖式抽屉，由左上角汉堡按钮开关，不占内容区空间。

📱 三条命令，手机上能打开

部署本身和端无关，按 docker-compose.yml 的默认配置跑起来，8080 端口同时服务桌面和手机：

git clone https://gitcode.com/gh_mirrors/ta/talebook cd talebook docker compose up -d

第一次访问会进入网页安装向导，配置书库目录和管理员账号。书库数据挂在./data卷里，之后在手机上访问的都是这一份数据，不需要做任何移动端单独的初始化。

⚙️ 两个值得注意的细节

一是最外层视口配置：app/nuxt.config.ts里写了user-scalable=no，即禁止用户手动双指缩放页面。代价是文字小的时候无法捏大，收益是阅读器、抽屉这类自带滚动的组件不会被系统缩放打断。如果觉得字小，更合理的做法是在阅读器内调字号，而不是依赖页面缩放。

二是小屏下对话框会放宽到 80% 屏宽（桌面是 50%），确认删除、填写表单一类弹窗在手机上不至于窄到换行错乱。

另外一个小技巧：如果手机里主要用来读 EPUB，可以装一个 OPDS 客户端对接 Talebook 的 OPDS 接口，阅读体验比浏览器内嵌阅读器更接近原生；网页端则负责管理、检索和推送这类重操作，各干各的。

Talebook 的移动适配本质是把"一套代码、按断点换挡"做到位，没有为手机单独开一个维护分支。想体验的话，装完 Docker 后在浏览器里把窗口压到 390px 宽，效果就等价于一部手机。

【免费下载链接】talebook一个简单好用的个人书库项目地址: https://gitcode.com/gh_mirrors/ta/talebook