chore: 组件初步拆分

src/components/Loading.module.scss

@@ -0,0 +1,143 @@
+.loading {
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 32px;
+}
+
+@mixin position-top {
+    left: 0;
+    top: 0;
+    height: 50%;
+    width: 100%;
+}
+
+@mixin position-right-top {
+    left: 50%;
+    top: 0;
+    height: 50%;
+    width: 50%;
+}
+
+@mixin position-right {
+    left: 50%;
+    top: 0;
+    height: 100%;
+    width: 50%;
+}
+
+@mixin position-right-bottom {
+    left: 50%;
+    top: 50%;
+    height: 50%;
+    width: 50%;
+}
+
+@mixin position-bottom {
+    left: 0;
+    top: 50%;
+    height: 50%;
+    width: 100%;
+}
+
+@mixin position-left-bottom {
+    left: 0;
+    top: 50%;
+    height: 50%;
+    width: 50%;
+}
+
+@mixin position-left {
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 50%;
+}
+
+@mixin position-left-top {
+    left: 0;
+    top: 0;
+    height: 50%;
+    width: 50%;
+}
+
+@keyframes move {
+    0% {
+        @include position-left-top;
+    }
+
+    12.5% {
+        @include position-top;
+    }
+
+    25% {
+        @include position-right-top;
+    }
+
+    37.5% {
+        @include position-right;
+    }
+
+    50% {
+        @include position-right-bottom;
+    }
+
+    62.5% {
+        @include position-bottom;
+    }
+
+    75% {
+        @include position-left-bottom;
+    }
+
+    87.5% {
+        @include position-left;
+    }
+}
+
+.block {
+    position: absolute;
+    transition: 0.5s;
+    border-radius: 12px;
+    @include position-left-top;
+
+    &Container {
+        width: 64px;
+        height: 64px;
+        position: relative;
+    }
+
+    &1 {
+        background-color: #646cff88;
+        animation: move 1s infinite ease-in-out;
+
+        &.error {
+            animation-play-state: paused;
+            transform: rotate(75deg) translateX(30px);
+        }
+    }
+
+    &2 {
+        background-color: #646cff66;
+        animation: move 1s infinite ease-in-out;
+        animation-delay: 0.375s;
+
+        &.error {
+            animation-play-state: paused;
+            transform: rotate(175deg) translateX(10px);
+        }
+    }
+
+    &3 {
+        background-color: #646cff44;
+        animation: move 1s infinite ease-in-out;
+        animation-delay: 0.75s;
+
+        &.error {
+            animation-play-state: paused;
+            transform: rotate(225deg) translateX(20px);
+        }
+    }
+}

src/components/Loading.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+import style from './Loading.module.scss';
+import classNames from 'classnames';
+
+export const Loading: FC<{ error: string }> = ({ error }) => {
+    return (
+        <div className={style.loading}>
+            <div className={style.blockContainer}>
+                {[1, 2, 3].map((num) => (
+                    <div
+                        key={num}
+                        className={classNames(
+                            style.block,
+                            style[`block${num}`],
+                            error && style.error
+                        )}
+                    />
+                ))}
+            </div>
+            {error ? (
+                <span>
+                    {error}，稍后再试或<a href="/">返回首页</a>
+                </span>
+            ) : (
+                <span>加载中...</span>
+            )}
+        </div>
+    );
+};