optimize

neos.config.json

@@ -38,6 +38,20 @@
         "z": 1
       },
       "floating": 0.02
+    },
+    "layout": {
+      "header": {
+        "height": 80
+      },
+      "content": {
+        "height": 800
+      },
+      "sider": {
+        "width": 400
+      },
+      "footer": {
+        "height": 80
+      }
     }
   }
 }

src/ui/Duel/layout.tsx

 import React from "react";
 import { Layout } from "antd";
+import NeosConfig from "../../../neos.config.json";
 
+const layoutConfig = NeosConfig.ui.layout;
 const { Header, Footer, Sider, Content } = Layout;
 
 const headerStyle: React.CSSProperties = {
   textAlign: "center",
   color: "#fff",
-  height: 64,
+  height: layoutConfig.header.height,
   paddingInline: 50,
   lineHeight: "64px",
 };
@@ -14,6 +16,7 @@ const headerStyle: React.CSSProperties = {
 const contentStyle: React.CSSProperties = {
   textAlign: "center",
   minHeight: 120,
+  height: layoutConfig.content.height,
   lineHeight: "120px",
 };
 
@@ -25,6 +28,7 @@ const siderStyle: React.CSSProperties = {
 
 const footerStyle: React.CSSProperties = {
   textAlign: "center",
+  height: layoutConfig.footer.height,
   color: "#fff",
 };
 
@@ -36,7 +40,9 @@ const NeosLayout = (props: {
 }) => {
   return (
     <Layout>
-      <Sider style={siderStyle}>{props.sider}</Sider>
+      <Sider style={siderStyle} width={layoutConfig.sider.width}>
+        {props.sider}
+      </Sider>
       <Layout>
         <Header style={headerStyle}>{props.header}</Header>
         <Content style={contentStyle}>{props.content}</Content>