Andrea's Wiki

外观

架构设计 ​

本文档深入介绍了 NovelHelperLite 的整体架构设计，包括技术栈选择、核心设计模式、分层架构以及关键的技术决策。理解这些内容将帮助您更好地把握项目的整体脉络，为后续的开发和扩展奠定基础。

技术栈概览 ​

NovelHelperLite 采用现代化的技术栈构建，充分发挥了当代 Web 技术的优势。以下是核心技术栈的详细介绍：

前端框架：项目使用 Vue 3 作为核心前端框架，采用组合式 API（Composition API）进行组件开发。Vue 3 提供了更好的类型推断支持、更灵活的代码组织方式以及更优秀的性能表现。组合式 API 使得逻辑复用更加便捷，代码可读性更高。

UI 组件库：项目采用 Quasar 框架作为 UI 组件库。Quasar 是一个功能强大的 Vue 框架，提供了丰富的响应式组件，支持 Material Design 设计规范。通过 Quasar，项目能够轻松实现跨平台运行，一套代码可以同时打包为 Web 应用、移动应用和桌面应用。

状态管理：使用 Pinia 进行全局状态管理。Pinia 是 Vue 官方推荐的状态管理库，相比 Vuex 更加轻量、简洁，同时提供更好的 TypeScript 支持和模块化组织方式。

编辑器内核：项目集成了 Monaco Editor（VS Code 的编辑器内核），提供专业的代码编辑体验。同时集成了 Milkdown 编辑器，提供完整的 Markdown 写作体验。

构建工具：使用 Vite 作为项目构建工具。Vite 提供了极快的开发服务器启动速度和热模块替换（HMR）能力，显著提升了开发体验。

打包工具：结合 Quasar CLI 和 Vite 进行项目打包，支持生成不同平台的部署产物。

整体架构 ​

NovelHelperLite 采用分层架构设计，将应用划分为多个层次，每个层次有明确的职责边界。这种分层设计使得系统具有良好的可维护性和可扩展性。

表示层（Presentation Layer） ​

表示层负责用户界面的渲染和用户交互的处理。该层主要包含 Vue 组件、页面视图和 UI 相关的逻辑。组件采用组合式 API 组织，将模板、脚本和样式分离到不同的代码块中。表示层遵循响应式设计原则，能够自适应不同屏幕尺寸和设备类型。

业务逻辑层（Business Logic Layer） ​

业务逻辑层负责处理应用的业务规则和数据处理逻辑。该层包含服务层（Services）、工具函数（Utilities）和业务钩子（Composables）。所有复杂的业务逻辑都应该封装在这一层，表示层只负责调用接口和展示数据。

数据访问层（Data Access Layer） ​

数据访问层负责与本地存储、后端 API 和第三方服务进行交互。该层封装了所有的数据操作，包括数据获取、数据缓存、数据持久化等。数据访问层对外提供统一的接口，隐藏了底层数据存储的复杂性。

基础设施层（Infrastructure Layer） ​

基础设施层提供应用运行所需的基础设施支持，包括路由管理、状态管理、错误处理、日志记录等。这些基础设施组件为上层提供稳定可靠的服务。

核心设计模式 ​

项目在设计和实现中应用了多种经典的设计模式，以确保代码的可维护性和可扩展性：

组合式函数模式：Vue 3 的组合式 API 使得逻辑可以以函数的形式进行组织和复用。通过 use 前缀命名的组合式函数（如 useEditor、useStorage、useTheme），将相关逻辑封装成可复用的单元。

依赖注入模式：通过 Provide/Inject 机制在组件树中传递共享实例，避免了繁琐的属性逐层传递。

观察者模式：利用 Vue 的响应式系统实现数据变化自动更新视图，无需手动操作 DOM。

单例模式：Pinia store 采用单例模式，确保全局状态的一致性。

工厂模式：在创建不同类型的编辑器实例时使用工厂模式，根据配置动态创建相应的编辑器对象。

数据流管理 ​

全局状态流 ​

应用使用 Pinia 进行全局状态管理。所有需要跨组件共享的数据都应该存储在 Pinia store 中。store 中的数据变化会自动触发依赖该数据的组件更新。

组件间通信 ​

组件间通信遵循以下原则：父子组件通过 props 和 events 进行通信；跨层级组件通过 provide/inject 进行通信；无关联组件通过全局事件总线或 Pinia 进行通信。

持久化存储 ​

应用支持多种持久化存储方式，包括 LocalStorage、IndexedDB、Capacitor Preferences 等。存储策略可以根据数据类型和使用场景进行选择。

模块划分 ​

应用按照功能模块进行划分，每个模块有独立的目录结构和职责范围：

编辑器模块：负责各种编辑器的初始化、配置和管理，包括 Monaco Editor、Milkdown 编辑器和图片查看器。

存储模块：负责数据的持久化存储，包括项目数据、用户设置、缓存数据等。

主题模块：负责应用的主题管理，支持亮色模式、暗色模式以及自定义主题。

工具模块：提供各种工具函数和辅助功能，包括文件操作、日期处理、字符串处理等。

跨平台适配 ​

项目通过 Quasar 框架实现跨平台运行支持：

Web 平台：标准浏览器环境，通过 PWA 支持离线访问。

移动平台：通过 Capacitor 打包为 iOS 和 Android 应用，可以使用原生设备功能。

桌面平台：通过 Electron 或 Quasar CLI 打包为桌面应用，支持 Windows、macOS 和 Linux。

每个平台都有对应的适配层，处理平台特有的 API 和行为差异。

最后更新：2025年12月