diff --git a/src/AppLayout.tsx b/src/AppLayout.tsx
new file mode 100644
index 0000000..47dc382
--- /dev/null
+++ b/src/AppLayout.tsx
@@ -0,0 +1,50 @@
+import { Outlet, useLocation, useNavigate } from 'react-router';
+import { Layout, Menu } from 'antd';
+import { HomeOutlined, AppstoreOutlined } from '@ant-design/icons';
+
+const { Header } = Layout;
+
+const AppLayout = () => {
+    const location = useLocation();
+    const navigate = useNavigate();
+    // 导航项配置
+    const menuItems = [
+        {
+            key: 'home',
+            label: '主页',
+            icon: <HomeOutlined />,
+            path: '/',
+        },
+        {
+            key: 'tasks',
+            label: '任务清单',
+            icon: <AppstoreOutlined />,
+            path: '/tasks',
+        },
+    ];
+
+    return (
+        <Layout style={{ minHeight: '100vh', width: '100%' }}>
+            <Header className="header" style={{ display: 'flex', alignItems: 'center' }}>
+                <div className="logo" color='white'>创驿</div>
+                <Menu
+                    mode="horizontal"
+                    theme='dark'
+                    selectedKeys={[location.pathname === '/' ? 'home' : location.pathname.slice(1)]}
+                    items={menuItems.map(item => ({
+                        ...item,
+                        onClick: () => navigate(item.path),
+                    }))}
+                />
+            </Header>
+            <Layout.Content style={{ padding: '24px' }}>
+                <Outlet />
+            </Layout.Content>
+            <Layout.Footer>
+                © 2025 创驿 - 创作路上的同行者
+            </Layout.Footer>
+        </Layout>
+    );
+};
+
+export default AppLayout;    
\ No newline at end of file