Andrea's Wiki

外观

核心组件说明 ​

本文档详细介绍了 NovelHelperLite 的核心组件，包括它们的职责、设计思路和实现细节。理解这些组件将帮助您深入了解应用的内部工作原理，并为后续的组件开发和维护提供指导。

组件架构概述 ​

NovelHelperLite 的组件体系遵循 Vue 3 的组件化设计原则，采用组合式 API 进行组件开发。组件按照功能可分为三大类：基础组件（提供原子化的 UI 功能）、业务组件（封装特定业务逻辑）和容器组件（协调多个子组件完成复杂功能）。

组件之间通过 props、events 和 slots 进行通信，保持松耦合的关系。复杂的业务逻辑被提取到组合式函数（Composables）中，实现逻辑复用和关注点分离。

基础组件 ​

编辑器组件 ​

编辑器组件是应用最核心的组件，负责文本编辑功能的主要呈现和交互。

MonacoEditor 组件：封装了 Monaco Editor（VS Code 的编辑器内核），提供专业的代码编辑体验。该组件支持语法高亮、代码补全、多光标编辑、代码折叠等高级功能。组件通过 props 接收编辑器的配置选项，通过 events 暴露编辑器实例和编辑事件。

MilkdownEditor 组件：封装了 Milkdown 编辑器，提供完整的 Markdown 写作体验。该组件支持实时预览、GFM 语法支持、快捷键绑定等功能。与 MonacoEditor 组件使用统一的接口，便于在不同编辑器之间切换。

ImageViewer 组件：专用的图片查看器组件，支持图片的缩放、旋转、拖拽等操作。该组件主要用于查看编辑过程中插入的图片资源。

布局组件 ​

布局组件负责应用的整体页面结构和导航。

MainLayout 组件：应用的主布局组件，包含侧边栏、主内容区和顶部导航栏。该组件响应窗口大小变化，支持全屏模式和窄屏模式。

Sidebar 组件：侧边栏组件，提供模块导航和快速访问功能。支持折叠状态，节省屏幕空间。

StatusBar 组件：底部状态栏组件，显示当前文档信息、编辑状态和快捷操作按钮。

UI 基础组件 ​

项目基于 Quasar 框架构建，使用了大量 Quasar 提供的 UI 组件，包括但不限于：

  • QBtn：按钮组件，支持多种变体和尺寸
  • QInput：输入框组件，支持验证和格式化
  • QDialog：对话框组件，用于模态交互
  • QMenu：菜单组件，支持嵌套和动态内容
  • QTree：树形组件，用于展示层级结构
  • QTable：表格组件，支持排序和分页

业务组件 ​

项目管理组件 ​

ProjectList 组件：项目列表组件，展示所有已创建的项目，支持搜索、排序和筛选操作。用户可以快速切换项目或创建新项目。

ProjectCard 组件：项目卡片组件，以卡片形式展示单个项目的信息，包括项目名称、描述、最后修改时间等。提供项目的快捷操作入口。

NewProjectDialog 组件：新建项目对话框，引导用户创建新的写作项目。包含项目名称、描述、模板选择等表单字段。

文档编辑组件 ​

DocEditor 组件：文档编辑器容器组件，根据用户设置选择使用不同的编辑器内核。该组件协调编辑器组件和工具栏组件，提供统一的编辑体验。

Toolbar 组件：编辑器工具栏组件，提供常用的编辑操作按钮，如格式化、插入标题、插入列表等。按钮根据当前编辑器类型动态显示。

OutlineView 组件：文档大纲组件，解析当前文档的结构，以树形方式展示标题层级。支持快速导航到指定位置。

设置组件 ​

SettingsDialog 组件：设置对话框组件，集合了应用的所有设置项。采用分类标签页组织，支持搜索设置项。

ThemeSelector 组件：主题选择器组件，提供亮色模式、暗色模式和自定义主题的选择。主题变化会实时应用到整个应用。

EditorSettings 组件：编辑器设置组件，包含编辑器的各种配置选项，如字体大小、行高、制表符宽度等。

组合式函数 ​

除了组件，项目还提供了丰富的组合式函数，用于封装可复用的逻辑：

useEditor：编辑器相关的组合式函数，提供编辑器初始化、配置、更新等方法。

useProject：项目管理相关的组合式函数，提供项目的创建、加载、保存、删除等方法。

useStorage：存储相关的组合式函数，封装 LocalStorage 和 IndexedDB 的操作，提供统一的数据存取接口。

useTheme：主题管理相关的组合式函数，提供主题切换、主题持久化等功能。

useI18n：国际化相关的组合式函数，提供多语言支持和翻译功能。

组件通信 ​

事件总线 ​

对于跨组件的事件通信，项目实现了简单的事件总线机制。任何组件都可以发布事件或订阅事件，实现松耦合的通信方式。

状态共享 ​

需要跨组件共享的状态存储在 Pinia store 中。组件通过 store 的 getter 获取状态，通过调用 store 的 action 修改状态。这种方式确保了状态的可追溯性和可调试性。

Provide/Inject ​

对于组件树中的层级通信，使用 Vue 的 provide/inject 机制。父组件通过 provide 向下层组件提供依赖，下层组件通过 inject 注入使用。

组件生命周期 ​

组件的生命周期遵循 Vue 3 的标准生命周期钩子：

  • setup()：组件入口，负责初始化组合式函数和响应式状态
  • onMounted()：组件挂载后执行，用于 DOM 操作和初始化第三方库
  • onUpdated()：组件更新后执行，用于更新后的 DOM 操作
  • onUnmounted()：组件卸载前执行，用于清理资源和取消订阅

对于需要响应路由变化的组件，使用 onBeforeRouteUpdate 和 afterEach 等路由钩子。

最后更新：2025年12月