1339 lines
45 KiB
TypeScript
1339 lines
45 KiB
TypeScript
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
|||
|
|
import {
|
|||
|
|
Button,
|
|||
|
|
Card,
|
|||
|
|
Form,
|
|||
|
|
Input,
|
|||
|
|
message,
|
|||
|
|
Spin,
|
|||
|
|
Space,
|
|||
|
|
Alert,
|
|||
|
|
Modal,
|
|||
|
|
Descriptions,
|
|||
|
|
Tag,
|
|||
|
|
Select,
|
|||
|
|
Radio,
|
|||
|
|
InputNumber,
|
|||
|
|
Row,
|
|||
|
|
Col,
|
|||
|
|
Divider
|
|||
|
|
} from 'antd';
|
|||
|
|
import {
|
|||
|
|
ArrowLeftOutlined,
|
|||
|
|
RobotOutlined,
|
|||
|
|
CheckOutlined,
|
|||
|
|
DownloadOutlined,
|
|||
|
|
EditOutlined,
|
|||
|
|
UnorderedListOutlined,
|
|||
|
|
EyeOutlined
|
|||
|
|
} from '@ant-design/icons';
|
|||
|
|
import { storage } from '../utils/indexedDB';
|
|||
|
|
import { Novel, NovelGenerationParams, ChapterOutline } from '../types';
|
|||
|
|
import { useOllama } from '../contexts/OllamaContext';
|
|||
|
|
import { NovelSettingManager } from '../utils/novelSettingManager';
|
|||
|
|
|
|||
|
|
const { TextArea } = Input;
|
|||
|
|
const { Option } = Select;
|
|||
|
|
|
|||
|
|
// 小说题材选项
|
|||
|
|
const NOVEL_GENRES = [
|
|||
|
|
'穿越',
|
|||
|
|
'都市',
|
|||
|
|
'修仙',
|
|||
|
|
'武侠',
|
|||
|
|
'玄幻',
|
|||
|
|
'科幻',
|
|||
|
|
'言情',
|
|||
|
|
'历史',
|
|||
|
|
'游戏',
|
|||
|
|
'灵异',
|
|||
|
|
'军事',
|
|||
|
|
'悬疑',
|
|||
|
|
'其他'
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 字数选项
|
|||
|
|
const WORD_COUNT_OPTIONS = [
|
|||
|
|
{ label: '5万字 (短篇)', value: 50000 },
|
|||
|
|
{ label: '10万字 (中篇)', value: 100000 },
|
|||
|
|
{ label: '20万字 (长篇)', value: 200000 },
|
|||
|
|
{ label: '30万字 (超长篇)', value: 300000 },
|
|||
|
|
{ label: '50万字 (史诗篇)', value: 500000 },
|
|||
|
|
{ label: '100万字 (巨著)', value: 1000000 }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const NovelGenerate: React.FC = () => {
|
|||
|
|
const { id } = useParams<{ id: string }>();
|
|||
|
|
const navigate = useNavigate();
|
|||
|
|
const [novel, setNovel] = useState<Novel | null>(null);
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [generating, setGenerating] = useState(false);
|
|||
|
|
const [generatedSettings, setGeneratedSettings] = useState<any>(null);
|
|||
|
|
const [previewVisible, setPreviewVisible] = useState(false);
|
|||
|
|
const [editModalVisible, setEditModalVisible] = useState(false);
|
|||
|
|
const [editForm] = Form.useForm();
|
|||
|
|
const [form] = Form.useForm();
|
|||
|
|
const [chapterListVisible, setChapterListVisible] = useState(false);
|
|||
|
|
const [editingChapter, setEditingChapter] = useState<ChapterOutline | null>(null);
|
|||
|
|
const [chapterEditModalVisible, setChapterEditModalVisible] = useState(false);
|
|||
|
|
const [chapterEditForm] = Form.useForm();
|
|||
|
|
const [viewingChapter, setViewingChapter] = useState<ChapterOutline | null>(null);
|
|||
|
|
const [chapterViewModalVisible, setChapterViewModalVisible] = useState(false);
|
|||
|
|
const [forceUpdate, setForceUpdate] = useState(0); // 添加强制更新状态
|
|||
|
|
const { chat } = useOllama();
|
|||
|
|
|
|||
|
|
// 辅助函数：生成模块名称
|
|||
|
|
const getModuleName = (index: number): string => {
|
|||
|
|
const moduleNames = ['起始阶段', '发展阶段', '转折阶段', '高潮阶段', '解决阶段', '结局阶段'];
|
|||
|
|
return moduleNames[index % moduleNames.length];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 辅助函数：生成模块描述
|
|||
|
|
const getModuleDescription = (index: number): string => {
|
|||
|
|
const descriptions = [
|
|||
|
|
'开篇设定，引入主要冲突和人物',
|
|||
|
|
'情节推进，矛盾升级，人物成长',
|
|||
|
|
'故事转折，新的挑战和机遇',
|
|||
|
|
'核心冲突爆发，达到最高潮',
|
|||
|
|
'矛盾逐步解决，铺垫结局',
|
|||
|
|
'收尾总结，主题升华'
|
|||
|
|
];
|
|||
|
|
return descriptions[index % descriptions.length];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 辅助函数：生成章节范围
|
|||
|
|
const getChapterRange = (moduleIndex: number, totalChapters: number, totalModules: number): string => {
|
|||
|
|
const chaptersPerModule = Math.ceil(totalChapters / totalModules);
|
|||
|
|
const start = moduleIndex * chaptersPerModule + 1;
|
|||
|
|
const end = Math.min((moduleIndex + 1) * chaptersPerModule, totalChapters);
|
|||
|
|
return `${start}-${end}`;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (id) {
|
|||
|
|
loadNovel();
|
|||
|
|
}
|
|||
|
|
}, [id]);
|
|||
|
|
|
|||
|
|
const loadNovel = async () => {
|
|||
|
|
if (!id) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
const novels = await storage.getNovels();
|
|||
|
|
const currentNovel = novels.find((n: Novel) => n.id === id);
|
|||
|
|
|
|||
|
|
if (!currentNovel) {
|
|||
|
|
message.error('小说不存在');
|
|||
|
|
navigate('/novels');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setNovel(currentNovel);
|
|||
|
|
|
|||
|
|
if (currentNovel.generatedSettings) {
|
|||
|
|
setGeneratedSettings(currentNovel.generatedSettings);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
form.setFieldsValue({
|
|||
|
|
title: currentNovel.title,
|
|||
|
|
genre: currentNovel.genre === '未分类' ? undefined : currentNovel.genre,
|
|||
|
|
targetWordCount: currentNovel.generatedSettings?.targetWordCount || 50000,
|
|||
|
|
customRequirements: ''
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
message.error('加载数据失败');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleGenerateSettings = async () => {
|
|||
|
|
if (!novel) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const values = await form.validateFields();
|
|||
|
|
setGenerating(true);
|
|||
|
|
|
|||
|
|
const params: NovelGenerationParams = {
|
|||
|
|
title: values.title,
|
|||
|
|
genre: values.genre || '未分类',
|
|||
|
|
customRequirements: values.customRequirements
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 计算章节数量和每章字数（每章900-1200字，平均1050字）
|
|||
|
|
const avgWordsPerChapter = 1050; // 平均每章字数
|
|||
|
|
const targetWordCount = params.targetWordCount || 50000;
|
|||
|
|
const chapterCount = Math.round(targetWordCount / avgWordsPerChapter); // 5万字约48章
|
|||
|
|
const wordsPerChapterMin = 900; // 最少字数
|
|||
|
|
const wordsPerChapterMax = 1200; // 最多字数
|
|||
|
|
const moduleCount = params.preferredModuleCount || Math.max(3, Math.round(chapterCount / 15)); // 每15章左右一个模块
|
|||
|
|
|
|||
|
|
// 只生成基础设定，不包含任何章节规划
|
|||
|
|
message.info({ content: '正在生成基础设定...', duration: 2 });
|
|||
|
|
|
|||
|
|
const basePrompt = `请为小说《${params.title}》${params.genre ? `（${params.genre}题材）` : ''}生成基础创作设定。
|
|||
|
|
|
|||
|
|
## 📏 篇幅要求
|
|||
|
|
- **总目标字数**：${targetWordCount.toLocaleString()}字
|
|||
|
|
- **章节数量**：${chapterCount}章
|
|||
|
|
- **每章字数**：${wordsPerChapterMin}-${wordsPerChapterMax}字（平均${avgWordsPerChapter}字）
|
|||
|
|
- **模块划分**：${moduleCount}个模块
|
|||
|
|
|
|||
|
|
${params.customRequirements ? `## 🎯 特殊要求\n${params.customRequirements}\n\n` : ''}
|
|||
|
|
|
|||
|
|
请按照以下格式生成基础设定：
|
|||
|
|
|
|||
|
|
## 📖 故事大纲
|
|||
|
|
简要描述整个故事的核心情节和主题（150字以内）
|
|||
|
|
|
|||
|
|
## 🏗️ 情节结构
|
|||
|
|
按模块划分整个故事的结构：${Array.from({length: moduleCount}, (_, i) => `
|
|||
|
|
- 模块${i + 1}：${getModuleName(i)}（第${getChapterRange(i, chapterCount, moduleCount)}章）- ${getModuleDescription(i)}`).join('')}
|
|||
|
|
|
|||
|
|
## 👥 人物设定
|
|||
|
|
主要人物的详细设定，包括：
|
|||
|
|
- 主角：姓名、性格、背景、目标、能力特长（150字内）
|
|||
|
|
- 配角：重要配角设定（至少3个，每个100字内）
|
|||
|
|
- 反派：对立角色设定（100字内）
|
|||
|
|
|
|||
|
|
请开始生成基础设定：`;
|
|||
|
|
|
|||
|
|
const baseResponse = await chat(basePrompt, `小说《${novel.title}》的基础设定生成`);
|
|||
|
|
|
|||
|
|
// 解析基础设定
|
|||
|
|
const baseSettings = parseBaseSettings(baseResponse);
|
|||
|
|
|
|||
|
|
// 生成初始的章节规划结构（完全空的章节列表）
|
|||
|
|
const initialSettings = {
|
|||
|
|
storyOutline: baseSettings.storyOutline,
|
|||
|
|
plotStructure: baseSettings.plotStructure,
|
|||
|
|
characters: baseSettings.characters,
|
|||
|
|
targetWordCount: targetWordCount,
|
|||
|
|
chapterCount: chapterCount,
|
|||
|
|
moduleCount: moduleCount,
|
|||
|
|
chapters: [] as any[], // 完全空的章节列表
|
|||
|
|
chapterOutline: ''
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
setGeneratedSettings(initialSettings);
|
|||
|
|
message.success('基础设定生成成功！现在可以开始手动生成章节标题和细纲。');
|
|||
|
|
|
|||
|
|
} catch (error: any) {
|
|||
|
|
message.error(error.message || 'AI生成失败，请重试');
|
|||
|
|
} finally {
|
|||
|
|
setGenerating(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 手动生成单个章节规划
|
|||
|
|
const handleGenerateSingleChapter = async (chapterNumber: number) => {
|
|||
|
|
if (!novel || !generatedSettings) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const params = {
|
|||
|
|
targetWordCount: generatedSettings.targetWordCount,
|
|||
|
|
chapterCount: generatedSettings.chapterCount,
|
|||
|
|
moduleCount: generatedSettings.moduleCount,
|
|||
|
|
avgWordsPerChapter: Math.round(generatedSettings.targetWordCount / generatedSettings.chapterCount),
|
|||
|
|
wordsPerChapterMin: 900,
|
|||
|
|
wordsPerChapterMax: 1200
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 计算当前章节应该属于哪个模块
|
|||
|
|
const moduleNumber = Math.min(Math.ceil(chapterNumber / Math.ceil(params.chapterCount / params.moduleCount)), params.moduleCount);
|
|||
|
|
|
|||
|
|
message.info({ content: `正在生成第${chapterNumber}章的标题和细纲...`, duration: 2 });
|
|||
|
|
|
|||
|
|
// 使用函数式状态更新获取最新的chapters
|
|||
|
|
const currentChapters = generatedSettings.chapters || [];
|
|||
|
|
|
|||
|
|
const chapterPrompt = `基于以下小说设定，为第${chapterNumber}章生成详细规划。
|
|||
|
|
|
|||
|
|
## 小说基础设定
|
|||
|
|
|
|||
|
|
### 📖 故事大纲
|
|||
|
|
${generatedSettings.storyOutline}
|
|||
|
|
|
|||
|
|
### 🏗️ 情节结构
|
|||
|
|
${generatedSettings.plotStructure}
|
|||
|
|
|
|||
|
|
### 👥 人物设定
|
|||
|
|
${generatedSettings.characters}
|
|||
|
|
|
|||
|
|
## 章节规划要求
|
|||
|
|
|
|||
|
|
**当前章节**：第${chapterNumber}章（共${params.chapterCount}章）
|
|||
|
|
**所属模块**：模块${moduleNumber}
|
|||
|
|
**每章字数**：${params.wordsPerChapterMin}-${params.wordsPerChapterMax}字
|
|||
|
|
|
|||
|
|
${currentChapters.length > 0 ? `## 前面章节概览\n\n${currentChapters.slice(-3).map((ch: any) =>
|
|||
|
|
`第${ch.chapterNumber}章：${ch.title}\n细纲：${ch.outline.substring(0, 50)}...`
|
|||
|
|
).join('\n\n')}\n\n` : ''}
|
|||
|
|
|
|||
|
|
请按照以下格式生成第${chapterNumber}章的完整规划：
|
|||
|
|
|
|||
|
|
第${chapterNumber}章：章节标题 - 模块${moduleNumber}
|
|||
|
|
细纲：本章的详细细纲描述，包括主要情节、人物发展、冲突转折等（100-200字）。
|
|||
|
|
预计字数：1050字（范围900-1200字）
|
|||
|
|
|
|||
|
|
⚠️ **重要提醒**：
|
|||
|
|
1. 章节细纲必须控制在100-200字之间，既要详细又不能过长
|
|||
|
|
2. 要与前面章节自然衔接${chapterNumber > 1 ? '（这是后续章节的延续）' : '（这是开篇章节）'}
|
|||
|
|
3. 严格按照格式生成，确保能正确解析
|
|||
|
|
|
|||
|
|
请开始生成第${chapterNumber}章的详细规划：`;
|
|||
|
|
|
|||
|
|
const chapterResponse = await chat(chapterPrompt, `小说《${novel.title}》第${chapterNumber}章规划`);
|
|||
|
|
|
|||
|
|
// 解析单个章节
|
|||
|
|
const parsedChapter = parseSingleChapter(chapterResponse, chapterNumber, moduleNumber, params);
|
|||
|
|
|
|||
|
|
// 检查解析是否成功
|
|||
|
|
if (!parsedChapter || !parsedChapter.title || !parsedChapter.outline) {
|
|||
|
|
throw new Error('章节解析失败，请重试');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用函数式状态更新，确保基于最新状态
|
|||
|
|
setGeneratedSettings((prevSettings: any) => {
|
|||
|
|
const currentChapters = prevSettings.chapters || [];
|
|||
|
|
|
|||
|
|
// 添加到章节列表 - 深拷贝确保引用正确
|
|||
|
|
const updatedChapters = currentChapters.map((ch: any) => ({ ...ch }));
|
|||
|
|
|
|||
|
|
// 替换或添加章节
|
|||
|
|
const existingIndex = updatedChapters.findIndex((ch: any) => ch.chapterNumber === chapterNumber);
|
|||
|
|
if (existingIndex >= 0) {
|
|||
|
|
updatedChapters[existingIndex] = { ...parsedChapter };
|
|||
|
|
} else {
|
|||
|
|
updatedChapters.push({ ...parsedChapter });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 按章节号排序
|
|||
|
|
updatedChapters.sort((a: any, b: any) => a.chapterNumber - b.chapterNumber);
|
|||
|
|
|
|||
|
|
// 返回全新的设置对象，确保React检测到变化
|
|||
|
|
const newSettings = {
|
|||
|
|
...prevSettings,
|
|||
|
|
chapters: updatedChapters,
|
|||
|
|
// 添加一个时间戳确保对象总是新的
|
|||
|
|
lastUpdated: Date.now()
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 强制触发UI更新
|
|||
|
|
setTimeout(() => {
|
|||
|
|
setForceUpdate(prev => prev + 1);
|
|||
|
|
}, 50);
|
|||
|
|
|
|||
|
|
return newSettings;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
message.success(`第${chapterNumber}章的标题和细纲生成成功！`);
|
|||
|
|
|
|||
|
|
} catch (error: any) {
|
|||
|
|
message.error(error.message || '章节生成失败，请重试');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 批量生成多个章节规划
|
|||
|
|
const handleGenerateBatchChapters = async (startChapter: number, endChapter: number) => {
|
|||
|
|
if (!novel || !generatedSettings) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
setGenerating(true);
|
|||
|
|
|
|||
|
|
for (let chapterNum = startChapter; chapterNum <= endChapter; chapterNum++) {
|
|||
|
|
// 生成单个章节
|
|||
|
|
await handleGenerateSingleChapter(chapterNum);
|
|||
|
|
|
|||
|
|
// 等待更长时间，确保状态更新和界面渲染完成
|
|||
|
|
await new Promise(resolve => setTimeout(resolve, 300));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
message.success(`第${startChapter}-${endChapter}章的标题和细纲批量生成成功！`);
|
|||
|
|
|
|||
|
|
} catch (error: any) {
|
|||
|
|
message.error(error.message || '批量生成失败，请重试');
|
|||
|
|
} finally {
|
|||
|
|
setGenerating(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 解析单个章节
|
|||
|
|
const parseSingleChapter = (response: string, chapterNumber: number, moduleNumber: number, metadata: any) => {
|
|||
|
|
const lines = response.split('\n');
|
|||
|
|
let chapter: any = {
|
|||
|
|
chapterNumber: chapterNumber,
|
|||
|
|
title: `第${chapterNumber}章`,
|
|||
|
|
moduleNumber: moduleNumber,
|
|||
|
|
outline: '',
|
|||
|
|
estimatedWords: metadata.avgWordsPerChapter
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
let foundChapter = false;
|
|||
|
|
let inOutline = false;
|
|||
|
|
|
|||
|
|
lines.forEach(line => {
|
|||
|
|
const trimmedLine = line.trim();
|
|||
|
|
|
|||
|
|
// 匹配章节标题行：第1章：意外穿越 - 模块1
|
|||
|
|
const chapterMatch = trimmedLine.match(/第(\d+)章[：:]\s*(.+?)\s*[-—]\s*模块(\d+)/);
|
|||
|
|
if (chapterMatch) {
|
|||
|
|
const matchedChapterNum = parseInt(chapterMatch[1]);
|
|||
|
|
if (matchedChapterNum === chapterNumber) {
|
|||
|
|
chapter.title = chapterMatch[2].trim();
|
|||
|
|
chapter.moduleNumber = parseInt(chapterMatch[3]);
|
|||
|
|
foundChapter = true;
|
|||
|
|
}
|
|||
|
|
} else if (trimmedLine.includes('细纲：')) {
|
|||
|
|
// 开始收集细纲内容
|
|||
|
|
const outlineStart = trimmedLine.indexOf('细纲：') + 3;
|
|||
|
|
chapter.outline = trimmedLine.substring(outlineStart).trim();
|
|||
|
|
inOutline = true;
|
|||
|
|
} else if (trimmedLine.includes('预计字数：')) {
|
|||
|
|
// 解析字数
|
|||
|
|
const wordMatch = trimmedLine.match(/(\d+)/);
|
|||
|
|
if (wordMatch) {
|
|||
|
|
chapter.estimatedWords = parseInt(wordMatch[1]);
|
|||
|
|
}
|
|||
|
|
inOutline = false; // 细纲结束
|
|||
|
|
} else if (inOutline && trimmedLine && !trimmedLine.includes('第') && !trimmedLine.includes('模块')) {
|
|||
|
|
// 继续收集细纲内容
|
|||
|
|
if (chapter.outline) {
|
|||
|
|
chapter.outline += ' ' + trimmedLine;
|
|||
|
|
} else {
|
|||
|
|
chapter.outline = trimmedLine;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 如果没有找到章节标题，使用默认值
|
|||
|
|
if (!foundChapter) {
|
|||
|
|
console.warn(`章节${chapterNumber}解析失败，使用默认值`);
|
|||
|
|
chapter.title = `第${chapterNumber}章`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 确保细纲不为空
|
|||
|
|
if (!chapter.outline) {
|
|||
|
|
chapter.outline = `第${chapterNumber}章的详细细纲（待补充）`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return chapter;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const parseBaseSettings = (response: string) => {
|
|||
|
|
const settings: any = {
|
|||
|
|
storyOutline: '',
|
|||
|
|
plotStructure: '',
|
|||
|
|
characters: ''
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const lines = response.split('\n');
|
|||
|
|
let currentSection = '';
|
|||
|
|
let content = '';
|
|||
|
|
|
|||
|
|
lines.forEach(line => {
|
|||
|
|
if (line.startsWith('## ')) {
|
|||
|
|
if (currentSection && content) {
|
|||
|
|
switch(currentSection) {
|
|||
|
|
case '📖 故事大纲':
|
|||
|
|
case '故事大纲':
|
|||
|
|
settings.storyOutline = content.trim();
|
|||
|
|
break;
|
|||
|
|
case '🏗️ 情节结构':
|
|||
|
|
case '情节结构':
|
|||
|
|
settings.plotStructure = content.trim();
|
|||
|
|
break;
|
|||
|
|
case '👥 人物设定':
|
|||
|
|
case '人物设定':
|
|||
|
|
settings.characters = content.trim();
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
currentSection = line.replace('## ', '').trim();
|
|||
|
|
content = '';
|
|||
|
|
} else if (line.trim()) {
|
|||
|
|
content += line + '\n';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 处理最后一个section
|
|||
|
|
if (currentSection && content) {
|
|||
|
|
if (currentSection.includes('故事大纲')) {
|
|||
|
|
settings.storyOutline = content.trim();
|
|||
|
|
} else if (currentSection.includes('情节结构')) {
|
|||
|
|
settings.plotStructure = content.trim();
|
|||
|
|
} else if (currentSection.includes('人物设定')) {
|
|||
|
|
settings.characters = content.trim();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return settings;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const parseChapterBatch = (response: string, startChapter: number, metadata: any) => {
|
|||
|
|
const chapters: any[] = [];
|
|||
|
|
const lines = response.split('\n');
|
|||
|
|
let currentChapter: any = null;
|
|||
|
|
let expectedChapterNum = startChapter;
|
|||
|
|
|
|||
|
|
lines.forEach(line => {
|
|||
|
|
// 匹配章节标题行：第1章：意外穿越 - 模块1
|
|||
|
|
const chapterMatch = line.match(/第(\d+)章[：:]\s*(.+?)\s*[-—]\s*模块(\d+)/);
|
|||
|
|
if (chapterMatch) {
|
|||
|
|
if (currentChapter && currentChapter.chapterNumber) {
|
|||
|
|
chapters.push(currentChapter);
|
|||
|
|
}
|
|||
|
|
currentChapter = {
|
|||
|
|
chapterNumber: parseInt(chapterMatch[1]),
|
|||
|
|
title: chapterMatch[2].trim(),
|
|||
|
|
moduleNumber: parseInt(chapterMatch[3]),
|
|||
|
|
outline: '',
|
|||
|
|
estimatedWords: metadata.avgWordsPerChapter
|
|||
|
|
};
|
|||
|
|
expectedChapterNum++;
|
|||
|
|
} else if (line.includes('细纲：') && currentChapter) {
|
|||
|
|
currentChapter.outline = line.replace('细纲：', '').trim();
|
|||
|
|
} else if (line.includes('预计字数：') && currentChapter) {
|
|||
|
|
const wordMatch = line.match(/(\d+)/);
|
|||
|
|
if (wordMatch) {
|
|||
|
|
currentChapter.estimatedWords = parseInt(wordMatch[1]);
|
|||
|
|
}
|
|||
|
|
} else if (line.trim() && currentChapter && !line.includes('第') && !line.includes('模块')) {
|
|||
|
|
if (currentChapter.outline) {
|
|||
|
|
currentChapter.outline += ' ' + line.trim();
|
|||
|
|
} else {
|
|||
|
|
currentChapter.outline = line.trim();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (currentChapter && currentChapter.chapterNumber) {
|
|||
|
|
chapters.push(currentChapter);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return chapters;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleConfirmSettings = async () => {
|
|||
|
|
if (!novel || !generatedSettings || !id) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 确保保存所有章节信息，包括未生成的章节
|
|||
|
|
const completeSettings = {
|
|||
|
|
...generatedSettings,
|
|||
|
|
// 确保章节数组包含所有章节的占位符
|
|||
|
|
chapters: Array.from({ length: generatedSettings.chapterCount }, (_, i) => {
|
|||
|
|
const chapterNum = i + 1;
|
|||
|
|
const existingChapter = generatedSettings.chapters?.find((ch: any) => ch.chapterNumber === chapterNum);
|
|||
|
|
|
|||
|
|
// 如果该章节已存在，使用现有数据
|
|||
|
|
if (existingChapter) {
|
|||
|
|
return existingChapter;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果该章节不存在，创建占位符
|
|||
|
|
return {
|
|||
|
|
chapterNumber: chapterNum,
|
|||
|
|
title: `第${chapterNum}章（待生成标题）`,
|
|||
|
|
moduleNumber: Math.min(Math.ceil(chapterNum / Math.ceil(generatedSettings.chapterCount / generatedSettings.moduleCount)), generatedSettings.moduleCount),
|
|||
|
|
outline: `第${chapterNum}章的细纲（待生成）`,
|
|||
|
|
estimatedWords: Math.round(generatedSettings.targetWordCount / generatedSettings.chapterCount),
|
|||
|
|
status: 'pending'
|
|||
|
|
};
|
|||
|
|
})
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 生成并保存设置文件
|
|||
|
|
const settingFilePath = await NovelSettingManager.generateAndSaveSettingFile(
|
|||
|
|
novel.title,
|
|||
|
|
completeSettings
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 更新小说记录
|
|||
|
|
await storage.updateNovel(id, {
|
|||
|
|
generatedSettings: completeSettings,
|
|||
|
|
settingFilePath,
|
|||
|
|
outline: completeSettings.storyOutline || novel.outline,
|
|||
|
|
targetWordCount: completeSettings.targetWordCount
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
message.success('设定已保存并生成了配置文件，现在可以开始创作章节！');
|
|||
|
|
|
|||
|
|
// 更新本地状态
|
|||
|
|
setGeneratedSettings(completeSettings);
|
|||
|
|
|
|||
|
|
// 重新加载数据
|
|||
|
|
await loadNovel();
|
|||
|
|
|
|||
|
|
} catch (error: any) {
|
|||
|
|
message.error(error.message || '保存失败，请重试');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleEditSettings = () => {
|
|||
|
|
if (generatedSettings) {
|
|||
|
|
editForm.setFieldsValue({
|
|||
|
|
storyOutline: generatedSettings.storyOutline,
|
|||
|
|
plotStructure: generatedSettings.plotStructure,
|
|||
|
|
characters: generatedSettings.characters,
|
|||
|
|
targetWordCount: generatedSettings.targetWordCount,
|
|||
|
|
chapterCount: generatedSettings.chapterCount,
|
|||
|
|
chapterOutline: generatedSettings.chapterOutline
|
|||
|
|
});
|
|||
|
|
setEditModalVisible(true);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSaveEdit = async () => {
|
|||
|
|
try {
|
|||
|
|
const values = await editForm.validateFields();
|
|||
|
|
|
|||
|
|
if (!novel?.generatedSettings) return;
|
|||
|
|
|
|||
|
|
// 更新generatedSettings
|
|||
|
|
const updatedSettings = {
|
|||
|
|
...novel.generatedSettings,
|
|||
|
|
...values
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 保存到数据库
|
|||
|
|
await storage.updateNovel(novel.id, {
|
|||
|
|
generatedSettings: updatedSettings
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 更新本地状态
|
|||
|
|
setNovel({
|
|||
|
|
...novel,
|
|||
|
|
generatedSettings: updatedSettings
|
|||
|
|
});
|
|||
|
|
setGeneratedSettings(updatedSettings);
|
|||
|
|
|
|||
|
|
setEditModalVisible(false);
|
|||
|
|
message.success('设定更新成功');
|
|||
|
|
} catch (error) {
|
|||
|
|
message.error('保存失败');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleViewChapter = (chapter: ChapterOutline) => {
|
|||
|
|
setViewingChapter(chapter);
|
|||
|
|
setChapterViewModalVisible(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleEditChapter = (chapter: ChapterOutline) => {
|
|||
|
|
setEditingChapter(chapter);
|
|||
|
|
chapterEditForm.setFieldsValue({
|
|||
|
|
title: chapter.title,
|
|||
|
|
moduleNumber: chapter.moduleNumber,
|
|||
|
|
outline: chapter.outline,
|
|||
|
|
estimatedWords: chapter.estimatedWords
|
|||
|
|
});
|
|||
|
|
setChapterEditModalVisible(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSaveChapterEdit = async () => {
|
|||
|
|
try {
|
|||
|
|
const values = await chapterEditForm.validateFields();
|
|||
|
|
|
|||
|
|
if (!generatedSettings || !editingChapter) return;
|
|||
|
|
|
|||
|
|
// 更新章节信息
|
|||
|
|
const updatedChapters = generatedSettings.chapters.map((chapter: any) =>
|
|||
|
|
chapter.chapterNumber === editingChapter.chapterNumber
|
|||
|
|
? { ...chapter, ...values }
|
|||
|
|
: chapter
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 更新generatedSettings
|
|||
|
|
const updatedSettings = {
|
|||
|
|
...generatedSettings,
|
|||
|
|
chapters: updatedChapters
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
setGeneratedSettings(updatedSettings);
|
|||
|
|
|
|||
|
|
// 如果已保存设定，同时更新到数据库
|
|||
|
|
if (novel?.settingFilePath) {
|
|||
|
|
await storage.updateNovel(novel.id, {
|
|||
|
|
generatedSettings: updatedSettings
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setChapterEditModalVisible(false);
|
|||
|
|
chapterEditForm.resetFields();
|
|||
|
|
message.success('章节标题和细纲更新成功');
|
|||
|
|
} catch (error) {
|
|||
|
|
message.error('保存失败');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleRegenerate = () => {
|
|||
|
|
setPreviewVisible(false);
|
|||
|
|
setGeneratedSettings(null);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
return (
|
|||
|
|
<div style={{ textAlign: 'center', padding: '50px' }}>
|
|||
|
|
<Spin size="large" tip="加载中..." />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!novel) {
|
|||
|
|
return (
|
|||
|
|
<div style={{ textAlign: 'center', padding: '50px' }}>
|
|||
|
|
<Spin size="large" />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<Card
|
|||
|
|
title={
|
|||
|
|
<Space>
|
|||
|
|
<Button
|
|||
|
|
icon={<ArrowLeftOutlined />}
|
|||
|
|
onClick={() => navigate('/novels')}
|
|||
|
|
style={{ marginRight: '8px' }}
|
|||
|
|
/>
|
|||
|
|
<span>AI 生成小说设定</span>
|
|||
|
|
</Space>
|
|||
|
|
}
|
|||
|
|
extra={
|
|||
|
|
novel.generatedSettings && (
|
|||
|
|
<Tag color="success">已完善设定</Tag>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
style={{ maxWidth: '800px', margin: '0 auto' }}
|
|||
|
|
>
|
|||
|
|
<Alert
|
|||
|
|
message="AI设定生成"
|
|||
|
|
description="输入小说基本要求，AI将为您生成完整的故事大纲、人物设定、章节规划等内容。生成的设定将直接在页面上展示。"
|
|||
|
|
type="info"
|
|||
|
|
showIcon
|
|||
|
|
style={{ marginBottom: '16px' }}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Form
|
|||
|
|
form={form}
|
|||
|
|
layout="horizontal"
|
|||
|
|
labelCol={{ span: 6 }}
|
|||
|
|
wrapperCol={{ span: 18 }}
|
|||
|
|
>
|
|||
|
|
<Form.Item
|
|||
|
|
label="小说名称"
|
|||
|
|
name="title"
|
|||
|
|
rules={[{ required: true, message: '请输入小说名称' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入小说名称" disabled={!!novel} />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
label="题材类型"
|
|||
|
|
name="genre"
|
|||
|
|
rules={[{ required: true, message: '请选择题材类型' }]}
|
|||
|
|
>
|
|||
|
|
{novel?.genre ? (
|
|||
|
|
// 已有题材，只做展示
|
|||
|
|
<div>
|
|||
|
|
<Tag color="blue" style={{ fontSize: '14px', padding: '4px 12px' }}>
|
|||
|
|
{novel.genre}
|
|||
|
|
</Tag>
|
|||
|
|
<span style={{ fontSize: '12px', color: '#8c8c8c', marginLeft: '8px' }}>
|
|||
|
|
题材已确定
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
// 还没有选择题材，显示选择框
|
|||
|
|
<Select
|
|||
|
|
placeholder="请选择题材类型"
|
|||
|
|
showSearch
|
|||
|
|
style={{ width: '100%' }}
|
|||
|
|
>
|
|||
|
|
{NOVEL_GENRES.map(genre => (
|
|||
|
|
<Option key={genre} value={genre}>
|
|||
|
|
{genre}
|
|||
|
|
</Option>
|
|||
|
|
))}
|
|||
|
|
</Select>
|
|||
|
|
)}
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
label="目标字数"
|
|||
|
|
name="targetWordCount"
|
|||
|
|
rules={[{ required: true, message: '请选择目标字数' }]}
|
|||
|
|
>
|
|||
|
|
<Radio.Group
|
|||
|
|
style={{ width: '100%' }}
|
|||
|
|
disabled={!!novel?.generatedSettings}
|
|||
|
|
>
|
|||
|
|
<Space wrap>
|
|||
|
|
{WORD_COUNT_OPTIONS.map(option => (
|
|||
|
|
<Radio.Button key={option.value} value={option.value}>
|
|||
|
|
{option.label}
|
|||
|
|
</Radio.Button>
|
|||
|
|
))}
|
|||
|
|
</Space>
|
|||
|
|
</Radio.Group>
|
|||
|
|
{novel?.generatedSettings && (
|
|||
|
|
<div style={{ fontSize: '12px', color: '#ff4d4f', marginTop: '4px' }}>
|
|||
|
|
字数已固定，不能修改
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
label="特殊要求"
|
|||
|
|
name="customRequirements"
|
|||
|
|
>
|
|||
|
|
<TextArea
|
|||
|
|
rows={2}
|
|||
|
|
placeholder="可选：描述您对这部小说的特殊要求或想法"
|
|||
|
|
disabled={!!novel?.generatedSettings}
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item wrapperCol={{ offset: 6 }}>
|
|||
|
|
<Space>
|
|||
|
|
<Button
|
|||
|
|
type="primary"
|
|||
|
|
icon={<RobotOutlined />}
|
|||
|
|
onClick={handleGenerateSettings}
|
|||
|
|
loading={generating}
|
|||
|
|
disabled={!!novel?.generatedSettings}
|
|||
|
|
>
|
|||
|
|
{generating ? 'AI生成中...' : 'AI生成设定'}
|
|||
|
|
</Button>
|
|||
|
|
|
|||
|
|
|
|||
|
|
{novel.generatedSettings && (
|
|||
|
|
<Button
|
|||
|
|
type="default"
|
|||
|
|
onClick={() => setGeneratedSettings(novel.generatedSettings)}
|
|||
|
|
>
|
|||
|
|
刷新显示
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</Space>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* 生成的设定内容直接展示 */}
|
|||
|
|
{generatedSettings && (
|
|||
|
|
<div style={{ marginTop: '24px', maxWidth: '1200px', margin: '0 auto' }}>
|
|||
|
|
{/* 设定概览和操作按钮 */}
|
|||
|
|
<Card
|
|||
|
|
title="📊 小说设定已生成"
|
|||
|
|
style={{ marginBottom: '16px' }}
|
|||
|
|
extra={
|
|||
|
|
<Space>
|
|||
|
|
<Button
|
|||
|
|
type="primary"
|
|||
|
|
icon={<CheckOutlined />}
|
|||
|
|
onClick={handleConfirmSettings}
|
|||
|
|
disabled={!!novel?.settingFilePath}
|
|||
|
|
>
|
|||
|
|
{novel?.settingFilePath ? '设定已保存' : '确认并保存'}
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
icon={<EditOutlined />}
|
|||
|
|
onClick={() => setEditModalVisible(true)}
|
|||
|
|
>
|
|||
|
|
编辑设定
|
|||
|
|
</Button>
|
|||
|
|
</Space>
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<Row gutter={16}>
|
|||
|
|
<Col span={6}>
|
|||
|
|
<div style={{ textAlign: 'center', padding: '12px', background: '#f0f9ff', borderRadius: '6px' }}>
|
|||
|
|
<div style={{ fontSize: '20px', fontWeight: 'bold', color: '#1890ff' }}>
|
|||
|
|
{generatedSettings.targetWordCount.toLocaleString()}
|
|||
|
|
</div>
|
|||
|
|
<div style={{ fontSize: '12px', color: '#666', marginTop: '2px' }}>
|
|||
|
|
目标字数
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={6}>
|
|||
|
|
<div style={{ textAlign: 'center', padding: '12px', background: '#f0f9ff', borderRadius: '6px' }}>
|
|||
|
|
<div style={{ fontSize: '20px', fontWeight: 'bold', color: '#1890ff' }}>
|
|||
|
|
{generatedSettings.chapterCount}
|
|||
|
|
</div>
|
|||
|
|
<div style={{ fontSize: '12px', color: '#666', marginTop: '2px' }}>
|
|||
|
|
章节数量
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={6}>
|
|||
|
|
<div style={{ textAlign: 'center', padding: '12px', background: '#f0f9ff', borderRadius: '6px' }}>
|
|||
|
|
<div style={{ fontSize: '20px', fontWeight: 'bold', color: '#1890ff' }}>
|
|||
|
|
{generatedSettings.moduleCount}
|
|||
|
|
</div>
|
|||
|
|
<div style={{ fontSize: '12px', color: '#666', marginTop: '2px' }}>
|
|||
|
|
模块数量
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={6}>
|
|||
|
|
<div style={{ textAlign: 'center', padding: '12px', background: '#f0f9ff', borderRadius: '6px' }}>
|
|||
|
|
<div style={{ fontSize: '20px', fontWeight: 'bold', color: '#1890ff' }}>
|
|||
|
|
{Math.round(generatedSettings.targetWordCount / generatedSettings.chapterCount)}
|
|||
|
|
</div>
|
|||
|
|
<div style={{ fontSize: '12px', color: '#666', marginTop: '2px' }}>
|
|||
|
|
每章字数
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Divider style={{ margin: '16px 0' }} />
|
|||
|
|
|
|||
|
|
<Row gutter={16}>
|
|||
|
|
<Col span={12}>
|
|||
|
|
<div style={{ marginBottom: '12px' }}>
|
|||
|
|
<h4 style={{ fontSize: '13px', fontWeight: 'bold', marginBottom: '6px' }}>📖 故事大纲</h4>
|
|||
|
|
<div style={{
|
|||
|
|
padding: '8px',
|
|||
|
|
background: '#f5f5f5',
|
|||
|
|
borderRadius: '4px',
|
|||
|
|
lineHeight: '1.6',
|
|||
|
|
fontSize: '13px'
|
|||
|
|
}}>
|
|||
|
|
{generatedSettings.storyOutline || '暂无内容'}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={12}>
|
|||
|
|
<div style={{ marginBottom: '12px' }}>
|
|||
|
|
<h4 style={{ fontSize: '13px', fontWeight: 'bold', marginBottom: '6px' }}>🏗️ 情节结构</h4>
|
|||
|
|
<div style={{
|
|||
|
|
padding: '8px',
|
|||
|
|
background: '#f5f5f5',
|
|||
|
|
borderRadius: '4px',
|
|||
|
|
lineHeight: '1.6',
|
|||
|
|
fontSize: '13px',
|
|||
|
|
whiteSpace: 'pre-line'
|
|||
|
|
}}>
|
|||
|
|
{generatedSettings.plotStructure || '暂无内容'}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<div style={{ marginBottom: '12px' }}>
|
|||
|
|
<h4 style={{ fontSize: '13px', fontWeight: 'bold', marginBottom: '6px' }}>👥 人物设定</h4>
|
|||
|
|
<div style={{
|
|||
|
|
padding: '8px',
|
|||
|
|
background: '#f5f5f5',
|
|||
|
|
borderRadius: '4px',
|
|||
|
|
lineHeight: '1.6',
|
|||
|
|
fontSize: '13px',
|
|||
|
|
whiteSpace: 'pre-line',
|
|||
|
|
maxHeight: '100px',
|
|||
|
|
overflowY: 'auto'
|
|||
|
|
}}>
|
|||
|
|
{generatedSettings.characters || '暂无内容'}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* 章节列表和操作区域 */}
|
|||
|
|
<Card
|
|||
|
|
title={
|
|||
|
|
<Space>
|
|||
|
|
<span>📚 章节规划列表</span>
|
|||
|
|
<Tag color="blue">{generatedSettings.chapters?.length || 0}/{generatedSettings.chapterCount}章</Tag>
|
|||
|
|
{novel?.settingFilePath && (
|
|||
|
|
<Tag color="success">设定已保存</Tag>
|
|||
|
|
)}
|
|||
|
|
</Space>
|
|||
|
|
}
|
|||
|
|
style={{ marginBottom: '16px' }}
|
|||
|
|
extra={
|
|||
|
|
<Space>
|
|||
|
|
{generatedSettings.chapters.length < generatedSettings.chapterCount && (
|
|||
|
|
<>
|
|||
|
|
<Button
|
|||
|
|
icon={<RobotOutlined />}
|
|||
|
|
onClick={() => handleGenerateSingleChapter(generatedSettings.chapters.length + 1)}
|
|||
|
|
disabled={generating}
|
|||
|
|
>
|
|||
|
|
生成下一章标题+细纲
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
icon={<RobotOutlined />}
|
|||
|
|
onClick={() => {
|
|||
|
|
const nextChapter = generatedSettings.chapters.length + 1;
|
|||
|
|
const endChapter = Math.min(nextChapter + 4, generatedSettings.chapterCount);
|
|||
|
|
handleGenerateBatchChapters(nextChapter, endChapter);
|
|||
|
|
}}
|
|||
|
|
disabled={generating}
|
|||
|
|
>
|
|||
|
|
批量生成5章标题+细纲
|
|||
|
|
</Button>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
<Button
|
|||
|
|
type="primary"
|
|||
|
|
icon={<RobotOutlined />}
|
|||
|
|
disabled={!novel?.settingFilePath}
|
|||
|
|
onClick={() => navigate(`/novels/${id}`)}
|
|||
|
|
>
|
|||
|
|
前往创作
|
|||
|
|
</Button>
|
|||
|
|
</Space>
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<Alert
|
|||
|
|
message="章节标题和细纲规划"
|
|||
|
|
description={
|
|||
|
|
<div>
|
|||
|
|
<p><strong>工作流程：</strong>先生成章节标题+细纲，后续再基于这些规划生成具体的章节内容。</p>
|
|||
|
|
<p>• <strong>单个生成</strong>：点击"生成下一章"生成下一章的标题和细纲</p>
|
|||
|
|
<p>• <strong>批量生成</strong>：点击"批量生成5章"一次生成多个章节的标题和细纲</p>
|
|||
|
|
<p>• <strong>单独生成</strong>：直接点击下方的章节卡片单独生成某章的标题和细纲</p>
|
|||
|
|
<p>• <strong>已规划章节</strong>：显示为绿色，可以查看或编辑标题和细纲</p>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
type="info"
|
|||
|
|
showIcon
|
|||
|
|
style={{ marginBottom: '16px' }}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<div style={{
|
|||
|
|
display: 'grid',
|
|||
|
|
gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
|
|||
|
|
gap: '12px'
|
|||
|
|
}}>
|
|||
|
|
{Array.from({ length: generatedSettings.chapterCount }, (_, i) => {
|
|||
|
|
const chapterNum = i + 1;
|
|||
|
|
const chapter = generatedSettings.chapters?.find((ch: any) => ch.chapterNumber === chapterNum);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Card
|
|||
|
|
key={chapterNum}
|
|||
|
|
size="small"
|
|||
|
|
hoverable
|
|||
|
|
style={{
|
|||
|
|
border: chapter ? '1px solid #52c41a' : '1px solid #f0f0f0',
|
|||
|
|
borderRadius: '6px',
|
|||
|
|
background: chapter ? '#f6ffed' : 'white'
|
|||
|
|
}}
|
|||
|
|
actions={[
|
|||
|
|
chapter ? (
|
|||
|
|
<Button
|
|||
|
|
key="view"
|
|||
|
|
type="text"
|
|||
|
|
size="small"
|
|||
|
|
icon={<EyeOutlined />}
|
|||
|
|
onClick={() => handleViewChapter(chapter)}
|
|||
|
|
>
|
|||
|
|
查看
|
|||
|
|
</Button>
|
|||
|
|
) : (
|
|||
|
|
<Button
|
|||
|
|
key="generate"
|
|||
|
|
type="primary"
|
|||
|
|
size="small"
|
|||
|
|
icon={<RobotOutlined />}
|
|||
|
|
onClick={() => handleGenerateSingleChapter(chapterNum)}
|
|||
|
|
disabled={generating}
|
|||
|
|
>
|
|||
|
|
生成标题+细纲
|
|||
|
|
</Button>
|
|||
|
|
),
|
|||
|
|
<Button
|
|||
|
|
key="edit"
|
|||
|
|
type="text"
|
|||
|
|
size="small"
|
|||
|
|
icon={<EditOutlined />}
|
|||
|
|
onClick={() => chapter ? handleEditChapter(chapter) : null}
|
|||
|
|
disabled={!chapter}
|
|||
|
|
>
|
|||
|
|
编辑
|
|||
|
|
</Button>
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
<Card.Meta
|
|||
|
|
title={
|
|||
|
|
<Space>
|
|||
|
|
<Tag color={chapter ? "green" : "blue"}>第{chapterNum}章</Tag>
|
|||
|
|
{chapter?.moduleNumber && (
|
|||
|
|
<Tag color="cyan">模块{chapter.moduleNumber}</Tag>
|
|||
|
|
)}
|
|||
|
|
{chapter?.estimatedWords && (
|
|||
|
|
<Tag color="orange">{chapter.estimatedWords}字</Tag>
|
|||
|
|
)}
|
|||
|
|
{chapter && (
|
|||
|
|
<Tag color="success">已生成</Tag>
|
|||
|
|
)}
|
|||
|
|
</Space>
|
|||
|
|
}
|
|||
|
|
description={
|
|||
|
|
<div>
|
|||
|
|
<div style={{
|
|||
|
|
fontWeight: 500,
|
|||
|
|
marginBottom: '6px',
|
|||
|
|
fontSize: '14px',
|
|||
|
|
color: '#262626'
|
|||
|
|
}}>
|
|||
|
|
{chapter?.title || `第${chapterNum}章（待生成标题+细纲）`}
|
|||
|
|
</div>
|
|||
|
|
<div style={{
|
|||
|
|
fontSize: '12px',
|
|||
|
|
color: '#666',
|
|||
|
|
lineHeight: '1.5',
|
|||
|
|
display: '-webkit-box',
|
|||
|
|
WebkitLineClamp: 3,
|
|||
|
|
WebkitBoxOrient: 'vertical',
|
|||
|
|
overflow: 'hidden'
|
|||
|
|
}}>
|
|||
|
|
{chapter?.outline || '点击下方按钮生成章节标题和细纲...'}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 编辑设定Modal */}
|
|||
|
|
<Modal
|
|||
|
|
title="编辑小说设定"
|
|||
|
|
open={editModalVisible}
|
|||
|
|
onCancel={() => setEditModalVisible(false)}
|
|||
|
|
onOk={handleSaveEdit}
|
|||
|
|
width={800}
|
|||
|
|
okText="保存修改"
|
|||
|
|
cancelText="取消"
|
|||
|
|
>
|
|||
|
|
<Form
|
|||
|
|
form={editForm}
|
|||
|
|
layout="vertical"
|
|||
|
|
>
|
|||
|
|
<Form.Item
|
|||
|
|
label="故事大纲"
|
|||
|
|
name="storyOutline"
|
|||
|
|
>
|
|||
|
|
<TextArea rows={3} />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
label="情节结构"
|
|||
|
|
name="plotStructure"
|
|||
|
|
>
|
|||
|
|
<TextArea rows={4} />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
label="人物设定"
|
|||
|
|
name="characters"
|
|||
|
|
>
|
|||
|
|
<TextArea rows={6} />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
</Modal>
|
|||
|
|
|
|||
|
|
{/* 章节编辑Modal */}
|
|||
|
|
<Modal
|
|||
|
|
title={`编辑第${editingChapter?.chapterNumber}章`}
|
|||
|
|
open={chapterEditModalVisible}
|
|||
|
|
onCancel={() => setChapterEditModalVisible(false)}
|
|||
|
|
onOk={handleSaveChapterEdit}
|
|||
|
|
width={700}
|
|||
|
|
okText="保存"
|
|||
|
|
cancelText="取消"
|
|||
|
|
>
|
|||
|
|
<Form
|
|||
|
|
form={chapterEditForm}
|
|||
|
|
layout="vertical"
|
|||
|
|
>
|
|||
|
|
<Form.Item
|
|||
|
|
label="章节标题"
|
|||
|
|
name="title"
|
|||
|
|
rules={[{ required: true, message: '请输入章节标题' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入章节标题" />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
label="所属模块"
|
|||
|
|
name="moduleNumber"
|
|||
|
|
>
|
|||
|
|
<InputNumber
|
|||
|
|
min={1}
|
|||
|
|
max={10}
|
|||
|
|
style={{ width: '100%' }}
|
|||
|
|
placeholder="请输入模块编号"
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
label="章节细纲"
|
|||
|
|
name="outline"
|
|||
|
|
rules={[
|
|||
|
|
{ required: true, message: '请输入章节细纲' },
|
|||
|
|
{
|
|||
|
|
validator: (_, value) => {
|
|||
|
|
if (value && value.length >= 100 && value.length <= 200) {
|
|||
|
|
return Promise.resolve();
|
|||
|
|
}
|
|||
|
|
if (value && value.length < 100) {
|
|||
|
|
return Promise.reject(new Error('细纲不能少于100字'));
|
|||
|
|
}
|
|||
|
|
if (value && value.length > 200) {
|
|||
|
|
return Promise.reject(new Error('细纲不能超过200字'));
|
|||
|
|
}
|
|||
|
|
return Promise.resolve();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]}
|
|||
|
|
extra="建议100-200字，当前字数会实时显示"
|
|||
|
|
>
|
|||
|
|
<TextArea
|
|||
|
|
rows={6}
|
|||
|
|
placeholder="请输入本章的详细细纲（100-200字）..."
|
|||
|
|
showCount
|
|||
|
|
maxLength={200}
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
label="预计字数"
|
|||
|
|
name="estimatedWords"
|
|||
|
|
>
|
|||
|
|
<InputNumber
|
|||
|
|
min={900}
|
|||
|
|
max={1200}
|
|||
|
|
step={50}
|
|||
|
|
style={{ width: '100%' }}
|
|||
|
|
placeholder="请输入预计字数"
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
</Modal>
|
|||
|
|
|
|||
|
|
{/* 查看章节规划详情Modal */}
|
|||
|
|
<Modal
|
|||
|
|
title={`第${viewingChapter?.chapterNumber}章规划详情：${viewingChapter?.title}`}
|
|||
|
|
open={chapterViewModalVisible}
|
|||
|
|
onCancel={() => setChapterViewModalVisible(false)}
|
|||
|
|
width={700}
|
|||
|
|
footer={[
|
|||
|
|
<Button key="close" onClick={() => setChapterViewModalVisible(false)}>
|
|||
|
|
关闭
|
|||
|
|
</Button>,
|
|||
|
|
<Button
|
|||
|
|
key="edit"
|
|||
|
|
type="primary"
|
|||
|
|
icon={<EditOutlined />}
|
|||
|
|
onClick={() => {
|
|||
|
|
setChapterViewModalVisible(false);
|
|||
|
|
if (viewingChapter) {
|
|||
|
|
handleEditChapter(viewingChapter);
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
编辑
|
|||
|
|
</Button>
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
{viewingChapter && (
|
|||
|
|
<div style={{ padding: '16px 0' }}>
|
|||
|
|
<div style={{ marginBottom: '24px' }}>
|
|||
|
|
<div style={{ fontSize: '14px', color: '#595959', marginBottom: '8px' }}>
|
|||
|
|
章节编号
|
|||
|
|
</div>
|
|||
|
|
<div style={{
|
|||
|
|
padding: '12px',
|
|||
|
|
background: '#f5f5f5',
|
|||
|
|
borderRadius: '6px',
|
|||
|
|
fontSize: '16px',
|
|||
|
|
fontWeight: 500
|
|||
|
|
}}>
|
|||
|
|
第{viewingChapter.chapterNumber}章
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style={{ marginBottom: '24px' }}>
|
|||
|
|
<div style={{ fontSize: '14px', color: '#595959', marginBottom: '8px' }}>
|
|||
|
|
章节标题
|
|||
|
|
</div>
|
|||
|
|
<div style={{
|
|||
|
|
padding: '12px',
|
|||
|
|
background: '#f5f5f5',
|
|||
|
|
borderRadius: '6px',
|
|||
|
|
fontSize: '16px',
|
|||
|
|
fontWeight: 500
|
|||
|
|
}}>
|
|||
|
|
{viewingChapter.title}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{viewingChapter.moduleNumber && (
|
|||
|
|
<div style={{ marginBottom: '24px' }}>
|
|||
|
|
<div style={{ fontSize: '14px', color: '#595959', marginBottom: '8px' }}>
|
|||
|
|
所属模块
|
|||
|
|
</div>
|
|||
|
|
<div style={{
|
|||
|
|
padding: '12px',
|
|||
|
|
background: '#f5f5f5',
|
|||
|
|
borderRadius: '6px'
|
|||
|
|
}}>
|
|||
|
|
<Tag color="cyan">模块{viewingChapter.moduleNumber}</Tag>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div style={{ marginBottom: '24px' }}>
|
|||
|
|
<div style={{ fontSize: '14px', color: '#595959', marginBottom: '8px' }}>
|
|||
|
|
预计字数
|
|||
|
|
</div>
|
|||
|
|
<div style={{
|
|||
|
|
padding: '12px',
|
|||
|
|
background: '#f5f5f5',
|
|||
|
|
borderRadius: '6px'
|
|||
|
|
}}>
|
|||
|
|
<Tag color="orange">{viewingChapter.estimatedWords || 1050}字</Tag>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style={{ marginBottom: '24px' }}>
|
|||
|
|
<div style={{ fontSize: '14px', color: '#595959', marginBottom: '8px' }}>
|
|||
|
|
章节细纲
|
|||
|
|
</div>
|
|||
|
|
<div style={{
|
|||
|
|
padding: '12px',
|
|||
|
|
background: '#f5f5f5',
|
|||
|
|
borderRadius: '6px',
|
|||
|
|
lineHeight: '1.8',
|
|||
|
|
fontSize: '14px',
|
|||
|
|
whiteSpace: 'pre-line',
|
|||
|
|
maxHeight: '300px',
|
|||
|
|
overflowY: 'auto'
|
|||
|
|
}}>
|
|||
|
|
{viewingChapter.outline}
|
|||
|
|
</div>
|
|||
|
|
<div style={{ marginTop: '8px', fontSize: '12px', color: '#8c8c8c' }}>
|
|||
|
|
细纲字数：{viewingChapter.outline?.length || 0}字（建议100-200字）
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</Modal>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default NovelGenerate;
|