diff --git a/package.json b/package.json
index 8b28b8b..2d25c75 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,6 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "postinstall": "patch-package",
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
@@ -22,13 +21,13 @@
     "@reduxjs/toolkit": "^1.9.1",
     "axios": "^1.2.3",
     "dayjs": "^1.11.7",
-    "imagesloaded": "^5.0.0",
     "intersection-observer": "^0.12.2",
+    "json-bigint": "^1.0.0",
     "loading-attribute-polyfill": "^2.1.0",
     "masonic": "^3.7.0",
+    "material-ui-popup-state": "^5.0.4",
     "nanoid": "^4.0.0",
     "normalize.css": "^8.0.1",
-    "patch-package": "^6.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-flip-toolkit": "^7.0.17",
@@ -36,13 +35,12 @@
     "react-photo-view": "^1.2.3",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.6.1",
-    "react-use": "^17.4.0",
-    "swiper": "^8.4.6"
+    "react-use": "^17.4.0"
   },
   "devDependencies": {
     "@babel/core": ">=7.0.0 <8.0.0",
-    "@faker-js/faker": "^7.6.0",
     "@types/imagesloaded": "^4.1.2",
+    "@types/json-bigint": "^1.0.1",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
@@ -53,7 +51,7 @@
     "rollup-plugin-visualizer": "^5.9.0",
     "terser": ">=5.4.0 <6.0.0",
     "typescript": "^4.9.3",
-    "vite": "4.0.3",
+    "vite": "4.0.4",
     "vite-plugin-compression": "^0.5.1"
   }
-}
\ No newline at end of file
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bb26cb5..9a7f0da 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,12 +8,12 @@ specifiers:
   '@dnd-kit/utilities': ^3.2.1
   '@emotion/react': ^11.10.5
   '@emotion/styled': ^11.10.5
-  '@faker-js/faker': ^7.6.0
   '@mui/icons-material': ^5.11.0
   '@mui/lab': 5.0.0-alpha.114
   '@mui/material': ^5.11.3
   '@reduxjs/toolkit': ^1.9.1
   '@types/imagesloaded': ^4.1.2
+  '@types/json-bigint': ^1.0.1
   '@types/node': ^18.11.18
   '@types/react': ^18.0.26
   '@types/react-dom': ^18.0.9
@@ -22,14 +22,14 @@ specifiers:
   '@vitejs/plugin-react-swc': ^3.0.0
   axios: ^1.2.3
   dayjs: ^1.11.7
-  imagesloaded: ^5.0.0
   intersection-observer: ^0.12.2
+  json-bigint: ^1.0.0
   less: ^4.1.3
   loading-attribute-polyfill: ^2.1.0
   masonic: ^3.7.0
+  material-ui-popup-state: ^5.0.4
   nanoid: ^4.0.0
   normalize.css: ^8.0.1
-  patch-package: ^6.5.1
   react: ^18.2.0
   react-dom: ^18.2.0
   react-flip-toolkit: ^7.0.17
@@ -39,10 +39,9 @@ specifiers:
   react-router-dom: ^6.6.1
   react-use: ^17.4.0
   rollup-plugin-visualizer: ^5.9.0
-  swiper: ^8.4.6
   terser: '>=5.4.0 <6.0.0'
   typescript: ^4.9.3
-  vite: 4.0.3
+  vite: 4.0.4
   vite-plugin-compression: ^0.5.1
 
 dependencies:
@@ -58,13 +57,13 @@ dependencies:
   '@reduxjs/toolkit': 1.9.1_k4ae6lp43ej6mezo3ztvx6pykq
   axios: 1.2.3
   dayjs: 1.11.7
-  imagesloaded: 5.0.0
   intersection-observer: 0.12.2
+  json-bigint: 1.0.0
   loading-attribute-polyfill: 2.1.0
   masonic: 3.7.0_react@18.2.0
+  material-ui-popup-state: 5.0.4_lskpmcsdi7ipu6qpuapyu56ihm
   nanoid: 4.0.0
   normalize.css: 8.0.1
-  patch-package: 6.5.1
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
   react-flip-toolkit: 7.0.17_biqbaboplfbrettd7655fr4n2y
@@ -73,24 +72,23 @@ dependencies:
   react-redux: 8.0.5_ie75ejlwqy5zh3tldgt7pftwcu
   react-router-dom: 6.6.1_biqbaboplfbrettd7655fr4n2y
   react-use: 17.4.0_biqbaboplfbrettd7655fr4n2y
-  swiper: 8.4.6
 
 devDependencies:
   '@babel/core': 7.20.7
-  '@faker-js/faker': 7.6.0
   '@types/imagesloaded': 4.1.2
+  '@types/json-bigint': 1.0.1
   '@types/node': 18.11.18
   '@types/react': 18.0.26
   '@types/react-dom': 18.0.10
   '@types/react-lazy-load-image-component': 1.5.2
-  '@vitejs/plugin-legacy': 3.0.1_terser@5.16.1+vite@4.0.3
-  '@vitejs/plugin-react-swc': 3.0.1_vite@4.0.3
+  '@vitejs/plugin-legacy': 3.0.1_terser@5.16.1+vite@4.0.4
+  '@vitejs/plugin-react-swc': 3.0.1_vite@4.0.4
   less: 4.1.3
   rollup-plugin-visualizer: 5.9.0
   terser: 5.16.1
   typescript: 4.9.4
-  vite: 4.0.3_25ccpcpgpj6lg6lpj5keiqybuq
-  vite-plugin-compression: 0.5.1_vite@4.0.3
+  vite: 4.0.4_25ccpcpgpj6lg6lpj5keiqybuq
+  vite-plugin-compression: 0.5.1_vite@4.0.4
 
 packages:
 
@@ -700,11 +698,6 @@ packages:
       '@essentials/raf': 1.2.0
     dev: false
 
-  /@faker-js/faker/7.6.0:
-    resolution: {integrity: sha512-XK6BTq1NDMo9Xqw/YkYyGjSsg44fbNwYRx7QK2CuoQgyy+f1rrTDHoExVM5PsyXCtfl2vs2vVJ0MN0yN6LppRw==}
-    engines: {node: '>=14.0.0', npm: '>=6.0.0'}
-    dev: true
-
   /@jridgewell/gen-mapping/0.1.1:
     resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
     engines: {node: '>=6.0.0'}
@@ -1183,6 +1176,10 @@ packages:
     resolution: {integrity: sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==}
     dev: false
 
+  /@types/json-bigint/1.0.1:
+    resolution: {integrity: sha512-zpchZLNsNuzJHi6v64UBoFWAvQlPhch7XAi36FkH6tL1bbbmimIF+cS7vwkzY4u5RaSWMoflQfu+TshMPPw8uw==}
+    dev: true
+
   /@types/node/18.11.18:
     resolution: {integrity: sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==}
     dev: true
@@ -1240,7 +1237,7 @@ packages:
     resolution: {integrity: sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==}
     dev: false
 
