# oseditor **Repository Path**: small-high-cold/oseditor ## Basic Information - **Project Name**: oseditor - **Description**: 基于electron、vue开发的一款文章编辑器 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2026-02-22 - **Last Updated**: 2026-04-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: Electron, Vue, Ant-Design ## README # OS Editor 一个现代化的TXT书籍编辑器，专为作家和编辑人员设计，提供直观的章节管理和编辑体验。 ## 📋 项目简介 OS Editor是一个基于Vue 3和Electron的桌面应用程序，专注于TXT书籍的编辑和管理。它提供了以下核心功能： - 书籍管理：创建、导入、删除书籍 - 章节管理：新建卷、章节，重命名、删除章节 - 内容编辑：实时编辑章节内容，支持智能排版 - 树形结构：直观的章节导航和管理 - 数据持久化：自动保存编辑状态 - 导出功能：将编辑好的内容导出为TXT文件 - 查找替换：在编辑器中快速查找和替换文本 - 版本历史：查看和恢复编辑历史版本 - AI辅助：集成AI写作助手 ## 🛠 技术栈 | 技术 | 版本 | 用途 | |------|------|------| | Vue 3 | ^3.5.28 | 前端框架 | | TypeScript | ~5.9.3 | 类型系统 | | Electron | ^40.6.0 | 桌面应用框架 | | Ant Design Vue | ^4.2.6 | UI组件库 | | Pinia | ^3.0.4 | 状态管理 | | Vite | ^7.3.1 | 构建工具 | | Less | ^4.5.1 | CSS预处理器 | | Tiptap | ^3.20.1 | 富文本编辑器 | | Electron Store | ^11.0.2 | 本地数据存储 | | Ollama | ^0.6.3 | AI模型集成 | ## ✨ 功能特性 ### 1. 书籍管理 - **新建书籍**：创建新的书籍项目 - **导入TXT**：导入现有的TXT文件并自动分析章节结构 - **书籍列表**：查看所有已创建的书籍 - **删除书籍**：移除不需要的书籍 ![书籍管理页面](./public/书籍管理.png) ### 2. 章节管理 - **树形结构**：以树形结构展示书籍的卷和章节 - **新建卷**：在书籍中添加新的卷 - **新建章节**：在指定卷下添加新的章节 - **重命名**：修改卷和章节的标题 - **删除**：移除不需要的卷或章节 ### 3. 内容编辑 - **实时编辑**：编辑章节内容并实时保存 - **章节切换**：在不同章节之间快速切换 - **标题编辑**：修改章节标题 - **智能排版**：自动调整文本格式 - **查找替换**：快速查找和替换文本内容 - **版本历史**：查看和恢复编辑历史 ![章节编辑界面](./public/章节编辑.png) ### 4. 数据持久化 - **自动保存**：编辑内容自动保存到本地 - **状态恢复**：重新打开应用时恢复上次的编辑状态 ### 5. 导出功能 - **导出TXT**：将编辑好的内容导出为TXT文件 ### 6. AI辅助功能 - **AI写作助手**：提供智能写作建议 - **取名助手**：为角色和章节生成名称 ## 📁 项目结构 ``` oseditor/ ├── .vscode/ # VS Code配置 ├── dist-electron/ # Electron构建输出 ├── electron/ # Electron主进程代码 │ ├── main.ts # 主进程入口 │ └── preload.ts # 预加载脚本 ├── public/ # 静态资源 ├── src/ # 源代码 │ ├── components/ # 组件 │ │ ├── chat/ # AI聊天相关组件 │ │ ├── editor/ # 编辑器相关组件 │ │ ├── tiptap/ # Tiptap编辑器扩展 │ │ ├── ChapterTree.vue # 章节树组件 │ │ ├── Tabs.vue # 标签页组件 │ │ └── TipTapEditor.vue # Tiptap编辑器组件 │ ├── os-components/ # 自定义组件 │ │ ├── button/ # 按钮组件 │ │ ├── drawer/ # 抽屉组件 │ │ ├── dropdown/ # 下拉菜单组件 │ │ ├── input/ # 输入框组件 │ │ ├── menu/ # 菜单组件 │ │ ├── modal/ # 模态框组件 │ │ ├── radio/ # 单选框组件 │ │ ├── tabs/ # 标签页组件 │ │ └── tree/ # 树组件 │ ├── os-icons/ # 图标组件 │ ├── router/ # 路由配置 │ ├── services/ # 服务 │ ├── store/ # 状态管理 │ │ ├── actions/ # 状态管理动作 │ │ ├── index.ts # 状态管理入口 │ │ ├── state.ts # 状态定义 │ │ └── types.ts # 类型定义 │ ├── types/ # TypeScript类型定义 │ ├── utils/ # 工具函数 │ ├── views/ # 页面 │ │ ├── BookPage.vue # 书籍编辑页面 │ │ ├── ComponentsDemoPage.vue # 组件演示页面 │ │ ├── LibraryPage.vue # 书籍管理页面 │ │ ├── SearchPage.vue # 搜索页面 │ │ └── SettingPage.vue # 设置页面 │ ├── App.vue # 应用根组件 │ ├── electron.d.ts # Electron类型声明 │ └── main.ts # 应用入口 ├── .gitignore # Git忽略文件 ├── README.md # 项目文档 ├── package.json # 项目配置 ├── tsconfig.json # TypeScript配置 └── vite.config.ts # Vite配置 ``` ## 🚀 安装与运行 ### 环境要求 - Node.js ^20.19.0 或 >=22.12.0 - npm 或 yarn ### 安装依赖 ```bash npm install ``` ### 开发模式运行 ```bash npm run dev ``` ### 构建应用 ```bash npm run build ``` ## 📖 使用指南 ### 1. 书籍管理 #### 新建书籍 1. 在书籍管理页面点击"新建书籍"按钮 2. 填写书籍名称和作者名称 3. 点击确定创建书籍 #### 导入TXT文件 1. 在书籍管理页面点击"导入图书"按钮 2. 选择要导入的TXT文件 3. 系统会自动分析文件内容并生成章节结构 #### 导入TXT文件格式要求 - 支持标准TXT格式 - 文件名使用 "文章名称 - 作者名称.txt" - 文件内容使用 首行"第X卷 卷名 第X章 章名"、第二行"内容" - 后续会支持更多txt格式 #### 示例TXT文件 您可以使用以下示例文件进行测试： - [全球高武.txt](./public/全球高武.txt) ### 2. 章节管理 #### 新建卷 1. 在项目编辑页面的文件名上右键点击 2. 选择"新建卷" #### 新建章节 1. 在项目编辑页面的卷节点上右键点击 2. 选择"新建章节" #### 重命名章节 1. 在项目编辑页面的章节节点上右键点击 2. 选择"重命名" 3. 输入新的章节标题 #### 删除章节 1. 在项目编辑页面的章节节点上右键点击 2. 选择"删除" ### 3. 内容编辑 1. 在左侧章节树中选择要编辑的章节 2. 在右侧编辑器中修改章节内容 3. 编辑完成后，系统会自动保存 4. 使用工具栏进行撤销、重做、智能排版等操作 ### 4. 导出TXT 1. 在项目编辑页面中完成编辑 2. 点击导出按钮 3. 选择保存位置 ## 🔧 核心功能模块 ### 1. 章节树组件 (ChapterTree.vue) - 展示书籍的章节结构 - 支持右键菜单操作 - 提供章节的新建、重命名、删除功能 ### 2. 编辑器组件 (TipTapEditor.vue) - 基于Tiptap的富文本编辑器 - 提供章节内容的编辑功能 - 支持实时保存 - 显示当前编辑的章节标题 - 集成查找替换功能 - 支持版本历史查看和恢复 ### 3. 状态管理 (store/index.ts) - 使用Pinia管理应用状态 - 处理书籍的导入、保存、加载等操作 - 管理章节树和章节数据 - 处理UI状态和用户交互 ### 4. TXT分析工具 (utils/txtAnalyzer.ts) - 分析TXT文件内容 - 自动生成章节结构 - 支持卷和章节的识别 ### 5. 树操作工具 (utils/treeUtils.ts) - 提供章节树的各种操作 - 支持节点的添加、重命名、删除 - 维护章节树的一致性 ### 6. AI辅助功能 (components/chat/) - 集成AI写作助手 - 提供智能写作建议 - 实现取名助手功能 ## 🔄 优化计划 ### 代码与性能优化 - **删除多余代码**：清理无用的代码和注释 - **树组件及数据结构优化**：改进章节树的性能和稳定性 - **缓存优化**：提升应用响应速度 - **组件按需引入**：减少打包体积，提高加载速度 - **基础组件优化**：改进自定义组件的性能和可用性 - **导入导出优化**：提升文件导入导出的效率和稳定性 ### 界面与用户体验优化 - **悬浮菜单代码单独抽离**：提高代码可维护性 - **图标导入优化**：统一图标管理，减少重复导入 - **书籍管理页面布局调整**：优化页面布局，提升用户体验 - **编辑区滚动条显示隐藏触发时间调整**：改善滚动体验 - **历史记录、AI助手、取名助手弹出优化**：提升交互体验 - **tab页active样式优化**：改进标签页激活状态的视觉效果 ### 组件替换与重构 - **打开页面时treeHeight计算多次的问题**：优化计算逻辑 - **替换Ant Design组件**：使用自定义组件替换Layout、Tree、Radio、Form、Input、Card、message、Empty、Tooltip等组件 ### 功能修复 - **章节定位无法滚动的问题**：解决由于虚拟滚动导致的滚动问题 - **其他问题**：tab页问题、智能排版问题、导入导出问题、缓存及持久化刷新问题等等... ## ✨ 新增功能计划 ### 编辑功能增强 - **文章纠错**：自动检测并提示文章中的错误 - **大纲**：生成和管理文章大纲 - **历史版本比对**：比较不同版本的内容差异 - **字数统计**：实时显示文章字数 - **智能排版**：优化文本格式和布局 ### 项目管理功能 - **作品相关**：管理作品的元数据和相关信息 - **多人编辑**：支持多用户协作编辑 - **设置**：提供应用配置选项 - **同步功能**：实现数据的云同步 ### 用户功能 - **个人登录**：用户身份认证 - **个人信息**：管理用户个人资料 - **每日签到**：鼓励用户使用应用 - **每日日程及目标**：帮助用户规划写作进度 ### 其他功能 - **阅读模式**：提供舒适的阅读体验 - **打开网页**：在应用中打开相关网页 - **书架中书籍支持导出**：直接从书架导出书籍 - **左侧目录树添加搜索功能**：快速定位章节 - **编辑区右侧添加拖拽线**：调整编辑区宽度 - **列表自动排序**：自动整理章节顺序 - **支持字体切换**：提供多种字体选择 ## 📄 许可证 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 --- **OS Editor** - 让写作变得更简单！