Skip to content

Q
qjclaw-dmg
Commit d0943957 authored by edy's avatar edy
Browse files
Options

feat(ui): refine douyin expert guide

parent d9c28a9f
Hide whitespace changes
Inline Side-by-side
Showing with 46 additions and 46 deletions
apps/ui/src/features/experts/ExpertsView.tsx
View file @ d0943957
......@@ -143,14 +143,6 @@ export function ExpertEmptyState({
if (activeExpertKey === "douyin") {
return (
<div className="empty-state expert-empty-state expert-empty-state-douyin">
<div className="douyin-brief-card">
<span className="douyin-brief-logo" aria-hidden="true">抖</span>
<div className="douyin-brief-copy">
<strong>{activeExpertGuide.greeting}</strong>
<p>{activeExpertGuide.summary}</p>
</div>
</div>
<div className="douyin-guide-grid">
<section className="douyin-video-preview-card" aria-label="短视频预览">
<div className="douyin-video-frame">
......@@ -210,7 +202,6 @@ export function ExpertEmptyState({
</div>
<div className="douyin-guide-footer">
<span className="douyin-guide-label">{starterQuestionsHint}</span>
<div className="starter-prompt-list">
{activeExpertGuide.prompts.map((item) => (
<button
......@@ -219,7 +210,6 @@ export function ExpertEmptyState({
className="starter-prompt douyin-starter-prompt"
onClick={() => onStarterPrompt(item)}
>
<span className="starter-prompt-title">立即套用脚本 brief</span>
<span className="starter-prompt-desc">{item}</span>
</button>
))}
......
apps/ui/src/features/experts/expertDisplay.ts
View file @ d0943957
......@@ -172,7 +172,7 @@ export function getExpertGuideContent(project: ExpertProject | undefined): Exper
return {
greeting: "先给我一个视频目标，我来生成文案和分镜预览。",
summary: "抖音视频 brief、脚本、分镜和生成路线会先在这里对齐。",
summary: "",
intro: "补齐这些信息后，我会先出预览，不会直接开跑视频。",
requirementChecklist: [
"主题",
......
apps/ui/src/styles/chat.css
View file @ d0943957
......@@ -668,12 +668,12 @@
.conversation-shell.conversation-shell-experts .expert-empty-state-douyin {
align-content: start;
overflow-y: auto;
padding: 16px;
padding: 14px;
border-style: solid;
background:
radial-gradient(circle at 18% 10%, rgba(61, 220, 255, 0.16), transparent 28%),
radial-gradient(circle at 88% 8%, rgba(255, 77, 141, 0.12), transparent 26%),
linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
radial-gradient(circle at 18% 10%, rgba(61, 220, 255, 0.08), transparent 30%),
radial-gradient(circle at 88% 8%, rgba(255, 77, 141, 0.06), transparent 28%),
linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
}
@media (max-width: 1440px), (max-height: 820px) {
......
apps/ui/src/styles/shell.css
View file @ d0943957
......@@ -807,12 +807,12 @@
}
.expert-empty-state-douyin {
gap: 12px;
padding: 16px;
gap: 10px;
padding: 14px;
background:
radial-gradient(circle at 18% 10%, rgba(61, 220, 255, 0.16), transparent 28%),
radial-gradient(circle at 88% 8%, rgba(255, 77, 141, 0.12), transparent 26%),
linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
radial-gradient(circle at 18% 10%, rgba(61, 220, 255, 0.08), transparent 30%),
radial-gradient(circle at 88% 8%, rgba(255, 77, 141, 0.06), transparent 28%),
linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
}
.expert-empty-state-douyin .douyin-brief-card {
......@@ -866,10 +866,10 @@
.expert-empty-state-douyin .douyin-video-preview-card,
.expert-empty-state-douyin .douyin-guide-card,
.expert-empty-state-douyin .douyin-guide-footer {
border-radius: 16px;
border: 1px solid rgba(207, 221, 235, 0.9);
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 16px 34px rgba(23, 31, 46, 0.07);
border-radius: 14px;
border: 1px solid rgba(203, 213, 225, 0.68);
background: rgba(255, 255, 255, 0.76);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}
.expert-empty-state-douyin .douyin-video-preview-card {
......@@ -993,20 +993,28 @@
.expert-empty-state-douyin .douyin-guide-card {
display: grid;
gap: 10px;
gap: 9px;
align-content: start;
padding: 14px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.64));
box-shadow: none;
}
.expert-empty-state-douyin .douyin-guide-label {
color: #101827;
font-size: 12px;
width: fit-content;
padding: 3px 8px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.04);
color: #64748b;
font-size: 11px;
font-weight: 700;
line-height: 1.4;
}
.expert-empty-state-douyin .douyin-guide-intro {
margin: 0;
color: #64748b;
}
.expert-empty-state-douyin .douyin-guide-chip-list {
......@@ -1021,9 +1029,9 @@
align-items: center;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid rgba(16, 24, 39, 0.08);
background: #f8fafc;
color: #243247;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(255, 255, 255, 0.72);
color: #475569;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
......@@ -1039,25 +1047,25 @@
display: grid;
gap: 5px;
padding: 10px;
border-radius: 14px;
border: 1px solid rgba(16, 24, 39, 0.08);
background: #fbfdff;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(255, 255, 255, 0.58);
}
.expert-empty-state-douyin .douyin-guide-route-card.host {
border-color: rgba(61, 220, 255, 0.38);
border-color: rgba(61, 220, 255, 0.24);
}
.expert-empty-state-douyin .douyin-guide-route-card.visual {
border-color: rgba(255, 77, 141, 0.32);
border-color: rgba(255, 77, 141, 0.22);
}
.expert-empty-state-douyin .douyin-guide-route-badge {
width: fit-content;
padding: 3px 7px;
border-radius: 999px;
background: rgba(16, 24, 39, 0.06);
color: #334155;
background: rgba(15, 23, 42, 0.035);
color: #64748b;
font-size: 11px;
font-weight: 700;
line-height: 1.4;
......@@ -1087,7 +1095,7 @@
align-items: center;
padding: 8px;
border-radius: 12px;
background: #f8fafc;
background: rgba(255, 255, 255, 0.58);
}
.expert-empty-state-douyin .douyin-guide-step-index {
......@@ -1097,8 +1105,8 @@
align-items: center;
justify-content: center;
border-radius: 999px;
background: #101827;
color: #ffffff;
background: rgba(15, 23, 42, 0.08);
color: #475569;
font-size: 11px;
font-weight: 800;
line-height: 1;
......@@ -1106,7 +1114,7 @@
.expert-empty-state-douyin .douyin-guide-step-copy {
min-width: 0;
color: #243247;
color: #475569;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
......@@ -1119,7 +1127,10 @@
.expert-empty-state-douyin .douyin-guide-footer {
display: grid;
gap: 10px;
padding: 12px;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.expert-empty-state-douyin .starter-prompt-list {
......@@ -1130,10 +1141,9 @@
display: grid;
gap: 5px;
min-height: 74px;
border-color: rgba(16, 24, 39, 0.1);
background:
linear-gradient(90deg, rgba(61, 220, 255, 0.1), rgba(255, 77, 141, 0.1)),
#ffffff;
border: 0;
background: rgba(255, 255, 255, 0.52);
box-shadow: none;
}
.expert-empty-state-douyin .starter-prompt-title {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment