'use client';
import { motion } from 'framer-motion';
import { useReducedMotion } from '@/hooks/use-reduced-motion';
// ===== 抽象几何装饰 - 用于各 section 背景 =====
export function GeometricDecoration({ variant = 'circles' }: { variant?: 'circles' | 'lines' | 'grid' | 'waves' }) {
const shouldReduceMotion = useReducedMotion();
if (variant === 'circles') {
return (
);
}
if (variant === 'lines') {
return (
);
}
return null;
}
// ===== 数据可视化条 - 用于指标展示区域 =====
export function DataBar({ value, max = 100, label, color = 'brand' }: { value: number; max?: number; label: string; color?: 'brand' | 'blue' | 'purple' | 'cyan' }) {
const percentage = Math.min((value / max) * 100, 100);
const colorMap = {
brand: 'var(--color-brand)',
blue: 'var(--color-accent-blue)',
purple: 'var(--color-accent-purple)',
cyan: 'var(--color-accent-cyan)',
};
return (
);
}
// ===== 品牌渐变分隔线 =====
export function GradientDivider() {
return (
);
}
// ===== 品牌徽章/印章效果 =====
export function BrandStamp({ children }: { children: React.ReactNode }) {
const shouldReduceMotion = useReducedMotion();
return (
{children}
);
}