feats

src/index.less

@@ -34,11 +34,3 @@ html, body, #root {
   color: var(--theme-front);
 }
 
-
-main {
-  &.ant-layout-content {
-    & > div {
-      height: 100%;
-    }
-  }
-}

src/layouts/AuthLayout/components/Container.jsx

@@ -1,18 +1,32 @@
-import React from 'react';
+import React, { useEffect, useRef, useMemo, useState } from 'react';
 import { Layout, Spin } from 'antd';
 import { Outlet, useLocation } from "react-router-dom";
 import PageTransition from './PageTransition';
+import Footer from './Footer';
 
 const { Content } = Layout;
 
 export default (props) => {
-  const location = useLocation()
+  const location = useLocation();
+  
+  const containerRef = useRef();
+  const [minHeight, setMinHeight] = useState(0);
+  const contentStyle = useMemo(() => ({ minHeight: `${minHeight}px` }), [minHeight]);
+  
+  useEffect(() => {
+    const containerHeight = containerRef.current.offsetHeight;
+    const footerHeight = document.querySelector('.ant-layout-footer').offsetHeight;
+    setMinHeight(containerHeight - footerHeight);
+  }, [minHeight]);
 
   return (
-    <Content>
-      <PageTransition location={location}>
-        <Outlet />
-      </PageTransition>
-    </Content>
+    <div className='layout-container' ref={containerRef}>
+      <Content style={contentStyle}>
+        <PageTransition location={location}>
+          <Outlet />
+        </PageTransition>
+      </Content>
+      <Footer />
+    </div>
   )
 }

src/layouts/AuthLayout/components/Menus.jsx

@@ -1,42 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from "react-router-dom";
 import { Menu } from 'antd';
