一、软件介绍
文末提供程序和源码下载
Plot Bunni 是一种开源小说写作工具,旨在帮助小说家组织他们的想法、构建他们的故事,并利用 AI 进行头脑风暴和起草。该版本支持管理多部小说,并使用 IndexedDB 在本地持久化数据。
二、Features 特征
Plot Bunni offers a comprehensive suite of features for novelists:
Plot Bunni 为小说家提供了一套全面的功能:
I. Global & Novel Management
I. 全球和新颖管理
- Novel Grid View (
NovelGridView.jsx
):
新奇网格视图 (NovelGridView.jsx
):- Landing page displaying all user novels as cards.
将所有用户小说显示为卡片的登陆页面。 - Creation of new novels with a user-defined name.
使用用户定义的名称创建新小说。 - Opening an existing novel to its dedicated editor view.
将现有小说打开到其专用编辑器视图。 - Renaming existing novels directly on the card.
直接在卡片上重命名现有小说。 - Deleting existing novels (with confirmation).
删除现有小说(经确认)。 - Client-side search/filter for novels by name.
按名称对小说进行客户端搜索/筛选。
- Landing page displaying all user novels as cards.
- Data Storage (Multi-Novel):
数据存储(多小说):- Each novel's data (overview, plan, concepts, manuscript) is stored separately in IndexedDB.
每部小说的数据(概述、计划、概念、手稿)都单独存储在 IndexedDB 中。 - Novel metadata (ID, name, last modified) is also stored for the grid view.
还会为网格视图存储新颖的元数据(ID、名称、上次修改时间)。
- Each novel's data (overview, plan, concepts, manuscript) is stored separately in IndexedDB.
II. Novel Editor (App.jsx
- Main Shell for an Opened Novel)
II. 小说编辑器 ( App.jsx
- 打开小说的主 shell)
- Unified Editor Interface: Centralized view for working on a single novel.
统一的编辑器界面:用于处理单部小说的集中视图。 - Responsive Layout: 响应式布局:
- Desktop: Two-pane layout with a resizable and collapsible sidebar (for Overview & Concepts) and a main content area.
桌面:两窗格布局,带有可调整大小和可折叠的侧边栏(用于概述和概念)和一个主要内容区域。 - Mobile: Single-pane layout with tab-based navigation for all sections.
移动:单窗格布局,所有部分均采用基于选项卡的导航。
- Desktop: Two-pane layout with a resizable and collapsible sidebar (for Overview & Concepts) and a main content area.
- Header Bar: 标题栏:
- Quick navigation back to "My Novels" (Home icon).
快速导航回“我的小说”(主页图标)。 - Current novel name display (with a bunny icon!).
当前小说名称显示(带有兔子图标! - Sidebar toggle button (desktop).
侧边栏切换按钮(桌面)。 - Font settings popover for customizing editor font family and size.
用于自定义编辑器字体系列和大小的字体设置弹出窗口。 - Theme toggle button (Light/Dark mode).
主题切换按钮(浅色/深色模式)。
- Quick navigation back to "My Novels" (Home icon).
- Tab-based Navigation: 基于选项卡的导航:
- Main Tabs (Desktop & Mobile): Plan, Write, Settings.
主要选项卡(桌面和移动设备):计划、编写、设置。 - Mobile-Only Main Tabs: Overview, Concepts (these are in the sidebar on desktop).
仅限移动设备的主选项卡:Overview、Concepts(这些位于桌面的侧边栏中)。
- Main Tabs (Desktop & Mobile): Plan, Write, Settings.
- Novel Overview (
NovelOverviewTab.jsx
- in Sidebar/Mobile Tab):
小说概述(NovelOverviewTab.jsx
- 在侧边栏/移动选项卡中):- Edit novel metadata: name, author, synopsis, cover image.
编辑小说元数据:姓名、作者、概要、封面图片。 - "Download Project" button: Exports the full novel data (including plan, concepts, manuscript) as a single JSON file.
“Download Project” 按钮:将完整的小说数据(包括计划、概念、手稿)导出为单个 JSON 文件。 - "Export Manuscript": Exports novel content in Markdown (.md) or Text (.txt) format with options for including a table of contents and headings.
“导出手稿”:以 Markdown (.md) 或文本 (.txt) 格式导出小说内容,并可选择包含目录和标题。
- Edit novel metadata: name, author, synopsis, cover image.
- Settings (
SettingsView.jsx
):
设置 (SettingsView.jsx
):- Global application settings.
全局应用程序设置。 - AI endpoint configuration and profile management.
AI 终端节点配置和配置文件管理。 - Theme customization (see Theme Features).
主题自定义(请参阅主题功能)。
- Global application settings.
III. Story Planning (PlanView.jsx
)
III. 故事策划 ( PlanView.jsx
)
- Hierarchical Structure: Organize stories into Acts, Chapters, and Scenes.
层次结构:将故事组织成章节、章节和场景。- Acts: Create, rename, delete (with confirmation, cascades to children).
作:创建、重命名、删除(确认后,级联到子项)。 - Chapters: Create (within Acts), rename, delete (with confirmation, cascades to children). Displayed as cards.
章节:创建(在使徒行传中)、重命名、删除(确认后,级联到子项)。显示为卡片。 - Scenes: Create (within Chapters), rename, edit synopsis & tags, delete (with confirmation). Displayed as smaller cards within Chapter cards.
场景:创建(在章节内),重命名,编辑概要和标签,删除(确认)。在章节卡中显示为较小的卡。
- Acts: Create, rename, delete (with confirmation, cascades to children).
- Visual Plan: 视觉计划:
- Acts are displayed as sections.
行为显示为部分。 - Chapters are displayed in a responsive grid within their Act.
章节显示在其 Act 中的响应式网格中。 - Scenes are listed within their Chapter card.
场景列在他们的章节卡中。
- Acts are displayed as sections.
- Concept Linking: Scenes can be linked to multiple Concepts from the Concept Cache (visible on Scene cards).
概念链接:场景可以从概念缓存中链接到多个概念(在场景卡片上可见)。 - Navigation to Write View:
导航到写入视图:- "Write" button on each Chapter card.
每张章节卡片上的“Write”按钮。 - If a chapter has multiple scenes, a dropdown allows selecting a specific scene to jump to in the Write view.
如果一个章节有多个场景,则下拉列表允许在 Write (写入) 视图中选择要跳转到的特定场景。 - Automatically switches to the
Write
tab and scrolls to/focuses the selected chapter or scene.
自动切换到选项卡并Write
滚动到所选章节或场景/聚焦所选章节或场景。
- "Write" button on each Chapter card.
- Import Outline (
ImportOutlineModal.jsx
):
导入轮廓 (ImportOutlineModal.jsx
):- Import story structures from a simple, indented text format.
从简单的缩进文本格式导入文章结构。 - Option to replace the existing plan or append to it.
用于替换现有计划或附加到现有计划的选项。
- Import story structures from a simple, indented text format.
- AI Story Chat (
AIChatModal.jsx
):
AI 故事聊天 (AIChatModal.jsx
):- Floating action button to open an AI chat modal.
用于打开 AI 聊天模式的浮动作按钮。 - Chat history and current input are persisted in
localStorage
, scoped to the active novel.
聊天历史记录和当前输入保留在 中localStorage
,其范围限定为活动小说。 - Useful for brainstorming, getting ideas, or discussing plot points with an AI assistant.
对于集思广益、获取想法或与 AI 助手讨论情节点很有用。
- Floating action button to open an AI chat modal.
IV. Concept Cache (ConceptCacheList.jsx
- in Sidebar/Mobile Tab)
IV. 概念缓存 ( ConceptCacheList.jsx
- 在侧边栏/移动选项卡中)
- Centralized Idea Management: Store and organize characters, locations, items, lore, etc.
集中式创意管理:存储和组织角色、位置、物品、传说等。 - CRUD Operations: CRUD作:
- Create new concepts (from templates or blank).
创建新概念(从模板或空白)。 - Edit existing concepts (name, description, image, tags, aliases, custom fields based on template).
编辑现有概念(名称、描述、图像、标记、别名、基于模板的自定义字段)。 - Delete concepts (with confirmation).
删除概念(经确认)。 - Duplicate concepts. 重复的概念。
- Create new concepts (from templates or blank).
- Search & Filter: Quickly find concepts by name, tags, aliases, or description. (Filter UI present, full functionality TBD).
搜索和过滤:通过名称、标签、别名或描述快速查找概念。(过滤器 UI 存在,完整功能待定)。 - Template System: 模板系统:
- Utilizes novel-specific concept templates (e.g., Character, Location).
利用特定于小说的概念模板(例如,角色、位置)。 CreateConceptModal
allows choosing a template to pre-fill structure.
CreateConceptModal
允许选择模板以预填充结构。- (Management of templates themselves via
ManageTemplatesModal.jsx
).
(通过ManageTemplatesModal.jsx
管理模板本身)。
- Utilizes novel-specific concept templates (e.g., Character, Location).
- Display: Concepts are listed, potentially grouped by their template type, with image thumbnail and name.
显示:列出概念,可能按其模板类型分组,并带有图像缩略图和名称。
V. Manuscript Writing (WriteView.jsx
)
V. 手稿写作 ( WriteView.jsx
)
- Focused Writing Environment: Dedicated view for drafting scene content.
重点编写环境:用于起草场景内容的专用视图。 - Editable Titles: 可编辑的标题:
- Act and Chapter titles are displayed and can be edited directly within the
WriteView
.
将显示 Act 和 Chapter 标题,并且可以直接在WriteView
中进行编辑。
- Act and Chapter titles are displayed and can be edited directly within the
- Scene-by-Scene Writing: 逐场景写作:
- Each scene has its own
AutoExpandingTextarea
.
每个场景都有自己的AutoExpandingTextarea
. - Textarea automatically adjusts height to fit content.
文本区域会自动调整高度以适应内容。 - Scene content is saved to IndexedDB on blur (if changed).
场景内容在模糊时保存到 IndexedDB(如果已更改)。 - Placeholder text includes scene name and synopsis for context.
占位符文本包括场景名称和上下文概要。
- Each scene has its own
- AI-Powered Scene Writing:
AI 驱动的场景编写:- AI Suggestions (
AISuggestionModal.jsx
):
AI 建议 (AISuggestionModal.jsx
):- Button on each scene textarea to get AI-generated suggestions for the current scene.
按钮以获取 AI 为当前场景生成的建议。 - Context for AI includes novel details (synopsis, genre), plot structure, preceding scenes, and linked concepts.
AI 的上下文包括新颖的细节(概要、类型)、情节结构、前面的场景和关联的概念。
- Button on each scene textarea to get AI-generated suggestions for the current scene.
- AI Novel Writer (
AINovelWriterModal.jsx
):
AI 小说作家 (AINovelWriterModal.jsx
):- A dedicated modal to have AI write content for all (or selected) scenes in the novel sequentially.
一个专用模式,让 AI 按顺序为小说中的所有(或选定的)场景编写内容。 - Uses contextual prompts, displays progress, live output, and memory usage.
使用上下文提示,显示进度、实时输出和内存使用情况。 - Supports partial saving if interrupted.
如果中断,则支持部分保存。
- A dedicated modal to have AI write content for all (or selected) scenes in the novel sequentially.
- AI Suggestions (
- Navigation & Focus: 导航和焦点:
- Automatically scrolls to and focuses the target chapter/scene when navigated from
PlanView
.
从PlanView
导航时,自动滚动到目标章节/场景并聚焦目标章节/场景。
- Automatically scrolls to and focuses the target chapter/scene when navigated from
- Structure Display: Renders the novel's hierarchy (Acts > Chapters > Scenes) for writing.
结构显示:呈现小说的层次结构(章节>幕>场景)以进行写作。 - Empty State Handling: Provides guidance if no acts/chapters/scenes exist.
空状态处理:如果不存在章节/章节/场景,则提供指导。
VI. Cross-Cutting & Utility Features
VI. 横切和实用功能
- Theme Customization (
SettingsContext.jsx
,ThemeEditor.jsx
):
主题自定义 (SettingsContext.jsx
,ThemeEditor.jsx
):- Select Light, Dark, or System theme mode.
选择 浅色、深色 或 系统主题模式。 - Choose from predefined light and dark theme presets.
从预定义的浅色和深色主题预设中进行选择。 - Customize individual HSL color values for active light and dark themes.
自定义活动浅色和深色主题的单个 HSL 颜色值。 - Theme preferences persisted in
localStorage
.
主题首选项在 中localStorage
保留。
- Select Light, Dark, or System theme mode.
- Font Customization (
FontSettingsControl.jsx
):
字体自定义 (FontSettingsControl.jsx
):- Users can select font family and adjust font size for the editor.
用户可以选择字体系列并调整编辑器的字体大小。 - Preferences persisted in
localStorage
.
首选项在 中localStorage
仍然存在。
- Users can select font family and adjust font size for the editor.
- AI Integration Framework:
AI 集成框架:- Reusable
AISuggestionModal
for various text generation tasks.
可重复AISuggestionModal
用于各种文本生成任务。 - Context generation utilities (
aiContextUtils.js
) with truncation strategies to manage token limits.
上下文生成实用程序 (aiContextUtils.js
) 具有截断策略来管理令牌限制。 - Task-specific AI configurations and system prompts.
特定于任务的 AI 配置和系统提示符。
- Reusable
- Data Persistence: All novel-specific data is saved locally using IndexedDB, ensuring work is not lost.
数据持久性:所有特定于小说的数据都使用 IndexedDB 保存在本地,确保工作不会丢失。 - Responsive Design: UI adapts for optimal use on desktop, tablet, and mobile devices.
响应式设计:UI 可在台式机、平板电脑和移动设备上实现最佳使用。 - Error Handling & Loading States: Provides feedback during data operations and loading.
错误处理和加载状态:在数据作和加载过程中提供反馈。
三、Tech Stack 技术栈
Plot Bunni is built with the following technologies:
Plot Bunni 采用以下技术构建:
- Framework/Library: React 框架/库:React
- Build Tool: Vite 构建工具:Vite
- Styling: Tailwind CSS 样式: Tailwind CSS
- UI Components: Shadcn/UI (built on Radix UI)
UI 组件:Shadcn/UI(基于 Radix UI 构建) - Routing: React Router 路由:React Router
- Local Data Storage: IndexedDB
本地数据存储:IndexedDB - Linting: ESLint Linting:ESLint
Directory Tree (src folder)
目录树 (src 文件夹)
<span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><span style="color:#1f2328"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>src/
├── RootApp.jsx # Top-level component, sets up React Router.
├── App.jsx # Novel Editor View: Main layout for editing a single novel.
├── main.jsx # Entry point, renders RootApp.
├── index.css # Global styles, Tailwind base/components/utilities
├── lib/
│ ├── indexedDb.js # IndexedDB helper functions (multi-novel support).
│ ├── utils.js # General utility functions, including token counting.
│ └── aiContextUtils.js # Utilities for AI context generation (L1 with truncation).
├── data/
│ ├── models.js # Data structure definitions and factory functions.
│ ├── conceptTemplates.js # Default concept template definitions.
│ └── themePresets.js # Predefined theme color palettes.
├── context/
│ ├── DataContext.jsx # State management for the active novel.
│ └── SettingsContext.jsx # Global settings, including AI endpoints and theme management.
├── components/
│ ├── novel/ # Components related to Novel Management
│ │ ├── NovelGridView.jsx # Displays grid of novels, handles creation/selection.
│ │ ├── NovelCard.jsx # Displays individual novel card.
│ │ ├── NovelOverviewTab.jsx # Tab for editing novel metadata and initiating exports.
│ │ └── ExportModal.jsx # Modal for custom TXT/Markdown export options.
│ ├── concept/ # Components related to Concept Cache (scoped to active novel)
│ │ ├── ConceptCacheList.jsx
│ │ ├── ConceptFormModal.jsx
│ │ └── CreateConceptModal.jsx
│ ├── plan/ # Components related to the Plan Interface (scoped to active novel)
│ │ ├── PlanView.jsx
│ │ ├── ActFormModal.jsx
│ │ ├── ChapterFormModal.jsx
│ │ └── SceneFormModal.jsx
│ ├── write/ # Components related to the Write Interface (scoped to active novel)
│ │ └── WriteView.jsx
│ ├── ai/ # Components related to AI features
│ │ ├── AISuggestionModal.jsx # Reusable modal for AI text suggestions.
│ │ └── AINovelWriterModal.jsx # Modal for AI to write entire novel.
│ ├── settings/ # Components related to Settings (global and per-novel)
│ │ ├── SettingsView.jsx # Main settings UI.
│ │ ├── ThemeEditor.jsx # UI for theme customization.
│ │ └── EndpointProfileFormModal.jsx # Modal for AI endpoint profile editing.
│ └── ui/ # Shadcn UI components (auto-generated)
│ ├── button.jsx
│ └── ... (other Shadcn components)
└── assets/ # Static assets (e.g., SVGs)
</code></span></span></span></span>
四、Setup Instructions 设置说明
To set up and run Plot Bunni locally:
要在本地设置和运行 Plot Bunni,请执行以下作:
Clone the repository: 克隆存储库:
git clone <repository_url>
(Replace
<repository_url>
with the actual URL of the Plot Bunni repository)
(替换为<repository_url>
Plot Bunni 存储库的实际 URL)Navigate to the project directory:
导航到项目目录:cd Plot Bunni
Install dependencies: 安装依赖项:
npm install
Start the development server:
启动开发服务器:npm run dev
This will start the application, typically accessible at http://localhost:5173/
(or another port if 5173 is in use).
这将启动应用程序,通常可在以下位置 http://localhost:5173/
访问(如果 5173 正在使用,则为另一个端口)
五、软件下载
本文信息来源于GitHub作者地址:GitHub - MangoLion/plotbunni: FOSS Novel Writing Suite with AI Assistance