414 lines
13 KiB
TypeScript
414 lines
13 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { Card, Button, Modal, Form, Input, message, Popconfirm, Row, Col, Tag, Select } from 'antd';
|
||
import { PlusOutlined, EditOutlined, DeleteOutlined, BookOutlined, EyeOutlined } from '@ant-design/icons';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { storage } from '../utils/indexedDB';
|
||
import { Novel } from '../types';
|
||
|
||
const { TextArea } = Input;
|
||
const { Option } = Select;
|
||
|
||
// 小说题材选项
|
||
const NOVEL_GENRES = [
|
||
'穿越',
|
||
'都市',
|
||
'修仙',
|
||
'武侠',
|
||
'玄幻',
|
||
'科幻',
|
||
'言情',
|
||
'历史',
|
||
'游戏',
|
||
'灵异',
|
||
'军事',
|
||
'悬疑',
|
||
'其他'
|
||
];
|
||
|
||
const NovelList: React.FC = () => {
|
||
const [novels, setNovels] = useState<Novel[]>([]);
|
||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||
const [viewModalVisible, setViewModalVisible] = useState(false);
|
||
const [editingNovel, setEditingNovel] = useState<Novel | null>(null);
|
||
const [viewingNovel, setViewingNovel] = useState<Novel | null>(null);
|
||
const [form] = Form.useForm();
|
||
const navigate = useNavigate();
|
||
|
||
useEffect(() => {
|
||
loadNovels();
|
||
}, []);
|
||
|
||
const loadNovels = async () => {
|
||
try {
|
||
const loadedNovels = await storage.getNovels();
|
||
setNovels(loadedNovels);
|
||
} catch (error) {
|
||
console.error('加载小说列表失败:', error);
|
||
message.error('加载小说列表失败');
|
||
}
|
||
};
|
||
|
||
const handleAddNovel = () => {
|
||
setEditingNovel(null);
|
||
form.resetFields();
|
||
setIsModalVisible(true);
|
||
};
|
||
|
||
const handleViewNovel = (novel: Novel) => {
|
||
setViewingNovel(novel);
|
||
setViewModalVisible(true);
|
||
};
|
||
|
||
const handleEditNovel = (novel: Novel) => {
|
||
setEditingNovel(novel);
|
||
form.setFieldsValue({
|
||
title: novel.title,
|
||
genre: novel.genre === '未分类' ? undefined : novel.genre,
|
||
outline: novel.outline
|
||
});
|
||
setIsModalVisible(true);
|
||
};
|
||
|
||
const handleDeleteNovel = async (id: string) => {
|
||
try {
|
||
await storage.deleteNovel(id);
|
||
await loadNovels();
|
||
message.success('小说删除成功');
|
||
} catch (error) {
|
||
console.error('删除小说失败:', error);
|
||
message.error('删除失败，请重试');
|
||
}
|
||
};
|
||
|
||
const handleModalOk = async () => {
|
||
try {
|
||
const values = await form.validateFields();
|
||
|
||
if (editingNovel) {
|
||
await storage.updateNovel(editingNovel.id, {
|
||
...values,
|
||
genre: values.genre || '未分类'
|
||
});
|
||
message.success('小说更新成功');
|
||
} else {
|
||
const newNovel: Novel = {
|
||
id: Date.now().toString(),
|
||
title: values.title,
|
||
genre: values.genre || '未分类',
|
||
outline: values.outline || '',
|
||
createdAt: new Date().toISOString(),
|
||
updatedAt: new Date().toISOString()
|
||
};
|
||
await storage.addNovel(newNovel);
|
||
message.success('小说创建成功，请前往AI生成页面完善设定');
|
||
}
|
||
|
||
await loadNovels();
|
||
setIsModalVisible(false);
|
||
form.resetFields();
|
||
} catch (error) {
|
||
console.error('保存小说失败:', error);
|
||
message.error('保存失败，请重试');
|
||
}
|
||
};
|
||
|
||
const handleModalCancel = () => {
|
||
setIsModalVisible(false);
|
||
form.resetFields();
|
||
setEditingNovel(null);
|
||
};
|
||
|
||
const handleCardClick = (id: string) => {
|
||
navigate(`/novels/${id}`);
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<div style={{ marginBottom: '24px' }}>
|
||
<h2 style={{ margin: 0, fontSize: '20px', fontWeight: 600, color: '#262626' }}>我的小说</h2>
|
||
<p style={{ margin: '8px 0 0 0', color: '#8c8c8c', fontSize: '14px' }}>管理和创作您的 AI 小说作品</p>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
|
||
<div style={{ fontSize: '14px', color: '#595959' }}>
|
||
共 {novels.length} 部小说
|
||
</div>
|
||
<Button
|
||
type="primary"
|
||
icon={<PlusOutlined />}
|
||
onClick={handleAddNovel}
|
||
size="large"
|
||
style={{ borderRadius: '6px' }}
|
||
>
|
||
新建小说
|
||
</Button>
|
||
</div>
|
||
|
||
{novels.length === 0 ? (
|
||
<div style={{
|
||
textAlign: 'center',
|
||
padding: '80px 20px',
|
||
background: 'white',
|
||
borderRadius: '8px',
|
||
border: '1px dashed #d9d9d9'
|
||
}}>
|
||
<BookOutlined style={{ fontSize: '48px', color: '#d9d9d9', marginBottom: '16px' }} />
|
||
<div style={{ fontSize: '16px', color: '#595959', marginBottom: '8px' }}>
|
||
还没有小说，开始创作您的第一部作品吧！
|
||
</div>
|
||
<div style={{ fontSize: '14px', color: '#8c8c8c' }}>
|
||
点击"新建小说"按钮开始您的创作之旅
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<Row gutter={[16, 16]}>
|
||
{novels.map((novel) => (
|
||
<Col xs={24} sm={12} md={8} lg={6} key={novel.id}>
|
||
<Card
|
||
hoverable
|
||
style={{
|
||
height: '100%',
|
||
borderRadius: '8px',
|
||
border: '1px solid #f0f0f0',
|
||
transition: 'all 0.3s ease'
|
||
}}
|
||
onClick={() => handleCardClick(novel.id)}
|
||
actions={[
|
||
<EyeOutlined
|
||
key="view"
|
||
style={{ color: '#52c41a' }}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleViewNovel(novel);
|
||
}}
|
||
/>,
|
||
<EditOutlined
|
||
key="edit"
|
||
style={{ color: '#1890ff' }}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleEditNovel(novel);
|
||
}}
|
||
/>,
|
||
<Popconfirm
|
||
title="确认删除"
|
||
description="确定要删除这部小说吗？所有章节内容也将被删除。"
|
||
onConfirm={(e) => {
|
||
e?.stopPropagation();
|
||
handleDeleteNovel(novel.id);
|
||
}}
|
||
onCancel={(e) => e?.stopPropagation()}
|
||
okText="确定"
|
||
cancelText="取消"
|
||
>
|
||
<DeleteOutlined
|
||
key="delete"
|
||
style={{ color: '#ff4d4f' }}
|
||
onClick={(e) => e.stopPropagation()}
|
||
/>
|
||
</Popconfirm>
|
||
]}
|
||
>
|
||
<Card.Meta
|
||
avatar={
|
||
<div style={{
|
||
width: '40px',
|
||
height: '40px',
|
||
borderRadius: '8px',
|
||
background: '#e6f7ff',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center'
|
||
}}>
|
||
<BookOutlined style={{ fontSize: '20px', color: '#1890ff' }} />
|
||
</div>
|
||
}
|
||
title={
|
||
<div style={{
|
||
fontSize: '16px',
|
||
fontWeight: 500,
|
||
color: '#262626',
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap'
|
||
}}>
|
||
{novel.title}
|
||
</div>
|
||
}
|
||
description={
|
||
<div>
|
||
<div style={{ marginBottom: '8px' }}>
|
||
<Tag color="blue">{novel.genre}</Tag>
|
||
{novel.generatedSettings && (
|
||
<Tag color="green">已完善设定</Tag>
|
||
)}
|
||
</div>
|
||
<div style={{
|
||
fontSize: '12px',
|
||
color: '#8c8c8c',
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
display: '-webkit-box',
|
||
WebkitLineClamp: 2,
|
||
WebkitBoxOrient: 'vertical',
|
||
lineHeight: '1.5'
|
||
}}>
|
||
{novel.outline || '暂无大纲'}
|
||
</div>
|
||
<div style={{ marginTop: '8px', fontSize: '11px', color: '#bfbfbf' }}>
|
||
创建于 {new Date(novel.createdAt).toLocaleDateString()}
|
||
</div>
|
||
</div>
|
||
}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
)}
|
||
|
||
<Modal
|
||
title={editingNovel ? '编辑小说' : '新建小说'}
|
||
open={isModalVisible}
|
||
onOk={handleModalOk}
|
||
onCancel={handleModalCancel}
|
||
width={600}
|
||
okText="确定"
|
||
cancelText="取消"
|
||
>
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
>
|
||
<Form.Item
|
||
label="书名"
|
||
name="title"
|
||
rules={[{ required: true, message: '请输入书名' }]}
|
||
>
|
||
<Input placeholder="请输入书名" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="题材类型"
|
||
name="genre"
|
||
rules={[{ required: true, message: '请选择题材类型' }]}
|
||
>
|
||
<Select
|
||
placeholder="请选择题材类型"
|
||
size="large"
|
||
showSearch
|
||
allowClear
|
||
>
|
||
{NOVEL_GENRES.map(genre => (
|
||
<Option key={genre} value={genre}>
|
||
{genre}
|
||
</Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="初步想法"
|
||
name="outline"
|
||
extra="可以简单描述您的初步想法，也可以留空，后续让AI帮您生成"
|
||
>
|
||
<TextArea
|
||
rows={4}
|
||
placeholder="简单描述您的创作想法..."
|
||
/>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
<Modal
|
||
title="小说详情"
|
||
open={viewModalVisible}
|
||
onCancel={() => setViewModalVisible(false)}
|
||
width={700}
|
||
footer={[
|
||
<Button key="close" onClick={() => setViewModalVisible(false)}>
|
||
关闭
|
||
</Button>
|
||
]}
|
||
>
|
||
{viewingNovel && (
|
||
<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
|
||
}}>
|
||
{viewingNovel.title}
|
||
</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="blue">{viewingNovel.genre}</Tag>
|
||
</div>
|
||
</div>
|
||
|
||
{viewingNovel.generatedSettings && (
|
||
<>
|
||
<div style={{ marginBottom: '24px' }}>
|
||
<div style={{ fontSize: '14px', color: '#595959', marginBottom: '8px' }}>
|
||
AI生成设定
|
||
</div>
|
||
<div style={{
|
||
padding: '12px',
|
||
background: '#f0f9ff',
|
||
borderRadius: '6px',
|
||
marginBottom: '12px'
|
||
}}>
|
||
<div><strong>目标字数：</strong>{viewingNovel.generatedSettings.targetWordCount}字</div>
|
||
<div><strong>章节数量：</strong>{viewingNovel.generatedSettings.chapterCount}章</div>
|
||
</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',
|
||
maxHeight: '200px',
|
||
overflowY: 'auto'
|
||
}}>
|
||
{viewingNovel.outline || '暂无大纲'}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ marginTop: '24px', paddingTop: '16px', borderTop: '1px solid #f0f0f0' }}>
|
||
<div style={{ fontSize: '12px', color: '#8c8c8c' }}>
|
||
创建时间：{new Date(viewingNovel.createdAt).toLocaleString()}
|
||
</div>
|
||
<div style={{ fontSize: '12px', color: '#8c8c8c', marginTop: '4px' }}>
|
||
更新时间：{new Date(viewingNovel.updatedAt).toLocaleString()}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default NovelList; |