update:1.更新AI生成角色/组织实现自动建立关系 2.新增AI续写大纲智能引入角色功能
This commit is contained in:
xiamuceer
+575
-240
File diff suppressed because it is too large
Load Diff
@@ -14,6 +14,7 @@ import {
|
||||
BankOutlined,
|
||||
EditOutlined,
|
||||
FundOutlined,
|
||||
HeartOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useStore } from '../store';
|
||||
import { useCharacterSync, useOutlineSync, useChapterSync } from '../store/hooks';
|
||||
@@ -66,7 +67,7 @@ export default function ProjectDetail() {
|
||||
// 加载项目基本信息
|
||||
const project = await projectApi.getProject(id);
|
||||
setCurrentProject(project);
|
||||
|
||||
|
||||
// 并行加载其他数据
|
||||
await Promise.all([
|
||||
refreshOutlines(id),
|
||||
@@ -138,6 +139,11 @@ export default function ProjectDetail() {
|
||||
// icon: <ToolOutlined />,
|
||||
// label: <Link to={`/project/${projectId}/polish`}>AI去味</Link>,
|
||||
// },
|
||||
{
|
||||
key: 'sponsor',
|
||||
icon: <HeartOutlined />,
|
||||
label: <Link to={`/project/${projectId}/sponsor`}>赞助支持</Link>,
|
||||
},
|
||||
];
|
||||
|
||||
// 根据当前路径动态确定选中的菜单项
|
||||
@@ -151,6 +157,7 @@ export default function ProjectDetail() {
|
||||
if (path.includes('/chapter-analysis')) return 'chapter-analysis';
|
||||
if (path.includes('/chapters')) return 'chapters';
|
||||
if (path.includes('/writing-styles')) return 'writing-styles';
|
||||
if (path.includes('/sponsor')) return 'sponsor';
|
||||
// if (path.includes('/polish')) return 'polish';
|
||||
return 'world-setting'; // 默认选中世界设定
|
||||
}, [location.pathname]);
|
||||
@@ -227,7 +234,7 @@ export default function ProjectDetail() {
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<h2 style={{
|
||||
margin: 0,
|
||||
color: '#fff',
|
||||
@@ -247,7 +254,7 @@ export default function ProjectDetail() {
|
||||
}}>
|
||||
{currentProject.title}
|
||||
</h2>
|
||||
|
||||
|
||||
{mobile && (
|
||||
<Button
|
||||
type="text"
|
||||
@@ -264,94 +271,94 @@ export default function ProjectDetail() {
|
||||
主页
|
||||
</Button>
|
||||
)}
|
||||
|
||||
|
||||
{!mobile && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', zIndex: 1 }}>
|
||||
<Row gutter={12} style={{ width: '450px', justifyContent: 'flex-end' }}>
|
||||
<Col>
|
||||
<Card
|
||||
size="small"
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.95)',
|
||||
borderRadius: '6px',
|
||||
border: 'none',
|
||||
minWidth: '80px',
|
||||
textAlign: 'center',
|
||||
padding: '4px 8px'
|
||||
}}
|
||||
styles={{ body: { padding: '8px' } }}
|
||||
>
|
||||
<Statistic
|
||||
title={<span style={{ fontSize: '11px', color: '#666' }}>大纲</span>}
|
||||
value={outlines.length}
|
||||
suffix="条"
|
||||
valueStyle={{ fontSize: '16px', fontWeight: 600, color: '#667eea' }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col>
|
||||
<Card
|
||||
size="small"
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.95)',
|
||||
borderRadius: '6px',
|
||||
border: 'none',
|
||||
minWidth: '80px',
|
||||
textAlign: 'center',
|
||||
padding: '4px 8px'
|
||||
}}
|
||||
styles={{ body: { padding: '8px' } }}
|
||||
>
|
||||
<Statistic
|
||||
title={<span style={{ fontSize: '11px', color: '#666' }}>角色</span>}
|
||||
value={characters.length}
|
||||
suffix="个"
|
||||
valueStyle={{ fontSize: '16px', fontWeight: 600, color: '#52c41a' }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col>
|
||||
<Card
|
||||
size="small"
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.95)',
|
||||
borderRadius: '6px',
|
||||
border: 'none',
|
||||
minWidth: '80px',
|
||||
textAlign: 'center',
|
||||
padding: '4px 8px'
|
||||
}}
|
||||
styles={{ body: { padding: '8px' } }}
|
||||
>
|
||||
<Statistic
|
||||
title={<span style={{ fontSize: '11px', color: '#666' }}>章节</span>}
|
||||
value={chapters.length}
|
||||
suffix="章"
|
||||
valueStyle={{ fontSize: '16px', fontWeight: 600, color: '#1890ff' }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col>
|
||||
<Card
|
||||
size="small"
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.95)',
|
||||
borderRadius: '6px',
|
||||
border: 'none',
|
||||
minWidth: '80px',
|
||||
textAlign: 'center',
|
||||
padding: '4px 8px'
|
||||
}}
|
||||
styles={{ body: { padding: '8px' } }}
|
||||
>
|
||||
<Statistic
|
||||
title={<span style={{ fontSize: '11px', color: '#666' }}>已写</span>}
|
||||
value={currentProject.current_words}
|
||||
suffix="字"
|
||||
valueStyle={{ fontSize: '16px', fontWeight: 600, color: '#fa8c16' }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col>
|
||||
<Card
|
||||
size="small"
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.95)',
|
||||
borderRadius: '6px',
|
||||
border: 'none',
|
||||
minWidth: '80px',
|
||||
textAlign: 'center',
|
||||
padding: '4px 8px'
|
||||
}}
|
||||
styles={{ body: { padding: '8px' } }}
|
||||
>
|
||||
<Statistic
|
||||
title={<span style={{ fontSize: '11px', color: '#666' }}>大纲</span>}
|
||||
value={outlines.length}
|
||||
suffix="条"
|
||||
valueStyle={{ fontSize: '16px', fontWeight: 600, color: '#667eea' }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col>
|
||||
<Card
|
||||
size="small"
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.95)',
|
||||
borderRadius: '6px',
|
||||
border: 'none',
|
||||
minWidth: '80px',
|
||||
textAlign: 'center',
|
||||
padding: '4px 8px'
|
||||
}}
|
||||
styles={{ body: { padding: '8px' } }}
|
||||
>
|
||||
<Statistic
|
||||
title={<span style={{ fontSize: '11px', color: '#666' }}>角色</span>}
|
||||
value={characters.length}
|
||||
suffix="个"
|
||||
valueStyle={{ fontSize: '16px', fontWeight: 600, color: '#52c41a' }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col>
|
||||
<Card
|
||||
size="small"
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.95)',
|
||||
borderRadius: '6px',
|
||||
border: 'none',
|
||||
minWidth: '80px',
|
||||
textAlign: 'center',
|
||||
padding: '4px 8px'
|
||||
}}
|
||||
styles={{ body: { padding: '8px' } }}
|
||||
>
|
||||
<Statistic
|
||||
title={<span style={{ fontSize: '11px', color: '#666' }}>章节</span>}
|
||||
value={chapters.length}
|
||||
suffix="章"
|
||||
valueStyle={{ fontSize: '16px', fontWeight: 600, color: '#1890ff' }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col>
|
||||
<Card
|
||||
size="small"
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.95)',
|
||||
borderRadius: '6px',
|
||||
border: 'none',
|
||||
minWidth: '80px',
|
||||
textAlign: 'center',
|
||||
padding: '4px 8px'
|
||||
}}
|
||||
styles={{ body: { padding: '8px' } }}
|
||||
>
|
||||
<Statistic
|
||||
title={<span style={{ fontSize: '11px', color: '#666' }}>已写</span>}
|
||||
value={currentProject.current_words}
|
||||
suffix="字"
|
||||
valueStyle={{ fontSize: '16px', fontWeight: 600, color: '#fa8c16' }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)}
|
||||
@@ -371,23 +378,23 @@ export default function ProjectDetail() {
|
||||
</Drawer>
|
||||
) : (
|
||||
<Sider
|
||||
collapsible
|
||||
collapsed={collapsed}
|
||||
onCollapse={setCollapsed}
|
||||
trigger={null}
|
||||
width={220}
|
||||
collapsedWidth={60}
|
||||
style={{
|
||||
background: '#fff',
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
top: 70,
|
||||
bottom: 0,
|
||||
overflow: 'hidden',
|
||||
boxShadow: '2px 0 12px rgba(0,0,0,0.08)',
|
||||
transition: 'all 0.2s',
|
||||
height: 'calc(100vh - 70px)'
|
||||
}}
|
||||
collapsible
|
||||
collapsed={collapsed}
|
||||
onCollapse={setCollapsed}
|
||||
trigger={null}
|
||||
width={220}
|
||||
collapsedWidth={60}
|
||||
style={{
|
||||
background: '#fff',
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
top: 70,
|
||||
bottom: 0,
|
||||
overflow: 'hidden',
|
||||
boxShadow: '2px 0 12px rgba(0,0,0,0.08)',
|
||||
transition: 'all 0.2s',
|
||||
height: 'calc(100vh - 70px)'
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
height: '100%',
|
||||
|
||||
@@ -0,0 +1,244 @@
|
||||
import { useState } from 'react';
|
||||
import { Card, Row, Col, Typography, Image, Divider, Modal, Button } from 'antd';
|
||||
import {
|
||||
HeartOutlined,
|
||||
CheckCircleOutlined,
|
||||
FileTextOutlined,
|
||||
RocketOutlined,
|
||||
MessageOutlined,
|
||||
StarOutlined
|
||||
} from '@ant-design/icons';
|
||||
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
interface SponsorOption {
|
||||
amount: number | string;
|
||||
label: string;
|
||||
image: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const sponsorOptions: SponsorOption[] = [
|
||||
{ amount: 5, label: '入门支持', image: '/5.png', description: '¥5' },
|
||||
{ amount: 10, label: '进阶支持', image: '/10.png', description: '¥10' },
|
||||
{ amount: 20, label: '标准支持', image: '/20.png', description: '¥20' },
|
||||
{ amount: 50, label: '高级支持', image: '/50.png', description: '¥50' },
|
||||
{ amount: 'custom', label: '任意金额', image: '/xx.png', description: '自定义' },
|
||||
];
|
||||
|
||||
const benefits = [
|
||||
{
|
||||
icon: <FileTextOutlined style={{ fontSize: '32px', color: '#1890ff' }} />,
|
||||
title: '优先需求响应',
|
||||
description: '您的功能需求和问题反馈将获得优先处理'
|
||||
},
|
||||
{
|
||||
icon: <RocketOutlined style={{ fontSize: '32px', color: '#52c41a' }} />,
|
||||
title: 'Windows一键启动',
|
||||
description: '获取免安装EXE程序，双击即可使用'
|
||||
},
|
||||
{
|
||||
icon: <MessageOutlined style={{ fontSize: '32px', color: '#fa8c16' }} />,
|
||||
title: '专属技术支持',
|
||||
description: '加入赞助者群，获得远程协助和配置指导'
|
||||
}
|
||||
];
|
||||
|
||||
export default function Sponsor() {
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [selectedOption, setSelectedOption] = useState<SponsorOption | null>(null);
|
||||
|
||||
const handleCardClick = (option: SponsorOption) => {
|
||||
setSelectedOption(option);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
height: '100%',
|
||||
overflowY: 'auto',
|
||||
padding: '16px'
|
||||
}}>
|
||||
<div style={{
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto'
|
||||
}}>
|
||||
{/* 头部标题区域 */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '24px' }}>
|
||||
<Title level={1} style={{ marginBottom: '8px', fontSize: '32px', fontWeight: 'bold' }}>
|
||||
赞助 MuMuAINovel
|
||||
</Title>
|
||||
<Text type="secondary" style={{ fontSize: '13px', letterSpacing: '2px' }}>
|
||||
SUPPORT AI NOVEL CREATION
|
||||
</Text>
|
||||
|
||||
<div style={{
|
||||
marginTop: '16px',
|
||||
padding: '16px',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
borderRadius: '12px',
|
||||
color: '#fff'
|
||||
}}>
|
||||
<Title level={4} style={{ color: '#fff', marginBottom: '8px' }}>
|
||||
📚 MuMuAINovel - 基于 AI 的智能小说创作助手
|
||||
</Title>
|
||||
<Paragraph style={{ color: '#fff', fontSize: '14px', margin: 0 }}>
|
||||
支持多AI模型、智能向导、角色管理、章节编辑等强大功能
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 赞助专属权益 */}
|
||||
<div style={{ marginBottom: '32px' }}>
|
||||
<Title level={3} style={{ textAlign: 'center', marginBottom: '20px' }}>
|
||||
<CheckCircleOutlined style={{ color: '#52c41a', marginRight: '8px' }} />
|
||||
赞助专属权益
|
||||
</Title>
|
||||
|
||||
<Row gutter={[16, 16]}>
|
||||
{benefits.map((benefit, index) => (
|
||||
<Col xs={24} md={8} key={index}>
|
||||
<Card
|
||||
hoverable
|
||||
style={{
|
||||
height: '100%',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
|
||||
}}
|
||||
styles={{
|
||||
body: { padding: '20px 16px' }
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '12px' }}>
|
||||
{benefit.icon}
|
||||
</div>
|
||||
<Title level={5} style={{ marginBottom: '8px' }}>{benefit.title}</Title>
|
||||
<Paragraph style={{ color: '#666', marginBottom: 0, fontSize: '13px' }}>
|
||||
{benefit.description}
|
||||
</Paragraph>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
{/* 选择金额 */}
|
||||
<div style={{ marginBottom: '32px' }}>
|
||||
<Title level={3} style={{ textAlign: 'center', marginBottom: '20px' }}>
|
||||
<HeartOutlined style={{ color: '#f5222d', marginRight: '8px' }} />
|
||||
选择金额
|
||||
</Title>
|
||||
|
||||
<Row gutter={[16, 16]} justify="center">
|
||||
{sponsorOptions.map((option, index) => (
|
||||
<Col xs={12} sm={8} md={6} lg={4} key={index}>
|
||||
<Card
|
||||
hoverable
|
||||
onClick={() => handleCardClick(option)}
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s',
|
||||
border: '2px solid #f0f0f0'
|
||||
}}
|
||||
styles={{
|
||||
body: { padding: '20px 12px' }
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-8px)';
|
||||
e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.15)';
|
||||
e.currentTarget.style.borderColor = '#1890ff';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.08)';
|
||||
e.currentTarget.style.borderColor = '#f0f0f0';
|
||||
}}
|
||||
>
|
||||
<Title level={3} style={{
|
||||
color: '#1890ff',
|
||||
marginBottom: '4px',
|
||||
fontSize: '28px',
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
{option.description}
|
||||
</Title>
|
||||
<Text style={{ fontSize: '14px', color: '#666' }}>
|
||||
{option.label}
|
||||
</Text>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<Divider style={{ margin: '24px 0' }} />
|
||||
|
||||
{/* 感谢文案 */}
|
||||
<div style={{
|
||||
textAlign: 'center',
|
||||
padding: '24px 20px',
|
||||
background: '#f9f9f9',
|
||||
borderRadius: '10px'
|
||||
}}>
|
||||
<Title level={4} style={{ marginBottom: '12px' }}>
|
||||
💖 感谢您对 MuMuAINovel 项目的支持
|
||||
</Title>
|
||||
<Paragraph style={{ fontSize: '14px', color: '#666', marginBottom: '12px' }}>
|
||||
您的赞助将帮助我们持续改进产品，提供更好的AI小说创作体验
|
||||
</Paragraph>
|
||||
<div style={{ fontSize: '24px' }}>
|
||||
<StarOutlined style={{ color: '#faad14', margin: '0 4px' }} />
|
||||
<StarOutlined style={{ color: '#faad14', margin: '0 4px' }} />
|
||||
<StarOutlined style={{ color: '#faad14', margin: '0 4px' }} />
|
||||
<StarOutlined style={{ color: '#faad14', margin: '0 4px' }} />
|
||||
<StarOutlined style={{ color: '#faad14', margin: '0 4px' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 二维码弹窗 */}
|
||||
<Modal
|
||||
title={
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Title level={3} style={{ marginBottom: '8px' }}>
|
||||
{selectedOption?.description} {selectedOption?.label}
|
||||
</Title>
|
||||
<Text type="secondary">请使用微信扫码支付</Text>
|
||||
</div>
|
||||
}
|
||||
open={modalVisible}
|
||||
onCancel={() => setModalVisible(false)}
|
||||
footer={[
|
||||
<Button key="close" type="primary" onClick={() => setModalVisible(false)}>
|
||||
关闭
|
||||
</Button>
|
||||
]}
|
||||
width={400}
|
||||
centered
|
||||
>
|
||||
<div style={{ textAlign: 'center', padding: '20px 0' }}>
|
||||
<Image
|
||||
src={selectedOption?.image}
|
||||
alt={`${selectedOption?.description}赞助码`}
|
||||
style={{
|
||||
maxWidth: '280px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #f0f0f0'
|
||||
}}
|
||||
preview={false}
|
||||
/>
|
||||
<Paragraph style={{ marginTop: '20px', color: '#666' }}>
|
||||
扫描二维码完成支付
|
||||
</Paragraph>
|
||||
<Paragraph style={{ color: '#999', fontSize: '12px' }}>
|
||||
支付后可添加微信/QQ联系我们获取权益
|
||||
</Paragraph>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user