gongzhiyongandClaude Sonnet 4.6
39aad16373
- Wire next-themes ThemeProvider in layout with class strategy, defaultTheme=dark - Define all Gemini colors as CSS custom properties (--gem-*) in globals.css with light (:root) and dark (.dark) variants - Replace all hardcoded hex colors across 7 Gemini components with var() refs - Add Sun/Moon toggle button in GeminiTopbar (right side, before Settings) - Theme persists to localStorage via next-themes (key: gem-theme) - Dark theme renders identically to before (same hex values) - Light theme: white bg, light gray surfaces, same blue-purple accent gradient Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
"use client";
|
||
|
||
import {
|
||
BarChart3,
|
||
FileText,
|
||
TrendingUp,
|
||
Users,
|
||
} from "lucide-react";
|
||
|
||
interface GeminiWelcomeProps {
|
||
onSuggestionClick: (text: string) => void;
|
||
}
|
||
|
||
const suggestions = [
|
||
{
|
||
icon: BarChart3,
|
||
text: "帮我分析本月的用户增长数据，找出关键趋势",
|
||
short: "数据分析",
|
||
},
|
||
{
|
||
icon: FileText,
|
||
text: "生成一份产品运营周报，包含核心指标和优化建议",
|
||
short: "运营周报",
|
||
},
|
||
{
|
||
icon: TrendingUp,
|
||
text: "制定下季度的用户增长策略和推广计划",
|
||
short: "增长策略",
|
||
},
|
||
{
|
||
icon: Users,
|
||
text: "分析用户留存率下降的原因，给出改进方案",
|
||
short: "用户留存",
|
||
},
|
||
];
|
||
|
||
export function GeminiWelcome({ onSuggestionClick }: GeminiWelcomeProps) {
|
||
const hour = new Date().getHours();
|
||
const greeting =
|
||
hour < 12 ? "早上好" : hour < 18 ? "下午好" : "晚上好";
|
||
|
||
return (
|
||
<div className="flex flex-col items-center justify-center flex-1 px-6 pb-32 pt-10 min-h-0">
|
||
{/* Greeting */}
|
||
<div className="text-center mb-10">
|
||
<h1 className="text-4xl font-semibold mb-3 leading-tight text-balance">
|
||
<span className="bg-gradient-to-r from-[var(--gem-blue)] via-[var(--gem-mid-gradient)] to-[var(--gem-purple)] bg-clip-text text-transparent">
|
||
{greeting}，
|
||
</span>{" "}
|
||
<span className="text-[var(--gem-text)]">用户</span>
|
||
</h1>
|
||
<p className="text-[var(--gem-text-muted)] text-xl">我今天可以帮你做什么运营工作？</p>
|
||
</div>
|
||
|
||
{/* Suggestion cards */}
|
||
<div className="grid grid-cols-2 gap-3 w-full max-w-2xl">
|
||
{suggestions.map(({ icon: Icon, text, short }) => (
|
||
<button
|
||
key={short}
|
||
onClick={() => onSuggestionClick(text)}
|
||
className="flex flex-col gap-2 p-4 rounded-2xl border border-[var(--gem-border)] bg-[var(--gem-surface)] hover:bg-[var(--gem-surface-hover)] hover:border-[var(--gem-border-hover)] transition-all duration-150 text-left cursor-pointer group"
|
||
aria-label={`Suggestion: ${text}`}
|
||
>
|
||
<div className="w-8 h-8 rounded-full bg-[var(--gem-surface-2)] flex items-center justify-center group-hover:bg-[var(--gem-surface-3)] transition-colors">
|
||
<Icon size={16} className="text-[var(--gem-text-muted)]" />
|
||
</div>
|
||
<span className="text-[var(--gem-text-secondary)] text-sm leading-snug line-clamp-2">{text}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|