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