写作摸鱼 (PhantomPen)

桌面摸鱼写小说软件，基于 Electron + React + TypeScript + TailwindCSS 构建。

功能特性

• 章节管理 — 创建、切换、重命名章节，支持章节导航
• 透明窗口 — 可调节窗口透明度，半透明/全透明一键切换，适合摸鱼场景
• 老板键 — Ctrl + `` 一键最小化窗口
• 自动保存 — 可配置自动保存间隔（30秒 ~ 10分钟），也可手动保存
• 明暗主题 — 支持亮色/暗色主题切换
• AI 辅助 — 内置大模型聊天面板，支持流式对话，可配置多个 LLM 后端
• TXT 导入 — 支持从本地 TXT 文件导入内容到新章节
• DOCX 导出 — 支持导出单章或全书为 Word 文档
• 无边框窗口 — 自定义标题栏，始终置顶

技术栈

技术	用途
Electron	桌面应用框架
React 19	UI 框架
TypeScript	类型安全
Vite	构建工具
TailwindCSS	样式框架
docx	DOCX 文件生成

项目结构

├── electron/               # Electron 主进程 & preload
│   ├── main.ts             # 主进程：窗口管理、IPC 通信、文件系统操作
│   └── preload.ts          # 预加载脚本：安全暴露 API 给渲染进程
├── src/
│   ├── main.tsx            # React 入口
│   ├── App.tsx             # 应用根组件：状态管理、布局编排
│   ├── index.css           # 全局样式 & TailwindCSS
│   ├── components/
│   │   ├── TitleBar.tsx        # 自定义标题栏（工具栏 + 窗口控制按钮）
│   │   ├── Editor.tsx          # 写作编辑器（textarea）
│   │   ├── ChapterSelect.tsx   # 章节下拉选择器
│   │   ├── StatusBar.tsx       # 底部状态栏（字数统计、保存状态）
│   │   ├── ChatPanel.tsx       # AI 聊天面板
│   │   ├── ChatMessage.tsx     # 聊天消息渲染（支持 Markdown 代码块）
│   │   ├── ChatHistory.tsx     # 对话历史侧边栏
│   │   ├── SettingsPanel.tsx   # 设置面板（自动保存、LLM 配置、文件操作）
│   │   ├── ThemeToggle.tsx     # 明暗主题切换按钮
│   │   └── OpacitySlider.tsx   # 透明度控制按钮
│   ├── hooks/
│   │   ├── useNovel.ts         # 小说核心 Hook（章节读写、切换）
│   │   ├── useAutoSave.ts      # 自动保存 Hook（debounce + 状态管理）
│   │   └── useTransparency.ts  # 鼠标穿透 Hook（鼠标移出时窗口透明化）
│   ├── utils/
│   │   ├── fileStorage.ts      # 小说文件读写（meta.json + 章节 txt）
│   │   ├── chatStorage.ts      # 聊天记录持久化
│   │   ├── llmService.ts       # LLM API 调用（OpenAI 兼容接口，SSE 流式）
│   │   └── exportDocx.ts       # DOCX 导出
│   └── types/
│       ├── novel.ts            # 小说/章节类型定义
│       └── chat.ts             # LLM 配置/聊天消息类型定义
├── novels/                 # 小说数据存储目录（运行时生成）
├── index.html              # HTML 入口
├── package.json            # 项目配置 & electron-builder 打包配置
├── vite.config.ts          # Vite + Electron 插件配置
├── tsconfig.json           # TypeScript 配置
└── tailwind.config.js      # TailwindCSS 配置

数据存储

所有数据存储在 novels/ 目录下（开发时位于项目根目录，打包后位于 exe 同级目录）：

novels/
├── window.json                  # 窗口位置/大小记忆
├── 默认小说/                    # 小说目录
│   ├── meta.json                # 元数据（标题、章节列表、当前章节）
│   └── ch_xxx.txt               # 各章节内容文件
└── chat-sessions/               # AI 对话记录
    ├── _index.json              # 对话索引
    └── chat_xxx.json            # 单个对话记录

支持的 LLM

内置三个 LLM 后端配置（需自行填入 API Key）：

名称	默认 Endpoint	默认模型
阿里云通义千问	https://dashscope.aliyuncs.com/compatible-mode/v1	qwen-plus
Kimi (月之暗面)	https://api.moonshot.cn/v1	moonshot-v1-8k
DeepSeek	https://api.deepseek.com/v1	deepseek-chat

支持任意 OpenAI 兼容接口，可在设置面板中修改 Base URL、API Key 和模型名称。

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建 Windows 便携版
npm run build:win

打包

使用 electron-builder 打包为 Windows 便携版（portable），输出到 release/ 目录。

打包配置位于 package.json 的 build 字段：

• appId: com.writingfish.app
• productName: 写作摸鱼
• target: Windows portable