From 234b44ea03f9bf776746f45605199b2e0f74b928 Mon Sep 17 00:00:00 2001
From: kkfluous <kkfluous@kdemacbook-air.local>
Date: Thu, 30 Apr 2026 14:42:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(energy):=20=E8=83=BD=E6=BA=90=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=96=B0=E5=A2=9E=20ETC=20tab=EF=BC=8C=E5=BB=BA?=
 =?UTF-8?q?=E8=AE=BE=E4=B8=AD=E5=8D=A0=E4=BD=8D=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/modules/energy/ETCView.tsx      | 79 +++++++++++++++++++++++++++++
 src/modules/energy/EnergyModule.tsx | 52 ++++++++++---------
 2 files changed, 108 insertions(+), 23 deletions(-)
 create mode 100644 src/modules/energy/ETCView.tsx

diff --git a/src/modules/energy/ETCView.tsx b/src/modules/energy/ETCView.tsx
new file mode 100644
index 0000000..c218700
--- /dev/null
+++ b/src/modules/energy/ETCView.tsx
@@ -0,0 +1,79 @@
+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>
+  );
+}
diff --git a/src/modules/energy/EnergyModule.tsx b/src/modules/energy/EnergyModule.tsx
index 3aa10dc..07664a3 100644
--- a/src/modules/energy/EnergyModule.tsx
+++ b/src/modules/energy/EnergyModule.tsx
@@ -1,10 +1,17 @@
 import { useState } from 'react';
-import { Fuel, BatteryCharging } from 'lucide-react';
+import { Fuel, BatteryCharging, Receipt } from 'lucide-react';
 import { motion } from 'motion/react';
 import HydrogenView from './HydrogenView';
 import ElectricView from './ElectricView';
+import ETCView from './ETCView';
 
-type TopTab = 'hydrogen' | 'electric';
+type TopTab = 'hydrogen' | 'electric' | 'etc';
+
+const TABS: { key: TopTab; label: string; icon: typeof Fuel }[] = [
+  { key: 'hydrogen', label: '氢能', icon: Fuel },
+  { key: 'electric', label: '电能', icon: BatteryCharging },
+  { key: 'etc',      label: 'ETC', icon: Receipt },
+];
 
 export default function EnergyModule() {
   const [activeTab, setActiveTab] = useState<TopTab>('hydrogen');
@@ -12,28 +19,27 @@ export default function EnergyModule() {
     <div className="min-h-screen bg-[#F8F9FB] text-gray-800 font-sans p-3 md:p-6 relative" style={{ overflowX: 'clip' }}>
       <div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 landscape:pb-0 landscape:h-full landscape:flex-1 landscape:overflow-hidden">
         <div className="bg-white px-4 py-2 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-6 sticky top-0 z-30">
-          <button
-            onClick={() => setActiveTab('hydrogen')}
-            className={`flex items-center gap-2 py-1 transition-all relative ${activeTab === 'hydrogen' ? 'text-blue-600' : 'text-slate-400'}`}
-          >
-            <Fuel size={14} />
-            <span className="text-[11px] font-bold">氢能</span>
-            {activeTab === 'hydrogen' && (
-              <motion.div layoutId="activeEnergyTopTab" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
-            )}
-          </button>
-          <button
-            onClick={() => setActiveTab('electric')}
-            className={`flex items-center gap-2 py-1 transition-all relative ${activeTab === 'electric' ? 'text-blue-600' : 'text-slate-400'}`}
-          >
-            <BatteryCharging size={14} />
-            <span className="text-[11px] font-bold">电能</span>
-            {activeTab === 'electric' && (
-              <motion.div layoutId="activeEnergyTopTab" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
-            )}
-          </button>
+          {TABS.map(tab => {
+            const Icon = tab.icon;
+            const active = activeTab === tab.key;
+            return (
+              <button
+                key={tab.key}
+                onClick={() => setActiveTab(tab.key)}
+                className={`flex items-center gap-2 py-1 transition-all relative ${active ? 'text-blue-600' : 'text-slate-400'}`}
+              >
+                <Icon size={14} />
+                <span className="text-[11px] font-bold">{tab.label}</span>
+                {active && (
+                  <motion.div layoutId="activeEnergyTopTab" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
+                )}
+              </button>
+            );
+          })}
         </div>
-        {activeTab === 'hydrogen' ? <HydrogenView /> : <ElectricView />}
+        {activeTab === 'hydrogen' && <HydrogenView />}
+        {activeTab === 'electric' && <ElectricView />}
+        {activeTab === 'etc' && <ETCView />}
       </div>
     </div>
   );