fix:1.优化移动端灵感模式页面

This commit is contained in:
xiamuceer
2025-11-14 19:54:04 +08:00
parent d5d0f73bd6
commit 4cc87fd69f
+72 -33
View File
@@ -178,7 +178,7 @@ const Inspiration: React.FC = () => {
setCurrentStep('title'); setCurrentStep('title');
setLastFailedRequest(null); setLastFailedRequest(null);
} else { } else {
handleCustomInput(userInput); await handleCustomInput(userInput);
} }
} catch (error: any) { } catch (error: any) {
console.error('发送消息失败:', error); console.error('发送消息失败:', error);
@@ -292,22 +292,30 @@ const Inspiration: React.FC = () => {
}; };
const handleCustomInput = async (input: string) => { const handleCustomInput = async (input: string) => {
const updatedData = { ...wizardData }; setLoading(true);
try {
if (currentStep === 'title') { const updatedData = { ...wizardData };
updatedData.title = input;
} else if (currentStep === 'description') { if (currentStep === 'title') {
updatedData.description = input; updatedData.title = input;
} else if (currentStep === 'theme') { } else if (currentStep === 'description') {
updatedData.theme = input; updatedData.description = input;
} else if (currentStep === 'genre') { } else if (currentStep === 'theme') {
updatedData.genre = [input]; updatedData.theme = input;
} else if (currentStep === 'perspective') { } else if (currentStep === 'genre') {
updatedData.narrative_perspective = input; updatedData.genre = [input];
} else if (currentStep === 'perspective') {
updatedData.narrative_perspective = input;
}
setWizardData(updatedData);
await generateNextStep(updatedData);
} catch (error: any) {
console.error('处理自定义输入失败:', error);
message.error(error.response?.data?.detail || '处理失败,请重试');
} finally {
setLoading(false);
} }
setWizardData(updatedData);
await generateNextStep(updatedData);
}; };
// 自动化生成项目流程 // 自动化生成项目流程
@@ -703,8 +711,7 @@ const Inspiration: React.FC = () => {
<Card <Card
ref={chatContainerRef} ref={chatContainerRef}
style={{ style={{
minHeight: 500, height: window.innerWidth <= 768 ? 'calc(100vh - 280px)' : 600,
maxHeight: 600,
overflowY: 'auto', overflowY: 'auto',
marginBottom: 16, marginBottom: 16,
boxShadow: '0 8px 24px rgba(0,0,0,0.15)', boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
@@ -816,7 +823,10 @@ const Inspiration: React.FC = () => {
</Card> </Card>
{/* 输入区域 */} {/* 输入区域 */}
<Card style={{ boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}> <Card
style={{ boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}
styles={{ body: { padding: 12 } }}
>
<Space.Compact style={{ width: '100%' }}> <Space.Compact style={{ width: '100%' }}>
<TextArea <TextArea
value={inputValue} value={inputValue}
@@ -853,10 +863,10 @@ const Inspiration: React.FC = () => {
); );
return ( return (
<div style={{ <div style={{
minHeight: '100vh', minHeight: '100vh',
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
padding: '24px' padding: window.innerWidth <= 768 ? '12px' : '24px'
}}> }}>
<style> <style>
{` {`
@@ -897,21 +907,50 @@ const Inspiration: React.FC = () => {
</style> </style>
<div style={{ maxWidth: 800, margin: '0 auto' }}> <div style={{ maxWidth: 800, margin: '0 auto' }}>
{/* 头部 */} {/* 头部 */}
<div style={{ marginBottom: 24 }}> <div style={{
<Button marginBottom: window.innerWidth <= 768 ? 12 : 24,
icon={<ArrowLeftOutlined />} position: 'relative'
}}>
<Button
icon={<ArrowLeftOutlined />}
onClick={handleBack} onClick={handleBack}
type="text" type="text"
style={{ color: '#fff' }} size={window.innerWidth <= 768 ? 'small' : 'middle'}
style={{
color: '#fff',
padding: window.innerWidth <= 768 ? '4px 8px' : '4px 15px',
height: window.innerWidth <= 768 ? 32 : 'auto',
position: window.innerWidth <= 768 ? 'absolute' : 'static',
left: 0,
top: 0,
zIndex: 1
}}
> >
{window.innerWidth <= 768 ? '返回' : '返回项目列表'}
</Button> </Button>
<Title level={2} style={{ color: '#fff', textAlign: 'center', marginTop: 16 }}> <div style={{
textAlign: 'center',
</Title> paddingTop: window.innerWidth <= 768 ? 0 : 0
<Text style={{ color: '#fff', display: 'block', textAlign: 'center' }}> }}>
<Title
</Text> level={window.innerWidth <= 768 ? 4 : 2}
style={{
color: '#fff',
margin: 0,
marginBottom: window.innerWidth <= 768 ? 4 : 8
}}
>
</Title>
<Text style={{
color: '#fff',
display: 'block',
fontSize: window.innerWidth <= 768 ? 12 : 14,
opacity: 0.9
}}>
</Text>
</div>
</div> </div>
{/* 根据当前步骤渲染不同内容 */} {/* 根据当前步骤渲染不同内容 */}