fix: 修复图片预览bug

package-lock.json

@@ -54,8 +54,10 @@
         "react-app-polyfill": "^3.0.0",
         "react-dev-utils": "^12.0.1",
         "react-dom": "^18.1.0",
+        "react-photo-view": "^1.1.2",
         "react-redux": "^8.0.2",
         "react-refresh": "^0.11.0",
+        "react-router-dom": "^6.3.0",
         "resolve": "^1.20.0",
         "resolve-url-loader": "^4.0.0",
         "sass-loader": "^12.3.0",
@@ -8848,6 +8850,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -13978,6 +13988,15 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "license": "MIT"
     },
+    "node_modules/react-photo-view": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/react-photo-view/-/react-photo-view-1.1.2.tgz",
+      "integrity": "sha512-UeNDUbXY9813pJcyFEgOBiwVC5vcV9RAGsO78pS9bG6Zkdb4jng2Y9DNvo0ExuJ/7Zm6Hf2c1q18ZiDeH35OIg==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-redux": {
       "version": "8.0.2",
       "resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-8.0.2.tgz",
@@ -14030,6 +14049,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmmirror.com/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -23463,6 +23506,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -26868,6 +26919,12 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-photo-view": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/react-photo-view/-/react-photo-view-1.1.2.tgz",
+      "integrity": "sha512-UeNDUbXY9813pJcyFEgOBiwVC5vcV9RAGsO78pS9bG6Zkdb4jng2Y9DNvo0ExuJ/7Zm6Hf2c1q18ZiDeH35OIg==",
+      "requires": {}
+    },
     "react-redux": {
       "version": "8.0.2",
       "resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-8.0.2.tgz",
@@ -26893,6 +26950,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmmirror.com/read-pkg/-/read-pkg-5.2.0.tgz",

src/Components/HeaderComponent.sass

@@ -1,5 +1,6 @@
 .header-div
     padding: 32px 0px
+    text-align: center
     .avatar
         width: 120px
         height: 120px

src/Components/MenuComponent.sass

@@ -10,10 +10,10 @@ $rotation: 45deg
 $translateY: ($height-icon / 2)
 $translateX: 0
 
-$background: #dddddd
+$background: #cccccc
 
-$color: #cbcbcb
-$hoverColor: #ababab
+$color: #a8a8a8
+$hoverColor: #8e8e8e
 
 $bottom: 64px
 $right: 24px
@@ -22,6 +22,7 @@ $spacing: 64px
 
 #menu-div
     position: fixed
+    text-align: center
     right: 0
     bottom: 0
 

src/Components/Pic/PicComponent.sass

@@ -1,5 +1,6 @@
 .pic-component-div
     margin-bottom: 20px
+    text-align: center
 
 .pic-component-img
     object-fit: contain

src/Global/Global.sass

@@ -6,8 +6,6 @@ body
     color: $global-color
     letter-spacing: $global-letter-spacing
     background: #ededed
-div
-    text-align: center
 body, div, a, p, ul, li, ol, h1, h2, h3, h4, h5, h6, table, tr, td
     box-sizing: border-box
     margin: 0px