feat：增加基础组件

config/config.js

@@ -8,6 +8,7 @@ export default defineConfig({
   },
   fastRefresh: {},
   hash: true,
+  title: false,
   history: {
     type: "browser"
   },

package.json

@@ -20,7 +20,6 @@
     ]
   },
   "dependencies": {
-    "@umijs/plugin-request": "2.9.0",
     "@umijs/plugin-helmet":  "1.1.4",
     "umi": "3.3.14"
   },

src/components/Flex/index.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export interface IFlexProps {
+  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+  justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
+  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch';
+
+  itemSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch';
+  itemOrder?: number;
+  itemGrow?: number;
+
+  style?: object;
+  className?: string;
+
+  onClick?: any,
+}
+
+export default class Flex extends React.Component<IFlexProps, any> {
+}

src/components/Flex/index.jsx

@@ -0,0 +1,60 @@
+import React, {memo} from "react";
+import styles from "./index.less";
+
+const Index = memo((props) => {
+
+  const {
+    direction, wrap, justify, alignItems,
+    itemOrder, itemSelf, itemGrow, onClick,
+    className, style, ...other
+  } = props;
+
+  let newStyle = {};
+  if (direction) {
+    newStyle["flexDirection"] = direction;
+    newStyle["WebkitFlexDirection"] = direction;
+  }
+  if (wrap) {
+    newStyle["flexWrap"] = wrap;
+    newStyle["WebkitFlexWrap"] = wrap;
+  }
+  if (justify) {
+    newStyle["justifyContent"] = justify;
+    newStyle["WebkitJustifyContent"] = justify;
+  }
+  if (alignItems) {
+    newStyle["alignItems"] = alignItems;
+    newStyle["WebkitAlignItems"] = alignItems;
+  }
+  if (itemSelf) {
+    newStyle["alignSelf"] = itemSelf;
+    newStyle["WebkitAlignSelf"] = itemSelf;
+  }
+  if (itemOrder) {
+    newStyle["order"] = itemOrder;
+  }
+
+  if (itemGrow) {
+    newStyle["flexGrow"] = itemGrow;
+    newStyle["WebkitFlexGrow"] = itemGrow;
+  }
+
+  let clazz = styles.flex;
+  if (className) {
+    clazz = clazz + " " + className;
+  }
+
+  return <div
+    {...other} className={clazz} style={{...newStyle, ...style}} onClick={onClick}
+  >{props.children}</div>
+});
+
+const Flex = (props) => {
+  return <Index {...props} />
+};
+
+export default Flex;
+
+
+
+

src/components/Flex/index.less

@@ -0,0 +1,15 @@
+.flex {
+  display: -webkit-flex; /* Safari */
+  display: flex;
+  position: relative;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+
+  word-break: break-all;
+  white-space: normal;
+
+  flex-shrink: 0;
+  -webkit-flex-shrink: 0;
+
+}

src/components/LoadSpin/index.jsx

@@ -0,0 +1,68 @@
+import React, {memo} from "react";
+import ReactDOM from "react-dom";
+import less from "./index.less";
+import Flex from "@/components/Flex";
+
+const Index = memo(() => {
+  return <Flex className={less.loading}>
+    <div className={less.antSpin}>
+      <span className={less.antSpinDot}>
+        <i className={less.antSpinDotItem}> </i>
+        <i className={less.antSpinDotItem}> </i>
+        <i className={less.antSpinDotItem}> </i>
+        <i className={less.antSpinDotItem}> </i>
+      </span>
+    </div>
+  </Flex>;
+});
+
+
+/**
+ * 显示对话框
+ * @param tips
+ */
+export const showLoading = (tips) => {
+  let dialog = document.getElementById("dialog_loading");
+  if (!dialog) {
+    dialog = document.createElement("div");
+    dialog.id = "dialog_loading";
+    dialog.style.width = "100%";
+    dialog.style.height = "100%";
+    dialog.style.position = "absolute";
+    dialog.style.top = "0";
+    dialog.style.left = "0";
+    dialog.style.zIndex = "999";
+    document.body.append(dialog);
+  }
+  ReactDOM.render(<Flex
+    style={{width: "100%", height: "100%"}}
+    justify={"center"} alignItems={"center"}
+  >
+    <Flex
+      direction={"column"} alignItems={"center"}
+      style={{
+        width: "30%", padding: "32px 16px 16px 16px", boxShadow: "2px 2px 10px #dddddd",
+        background: "rgba(255,255,255,0.9)", borderRadius: "4px", color: "#555555",
+        border: "1px solid #eeeeee"
+      }}
+    >
+      <Index/>
+      <Flex style={{marginTop: 12}}>{tips || "加载中"}</Flex>
+    </Flex>
+  </Flex>, dialog);
+};
+
+
+/**
+ * 关闭加载框
+ */
+export const hideLoading = () => {
+  let ele = document.getElementById("dialog_loading");
+  ele && ele.remove();
+};
+
+const LoadSpin = ({}) => {
+  return <Index/>;
+};
+
+export default LoadSpin;

