feat: update pkg

.vscode/settings.json

@@ -49,6 +49,8 @@
     "Meraid",
     "mockjs",
     "mpetazzoni",
+    "noopener",
+    "noreferrer",
     "portfinder",
     "preinstall",
     "purgecss",
@@ -68,5 +70,18 @@
     "xihu",
     "Zhong",
     "zhonghuamen"
-  ]
+  ],
+  "eslint.codeActionsOnSave.rules": null,
+  "eslint.run": "onType",
+  "eslint.options": {
+    "extensions": [
+      ".js",
+      ".vue",
+      ".jsx",
+      ".tsx"
+    ]
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }

package.json

@@ -263,6 +263,7 @@
     "react-icons": "^4.10.1",
     "react-loading-skeleton": "^3.3.1",
     "react-markdown": "^8.0.7",
+    "react-parallax-tilt": "^1.7.164",
     "react-player": "^2.12.0",
     "react-qr-code": "^2.0.11",
     "react-redux": "^8.1.1",
@@ -271,7 +272,6 @@
     "react-scroll-to-bottom": "^4.2.0",
     "react-sticky": "^6.0.3",
     "react-sticky-ts": "^1.0.7",
-    "react-tilt": "^1.0.2",
     "remark-gfm": "^3.0.1",
     "remove-markdown": "^0.5.0",
     "sanitize.css": "^13.0.0",

src/pages/layout/primaryNav/index.jsx

@@ -8,7 +8,7 @@ const PrimaryNav = () => {
   const redirectTo = (path) => {
     navigate(path)
   }
-  const goToSkylin = () => {
+  const goToWkylin = () => {
     window.open(`https://skyline.github.com/wkylin/${new Date().getFullYear() - 1}`, '_blank')
   }
 
@@ -18,7 +18,7 @@ const PrimaryNav = () => {
         <Button type="link" icon={<CodeOutlined />} onClick={() => redirectTo('dashboard')}>
           多路由设置
         </Button>
-        <Button type="link" icon={<TeamOutlined />} onClick={goToSkylin}>
+        <Button type="link" icon={<TeamOutlined />} onClick={goToWkylin}>
           Skyline for wkylin.w
         </Button>
       </Space>

src/pages/tilt/index.jsx

@@ -1,33 +1,17 @@
 import React from 'react'
 import FixTabPanel from '@stateless/FixTabPanel'
-import { Tilt } from 'react-tilt'
-import wkylinPng from '@assets/images/wkylin.png'
+import Tilt from 'react-parallax-tilt'
 
-const defaultOptions = {
-  reverse: false, // reverse the tilt direction
-  max: 35, // max tilt rotation (degrees)
-  perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
-  scale: 1.1, // 2 = 200%, 1.5 = 150%, etc..
-  speed: 1000, // Speed of the enter/exit transition
-  transition: true, // Set a transition on enter/exit.
-  axis: null, // What axis should be disabled. Can be X or Y.
-  reset: true, // If the tilt effect has to be reset on exit.
-  easing: 'cubic-bezier(.03,.98,.52,.99)', // Easing on enter/exit.
-}
+import wkylinPng from '@assets/images/wkylin.png'
 
 const ReactTilt = () => (
   <FixTabPanel>
     <h3>Welcome to react tilt!</h3>
-    <Tilt
-      options={defaultOptions}
-      className="bg-[#55467c] p-2 rounded-2xl w-full flex items-center justify-center"
-      style={{ height: 248, width: 248 }}
-    >
-      <div className="text-white">
-        <img src={wkylinPng} alt="wkylin.w" />
-        <h2>wkylin.w</h2>
-      </div>
-    </Tilt>
+    <section style={{ width: 200, height: 200 }}>
+      <Tilt tiltMaxAngleX={40} tiltMaxAngleY={40} perspective={1000} scale={1.1} glareEnable={true}>
+        <img src={wkylinPng} alt="wkylin.w" width="200" height="200" />
+      </Tilt>
+    </section>
   </FixTabPanel>
 )