-  /@vitejs/plugin-legacy/3.0.1_terser@5.16.1+vite@4.0.3:
+  /@vitejs/plugin-legacy/3.0.1_terser@5.16.1+vite@4.0.4:
     resolution: {integrity: sha512-XCtEjxoR3rmy000ujYRBp5kggWqzHz9+F20/yIMUWOzbvu0+KW1e14Fvb8h7SpNn+bfjGW1RiAs1Vrgb7Js+iQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -1253,26 +1250,22 @@ packages:
       regenerator-runtime: 0.13.11
       systemjs: 6.13.0
       terser: 5.16.1
-      vite: 4.0.3_25ccpcpgpj6lg6lpj5keiqybuq
+      vite: 4.0.4_25ccpcpgpj6lg6lpj5keiqybuq
     dev: true
 
-  /@vitejs/plugin-react-swc/3.0.1_vite@4.0.3:
+  /@vitejs/plugin-react-swc/3.0.1_vite@4.0.4:
     resolution: {integrity: sha512-3GQ2oruZO9j8dSHcI0MUeOZQBhjYyDQsF/pKY4Px+CJxn0M16OhgFeEzUjeuwci4zhhjoNIDE9aFNaV5GMQ09g==}
     peerDependencies:
       vite: ^4
     dependencies:
       '@swc/core': 1.3.24
-      vite: 4.0.3_25ccpcpgpj6lg6lpj5keiqybuq
+      vite: 4.0.4_25ccpcpgpj6lg6lpj5keiqybuq
     dev: true
 
   /@xobotyi/scrollbar-width/1.9.5:
     resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==}
     dev: false
 
-  /@yarnpkg/lockfile/1.1.0:
-    resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==}
-    dev: false
-
   /acorn/8.8.1:
     resolution: {integrity: sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==}
     engines: {node: '>=0.4.0'}
@@ -1295,16 +1288,12 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       color-convert: 2.0.1
+    dev: true
 
   /asynckit/0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
     dev: false
 
-  /at-least-node/1.0.0:
-    resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
-    engines: {node: '>= 4.0.0'}
-    dev: false
-
   /axios/1.2.3:
     resolution: {integrity: sha512-pdDkMYJeuXLZ6Xj/Q5J3Phpe+jbGdsSzlQaFVkMQzRUL05+6+tetX8TV3p4HrU4kzuO9bt+io/yGQxuyxA/xcw==}
     dependencies:
@@ -1324,22 +1313,8 @@ packages:
       resolve: 1.22.1
     dev: false
 
-  /balanced-match/1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: false
-
-  /brace-expansion/1.1.11:
-    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
-    dev: false
-
-  /braces/3.0.2:
-    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
-    engines: {node: '>=8'}
-    dependencies:
-      fill-range: 7.0.1
+  /bignumber.js/9.1.1:
+    resolution: {integrity: sha512-pHm4LsMJ6lzgNGVfZHjMoO8sdoRhOzOH4MLmY65Jg70bpxCKu5iOHNJyfF6OyvYw7t8Fpf35RuzUyqnQsj8Vig==}
     dev: false
 
   /browserslist/4.21.4:
@@ -1378,9 +1353,10 @@ packages:
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
+    dev: true
 
-  /ci-info/2.0.0:
-    resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==}
+  /classnames/2.3.2:
+    resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
     dev: false
 
   /cliui/8.0.1:
@@ -1407,12 +1383,14 @@ packages:
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
+    dev: true
 
   /color-name/1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
 
   /color-name/1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+    dev: true
 
   /combined-stream/1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
@@ -1425,10 +1403,6 @@ packages:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
     dev: true
 
-  /concat-map/0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-    dev: false
-
   /convert-source-map/1.9.0:
     resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
 
@@ -1460,17 +1434,6 @@ packages:
       yaml: 1.10.2
     dev: false
 
-  /cross-spawn/6.0.5:
-    resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
-    engines: {node: '>=4.8'}
-    dependencies:
-      nice-try: 1.0.5
-      path-key: 2.0.1
-      semver: 5.7.1
-      shebang-command: 1.2.0
-      which: 1.3.1
-    dev: false
-
   /css-in-js-utils/3.1.0:
     resolution: {integrity: sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==}
     dependencies:
@@ -1532,12 +1495,6 @@ packages:
       csstype: 3.1.1
     dev: false
 
-  /dom7/4.0.4:
-    resolution: {integrity: sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==}
-    dependencies:
-      ssr-window: 4.0.2
-    dev: false
-
   /electron-to-chromium/1.4.284:
     resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
 
@@ -1609,10 +1566,6 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
-  /ev-emitter/2.1.2:
-    resolution: {integrity: sha512-jQ5Ql18hdCQ4qS+RCrbLfz1n+Pags27q5TwMKvZyhp5hh2UULUYZUy1keqj6k6SYsdqIYjnmz7xyyEY0V67B8Q==}
-    dev: false
-
   /fast-deep-equal/3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: false
@@ -1629,23 +1582,10 @@ packages:
     resolution: {integrity: sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==}
     dev: false
 
-  /fill-range/7.0.1:
-    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
-    engines: {node: '>=8'}
-    dependencies:
-      to-regex-range: 5.0.1
-    dev: false
-
   /find-root/1.1.0:
     resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
     dev: false
 
-  /find-yarn-workspace-root/2.0.0:
-    resolution: {integrity: sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==}
-    dependencies:
-      micromatch: 4.0.5
-    dev: false
-
   /flip-toolkit/7.0.17:
     resolution: {integrity: sha512-bybUdLNbC80F0+v+t3TBfxEAMVGhvXLi3pZ+qTtr4aCu/Y/5YQimMij0xJKT1qtz4SO31V4zftIgaTJdCCFiHA==}
     engines: {node: '>=8', npm: '>=5'}
@@ -1681,20 +1621,6 @@ packages:
       universalify: 2.0.0
     dev: true
 
-  /fs-extra/9.1.0:
-    resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
-    engines: {node: '>=10'}
-    dependencies:
-      at-least-node: 1.0.0
-      graceful-fs: 4.2.10
-      jsonfile: 6.1.0
-      universalify: 2.0.0
-    dev: false
-
-  /fs.realpath/1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-    dev: false
-
   /fsevents/2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -1715,17 +1641,6 @@ packages:
     engines: {node: 6.* || 8.* || >= 10.*}
     dev: true
 
-  /glob/7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: false
-
   /globals/11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
@@ -1733,6 +1648,7 @@ packages:
   /graceful-fs/4.2.10:
     resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
     requiresBuild: true
+    dev: true
 
   /has-flag/3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
@@ -1741,6 +1657,7 @@ packages:
   /has-flag/4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
+    dev: true
 
   /has/1.0.3:
     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
@@ -1774,12 +1691,6 @@ packages:
     dev: true
     optional: true
 
-  /imagesloaded/5.0.0:
-    resolution: {integrity: sha512-/0JGSubc1MTCoDKVmonLHgbifBWHdyLkun+R/151E1c5n79hiSxcd7cB7mPXFgojYu8xnRZv7GYxzKoxW8BetQ==}
-    dependencies:
-      ev-emitter: 2.1.2
-    dev: false
-
   /immer/9.0.17:
     resolution: {integrity: sha512-+hBruaLSQvkPfxRiTLK/mi4vLH+/VQS6z2KJahdoxlleFOI8ARqzOF17uy12eFDlqWmPoygwc5evgwcp+dlHhg==}
     dev: false
@@ -1792,17 +1703,6 @@ packages:
       resolve-from: 4.0.0
     dev: false
 
-  /inflight/1.0.6:
-    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
-    dependencies:
-      once: 1.4.0
-      wrappy: 1.0.2
-    dev: false
-
-  /inherits/2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-    dev: false
-
   /inline-style-prefixer/6.0.4:
     resolution: {integrity: sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==}
     dependencies:
@@ -1818,13 +1718,6 @@ packages:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
     dev: false
 
-  /is-ci/2.0.0:
-    resolution: {integrity: sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==}
-    hasBin: true
-    dependencies:
-      ci-info: 2.0.0
-    dev: false
-
   /is-core-module/2.11.0:
     resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
     dependencies:
