chore: basic layout

src/layouts/app-layout.tsx

@@ -2,12 +2,13 @@ import type { MenuTheme } from 'antd';
 import type { FC } from 'react';
 
 import { AlertFilled, AreaChartOutlined, FileTextFilled, HomeFilled, VideoCameraFilled } from '@ant-design/icons';
+import { Link, Outlet } from '@tanstack/react-router';
 import { Layout, Menu, theme } from 'antd';
 import { useState } from 'react';
 
 const { Content, Footer, Header, Sider } = Layout;
 
-const App: FC = () => {
+export const AppLayout: FC = () => {
   const { token: { colorBgContainer } } = theme.useToken();
   const [menuTheme] = useState<MenuTheme>('light');
 
@@ -19,46 +20,48 @@ const App: FC = () => {
       <Layout>
         <Sider collapsible defaultCollapsed collapsedWidth={64} trigger={null} style={{ background: colorBgContainer }}>
           <Menu
+            style={{ height: '100%' }}
             theme='light'
             mode='inline'
-            defaultSelectedKeys={['home']}
+            defaultSelectedKeys={['/dashboard']}
             items={[
               {
-                label: '实时数据看板',
-                key: 'home',
+                label: <Link to='/dashboard'>实时数据看板</Link>,
+                key: '/dashboard',
                 icon: <HomeFilled />,
                 theme: menuTheme,
               },
               {
-                label: '实时设备状态',
-                key: 'device',
+                label: <Link to='/device'>实时设备状态</Link>,
+                key: '/device',
                 icon: <VideoCameraFilled />,
                 theme: menuTheme,
               },
               {
-                label: '设备告警记录',
-                key: 'alarm',
+                label: <Link to='/alarm'>设备告警记录</Link>,
+                key: '/alarm',
                 icon: <AlertFilled />,
                 theme: menuTheme,
               },
               {
-                label: '设备性能统计',
-                key: 'statistics', // analysis
+                label: <Link to='/statistics'>设备性能统计</Link>,
+                key: '/statistics', // analysis
                 icon: <AreaChartOutlined />,
                 theme: menuTheme,
               },
               {
-                label: '系统日志记录',
-                key: 'log',
+                label: <Link to='/log'>系统日志记录</Link>,
+                key: '/log',
                 icon: <FileTextFilled />,
                 theme: menuTheme,
-              }
+              },
             ]}
           >
           </Menu>
         </Sider>
         {/* 内容区域 */}
-        <Content style={{ overflow: 'auto', background: colorBgContainer }}>
+        <Content style={{ overflow: 'auto', margin: '8px', background: colorBgContainer }}>
+          <Outlet />
         </Content>
       </Layout>
       <Footer style={{ background: colorBgContainer }}>
@@ -67,5 +70,3 @@ const App: FC = () => {
     </Layout>
   );
 };
-
-export default App;

src/main.tsx

@@ -1,12 +1,25 @@
+import { createRouter, RouterProvider } from '@tanstack/react-router';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import '@ant-design/v5-patch-for-react-19';
 
-import App from './App.tsx';
+import { routeTree } from './routeTree.gen.ts';
+
+import '@ant-design/v5-patch-for-react-19';
 import 'antd/dist/reset.css';
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);
+const router = createRouter({ routeTree });
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const rootElement = document.getElementById('root')!;
+if (!rootElement.innerHTML) {
+  createRoot(rootElement).render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>,
+  );
+}

src/routeTree.gen.ts

