移动端使用体验：随时随地管理书签

在手机使用时间超过电脑的今天，一款书签管理工具如果只在桌面端好用，那就缺失了一半的使用场景。MarkStackAI 从设计之初就采用响应式布局，确保在手机、平板和桌面上都能提供流畅的使用体验。本文详细介绍各个功能模块在移动端的适配策略和交互细节。

响应式设计方法论

MarkStackAI 的响应式设计基于移动优先的断点体系，核心断点为 768px（平板/手机分界）和 480px（小屏手机）。CSS 使用 @media (max-width: 768px) 媒体查询，在关键断点处调整布局模式，而不是简单地缩小元素。

设计原则是：移动端不是桌面端的缩水版，而是为触控交互优化的独立体验。每个组件在移动端都经过重新思考——哪些信息是必须的、哪些可以折叠、哪些交互方式需要调整。

侧边栏：从固定面板到抽屉式导航

桌面端的侧边栏是一个固定在左侧的 240px 宽面板，始终可见。在 768px 以下的屏幕上，侧边栏变身为抽屉式导航：

• 默认隐藏，通过顶部导航栏的汉堡菜单按钮触发
• 从左侧滑入，覆盖在主内容之上
• 背后添加半透明的 backdrop 遮罩层，点击遮罩即可关闭
• 切换路由时自动收起，点击菜单项后不需要手动关闭
• 滑入滑出带有 CSS transition 动画，过渡自然流畅

目录树在移动端保持完整功能，包括展开/折叠、拖拽排序和右键菜单。展开状态通过 Pinia store 持久化，切换页面后回到书签页时目录树保持之前的展开状态。

触控友好的交互设计

桌面端很多交互依赖 hover 状态，这在触控设备上是不存在的。MarkStackAI 在移动端做了系统性的交互调整：

用户菜单：从 hover 到 click

顶部导航栏的用户菜单在桌面端通过鼠标悬停展开。在移动端，这个行为改为点击触发。点击头像区域打开下拉菜单，再次点击或点击页面其他区域关闭。这个改动确保触控设备用户能可靠地访问用户设置、主题切换和退出登录功能。

按钮和点击区域

移动端的所有可点击元素都确保最小触控区域为 44x44 像素（Apple Human Interface Guidelines 推荐值）。工具栏按钮在移动端隐藏文字标签，只显示图标，节省宝贵的横向空间，同时通过增大图标尺寸保证可点击性。

长按与右键菜单

桌面端的右键上下文菜单在移动端通过长按触发。书签卡片、目录节点等元素支持长按 500ms 后弹出操作菜单，提供编辑、删除、移动、分享等快捷操作。

书签视图的移动端布局

书签主页面提供网格视图和列表视图两种模式，两者在移动端都做了适配：

网格视图

桌面端的网格使用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，在宽屏上可以显示 3-4 列。移动端 768px 以下自动变为 2 列，480px 以下变为单列。书签卡片的内边距和字号适当缩小，但保留完整的信息展示：favicon、标题、URL、健康状态标志。

列表视图

列表视图在移动端更加紧凑。每行书签的操作按钮（编辑、删除、置顶）在桌面端水平排列，在移动端改为垂直排列的三点菜单，点击展开操作选项。批量选择模式的 checkbox 在移动端显示在每行左侧，选中后底部弹出固定的批量操作栏。

笔记系统：三栏变两栏

桌面端的笔记页面采用经典的三栏布局：左侧笔记本列表、中间笔记列表、右侧编辑器/预览。在 768px 以下的屏幕上，这个布局重组为上下两栏：

• 笔记本目录隐藏：通过顶部的下拉选择器切换笔记本，而不是占用屏幕空间显示目录列表
• 笔记列表在上：显示当前笔记本下的笔记标题列表，点击某条笔记进入编辑状态
• 编辑器在下：Markdown 编辑器和预览区域占据剩余空间，工具栏精简为最常用的格式按钮

编辑笔记时，可以通过返回按钮回到笔记列表。整个流程模拟了移动端常见的"列表 → 详情"导航模式，用户无需学习即可上手。

链接检测页面的移动端适配

健康检测页面在桌面端顶部有四个统计卡片（总数、有效、无效、待检测），在移动端改为 2x2 网格布局，四个卡片各占一半宽度。

检测结果列表在桌面端每行显示 URL、状态码、响应时间、上次检测时间等信息，横向排列。移动端将每行改为纵向堆叠的卡片样式：URL 在第一行，状态和响应时间在第二行，最后检测时间在第三行。这样即使在 320px 宽的屏幕上也不会出现横向滚动。

批量选择功能在移动端同样可用。checkbox 显示在每张卡片的左上角，选中后底部弹出操作栏，提供批量删除和批量重新检测两个操作。

管理后台：表格变卡片

AdminView 的用户管理在桌面端使用传统的数据表格展示用户列表（用户名、角色、创建时间、操作）。表格在窄屏上非常难用——列会被挤压或出现横滚。

MarkStackAI 的方案是在移动端完全隐藏表头，将每行数据渲染为一张独立的卡片。每张卡片以 key-value 形式纵向展示所有字段，操作按钮排列在卡片底部。这种"表格 → 卡片"的转换是响应式数据展示的最佳实践之一。

公开导航页的移动端展示

公开导航页（/public）面向所有访客，移动端体验尤为重要。在移动端：

• 分类侧栏变为顶部水平滚动的标签栏，可以左右滑动切换分类
• 书签网格在 768px 下变为双列，480px 下变为单列
• 搜索框全屏展开覆盖式搜索，与桌面端的 overlay 搜索体验一致
• 世界时钟和金融行情区块改为水平滚动卡片，手指左右滑动浏览
• 文章列表卡片单列满宽显示，点击展开阅读全文

搜索体验

全局搜索是移动端使用频率最高的功能之一。MarkStackAI 的搜索覆盖层（Search Overlay）在移动端做了专门优化：

• 搜索框占据顶部全宽，输入法弹出后自动调整布局
• 搜索结果列表支持触控滚动，每条结果的点击区域足够大
• 键盘快捷键根据平台自动适配：Mac 显示 Cmd+K，其他平台显示 Ctrl+K。虽然手机上没有物理键盘快捷键，但搜索入口在顶部导航栏始终可见
• 搜索过程中输入防抖 300ms，避免每次按键都触发请求

跨平台快捷键适配

虽然移动端主要依赖触控操作，但 MarkStackAI 在所有涉及键盘快捷键的 UI 元素上都做了平台适配。系统在 <script> 中预计算 isMac 常量（基于 navigator.userAgent 检测），然后在模板中根据平台显示不同的快捷键提示。这确保了外接键盘的 iPad 用户也能获得正确的提示信息。

// 平台检测（在 script setup 中执行一次）
const isMac = /Mac|iPhone|iPad/.test(navigator.userAgent)

// 模板中使用
<kbd>{{ isMac ? '⌘' : 'Ctrl' }}+K</kbd>

移动端适配不是事后的补丁，而是设计过程中的核心考量。MarkStackAI 的每一个页面都在 iPhone SE（375px）、iPhone 14（390px）、iPad（768px）和桌面（1440px）四个断点上做过验证，确保布局合理、交互流畅、信息完整。