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>
 )