@@ -1834,17 +1727,13 @@ packages:
     resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
     engines: {node: '>=8'}
     hasBin: true
+    dev: true
 
   /is-fullwidth-code-point/3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
     dev: true
 
-  /is-number/7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
-    dev: false
-
   /is-what/3.14.1:
     resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
     dev: true
@@ -1854,10 +1743,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       is-docker: 2.2.1
-
-  /isexe/2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-    dev: false
+    dev: true
 
   /js-cookie/2.2.1:
     resolution: {integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==}
@@ -1871,6 +1757,12 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  /json-bigint/1.0.0:
+    resolution: {integrity: sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==}
+    dependencies:
+      bignumber.js: 9.1.1
+    dev: false
+
   /json-parse-even-better-errors/2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
     dev: false
@@ -1886,12 +1778,7 @@ packages:
       universalify: 2.0.0
     optionalDependencies:
       graceful-fs: 4.2.10
-
-  /klaw-sync/6.0.0:
-    resolution: {integrity: sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==}
-    dependencies:
-      graceful-fs: 4.2.10
-    dev: false
+    dev: true
 
   /less/4.1.3:
     resolution: {integrity: sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==}
@@ -1971,16 +1858,25 @@ packages:
       trie-memoize: 1.2.0
     dev: false
 
-  /mdn-data/2.0.14:
-    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
+  /material-ui-popup-state/5.0.4_lskpmcsdi7ipu6qpuapyu56ihm:
+    resolution: {integrity: sha512-QdlKHiKv498UNsH3zpQNJ7SN9RYiEjR5MSJIg+a9gqCp43G0A8fo1r0kmX1qFTLGTfYKgXix5RANJkNTujWtxA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.20.7
+      '@mui/material': 5.11.3_lskpmcsdi7ipu6qpuapyu56ihm
+      classnames: 2.3.2
+      prop-types: 15.8.1
+      react: 18.2.0
+    transitivePeerDependencies:
+      - '@emotion/react'
+      - '@emotion/styled'
+      - '@types/react'
+      - react-dom
     dev: false
 
-  /micromatch/4.0.5:
-    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
-    engines: {node: '>=8.6'}
-    dependencies:
-      braces: 3.0.2
-      picomatch: 2.3.1
+  /mdn-data/2.0.14:
+    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
     dev: false
 
   /mime-db/1.52.0:
@@ -2003,16 +1899,6 @@ packages:
     dev: true
     optional: true
 
-  /minimatch/3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
-    dependencies:
-      brace-expansion: 1.1.11
-    dev: false
-
-  /minimist/1.2.7:
-    resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
-    dev: false
-
   /ms/2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
 
@@ -2065,10 +1951,6 @@ packages:
     dev: true
     optional: true
 
-  /nice-try/1.0.5:
-    resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
-    dev: false
-
   /node-releases/2.0.8:
     resolution: {integrity: sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==}
 
@@ -2081,20 +1963,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /once/1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
-    dependencies:
-      wrappy: 1.0.2
-    dev: false
-
-  /open/7.4.2:
-    resolution: {integrity: sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==}
-    engines: {node: '>=8'}
-    dependencies:
-      is-docker: 2.2.1
-      is-wsl: 2.2.0
-    dev: false
-
   /open/8.4.0:
     resolution: {integrity: sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==}
     engines: {node: '>=12'}
@@ -2104,11 +1972,6 @@ packages:
       is-wsl: 2.2.0
     dev: true
 
-  /os-tmpdir/1.0.2:
-    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /parent-module/1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -2131,37 +1994,6 @@ packages:
     engines: {node: '>= 0.10'}
     dev: true
 
-  /patch-package/6.5.1:
-    resolution: {integrity: sha512-I/4Zsalfhc6bphmJTlrLoOcAF87jcxko4q0qsv4bGcurbr8IskEOtdnt9iCmsQVGL1B+iUhSQqweyTLJfCF9rA==}
-    engines: {node: '>=10', npm: '>5'}
-    hasBin: true
-    dependencies:
-      '@yarnpkg/lockfile': 1.1.0
-      chalk: 4.1.2
-      cross-spawn: 6.0.5
-      find-yarn-workspace-root: 2.0.0
-      fs-extra: 9.1.0
-      is-ci: 2.0.0
-      klaw-sync: 6.0.0
-      minimist: 1.2.7
-      open: 7.4.2
-      rimraf: 2.7.1
-      semver: 5.7.1
-      slash: 2.0.0
-      tmp: 0.0.33
-      yaml: 1.10.2
-    dev: false
-
-  /path-is-absolute/1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /path-key/2.0.1:
-    resolution: {integrity: sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==}
-    engines: {node: '>=4'}
-    dev: false
-
   /path-parse/1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
@@ -2176,6 +2008,7 @@ packages:
   /picomatch/2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
+    dev: true
 
   /pify/4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
@@ -2420,13 +2253,6 @@ packages:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  /rimraf/2.7.1:
-    resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
-    hasBin: true
-    dependencies:
-      glob: 7.2.3
-    dev: false
-
   /rollup-plugin-visualizer/5.9.0:
     resolution: {integrity: sha512-bbDOv47+Bw4C/cgs0czZqfm8L82xOZssk4ayZjG40y9zbXclNk7YikrZTDao6p7+HDiGxrN0b65SgZiVm9k1Cg==}
     engines: {node: '>=14'}
@@ -2481,6 +2307,8 @@ packages:
   /semver/5.7.1:
     resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
     hasBin: true
+    dev: true
+    optional: true
 
   /semver/6.3.0:
     resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==}
@@ -2491,23 +2319,6 @@ packages:
     engines: {node: '>=6.9'}
     dev: false
 
-  /shebang-command/1.2.0:
-    resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      shebang-regex: 1.0.0
-    dev: false
-
-  /shebang-regex/1.0.0:
-    resolution: {integrity: sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /slash/2.0.0:
-    resolution: {integrity: sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==}
-    engines: {node: '>=6'}
-    dev: false
-
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
@@ -2545,10 +2356,6 @@ packages:
     deprecated: Please use @jridgewell/sourcemap-codec instead
     dev: false
 
-  /ssr-window/4.0.2:
-    resolution: {integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==}
-    dev: false
-
   /stack-generator/2.0.10:
     resolution: {integrity: sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==}
     dependencies:
@@ -2605,20 +2412,12 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       has-flag: 4.0.0
+    dev: true
 
   /supports-preserve-symlinks-flag/1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  /swiper/8.4.6:
-    resolution: {integrity: sha512-HACW035vBz2T6Kfut23EAzXhcDpgR8doX+wjq0ZUvJgS5SQApGrV885DAPLBFnmPUISsAhNSVxPKDxqroFvXvQ==}
-    engines: {node: '>= 4.7.0'}
-    requiresBuild: true
-    dependencies:
-      dom7: 4.0.4
-      ssr-window: 4.0.2
-    dev: false
-
   /systemjs/6.13.0:
     resolution: {integrity: sha512-P3cgh2bpaPvAO2NE3uRp/n6hmk4xPX4DQf+UzTlCAycssKdqhp6hjw+ENWe+aUS7TogKRFtptMosTSFeC6R55g==}
     dev: true
@@ -2639,24 +2438,10 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
-  /tmp/0.0.33:
-    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
-    engines: {node: '>=0.6.0'}
-    dependencies:
-      os-tmpdir: 1.0.2
-    dev: false
-
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
 
-  /to-regex-range/5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
-    dependencies:
-      is-number: 7.0.0
-    dev: false
-
   /toggle-selection/1.0.6:
     resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
     dev: false
@@ -2681,6 +2466,7 @@ packages:
   /universalify/2.0.0:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}
