1262 lines
54 KiB
TypeScript
1262 lines
54 KiB
TypeScript
import { useEffect, useState, useRef, useCallback } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { Card, Button, Modal, message, Spin, Space, Tag, Progress, Typography, Alert, Upload, Checkbox, Tooltip, Drawer, Menu } from 'antd';
|
||
import { EditOutlined, DeleteOutlined, BookOutlined, RocketOutlined, CalendarOutlined, FileTextOutlined, TrophyOutlined, SettingOutlined, UploadOutlined, DownloadOutlined, ApiOutlined, BulbOutlined, LoadingOutlined, FileSearchOutlined, MenuUnfoldOutlined, CloseOutlined } from '@ant-design/icons';
|
||
import { projectApi } from '../services/api';
|
||
import { useStore } from '../store';
|
||
import { useProjectSync } from '../store/hooks';
|
||
import { eventBus, EventNames } from '../store/eventBus';
|
||
import type { ReactNode } from 'react';
|
||
import { cardStyles, cardHoverHandlers } from '../components/CardStyles';
|
||
import UserMenu from '../components/UserMenu';
|
||
import ChangelogFloatingButton from '../components/ChangelogFloatingButton';
|
||
import SettingsPage from './Settings';
|
||
import MCPPluginsPage from './MCPPlugins';
|
||
import PromptTemplates from './PromptTemplates';
|
||
|
||
const { Title, Text, Paragraph } = Typography;
|
||
|
||
/**
|
||
* 格式化字数显示
|
||
* @param count 字数
|
||
* @returns 格式化后的字符串，如 "1.2K", "3.5W", "1.2M"
|
||
*/
|
||
const formatWordCount = (count: number): string => {
|
||
if (count < 1000) {
|
||
return count.toString();
|
||
} else if (count < 10000) {
|
||
// 1K - 9.9K
|
||
return (count / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
|
||
} else if (count < 1000000) {
|
||
// 1W - 99.9W (万)
|
||
return (count / 10000).toFixed(1).replace(/\.0$/, '') + 'W';
|
||
} else {
|
||
// 1M+ (百万)
|
||
return (count / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
|
||
}
|
||
};
|
||
|
||
export default function ProjectList() {
|
||
const navigate = useNavigate();
|
||
const { projects, loading } = useStore();
|
||
const [activeView, setActiveView] = useState<'projects' | 'settings' | 'mcp' | 'prompts'>('projects');
|
||
const [drawerVisible, setDrawerVisible] = useState(false);
|
||
const [modal, contextHolder] = Modal.useModal();
|
||
const [showApiTip, setShowApiTip] = useState(true);
|
||
const [importModalVisible, setImportModalVisible] = useState(false);
|
||
const [exportModalVisible, setExportModalVisible] = useState(false);
|
||
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
||
const [validationResult, setValidationResult] = useState<any>(null); // eslint-disable-line @typescript-eslint/no-explicit-any
|
||
const [importing, setImporting] = useState(false);
|
||
const [validating, setValidating] = useState(false);
|
||
const [exporting, setExporting] = useState(false);
|
||
const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);
|
||
const [exportOptions, setExportOptions] = useState({
|
||
includeWritingStyles: true,
|
||
includeGenerationHistory: false,
|
||
includeCareers: true,
|
||
includeMemories: false,
|
||
includePlotAnalysis: false,
|
||
});
|
||
const { refreshProjects, deleteProject } = useProjectSync();
|
||
|
||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||
|
||
// 处理切换到 MCP 视图的事件
|
||
const handleSwitchToMcp = useCallback(() => {
|
||
setActiveView('mcp');
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
refreshProjects();
|
||
|
||
// 监听切换到 MCP 视图的事件
|
||
eventBus.on(EventNames.SWITCH_TO_MCP_VIEW, handleSwitchToMcp);
|
||
|
||
return () => {
|
||
eventBus.off(EventNames.SWITCH_TO_MCP_VIEW, handleSwitchToMcp);
|
||
};
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [handleSwitchToMcp]);
|
||
|
||
useEffect(() => {
|
||
const handleVisibilityChange = () => {
|
||
if (!document.hidden) {
|
||
refreshProjects();
|
||
}
|
||
};
|
||
|
||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||
return () => {
|
||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||
};
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, []);
|
||
|
||
const handleDelete = (id: string) => {
|
||
const isMobile = window.innerWidth <= 768;
|
||
modal.confirm({
|
||
title: '确认删除',
|
||
content: '删除项目将同时删除所有相关数据，此操作不可恢复。确定要删除吗？',
|
||
okText: '确定',
|
||
cancelText: '取消',
|
||
okType: 'danger',
|
||
centered: true,
|
||
...(isMobile && {
|
||
style: { top: 'auto' }
|
||
}),
|
||
onOk: async () => {
|
||
try {
|
||
await deleteProject(id);
|
||
message.success('项目删除成功');
|
||
} catch {
|
||
message.error('删除项目失败');
|
||
}
|
||
},
|
||
});
|
||
};
|
||
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
const handleEnterProject = async (project: any) => {
|
||
if (project.wizard_status === 'incomplete') {
|
||
navigate(`/wizard?project_id=${project.id}`);
|
||
} else {
|
||
navigate(`/project/${project.id}`);
|
||
}
|
||
};
|
||
|
||
const getStatusTag = (status: string) => {
|
||
const statusConfig: Record<string, { color: string; text: string; icon: ReactNode }> = {
|
||
planning: { color: 'blue', text: '规划', icon: <CalendarOutlined /> },
|
||
writing: { color: 'green', text: '创作', icon: <EditOutlined /> },
|
||
revising: { color: 'orange', text: '修订', icon: <FileTextOutlined /> },
|
||
completed: { color: 'purple', text: '已完结', icon: <TrophyOutlined /> },
|
||
};
|
||
const config = statusConfig[status] || statusConfig.planning;
|
||
return (
|
||
<Tag color={config.color} icon={config.icon} style={{ margin: 0, borderRadius: 4, flexShrink: 0 }}>
|
||
{config.text}
|
||
</Tag>
|
||
);
|
||
};
|
||
|
||
// 根据进度获取显示状态（进度达到100%时显示已完结）
|
||
const getDisplayStatus = (status: string, progress: number): string => {
|
||
if (progress >= 100) {
|
||
return 'completed';
|
||
}
|
||
return status;
|
||
};
|
||
|
||
const getProgress = (current: number, target: number) => {
|
||
if (!target) return 0;
|
||
return Math.min(Math.round((current / target) * 100), 100);
|
||
};
|
||
|
||
const getProgressColor = (progress: number) => {
|
||
if (progress >= 80) return '#52c41a';
|
||
if (progress >= 50) return '#1890ff';
|
||
if (progress >= 20) return '#faad14';
|
||
return '#ff4d4f';
|
||
};
|
||
|
||
const formatDate = (dateString: string) => {
|
||
const date = new Date(dateString);
|
||
const now = new Date();
|
||
const diff = now.getTime() - date.getTime();
|
||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||
|
||
if (days === 0) return '今天';
|
||
if (days === 1) return '昨天';
|
||
if (days < 7) return `${days}天前`;
|
||
return date.toLocaleDateString('zh-CN');
|
||
};
|
||
|
||
const totalWords = projects.reduce((sum, p) => sum + (p.current_words || 0), 0);
|
||
const activeProjects = projects.filter(p => p.status === 'writing').length;
|
||
// 计算已完结项目数（进度>=100%或状态为completed）
|
||
const completedProjects = projects.filter(p => {
|
||
const progress = getProgress(p.current_words || 0, p.target_words || 0);
|
||
return progress >= 100 || p.status === 'completed';
|
||
}).length;
|
||
|
||
const handleFileSelect = async (file: File) => {
|
||
setSelectedFile(file);
|
||
setValidationResult(null);
|
||
try {
|
||
setValidating(true);
|
||
const result = await projectApi.validateImportFile(file);
|
||
setValidationResult(result);
|
||
if (!result.valid) {
|
||
message.error('文件验证失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('验证失败:', error);
|
||
message.error('文件验证失败');
|
||
} finally {
|
||
setValidating(false);
|
||
}
|
||
return false;
|
||
};
|
||
|
||
const handleImport = async () => {
|
||
if (!selectedFile || !validationResult?.valid) {
|
||
message.warning('请选择有效的导入文件');
|
||
return;
|
||
}
|
||
try {
|
||
setImporting(true);
|
||
const result = await projectApi.importProject(selectedFile);
|
||
if (result.success) {
|
||
message.success(`项目导入成功！${result.message}`);
|
||
setImportModalVisible(false);
|
||
setSelectedFile(null);
|
||
setValidationResult(null);
|
||
await refreshProjects();
|
||
if (result.project_id) {
|
||
navigate(`/project/${result.project_id}`);
|
||
}
|
||
} else {
|
||
message.error(result.message || '导入失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('导入失败:', error);
|
||
message.error('导入失败，请重试');
|
||
} finally {
|
||
setImporting(false);
|
||
}
|
||
};
|
||
|
||
const handleCloseImportModal = () => {
|
||
setImportModalVisible(false);
|
||
setSelectedFile(null);
|
||
setValidationResult(null);
|
||
};
|
||
|
||
const handleOpenExportModal = () => {
|
||
setExportModalVisible(true);
|
||
setSelectedProjectIds([]);
|
||
};
|
||
|
||
const exportableProjects = projects;
|
||
|
||
const handleCloseExportModal = () => {
|
||
setExportModalVisible(false);
|
||
setSelectedProjectIds([]);
|
||
};
|
||
|
||
const handleToggleProject = (projectId: string) => {
|
||
setSelectedProjectIds(prev =>
|
||
prev.includes(projectId)
|
||
? prev.filter(id => id !== projectId)
|
||
: [...prev, projectId]
|
||
);
|
||
};
|
||
|
||
const handleToggleAll = () => {
|
||
if (selectedProjectIds.length === exportableProjects.length) {
|
||
setSelectedProjectIds([]);
|
||
} else {
|
||
setSelectedProjectIds(exportableProjects.map(p => p.id));
|
||
}
|
||
};
|
||
|
||
const handleExport = async () => {
|
||
if (selectedProjectIds.length === 0) {
|
||
message.warning('请至少选择一个项目');
|
||
return;
|
||
}
|
||
try {
|
||
setExporting(true);
|
||
if (selectedProjectIds.length === 1) {
|
||
const projectId = selectedProjectIds[0];
|
||
const project = projects.find(p => p.id === projectId);
|
||
await projectApi.exportProjectData(projectId, {
|
||
include_generation_history: exportOptions.includeGenerationHistory,
|
||
include_writing_styles: exportOptions.includeWritingStyles,
|
||
include_careers: exportOptions.includeCareers,
|
||
include_memories: exportOptions.includeMemories,
|
||
include_plot_analysis: exportOptions.includePlotAnalysis
|
||
});
|
||
message.success(`项目 "${project?.title}" 导出成功`);
|
||
} else {
|
||
let successCount = 0;
|
||
let failCount = 0;
|
||
for (const projectId of selectedProjectIds) {
|
||
try {
|
||
await projectApi.exportProjectData(projectId, {
|
||
include_generation_history: exportOptions.includeGenerationHistory,
|
||
include_writing_styles: exportOptions.includeWritingStyles,
|
||
include_careers: exportOptions.includeCareers,
|
||
include_memories: exportOptions.includeMemories,
|
||
include_plot_analysis: exportOptions.includePlotAnalysis
|
||
});
|
||
successCount++;
|
||
await new Promise(resolve => setTimeout(resolve, 500));
|
||
} catch (error) {
|
||
console.error(`导出项目 ${projectId} 失败:`, error);
|
||
failCount++;
|
||
}
|
||
}
|
||
if (failCount === 0) {
|
||
message.success(`成功导出 ${successCount} 个项目`);
|
||
} else {
|
||
message.warning(`导出完成：成功 ${successCount} 个，失败 ${failCount} 个`);
|
||
}
|
||
}
|
||
handleCloseExportModal();
|
||
} catch (error) {
|
||
console.error('导出失败:', error);
|
||
message.error('导出失败，请重试');
|
||
} finally {
|
||
setExporting(false);
|
||
}
|
||
};
|
||
|
||
const isMobile = window.innerWidth <= 768;
|
||
|
||
return (
|
||
<div style={{
|
||
height: '100vh',
|
||
display: 'flex',
|
||
flexDirection: 'row', // 改为行布局，容纳侧边栏
|
||
background: 'var(--color-bg-base)',
|
||
overflow: 'hidden'
|
||
}}>
|
||
{contextHolder}
|
||
|
||
{/* 侧边栏 - 仅桌面端显示 - 样式对齐 ProjectDetail */}
|
||
{!isMobile && (
|
||
<div style={{
|
||
width: 220, // 对齐 ProjectDetail 的宽度
|
||
background: '#fff',
|
||
borderRight: '1px solid rgba(0,0,0,0.06)',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
zIndex: 10,
|
||
position: 'fixed', // 固定定位，与 ProjectDetail 一致
|
||
left: 0,
|
||
top: 0,
|
||
bottom: 0,
|
||
boxShadow: '4px 0 16px rgba(0,0,0,0.02)'
|
||
}}>
|
||
{/* Logo 区域 - 保持 Primary Color 风格 */}
|
||
<div style={{
|
||
height: 70,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
padding: '0 24px',
|
||
background: 'var(--color-primary)',
|
||
flexShrink: 0
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||
<div style={{
|
||
width: 32,
|
||
height: 32,
|
||
background: 'rgba(255, 255, 255, 0.2)',
|
||
borderRadius: 8,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
color: '#fff',
|
||
fontSize: 18,
|
||
backdropFilter: 'blur(4px)'
|
||
}}>
|
||
<BookOutlined />
|
||
</div>
|
||
<Title level={5} style={{ margin: 0, color: '#fff', fontWeight: 600 }}>
|
||
MuMuAINovel
|
||
</Title>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 侧边栏菜单 - 使用 Menu 组件以保持风格一致 */}
|
||
<div style={{ flex: 1, overflowY: 'auto', paddingTop: 16 }}>
|
||
{/* 模拟 Menu 样式 */}
|
||
<div style={{ padding: '0 12px 12px 12px' }}>
|
||
<div
|
||
onClick={() => setActiveView('projects')}
|
||
style={{
|
||
padding: '10px 16px',
|
||
fontSize: 14,
|
||
cursor: 'pointer',
|
||
borderRadius: 4,
|
||
color: activeView === 'projects' ? 'var(--color-primary)' : 'rgba(0,0,0,0.85)',
|
||
background: activeView === 'projects' ? '#e6f7ff' : 'transparent',
|
||
marginBottom: 4,
|
||
fontWeight: 500,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 10,
|
||
transition: 'all 0.3s',
|
||
borderRight: activeView === 'projects' ? '3px solid var(--color-primary)' : '3px solid transparent'
|
||
}}
|
||
onMouseEnter={e => activeView !== 'projects' && (e.currentTarget.style.background = 'rgba(0,0,0,0.04)')}
|
||
onMouseLeave={e => activeView !== 'projects' && (e.currentTarget.style.background = 'transparent')}
|
||
>
|
||
<BookOutlined />
|
||
我的书架
|
||
</div>
|
||
|
||
<div style={{ padding: '0 12px', fontSize: 12, color: 'rgba(0,0,0,0.45)', marginBottom: 8, marginTop: 16 }}>创作工具</div>
|
||
<div
|
||
onClick={() => setActiveView('prompts')}
|
||
style={{
|
||
padding: '10px 16px',
|
||
fontSize: 14,
|
||
cursor: 'pointer',
|
||
borderRadius: 4,
|
||
color: activeView === 'prompts' ? 'var(--color-primary)' : 'rgba(0,0,0,0.85)',
|
||
background: activeView === 'prompts' ? '#e6f7ff' : 'transparent',
|
||
fontWeight: 500,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 10,
|
||
transition: 'all 0.3s',
|
||
marginBottom: 4,
|
||
borderRight: activeView === 'prompts' ? '3px solid var(--color-primary)' : '3px solid transparent'
|
||
}}
|
||
onMouseEnter={e => activeView !== 'prompts' && (e.currentTarget.style.background = 'rgba(0,0,0,0.04)')}
|
||
onMouseLeave={e => activeView !== 'prompts' && (e.currentTarget.style.background = 'transparent')}
|
||
>
|
||
<FileSearchOutlined />
|
||
提示词管理
|
||
</div>
|
||
<div
|
||
onClick={() => setActiveView('mcp')}
|
||
style={{
|
||
padding: '10px 16px',
|
||
fontSize: 14,
|
||
cursor: 'pointer',
|
||
borderRadius: 4,
|
||
color: activeView === 'mcp' ? 'var(--color-primary)' : 'rgba(0,0,0,0.85)',
|
||
background: activeView === 'mcp' ? '#e6f7ff' : 'transparent',
|
||
fontWeight: 500,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 10,
|
||
transition: 'all 0.3s',
|
||
marginBottom: 4,
|
||
borderRight: activeView === 'mcp' ? '3px solid var(--color-primary)' : '3px solid transparent'
|
||
}}
|
||
onMouseEnter={e => activeView !== 'mcp' && (e.currentTarget.style.background = 'rgba(0,0,0,0.04)')}
|
||
onMouseLeave={e => activeView !== 'mcp' && (e.currentTarget.style.background = 'transparent')}
|
||
>
|
||
<ApiOutlined />
|
||
MCP 插件
|
||
</div>
|
||
|
||
<div style={{ padding: '0 12px', fontSize: 12, color: 'rgba(0,0,0,0.45)', marginBottom: 8, marginTop: 16 }}>系统设置</div>
|
||
<div
|
||
onClick={() => setActiveView('settings')}
|
||
style={{
|
||
padding: '10px 16px',
|
||
fontSize: 14,
|
||
cursor: 'pointer',
|
||
borderRadius: 4,
|
||
color: activeView === 'settings' ? 'var(--color-primary)' : 'rgba(0,0,0,0.85)',
|
||
background: activeView === 'settings' ? '#e6f7ff' : 'transparent',
|
||
fontWeight: 500,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 10,
|
||
transition: 'all 0.3s',
|
||
marginBottom: 4,
|
||
borderRight: activeView === 'settings' ? '3px solid var(--color-primary)' : '3px solid transparent'
|
||
}}
|
||
onMouseEnter={e => activeView !== 'settings' && (e.currentTarget.style.background = 'rgba(0,0,0,0.04)')}
|
||
onMouseLeave={e => activeView !== 'settings' && (e.currentTarget.style.background = 'transparent')}
|
||
>
|
||
<SettingOutlined />
|
||
API 设置
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 底部用户信息 */}
|
||
<div style={{ padding: 16, borderTop: '1px solid rgba(0,0,0,0.06)' }}>
|
||
<UserMenu />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 主内容区域容器 */}
|
||
<div style={{
|
||
flex: 1,
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
height: '100%',
|
||
overflow: 'hidden',
|
||
marginLeft: isMobile ? 0 : 220 // 为固定定位的侧边栏留出空间
|
||
}}>
|
||
|
||
{/* 移动端顶部导航栏 */}
|
||
{isMobile && (
|
||
<div style={{
|
||
flexShrink: 0,
|
||
background: 'var(--color-primary)',
|
||
boxShadow: 'var(--shadow-header)',
|
||
height: 56,
|
||
padding: '0 12px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
zIndex: 100
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<Button
|
||
type="text"
|
||
icon={<MenuUnfoldOutlined />}
|
||
onClick={() => setDrawerVisible(true)}
|
||
style={{
|
||
fontSize: 18,
|
||
color: '#fff',
|
||
width: 36,
|
||
height: 36
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<span style={{
|
||
color: '#fff',
|
||
fontWeight: 600,
|
||
fontSize: 16,
|
||
flex: 1,
|
||
textAlign: 'center',
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap',
|
||
paddingRight: 36 // 为了与左侧菜单按钮对称
|
||
}}>
|
||
{activeView === 'projects' ? '我的书架' :
|
||
activeView === 'prompts' ? '提示词模板' :
|
||
activeView === 'mcp' ? 'MCP 插件' : 'API 设置'}
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* 移动端侧边栏 Drawer */}
|
||
{isMobile && (
|
||
<Drawer
|
||
title={
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||
<div style={{
|
||
width: 32,
|
||
height: 32,
|
||
background: 'var(--color-primary)',
|
||
borderRadius: 8,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
color: '#fff',
|
||
fontSize: 16,
|
||
}}>
|
||
<BookOutlined />
|
||
</div>
|
||
<span style={{ fontWeight: 600, fontSize: 16 }}>MuMuAINovel</span>
|
||
</div>
|
||
}
|
||
closeIcon={null}
|
||
extra={
|
||
<Button
|
||
type="text"
|
||
icon={<CloseOutlined />}
|
||
onClick={() => setDrawerVisible(false)}
|
||
style={{ fontSize: 16, color: 'rgba(0,0,0,0.45)' }}
|
||
/>
|
||
}
|
||
placement="left"
|
||
onClose={() => setDrawerVisible(false)}
|
||
open={drawerVisible}
|
||
width="60%"
|
||
styles={{ body: { padding: 0, display: 'flex', flexDirection: 'column' } }}
|
||
>
|
||
<div style={{ flex: 1, overflowY: 'auto' }}>
|
||
<Menu
|
||
mode="inline"
|
||
selectedKeys={[activeView]}
|
||
style={{ borderRight: 0, paddingTop: 8 }}
|
||
onClick={({ key }) => {
|
||
setActiveView(key as 'projects' | 'settings' | 'mcp' | 'prompts');
|
||
setDrawerVisible(false);
|
||
}}
|
||
items={[
|
||
{
|
||
key: 'projects',
|
||
icon: <BookOutlined />,
|
||
label: '我的书架',
|
||
},
|
||
{
|
||
type: 'group',
|
||
label: '创作工具',
|
||
children: [
|
||
{
|
||
key: 'prompts',
|
||
icon: <FileSearchOutlined />,
|
||
label: '提示词管理',
|
||
},
|
||
{
|
||
key: 'mcp',
|
||
icon: <ApiOutlined />,
|
||
label: 'MCP 插件',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: 'group',
|
||
label: '系统设置',
|
||
children: [
|
||
{
|
||
key: 'settings',
|
||
icon: <SettingOutlined />,
|
||
label: 'API 设置',
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
|
||
{/* 导入导出操作 */}
|
||
<div style={{ padding: '16px', borderTop: '1px solid rgba(0,0,0,0.06)', marginTop: 16 }}>
|
||
<Space direction="vertical" style={{ width: '100%' }} size={8}>
|
||
<Button
|
||
icon={<UploadOutlined />}
|
||
block
|
||
onClick={() => {
|
||
setImportModalVisible(true);
|
||
setDrawerVisible(false);
|
||
}}
|
||
>
|
||
导入项目
|
||
</Button>
|
||
<Button
|
||
icon={<DownloadOutlined />}
|
||
block
|
||
onClick={() => {
|
||
handleOpenExportModal();
|
||
setDrawerVisible(false);
|
||
}}
|
||
disabled={exportableProjects.length === 0}
|
||
>
|
||
导出项目
|
||
</Button>
|
||
</Space>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 底部用户信息 */}
|
||
<div style={{ padding: 16, borderTop: '1px solid rgba(0,0,0,0.06)' }}>
|
||
<UserMenu showFullInfo />
|
||
</div>
|
||
</Drawer>
|
||
)}
|
||
|
||
{/* 桌面端顶部标题栏 */}
|
||
{!isMobile && (
|
||
<div style={{
|
||
height: 70, // 与 ProjectDetail header 高度一致
|
||
padding: '0 24px',
|
||
background: 'var(--color-primary)', // 使用主题色背景
|
||
boxShadow: 'var(--shadow-header)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
flexShrink: 0,
|
||
zIndex: 100
|
||
}}>
|
||
<h2 style={{
|
||
margin: 0,
|
||
color: '#fff',
|
||
fontSize: '24px',
|
||
fontWeight: 600,
|
||
textShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 12
|
||
}}>
|
||
{activeView === 'projects' ? '我的书架' :
|
||
activeView === 'prompts' ? '提示词模板' :
|
||
activeView === 'mcp' ? 'MCP 插件' : 'API 设置'}
|
||
</h2>
|
||
|
||
{activeView === 'projects' && (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
|
||
{/* 导入导出按钮 */}
|
||
<Space>
|
||
<Button ghost icon={<UploadOutlined />} onClick={() => setImportModalVisible(true)} style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.6)' }}>导入</Button>
|
||
<Button ghost icon={<DownloadOutlined />} onClick={handleOpenExportModal} disabled={exportableProjects.length === 0} style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.6)' }}>导出</Button>
|
||
</Space>
|
||
|
||
{/* 统计数据：创作中 已完结 总字数 */}
|
||
{projects.length > 0 && (
|
||
<div style={{ display: 'flex', gap: '16px' }}>
|
||
{[
|
||
{ label: '创作中', value: activeProjects, unit: '本' },
|
||
{ label: '已完结', value: completedProjects, unit: '本' },
|
||
{ label: '总字数', value: totalWords, unit: '字' },
|
||
].map((item, index) => (
|
||
<div
|
||
key={index}
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backdropFilter: 'blur(4px)',
|
||
borderRadius: '28px', // 圆角风格
|
||
minWidth: '56px',
|
||
height: '56px',
|
||
padding: '0 12px',
|
||
boxShadow: 'inset 0 0 15px rgba(255, 255, 255, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1)',
|
||
cursor: 'default',
|
||
transition: 'all 0.3s ease',
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
e.currentTarget.style.transform = 'translateY(-3px) scale(1.02)';
|
||
e.currentTarget.style.boxShadow = 'inset 0 0 20px rgba(255, 255, 255, 0.25), 0 8px 16px rgba(0, 0, 0, 0.15)';
|
||
e.currentTarget.style.border = '1px solid rgba(255, 255, 255, 0.1)';
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
e.currentTarget.style.transform = 'translateY(0) scale(1)';
|
||
e.currentTarget.style.boxShadow = 'inset 0 0 15px rgba(255, 255, 255, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1)';
|
||
}}
|
||
>
|
||
<span style={{ fontSize: '11px', color: 'rgba(255, 255, 255, 0.9)', marginBottom: '2px', lineHeight: 1 }}>
|
||
{item.label}
|
||
</span>
|
||
<span style={{ fontSize: '15px', fontWeight: '600', color: '#fff', lineHeight: 1, fontFamily: 'Monaco, monospace' }}>
|
||
{item.label === '总字数' ? formatWordCount(item.value) : item.value}
|
||
{item.unit && <span style={{ fontSize: '10px', marginLeft: '2px', opacity: 0.8 }}>{item.unit}</span>}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 内容显示区 */}
|
||
<div
|
||
ref={scrollContainerRef}
|
||
style={{
|
||
flex: 1,
|
||
overflowY: 'auto',
|
||
padding: activeView === 'projects' ? `${isMobile ? 16 : 24}px ${isMobile ? 16 : 32}px` : 0,
|
||
background: 'var(--color-bg-base)',
|
||
}}
|
||
>
|
||
{activeView === 'settings' && <SettingsPage />}
|
||
{activeView === 'mcp' && <MCPPluginsPage />}
|
||
{activeView === 'prompts' && <PromptTemplates />}
|
||
|
||
{activeView === 'projects' && (
|
||
<div style={{ maxWidth: 1600, margin: '0 auto', paddingBottom: 60 }}>
|
||
|
||
{showApiTip && projects.length === 0 && (
|
||
<Alert
|
||
message="欢迎使用 MuMuAINovel"
|
||
description={
|
||
<div style={{
|
||
display: 'flex',
|
||
flexDirection: isMobile ? 'column' : 'row',
|
||
alignItems: isMobile ? 'flex-start' : 'center',
|
||
gap: isMobile ? 12 : 16,
|
||
justifyContent: 'space-between'
|
||
}}>
|
||
<span style={{ fontSize: isMobile ? 12 : 14 }}>
|
||
在开始创作之前，请先配置您的AI接口（支持 OpenAI / Anthropic）。
|
||
</span>
|
||
<Button
|
||
size="small"
|
||
type="primary"
|
||
onClick={() => setActiveView('settings')}
|
||
style={{ flexShrink: 0 }}
|
||
>
|
||
去配置
|
||
</Button>
|
||
</div>
|
||
}
|
||
type="info"
|
||
showIcon
|
||
closable
|
||
onClose={() => setShowApiTip(false)}
|
||
style={{
|
||
marginBottom: isMobile ? 16 : 24,
|
||
borderRadius: 12
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
<Spin spinning={loading}>
|
||
<div style={{
|
||
...cardStyles.bookshelf,
|
||
// 移动端显示一列
|
||
...(isMobile && {
|
||
gridTemplateColumns: '1fr',
|
||
gap: '16px',
|
||
padding: '16px 0',
|
||
})
|
||
}}>
|
||
{/* 新建/灵感卡片 */}
|
||
<div style={{ position: 'relative', width: '100%', minWidth: 0, minHeight: isMobile ? 300 : 330 }}>
|
||
<Card
|
||
hoverable
|
||
style={{ ...cardStyles.newProjectBook, minHeight: isMobile ? 300 : 330 }}
|
||
styles={{ body: { padding: isMobile ? '16px' : '24px', flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' } }}
|
||
{...cardHoverHandlers}
|
||
data-type="new-project"
|
||
>
|
||
<div style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: isMobile ? 10 : 16,
|
||
justifyContent: 'center'
|
||
}}>
|
||
<Button
|
||
type="primary"
|
||
size={isMobile ? 'middle' : 'large'}
|
||
icon={<RocketOutlined />}
|
||
onClick={() => navigate('/wizard')}
|
||
style={{ height: isMobile ? '38px' : '50px', fontSize: isMobile ? '14px' : '16px' }}
|
||
block
|
||
>
|
||
快速开始
|
||
</Button>
|
||
<Button
|
||
size={isMobile ? 'middle' : 'large'}
|
||
icon={<BulbOutlined />}
|
||
onClick={() => navigate('/inspiration')}
|
||
style={{
|
||
height: isMobile ? '38px' : '50px',
|
||
fontSize: isMobile ? '14px' : '16px',
|
||
borderColor: '#faad14',
|
||
color: '#faad14',
|
||
background: 'rgba(250, 173, 20, 0.1)'
|
||
}}
|
||
block
|
||
>
|
||
灵感模式
|
||
</Button>
|
||
<div style={{ textAlign: 'center', color: '#999', fontSize: isMobile ? 11 : 12, marginTop: isMobile ? 4 : 8 }}>
|
||
开始一个新的创作旅程
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
|
||
{Array.isArray(projects) && projects.map((project) => {
|
||
const progress = getProgress(project.current_words, project.target_words || 0);
|
||
const isWizardIncomplete = project.wizard_status === 'incomplete';
|
||
// 解析标签（假设存储在 genre 字段，用逗号或顿号分隔）
|
||
const tags = project.genre ? project.genre.split(/[,、，]/).map((t: string) => t.trim()).filter((t: string) => t) : [];
|
||
|
||
return (
|
||
<div key={project.id} style={{ position: 'relative', width: '100%', minWidth: 0 }}>
|
||
<Card
|
||
hoverable
|
||
style={cardStyles.project}
|
||
styles={{ body: { padding: 0, flex: 1, display: 'flex', flexDirection: 'column' } }}
|
||
{...cardHoverHandlers}
|
||
onClick={() => handleEnterProject(project)}
|
||
>
|
||
{/* 卡片头部 - 参考图片样式 */}
|
||
<div style={{
|
||
padding: isMobile ? '14px 14px 10px' : '18px 20px 14px',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'flex-start',
|
||
position: 'relative'
|
||
}}>
|
||
<div style={{ flex: 1, minWidth: 0, marginRight: isMobile ? 8 : 12 }}>
|
||
{/* 标题行：图标 + 标题 */}
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 6 : 8, marginBottom: isMobile ? 6 : 10 }}>
|
||
<BookOutlined style={{
|
||
fontSize: isMobile ? 14 : 16,
|
||
color: 'var(--color-primary)',
|
||
flexShrink: 0
|
||
}} />
|
||
<Tooltip title={project.title}>
|
||
<div style={{
|
||
fontSize: isMobile ? 14 : 16,
|
||
fontWeight: 600,
|
||
color: 'var(--color-text-primary)',
|
||
whiteSpace: 'nowrap',
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
lineHeight: 1.3
|
||
}}>
|
||
{project.title}
|
||
</div>
|
||
</Tooltip>
|
||
</div>
|
||
{/* 标签行 - 单行不换行 */}
|
||
<div style={{
|
||
display: 'flex',
|
||
gap: isMobile ? 4 : 6,
|
||
overflow: 'hidden',
|
||
flexWrap: 'nowrap'
|
||
}}>
|
||
{tags.length > 0 ? tags.slice(0, 3).map((tag: string, idx: number) => (
|
||
<Tag key={idx} style={{
|
||
margin: 0,
|
||
fontSize: isMobile ? 10 : 11,
|
||
lineHeight: isMobile ? '18px' : '20px',
|
||
padding: isMobile ? '0 6px' : '0 8px',
|
||
border: 'none',
|
||
borderRadius: 4,
|
||
background: 'rgba(82, 196, 26, 0.1)',
|
||
color: '#52c41a',
|
||
fontWeight: 500
|
||
}}>
|
||
{tag}
|
||
</Tag>
|
||
)) : (
|
||
<Tag style={{
|
||
margin: 0,
|
||
fontSize: isMobile ? 10 : 11,
|
||
lineHeight: isMobile ? '18px' : '20px',
|
||
padding: isMobile ? '0 6px' : '0 8px',
|
||
border: 'none',
|
||
borderRadius: 4,
|
||
background: 'rgba(82, 196, 26, 0.1)',
|
||
color: '#52c41a',
|
||
fontWeight: 500
|
||
}}>
|
||
未分类
|
||
</Tag>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 右上角状态标签 - 带文字和图标 */}
|
||
<div style={{ flexShrink: 0 }}>
|
||
{isWizardIncomplete ? (
|
||
<Tag
|
||
color="warning"
|
||
icon={<LoadingOutlined />}
|
||
style={{
|
||
margin: 0,
|
||
borderRadius: 4,
|
||
fontSize: isMobile ? 10 : 12,
|
||
padding: isMobile ? '0 6px' : '2px 10px',
|
||
fontWeight: 500
|
||
}}
|
||
>
|
||
生成中
|
||
</Tag>
|
||
) : (
|
||
getStatusTag(getDisplayStatus(project.status, progress))
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 描述区域 */}
|
||
<div style={{ padding: isMobile ? '0 14px 10px' : '0 20px 14px' }}>
|
||
<Paragraph
|
||
ellipsis={{ rows: isMobile ? 2 : 2 }}
|
||
style={{
|
||
fontSize: isMobile ? 12 : 13,
|
||
color: 'var(--color-text-secondary)',
|
||
marginBottom: 0,
|
||
lineHeight: 1.6
|
||
}}
|
||
>
|
||
{project.description || '暂无描述...'}
|
||
</Paragraph>
|
||
</div>
|
||
|
||
{/* 进度条区域 */}
|
||
<div style={{ padding: isMobile ? '0 14px 12px' : '0 20px 16px' }}>
|
||
<div style={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: isMobile ? 6 : 8
|
||
}}>
|
||
<span style={{
|
||
fontSize: isMobile ? 11 : 12,
|
||
color: 'var(--color-text-tertiary)'
|
||
}}>
|
||
完成进度
|
||
</span>
|
||
<span style={{
|
||
fontSize: isMobile ? 11 : 12,
|
||
color: getProgressColor(progress),
|
||
fontWeight: 600
|
||
}}>
|
||
{progress}%
|
||
</span>
|
||
</div>
|
||
<Progress
|
||
percent={progress}
|
||
showInfo={false}
|
||
strokeColor={getProgressColor(progress)}
|
||
trailColor="rgba(0, 0, 0, 0.04)"
|
||
size="small"
|
||
style={{ marginBottom: 0 }}
|
||
/>
|
||
</div>
|
||
|
||
{/* 字数统计区域 */}
|
||
<div style={{
|
||
padding: isMobile ? '12px 14px' : '16px 20px',
|
||
background: 'rgba(0, 0, 0, 0.02)',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center'
|
||
}}>
|
||
<div style={{ textAlign: 'center', flex: 1 }}>
|
||
<div style={{
|
||
fontSize: isMobile ? 18 : 22,
|
||
fontWeight: 700,
|
||
color: 'var(--color-text-primary)',
|
||
lineHeight: 1.2,
|
||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial'
|
||
}}>
|
||
{formatWordCount(project.current_words || 0)}
|
||
</div>
|
||
<div style={{
|
||
fontSize: isMobile ? 10 : 11,
|
||
color: 'var(--color-text-tertiary)',
|
||
marginTop: 2
|
||
}}>
|
||
已写字数
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
width: 1,
|
||
height: isMobile ? 28 : 36,
|
||
background: 'rgba(0, 0, 0, 0.06)'
|
||
}} />
|
||
<div style={{ textAlign: 'center', flex: 1 }}>
|
||
<div style={{
|
||
fontSize: isMobile ? 18 : 22,
|
||
fontWeight: 700,
|
||
color: '#52c41a',
|
||
lineHeight: 1.2,
|
||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial'
|
||
}}>
|
||
{formatWordCount(project.target_words || 0)}
|
||
</div>
|
||
<div style={{
|
||
fontSize: isMobile ? 10 : 11,
|
||
color: 'var(--color-text-tertiary)',
|
||
marginTop: 2
|
||
}}>
|
||
目标字数
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 卡片底部 - 时间和操作 */}
|
||
<div style={{
|
||
padding: isMobile ? '10px 14px' : '12px 20px',
|
||
borderTop: '1px solid rgba(0,0,0,0.04)',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginTop: 'auto'
|
||
}}>
|
||
<Space size={4} style={{ fontSize: isMobile ? 11 : 12, color: 'var(--color-text-tertiary)' }}>
|
||
<CalendarOutlined style={{ fontSize: isMobile ? 10 : 12 }} /> {formatDate(project.updated_at)}
|
||
</Space>
|
||
|
||
<Button
|
||
type="text"
|
||
size="small"
|
||
danger
|
||
icon={<DeleteOutlined style={{ fontSize: isMobile ? 12 : 14 }} />}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleDelete(project.id);
|
||
}}
|
||
style={{ padding: isMobile ? '2px 4px' : '4px 8px' }}
|
||
/>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</Spin>
|
||
</div>
|
||
)}
|
||
|
||
<ChangelogFloatingButton />
|
||
</div>
|
||
</div>
|
||
|
||
{/* 导入项目对话框 */}
|
||
<Modal
|
||
title="导入项目"
|
||
open={importModalVisible}
|
||
onOk={handleImport}
|
||
onCancel={handleCloseImportModal}
|
||
confirmLoading={importing}
|
||
okText="导入"
|
||
cancelText="取消"
|
||
width={isMobile ? '90%' : 500}
|
||
centered
|
||
okButtonProps={{ disabled: !validationResult?.valid }}
|
||
>
|
||
<Space direction="vertical" size={16} style={{ width: '100%' }}>
|
||
<div>
|
||
<p style={{ marginBottom: '12px', color: '#666' }}>
|
||
选择之前导出的 JSON 格式项目文件
|
||
</p>
|
||
<Upload
|
||
accept=".json"
|
||
beforeUpload={handleFileSelect}
|
||
maxCount={1}
|
||
onRemove={() => {
|
||
setSelectedFile(null);
|
||
setValidationResult(null);
|
||
}}
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
fileList={selectedFile ? [{ uid: '-1', name: selectedFile.name, status: 'done' }] as any : []}
|
||
>
|
||
<Button icon={<UploadOutlined />} block>选择文件</Button>
|
||
</Upload>
|
||
</div>
|
||
|
||
{validating && (
|
||
<div style={{ textAlign: 'center', padding: '20px' }}>
|
||
<Spin tip="验证文件中..." />
|
||
</div>
|
||
)}
|
||
|
||
{validationResult && (
|
||
<Card size="small" style={{ background: validationResult.valid ? '#f6ffed' : '#fff2f0' }}>
|
||
<Space direction="vertical" size={8} style={{ width: '100%' }}>
|
||
<div>
|
||
<Text strong style={{ color: validationResult.valid ? '#52c41a' : '#ff4d4f' }}>
|
||
{validationResult.valid ? '✓ 文件验证通过' : '✗ 文件验证失败'}
|
||
</Text>
|
||
</div>
|
||
{validationResult.project_name && (
|
||
<div>
|
||
<Text type="secondary">项目名称：</Text>
|
||
<Text strong>{validationResult.project_name}</Text>
|
||
</div>
|
||
)}
|
||
{validationResult.statistics && (
|
||
<div style={{ marginTop: 8 }}>
|
||
<Text type="secondary" style={{ fontSize: 12, display: 'block', marginBottom: 6 }}>数据统计：</Text>
|
||
<Space size={[6, 6]} wrap>
|
||
{validationResult.statistics.chapters > 0 && <Tag color="blue">章节: {validationResult.statistics.chapters}</Tag>}
|
||
{validationResult.statistics.characters > 0 && <Tag color="green">角色: {validationResult.statistics.characters}</Tag>}
|
||
{validationResult.statistics.outlines > 0 && <Tag color="cyan">大纲: {validationResult.statistics.outlines}</Tag>}
|
||
{validationResult.statistics.relationships > 0 && <Tag color="purple">关系: {validationResult.statistics.relationships}</Tag>}
|
||
{validationResult.statistics.organizations > 0 && <Tag color="orange">组织: {validationResult.statistics.organizations}</Tag>}
|
||
{validationResult.statistics.careers > 0 && <Tag color="magenta">职业: {validationResult.statistics.careers}</Tag>}
|
||
{validationResult.statistics.character_careers > 0 && <Tag color="geekblue">职业关联: {validationResult.statistics.character_careers}</Tag>}
|
||
{validationResult.statistics.writing_styles > 0 && <Tag color="lime">写作风格: {validationResult.statistics.writing_styles}</Tag>}
|
||
{validationResult.statistics.story_memories > 0 && <Tag color="gold">故事记忆: {validationResult.statistics.story_memories}</Tag>}
|
||
{validationResult.statistics.plot_analysis > 0 && <Tag color="volcano">剧情分析: {validationResult.statistics.plot_analysis}</Tag>}
|
||
{validationResult.statistics.generation_history > 0 && <Tag>生成历史: {validationResult.statistics.generation_history}</Tag>}
|
||
{validationResult.statistics.has_default_style && <Tag color="success">含默认风格</Tag>}
|
||
</Space>
|
||
</div>
|
||
)}
|
||
{validationResult.warnings?.length > 0 && (
|
||
<div style={{ marginTop: 8 }}>
|
||
<Text type="warning" strong style={{ fontSize: 12 }}>提示：</Text>
|
||
<ul style={{ margin: '4px 0 0 0', paddingLeft: 20, color: '#faad14', fontSize: 12 }}>
|
||
{validationResult.warnings.map((w: string, i: number) => <li key={i}>{w}</li>)}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
{validationResult.errors?.length > 0 && (
|
||
<div>
|
||
<Text type="danger" strong>错误：</Text>
|
||
<ul style={{ margin: '4px 0 0 0', paddingLeft: 20, color: '#ff4d4f', fontSize: 13 }}>
|
||
{validationResult.errors.map((e: string, i: number) => <li key={i}>{e}</li>)}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
</Space>
|
||
</Card>
|
||
)}
|
||
</Space>
|
||
</Modal>
|
||
|
||
{/* 导出项目对话框 */}
|
||
<Modal
|
||
title="导出项目"
|
||
open={exportModalVisible}
|
||
onOk={handleExport}
|
||
onCancel={handleCloseExportModal}
|
||
confirmLoading={exporting}
|
||
okText={selectedProjectIds.length > 0 ? `导出 (${selectedProjectIds.length})` : '导出'}
|
||
cancelText="取消"
|
||
width={isMobile ? '90%' : 700}
|
||
centered
|
||
okButtonProps={{ disabled: selectedProjectIds.length === 0 }}
|
||
>
|
||
<Space direction="vertical" size={16} style={{ width: '100%' }}>
|
||
<Card size="small" style={{ background: '#f5f5f5' }}>
|
||
<Space direction="vertical" size={12} style={{ width: '100%' }}>
|
||
<Text strong>导出选项</Text>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 24px' }}>
|
||
<Checkbox checked={exportOptions.includeWritingStyles} onChange={e => setExportOptions(prev => ({...prev, includeWritingStyles: e.target.checked}))}>写作风格</Checkbox>
|
||
<Checkbox checked={exportOptions.includeCareers} onChange={e => setExportOptions(prev => ({...prev, includeCareers: e.target.checked}))}>职业系统</Checkbox>
|
||
<Tooltip title="包含生成历史记录，文件可能较大">
|
||
<Checkbox checked={exportOptions.includeGenerationHistory} onChange={e => setExportOptions(prev => ({...prev, includeGenerationHistory: e.target.checked}))}>生成历史</Checkbox>
|
||
</Tooltip>
|
||
<Tooltip title="包含故事记忆数据，文件可能较大">
|
||
<Checkbox checked={exportOptions.includeMemories} onChange={e => setExportOptions(prev => ({...prev, includeMemories: e.target.checked}))}>故事记忆</Checkbox>
|
||
</Tooltip>
|
||
<Tooltip title="包含AI剧情分析数据">
|
||
<Checkbox checked={exportOptions.includePlotAnalysis} onChange={e => setExportOptions(prev => ({...prev, includePlotAnalysis: e.target.checked}))}>剧情分析</Checkbox>
|
||
</Tooltip>
|
||
</div>
|
||
</Space>
|
||
</Card>
|
||
|
||
<div>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
|
||
<Text>选择项目 ({exportableProjects.length})</Text>
|
||
<Checkbox
|
||
checked={selectedProjectIds.length === exportableProjects.length && exportableProjects.length > 0}
|
||
indeterminate={selectedProjectIds.length > 0 && selectedProjectIds.length < exportableProjects.length}
|
||
onChange={handleToggleAll}
|
||
>
|
||
全选
|
||
</Checkbox>
|
||
</div>
|
||
<div style={{ maxHeight: 300, overflowY: 'auto', border: '1px solid #f0f0f0', borderRadius: 8, padding: 8 }}>
|
||
<Space direction="vertical" style={{ width: '100%' }}>
|
||
{exportableProjects.map(p => (
|
||
<div
|
||
key={p.id}
|
||
style={{
|
||
padding: '8px 12px',
|
||
background: selectedProjectIds.includes(p.id) ? '#e6f7ff' : '#fff',
|
||
borderRadius: 6,
|
||
cursor: 'pointer',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 12
|
||
}}
|
||
onClick={() => handleToggleProject(p.id)}
|
||
>
|
||
<Checkbox checked={selectedProjectIds.includes(p.id)} />
|
||
<div style={{ flex: 1 }}>
|
||
<div>{p.title}</div>
|
||
<div style={{ fontSize: 12, color: '#999' }}>{formatWordCount(p.current_words || 0)} 字 · {getStatusTag(getDisplayStatus(p.status, getProgress(p.current_words || 0, p.target_words || 0)))}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</Space>
|
||
</div>
|
||
</div>
|
||
</Space>
|
||
</Modal>
|
||
|
||
</div>
|
||
);
|
||
} |