补上登陆逻辑

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"
   }
 }

locales/zh-CN.json

@@ -18,5 +18,14 @@
       "Light": "明亮",
       "PrimaryColorConfig": "主题色"
     }
+  },
+  "LoginModule": {
+    "Register": "注册",
+    "Signin": "登陆",
+    "NamePlaceholder": "请输入用户名",
+    "PasswordPlaceholder": "请输入密码",
+    "Login": "登 陆",
+    "Name": "用户名",
+    "Password": "密码"
   }
 }

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,
-        })),
+        },
       },
     )
 

src/layout/SiderBar/hook.ts

@@ -0,0 +1,14 @@
+export const useAvatarOptions = () => [
+  {
+    key: 'person',
+    label: '个人信息',
+  },
+  {
+    type: 'divider',
+    key: 'd1',
+  },
+  {
+    key: 'logout',
+    label: '退出登陆',
+  },
+]

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: () => {

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('/')
+      }
+    }
+  })
 }

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',

src/views/dashboard/index.tsx

@@ -26,7 +26,7 @@ const Dashboard = defineComponent({
         label: '从事搬砖时长',
         des: () => (
           <NSpace>
-            <NTag type="success">练习时长两年半</NTag>
+            <NTag type="success">练习时长两年半的小白前端搬砖师</NTag>
           </NSpace>
         ),
       },

src/views/login/components/Register/index.tsx

@@ -0,0 +1,12 @@
+import { NResult } from 'naive-ui'
+
+const Register = defineComponent({
+  name: 'Register',
+  render() {
+    return (
+      <NResult status="info" title="提示" description="我实在是不想写了..." />
+    )
+  },
+})
+
+export default Register

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<FormInst>()
+    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 (
+      <NForm model={this.signinForm} ref="loginFormRef" rules={this.rules}>
+        <NFormItem label={this.t('LoginModule.Name')} path="name">
+          <NInput
+            v-model:value={this.signinForm.name}
+            placeholder={this.t('LoginModule.NamePlaceholder')}
+          />
+        </NFormItem>
+        <NFormItem label={this.t('LoginModule.Password')} path="pwd">
+          <NInput
+            v-model:value={this.signinForm.pwd}
+            type="password"
+            placeholder={this.t('LoginModule.PasswordPlaceholder')}
+          />
+        </NFormItem>
+        <NButton
+          style={['width: 100%', 'margin-to: 18px']}
+          type="primary"
+          onClick={this.handleLogin.bind(this)}
+          loading={this.loading}
+        >
+          {this.t('LoginModule.Login')}
+        </NButton>
+      </NForm>
+    )
+  },
+})
+
+export default Signin

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;
+  }
+}

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 (
+      <div
+        class={['login', this.themeValue ? 'login--dark' : '']}
+        style={[`height: ${this.windowHeight}px`]}
+      >
+        <NSpace>
+          <NGradientText class="login-title" type="info">
+            Ray Template
+          </NGradientText>
+          <NDropdown
+            options={useLanguageOptions()}
+            onSelect={(key) => this.updateLocale(key)}
+          >
+            <RayIcon customClassName="login-icon" name="language" size="18" />
+          </NDropdown>
+        </NSpace>
+        <NCard>
+          <NTabs v-model:value={this.tabsValue}>
+            <NTabPane tab={this.ray('LoginModule.Signin')} name="signin">
+              <Signin />
+            </NTabPane>
+            <NTabPane tab={this.ray('LoginModule.Register')} name="register">
+              <Register />
+            </NTabPane>
+          </NTabs>
+        </NCard>
+      </div>
+    )
+  },
+})
+
+export default Login