From fdc7af72272bad7a4d99179e8a633330c3626d67 Mon Sep 17 00:00:00 2001 From: likaifeng Date: Thu, 6 Jun 2024 15:02:33 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=BC=95=E5=AF=BC?= =?UTF-8?q?=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/webpack.base.js | 2 +- package.json | 1 + public/index.html | 1 + .../login/components/AccountForm/index.tsx | 10 +-- src/pages/login/index.tsx | 72 ++++++++++++++++++- 5 files changed, 78 insertions(+), 8 deletions(-) diff --git a/build/webpack.base.js b/build/webpack.base.js index b26c123..39523ea 100644 --- a/build/webpack.base.js +++ b/build/webpack.base.js @@ -65,7 +65,7 @@ module.exports = { // less-loader: 解析less文件代码,把less编译为css // less: less核心 test: cssRegex, - include: [path.resolve(__dirname, '../src')], + include: [path.resolve(__dirname, '../src'), path.resolve(__dirname, '../node_modules')], use: [ // 开发环境使用style-looader,打包模式抽离css 'style-loader', diff --git a/package.json b/package.json index 1d8aead..54618bf 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@emotion/css": "^11.10.5", "antd": "^5.5.1", "axios": "^1.3.4", + "driver.js": "^1.3.1", "eslint-plugin-react-hooks": "^4.6.0", "localforage": "^1.10.0", "lodash": "^4.17.21", diff --git a/public/index.html b/public/index.html index 9556101..e0422b1 100644 --- a/public/index.html +++ b/public/index.html @@ -14,6 +14,7 @@ overflow-x: hidden; } + diff --git a/src/pages/login/components/AccountForm/index.tsx b/src/pages/login/components/AccountForm/index.tsx index 70afb09..5178243 100644 --- a/src/pages/login/components/AccountForm/index.tsx +++ b/src/pages/login/components/AccountForm/index.tsx @@ -57,6 +57,7 @@ const AccountForm: React.FC = () => { setActiveType('')} onFocus={() => setActiveType('Username')} @@ -81,6 +82,7 @@ const AccountForm: React.FC = () => { setActiveType('')} @@ -105,8 +107,8 @@ const AccountForm: React.FC = () => { - - 记住密码 + + 记住密码 @@ -125,13 +127,13 @@ const AccountForm: React.FC = () => { }, ]} > - + 已阅读并同意 《程序猿阿峰用户协议》 - diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index 5c85c51..0039130 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -2,7 +2,9 @@ import { globalSystemTypeAtom } from '@/store/global' import { useEmotionCss } from '@ant-design/use-emotion-css' import { theme } from 'antd' import classNames from 'classnames' -import React from 'react' +import { driver } from 'driver.js' +import 'driver.js/dist/driver.css' +import React, { useLayoutEffect } from 'react' import { useRecoilValue } from 'recoil' import AccountForm from './components/AccountForm' import styles from './index.less' @@ -31,13 +33,77 @@ const Login: React.FC = () => { } }) + useLayoutEffect(() => { + const driverObj = driver({ + showProgress: true, + stagePadding: 5, + progressText: 'Step {{current}} of {{total}}', + showButtons: ['next', 'previous'], + steps: [ + { + element: '#leftLogo', + popover: { + title: '很高兴认识你！', + description: '来啦, 老弟！等你好久了！', + side: 'bottom', + }, + }, + { + element: '#logo', + popover: { + title: '欢迎 Star🌟', + description: '点击进入我的 GitHub 主页, 记得点个 🌟 哦', + side: 'bottom', + }, + }, + { + element: '#username', + popover: { + title: '用户名', + description: '默认用户名：admin', + side: 'bottom', + }, + }, + { + element: '#password', + popover: { + title: '密码', + description: '默认密码：admin123', + side: 'bottom', + }, + }, + { + element: '#agreement', + popover: { + title: '阅读协议', + description: '记得阅读协议哦', + side: 'bottom', + }, + }, + { + element: '#submit', + popover: { + title: '点我吧', + description: '点我就可以进入系统啦', + side: 'bottom', + }, + }, + ], + }) + driverObj.drive() + }, []) + return (