From 54d025282b5f8985accae4a02541f3cc52848337 Mon Sep 17 00:00:00 2001 From: chuan_wuhao <443547225@qq.com> Date: Wed, 23 Nov 2022 15:01:18 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E4=B8=8A=E7=99=BB=E9=99=86=E9=80=BB?= =?UTF-8?q?=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- locales/en-US.json | 9 ++ locales/zh-CN.json | 9 ++ src/components/RayGlobalProvider/index.tsx | 4 +- src/layout/SiderBar/hook.ts | 14 +++ src/layout/SiderBar/index.tsx | 31 +++++++ src/router/index.ts | 20 ++++- src/router/routes.ts | 5 ++ src/views/dashboard/index.tsx | 2 +- src/views/login/components/Register/index.tsx | 12 +++ src/views/login/components/Signin/index.tsx | 90 +++++++++++++++++++ src/views/login/index.scss | 23 +++++ src/views/login/index.tsx | 68 ++++++++++++++ 12 files changed, 283 insertions(+), 4 deletions(-) create mode 100644 src/layout/SiderBar/hook.ts create mode 100644 src/views/login/components/Register/index.tsx create mode 100644 src/views/login/components/Signin/index.tsx create mode 100644 src/views/login/index.scss create mode 100644 src/views/login/index.tsx diff --git a/locales/en-US.json b/locales/en-US.json index 85c76d9c..21cbc8e3 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -18,5 +18,14 @@ "Light": "Light", "PrimaryColorConfig": "Primary Color" } + }, + "LoginModule": { + "Register": "Register", + "Signin": "Signin", + "NamePlaceholder": "please enter user name", + "PasswordPlaceholder": "please enter password", + "Login": "Login", + "Name": "User Name", + "Password": "User Password" } } diff --git a/locales/zh-CN.json b/locales/zh-CN.json index b771b8ad..aacbb22f 100644 --- a/locales/zh-CN.json +++ b/locales/zh-CN.json @@ -18,5 +18,14 @@ "Light": "明亮", "PrimaryColorConfig": "主题色" } + }, + "LoginModule": { + "Register": "注册", + "Signin": "登陆", + "NamePlaceholder": "请输入用户名", + "PasswordPlaceholder": "请输入密码", + "Login": "登 陆", + "Name": "用户名", + "Password": "密码" } } diff --git a/src/components/RayGlobalProvider/index.tsx b/src/components/RayGlobalProvider/index.tsx index b243bd2f..0b87b6ff 100644 --- a/src/components/RayGlobalProvider/index.tsx +++ b/src/components/RayGlobalProvider/index.tsx @@ -24,9 +24,9 @@ const GlobalProvider = defineComponent({ const { message, notification, dialog, loadingBar } = createDiscreteApi( ['message', 'dialog', 'notification', 'loadingBar'], { - configProviderProps: computed(() => ({ + configProviderProps: { theme: modelThemeValue.value, - })), + }, }, ) diff --git a/src/layout/SiderBar/hook.ts b/src/layout/SiderBar/hook.ts new file mode 100644 index 00000000..013ff83f --- /dev/null +++ b/src/layout/SiderBar/hook.ts @@ -0,0 +1,14 @@ +export const useAvatarOptions = () => [ + { + key: 'person', + label: '个人信息', + }, + { + type: 'divider', + key: 'd1', + }, + { + key: 'logout', + label: '退出登陆', + }, +] diff --git a/src/layout/SiderBar/index.tsx b/src/layout/SiderBar/index.tsx index dec14aae..c7b0eb3b 100644 --- a/src/layout/SiderBar/index.tsx +++ b/src/layout/SiderBar/index.tsx @@ -4,6 +4,8 @@ import RayIcon from '@/components/RayIcon/index' import { useMenu, useSetting } from '@/store' import { useLanguageOptions } from '@/language/index' import SettingDrawer from './Components/SettingDrawer/index' +import { useAvatarOptions } from './hook' +import { removeCache } from '@/utils/cache' import type { IconEventMapOptions, IconEventMap } from './type' @@ -48,6 +50,35 @@ const SiderBar = defineComponent({ size: 18, tooltip: 'LayoutHeaderTooltipOptions.Setting', }, + { + name: 'ray', + size: 22, + tooltip: '', + dropdown: { + methodName: 'handleSelect', // 默认为 `handleSelect` + switch: true, + options: useAvatarOptions(), + handleSelect: (key: string | number) => { + if (key === 'logout') { + window.$dialog.warning({ + title: '提示', + content: '您确定要退出登录吗', + positiveText: '确定', + negativeText: '不确定', + onPositiveClick: () => { + window.$message.info('账号退出中...') + + removeCache('all-sessionStorage') + + setTimeout(() => window.location.reload(), 2 * 1000) + }, + }) + } else { + window.$message.info('这个人很懒, 没做这个功能~') + } + }, + }, + }, ] const iconEventMap: IconEventMapOptions = { reload: () => { diff --git a/src/router/index.ts b/src/router/index.ts index 9cce3b77..4a8968b5 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,6 +1,7 @@ import type { App } from 'vue' import { createRouter, createWebHashHistory } from 'vue-router' import { constantRoutes } from './routes' +import { getCache } from '@/utils/cache' export const router = createRouter({ history: createWebHashHistory(), @@ -37,5 +38,22 @@ export const setupRouterLoadingBar = () => { * 路由权限守卫 */ export const permissionRouter = () => { - // router.beforeEach() + router.beforeEach((to, from, next) => { + const token = getCache('token') + const route = getCache('menuKey') + + if (token !== 'no') { + if (to.path === '/' || from.path === '/login') { + next(route) + } else { + next() + } + } else { + if (to.path === '/' || from.path === '/login') { + next() + } else { + next('/') + } + } + }) } diff --git a/src/router/routes.ts b/src/router/routes.ts index cd08032b..fa63d235 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -2,6 +2,11 @@ import Layout from '@/layout/index' import childrenRoutes from './modules/index' export const constantRoutes = [ + { + path: '/', + name: 'login', + component: () => import('@/views/login/index'), + }, { path: '/', name: 'layout', diff --git a/src/views/dashboard/index.tsx b/src/views/dashboard/index.tsx index 788cfec5..7106020e 100644 --- a/src/views/dashboard/index.tsx +++ b/src/views/dashboard/index.tsx @@ -26,7 +26,7 @@ const Dashboard = defineComponent({ label: '从事搬砖时长', des: () => ( - 练习时长两年半 + 练习时长两年半的小白前端搬砖师 ), }, diff --git a/src/views/login/components/Register/index.tsx b/src/views/login/components/Register/index.tsx new file mode 100644 index 00000000..f1dbe9fc --- /dev/null +++ b/src/views/login/components/Register/index.tsx @@ -0,0 +1,12 @@ +import { NResult } from 'naive-ui' + +const Register = defineComponent({ + name: 'Register', + render() { + return ( + + ) + }, +}) + +export default Register diff --git a/src/views/login/components/Signin/index.tsx b/src/views/login/components/Signin/index.tsx new file mode 100644 index 00000000..c0c7e744 --- /dev/null +++ b/src/views/login/components/Signin/index.tsx @@ -0,0 +1,90 @@ +import { NForm, NFormItem, NInput, NButton } from 'naive-ui' +import { setCache } from '@/utils/cache' + +import type { FormInst } from 'naive-ui' + +const Signin = defineComponent({ + name: 'Signin', + setup() { + const { t } = useI18n() + + const useSigninForm = () => ({ + name: 'admin', + pwd: '123456', + }) + + const router = useRouter() + const signinForm = ref(useSigninForm()) + const loginFormRef = ref() + const loading = ref(false) + + const rules = { + name: { + required: true, + message: t('LoginModule.NamePlaceholder'), + trigger: ['blur', 'input'], + }, + pwd: { + required: true, + message: t('LoginModule.PasswordPlaceholder'), + trigger: ['blur', 'input'], + }, + } + + const handleLogin = () => { + loginFormRef.value?.validate((valid) => { + if (!valid) { + window.$message.info('登陆中...') + + loading.value = true + + setTimeout(() => { + router.push('/dashboard') + + setCache('token', 'tokenValue') + }, 2 * 1000) + } else { + window.$message.error('不可以这样哟, 不可以哟') + } + }) + } + + return { + signinForm, + loginFormRef, + handleLogin, + rules, + loading, + t, + } + }, + render() { + return ( + + + + + + + + + {this.t('LoginModule.Login')} + + + ) + }, +}) + +export default Signin diff --git a/src/views/login/index.scss b/src/views/login/index.scss new file mode 100644 index 00000000..0e85e726 --- /dev/null +++ b/src/views/login/index.scss @@ -0,0 +1,23 @@ +.login { + @include flexCenter; + flex-direction: column; + font-size: 36px; + + &.login--dark { + background-color: #101014; + color: #ffffff; + } + + & .login-title { + padding: 18px 0; + } + + & .login-icon { + border: none; + outline: none; + } + + & .n-card { + width: 360px; + } +} diff --git a/src/views/login/index.tsx b/src/views/login/index.tsx new file mode 100644 index 00000000..51ce0587 --- /dev/null +++ b/src/views/login/index.tsx @@ -0,0 +1,68 @@ +import './index.scss' +import { + NSpace, + NCard, + NTabs, + NTabPane, + NGradientText, + NDropdown, +} from 'naive-ui' +import Signin from './components/Signin/index' +import Register from './components/Register/index' +import { useSetting } from '@/store' +import RayIcon from '@/components/RayIcon' +import { useLanguageOptions } from '@/language/index' + +const Login = defineComponent({ + name: 'Login', + setup() { + const state = reactive({ + tabsValue: 'signin', + }) + const { t } = useI18n() + const { height: windowHeight } = useWindowSize() + const settingStore = useSetting() + const { themeValue } = storeToRefs(settingStore) + const { updateLocale } = settingStore + + return { + ...toRefs(state), + windowHeight, + themeValue, + updateLocale, + ray: t, + } + }, + render() { + return ( +
+ + + this.updateLocale(key)} + > + + + + + + + + + + + + + +
+ ) + }, +}) + +export default Login