mz/video-gen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对话页面选择器样式修改

Browse Source
This commit is contained in:
孙佳艺
2026-06-01 10:58:14 +08:00
parent 20bd5e84c5
commit 66ae7ef182
1 changed files with 54 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-app/src/pages/GenerateConver.tsx
+54 -30
View File
@@ -1147,21 +1147,33 @@ const AIChatPage: React.FC = () => {
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12, paddingTop: 12, borderTop: '1px solid #f0f0f0' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12, paddingTop: 12, borderTop: '1px solid #f0f0f0' }}>
<Space size="middle"> <Space size="middle">
{/* 文件类型选择器 */} {/* 文件类型选择器 */}
<Select <div style={{
value={mediaType} display: 'flex',
onChange={(val) => setMediaType(val)} alignItems: 'center',
style={{ width: 100 }} gap: 6,
size="small" padding: '5px 12px',
> borderRadius: 8,
<Option value="image"> background: '#f8f9fc',
<PictureOutlined style={{ marginRight: 4 }} /> border: '1px solid #e2e8f0',
图片 height: 28,
</Option> }}>
<Option value="video"> <Text style={{ fontSize: 12, color: '#94a3b8' }}>类型</Text>
<VideoCameraOutlined style={{ marginRight: 4 }} /> <Select
视频 value={mediaType}
</Option> onChange={(val) => setMediaType(val)}
</Select> style={{ width: 90,outline:'none',border:'none' }}
size="small"
>
<Option value="image">
<PictureOutlined style={{ marginRight: 4 }} />
图片
</Option>
<Option value="video">
<VideoCameraOutlined style={{ marginRight: 4 }} />
视频
</Option>
</Select>
</div>
{/* 图片设置按钮 */} {/* 图片设置按钮 */}
{mediaType === 'image' && ( {mediaType === 'image' && (
@@ -1463,12 +1475,13 @@ const AIChatPage: React.FC = () => {
borderRadius: 8, borderRadius: 8,
background: '#f8f9fc', background: '#f8f9fc',
border: '1px solid #e2e8f0', border: '1px solid #e2e8f0',
height: 28,
}}> }}>
<Text style={{ fontSize: 12, color: '#94a3b8' }}>时长</Text> <Text style={{ fontSize: 12, color: '#94a3b8' }}>时长</Text>
<Select <Select
value={`${videoDuration}`} value={`${videoDuration}`}
onChange={(val) => setVideoDuration(Number(val))} onChange={(val) => setVideoDuration(Number(val))}
style={{ width: 60 }} style={{ width: 60 ,outline:'none',border:'none' }}
size="small" size="small"
> >
{engineOptions.durations.map((d) => ( {engineOptions.durations.map((d) => (
@@ -1618,20 +1631,31 @@ const AIChatPage: React.FC = () => {
)} )}
{/* 引擎选择器 */} {/* 引擎选择器 */}
<span style={{ fontSize: 12, color: '#64748b', marginRight: 8 }}>引擎选择</span> <div style={{
<Select display: 'flex',
placeholder="选择引擎" alignItems: 'center',
value={countType} gap: 6,
onChange={(val) => { padding: '5px 12px',
setCountType(val); borderRadius: 8,
}} background: '#f8f9fc',
style={{ width: 200 }} border: '1px solid #e2e8f0',
size="small" height: 28,
> }}>
{(mediaType === 'image' ? enginesele.image : enginesele.video)?.map((item:any) => ( <Text style={{ fontSize: 12, color: '#94a3b8' }}>引擎</Text>
<Option key={item.id} value={item.id}>{item.name}</Option> <Select
))} placeholder="选择引擎"
</Select> value={countType}
onChange={(val) => {
setCountType(val);
}}
style={{ width: 200 ,outline:'none',border:'none' }}
size="small"
>
{(mediaType === 'image' ? enginesele.image : enginesele.video)?.map((item:any) => (
<Option key={item.id} value={item.id}>{item.name}</Option>
))}
</Select>
</div>
</Space> </Space>
{/* 底部信息 */} {/* 底部信息 */}