bdefb878a5
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
step 1 标题下的「选一个最贴近的类型」改成 RotatingFooterHint， 6 条文案 4 秒一轮（含「数字背后还有故事，等下一次上线揭晓」等）。 RotatingFooterHint 兼容自定义对齐：传 className 就完全覆盖 默认 mt-1 + justify-center；不传则保持底部居中（其他模块的用法）。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
const FOOTER_HINTS = [
|
|
'想看哪个角度的数据？告诉我们一下嘛',
|
|
'更多统计维度接入中，欢迎您的建议 ~',
|
|
'下一个图表，可能就是您建议的那个',
|
|
'数据科学家正在深夜挖掘新维度…',
|
|
'维度灵感正在路上，钉一下产品同学也行',
|
|
'数字背后还有故事，等下一次上线揭晓',
|
|
];
|
|
|
|
interface Props {
|
|
/** 自定义提示词集合，默认使用通用文案 */
|
|
hints?: string[];
|
|
/** 切换间隔，默认 4 秒 */
|
|
intervalMs?: number;
|
|
/** 额外类名 */
|
|
className?: string;
|
|
/** 点击时回调（一般用来打开反馈弹窗） */
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export default function RotatingFooterHint({ hints = FOOTER_HINTS, intervalMs = 4000, className = '', onClick }: Props) {
|
|
const [idx, setIdx] = useState(0);
|
|
useEffect(() => {
|
|
if (hints.length <= 1) return;
|
|
const t = setInterval(() => setIdx(i => (i + 1) % hints.length), intervalMs);
|
|
return () => clearInterval(t);
|
|
}, [hints, intervalMs]);
|
|
|
|
return (
|
|
<div
|
|
className={`flex items-center gap-1.5 text-[11px] text-slate-400 font-bold ${onClick ? 'cursor-pointer hover:text-blue-500 transition-colors' : ''} ${className || 'mt-1 justify-center'}`}
|
|
onClick={onClick}
|
|
>
|
|
<span className="inline-block w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse" />
|
|
<span
|
|
key={idx}
|
|
style={{ animation: 'rotatingHintFade 0.5s ease' }}
|
|
>
|
|
{hints[idx]}
|
|
</span>
|
|
<style>{`
|
|
@keyframes rotatingHintFade {
|
|
from { opacity: 0; transform: translateY(2px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|