@@ -0,0 +1,213 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as LoginRouteImport } from './routes/login'
+import { Route as AppRouteImport } from './routes/_app'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as AppStatisticsRouteImport } from './routes/_app/statistics'
+import { Route as AppLogRouteImport } from './routes/_app/log'
+import { Route as AppDeviceRouteImport } from './routes/_app/device'
+import { Route as AppDashboardRouteImport } from './routes/_app/dashboard'
+import { Route as AppAlarmRouteImport } from './routes/_app/alarm'
+
+const LoginRoute = LoginRouteImport.update({
+  id: '/login',
+  path: '/login',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const AppRoute = AppRouteImport.update({
+  id: '/_app',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const AppStatisticsRoute = AppStatisticsRouteImport.update({
+  id: '/statistics',
+  path: '/statistics',
+  getParentRoute: () => AppRoute,
+} as any)
+const AppLogRoute = AppLogRouteImport.update({
+  id: '/log',
+  path: '/log',
+  getParentRoute: () => AppRoute,
+} as any)
+const AppDeviceRoute = AppDeviceRouteImport.update({
+  id: '/device',
+  path: '/device',
+  getParentRoute: () => AppRoute,
+} as any)
+const AppDashboardRoute = AppDashboardRouteImport.update({
+  id: '/dashboard',
+  path: '/dashboard',
+  getParentRoute: () => AppRoute,
+} as any)
+const AppAlarmRoute = AppAlarmRouteImport.update({
+  id: '/alarm',
+  path: '/alarm',
+  getParentRoute: () => AppRoute,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/login': typeof LoginRoute
+  '/alarm': typeof AppAlarmRoute
+  '/dashboard': typeof AppDashboardRoute
+  '/device': typeof AppDeviceRoute
+  '/log': typeof AppLogRoute
+  '/statistics': typeof AppStatisticsRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/login': typeof LoginRoute
+  '/alarm': typeof AppAlarmRoute
+  '/dashboard': typeof AppDashboardRoute
+  '/device': typeof AppDeviceRoute
+  '/log': typeof AppLogRoute
+  '/statistics': typeof AppStatisticsRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/_app': typeof AppRouteWithChildren
+  '/login': typeof LoginRoute
+  '/_app/alarm': typeof AppAlarmRoute
+  '/_app/dashboard': typeof AppDashboardRoute
+  '/_app/device': typeof AppDeviceRoute
+  '/_app/log': typeof AppLogRoute
+  '/_app/statistics': typeof AppStatisticsRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/login'
+    | '/alarm'
+    | '/dashboard'
+    | '/device'
+    | '/log'
+    | '/statistics'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/'
+    | '/login'
+    | '/alarm'
+    | '/dashboard'
+    | '/device'
+    | '/log'
+    | '/statistics'
+  id:
+    | '__root__'
+    | '/'
+    | '/_app'
+    | '/login'
+    | '/_app/alarm'
+    | '/_app/dashboard'
+    | '/_app/device'
+    | '/_app/log'
+    | '/_app/statistics'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  AppRoute: typeof AppRouteWithChildren
+  LoginRoute: typeof LoginRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/login': {
+      id: '/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof LoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/_app': {
+      id: '/_app'
+      path: ''
+      fullPath: ''
+      preLoaderRoute: typeof AppRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/_app/statistics': {
+      id: '/_app/statistics'
+      path: '/statistics'
+      fullPath: '/statistics'
+      preLoaderRoute: typeof AppStatisticsRouteImport
+      parentRoute: typeof AppRoute
+    }
+    '/_app/log': {
+      id: '/_app/log'
+      path: '/log'
+      fullPath: '/log'
+      preLoaderRoute: typeof AppLogRouteImport
+      parentRoute: typeof AppRoute
+    }
+    '/_app/device': {
+      id: '/_app/device'
+      path: '/device'
+      fullPath: '/device'
+      preLoaderRoute: typeof AppDeviceRouteImport
+      parentRoute: typeof AppRoute
+    }
+    '/_app/dashboard': {
+      id: '/_app/dashboard'
+      path: '/dashboard'
+      fullPath: '/dashboard'
+      preLoaderRoute: typeof AppDashboardRouteImport
+      parentRoute: typeof AppRoute
+    }
+    '/_app/alarm': {
+      id: '/_app/alarm'
+      path: '/alarm'
+      fullPath: '/alarm'
+      preLoaderRoute: typeof AppAlarmRouteImport
+      parentRoute: typeof AppRoute
+    }
+  }
+}
+
+interface AppRouteChildren {
+  AppAlarmRoute: typeof AppAlarmRoute
+  AppDashboardRoute: typeof AppDashboardRoute
+  AppDeviceRoute: typeof AppDeviceRoute
+  AppLogRoute: typeof AppLogRoute
+  AppStatisticsRoute: typeof AppStatisticsRoute
+}
+
+const AppRouteChildren: AppRouteChildren = {
+  AppAlarmRoute: AppAlarmRoute,
+  AppDashboardRoute: AppDashboardRoute,
+  AppDeviceRoute: AppDeviceRoute,
+  AppLogRoute: AppLogRoute,
+  AppStatisticsRoute: AppStatisticsRoute,
+}
+
+const AppRouteWithChildren = AppRoute._addFileChildren(AppRouteChildren)
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  AppRoute: AppRouteWithChildren,
+  LoginRoute: LoginRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

src/routes/__root.tsx

@@ -0,0 +1,11 @@
+import { createRootRoute, Outlet } from '@tanstack/react-router';
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+});

src/routes/_app.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+import { AppLayout } from '../layouts/app-layout';
+
+export const Route = createFileRoute('/_app')({
+  component: AppLayout,
+});

src/routes/_app/alarm.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_app/alarm')({
+  component: AlarmPage,
+});
+
+function AlarmPage() {
+  return <div>Hello "/_app/alarm"!</div>;
+}

src/routes/_app/dashboard.tsx

@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_app/dashboard')({
+  component: Dashboard,
+});
+
+function Dashboard() {
+  return (
+    <h3>Welcome Home!</h3>
+  );
+}

src/routes/_app/device.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_app/device')({
+  component: DevicePage,
+});
+
+function DevicePage() {
+  return <div>Hello from Device!</div>;
+}

src/routes/_app/log.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_app/log')({
+  component: LogPage,
+});
+
+function LogPage() {
+  return <div>Hello "/_app/log"!</div>;
+}

src/routes/_app/statistics.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_app/statistics')({
+  component: StatisticsPage,
+});
+
+function StatisticsPage() {
+  return <div>Hello "/_app/statistics"!</div>;
+}

src/routes/index.tsx

@@ -0,0 +1,8 @@
+import { createFileRoute, redirect } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/')({
+  // TODO: 登录校验
+  beforeLoad: () => {
+    throw redirect({ to: '/dashboard' });
+  },
+});

src/routes/login.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/login')({
+  component: LoginPage,
+});
+
+function LoginPage() {
+  return (
+    <div style={{ padding: '50px', textAlign: 'center' }}>
+      <h1>登录页面</h1>
+    </div>
+  );
+}