-import routes from '@/routes/routes';
-
-// 菜单是否显示
-// 没有 menu 或者 menu.title 为空, 或者 menu.hidden = true 的 都不显示
-const isShow = item => item.menu && item.title && !item.menu.hidden;
-
-const hasChildren = (list) => {
-  if (!list || list.length < 1) return false;
-
-  // 如果子元素全部都是不显示的, 说明子菜单不需要显示
-  return list.filter(it => !isShow(it)).length !== list.length;
-}
-
-const getPath = (parent, current = '') => {
-  if (current.indexOf('/') === 0 || current.indexOf('http') === 0) return current;
-  return `${parent}/${current}`.replace(/\/\//g, '/');
-}
-
-const getItems = (dts = [], fullPath = '/') => {
-  return dts.map(item => {
-    // 没有 menu 或者 menu.title 为空, 或者 menu.hidden = true 的 都不显示
-    if (!item.menu || !item.menu.title || item.menu.hidden) return false;
-    
-    const path = getPath(fullPath, item.path)
-    const children = hasChildren(item.children) ? getItems(item.children, path) : false;
-
-    return Object.assign(
-      {
-        key: path,
-        label: item.menu.title,
-        title: item.menu.title,
-      },
-      children && { children },
-    )
-  }).filter(Boolean);
-}
+import { getItems } from '@/routes/menus';
 
 const linkTo = url => {
   const a = document.createElement('a');
@@ -49,7 +14,7 @@ export default (props) => {
   const { theme } = props;
 
   const navigate = useNavigate();
-  const items = getItems(routes[0].children);
+  const items = getItems();
 
   const onClick = (item) => {
     // http 开头说明是外部链接

src/layouts/AuthLayout/index.jsx

@@ -1,22 +1,20 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useMemo, useState } from 'react';
 import { Layout, Spin } from 'antd';
 import { useModel } from '@/store'
 import RequireLogin from './components/RequireLogin';
 import SiderBar from './components/SiderBar';
 import Header from './components/Header';
 import Container from './components/Container';
-import Footer from './components/Footer';
 import useReady from './useReady';
 
 import './style.less';
 
-const { Content } = Layout;
-
 export default (props) => {
   const { user, getCurrent } = useModel('user');
   // const isReady = useReady(user)
   // const isReady = true
 
+
   useEffect(() => {
     if (!user) {
       getCurrent()
@@ -30,10 +28,7 @@ export default (props) => {
           <Header />
           <Layout>
             <SiderBar />
-            <Layout>
-              <Container />
-              <Footer />
-            </Layout>
+            <Container />
           </Layout>
         </div>
       </RequireLogin>

src/layouts/AuthLayout/style.less

@@ -43,4 +43,16 @@
   .sys-exit {
     margin-right: 1em;
   }
+}
+
+.layout-container {
+  flex: 1;
+
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::--webkit-scrollbar {
+    display: none;
+  }
 }

src/layouts/page/index.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { PageHeader } from 'antd';
+import { useLocation } from "react-router-dom";
+import { getRouteArr } from '@/routes/menus';
+import './style.less'
+
+export default (props) => {
+  const { children, ...headerProps } = props;
+
+  const location = useLocation();
+  const routeArr = getRouteArr();
+
+  const currentRoute = routeArr.filter(x => x.path === location.pathname)[0] || {};
+  const { title } = currentRoute.meta || {};
+
+  return (
+    <>
+      <PageHeader ghost={false} title={title} {...headerProps}></PageHeader>
+      <div className="page-container">
+        {children}
+      </div>
+    </>
+  )
+}

src/layouts/page/style.less

@@ -0,0 +1,9 @@
+@pageSpace: 24px;
+
+.page-container {
+  background-color: #fff;
+  margin: @pageSpace;
+  margin-bottom: 0;
+  box-sizing: border-box;
+  padding: @pageSpace;
+}

src/pages/sample/form/index.jsx

@@ -0,0 +1,351 @@
+import {
+  AutoComplete,
+  Button,
+  Cascader,
+  Checkbox,
+  Col,
+  Form,
+  Input,
+  InputNumber,
+  Row,
+  Select,
+} from 'antd';
+import React, { useState } from 'react';
+import Page from '@/layouts/page';
+
+const { Option } = Select;
+const residences = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: 'Hangzhou',
+        children: [
+          {
+            value: 'xihu',
+            label: 'West Lake',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: 'Nanjing',
+        children: [
+          {
+            value: 'zhonghuamen',
+            label: 'Zhong Hua Men',
+          },
+        ],
+      },
+    ],
+  },
+];
+const formItemLayout = {
+  labelCol: {
+    xs: {
+      span: 24,
+    },
+    sm: {
+      span: 8,
+    },
+  },
+  wrapperCol: {
+    xs: {
+      span: 24,
+    },
+    sm: {
+      span: 16,
+    },
+  },
+};
+const tailFormItemLayout = {
+  wrapperCol: {
+    xs: {
+      span: 24,
+      offset: 0,
+    },
+    sm: {
+      span: 16,
+      offset: 8,
+    },
+  },
+};
+
+
+const BasicForm = () => {
+  const [form] = Form.useForm();
+
+  const onFinish = (values) => {
+    console.log('Received values of form: ', values);
+  };
+
+  const prefixSelector = (
+    <Form.Item name="prefix" noStyle>
+      <Select
+        style={{
+          width: 70,
+        }}
+      >
+        <Option value="86">+86</Option>
+        <Option value="87">+87</Option>
+      </Select>
+    </Form.Item>
+  );
+  const suffixSelector = (
+    <Form.Item name="suffix" noStyle>
+      <Select
+        style={{
+          width: 70,
+        }}
+      >
+        <Option value="USD">$</Option>
+        <Option value="CNY">¥</Option>
+      </Select>
+    </Form.Item>
+  );
+  const [autoCompleteResult, setAutoCompleteResult] = useState([]);
+
+  const onWebsiteChange = (value) => {
+    if (!value) {
+      setAutoCompleteResult([]);
+    } else {
+      setAutoCompleteResult(['.com', '.org', '.net'].map((domain) => `${value}${domain}`));
+    }
+  };
+
+  const websiteOptions = autoCompleteResult.map((website) => ({
+    label: website,
+    value: website,
+  }));
+  return (
+    <Form
+      {...formItemLayout}
+      form={form}
+      name="register"
+      onFinish={onFinish}
+      initialValues={{
+        residence: ['zhejiang', 'hangzhou', 'xihu'],
+        prefix: '86',
+      }}
+      scrollToFirstError
+    >
+      <Form.Item
+        name="email"
+        label="E-mail"
+        rules={[
+          {
+            type: 'email',
+            message: 'The input is not valid E-mail!',
+          },
+          {
+            required: true,
+            message: 'Please input your E-mail!',
+          },
+        ]}
+      >
+        <Input />
+      </Form.Item>
+
+      <Form.Item
+        name="password"
+        label="Password"
+        rules={[
+          {
+            required: true,
+            message: 'Please input your password!',
+          },
+        ]}
+        hasFeedback
+      >
+        <Input.Password />
+      </Form.Item>
+
+      <Form.Item
+        name="confirm"
+        label="Confirm Password"
+        dependencies={['password']}
+        hasFeedback
+        rules={[
+          {
+            required: true,
+            message: 'Please confirm your password!',
+          },
+          ({ getFieldValue }) => ({
+            validator(_, value) {
+              if (!value || getFieldValue('password') === value) {
+                return Promise.resolve();
+              }
+
+              return Promise.reject(new Error('The two passwords that you entered do not match!'));
+            },
+          }),
+        ]}
+      >
+        <Input.Password />
+      </Form.Item>
+
+      <Form.Item
+        name="nickname"
+        label="Nickname"
+        tooltip="What do you want others to call you?"
+        rules={[
+          {
+            required: true,
+            message: 'Please input your nickname!',
+            whitespace: true,
+          },
+        ]}
+      >
+        <Input />
+      </Form.Item>
+
+      <Form.Item
+        name="residence"
+        label="Habitual Residence"
+        rules={[
+          {
+            type: 'array',
+            required: true,
+            message: 'Please select your habitual residence!',
+          },
+        ]}
+      >
+        <Cascader options={residences} />
+      </Form.Item>
+
+      <Form.Item
+        name="phone"
+        label="Phone Number"
+        rules={[
+          {
+            required: true,
+            message: 'Please input your phone number!',
+          },
+        ]}
+      >
+        <Input
+          addonBefore={prefixSelector}
+          style={{
+            width: '100%',
+          }}
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="donation"
+        label="Donation"
+        rules={[
+          {
+            required: true,
+            message: 'Please input donation amount!',
+          },
+        ]}
+      >
+        <InputNumber
+          addonAfter={suffixSelector}
+          style={{
+            width: '100%',
+          }}
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="website"
+        label="Website"
+        rules={[
+          {
+            required: true,
+            message: 'Please input website!',
+          },
+        ]}
+      >
+        <AutoComplete options={websiteOptions} onChange={onWebsiteChange} placeholder="website">
+          <Input />
+        </AutoComplete>
+      </Form.Item>
+
+      <Form.Item
+        name="intro"
+        label="Intro"
+        rules={[
+          {
+            required: true,
+            message: 'Please input Intro',
+          },
+        ]}
+      >
+        <Input.TextArea showCount maxLength={100} />
+      </Form.Item>
+
+      <Form.Item
+        name="gender"
+        label="Gender"
+        rules={[
+          {
+            required: true,
+            message: 'Please select gender!',
+          },
+        ]}
+      >
+        <Select placeholder="select your gender">
+          <Option value="male">Male</Option>
+          <Option value="female">Female</Option>
+          <Option value="other">Other</Option>
+        </Select>
+      </Form.Item>
+
+      <Form.Item label="Captcha" extra="We must make sure that your are a human.">
+        <Row gutter={8}>
+          <Col span={12}>
+            <Form.Item
+              name="captcha"
+              noStyle
+              rules={[
+                {
+                  required: true,
+                  message: 'Please input the captcha you got!',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Button>Get captcha</Button>
+          </Col>
+        </Row>
+      </Form.Item>
+
+      <Form.Item
+        name="agreement"
+        valuePropName="checked"
+        rules={[
+          {
+            validator: (_, value) =>
+              value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
+          },
+        ]}
+        {...tailFormItemLayout}
+      >
+        <Checkbox>
+          I have read the <a href="">agreement</a>
+        </Checkbox>
+      </Form.Item>
+      <Form.Item {...tailFormItemLayout}>
+        <Button type="primary" htmlType="submit">
+          Register
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default () => <Page><BasicForm /></Page>;

src/routes/menus.jsx

@@ -0,0 +1,57 @@
+import routes from './routes';
+
+let routeArr = [];
+
+// 菜单是否显示
+// 没有 meta 或者 meta.title 为空, 或者 meta.hiddenInMenu = true 的 都不显示
+const isShow = item => item.meta && item.meta.title && !item.meta.hiddenInMenu;
+
+const hasChildren = (list) => {
+  if (!list || list.length < 1) return false;
+
+  // 如果子元素全部都是不显示的, 说明子菜单不需要显示
+  return list.filter(it => !isShow(it)).length !== list.length;
+}
+
+const getPath = (parent, current = '') => {
+  if (current.indexOf('/') === 0 || current.indexOf('http') === 0) return current;
+  return `${parent}/${current}`.replace(/\/\//g, '/');
+}
+
+const getMenuItems = (dts = [], fullPath = '/') => {
+  return dts.map(item => {
+    const path = getPath(fullPath, item.path);
+
+    routeArr.push({
+      ...item,
+      path,
+    });
+
+    //
+    if (!isShow(item)) return false;
+    
+    const children = hasChildren(item.children) ? getMenuItems(item.children, path) : false;
+
+    return Object.assign(
+      {
+        key: path,
+        label: item.meta.title,
+        title: item.meta.title,
+      },
+      children && { children },
+    )
+  }).filter(Boolean);
+}
+
+const getItems = () => getMenuItems(routes[0]?.children);
+const getRouteArr = () => {
+  if (routeArr.length < 1) {
+    getItems();
+  }
+  return routeArr;
+}
+// 
+export {
+  getItems,
+  getRouteArr,
+};

src/routes/routes.jsx

@@ -1,7 +1,16 @@
-import AuthLayout from "@/layouts/AuthLayout"
-import Home from "@/pages/Home"
-import Login from '@/pages/login'
-import Page404 from '@/pages/404'
+import AuthLayout from "@/layouts/AuthLayout";
+import Home from "@/pages/Home";
+import Login from '@/pages/login';
+import Page404 from '@/pages/404';
+import BasicForm from '@/pages/sample/form';
+
+/**
+ * meta 用来扩展自定义数据数据
+ * {
+ *    title: 用于页面或者菜单的标题, 没有此字段, 菜单不会显示
+ *    hiddenInMenu: 布尔值, 如果为 false, 菜单不会显示
+ * }
+ */
 
 export default [
   {
@@ -13,16 +22,16 @@ export default [
         element: <Home />,
       },
       {
-        path: "index",
-        element: <Home />,
-        menu: {
-          title: 'Index',
+        path: "form",
+        element: <BasicForm />,
+        meta: {
+          title: '表单',
         },
       },
       {
         path: "home",
         element: <Home />,
-        menu: {
+        meta: {
           title: 'Home',
         },
       },