admin/MuMuAINovel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 优化向导/灵感模式AI生成页面样式

Browse Source
This commit is contained in:
xiamuceer
2026-03-24 10:56:25 +08:00
parent d72dd1c555
commit f74f6641f2
1 changed files with 304 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AIProjectGenerator.tsx
+304 -92
View File
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Card, Button, Space, Typography, message, Progress } from 'antd';
import { Card, Button, Space, Typography, message, Progress, theme } from 'antd';
import { CheckCircleOutlined, LoadingOutlined } from '@ant-design/icons';
import { wizardStreamApi } from '../services/api';
import type { ApiError } from '../types';
@@ -53,6 +53,9 @@ export const AIProjectGenerator: React.FC<AIProjectGeneratorProps> = ({
resumeProjectId
}) => {
const navigate = useNavigate();
const { token } = theme.useToken();
const alphaColor = (color: string, alpha: number) =>
`color-mix(in srgb, ${color} ${(alpha * 100).toFixed(0)}%, transparent)`;
// 状态管理
const [loading, setLoading] = useState(false);
@@ -947,12 +950,45 @@ export const AIProjectGenerator: React.FC<AIProjectGeneratorProps> = ({
};
// 获取步骤状态图标和颜色
// 获取步骤状态图标和样式
const getStepStatus = (step: GenerationStep) => {
if (step === 'completed') return { icon: <CheckCircleOutlined />, color: 'var(--color-success)' };
if (step === 'processing') return { icon: <LoadingOutlined />, color: 'var(--color-primary)' };
if (step === 'error') return { icon: '✗', color: 'var(--color-error)' };
return { icon: '○', color: 'var(--color-text-quaternary)' };
if (step === 'completed') {
return {
icon: <CheckCircleOutlined />,
color: token.colorSuccess,
text: '已完成',
background: `linear-gradient(135deg, ${alphaColor(token.colorSuccess, 0.12)} 0%, ${token.colorBgContainer} 100%)`,
borderColor: alphaColor(token.colorSuccess, 0.28),
};
}
if (step === 'processing') {
return {
icon: <LoadingOutlined spin />,
color: token.colorPrimary,
text: '进行中',
background: `linear-gradient(135deg, ${alphaColor(token.colorPrimary, 0.14)} 0%, ${token.colorBgContainer} 100%)`,
borderColor: alphaColor(token.colorPrimary, 0.32),
};
}
if (step === 'error') {
return {
icon: '✕',
color: token.colorError,
text: '失败',
background: `linear-gradient(135deg, ${alphaColor(token.colorError, 0.12)} 0%, ${token.colorBgContainer} 100%)`,
borderColor: alphaColor(token.colorError, 0.32),
};
}
return {
icon: '○',
color: token.colorTextQuaternary,
text: '等待中',
background: token.colorFillQuaternary,
borderColor: token.colorBorderSecondary,
};
};
const hasError = generationSteps.worldBuilding === 'error' ||
@@ -960,95 +996,215 @@ export const AIProjectGenerator: React.FC<AIProjectGeneratorProps> = ({
generationSteps.characters === 'error' ||
generationSteps.outline === 'error';
const progressAccentColor = hasError
? token.colorError
: progress === 100
? token.colorSuccess
: token.colorPrimary;
const stepItems = [
{ key: 'worldBuilding', label: '生成世界观', step: generationSteps.worldBuilding },
{ key: 'careers', label: '生成职业体系', step: generationSteps.careers },
{ key: 'characters', label: '生成角色', step: generationSteps.characters },
{ key: 'outline', label: '生成大纲', step: generationSteps.outline },
];
const availableViewportHeight = isMobile
? 'calc(100dvh - 96px)'
: 'calc(100dvh - 128px)';
// 渲染生成进度页面
const renderGenerating = () => (
<div style={{
<div
style={{
padding: isMobile ? '4px 0 8px' : '8px 0 12px',
maxWidth: 920,
margin: '0 auto',
overflow: 'hidden',
minHeight: availableViewportHeight,
display: 'flex',
flexDirection: 'column',
justifyContent: hasError ? 'flex-start' : 'center',
}}
>
<div
style={{
marginBottom: 14,
padding: isMobile ? '18px 16px' : '24px 24px 20px',
borderRadius: 18,
border: `1px solid ${alphaColor(hasError ? token.colorError : token.colorPrimary, 0.18)}`,
background: `linear-gradient(135deg, ${alphaColor(token.colorPrimary, 0.12)} 0%, ${token.colorBgContainer} 48%, ${alphaColor(hasError ? token.colorError : token.colorSuccess, hasError ? 0.08 : 0.04)} 100%)`,
boxShadow: `0 12px 28px ${alphaColor(token.colorText, 0.06)}`,
textAlign: 'center',
padding: isMobile ? '32px 16px' : '40px 20px',
maxWidth: '100%',
overflow: 'hidden'
}}>
}}
>
<Title
level={isMobile ? 4 : 3}
style={{
marginBottom: 32,
color: 'var(--color-text-primary)',
marginBottom: 8,
color: token.colorTextHeading,
wordBreak: 'break-word',
whiteSpace: 'normal',
overflowWrap: 'break-word'
overflowWrap: 'break-word',
}}
>
正在为《{config.title}》生成内容
</Title>
<Card style={{ marginBottom: 24, maxWidth: '100%' }}>
<Progress
percent={progress}
status={hasError ? 'exception' : (progress === 100 ? 'success' : 'active')}
strokeColor={{
'0%': 'var(--color-primary)',
'100%': 'var(--color-primary-active)',
}}
style={{ marginBottom: 24 }}
/>
<Paragraph
style={{
fontSize: isMobile ? 14 : 16,
marginBottom: 32,
color: hasError ? 'var(--color-error)' : 'var(--color-text-secondary)',
wordBreak: 'break-word',
whiteSpace: 'normal',
overflowWrap: 'break-word'
}}
>
{progressMessage}
</Paragraph>
{errorDetails && (
<Card
size="small"
style={{
marginBottom: 24,
background: 'var(--color-error-bg)',
borderColor: 'var(--color-error-border)',
textAlign: 'left',
maxWidth: '100%',
overflow: 'hidden'
}}
>
<Text strong style={{ color: 'var(--color-error)' }}>错误详情：</Text>
<br />
<Text
style={{
color: 'var(--color-text-secondary)',
fontSize: 14,
maxWidth: 620,
margin: '0 auto',
color: token.colorTextSecondary,
fontSize: isMobile ? 13 : 14,
lineHeight: 1.7,
wordBreak: 'break-word',
whiteSpace: 'normal',
overflowWrap: 'break-word',
display: 'block'
}}
>
{hasError
? '生成流程中断，已保留当前进度与上下文信息，可从失败步骤继续重试。'
: '系统会依次生成世界观、职业体系、角色与大纲，请耐心等待。'}
</Paragraph>
</div>
<Card
style={{
marginBottom: 12,
borderRadius: 18,
border: `1px solid ${alphaColor(token.colorText, 0.08)}`,
background: `linear-gradient(180deg, ${alphaColor(token.colorBgContainer, 0.97)} 0%, ${alphaColor(token.colorPrimary, 0.03)} 100%)`,
boxShadow: `0 10px 24px ${alphaColor(token.colorText, 0.06)}`,
}}
styles={{
body: {
padding: isMobile ? 14 : 20,
}
}}
>
<div
style={{
padding: isMobile ? '14px 14px 16px' : '16px 18px 18px',
marginBottom: 16,
borderRadius: 14,
background: token.colorFillQuaternary,
border: `1px solid ${alphaColor(progressAccentColor, 0.18)}`,
}}
>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: isMobile ? 'flex-start' : 'center',
flexDirection: isMobile ? 'column' : 'row',
gap: 10,
marginBottom: 10,
}}
>
<div style={{ flex: 1, textAlign: 'left' }}>
<Text
style={{
display: 'block',
marginBottom: 6,
color: token.colorTextTertiary,
fontSize: 12,
letterSpacing: 0.4,
}}
>
当前进度
</Text>
<Paragraph
style={{
margin: 0,
color: hasError ? token.colorError : token.colorText,
fontSize: isMobile ? 13 : 15,
lineHeight: 1.7,
wordBreak: 'break-word',
whiteSpace: 'normal',
overflowWrap: 'break-word',
}}
>
{progressMessage || '准备生成...'}
</Paragraph>
</div>
<div
style={{
minWidth: isMobile ? 'auto' : 96,
textAlign: isMobile ? 'left' : 'right',
}}
>
<Text
style={{
fontSize: isMobile ? 24 : 32,
lineHeight: 1,
fontWeight: 700,
color: progressAccentColor,
}}
>
{progress}%
</Text>
</div>
</div>
<Progress
percent={progress}
showInfo={false}
status={hasError ? 'exception' : (progress === 100 ? 'success' : 'active')}
strokeColor={progress === 100
? {
'0%': token.colorSuccess,
'100%': token.colorSuccessActive,
}
: {
'0%': token.colorPrimary,
'100%': token.colorPrimaryActive,
}}
trailColor={token.colorFillTertiary}
strokeLinecap="round"
style={{ marginBottom: 0 }}
/>
</div>
{errorDetails && (
<div
style={{
marginBottom: 16,
padding: isMobile ? '12px 14px' : '14px 16px',
borderRadius: 14,
background: `linear-gradient(135deg, ${alphaColor(token.colorError, 0.12)} 0%, ${token.colorBgContainer} 100%)`,
border: `1px solid ${alphaColor(token.colorError, 0.24)}`,
textAlign: 'left',
overflow: 'hidden',
}}
>
<Text strong style={{ color: token.colorError, display: 'block', marginBottom: 8 }}>
错误详情
</Text>
<Text
style={{
color: token.colorTextSecondary,
fontSize: 14,
lineHeight: 1.7,
wordBreak: 'break-word',
whiteSpace: 'normal',
overflowWrap: 'break-word',
display: 'block',
}}
>
{errorDetails}
</Text>
</Card>
</div>
)}
<Space
direction="vertical"
size={16}
<div
style={{
width: '100%',
maxWidth: isMobile ? '100%' : 400,
margin: '0 auto'
display: 'grid',
gap: 10,
}}
>
{[
{ key: 'worldBuilding', label: '生成世界观', step: generationSteps.worldBuilding },
{ key: 'careers', label: '生成职业体系', step: generationSteps.careers },
{ key: 'characters', label: '生成角色', step: generationSteps.characters },
{ key: 'outline', label: '生成大纲', step: generationSteps.outline },
].map(({ key, label, step }) => {
{stepItems.map(({ key, label, step }) => {
const status = getStepStatus(step);
return (
<div
@@ -1057,71 +1213,127 @@ export const AIProjectGenerator: React.FC<AIProjectGeneratorProps> = ({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: isMobile ? '10px 12px' : '12px 20px',
background: step === 'processing' ? 'var(--color-info-bg)' : (step === 'error' ? 'var(--color-error-bg)' : 'var(--color-bg-layout)'),
borderRadius: 8,
border: `1px solid ${step === 'processing' ? 'var(--color-info-border)' : (step === 'error' ? 'var(--color-error-border)' : 'var(--color-border-secondary)')}`,
gap: '8px',
padding: isMobile ? '10px 12px' : '12px 14px',
background: status.background,
borderRadius: 14,
border: `1px solid ${status.borderColor}`,
gap: 12,
maxWidth: '100%',
overflow: 'hidden'
overflow: 'hidden',
}}
>
<Text
<div
style={{
fontSize: isMobile ? 14 : 16,
fontWeight: step === 'processing' ? 600 : 400,
wordBreak: 'break-word',
whiteSpace: 'normal',
overflowWrap: 'break-word',
display: 'flex',
alignItems: 'center',
gap: 12,
flex: 1,
textAlign: 'left'
minWidth: 0,
}}
>
{label}
</Text>
<span
style={{
fontSize: 20,
width: 30,
height: 30,
borderRadius: '50%',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
color: status.color,
flexShrink: 0
background: alphaColor(status.color, 0.12),
fontSize: 18,
flexShrink: 0,
}}
>
{status.icon}
</span>
<div
style={{
minWidth: 0,
flex: 1,
textAlign: 'left',
}}
>
<Text
style={{
display: 'block',
fontSize: isMobile ? 13 : 14,
fontWeight: step === 'processing' ? 600 : 500,
color: token.colorText,
wordBreak: 'break-word',
whiteSpace: 'normal',
overflowWrap: 'break-word',
}}
>
{label}
</Text>
<Text
style={{
fontSize: 12,
color: step === 'pending' ? token.colorTextTertiary : status.color,
}}
>
{status.text}
</Text>
</div>
</div>
<Text
style={{
fontSize: 12,
fontWeight: 600,
color: status.color,
padding: '4px 10px',
borderRadius: 999,
background: alphaColor(status.color, 0.1),
whiteSpace: 'nowrap',
flexShrink: 0,
}}
>
{status.text}
</Text>
</div>
);
})}
</Space>
</div>
</Card>
<Paragraph
type="secondary"
style={{
color: 'var(--color-text-secondary)',
opacity: 0.9,
marginBottom: hasError ? 14 : 0,
color: token.colorTextSecondary,
opacity: 0.92,
textAlign: 'center',
wordBreak: 'break-word',
whiteSpace: 'normal',
overflowWrap: 'break-word',
fontSize: isMobile ? 14 : 16
fontSize: isMobile ? 13 : 14,
}}
>
{hasError ? '生成过程中出现错误，请点击重试按钮重新生成' : '请耐心等待，AI正在为您精心创作...'}
{hasError ? '可点击下方智能重试，从失败节点继续生成，避免重复执行已完成步骤。' : '请勿关闭页面，生成完成后将自动进入项目详情页。'}
</Paragraph>
{hasError && (
<Space style={{ marginTop: 16 }}>
<Space style={{ width: '100%', justifyContent: 'center' }}>
<Button
type="primary"
size="large"
onClick={handleSmartRetry}
loading={loading}
disabled={loading}
style={{
minWidth: isMobile ? '100%' : 160,
height: 44,
borderRadius: 12,
boxShadow: `0 10px 24px ${alphaColor(token.colorPrimary, 0.22)}`,
}}
>
智能重试
</Button>
</Space>
)}
</div>
);