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

比例选择样式修改

Browse Source
This commit is contained in:
sjy
2026-06-30 19:30:11 +08:00
parent b6e44565e7
commit 86e5bafad2
5 changed files with 58 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-app/src/components/Layout/AppLayout.tsx
+14 -11
View File
@@ -124,11 +124,12 @@ const StorageCard: React.FC<{ data: ResourceCapacityData | null }> = ({ data })
return (
<div
style={{
marginTop: 12,
padding: '10px 12px',
// marginTop: 12,
padding: '0 12px',
paddingTop: 6,
borderRadius: 10,
background: 'linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%)',
border: `1px solid ${isOver ? 'rgba(239, 68, 68, 0.25)' : 'rgba(99, 102, 241, 0.15)'}`,
// border: `1px solid ${isOver ? 'rgba(239, 68, 68, 0.25)' : 'rgba(99, 102, 241, 0.15)'}`,
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.04)',
}}
>
@@ -144,7 +145,7 @@ const StorageCard: React.FC<{ data: ResourceCapacityData | null }> = ({ data })
>
<span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
<DatabaseOutlined style={{ fontSize: 12, color: isOver ? '#ef4444' : '#6366f1' }} />
资源存储
{rawPercent.toFixed(1)}%
</span>
{data.enabled ? (
<span style={{ fontWeight: 500, color: isOver ? '#ef4444' : '#1e293b' }}>
@@ -188,12 +189,12 @@ const StorageCard: React.FC<{ data: ResourceCapacityData | null }> = ({ data })
color: isOver ? '#ef4444' : '#94a3b8',
}}
>
<span>
{/* <span>
{isOver
? `存储超额 · 超用 ${Math.abs(available).toFixed(2)} ${unit}`
: `剩余 ${available.toFixed(2)} ${unit}`}
</span>
<span>{rawPercent.toFixed(1)}%</span>
</span> */}
{/* <span>{rawPercent.toFixed(1)}%</span> */}
</div>
</>
)}
@@ -801,14 +802,16 @@ const AppLayout: React.FC = () => {
<PlusOutlined style={{ fontSize: 16 }} />
<span>充值积分</span>
</div>
{/* 资源存储容量展示（来自 getUser.resourceCapacity） */}
<StorageCard data={resourceCapacity} />
<div style={{ padding: '16px 16px', flexShrink: 0 }}>
<div style={{ padding: '16px 16px', flexShrink: 0 ,paddingTop: 0}}>
<Dropdown menu={{ items: userMenuItems, onClick: handleUserMenuClick }} placement="topRight" arrow>
<div style={{
display: 'flex', alignItems: 'center',
justifyContent: 'flex-start',
gap: 12,
padding: '10px 14px',
// padding: '10px 14px',
borderRadius: 14, cursor: 'pointer',
transition: 'all 0.25s ease',
background: 'linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%)',
@@ -829,6 +832,7 @@ const AppLayout: React.FC = () => {
flexShrink: 0,
boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)',
}} />
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ color: '#1e293b', fontSize: 16, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', letterSpacing: -0.01 }}>
{user?.username}
@@ -847,8 +851,7 @@ const AppLayout: React.FC = () => {
</div>
</Dropdown>
{/* 资源存储容量展示（来自 getUser.resourceCapacity） */}
<StorageCard data={resourceCapacity} />
</div>
</div>
video-gen-app/src/pages/GenerateConver.tsx
+25 -4
View File
@@ -446,6 +446,7 @@ const AIChatPage: React.FC = () => {
.catch(() => { });
}, []);
// 轮询逻辑 - 当有任务在生成时，每5秒查询一次状态
useEffect(() => {
// 先清理之前的定时器
@@ -1853,8 +1854,18 @@ const AIChatPage: React.FC = () => {
}}
>
<div style={{
width: item.value === 'auto' ? 14 : 18,
height: item.value === 'auto' ? 14 : 18,
width: (() => {
const [w, h] = item.value === 'auto' ? [1, 1] : item.value.split(':').map(Number);
const maxSize = 18;
if (w >= h) return maxSize;
return Math.round(maxSize * (w / h));
})(),
height: (() => {
const [w, h] = item.value === 'auto' ? [1, 1] : item.value.split(':').map(Number);
const maxSize = 18;
if (h >= w) return maxSize;
return Math.round(maxSize * (h / w));
})(),
border: `2px solid ${selectedRatio === item.value ? '#6366f1' : '#9ca3af'}`,
borderRadius: 2,
marginBottom: 2,
@@ -2132,8 +2143,18 @@ const AIChatPage: React.FC = () => {
}}
>
<div style={{
width: 18,
height: 18,
width: (() => {
const [w, h] = ratio.split(':').map(Number);
const maxSize = 18;
if (w >= h) return maxSize;
return Math.round(maxSize * (w / h));
})(),
height: (() => {
const [w, h] = ratio.split(':').map(Number);
const maxSize = 18;
if (h >= w) return maxSize;
return Math.round(maxSize * (h / w));
})(),
border: `2px solid ${videoAspectRatio === ratio ? '#6366f1' : '#9ca3af'}`,
borderRadius: 2,
marginBottom: 2,
video-gen-app/src/pages/GeneratePage.tsx
+13 -9
View File
@@ -494,7 +494,6 @@ const GeneratePage: React.FC = () => {
if (autoPollStartedRef.current || recordItems.length === 0) return;
autoPollStartedRef.current = true;
console.log('aaaa', recordItems);
recordItems.forEach((r) => {
if (r.projectId === projectId && r.status === "generating") {
@@ -600,7 +599,6 @@ const GeneratePage: React.FC = () => {
}
} catch (error: any) {
if (error.name !== 'AbortError') {
console.error('Optimizing polling error:', error);
}
}
}, 3000);
@@ -746,7 +744,6 @@ const GeneratePage: React.FC = () => {
key: "optimize",
});
} catch (error: any) {
console.error("优化提示词失败:", error);
const errorMsg =
error?.response?.data?.message ||
error?.message ||
@@ -897,7 +894,6 @@ const GeneratePage: React.FC = () => {
} catch (error: any) {
// 忽略AbortError（正常取消行为）
if (error.name !== 'AbortError') {
console.error('Global polling error:', error);
}
}
}, 5000); // 轮询间隔：5秒
@@ -1002,11 +998,9 @@ const GeneratePage: React.FC = () => {
aspectRatio: record.aspectRatio || "16:9",
resolution: record.resolution || "720p",
});
console.log('重新提交视频生成结果:',result);
if (result.status === "failed") {
setRecordStates((p) => ({ ...p, [recordId]: "failed" }));
console.log('12312');
message.error({
content: `「${projectName}」提交失败`,
@@ -1023,7 +1017,6 @@ const GeneratePage: React.FC = () => {
}
} catch (error: any) {
setRecordStates((p) => ({ ...p, [recordId]: "failed" }));
console.log('1231', error);
// 尝试从错误对象中提取detail字段
let errorMessage = "提交失败";
@@ -2198,8 +2191,18 @@ const GeneratePage: React.FC = () => {
>
<div
style={{
width: item.value === "auto" ? 16 : 20,
height: item.value === "auto" ? 16 : 20,
width: (() => {
const [w, h] = item.value === "auto" ? [1, 1] : item.value.split(":").map(Number);
const maxSize = 20;
if (w >= h) return maxSize;
return Math.round(maxSize * (w / h));
})(),
height: (() => {
const [w, h] = item.value === "auto" ? [1, 1] : item.value.split(":").map(Number);
const maxSize = 20;
if (h >= w) return maxSize;
return Math.round(maxSize * (h / w));
})(),
border: `2px solid ${selectedRatio === item.value ? "#6366f1" : "#9ca3af"}`,
borderRadius: item.value === "auto" ? 3 : 3,
marginBottom: 3,
@@ -2208,6 +2211,7 @@ const GeneratePage: React.FC = () => {
justifyContent: "center",
}}
>
{item.value === "auto" && (
<span
style={{
video-gen-app/src/pages/HomePage.tsx
+2 -2
View File
@@ -749,7 +749,7 @@ const HomePage: React.FC = () => {
{/* ========== 素材案例区域 ========== */}
{/* <div className="animate-fadeInUp" style={{
<div className="animate-fadeInUp" style={{
padding: '24px 28px',
borderRadius: 16,
background: '#fff',
@@ -834,7 +834,7 @@ const HomePage: React.FC = () => {
</div>
))}
</div>
</div> */}
</div>
</div>
);
};
video-gen-app/src/pages/InitialReplication.tsx
+2 -1
View File
@@ -442,7 +442,8 @@ const GenerateConver: React.FC = () => {
{/* 顶部标题栏 */}
<div className="animate-fadeInUp" style={{
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
marginBottom: 24, padding: '16px 24px', borderRadius: 16,
padding: '16px 24px', borderRadius: 16,
paddingBottom: 0,
background: 'rgba(255,255,255,0.6)',
backdropFilter: 'blur(10px)',
border: '1px solid rgba(99, 102, 241, 0.08)',