优化前端

This commit is contained in:
Azmat@qq.com
2026-09-02 10:55:36 +08:00
parent 2c5e4580a4
commit 70d6353d28
9 changed files with 20 additions and 54 deletions
+3 -9
View File
@@ -32,26 +32,20 @@
} }
.asset-factory .af-page-head { .asset-factory .af-page-head {
min-height: 76px;
display: flex; display: flex;
align-items: flex-start; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 30px; gap: 30px;
margin-bottom: 34px; margin-bottom: 20px;
} }
.asset-factory .af-page-head h1 { .asset-factory .af-page-head h1 {
margin: 0 0 10px; margin: 0;
font-size: 32px; font-size: 32px;
line-height: 1.2; line-height: 1.2;
font-weight: 600; font-weight: 600;
letter-spacing: -.02em; letter-spacing: -.02em;
color: var(--accent-black); color: var(--accent-black);
} }
.asset-factory .af-page-head p {
margin: 0;
color: var(--af-muted);
font-size: 15px;
}
.asset-factory .af-tools { .asset-factory .af-tools {
display: grid; display: grid;
+2 -4
View File
@@ -40,9 +40,8 @@
} }
.fc-page .fc-head { .fc-page .fc-head {
min-height: 76px;
display: flex; display: flex;
align-items: flex-start; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 30px; gap: 30px;
margin-bottom: 18px; margin-bottom: 18px;
@@ -73,14 +72,13 @@
} }
.fc-page .fc-back svg { width: 19px; height: 19px; } .fc-page .fc-back svg { width: 19px; height: 19px; }
.fc-page .fc-head h1 { .fc-page .fc-head h1 {
margin: 0 0 10px; margin: 0;
font-size: 32px; font-size: 32px;
line-height: 1.2; line-height: 1.2;
font-weight: 600; font-weight: 600;
letter-spacing: -.02em; letter-spacing: -.02em;
color: var(--accent-black); color: var(--accent-black);
} }
.fc-page .fc-head p { margin: 0; color: var(--fc-muted); font-size: 15px; }
.fc-page .fc-material { .fc-page .fc-material {
display: flex; display: flex;
align-items: center; align-items: center;
+3 -5
View File
@@ -25,22 +25,20 @@
} }
.projects-page .vc-head { .projects-page .vc-head {
min-height: 76px;
display: flex; display: flex;
align-items: flex-start; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 30px; gap: 30px;
margin-bottom: 26px; margin-bottom: 20px;
} }
.projects-page .vc-head h1 { .projects-page .vc-head h1 {
margin: 0 0 10px; margin: 0;
font-size: 32px; font-size: 32px;
line-height: 1.2; line-height: 1.2;
font-weight: 600; font-weight: 600;
letter-spacing: -.02em; letter-spacing: -.02em;
color: var(--accent-black); color: var(--accent-black);
} }
.projects-page .vc-head p { margin: 0; color: var(--vc-muted); font-size: 15px; }
.projects-page .vc-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .projects-page .vc-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.projects-page .vc-ghost { .projects-page .vc-ghost {
min-width: 132px; min-width: 132px;
-4
View File
@@ -268,10 +268,7 @@ export function AssetFactoryPage({ navigate }: { navigate: (page: Page) => void
<div className="asset-factory"> <div className="asset-factory">
<div className="asset-factory-inner"> <div className="asset-factory-inner">
<header className="af-page-head"> <header className="af-page-head">
<div>
<h1>图片创作</h1> <h1>图片创作</h1>
<p>从商品与模特资产出发,快速完成电商图片生产</p>
</div>
</header> </header>
<div className="af-tools"> <div className="af-tools">
@@ -294,7 +291,6 @@ export function AssetFactoryPage({ navigate }: { navigate: (page: Page) => void
<div className="af-section"> <div className="af-section">
<div> <div>
<h2>最近创作</h2> <h2>最近创作</h2>
<p>查看图片任务状态与生成结果</p>
</div> </div>
</div> </div>
-3
View File
@@ -607,10 +607,7 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled, onBack }
<ArrowLeft /> <ArrowLeft />
</button> </button>
) : null} ) : null}
<div>
<h1>自由生成</h1> <h1>自由生成</h1>
<p>使用提示词和参考素材,自由控制视频画面与参数</p>
</div>
</div> </div>
<div className="fc-material"> <div className="fc-material">
<button type="button" className="fc-ghost" onClick={() => openLibrary()}> <button type="button" className="fc-ghost" onClick={() => openLibrary()}>
-6
View File
@@ -592,16 +592,12 @@ export function ProjectsPage({ products, projects, loading = false, navigate, op
<section className={`projects-page${editMode ? " manage-mode" : ""}`}> <section className={`projects-page${editMode ? " manage-mode" : ""}`}>
<div className="projects-inner"> <div className="projects-inner">
<header className="vc-head"> <header className="vc-head">
<div>
<h1>视频创作</h1> <h1>视频创作</h1>
<p>从商品或参考视频出发,选择适合当前任务的生产方式</p>
</div>
</header> </header>
<section className="vc-sec"> <section className="vc-sec">
<div className="vc-sec-h"> <div className="vc-sec-h">
<h2>商品视频生产</h2> <h2>商品视频生产</h2>
<p>以商品卖点为核心,快速生成完整带货视频</p>
</div> </div>
<div className="vc-tools two"> <div className="vc-tools two">
{VIDEO_MAKE.map((card) => ( {VIDEO_MAKE.map((card) => (
@@ -622,7 +618,6 @@ export function ProjectsPage({ products, projects, loading = false, navigate, op
<section className="vc-sec"> <section className="vc-sec">
<div className="vc-sec-h"> <div className="vc-sec-h">
<h2>AI 视频工具</h2> <h2>AI 视频工具</h2>
<p>自由生成,或复用参考视频中已经验证过的内容表达</p>
</div> </div>
<div className="vc-tools three"> <div className="vc-tools three">
{VIDEO_TOOLS.map((card) => ( {VIDEO_TOOLS.map((card) => (
@@ -643,7 +638,6 @@ export function ProjectsPage({ products, projects, loading = false, navigate, op
<div className="vc-sec-h vc-list-h"> <div className="vc-sec-h vc-list-h">
<div> <div>
<h2>视频项目</h2> <h2>视频项目</h2>
<p>统一查看各类视频任务的状态与生成结果</p>
</div> </div>
<button className={`vc-ghost${editMode ? " is-on" : ""}`} type="button" onClick={() => (editMode ? exitEdit() : setEditMode(true))}> <button className={`vc-ghost${editMode ? " is-on" : ""}`} type="button" onClick={() => (editMode ? exitEdit() : setEditMode(true))}>
<Settings2 /> <Settings2 />
-1
View File
@@ -504,7 +504,6 @@ export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }:
</button> </button>
<div className="page-heading"> <div className="page-heading">
<h1>提炼提示词</h1> <h1>提炼提示词</h1>
<p>上传参考视频,生成可编辑的视频提示词</p>
</div> </div>
</div> </div>
</header> </header>
+4 -11
View File
@@ -27,17 +27,16 @@
.vr-page .page-header { .vr-page .page-header {
position: relative; position: relative;
min-height: 76px;
display: flex; display: flex;
align-items: flex-start; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 30px; gap: 30px;
margin-bottom: 34px; margin-bottom: 24px;
} }
.vr-page .image-title-row { .vr-page .image-title-row {
display: flex; display: flex;
align-items: flex-start; align-items: center;
gap: 13px; gap: 13px;
} }
@@ -47,7 +46,6 @@
display: grid; display: grid;
place-items: center; place-items: center;
flex: 0 0 auto; flex: 0 0 auto;
margin-top: 2px;
border: 1px solid rgba(0, 47, 167, 0.46); border: 1px solid rgba(0, 47, 167, 0.46);
border-radius: 12px; border-radius: 12px;
color: var(--klein); color: var(--klein);
@@ -64,18 +62,13 @@
.vr-page .image-back-button svg { width: 19px; height: 19px; } .vr-page .image-back-button svg { width: 19px; height: 19px; }
.vr-page .page-heading h1 { .vr-page .page-heading h1 {
margin: 0 0 10px; margin: 0;
font-size: 32px; font-size: 32px;
line-height: 1.2; line-height: 1.2;
font-weight: 600; font-weight: 600;
letter-spacing: -.02em; letter-spacing: -.02em;
color: var(--text); color: var(--text);
} }
.vr-page .page-heading p {
margin: 0;
color: var(--muted);
font-size: 15px;
}
.vr-page .video-flow-grid { .vr-page .video-flow-grid {
display: grid; display: grid;
+5 -8
View File
@@ -26,17 +26,17 @@
} }
.vrep-page .page-header { .vrep-page .page-header {
min-height: 76px; position: relative;
display: flex; display: flex;
align-items: flex-start; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 30px; gap: 30px;
margin-bottom: 34px; margin-bottom: 24px;
} }
.vrep-page .image-title-row { .vrep-page .image-title-row {
display: flex; display: flex;
align-items: flex-start; align-items: center;
gap: 13px; gap: 13px;
} }
@@ -46,7 +46,6 @@
display: grid; display: grid;
place-items: center; place-items: center;
flex: 0 0 auto; flex: 0 0 auto;
margin-top: 2px;
border: 1px solid rgba(0, 47, 167, 0.46); border: 1px solid rgba(0, 47, 167, 0.46);
border-radius: 12px; border-radius: 12px;
color: var(--klein); color: var(--klein);
@@ -55,17 +54,15 @@
box-shadow: 0 5px 14px rgba(0, 47, 167, 0.07); box-shadow: 0 5px 14px rgba(0, 47, 167, 0.07);
transition: background-color 180ms ease, transform 180ms ease; transition: background-color 180ms ease, transform 180ms ease;
} }
.vrep-page .image-back-button:hover { .vrep-page .image-back-button:hover {
transform: translateX(-2px); transform: translateX(-2px);
border-color: var(--klein); border-color: var(--klein);
background: rgba(0, 47, 167, 0.055); background: rgba(0, 47, 167, 0.055);
} }
.vrep-page .image-back-button svg { width: 19px; height: 19px; } .vrep-page .image-back-button svg { width: 19px; height: 19px; }
.vrep-page .page-heading h1 { .vrep-page .page-heading h1 {
margin: 0 0 10px; margin: 0;
font-size: 32px; font-size: 32px;
line-height: 1.2; line-height: 1.2;
font-weight: 600; font-weight: 600;