diff --git a/src/modules/mileage/DailyReportView.tsx b/src/modules/mileage/DailyReportView.tsx
new file mode 100644
index 0000000..38241a0
--- /dev/null
+++ b/src/modules/mileage/DailyReportView.tsx
@@ -0,0 +1,13 @@
+import { FileText } from 'lucide-react';
+
+export default function DailyReportView() {
+  return (
+    <div className="flex items-center justify-center py-20">
+      <div className="text-center">
+        <FileText size={48} className="mx-auto text-gray-300 mb-4" />
+        <h2 className="text-lg font-semibold text-gray-500">每日汇报</h2>
+        <p className="text-sm text-gray-400 mt-2">开发中...</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/modules/mileage/MileageModule.tsx b/src/modules/mileage/MileageModule.tsx
index 742a2d5..7848ec4 100644
--- a/src/modules/mileage/MileageModule.tsx
+++ b/src/modules/mileage/MileageModule.tsx
@@ -1,12 +1,57 @@
-import { Route } from 'lucide-react';
+import { useState } from 'react';
+import { LayoutDashboard, BarChart3, FileText } from 'lucide-react';
+import { motion } from 'motion/react';
+import MonitoringView from './MonitoringView';
+import StatisticsView from './StatisticsView';
+import DailyReportView from './DailyReportView';
 
 export default function MileageModule() {
+  const [activeSubTab, setActiveSubTab] = useState<'monitoring' | 'statistics' | 'report'>('monitoring');
+
   return (
-    <div className="min-h-screen bg-[#F8F9FB] flex items-center justify-center p-6">
-      <div className="text-center">
-        <Route size={48} className="mx-auto text-gray-300 mb-4" />
-        <h2 className="text-lg font-semibold text-gray-500">里程管理</h2>
-        <p className="text-sm text-gray-400 mt-2">开发中...</p>
+    <div className="min-h-screen bg-[#F8F9FB] text-gray-800 font-sans p-6 relative">
+      <div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 px-1 landscape:pb-0 landscape:h-full landscape:flex-1 landscape:overflow-hidden">
+        {/* Sub-navigation */}
+        <div className="bg-white px-4 py-2 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-6">
+          <button
+            onClick={() => setActiveSubTab('monitoring')}
+            className={`flex items-center gap-2 py-1 transition-all relative ${activeSubTab === 'monitoring' ? 'text-blue-600' : 'text-slate-400'}`}
+          >
+            <LayoutDashboard size={14} />
+            <span className="text-[11px] font-bold">实时监控</span>
+            {activeSubTab === 'monitoring' && (
+              <motion.div layoutId="activeSubTab" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
+            )}
+          </button>
+          <button
+            onClick={() => setActiveSubTab('statistics')}
+            className={`flex items-center gap-2 py-1 transition-all relative ${activeSubTab === 'statistics' ? 'text-blue-600' : 'text-slate-400'}`}
+          >
+            <BarChart3 size={14} />
+            <span className="text-[11px] font-bold">统计报表</span>
+            {activeSubTab === 'statistics' && (
+              <motion.div layoutId="activeSubTab" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
+            )}
+          </button>
+          <button
+            onClick={() => setActiveSubTab('report')}
+            className={`flex items-center gap-2 py-1 transition-all relative ${activeSubTab === 'report' ? 'text-blue-600' : 'text-slate-400'}`}
+          >
+            <FileText size={14} />
+            <span className="text-[11px] font-bold">每日汇报</span>
+            {activeSubTab === 'report' && (
+              <motion.div layoutId="activeSubTab" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
+            )}
+          </button>
+        </div>
+
+        {activeSubTab === 'monitoring' ? (
+          <MonitoringView />
+        ) : activeSubTab === 'statistics' ? (
+          <StatisticsView />
+        ) : (
+          <DailyReportView />
+        )}
       </div>
     </div>
   );
diff --git a/src/modules/mileage/MonitoringView.tsx b/src/modules/mileage/MonitoringView.tsx
new file mode 100644
index 0000000..2fcc305
--- /dev/null
+++ b/src/modules/mileage/MonitoringView.tsx
@@ -0,0 +1,3 @@
+export default function MonitoringView() {
+  return <div>MonitoringView placeholder</div>;
+}
diff --git a/src/modules/mileage/StatisticsView.tsx b/src/modules/mileage/StatisticsView.tsx
new file mode 100644
index 0000000..1a1c178
--- /dev/null
+++ b/src/modules/mileage/StatisticsView.tsx
@@ -0,0 +1,3 @@
+export default function StatisticsView() {
+  return <div>StatisticsView placeholder</div>;
+}