feat: 初始化提交

2025-09-28 18:55:24 +08:00
commit 0a93e1d7ad
53 changed files with 4688 additions and 0 deletions
--- a/client/src/pages/Root.tsx
+++ b/client/src/pages/Root.tsx
@@ -0,0 +1,120 @@
+import {BookOutlined, DeploymentUnitOutlined, InfoCircleOutlined} from '@ant-design/icons'
+import {type AppItemProps, ProLayout} from '@ant-design/pro-components'
+import {ConfigProvider} from 'antd'
+import React, {useMemo} from 'react'
+import {NavLink, Outlet, useLocation} from 'react-router'
+import styled from 'styled-components'
+
+const ProLayoutDiv = styled.div`
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+
+    .ant-menu-sub > .ant-menu-item {
+        //padding-left: 28px !important;
+    }
+`
+const apps: AppItemProps[] = []
+
+const menus = {
+  routes: [
+    {
+      path: '/',
+      name: '概览',
+      icon: <InfoCircleOutlined/>,
+      routes: [
+        {
+          path: '/overview',
+          name: '概览',
+          icon: <InfoCircleOutlined/>,
+        },
+        {
+          path: '/bookshelf',
+          name: '书架',
+          icon: <BookOutlined/>,
+        },
+        {
+          path: '/test',
+          name: '测试',
+          icon: <DeploymentUnitOutlined/>,
+        },
+      ],
+    },
+  ],
+}
+
+const Root: React.FC = () => {
+  const location = useLocation()
+  const currentYear = useMemo(() => new Date().getFullYear(), [])
+  return (
+    <ProLayoutDiv>
+      <ProLayout
+        collapsed={false}
+        collapsedButtonRender={() => <></>}
+        siderWidth={180}
+        token={{
+          colorTextAppListIcon: '#dfdfdf',
+          colorTextAppListIconHover: '#ffffff',
+          header: {
+            colorBgHeader: '#292f33',
+            colorHeaderTitle: '#ffffff',
+            colorTextMenu: '#dfdfdf',
+            colorTextMenuSecondary: '#dfdfdf',
+            colorTextMenuSelected: '#ffffff',
+            colorTextMenuActive: '#ffffff',
+            colorBgMenuItemSelected: '#22272b',
+            colorTextRightActionsItem: '#dfdfdf',
+          },
+          pageContainer: {
+            paddingBlockPageContainerContent: 0,
+            paddingInlinePageContainerContent: 0,
+            marginBlockPageContainerContent: 0,
+            marginInlinePageContainerContent: 0,
+          },
+        }}
+        appList={apps}
+        breakpoint={false}
+        disableMobile={true}
+        logo={<img src="icon.png" alt="logo"/>}
+        title="吉普莉尔"
+        route={menus}
+        location={{pathname: location.pathname}}
+        menu={{type: 'group'}}
+        menuItemRender={(item, defaultDom) =>
+          <NavLink to={item.path || '/'}>{defaultDom}</NavLink>
+        }
+        fixSiderbar={true}
+        layout="side"
+        splitMenus={true}
+        style={{minHeight: '100vh'}}
+        contentStyle={{backgroundColor: 'white', padding: '10px 10px 10px 20px'}}
+        menuFooterRender={props => {
+          return (
+            <div className="copyright" style={{userSelect: 'none', msUserSelect: 'none'}}>
+              {props?.collapsed
+                ? undefined
+                : <div>© 2023-{currentYear} 兰缘小妖</div>}
+            </div>
+          )
+        }}
+      >
+        <ConfigProvider
+          theme={{
+            components: {
+              Card: {
+                bodyPadding: 0,
+                bodyPaddingSM: 0,
+              },
+            },
+          }}
+        >
+          <Outlet/>
+        </ConfigProvider>
+      </ProLayout>
+    </ProLayoutDiv>
+  )
+}
+
+export default Root