/projects、/conversation、/initial、/removelens这四个的Header样式风格和返回按钮风格
This commit is contained in:
+442
File diff suppressed because one or more lines are too long
+442
File diff suppressed because one or more lines are too long
Vendored
+36
-36
@@ -1,37 +1,37 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<title>民众智创</title>
|
||||
<script>
|
||||
(function() {
|
||||
var cached = localStorage.getItem('siteInfo');
|
||||
if (cached) {
|
||||
try {
|
||||
var info = JSON.parse(cached);
|
||||
if (info.siteName) {
|
||||
document.title = info.siteName;
|
||||
}
|
||||
if (info.siteLogo) {
|
||||
var link = document.querySelector('link[rel="icon"]');
|
||||
if (link) {
|
||||
link.href = info.siteLogo;
|
||||
link.type = 'image/png';
|
||||
}
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<script type="module" crossorigin src="/assets/index-qlqE3vB0.js"></script>
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<title>民众智创</title>
|
||||
<script>
|
||||
(function() {
|
||||
var cached = localStorage.getItem('siteInfo');
|
||||
if (cached) {
|
||||
try {
|
||||
var info = JSON.parse(cached);
|
||||
if (info.siteName) {
|
||||
document.title = info.siteName;
|
||||
}
|
||||
if (info.siteLogo) {
|
||||
var link = document.querySelector('link[rel="icon"]');
|
||||
if (link) {
|
||||
link.href = info.siteLogo;
|
||||
link.type = 'image/png';
|
||||
}
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<script type="module" crossorigin src="/assets/index-Ducf_SGZ.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-D3IaMBsq.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>␍
|
||||
</body>
|
||||
</html>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -951,31 +951,35 @@ const AIChatPage: React.FC = () => {
|
||||
{/* 主内容区 */}
|
||||
<Layout style={{ display: 'flex', flex: 1, background: 'transparent' }}>
|
||||
{/* 头部 - 显示对话标题和模型信息 */}
|
||||
<Header
|
||||
style={{
|
||||
borderRadius: '20px 20px 0 0',
|
||||
|
||||
background: 'rgba(255,255,255,0.1)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
borderBottom: '1px solid rgba(99, 102, 241, 0.08)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 24px',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div style={{ width: 36, height: 36, borderRadius: 12, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<RobotOutlined style={{ fontSize: 18, color: '#fff' }} />
|
||||
</div>
|
||||
<div className="animate-fadeInUp" style={{
|
||||
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||
marginBottom: 24, padding: '16px 24px', borderRadius: 16,
|
||||
background: 'rgba(255,255,255,0.6)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(99, 102, 241, 0.08)',
|
||||
position: 'relative', overflow: 'hidden', flexWrap: 'wrap', gap: 12,
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
|
||||
<div>
|
||||
<Text strong style={{ fontSize: 16, background: 'linear-gradient(90deg, #6366f1, #8b5cf6)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
|
||||
开启创作
|
||||
</Text>
|
||||
{/* <div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, #6366f1, #8b5cf6)', borderRadius: 1, marginTop: 4 }} /> */}
|
||||
<h2 style={{
|
||||
margin: 0,
|
||||
fontSize: 18,
|
||||
fontWeight: 700,
|
||||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundClip: 'text'
|
||||
}}>
|
||||
AI创作
|
||||
</h2>
|
||||
<p style={{ fontSize: 13, color: '#64748b', margin: '4px 0 0 0' }}>
|
||||
输入想法、剧本或上传参考，智能生成视频/图片
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)', borderRadius: 1 }} />
|
||||
</div>
|
||||
</Header>
|
||||
</div>
|
||||
|
||||
{/* 消息区域 */}
|
||||
<Content
|
||||
|
||||
@@ -1416,56 +1416,43 @@ const GeneratePage: React.FC = () => {
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 24,
|
||||
padding: "20px 28px",
|
||||
padding: "16px 24px",
|
||||
borderRadius: 16,
|
||||
background: "linear-gradient(135deg, #1e1b4b 0%, #312e81 100%)",
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
background: "rgba(255,255,255,0.6)",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(99, 102, 241, 0.08)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
right: -30,
|
||||
bottom: -30,
|
||||
width: 160,
|
||||
height: 160,
|
||||
borderRadius: "50%",
|
||||
background: "rgba(255,255,255,0.05)",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 14,
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
|
||||
<Button
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate("/projects")}
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.1)",
|
||||
border: "1px solid rgba(255,255,255,0.2)",
|
||||
color: "#fff",
|
||||
borderRadius: 10,
|
||||
fontSize: 13,
|
||||
height: 32,
|
||||
background: "rgba(99, 102, 241, 0.1)",
|
||||
border: "1px solid rgba(99, 102, 241, 0.2)",
|
||||
color: "#6366f1",
|
||||
}}
|
||||
/>
|
||||
>
|
||||
返回
|
||||
</Button>
|
||||
<div style={{ width: 32, height: 2, background: "linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)", borderRadius: 1 }} />
|
||||
<div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
|
||||
<Typography.Title
|
||||
level={4}
|
||||
style={{ margin: 0, color: "#fff", fontWeight: 700 }}
|
||||
style={{ margin: 0, fontSize: 16, fontWeight: 700, background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text" }}
|
||||
>
|
||||
{projectName}
|
||||
</Typography.Title>
|
||||
{project && (
|
||||
<Tag
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.12)",
|
||||
border: "1px solid rgba(255,255,255,0.2)",
|
||||
color: "rgba(255,255,255,0.8)",
|
||||
background: "rgba(99, 102, 241, 0.08)",
|
||||
border: "1px solid rgba(99, 102, 241, 0.15)",
|
||||
color: "#6366f1",
|
||||
borderRadius: 6,
|
||||
}}
|
||||
>
|
||||
@@ -1474,17 +1461,18 @@ const GeneratePage: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
<Typography.Text
|
||||
style={{ color: "rgba(255,255,255,0.5)", fontSize: 13 }}
|
||||
style={{ color: "#64748b", fontSize: 13 }}
|
||||
>
|
||||
描述视频 → AI优化 → 生成视频
|
||||
</Typography.Text>
|
||||
</div>
|
||||
<div style={{ width: 32, height: 2, background: "linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)", borderRadius: 1 }} />
|
||||
</div>
|
||||
<Tag
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.1)",
|
||||
border: "1px solid rgba(255,255,255,0.2)",
|
||||
color: "#fff",
|
||||
background: "rgba(99, 102, 241, 0.08)",
|
||||
border: "1px solid rgba(99, 102, 241, 0.15)",
|
||||
color: "#6366f1",
|
||||
borderRadius: 20,
|
||||
fontSize: 13,
|
||||
padding: "4px 14px",
|
||||
|
||||
@@ -450,15 +450,15 @@ function InitialInfo() {
|
||||
|
||||
<div style={{ borderBottom: '1px solid rgba(99, 102, 241, 0.08)', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 24px', background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', boxSizing: 'border-box' }}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate(-1)}
|
||||
style={{
|
||||
color: '#64748b',
|
||||
borderRadius: 10,
|
||||
fontSize: 13,
|
||||
height: 32,
|
||||
transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
background: 'rgba(99, 102, 241, 0.1)',
|
||||
border: '1px solid rgba(99, 102, 241, 0.2)',
|
||||
color: '#6366f1',
|
||||
}}
|
||||
>
|
||||
返回
|
||||
@@ -523,6 +523,7 @@ function InitialInfo() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ margin: '20px 0', height: 1, background: 'linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.15), transparent)', borderRadius: 0.5 }} />
|
||||
{taskDetail?.finalImageUrl && (
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<div>
|
||||
@@ -1229,9 +1230,9 @@ function InitialInfo() {
|
||||
{/* 创作记录弹窗 */}
|
||||
<Modal
|
||||
title={
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<div style={{ width: 4, height: 18, background: 'linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%)', borderRadius: 2 }} />
|
||||
<span style={{ fontSize: 15, fontWeight: 700, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div style={{ width: 4, height: 20, background: 'linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%)', borderRadius: 2 }} />
|
||||
<span style={{ fontSize: 16, fontWeight: 700, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||||
创作记录
|
||||
</span>
|
||||
</div>
|
||||
@@ -1240,22 +1241,36 @@ function InitialInfo() {
|
||||
onCancel={() => setIsModalOpen(false)}
|
||||
width={850}
|
||||
footer={null}
|
||||
style={{ borderRadius: 16 }}
|
||||
style={{ borderRadius: 20 }}
|
||||
styles={{
|
||||
body: { height: 580, display: 'flex', flexDirection: 'column', padding: 0 },
|
||||
header: { background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(99, 102, 241, 0.08)', padding: '16px 24px' },
|
||||
body: { background: 'linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #f0f9ff 100%)', },
|
||||
}}
|
||||
>
|
||||
{/* 搜索区域 */}
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', margin: '16px 24px', flexShrink: 0 }}>
|
||||
<Input
|
||||
placeholder="搜索产品名称"
|
||||
value={searchKeyword}
|
||||
onChange={(e) => setSearchKeyword(e.target.value)}
|
||||
onPressEnter={handleSearch}
|
||||
style={{ width: 200, borderRadius: 8, marginRight: 8, border: '1px solid rgba(99, 102, 241, 0.15)', background: 'rgba(255,255,255,0.8)' }}
|
||||
style={{
|
||||
width: 220,
|
||||
borderRadius: 10,
|
||||
marginRight: 10,
|
||||
border: '1px solid rgba(99, 102, 241, 0.15)',
|
||||
background: 'rgba(255,255,255,0.8)',
|
||||
}}
|
||||
/>
|
||||
<Button type="primary" onClick={handleSearch} style={{ borderRadius: 8, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', border: 'none', boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleSearch}
|
||||
style={{
|
||||
borderRadius: 10,
|
||||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
||||
border: 'none',
|
||||
}}
|
||||
>
|
||||
搜索
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -440,30 +440,32 @@ const GenerateConver: React.FC = () => {
|
||||
|
||||
|
||||
{/* 顶部标题栏 */}
|
||||
<Header
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.6)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
padding: '16px 24px',
|
||||
borderBottom: '1px solid rgba(99, 102, 241, 0.08)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<div className="animate-fadeInUp" style={{
|
||||
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||
marginBottom: 24, padding: '16px 24px', borderRadius: 16,
|
||||
background: 'rgba(255,255,255,0.6)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(99, 102, 241, 0.08)',
|
||||
position: 'relative', overflow: 'hidden', flexWrap: 'wrap', gap: 12,
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
|
||||
<h2 style={{
|
||||
margin: 0,
|
||||
fontSize: 18,
|
||||
fontWeight: 700,
|
||||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundClip: 'text'
|
||||
}}>
|
||||
爆款开头复刻
|
||||
</h2>
|
||||
<div>
|
||||
<h2 style={{
|
||||
margin: 0,
|
||||
fontSize: 18,
|
||||
fontWeight: 700,
|
||||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundClip: 'text'
|
||||
}}>
|
||||
爆款开头复刻
|
||||
</h2>
|
||||
<p style={{ fontSize: 13, color: '#64748b', margin: '4px 0 0 0' }}>
|
||||
上传参考视频与产品图片，一键复刻爆款视频开头
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)', borderRadius: 1 }} />
|
||||
</div>
|
||||
<Button
|
||||
@@ -481,7 +483,7 @@ const GenerateConver: React.FC = () => {
|
||||
>
|
||||
创作记录
|
||||
</Button>
|
||||
</Header>
|
||||
</div>
|
||||
|
||||
{/* 左侧预览区域 */}
|
||||
<div style={{ flex: 1, background: 'rgba(248, 250, 252, 0.5)', borderRight: '1px solid rgba(99, 102, 241, 0.08)', overflowY: 'auto' }}>
|
||||
|
||||
@@ -15,7 +15,7 @@ import {
|
||||
TagOutlined, TeamOutlined, ToolOutlined, TruckOutlined, VideoCameraOutlined,
|
||||
WalletOutlined, BankOutlined, BuildOutlined, ExperimentOutlined, HighlightOutlined,
|
||||
IdcardOutlined, MedicineBoxOutlined, ReadOutlined, RestOutlined, SketchOutlined,
|
||||
SolutionOutlined,
|
||||
SolutionOutlined, FileTextOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAppStore } from '../store/useAppStore';
|
||||
@@ -109,25 +109,51 @@ const ProjectsPage: React.FC = () => {
|
||||
{/* Header banner */}
|
||||
<div className="animate-fadeInUp" style={{
|
||||
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||
marginBottom: 24, padding: '22px 24px', borderRadius: 16,
|
||||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
||||
marginBottom: 24, padding: '16px 24px', borderRadius: 16,
|
||||
background: 'rgba(255,255,255,0.6)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(99, 102, 241, 0.08)',
|
||||
position: 'relative', overflow: 'hidden', flexWrap: 'wrap', gap: 12,
|
||||
}}>
|
||||
<div style={{ position: 'absolute', right: -20, top: -20, width: 200, height: 200, borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }} />
|
||||
<div style={{ position: 'relative', zIndex: 1 }}>
|
||||
<Typography.Title level={3} style={{ margin: '0 0 4px', color: '#fff', fontWeight: 700 }}>我的项目</Typography.Title>
|
||||
<Typography.Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14 }}>
|
||||
共 {projects.length} 个项目 · 按行业分类管理
|
||||
</Typography.Text>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
|
||||
<div>
|
||||
<h2 style={{
|
||||
margin: 0,
|
||||
fontSize: 18,
|
||||
fontWeight: 700,
|
||||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundClip: 'text'
|
||||
}}>
|
||||
我的项目
|
||||
</h2>
|
||||
<p style={{ fontSize: 13, color: '#64748b', margin: '4px 0 0 0' }}>
|
||||
共 {projects.length} 个项目 · 按行业分类管理
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)', borderRadius: 1 }} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 12 }}>
|
||||
<Button icon={<FileTextOutlined />} onClick={() => navigate('/records')} size="large" style={{
|
||||
background: 'rgba(99, 102, 241, 0.1)',
|
||||
border: '1px solid rgba(99, 102, 241, 0.2)',
|
||||
color: '#6366f1',
|
||||
fontWeight: 600,
|
||||
borderRadius: 10,
|
||||
height: 42,
|
||||
}}>项目记录</Button>
|
||||
<Button icon={<PlusOutlined />} onClick={() => setModalOpen(true)} size="large" style={{
|
||||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
||||
border: 'none',
|
||||
color: '#fff',
|
||||
fontWeight: 600,
|
||||
borderRadius: 10,
|
||||
height: 42,
|
||||
boxShadow: '0 4px 16px rgba(99, 102, 241, 0.35)',
|
||||
}}>新建项目</Button>
|
||||
</div>
|
||||
<Button icon={<PlusOutlined />} onClick={() => setModalOpen(true)} size="large" style={{
|
||||
background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.3)',
|
||||
color: '#fff', fontWeight: 600, backdropFilter: 'blur(10px)', borderRadius: 10, height: 42,
|
||||
}}>新建项目</Button>
|
||||
<Button icon={<PlusOutlined />} onClick={() => navigate('/records')} size="large" style={{
|
||||
background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.3)',
|
||||
color: '#fff', fontWeight: 600, backdropFilter: 'blur(10px)', borderRadius: 10, height: 42,
|
||||
}}>项目记录</Button>
|
||||
</div>
|
||||
|
||||
{projects.length === 0 ? (
|
||||
|
||||
@@ -27,7 +27,9 @@ import {
|
||||
DownloadOutlined,
|
||||
RocketOutlined,
|
||||
PictureOutlined,
|
||||
ArrowLeftOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAppStore } from '../store/useAppStore';
|
||||
import type { GenerationStatus, AspectRatio, Resolution } from '../types';
|
||||
import { formatDate } from '../utils/formatDate';
|
||||
@@ -41,6 +43,7 @@ const statusConfig: Record<GenerationStatus, { color: string; text: string; icon
|
||||
};
|
||||
|
||||
const RecordsPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { records, projects, fetchRecords, fetchProjects, generateVideo } = useAppStore();
|
||||
const recordItems = records.items;
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
@@ -113,10 +116,31 @@ const RecordsPage: React.FC = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<Typography.Text style={{ fontSize: 14, color: '#94a3b8' }}>
|
||||
查看所有视频生成记录，点击记录查看完整内容和视频
|
||||
</Typography.Text>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20, padding: '16px 24px', borderRadius: 16, background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', border: '1px solid rgba(99, 102, 241, 0.08)' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||
<Button
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate('/projects')}
|
||||
style={{
|
||||
borderRadius: 10,
|
||||
fontSize: 13,
|
||||
height: 32,
|
||||
background: 'rgba(99, 102, 241, 0.1)',
|
||||
border: '1px solid rgba(99, 102, 241, 0.2)',
|
||||
color: '#6366f1',
|
||||
}}
|
||||
>
|
||||
返回
|
||||
</Button>
|
||||
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
|
||||
<div>
|
||||
<Typography.Title level={2} style={{ margin: 0, fontSize: 16, fontWeight: 700, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>项目记录</Typography.Title>
|
||||
<Typography.Text style={{ fontSize: 13, color: '#64748b' }}>
|
||||
查看所有视频生成记录，点击记录查看完整内容和视频
|
||||
</Typography.Text>
|
||||
</div>
|
||||
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)', borderRadius: 1 }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
|
||||
@@ -589,34 +589,32 @@ function RemoveInfo() {
|
||||
<div style={{ position: 'absolute', bottom: -100, left: -100, width: 300, height: 300, background: 'radial-gradient(circle, rgba(167,139,250,0.08) 0%, transparent 70%)', borderRadius: '50%' }} />
|
||||
|
||||
{/* 标题栏 */}
|
||||
<div style={{ padding: '20px 32px', display: 'flex', alignItems: 'center', gap: 16, position: 'relative', zIndex: 10 }}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate(-1)}
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: '#6366f1',
|
||||
background: 'rgba(99, 102, 241, 0.1)',
|
||||
borderRadius: 12,
|
||||
padding: '8px 16px',
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(99, 102, 241, 0.15)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(99, 102, 241, 0.1)';
|
||||
}}
|
||||
/>
|
||||
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||
<div style={{ width: 40, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
|
||||
<h1 style={{ fontSize: 22, fontWeight: 700, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', margin: 0 }}>
|
||||
<div style={{ padding: '16px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderRadius: 16, background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', border: '1px solid rgba(99, 102, 241, 0.08)', position: 'relative', zIndex: 10 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||
<Button
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate(-1)}
|
||||
style={{
|
||||
borderRadius: 10,
|
||||
fontSize: 13,
|
||||
height: 32,
|
||||
background: 'rgba(99, 102, 241, 0.1)',
|
||||
border: '1px solid rgba(99, 102, 241, 0.2)',
|
||||
color: '#6366f1',
|
||||
}}
|
||||
>
|
||||
返回
|
||||
</Button>
|
||||
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
|
||||
<div>
|
||||
<h1 style={{ fontSize: 18, fontWeight: 700, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', margin: 0 }}>
|
||||
AI视频拆镜工作台
|
||||
</h1>
|
||||
<div style={{ width: 40, height: 2, background: 'linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)', borderRadius: 1 }} />
|
||||
<p style={{ fontSize: 13, color: '#64748b', margin: '4px 0 0 0' }}>
|
||||
一键拆解画面分镜，助力仿拍或创作
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)', borderRadius: 1 }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -167,49 +167,48 @@ export default function VideoFrameExtractor() {
|
||||
>
|
||||
|
||||
|
||||
<div style={{ maxWidth: 1200, margin: '50px auto', position: 'relative', zIndex: 10 }}>
|
||||
<div style={{ marginBottom: 50, height: 160, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative', zIndex: 10 }}>
|
||||
<div className="animate-fadeInUp" style={{
|
||||
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||
marginBottom: 24, padding: '16px 24px', borderRadius: 16,
|
||||
background: 'rgba(255,255,255,0.6)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(99, 102, 241, 0.08)',
|
||||
position: 'relative', overflow: 'hidden', flexWrap: 'wrap', gap: 12,
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||
<div style={{ width: 40, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
|
||||
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
|
||||
<div>
|
||||
<h1 style={{
|
||||
fontSize: 24,
|
||||
fontWeight: 700,
|
||||
<h2 style={{
|
||||
margin: 0,
|
||||
fontSize: 18,
|
||||
fontWeight: 700,
|
||||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundClip: 'text'
|
||||
}}>
|
||||
AI视频拆镜工作台
|
||||
</h1>
|
||||
</h2>
|
||||
<p style={{ fontSize: 13, color: '#64748b', margin: '4px 0 0 0' }}>
|
||||
一键拆解画面分镜，助力仿拍或创作
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ width: 40, height: 2, background: 'linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)', borderRadius: 1 }} />
|
||||
<div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, transparent, #8b5cf6, #6366f1, transparent)', borderRadius: 1 }} />
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="text"
|
||||
type="primary"
|
||||
ghost
|
||||
icon={<FileTextOutlined />}
|
||||
onClick={handleOpenModal}
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: '#6366f1',
|
||||
borderRadius: 10,
|
||||
padding: '6px 16px',
|
||||
fontSize: 13,
|
||||
background: 'rgba(99, 102, 241, 0.1)',
|
||||
borderRadius: 12,
|
||||
padding: '10px 20px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(99, 102, 241, 0.15)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(99, 102, 241, 0.1)';
|
||||
borderColor: 'rgba(99, 102, 241, 0.2)',
|
||||
color: '#6366f1',
|
||||
}}
|
||||
>
|
||||
创作记录
|
||||
|
||||
@@ -453,15 +453,15 @@ function InitialInfo() {
|
||||
>
|
||||
<div style={{ borderBottom: '1px solid rgba(99, 102, 241, 0.08)', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 24px', background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', boxSizing: 'border-box' }}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => window.history.back()}
|
||||
style={{
|
||||
color: '#64748b',
|
||||
borderRadius: 10,
|
||||
fontSize: 13,
|
||||
height: 32,
|
||||
transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
background: 'rgba(99, 102, 241, 0.1)',
|
||||
border: '1px solid rgba(99, 102, 241, 0.2)',
|
||||
color: '#6366f1',
|
||||
}}
|
||||
>
|
||||
返回
|
||||
|
||||
Reference in New Issue
Block a user