src/components/LoadSpin/index.less

@@ -0,0 +1,118 @@
+.loading {
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+
+  .antSpin {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    -webkit-font-feature-settings: 'tnum';
+    font-feature-settings: 'tnum';
+    color: #1890ff;
+    text-align: center;
+    vertical-align: middle;
+    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+    transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+    transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+    position: static;
+    display: inline-block;
+    opacity: 1;
+
+    .antSpinDot {
+      position: relative;
+      display: inline-block;
+      font-size: 32px;
+      width: 32px;
+      height: 32px;
+      -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      transform: rotate(45deg);
+      -webkit-animation: antRotate 1.2s infinite linear;
+      animation: antRotate 1.2s infinite linear;
+
+      .antSpinDotItem {
+        position: absolute;
+        display: block;
+        width: 14px;
+        height: 14px;
+        background-color: #1296db;
+        border-radius: 100%;
+        -webkit-transform: scale(0.75);
+        -ms-transform: scale(0.75);
+        transform: scale(0.75);
+        -webkit-transform-origin: 50% 50%;
+        -ms-transform-origin: 50% 50%;
+        transform-origin: 50% 50%;
+        opacity: 0.3;
+        -webkit-animation: antSpinMove 1s infinite linear alternate;
+        animation: antSpinMove 1s infinite linear alternate;
+
+        &:nth-child(1) {
+          top: 0;
+          left: 0;
+        }
+
+        &:nth-child(2) {
+          top: 0;
+          right: 0;
+          -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+        }
+
+        &:nth-child(3) {
+          right: 0;
+          bottom: 0;
+          -webkit-animation-delay: 0.8s;
+          animation-delay: 0.8s;
+        }
+
+        &:nth-child(4) {
+          bottom: 0;
+          left: 0;
+          -webkit-animation-delay: 1.2s;
+          animation-delay: 1.2s;
+        }
+      }
+    }
+  }
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .ant-spin-blur {
+    background: #fff;
+    opacity: 0.6;
+  }
+}
+
+@-webkit-keyframes antSpinMove {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes antSpinMove {
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes antRotate {
+  to {
+    -webkit-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+}
+
+@keyframes antRotate {
+  to {
+    -webkit-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+}

src/components/PageContainer/index.jsx

@@ -0,0 +1,27 @@
+import Flex from "@/components/Flex";
+import {Helmet} from "umi";
+import LoadSpin from "@/components/LoadSpin";
+
+/**
+ * 页面容器
+ * @constructor
+ */
+const PageContainer = ({title = "", loading = true, children, ...restProps}) => {
+
+
+  ///////////////////////////////////////// 页面渲染
+
+  return <Flex
+    direction={"column"} alignItems={"center"} justify={"center"}
+    style={{minHeight: "100vh", width: "100%"}} {...restProps}
+  >
+
+    <Helmet><title>{title}</title></Helmet>
+
+    {loading ? <LoadSpin/> : children}
+
+  </Flex>
+
+};
+
+export default PageContainer;

src/pages/index.jsx

@@ -1,9 +1,10 @@
 import less from "./index.less";
+import PageContainer from "@/components/PageContainer";
 
 export default () => {
 
 
-  return <div>
+  return <PageContainer title={"浙科校园码"} loading={false}>
     <h1 className={less.title}>Page index</h1>
-  </div>
+  </PageContainer>
 }