Andrea's Wiki

外观

⚠️ 免责声明：本文档由 GLM4.7 自动生成，内容可能存在错误或不完整之处。请以人工书写的官方为准。

功能特性 ​

ANH Lite 是一个跨平台的轻量级编辑器，基于 Quasar + Vue 3 构建，支持 Web、移动端（通过 Capacitor）和桌面端。以下是 ANH Lite 的主要功能特性。

编辑器功能 ​

多编辑器支持 ​

ANH Lite 支持多种编辑器，根据文件类型自动选择合适的编辑器：

Monaco Editor ​

  • 功能：功能强大的代码编辑器，支持语法高亮、代码补全、错误检查、多光标编辑、代码折叠、小地图导航等
  • 适用场景：编辑各种编程语言代码文件（.js、.ts、.py、.java、.cpp 等）
  • 语言支持：自动检测文件扩展名或 MIME 类型，支持 TypeScript、JavaScript、Python、Java、C/C++、Rust、Go、PHP、Shell、SQL、JSON、YAML、HTML、CSS、Markdown 等多种语言
  • 大文件优化：当文件大小超过大文件阈值（默认 500KB）时，自动禁用语法高亮、代码折叠和小地图等特性以提升性能，使用纯文本模式打开

Milkdown Editor ​

  • 功能：基于 ProseMirror 的所见即所得 Markdown 编辑器，提供流畅的编辑体验
  • 适用场景：编辑 Markdown 文档，支持实时 Markdown 语法渲染
  • 特性：支持 Markdown 语法、快捷操作、表格编辑等

图片查看器 ​

  • 功能：集成 v-viewer 图片查看器，支持图片的查看、缩放、旋转、翻转
  • 适用场景：查看 JPG、PNG、GIF、WebP 等常见图片格式
  • 设置：支持"显示缩放中心"选项，在缩放时显示中心点标记

PDF 查看器 ​

  • 功能：支持在线预览 PDF 文件
  • 适用场景：查看 PDF 格式的文档和电子书

编辑器切换 ​

  • 自动选择：系统会根据文件类型自动选择合适的编辑器
  • 手动切换：可以手动选择其他编辑器打开文件
  • 编辑器状态保存：Monaco 编辑器会保存视图状态（光标位置、滚动位置、折叠状态等），再次打开时自动恢复
  • 编辑器模式：支持 monaco 和 milkdown 两种编辑器模式，存储在文件的 editorMode 属性中

编辑器命令 ​

  • 剪贴板命令：支持剪切、复制、粘贴操作（Ctrl+X、Ctrl+C、Ctrl+V）
  • 保存快捷键：支持 Ctrl+S / Cmd+S 保存文件
  • 命令注册：每个打开的文件会注册独立的剪贴板命令，确保剪贴板操作正常工作

移动端优化 ​

输入法适配 ​

  • 虚拟键盘适配：虚拟键盘弹出时编辑器自动调整布局，确保光标可见
  • 自动滚动：光标移动时自动滚动，确保光标始终在可视区域内
  • 滚动边距：设置 120px 的滚动边距，避免光标紧贴屏幕边缘

移动端选区手柄 ​

  • 触摸选区：在移动端显示选区手柄，方便调整选区范围
  • 手柄拖动：拖动开始或结束手柄可以调整选区，支持反向拖动
  • 手柄位置：手柄位置随编辑器滚动自动更新
  • 自动检测：仅在有触摸支持的移动设备上显示选区手柄，桌面端不显示

文件管理功能 ​

文件系统抽象 ​

ANH Lite 提供统一的文件系统接口，支持多种平台：

  • Web 平台：使用 File System Access API 或 IndexedDB
  • Node.js 平台：直接访问本地文件系统
  • Capacitor 平台：使用 @capacitor/filesystem 插件访问移动端文件系统

文件浏览器 ​

  • 树形目录结构：以树形结构展示目录和文件
  • 折叠展开：支持目录的折叠和展开
  • 文件图标：根据文件类型显示不同图标
  • 已打开标记：显示已打开的文件
  • 未保存标记：显示有未保存修改的文件

文件操作 ​

  • 新建文件/文件夹：在当前目录下创建新文件或文件夹
  • 重命名：重命名文件或文件夹，支持重命名检测，避免同名冲突
  • 删除：删除文件或文件夹，删除时显示确认对话框
  • 复制/粘贴：复制文件或文件夹到指定位置，粘贴时自动检测名称冲突并提示
  • 剪切/粘贴：移动文件或文件夹到指定位置
  • 属性查看：查看文件或文件夹的详细信息（名称、类型、路径、大小、修改时间）
  • 格式化大小显示：自动将文件大小格式化为易读的格式（B、KB、MB、GB、TB）

文件监视 ​

  • 自动刷新：文件系统变化时自动刷新文件浏览器
  • 重启监视器：切换工作区时自动重启文件监视器
  • 错误处理：文件访问失败时显示详细的错误信息和调试信息

标签页功能 ​

