234b44ea03
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
- EnergyModule TopTab 加 'etc'，用 lucide Receipt 图标
- TABS 数据驱动渲染，加新 tab 不用复制粘贴
- 新增 ETCView：可爱的「建设中」占位
- 大号 Construction 图标 + 顶上的 Hammer 摆动动画
- 文案「ETC 模块建设中」+ 副标说明
- 4 步进度（需求评审/数据对接/页面开发/正式上线）
已完成项绿点、进行中项黄点 + 脉冲，未来项灰点
- 底部专属 RotatingFooterHint，5 条 ETC 上下文文案
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
80 lines
3.4 KiB
TypeScript
80 lines
3.4 KiB
TypeScript
import { motion } from 'motion/react';
|
||
import { Construction, Hammer } from 'lucide-react';
|
||
import RotatingFooterHint from '../../components/RotatingFooterHint';
|
||
|
||
const ETC_HINTS = [
|
||
'ETC 通行费数据正在与发卡方系统打通…',
|
||
'工人 GG 正在搭脚手架，敬请期待 ~',
|
||
'马上能看到每月通行费明细啦',
|
||
'想看哪个维度的 ETC？反馈一下嘛',
|
||
'上线时机：等数据接通的那一天',
|
||
];
|
||
|
||
export default function ETCView() {
|
||
return (
|
||
<div className="flex flex-col gap-4">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 12 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.3 }}
|
||
className="bg-white rounded-2xl border border-slate-100 shadow-sm px-6 py-14 flex flex-col items-center text-center"
|
||
>
|
||
<div className="relative w-20 h-20 mb-4">
|
||
<motion.div
|
||
animate={{ rotate: [0, -8, 8, -4, 4, 0] }}
|
||
transition={{ duration: 2.4, repeat: Infinity, ease: 'easeInOut' }}
|
||
className="absolute inset-0 rounded-3xl bg-gradient-to-br from-amber-50 to-orange-50 flex items-center justify-center"
|
||
>
|
||
<Construction size={36} className="text-amber-500" strokeWidth={2.2} />
|
||
</motion.div>
|
||
<motion.div
|
||
animate={{ rotate: [0, 18, -10, 0], y: [0, -2, 1, 0] }}
|
||
transition={{ duration: 1.6, repeat: Infinity, ease: 'easeInOut' }}
|
||
className="absolute -top-1 -right-1 w-9 h-9 rounded-2xl bg-white border border-amber-100 shadow-sm flex items-center justify-center"
|
||
>
|
||
<Hammer size={16} className="text-amber-500" strokeWidth={2.2} />
|
||
</motion.div>
|
||
</div>
|
||
|
||
<div className="text-base font-black text-slate-800 mb-1.5">ETC 模块建设中</div>
|
||
<div className="text-[12px] text-slate-500 font-bold leading-relaxed max-w-[280px]">
|
||
通行费明细、按车按月统计、运营成本拆分
|
||
<br />
|
||
这些数据都在路上啦
|
||
</div>
|
||
|
||
{/* 简单的里程碑进度感 */}
|
||
<div className="mt-6 w-full max-w-xs space-y-2">
|
||
{[
|
||
{ label: '需求评审', done: true },
|
||
{ label: '数据对接', done: true },
|
||
{ label: '页面开发', done: false, current: true },
|
||
{ label: '正式上线', done: false },
|
||
].map((m, i) => (
|
||
<motion.div
|
||
key={i}
|
||
initial={{ opacity: 0, x: -8 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ delay: 0.1 + i * 0.08, duration: 0.3 }}
|
||
className="flex items-center gap-2.5 text-[11px]"
|
||
>
|
||
<span className={`w-3 h-3 rounded-full flex-shrink-0 ${
|
||
m.done ? 'bg-emerald-400'
|
||
: m.current ? 'bg-amber-400 ring-4 ring-amber-100 animate-pulse'
|
||
: 'bg-slate-200'
|
||
}`} />
|
||
<span className={`font-bold ${m.done ? 'text-slate-500' : m.current ? 'text-amber-600' : 'text-slate-300'}`}>
|
||
{m.label}
|
||
</span>
|
||
{m.done && <span className="text-[10px] text-emerald-500 font-bold ml-auto">已完成</span>}
|
||
{m.current && <span className="text-[10px] text-amber-500 font-bold ml-auto">进行中</span>}
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
|
||
<RotatingFooterHint hints={ETC_HINTS} />
|
||
</div>
|
||
);
|
||
}
|