feat(web): 更换页面框架为pro-layout

service-web/client/src/pages/App.tsx

@@ -1,54 +1,50 @@
-import {Layout, Menu} from 'antd'
-import type {ItemType, MenuItemType} from 'antd/es/menu/interface'
-import {contain, isEqual} from 'licia'
-import React, {useEffect, useState} from 'react'
-import {NavLink, Outlet, useLocation} from 'react-router'
-
-const {Header, Content} = Layout
-
-const headerNav: Array<MenuItemType> = [
-  {key: '/', label: '首页'},
-  {key: '/conversation', label: 'AI'},
-]
+import {ProLayout} from '@ant-design/pro-components'
+import React, {useEffect} from 'react'
+import {Outlet, useLocation, useNavigate} from 'react-router'
+import {menus} from '../route.tsx'
 
 const App: React.FC = () => {
-  const [_, setCurrentMenu] = useState<ItemType>()
-  const [selectedKeys, setSelectedKeys] = useState<Array<string>>([])
+  const navigate = useNavigate()
   const location = useLocation()
   useEffect(() => {
-    if (isEqual('/', location.pathname)) {
-      setSelectedKeys([location.pathname])
-    } else {
-      setSelectedKeys([headerNav.filter(nav => !isEqual(nav?.key, '/')).find(nav => contain(location.pathname, nav?.key))?.key as string ?? '/'])
-    }
-    setCurrentMenu(headerNav.find(nav => isEqual(nav?.key, location.pathname)))
+    console.log(location.pathname)
   }, [location])
-
   return (
-    <Layout className="app h-full">
-      <Header className="header flex items-center p-5">
-        <div className="title font-sans text-white flex flex-col mr-10">
-          <div className="main-title text-xl font-extrabold leading-normal">Hudi 服务总台</div>
-          <div className="sub-title text-gray-300 font-bold leading-normal">Hudi 全链路服务监控和控制台</div>
+    <ProLayout
+      token={{
+        header: {
+          colorBgHeader: '#292f33',
+          colorHeaderTitle: '#ffffff',
+          colorTextMenu: '#dfdfdf',
+          colorTextMenuSecondary: '#dfdfdf',
+          colorTextMenuSelected: '#ffffff',
+          colorTextMenuActive: '#ffffff',
+          colorBgMenuItemSelected: '#22272b',
+          colorTextRightActionsItem: '#dfdfdf',
+        },
+      }}
+      logo={<img src="/icon.png" alt="logo"/>}
+      title="Hudi 服务总台"
+      route={menus}
+      location={{pathname: location.pathname}}
+      menu={{type: 'sub'}}
+      menuItemRender={(item, dom) => (
+        <div
+          onClick={() => {
+            navigate(item.path ?? '/')
+          }}
+        >
+          {dom}
         </div>
-        <Menu
-          className="header-nav"
-          theme="dark"
-          mode="horizontal"
-          selectedKeys={selectedKeys}
-          items={headerNav.map(nav => ({
-            key: nav.key,
-            label: <NavLink className="font-bold" to={nav.key as string}>{nav.label}</NavLink>,
-          }))}
-          style={{minWidth: 0, flex: 'auto'}}
-        />
-      </Header>
-      <Layout>
-        <Content className="content">
-          <Outlet/>
-        </Content>
-      </Layout>
-    </Layout>
+      )}
+      fixSiderbar={true}
+      layout="mix"
+      splitMenus={true}
+      style={{height: '100vh'}}
+      contentStyle={{backgroundColor: 'white', padding: '10px 10px 10px 20px'}}
+    >
+      <Outlet/>
+    </ProLayout>
   )
 }