diff --git a/novalon-manage-web/src/components/AuthGuard.tsx b/novalon-manage-web/src/components/AuthGuard.tsx
new file mode 100644
index 0000000..f1a3262
--- /dev/null
+++ b/novalon-manage-web/src/components/AuthGuard.tsx
@@ -0,0 +1,16 @@
+import { Navigate } from 'react-router'
+import { useAuthStore } from '@/stores/useAuthStore'
+
+interface AuthGuardProps {
+  children: React.ReactNode
+}
+
+export default function AuthGuard({ children }: AuthGuardProps) {
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />
+  }
+
+  return <>{children}</>
+}
diff --git a/novalon-manage-web/src/components/ChartContainer.tsx b/novalon-manage-web/src/components/ChartContainer.tsx
new file mode 100644
index 0000000..c806cbc
--- /dev/null
+++ b/novalon-manage-web/src/components/ChartContainer.tsx
@@ -0,0 +1,23 @@
+import { useRef, useEffect } from 'react'
+
+interface ChartContainerProps {
+  onInit: (container: HTMLDivElement) => void
+  onDestroy?: () => void
+  style?: React.CSSProperties
+}
+
+export default function ChartContainer({ onInit, onDestroy, style }: ChartContainerProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (containerRef.current) {
+      onInit(containerRef.current)
+    }
+
+    return () => {
+      onDestroy?.()
+    }
+  }, [onInit, onDestroy])
+
+  return <div ref={containerRef} style={{ width: '100%', height: '100%', ...style }} />
+}
diff --git a/novalon-manage-web/src/components/PermissionGuard.tsx b/novalon-manage-web/src/components/PermissionGuard.tsx
new file mode 100644
index 0000000..bea4127
--- /dev/null
+++ b/novalon-manage-web/src/components/PermissionGuard.tsx
@@ -0,0 +1,30 @@
+import { usePermissionStore } from '@/stores/usePermissionStore'
+
+interface PermissionGuardProps {
+  permission?: string
+  role?: string
+  type?: 'permission' | 'role'
+  children: React.ReactNode
+  fallback?: React.ReactNode
+}
+
+export default function PermissionGuard({
+  permission,
+  role,
+  type = 'permission',
+  children,
+  fallback = null,
+}: PermissionGuardProps) {
+  const hasPermission = usePermissionStore((s) => s.hasPermission)
+  const hasRole = usePermissionStore((s) => s.hasRole)
+
+  if (type === 'role' && role) {
+    return hasRole(role) ? <>{children}</> : <>{fallback}</>
+  }
+
+  if (permission) {
+    return hasPermission(permission) ? <>{children}</> : <>{fallback}</>
+  }
+
+  return <>{children}</>
+}
diff --git a/novalon-manage-web/src/hooks/useAntV.ts b/novalon-manage-web/src/hooks/useAntV.ts
new file mode 100644
index 0000000..563737a
--- /dev/null
+++ b/novalon-manage-web/src/hooks/useAntV.ts
@@ -0,0 +1,38 @@
+import { useRef, useEffect, useCallback } from 'react'
+
+interface UseAntVOptions {
+  autoDestroy?: boolean
+}
+
+export function useAntV<T>(ChartClass: new (container: HTMLElement, options?: any) => T, options?: any, antvOptions?: UseAntVOptions) {
+  const chartRef = useRef<T | null>(null)
+  const containerRef = useRef<HTMLDivElement | null>(null)
+
+  const initChart = useCallback(
+    (container: HTMLDivElement) => {
+      if (chartRef.current) {
+        ;(chartRef.current as any).destroy?.()
+      }
+      containerRef.current = container
+      chartRef.current = new ChartClass(container, options)
+    },
+    [ChartClass, options]
+  )
+
+  const updateData = useCallback((data: any[]) => {
+    if (chartRef.current && typeof (chartRef.current as any).changeData === 'function') {
+      ;(chartRef.current as any).changeData(data)
+    }
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      if (antvOptions?.autoDestroy !== false && chartRef.current) {
+        ;(chartRef.current as any).destroy?.()
+        chartRef.current = null
+      }
+    }
+  }, [antvOptions?.autoDestroy])
+
+  return { chartRef, containerRef, initChart, updateData }
+}
diff --git a/novalon-manage-web/src/hooks/usePermission.ts b/novalon-manage-web/src/hooks/usePermission.ts
new file mode 100644
index 0000000..d2d2794
--- /dev/null
+++ b/novalon-manage-web/src/hooks/usePermission.ts
@@ -0,0 +1,10 @@
+import { usePermissionStore } from '@/stores/usePermissionStore'
+
+export function usePermission() {
+  const hasPermission = usePermissionStore((s) => s.hasPermission)
+  const hasRole = usePermissionStore((s) => s.hasRole)
+  const permissions = usePermissionStore((s) => s.permissions)
+  const roles = usePermissionStore((s) => s.roles)
+
+  return { hasPermission, hasRole, permissions, roles }
+}
diff --git a/novalon-manage-web/src/layouts/DefaultLayout.tsx b/novalon-manage-web/src/layouts/DefaultLayout.tsx
deleted file mode 100644
index a1adf1d..0000000
--- a/novalon-manage-web/src/layouts/DefaultLayout.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Outlet } from 'react-router'
-
-export default function DefaultLayout() {
-  return (
-    <div style={{ padding: 24 }}>
-      <h1>DefaultLayout (TODO)</h1>
-      <Outlet />
-    </div>
-  )
-}
diff --git a/novalon-manage-web/src/layouts/DefaultLayout/HeaderRight.tsx b/novalon-manage-web/src/layouts/DefaultLayout/HeaderRight.tsx
new file mode 100644
index 0000000..43470ad
--- /dev/null
+++ b/novalon-manage-web/src/layouts/DefaultLayout/HeaderRight.tsx
@@ -0,0 +1,53 @@
+import { useNavigate } from 'react-router'
+import { Dropdown, Avatar, Space } from 'antd'
+import { UserOutlined, LogoutOutlined, KeyOutlined } from '@ant-design/icons'
+import type { MenuProps } from 'antd'
+import { useAuthStore } from '@/stores/useAuthStore'
+
+export default function HeaderRight() {
+  const navigate = useNavigate()
+  const username = useAuthStore((s) => s.username)
+  const logout = useAuthStore((s) => s.logout)
+
+  const menuItems: MenuProps['items'] = [
+    {
+      key: 'profile',
+      icon: <UserOutlined />,
+      label: '个人中心',
+    },
+    {
+      key: 'password',
+      icon: <KeyOutlined />,
+      label: '修改密码',
+    },
+    { type: 'divider' },
+    {
+      key: 'logout',
+      icon: <LogoutOutlined />,
+      label: '退出登录',
+      danger: true,
+    },
+  ]
+
+  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
+    switch (key) {
+      case 'profile':
+        break
+      case 'password':
+        break
+      case 'logout':
+        logout()
+        navigate('/login')
+        break
+    }
+  }
+
+  return (
+    <Dropdown menu={{ items: menuItems, onClick: handleMenuClick }} trigger={['click']}>
+      <Space style={{ cursor: 'pointer' }}>
+        <Avatar icon={<UserOutlined />} />
+        <span>{username || '用户'}</span>
+      </Space>
+    </Dropdown>
+  )
+}
diff --git a/novalon-manage-web/src/layouts/DefaultLayout/SideMenu.tsx b/novalon-manage-web/src/layouts/DefaultLayout/SideMenu.tsx
new file mode 100644
index 0000000..60b7d3e
--- /dev/null
+++ b/novalon-manage-web/src/layouts/DefaultLayout/SideMenu.tsx
@@ -0,0 +1,104 @@
+import { useNavigate, useLocation } from 'react-router'
+import { Menu } from 'antd'
+import type { MenuProps } from 'antd'
+import {
+  DashboardOutlined,
+  UserOutlined,
+  TeamOutlined,
+  MenuOutlined,
+  SettingOutlined,
+  BookOutlined,
+  FileOutlined,
+  NotificationOutlined,
+  AuditOutlined,
+  FileSearchOutlined,
+  WarningOutlined,
+} from '@ant-design/icons'
+import { usePermissionStore } from '@/stores/usePermissionStore'
+import type { MenuItem } from '@/api/menu'
+
+type AntMenuItem = Required<MenuProps>['items'][number]
+
+const iconMap: Record<string, React.ReactNode> = {
+  dashboard: <DashboardOutlined />,
+  user: <UserOutlined />,
+  users: <UserOutlined />,
+  role: <TeamOutlined />,
+  roles: <TeamOutlined />,
+  menu: <MenuOutlined />,
+  menus: <MenuOutlined />,
+  config: <SettingOutlined />,
+  dict: <BookOutlined />,
+  file: <FileOutlined />,
+  files: <FileOutlined />,
+  notice: <NotificationOutlined />,
+  loginlog: <AuditOutlined />,
+  oplog: <FileSearchOutlined />,
+  exceptionlog: <WarningOutlined />,
+}
+
+const pathMap: Record<string, string> = {
+  dashboard: '/dashboard',
+  users: '/users',
+  roles: '/roles',
+  menus: '/menus',
+  'sys/config': '/sys/config',
+  dict: '/dict',
+  files: '/files',
+  notice: '/notice',
+  loginlog: '/loginlog',
+  oplog: '/oplog',
+  exceptionlog: '/exceptionlog',
+}
+
+function convertMenus(items: MenuItem[]): AntMenuItem[] {
+  return items
+    .filter((item) => item.type !== 'button' && item.visible !== false)
+    .map((item) => {
+      const path = item.path || pathMap[item.permission] || `/custom/${item.id}`
+      const icon = iconMap[item.icon] || iconMap[item.permission]
+
+      if (item.children?.length) {
+        return {
+          key: path,
+          icon,
+          label: item.name,
+          children: convertMenus(item.children),
+        }
+      }
+
+      return {
+        key: path,
+        icon,
+        label: item.name,
+      }
+    })
+}
+
+export default function SideMenu() {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const menus = usePermissionStore((s) => s.menus)
+
+  const menuItems = convertMenus(menus)
+
+  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
+    navigate(key)
+  }
+
+  return (
+    <Menu
+      mode="inline"
+      selectedKeys={[location.pathname]}
+      defaultOpenKeys={[getOpenKey(location.pathname)]}
+      items={menuItems}
+      onClick={handleMenuClick}
+      style={{ height: '100%', borderRight: 0 }}
+    />
+  )
+}
+
+function getOpenKey(pathname: string): string {
+  const segments = pathname.split('/').filter(Boolean)
+  return segments.length > 1 ? `/${segments[0]}` : pathname
+}
diff --git a/novalon-manage-web/src/layouts/DefaultLayout/index.tsx b/novalon-manage-web/src/layouts/DefaultLayout/index.tsx
new file mode 100644
index 0000000..9289cc8
--- /dev/null
+++ b/novalon-manage-web/src/layouts/DefaultLayout/index.tsx
@@ -0,0 +1,39 @@
+import { Suspense } from 'react'
+import { Outlet } from 'react-router'
+import { ProLayout } from '@ant-design/pro-components'
+import { Spin } from 'antd'
+import { useAppStore } from '@/stores/useAppStore'
+import { useAuthStore } from '@/stores/useAuthStore'
+import HeaderRight from './HeaderRight'
+
+export default function DefaultLayout() {
+  const collapsed = useAppStore((s) => s.collapsed)
+  const toggleCollapsed = useAppStore((s) => s.toggleCollapsed)
+  const username = useAuthStore((s) => s.username)
+
+  return (
+    <ProLayout
+      title="Novalon 管理系统"
+      logo={null}
+      layout="mix"
+      collapsed={collapsed}
+      onCollapse={toggleCollapsed}
+      fixSiderbar
+      fixedHeader
+      menuItemRender={(item, dom) => <a onClick={() => item.onClick?.()}>{dom}</a>}
+      headerTitleRender={(logo, title) => (
+        <a onClick={toggleCollapsed} style={{ cursor: 'pointer' }}>
+          {logo}{title}
+        </a>
+      )}
+      avatarProps={{
+        title: username || '用户',
+        render: () => <HeaderRight />,
+      }}
+    >
+      <Suspense fallback={<Spin size="large" style={{ display: 'block', margin: '100px auto' }} />}>
+        <Outlet />
+      </Suspense>
+    </ProLayout>
+  )
+}
diff --git a/novalon-manage-web/src/router/routes.ts b/novalon-manage-web/src/router/routes.ts
index a1ca388..e345bbc 100644
--- a/novalon-manage-web/src/router/routes.ts
+++ b/novalon-manage-web/src/router/routes.ts
@@ -13,7 +13,7 @@ const LoginLog = lazy(() => import('@/pages/audit/login-log'))
 const OperationLog = lazy(() => import('@/pages/audit/operation-log'))
 const ExceptionLog = lazy(() => import('@/pages/audit/exception-log'))
 const Forbidden = lazy(() => import('@/pages/403'))
-const DefaultLayout = lazy(() => import('@/layouts/DefaultLayout'))
+const DefaultLayout = lazy(() => import('@/layouts/DefaultLayout/index'))
 
 export { authLoader } from './guards'
 export { DefaultLayout, Login, Dashboard, UserManagement, RoleManagement, MenuManagement, ConfigManagement, DictManagement, FileManagement, NoticeManagement, LoginLog, OperationLog, ExceptionLog, Forbidden }