diff --git a/frontend/src/components/layout/BottomTab.tsx b/frontend/src/components/layout/BottomTab.tsx
new file mode 100644
index 0000000..238498d
--- /dev/null
+++ b/frontend/src/components/layout/BottomTab.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+
+const BottomTab: React.FC = () => {
+ const location = useLocation();
+
+ const navItems = [
+ { path: '/', label: '首页', icon: HomeIcon },
+ { path: '/record', label: '记账', icon: RecordIcon },
+ { path: '/budget', label: '预算', icon: BudgetIcon },
+ { path: '/statistics', label: '统计', icon: StatisticsIcon },
+ ];
+
+ return (
+
+ );
+};
+
+function HomeIcon() {
+ return (
+
+ );
+}
+
+function RecordIcon() {
+ return (
+
+ );
+}
+
+function BudgetIcon() {
+ return (
+
+ );
+}
+
+function StatisticsIcon() {
+ return (
+
+ );
+}
+
+export default BottomTab;