+    dev: true
 
   /update-browserslist-db/1.0.10_browserslist@4.21.4:
     resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
@@ -2700,7 +2486,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /vite-plugin-compression/0.5.1_vite@4.0.3:
+  /vite-plugin-compression/0.5.1_vite@4.0.4:
     resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
     peerDependencies:
       vite: '>=2.0.0'
@@ -2708,13 +2494,13 @@ packages:
       chalk: 4.1.2
       debug: 4.3.4
       fs-extra: 10.1.0
-      vite: 4.0.3_25ccpcpgpj6lg6lpj5keiqybuq
+      vite: 4.0.4_25ccpcpgpj6lg6lpj5keiqybuq
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite/4.0.3_25ccpcpgpj6lg6lpj5keiqybuq:
-    resolution: {integrity: sha512-HvuNv1RdE7deIfQb8mPk51UKjqptO/4RXZ5yXSAvurd5xOckwS/gg8h9Tky3uSbnjYTgUm0hVCet1cyhKd73ZA==}
+  /vite/4.0.4_25ccpcpgpj6lg6lpj5keiqybuq:
+    resolution: {integrity: sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -2749,13 +2535,6 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /which/1.3.1:
-    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
-    hasBin: true
-    dependencies:
-      isexe: 2.0.0
-    dev: false
-
   /wrap-ansi/7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -2765,10 +2544,6 @@ packages:
       strip-ansi: 6.0.1
     dev: true
 
-  /wrappy/1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: false
-
   /y18n/5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
diff --git a/src/components/image/image.module.less b/src/components/image/image.module.less
index 33ed9ed..1ca36d4 100644
--- a/src/components/image/image.module.less
+++ b/src/components/image/image.module.less
@@ -8,12 +8,11 @@
 
     &>img {
         width: 100%;
-        height: 100%;
+        height: auto;
         display: inline-block;
         object-fit: cover;
         transition: opacity .5s linear;
         transition: transform .3s linear;
-        aspect-ratio: 16/9;
 
         &:hover {
             transition: filter .3s ease-in-out;
diff --git a/src/components/image/index.tsx b/src/components/image/index.tsx
index 9743c85..1f3ba3d 100644
--- a/src/components/image/index.tsx
+++ b/src/components/image/index.tsx
@@ -3,7 +3,6 @@ import { InView } from "react-intersection-observer";
 import { Once } from "@utils/index";
 import { ImageProps } from "./imagetype";
 import styles from "./image.module.less";
-import { useScreenSize } from "../proview/screenSize";
 import {
   getImageSize,
   getResizeHeight,
@@ -79,24 +78,24 @@ export function ImageBasic({
   observer,
   callback,
   children,
-}: Omit<ImageProps, "width" | "height"> & {
+  ...resProps
+}: ImageProps & {
   children?: ReactElement;
+  [k: string]: any;
 }) {
   const once_callback = useCallback(Once(callback!!), []);
-  const { md } = useScreenSize();
   return (
     <InView>
       {({ inView, ref, entry }) => (
         <BorderDiv ref={ref} className={styles.imgWrapper}>
           <img
-            src={`${url}${
-              !md ? `@480w_270h_1c` : `@672w_378h_1c_!web-search-common-cover`
-            }`}
+            src={url}
             style={{
               opacity: 1.0,
             }}
             alt=''
             loading='lazy'
+            {...resProps}
           />
           <>{observer && inView && once_callback(inView)}</>
           {children}
diff --git a/src/main.tsx b/src/main.tsx
index 9a0e893..1c4256f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -16,7 +16,6 @@ import "intersection-observer";
 import "./normalize.css";
 import "loading-attribute-polyfill";
 import "./index.less";
-import "swiper/css/bundle";
 const router = createBrowserRouter([
   {
     path: "/",
diff --git a/src/routers/layout/header.tsx b/src/routers/layout/header.tsx
index e78d040..c153dfb 100644
--- a/src/routers/layout/header.tsx
+++ b/src/routers/layout/header.tsx
@@ -1,29 +1,37 @@
 import styles from "./layout.module.less";
 import LOGO from "./logo";
+import RouterNav from "./routernav";
 import { useAppDispatch } from "@store/hooks";
-import { Link, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { useEffect, useMemo } from "react";
 import { changeLoadingCauseByUrl } from "@store/loading";
+import { routerNameToLoading } from "@utils/router";
+import { styled } from "@mui/material";
 export default function Header() {
   const dispatch = useAppDispatch(),
     location = useLocation();
   useEffect(() => {
     dispatch(
       changeLoadingCauseByUrl({
-        stateName:
-          location.pathname == "/photo" ? "photoIsloading" : "videoIsLoading",
+        stateName: routerNameToLoading(location.pathname),
       })
     );
   }, [location.pathname]);
   const JSXRes = useMemo(
     () => (
-      <header className={styles["header"]}>
+      <Header_header className={styles["header"]}>
         <LOGO />
-        <Link to='/video'>video</Link>
-        <Link to='/photo'>photo</Link>
-      </header>
+        <RouterNav />
+      </Header_header>
     ),
     []
   );
   return <>{JSXRes}</>;
 }
+const Header_header = styled("header")(({ theme }) => ({
+  flexDirection: "row",
+  [theme.breakpoints.down("sm")]: {
+    flexDirection: "row-reverse",
+    justifyContent: "flex-end",
+  },
+}));
diff --git a/src/routers/layout/layout.module.less b/src/routers/layout/layout.module.less
index 851856c..a163974 100644
--- a/src/routers/layout/layout.module.less
+++ b/src/routers/layout/layout.module.less
@@ -22,29 +22,23 @@
 .logo {
     display: flex;
     align-items: center;
+    flex-flow: row-reverse nowrap;
+    padding: 5px 0;
 
     a {
         color: inherit;
         text-decoration: none;
     }
 
-    &>a:only-child {
-        display: flex;
-        position: relative;
-        flex-flow: row-reverse nowrap;
-        align-items: center;
-        padding: 5px 0;
 
-        h1 {
-            margin: 0;
-            white-space: nowrap;
 
-            button {
-                position: absolute;
-                transform: translate(-20px, -10px);
-            }
-        }
+    h1 {
+        margin: 0;
+        white-space: nowrap;
+        position: relative;
+        padding-right: 30px;
     }
+
 }
 
 .modal {
diff --git a/src/routers/layout/logo.tsx b/src/routers/layout/logo.tsx
index b7e1f59..aa6278c 100644
--- a/src/routers/layout/logo.tsx
+++ b/src/routers/layout/logo.tsx
@@ -1,87 +1,99 @@
 import { Button, Modal, styled } from "@mui/material";
 import { FC, useState } from "react";
-import { Link } from "react-router-dom";
 import styles from "./layout.module.less";
 
+const Explain: FC<{ open: boolean; handlerClick: () => void }> = (props) => (
+  <>
+    <Modal open={props.open} onClose={props.handlerClick}>
+      <div className={styles["modal"]}>
+        <hr className={styles["line_text"]} data-content='QA' />
+        <ul>
+          <li>
+            <p>
+              <strong>Q: </strong>
+              <span>为什么界面这么丑？</span>
+            </p>
+            <p>
+              <strong>A: </strong>
+              <span>web端没有UI捏🙇‍♂️🙇‍♂️🙇‍♂️果咩。</span>
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Q: </strong>
+              <span>如何查找我想看的视频类型？</span>
+            </p>
+            <p>
+              <strong>A: </strong>
+              <span>
+                😩目前只能通过点击下方tag栏进行查询，其中各分区、原创和转载、
+                最新发布和最多播放互斥外其他tag皆满足异或查询。
+                <br />
+                🤔tag排序不是固定的，可以使用鼠标或者触摸按住tag半秒后进行移动。
+                <br />
+                🤗可以自定义任何你想要的tag栏顺序，下一次访问也有效。
+              </span>
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Q: </strong>
+              <span>露早tag为什么不是应援色？</span>
+            </p>
+            <p>
+              <strong>A: </strong>
+              <span>
+                露早GOGO的应援色为
+                <span
+                  style={{
+                    color: "#3dff9e",
+                  }}
+                >
+                  #3dff9e
+                </span>
+                ,tag字面显示不明显，所以更换为黑露早形态的
+                <span style={{ color: "#A0191D" }}>#A0191D</span>
+              </span>
+            </p>
+          </li>
+        </ul>
+        <Button
+          sx={{
+            position: "relative",
+            left: "50%",
+            transform: "translate(-50%,0)",
+          }}
+          onClick={props.handlerClick}
+        >
+          我知道了
+        </Button>
+      </div>
+    </Modal>
+  </>
+);
+
 export default function LOGO() {
   const [open, set] = useState(false),
     handlerClick = () => set((open) => !open);
   return (
     <div className={styles["logo"]}>
-      <Link to='/'>
-        <H1>
-          EOEfans-web端
-          <Button onClick={handlerClick} sx={{ padding: "0" }}>
-            QA
-          </Button>
-          <Modal open={open} onClose={handlerClick}>
-            <div className={styles["modal"]}>
-              <hr className={styles["line_text"]} data-content='QA' />
-              <ul>
-                <li>
-                  <p>
-                    <strong>Q: </strong>
-                    <span>为什么界面这么丑？</span>
-                  </p>
-                  <p>
-                    <strong>A: </strong>
-                    <span>web端没有UI捏🙇‍♂️🙇‍♂️🙇‍♂️果咩。</span>
-                  </p>
-                </li>
-                <li>
-                  <p>
-                    <strong>Q: </strong>
-                    <span>如何查找我想看的视频类型？</span>
-                  </p>
-                  <p>
-                    <strong>A: </strong>
-                    <span>
-                      😩目前只能通过点击下方tag栏进行查询，其中各分区、原创和转载、
-                      最新发布和最多播放互斥外其他tag皆满足异或查询。
-                      <br />
-                      🤔tag排序不是固定的，可以使用鼠标或者触摸按住tag半秒后进行移动。
-                      <br />
-                      🤗可以自定义任何你想要的tag栏顺序，下一次访问也有效。
-                    </span>
-                  </p>
-                </li>
-                <li>
-                  <p>
-                    <strong>Q: </strong>
-                    <span>露早tag为什么不是应援色？</span>
-                  </p>
-                  <p>
-                    <strong>A: </strong>
-                    <span>
-                      露早GOGO的应援色为
-                      <span
-                        style={{
-                          color: "#3dff9e",
-                        }}
-                      >
-                        #3dff9e
-                      </span>
-                      ,tag字面显示不明显，所以更换为黑露早形态的
-                      <span style={{ color: "#A0191D" }}>#A0191D</span>
-                    </span>
-                  </p>
-                </li>
-              </ul>
-              <Button
-                sx={{
-                  position: "relative",
-                  left: "50%",
-                  transform: "translate(-50%,0)",
-                }}
-                onClick={handlerClick}
-              >
-                我知道了
-              </Button>
-            </div>
-          </Modal>
-        </H1>
-        <Yituo width={"64px"} height={"30px"} />
-      </Link>
+      <H1>
+        EOEfans-web端
+        <Button
+          onClick={handlerClick}
+          sx={{
+            padding: "0",
+            minWidth: "initial",
+            position: "absolute",
+            transform: "translate(5px,-5px)",
+            width: "20px",
+          }}
+        >
+          QA
+        </Button>
+        <Explain open={open} handlerClick={handlerClick} />
+      </H1>
+      <Yituo width={"64px"} height={"30px"} />
     </div>
   );
 }
@@ -92,13 +104,12 @@ const H1 = styled("h1")(({ theme }) => ({
   },
 }));
 
-//todo 修改logo
-
 const Yituo: FC<{
   height: number | string;
   width: number | string;
 }> = ({ height, width }) => (
   <svg width={width} height={height} viewBox='0 0 524.739 295.223'>
+    <title>芝士蛞蝓</title>
     <g id='Component_6_1' data-name='Component 6 – 1'>
       <path
         d='M352.413,1039.154s-18.184-28.564,0-43.279,66.674-109.064,219.936-45.01c0,0,102.175-44.145,120.359-64.919-2.6,0-8.659-33.758-23.379-40.683s-34.636-22.505-32.038-32.892,37.233-3.463,42.429,24.236c3.464,0,34.636,33.758,38.965,34.623.866,0,38.965-16.446,75.333,5.194,0,.866,27.708-22.505,22.513-53.666s25.111-28.564,25.111-28.564,31.172,19.908,0,42.414c0,1.731-27.709,41.548-19.916,56.263s35.5,43.279,32.038,73.575,12.988,7.79,12.988,7.79,7.793,17.312-5.2,16.446-13.854-6.059-13.854-6.059-6.927,105.6-83.991,104.736-34.636-17.312-126.42,0c-77.93,0-174.044-12.118-206.082-19.908.866,2.6-23.379-25.1-53.685-30.3Z'
diff --git a/src/routers/layout/nav/index.tsx b/src/routers/layout/nav/index.tsx
index d17645d..bb5e4f1 100644
--- a/src/routers/layout/nav/index.tsx
+++ b/src/routers/layout/nav/index.tsx
@@ -24,9 +24,9 @@ import { changeNavMoreShowed, selectNavMoreShowed } from "@store/device/index";
 import { getVersion } from "@utils/index";
 import { selectVideoLoadingState } from "@store/loading/index";
 import {
-  handerAddTag,
-  handerDeleteTag,
-  selectActiveTags,
+  handerVideoAddTag,
+  handerVideoDeleteTag,
+  selectVideoActiveTags,
 } from "@store/tags/index";
 export default function Header_Nav() {
   const [navLists, setLists] = useNavList();
@@ -117,7 +117,7 @@ const NavInViewItem = () => {
           width: "1px",
         }}
       ></span>
-      <Flipped flipId={"nav-right"} delayUntil='list'>
+      <Flipped flipId={"nav-right"} delayUntil='list' opacity translate>
         <div
           className={styles["nav-right-show-btn"]}
           onClick={() => dispatch(changeNavMoreShowed())}
@@ -153,15 +153,15 @@ const NavItem: FC<NavQueryItemType> = memo((props) => {
 });
 
 const NavTagChipItem: FC<NavQueryItemType> = memo((props) => {
-  const clicked = useAppSelector(selectActiveTags).some(
+  const clicked = useAppSelector(selectVideoActiveTags).some(
       (item) => item.id === props.id
     ),
     dispatch = useAppDispatch(),
     handerclick = () => {
       if (clicked) {
-        dispatch(handerDeleteTag(props));
+        dispatch(handerVideoDeleteTag(props));
       } else {
-        dispatch(handerAddTag(props));
+        dispatch(handerVideoAddTag(props));
       }
     },
     isVideoFetching = useAppSelector(selectVideoLoadingState),
diff --git a/src/routers/layout/nav/tools.ts b/src/routers/layout/nav/tools.ts
index 3de3859..66237a6 100644
--- a/src/routers/layout/nav/tools.ts
+++ b/src/routers/layout/nav/tools.ts
@@ -202,20 +202,3 @@ const nav_tag_list_no_id: Omit<NavQueryItemType, "id" | "cancelable">[] = [
     id: nanoid(3),
     cancelable: false,
   })) as NavQueryItemType[];
-const router_list: Omit<NavRouterItemType, "id" | "cancelable">[] = [
-  {
-    type: "router",
-    pathname: "photo",
-    name: "图片",
-  },
-  {
-    type: "router",
-    pathname: "video",
-    name: "视频",
-  },
-];
-export const router_nav_list = router_list.map((item) => ({
-  ...item,
-  id: nanoid(3),
-  cancelable: false,
-})) as NavRouterItemType[];
diff --git a/src/routers/layout/routernav/index.tsx b/src/routers/layout/routernav/index.tsx
index 0aa1f0d..88172e4 100644
--- a/src/routers/layout/routernav/index.tsx
+++ b/src/routers/layout/routernav/index.tsx
@@ -1,29 +1,61 @@
-import { Button, ButtonGroup, Stack } from "@mui/material";
-import { useMemo } from "react";
-import { NavLink } from "react-router-dom";
-import { useRouterList } from "./tools";
+import { Tab, Tabs } from "@mui/material";
+import { useState, useEffect, useCallback, memo } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { useScreenSize } from "@components/proview/screenSize";
+import MenuRouter from "./menu";
+
+export const RouterList: TabProps[] = [
+  {
+    label: "视频",
+    to: "/video",
+  },
+  {
+    label: "图片",
+    to: "/photo",
+  },
+];
 
 export default function RouterNav() {
-  const routerlists = useRouterList(),
-    routerRes = useMemo(
-      () =>
-        routerlists.map((item) => (
-          <NavLink to={item.pathname} key={item.id}>
-            <Button>{item.name}</Button>
-          </NavLink>
-        )),
-      [routerlists]
-    );
+  const { pathname } = useLocation(),
+    handler = () => (pathname === "/photo" ? 1 : 0);
+  const [value, set] = useState(handler),
+    changehandler = useCallback(() => set(handler), [handler]);
+  useEffect(() => {
+    changehandler();
+  }, [pathname]);
+  const { sm } = useScreenSize();
+  return (
+    <>
+      {sm ? (
+        <MenuRouter />
+      ) : (
+        <Tabs value={value}>
+          {RouterList.map((item, index) => (
+            <TabLink {...item} key={index} />
+          ))}
+        </Tabs>
+      )}
+    </>
+  );
+}
+export type TabProps = {
+  label: string;
+  to: string;
+};
+export function TabLink(props: TabProps) {
+  const { pathname } = useLocation();
   return (
-    <Stack direction='row'>
-      <ButtonGroup
-        variant='text'
-        sx={{
-          alignItems: "center",
-        }}
-      >
-        {routerRes}
-      </ButtonGroup>
-    </Stack>
+    <Tab
+      component={Link}
+      {...props}
+      sx={{
+        color: pathname === props.to ? "primary.main" : "text.main",
+        opacity: 1,
+        padding: {
+          md: "12px 16px",
+          sm: "0px",
+        },
+      }}
+    />
   );
 }
diff --git a/src/routers/layout/routernav/menu.tsx b/src/routers/layout/routernav/menu.tsx
new file mode 100644
index 0000000..931cf0a
--- /dev/null
+++ b/src/routers/layout/routernav/menu.tsx
@@ -0,0 +1,36 @@
+import { Menu, Button, MenuItem } from "@mui/material";
+import { Omit } from "@utils/index";
+import PopupState, { bindTrigger, bindMenu } from "material-ui-popup-state";
+import { RouterList, TabProps, TabLink } from ".";
+export default function MenuRouter() {
+  return (
+    <PopupState variant='popover' popupId='router-popup-menu'>
+      {(popupState) => (
+        <>
+          <Button
+            variant='text'
+            {...bindTrigger(popupState)}
+            sx={{
+              padding: "12px 16px",
+              minWidth: "90px",
+            }}
+          >
+            首页
+          </Button>
+          <Menu {...bindMenu(popupState)} marginThreshold={0} elevation={2}>
+            {RouterList.map((item, index) => (
+              <RouterItem {...item} onClick={popupState.close} key={index} />
+            ))}
+          </Menu>
+        </>
+      )}
+    </PopupState>
+  );
+}
+function RouterItem(props: TabProps & { onClick: () => void }) {
+  return (
+    <MenuItem onClick={props.onClick}>
+      <TabLink {...Omit(props, "onClick")} />
+    </MenuItem>
+  );
+}
diff --git a/src/routers/layout/routernav/tools.ts b/src/routers/layout/routernav/tools.ts
deleted file mode 100644
index 401cab2..0000000
--- a/src/routers/layout/routernav/tools.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { NavRouterItemType, router_nav_list } from "../nav/tools";
-import { useState } from "react";
-export function useRouterList(): NavRouterItemType[] {
-  const [list, _] = useState<NavRouterItemType[]>(router_nav_list);
-  return list;
-}
diff --git a/src/routers/layout/tools.ts b/src/routers/layout/tools.ts
index 6a3dfb3..66bc376 100644
--- a/src/routers/layout/tools.ts
+++ b/src/routers/layout/tools.ts
@@ -5,7 +5,7 @@ export class Storage<T> {
   }
   private getStorage(Storagename: globalThis.Storage, defaultRes: T): T {
     if (!Storagename) {
-      return Storagename;
+      return defaultRes;
     }
     if (!Storagename.getItem(this.itemName)) {
       Storagename.setItem(this.itemName, JSON.stringify(defaultRes));
@@ -28,4 +28,7 @@ export class Storage<T> {
   setSessionStorage(targetRes: T): void {
     this.setStorage(sessionStorage, targetRes);
   }
+  clearLocalstorage(): void {
+    localStorage.removeItem(this.itemName);
+  }
 }
diff --git a/src/routers/photo/index.tsx b/src/routers/photo/index.tsx
index 8c32250..e3a679a 100644
--- a/src/routers/photo/index.tsx
+++ b/src/routers/photo/index.tsx
@@ -7,3 +7,7 @@ export default function PhotoPage() {
     </>
   );
 }
+//todo 替换掉nav，应该在每个路由下有单独的nav
+//todo 添加滚动加载-photo页面
+//todo 选好nav列表
+//todo photo图片进行收缩
diff --git a/src/routers/photo/item/index.tsx b/src/routers/photo/item/index.tsx
index 558adc9..82294cd 100644
--- a/src/routers/photo/item/index.tsx
+++ b/src/routers/photo/item/index.tsx
@@ -1,29 +1,44 @@
 import { PhotoRouterImageCardType } from "../phototype";
 import { useState } from "react";
 import ImgModals from "./modal";
-
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { Link } from "@mui/material";
+import style from "./photo.module.less";
+import { ImageBasic } from "@components/image";
+import { Omit } from "@utils/index";
 type CardType = {
   data: PhotoRouterImageCardType;
 };
 
 export default function PhotoCard(props: CardType) {
-  const { images } = props.data;
+  const { images, dynamic_id } = props.data;
   const [open, set] = useState(false),
     handlerChangeOpen = () => set((open) => !open);
   const modalPorps = { open, images, onClose: handlerChangeOpen };
   return (
-    <>
-      <div onClick={handlerChangeOpen}>
-        <img
-          {...images[0]}
-          style={{
-            maxWidth: "100%",
-            objectFit: "cover",
-            height: "auto",
+    <div className={style["card"]}>
+      <ImageBasic
+        url={images[0].src}
+        {...Omit(images[0], "src")}
+        className={style["show-img"]}
+        onClick={handlerChangeOpen}
+      />
+      <ImgModals {...modalPorps} />
+      <div className={style["jump"]}>
+        <Link
+          href={`https://t.bilibili.com/${dynamic_id}`}
+          target='_blank'
+          sx={{
+            color: "white",
+            display: "flex",
+            justifyContent: "flex-end",
+            paddingBottom: "5px",
+            paddingTop: "5px",
           }}
-        />
+        >
+          <ChevronRightIcon />
+        </Link>
       </div>
-      <ImgModals {...modalPorps} />
-    </>
+    </div>
   );
 }
diff --git a/src/routers/photo/item/modal.tsx b/src/routers/photo/item/modal.tsx
index d6cb71e..abc3f09 100644
--- a/src/routers/photo/item/modal.tsx
+++ b/src/routers/photo/item/modal.tsx
@@ -1,13 +1,6 @@
-import Modal from "@components/modal";
 import { basicImageType } from "../phototype";
-// Import Swiper React components
-import { Swiper, SwiperSlide } from "swiper/react";
-// import required modules
-import { Pagination, Navigation } from "swiper";
-// Import Swiper styles
-import "swiper/css";
-import "swiper/css/pagination";
-import style from "./photo.module.less";
+import { PhotoSlider } from "react-photo-view";
+import "react-photo-view/dist/react-photo-view.css";
 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 type ModalType = {
@@ -26,7 +19,6 @@ export default function ImgModals(props: ModalType) {
       onClose();
     };
     if (open) {
-      console.log("push");
       history.pushState(null, "", location.pathname);
       window.addEventListener("popstate", handler, {
         once: true,
@@ -38,40 +30,10 @@ export default function ImgModals(props: ModalType) {
     }
   }, [open]);
   return (
-    <Modal visible={open} isNoScroll={false} closeModal={onClose}>
-      <div className={style["box"]}>
-        <Swiper
-          pagination={{
-            dynamicBullets: true,
-          }}
-          modules={[Pagination, Navigation]}
-          loop={true}
-          slidesPerView={1}
-          navigation={true}
-        >
-          {images.map((item, index) => (
-            <SwiperSlide key={index} className={style["swiper-fix"]}>
-              <div className={style["imgwrapper"]}>
-                <img
-                  {...item}
-                  style={{
-                    maxWidth: "100%",
-                    width: "100%",
-
-                    height: "auto",
-                    objectFit: "cover",
-                  }}
-                />
-              </div>
-            </SwiperSlide>
-          ))}
-        </Swiper>
-      </div>
-    </Modal>
+    <PhotoSlider
+      images={images.map((item, index) => ({ src: item.src, key: index }))}
+      visible={open}
+      onClose={onClose}
+    />
   );
 }
-//todo 修改navigation的样式
-//todo 修改滚动条样式
-//todo 移动到外界过于灵敏
-//todo 添加关闭按钮
-//todo 根据url切换tag_lists
diff --git a/src/routers/photo/item/photo.module.less b/src/routers/photo/item/photo.module.less
index 4efa246..f1952e7 100644
--- a/src/routers/photo/item/photo.module.less
+++ b/src/routers/photo/item/photo.module.less
@@ -1,30 +1,19 @@
-.box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    max-width: 600px;
-    max-height: 100vh;
-    width: 100%;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+.card {
+    position: relative;
     border-radius: 4px;
-    border: 1px solid #fff;
-    padding: 5px;
-    box-sizing: border-box;
-    background-color: #fff;
-}
 
-.imgwrapper {
-    max-height: 80vh;
-    overflow-y: auto;
-    position: relative;
-    height: 100%;
-    display: flex;
-    align-items: center;
-}
+    .show-img {
+        max-width: 100%;
+        object-fit: cover;
+        height: auto;
+        width: 100%;
+        border-radius: 4px;
+    }
 
-.swiper-fix {
-    height: auto !important;
+    .jump {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
+    }
 }
\ No newline at end of file
diff --git a/src/routers/photo/masonry.tsx b/src/routers/photo/masonry.tsx
index 5aaa207..24c1072 100644
--- a/src/routers/photo/masonry.tsx
+++ b/src/routers/photo/masonry.tsx
@@ -7,6 +7,7 @@ import { changeLoading } from "@store/loading/index";
 import { fetchPhotoHandler } from "./tools";
 import { PhotoRouterImageCardType } from "./phototype";
 import PhotoCard from "./item";
+import { useScreenSize } from "@components/proview/screenSize";
 
 //todo props type change
 export default function Masonry(props: any) {
@@ -31,6 +32,7 @@ export default function Masonry(props: any) {
         return [
           ...lists,
           ...data.map((item) => ({
+            dynamic_id: item.dynamic_id,
             images: item.pictures.map((img) => ({
               src: img.img_src,
               height: img.img_height,
@@ -42,13 +44,16 @@ export default function Masonry(props: any) {
     };
     fetchHandler();
   }, [props]);
+  const { sm, md } = useScreenSize(),
+    minCount = sm ? { columnCount: 2 } : {};
   return (
     <>
       <Masonic_masonry
         items={lists}
         maxColumnCount={5}
-        columnGutter={10}
-        rowGutter={10}
+        {...minCount}
+        columnGutter={md ? 5 : 10}
+        rowGutter={md ? 5 : 10}
         columnWidth={200}
         render={PhotoCard}
       />
diff --git a/src/routers/photo/phototype.ts b/src/routers/photo/phototype.ts
index 1445cf2..e73b313 100644
--- a/src/routers/photo/phototype.ts
+++ b/src/routers/photo/phototype.ts
@@ -9,6 +9,7 @@ export type basicImageType = {
  */
 export type PhotoRouterImageCardType = {
   images: basicImageType[];
+  dynamic_id: number;
   observer?: boolean;
   callback?: (inView: boolean) => void;
 };
diff --git a/src/routers/video/index.tsx b/src/routers/video/index.tsx
index a543f38..1ddc83d 100644
--- a/src/routers/video/index.tsx
+++ b/src/routers/video/index.tsx
@@ -1,12 +1,12 @@
 import { useAppSelector } from "@store/hooks";
-import { selectActiveTags } from "@store/tags";
+import { selectVideoActiveTags } from "@store/tags";
 import VideoMasonry from "./masonry";
 import { VideoRouterMasonryType } from "./videotype";
 
 type ValueOf<T> = T[keyof T];
 export default function VideoPage() {
   //处理搜索条件
-  const activeTags = useAppSelector(selectActiveTags),
+  const activeTags = useAppSelector(selectVideoActiveTags),
     tname = activeTags.find((item) => item.queryType === "tname")
       ?.queryString as ValueOf<Pick<VideoRouterMasonryType, "tname">>,
     copyright = activeTags.find((item) => item.queryType === "copyright")
diff --git a/src/routers/video/item/index.tsx b/src/routers/video/item/index.tsx
index 30efc7b..add8b4b 100644
--- a/src/routers/video/item/index.tsx
+++ b/src/routers/video/item/index.tsx
@@ -1,4 +1,5 @@
 import { ImageBasic } from "@components/image";
+import { useScreenSize } from "@components/proview/screenSize";
 import { FC } from "react";
 import { Link } from "@mui/material";
 import { VideoRouterImageCardType } from "../videotype";
@@ -11,6 +12,7 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
   data,
 }) => {
   const { pic, bvid } = data;
+  const { md } = useScreenSize();
   return (
     <section className={styles["video-section"]}>
       <Link
@@ -20,7 +22,11 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
         color='inherit'
       >
         <ImageBasic
-          url={pic}
+          height={9}
+          width={16}
+          url={`${pic}${
+            md ? `@480w_270h_1c` : `@672w_378h_1c_!web-search-common-cover`
+          }`}
           {...Omit(
             data,
             "pic",
diff --git a/src/routers/video/item/item.module.less b/src/routers/video/item/item.module.less
index 504eb43..8522e1f 100644
--- a/src/routers/video/item/item.module.less
+++ b/src/routers/video/item/item.module.less
@@ -3,6 +3,10 @@
     display: flex;
     flex-flow: column nowrap;
 
+    img {
+        aspect-ratio: 16/9,
+    }
+
     .video-data {
         transition: opacity .3s linear;
         position: absolute;
diff --git a/src/routers/video/item/videoinfo.tsx b/src/routers/video/item/videoinfo.tsx
index e7b7bc7..3a51055 100644
--- a/src/routers/video/item/videoinfo.tsx
+++ b/src/routers/video/item/videoinfo.tsx
@@ -1,11 +1,10 @@
-import { Avatar, Link, styled } from "@mui/material";
-import { useScreenMatchSize } from "@utils/hooks/match";
+import { Link, styled } from "@mui/material";
 import getrealtiveTime from "@utils/time";
 import { FC } from "react";
 import { VideoRouterImageCardType } from "../videotype";
 import { UPIcon } from "./icon";
 import styles from "./item.module.less";
-import { useScreenSize } from "../../../components/proview/screenSize";
+import { useScreenSize } from "@components/proview/screenSize";
 export const VideoInfo: FC<
   Pick<VideoRouterImageCardType, "title" | "name" | "pubdate" | "bvid">
 > = (props) => {
diff --git a/src/store/loading/index.ts b/src/store/loading/index.ts
index f3c2856..e26d5c9 100644
--- a/src/store/loading/index.ts
+++ b/src/store/loading/index.ts
@@ -2,7 +2,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 import type { RootState } from "..";
 
-interface LoadingState {
+export interface LoadingState {
   /**
    * @description 视频接口是否正在获取
    */
diff --git a/src/store/tags/index.ts b/src/store/tags/index.ts
index 567581f..de6c058 100644
--- a/src/store/tags/index.ts
+++ b/src/store/tags/index.ts
@@ -5,47 +5,48 @@ import type { RootState } from "..";
 
 interface TagStates {
   /**
-   * @description 用户点击的tag栏
+   * @description video页面点击tags
    */
-  activeTags: NavQueryItemType[];
+  VideoActiveTags: NavQueryItemType[];
 }
 const initialState: TagStates = {
-  activeTags: [],
+  VideoActiveTags: [],
 };
 export const ActiveTagsSlice = createSlice({
-  name: "activeTags",
+  name: "VideoActiveTags",
   initialState,
   reducers: {
     /**
-     * @description 添加tag
+     * @description video页面添加tag
      */
-    handerAddTag: (state, action: PayloadAction<NavQueryItemType>) => {
-      //这里需要注意的是queryType有三种，只有q可以同存.
+    handerVideoAddTag: (state, action: PayloadAction<NavQueryItemType>) => {
+      //这里需要注意的是queryType多种，只有q可以同存.
       switch (action.payload.queryType) {
         case "q":
           break;
 
         default:
-          state.activeTags = state.activeTags.filter(
+          state.VideoActiveTags = state.VideoActiveTags.filter(
             (item) => item.queryType !== action.payload.queryType
           );
           break;
       }
-      state.activeTags = [...state.activeTags, action.payload];
+      state.VideoActiveTags = [...state.VideoActiveTags, action.payload];
     },
     /**
-     * @description 删除tag
+     * @description video页面删除tag
      */
-    handerDeleteTag: (state, action: PayloadAction<NavQueryItemType>) => {
-      state.activeTags = state.activeTags.filter(
+    handerVideoDeleteTag: (state, action: PayloadAction<NavQueryItemType>) => {
+      state.VideoActiveTags = state.VideoActiveTags.filter(
         (item) => item.id !== action.payload.id
       );
     },
   },
 });
 
-export const { handerAddTag, handerDeleteTag } = ActiveTagsSlice.actions;
+export const { handerVideoAddTag, handerVideoDeleteTag } =
+  ActiveTagsSlice.actions;
 
-export const selectActiveTags = (state: RootState) =>
-  state.ActiveTags.activeTags;
+export const selectVideoActiveTags = (state: RootState) =>
+  state.ActiveTags.VideoActiveTags;
 export default ActiveTagsSlice.reducer;
diff --git a/src/utils/fetch/index.ts b/src/utils/fetch/index.ts
index fa78f30..b3f1b87 100644
--- a/src/utils/fetch/index.ts
+++ b/src/utils/fetch/index.ts
@@ -1,4 +1,5 @@
 import axios from "axios";
+import JSONBigInt from "json-bigint";
 /**
  * 类型文件导入
  */
@@ -13,7 +14,16 @@ import { Omit } from "../index";
 
 export const BackEndAxios = axios.create({
   baseURL: Host_Url,
-  timeout: 2500,
+  timeout: 9000,
+  transformResponse: [
+    (data) => {
+      try {
+        return JSONBigInt.parse(data);
+      } catch (err) {
+        return data;
+      }
+    },
+  ],
 });
 /**
  * 后端接口配置
diff --git a/src/utils/router/index.tsx b/src/utils/router/index.tsx
new file mode 100644
index 0000000..dbc45d7
--- /dev/null
+++ b/src/utils/router/index.tsx
@@ -0,0 +1,11 @@
+import type { LoadingState } from "@store/loading";
+type RouterConfig = {
+  [router: string]: keyof LoadingState;
+};
+const RouterMap: RouterConfig = {
+  default: "videoIsLoading",
+  "/photo": "photoIsloading",
+  "/video": "videoIsLoading",
+};
+export const routerNameToLoading = (pathname: string) =>
+  RouterMap[pathname] || RouterMap["default"];
diff --git a/vite.config.ts b/vite.config.ts
index 31cd616..cb800cf 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,7 +8,7 @@ import viteCompression from "vite-plugin-compression";
 // polyfill
 import legacy from "@vitejs/plugin-legacy";
 // https://vitejs.dev/config/
-
+//@ts-ignore
 export default defineConfig(({ mode }) => {
   return {
     define: {
@@ -45,13 +45,9 @@ export default defineConfig(({ mode }) => {
             react: ["react", "react-dom"],
             "react-router": ["react-router-dom"],
             "react-redux": ["@reduxjs/toolkit", "react-redux"],
-            lib: [
-              "@mui/icons-material",
-              "@mui/lab",
-              "@mui/material",
-              "@emotion/react",
-              "@emotion/styled",
-            ],
+            axios: ["axios"],
+            lib: ["@mui/icons-material", "@mui/lab", "@mui/material"],
+            transform: ["json-bigint", "@emotion/react", "@emotion/styled"],
             "dnd-tool": [
               "@dnd-kit/core",
               "@dnd-kit/modifiers",