提拉米线

使用指南 ​

在线使用 ​

Chrome / Edge 打开 FlowVision Web 即可使用。纯前端应用，无需注册 / 登录 / 后端。

bash
# 或本地开发
npm install
npm run dev      # 开发服务器
npm run build    # 类型检查 + 生产构建
npm run preview  # 预览生产构建

注意：FlowVision Web 通过浏览器 File System Access API 读取本地文件夹，要求 Chromium 内核（Chrome / Edge）。Firefox / Safari 暂不支持该 API。

选择文件夹 ​

进入应用后点击「选择文件夹」并指定一个本地目录：

  • 64 并发扫描目录元信息，显示进度
  • 支持递归子目录（最深 4 层，文件带相对路径）
  • 子目录以目录内首图堆叠预览展示，双击 / Enter 进入

布局切换 ​

工具栏可切换四种布局，多列随窗口宽度自适应：

布局说明
瀑布流masonry 多列，经典瀑布式
justified等高行对齐，贪心装行、末行不放大
网格等宽方形缩略图
detail列表：名称 / 相对路径 / 尺寸 / 大小 / 修改日期，吸顶表头

所有布局均启用虚拟滚动（TanStack Virtual），大目录（5000+ 文件）只渲染可视区域，缩略图大小可用工具栏滑块调节。

看图（大图查看器） ​

  • 两级加载：缩略图(768px)秒开 → 预览(2560px webp，IndexedDB 持久化) → 缩放超过预览分辨率阈值（±5% 迟滞）才解码全图并淡入
  • 滚轮缩放（以光标为锚点）、拖拽平移
  • 适应窗口 / 100% 原始大小（0 / 1 键）
  • ← / → 切换图片，Esc / 双击关闭
  • 长按缩放（0.4s）：左键临时 100%、右键临时适应窗口，松开还原；位移超 8px 自动转为拖拽
  • 翻图时邻图预览空闲预加载，缩回即卸载释放内存

视频播放 ​

浏览器原生格式直接播放（mp4 / webm / mov 等，原生 <video>），基于内存上限管理直连原文件。

WebDAV 远程浏览 ​

工具栏「WebDAV」按钮添加连接（NAS / Nextcloud / rclone 等），即可像本地文件夹一样浏览远程图片库（只读）。这是移动端的推荐用法。

服务器要求：必须 HTTPS + 开启 CORS 跨域响应头。

服务端可用性
Nextcloud开箱可用
rclone serve webdav配置 CORS 后可用
群晖 DSM 自带 WebDAV默认不带跨域头，需反向代理加头
自建（Apache/Nginx/Caddy）配置 CORS 后可用

远程模式下侧边栏同样提供目录树（懒加载、自动展开到当前目录）。安全提示：密码默认只保存在会话内存，刷新后需重新输入；勾选「记住密码」会明文存入本机 IndexedDB，建议仅在个人设备开启。

本地联调 WebDAV：

bash
node scripts/dev-webdav.mjs <目录> [端口] [--user 用户名 --pass 密码]

文件管理 & 搜索 ​

  • 文件管理中支持按名称搜索、按路径过滤
  • 使用 pinyin-pro 支持拼音 / 首字母检索
  • 图片格式支持：jpg / png / gif / webp / avif / bmp / svg 等

安装为应用（PWA） ​

地址栏右侧出现安装图标即可安装为桌面应用：

  • 独立窗口运行、离线可用
  • 可关联 jpg / png / gif / webp / avif / bmp / svg，双击图片直接用本应用打开
  • 新版本发布后应用内右下角提示刷新

详见子路径部署与冲突方案。