标签页管理 ​

  • 多标签页：同时打开多个文件，使用标签页切换
  • 标签页切换：点击标签页切换到对应的文件
  • 标签页关闭：点击关闭按钮关闭标签页
  • 当前文件高亮：当前活动的文件标签高亮显示

标签页 GC（垃圾回收） ​

ANH Lite 提供智能的标签页内存管理功能：

工作原理 ​

  • 定期检查：系统会定期检查所有打开的标签页
  • 空闲时间计算：计算每个标签页的最后访问时间
  • 卸载条件：满足以下条件之一时，标签页会被标记为卸载：
    1. 标签页空闲时间超过设置的 GC 空闲时间（默认 30 分钟）
    2. 打开的标签页数量超过最大缓存标签页数（默认 10），且当前标签页是最久未使用的
  • 内容卸载：被卸载的标签页会保留基本信息（路径、名称、编辑器模式等），但内容会被清空以释放内存
  • 自动加载：当再次访问被卸载的标签页时，系统会自动从文件系统重新加载内容

工作区持久化 ​

  • 内容限制：为了控制存储大小，每个文件的内容最大保存 400KB（MAX_PERSIST_CONTENT_LENGTH）
  • 状态限制：整个工作区的序列化数据最大 900KB（MAX_PERSIST_STATE_SIZE）
  • 内容截断：如果文件内容超过限制，会截断内容并添加提示信息，超过的部分会在重新加载时丢失
  • 视图状态保存：Monaco 编辑器的视图状态（光标位置、滚动位置等）会完整保存
  • 重新加载：关闭浏览器后再打开，会自动恢复工作区状态，被卸载的标签页会重新加载内容

配置选项 ​

  • 启用标签页 GC：开启/关闭标签页垃圾回收功能
  • 最大缓存标签页数：设置内存中保留的最大标签页数量
  • GC 空闲时间：设置标签页空闲多少分钟后会被垃圾回收

工作区功能 ​

工作区管理 ​

  • 工作区切换：在不同工作区之间快速切换
  • 工作区记忆：记住上次使用的工作区，下次打开时自动加载
  • 工作区持久化：工作区状态会保存到本地存储，关闭浏览器后仍然保留
  • 私有工作区：支持打开应用的私有工作区（仅限 Capacitor 平台）

工作区数据 ​

  • OpenFile 类型：每个打开的文件包含以下属性：
    • uid：唯一标识符
    • path：文件路径
    • name：文件名
    • content：文件内容
    • savedContent：已保存的内容（用于检测修改）
    • handle：FileSystemHandle（Web 平台）
    • fsEntry：文件系统条目
    • mime：MIME 类型
    • mediaUrl：媒体 URL（图片、PDF）
    • isImage：是否为图片
    • viewState：编辑器视图状态
    • editorMode：编辑器模式（'monaco' | 'milkdown'）
    • activeEditorId：活动编辑器 ID
    • lastAccessTime：最后访问时间
    • isUnloaded：是否已卸载

界面功能 ​

主题支持 ​

  • 明亮模式：浅色背景和深色文本
  • 暗色模式：深色背景和浅色文本
  • 自动模式：根据系统主题自动切换
  • 主题应用：使用 Quasar 的 Dark.set() API 实时应用主题

界面布局 ​

  • 响应式设计：自动适配不同屏幕尺寸
  • 侧边栏：显示文件浏览器和已打开的文件列表
  • 标签页：显示打开的文件标签
  • 编辑器区域：主要的编辑和查看区域
  • 状态栏：显示当前文件信息和状态

滚动条样式 ​

  • 自定义滚动条：提供美观的自定义滚动条样式
  • 主题适配：滚动条样式会根据主题（明亮/暗色）自动调整
  • 触摸友好：移动端优化滚动条触摸体验

性能优化 ​

大文件处理 ​

  • 大文件检测：根据文件内容长度判断是否为大文件
  • 自动优化：大文件自动禁用语法高亮、代码折叠、小地图等特性
  • 性能提升：禁用不必要的特性可以显著提升大文件的编辑性能
  • 可配置阈值：可以通过设置调整大文件阈值

标签页 GC ​

  • 内存管理：自动卸载长时间未使用的标签页，释放内存
  • 智能卸载：基于空闲时间和缓存数量智能选择要卸载的标签页
  • 快速恢复：被卸载的标签页可以快速重新加载

懒加载 ​

  • 按需加载：只加载当前使用的编辑器
  • 资源优化：减少初始加载时间

开发和调试 ​

调试功能 ​

  • 显示编辑器信息：在编辑器界面显示调试信息
  • 文件系统兼容性检测：检测当前环境的文件系统访问支持情况
  • 详细错误信息：文件操作失败时显示详细的错误信息和解决建议
  • 用户代理信息：显示浏览器用户代理信息，用于问题诊断

控制台日志 ​

  • 大文件日志：检测到大文件时在控制台输出日志
  • 错误日志：文件操作失败时在控制台输出错误信息
  • 调试信息：文件系统兼容性检测时输出详细的调试信息