Main

README.md

@@ -42,3 +42,7 @@ $ yarn dev
 $ pnpm i
 $ pnpm dev
 ```
+
+## 新功能迭代
+
+- [x] 首屏动画交互

src/components/GlobalStyles/index.tsx

@@ -0,0 +1,14 @@
+import { styled, Box } from "@mui/material";
+
+export const FlexBox = styled(Box)(({ theme }) => ({
+  display: "flex",
+  height: "100%",
+}));
+
+export const ColumnBox = styled(FlexBox)(({ theme }) => ({
+  flexDirection: "column",
+}));
+
+export const RowBox = styled(FlexBox)(({ theme }) => ({
+  flexDirection: "row",
+}));

src/components/Pages/Dashboard/components/Styles.tsx

@@ -1,4 +1,4 @@
-import { styled, Box } from "@mui/material";
+import { styled, Box, Stack } from "@mui/material";
 import { keyframes } from "@emotion/react";
 import { animated } from "@react-spring/web";
 export const StyleBox = styled(Box)(({ theme }) => ({
@@ -130,3 +130,84 @@ export const RadioBox = styled(Box)<RadioBoxProps>(({ theme, active }) => ({
     },
   },
 }));
+type LoadingProp = {
+  width?: string;
+};
+
+export const ExecutingIcon = styled("div")<LoadingProp>(
+  ({ theme, width = "10px" }) => ({
+    width: width,
+    aspectRatio: 1,
+    borderRadius: "50%",
+    background: "#fff",
+    display: "grid",
+    animation: `l22_0 2s infinite linear`,
+    "&:before, &:after": {
+      content: "''",
+      gridArea: "1/1",
+      margin: "15%",
+      borderRadius: "50%",
+      background: "inherit",
+      transform: "rotate(0deg) translate(150%)",
+      animation: `l22 1s infinite`,
+    },
+    "&:after": {
+      animationDelay: "-.5s",
+    },
+    "@keyframes l22": {
+      "100%": {
+        transform: "rotate(1turn) translate(150%)",
+      },
+    },
+    "@keyframes l22_0": {
+      "100%": {
+        transform: "rotate(1turn)",
+      },
+    },
+  })
+);
+export const LoadingIcon = styled("div")<LoadingProp>(
+  ({ theme, width = "30px" }) => ({
+    width: width,
+    aspectRatio: 1,
+    display: "grid",
+    borderRadius: "50%",
+    background:
+      "linear-gradient(0deg ,rgb(255 255 255/50%) 30%,#0000 0 70%,rgb(255 255 255/100%) 0) 50%/8% 100%,linear-gradient(90deg,rgb(255 255 255/25%) 30%,#0000 0 70%,rgb(255 255 255/75% ) 0) 50%/100% 8%",
+    backgroundRepeat: "no-repeat",
+    animation: "l23 1s infinite steps(12)",
+    "@keyframes l23": {
+      "100%": {
+        transform: "rotate(1turn)",
+      },
+    },
+    "&:before, &:after": {
+      content: "''",
+      gridArea: "1/1",
+      borderRadius: "50%",
+      background: "inherit",
+      opacity: 0.915,
+      transform: "rotate(30deg)",
+    },
+    "&:after": {
+      opacity: 0.83,
+      transform: "rotate(60deg)",
+    },
+  })
+);
+
+export const AlignStack = styled(Stack)(({ theme }) => ({
+  textAlign: "center",
+  justifyContent: "space-around",
+  "& .MuiTypography-root": {
+    flex: 1,
+    display: "flex",
+    justifyContent: "space-evenly",
+  },
+}));
+
+export const ListStack = styled(AlignStack)(({ theme }) => ({
+  backgroundColor: "#D8D8D820",
+  borderRadius: "5px",
+  marginBottom: "10px",
+}));

src/components/Pages/Dashboard/components/TaskStatus.tsx

@@ -0,0 +1,168 @@
+import { memo, useState } from "react";
+import { Typography, Box, Stack, Divider } from "@mui/material";
+import { ColumnBox, RowBox } from "@/components/GlobalStyles";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import { ExecutingIcon, LoadingIcon, AlignStack, ListStack } from "./Styles";
+const TaskStatus = memo((props: any) => {
+  const [List, setList] = useState([
+    {
+      rroute: "3121",
+      state: 1,
+      forkTeeth: 1,
+    },
+    {
+      rroute: "241",
+      state: 2,
+      forkTeeth: 1,
+    },
+    {
+      rroute: "241",
+      state: 1,
+      forkTeeth: 2,
+    },
+    {
+      rroute: "3121",
+      state: 1,
+      forkTeeth: 1,
+    },
+    {
+      rroute: "241",
+      state: 2,
+      forkTeeth: 1,
+    },
+    {
+      rroute: "241",
+      state: 1,
+      forkTeeth: 2,
+    },
+    {
+      rroute: "3121",
+      state: 1,
+      forkTeeth: 1,
+    },
+    {
+      rroute: "241",
+      state: 2,
+      forkTeeth: 1,
+    },
+    {
+      rroute: "241",
+      state: 1,
+      forkTeeth: 2,
+    },
+    {
+      rroute: "241",
+      state: 1,
+      forkTeeth: 2,
+    },
+    {
+      rroute: "3121",
+      state: 1,
+      forkTeeth: 1,
+    },
+    {
+      rroute: "241",
+      state: 2,
+      forkTeeth: 1,
+    },
+    {
+      rroute: "241",
+      state: 1,
+      forkTeeth: 2,
+    },
+  ]);
+  return (
+    <ColumnBox sx={{ overflow: "hidden" }}>
+      <Typography sx={{ fontSize: "20px" }} variant="h5">
+        Tasks and Status
+      </Typography>
+      <ColumnBox sx={{ flex: 1 }}>
+        <Typography
+          variant="h4"
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-evenly",
+            marginBlock: "64px",
+          }}
+        >
+          <ExecutingIcon />
+          Executing
+        </Typography>
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            marginBottom: "36px",
+          }}
+        >
+          <Box sx={{ flex: 1, textAlign: "center" }}>
+            <Typography variant="h4">5766</Typography>
+            <Typography variant="body1" sx={{ opacity: 0.5 }}>
+              No.1
+            </Typography>
+          </Box>
+          <Box sx={{ flex: 1, textAlign: "center" }}>
+            <Typography variant="h4">345</Typography>
+            <Typography variant="body1" sx={{ opacity: 0.5 }}>
+              Point
+            </Typography>
+          </Box>
+          <Box sx={{ flex: 1, textAlign: "center" }}>
+            <Typography variant="h4">GET</Typography>
+            <Typography variant="body1" sx={{ opacity: 0.5 }}>
+              Type
+            </Typography>
+          </Box>
+        </Stack>
+        <Divider />
+        {/* 底部列表 */}
+        <ColumnBox sx={{ height: "auto" }}>
+          <AlignStack direction="row" spacing={2}>
+            <Typography sx={{ lineHeight: "45px" }} variant="body1">
+              Route
+            </Typography>
+            <Typography sx={{ lineHeight: "45px" }} variant="body1">
+              State
+            </Typography>
+            <Typography sx={{ lineHeight: "45px" }} variant="body1">
+              Fork Teeth
+            </Typography>
+          </AlignStack>
+        </ColumnBox>
+        <ColumnBox sx={{ flex: 1, marginBottom: "24px", overflowY: "auto" }}>
+          {List.map((item, index) => {
+            return (
+              <ListStack>
+                <AlignStack
+                  direction="row"
+                  spacing={2}
+                  sx={{ alignItems: "center" }}
+                >
+                  <Typography sx={{ lineHeight: "45px" }} variant="h6">
+                    {item.rroute}
+                  </Typography>
+                  <Typography sx={{ lineHeight: "45px" }} variant="h6">
+                    {item.state === 1 ? (
+                      <ExecutingIcon width={"8px"} />
+                    ) : (
+                      <CheckCircleIcon color="primary" />
+                    )}
+                  </Typography>
+                  <Typography sx={{ lineHeight: "45px" }} variant="h6">
+                    {item.forkTeeth === 1 ? (
+                      <ExecutingIcon width={"8px"} />
+                    ) : (
+                      <LoadingIcon width="24px" />
+                    )}
+                  </Typography>
+                </AlignStack>
+              </ListStack>
+            );
+          })}
+        </ColumnBox>
+      </ColumnBox>
+    </ColumnBox>
+  );
+});
+export default TaskStatus;