项目文档

项目概述

本项目是一个基于 Svelte 的文件阅读器应用程序，支持多种文件格式的在线阅读，包括小说文本文件和漫画图片文件。项目采用 Rust 编写的 WebAssembly 模块来处理文件分析和分页计算，前端使用 Svelte 构建用户界面。

技术栈

前端框架：Svelte/SvelteKit
样式框架：TailwindCSS
构建工具：Vite
语言：TypeScript
WebAssembly：Rust + wasm-pack
测试框架：Vitest + Playwright

项目结构

.
├── crates/                 # Rust WebAssembly 模块
│   └── file-analyzer/      # 文件分析器
├── src/                    # 前端源码
│   ├── lib/                # 核心库
│   │   ├── reader/         # 阅读器模块
│   │   ├── wasm/           # 编译后的 WASM 模块
│   │   └── index.ts        # 库入口文件
│   ├── routes/             # 页面路由
│   └── app.html            # 应用主页面
├── static/                 # 静态资源
└── ...

核心功能模块

1. 文件处理模块 (WASM)

使用 Rust 编写的 WebAssembly 模块，负责处理文件分析、字符索引和分页计算。

主要功能：

文件分块处理
UTF-8 字符解析和索引
分页计算
字符位置定位

2. 阅读器模块

NovelReader (小说阅读器)

支持文本文件的阅读，具有以下特性：

文本渲染到 Canvas
自动分页处理
可配置的字体、颜色、行高等样式
页面导航

ComicReader (漫画阅读器)

支持图片文件的阅读，具有以下特性：

图片渲染到 Canvas
多种图片适应模式
可配置的背景色和平滑渲染选项

3. 数据接口

项目定义了多个接口用于前后端数据交互：

FileMeta: 文件基本信息类型（用于哈希计算和缓存校验）
CanvasParams: Canvas 渲染参数
PageMetrics: 分页计算结果
CharIndex: 字符索引核心信息
CachedIndex: 缓存的索引数据结构
PageQuery: 页面内容查询参数
PageContent: 页面内容结果
FileProcessor: Wasm 处理器接口

开发指南

环境要求

Node.js (推荐使用最新 LTS 版本)
Rust 工具链 (用于编译 WASM 模块)
wasm-pack (用于构建 Rust 到 WASM)

安装依赖

npm install

开发模式

# 同时运行 WASM 构建和 Svelte 开发服务器
npm run dev

# 或者分别运行
npm run dev:wasm  # 监听模式构建 WASM 模块
npm run dev:svlte # 运行 Svelte 开发服务器

构建生产版本

# 构建 WASM 模块和 Svelte 应用
npm run build

# 预览生产构建
npm run preview

代码检查和格式化

# 检查代码
npm run check

# 格式化代码
npm run format

# 运行 lint
npm run lint

测试

# 运行单元测试
npm run test:unit

# 运行所有测试
npm test

配置说明

Svelte 配置

项目使用 @sveltejs/adapter-static 适配器，构建为静态单页应用(SPA)。

Vite 配置

Vite 配置包括：

TailwindCSS 插件
SvelteKit 插件
Vitest 测试配置（支持浏览器和 Node 环境）

Rust WASM 配置

Rust 项目的 Cargo.toml 配置了必要的依赖：

wasm-bindgen: 用于与 JavaScript 交互
web-sys: 用于访问 Web API
serde: 序列化/反序列化库
js-sys: 用于与 JavaScript 对象交互

部署

项目使用静态部署模式，构建后生成的文件可以部署到任何静态文件服务器上。

npm run build

构建产物位于 build/ 目录中。

扩展开发

添加新的阅读器类型

继承 Reader 基类
实现 loadContent 和 render 方法
在应用中集成新的阅读器类型

优化 WASM 模块

修改 crates/file-analyzer/src/lib.rs
重新构建: npm run build:wasm
在前端代码中使用新功能

常见问题

WASM 模块未更新

如果修改了 Rust 代码但未生效，请确保重新构建 WASM 模块：

npm run build:wasm

开发服务器启动失败

确保所有依赖已正确安装：

npm install

如有必要，清理缓存并重新安装：

rm -rf node_modules
npm install