chore: control center

src/layout/index.scss

@@ -10,4 +10,15 @@
 
 .chat-container {
   padding: 20px;
+}
+
+.ant-menu {
+  .ant-menu-item {
+    background-color: #f8f8f8;
+  }
+}
+
+.ant-layout-footer {
+  color: #666 !important;
+  opacity: 0.7;
 }

src/layout/index.tsx

@@ -1,51 +1,30 @@
 import { FC, useState } from 'react';
-import {
-  DesktopOutlined,
-  BulbOutlined
-} from '@ant-design/icons';
-import type { MenuProps } from 'antd';
 import { Layout, Menu } from 'antd';
+import { useNavigate } from 'react-router-dom';
+
+import Routes, { menuItems } from '@/routes';
+
 import './index.scss';
 
 const { Content, Footer, Sider } = Layout;
 
-type MenuItem = Required<MenuProps>['items'][number];
-
-function getItem(
-  label: React.ReactNode,
-  key: React.Key,
-  icon?: React.ReactNode,
-  children?: MenuItem[],
-): MenuItem {
-  return {
-    key,
-    icon,
-    children,
-    label,
-  } as MenuItem;
-}
-
-const items: MenuItem[] = [
-  getItem('General', 'general', <DesktopOutlined />),
-  getItem('ChatGPT Prompts', 'chatgpt-prompts', <BulbOutlined />),
-];
-
 interface ChatLayoutProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
 }
 
 const ChatLayout: FC<ChatLayoutProps> = ({ children }) => {
   const [collapsed, setCollapsed] = useState(false);
+  const go = useNavigate();
 
   return (
     <Layout style={{ minHeight: '100vh' }}>
       <Sider theme="light" collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
         <div className="chat-logo"><img src="/logo.png" /></div>
-        <Menu defaultSelectedKeys={['1']} mode="inline" items={items} />
+        <Menu defaultSelectedKeys={['/']} mode="vertical" items={menuItems} onClick={(i) => go(i.key)} />
       </Sider>
       <Layout className="chat-layout">
         <Content className="chat-container">
-          {children}
+          <Routes />
         </Content>
         <Footer style={{ textAlign: 'center' }}>
           <a href="https://github.com/lencx/chatgpt" target="_blank">ChatGPT Desktop Application</a> ©2022 Created by lencx</Footer>