feat: add login、recover、signup page

pumelotea · Mar 16, 2022 · d290859 · d290859
1 parent de54bad
commit d290859
Show file tree

Hide file tree

Showing 5 changed files with 241 additions and 14 deletions.
diff --git a/src/components/HbAdminHead.vue b/src/components/HbAdminHead.vue
@@ -5,22 +5,25 @@ import {ref, h, onMounted, computed} from "vue"
 import {isDarkTheme} from "../global/config";
 import framework from "../global/framework";
 import { CubeOutline } from "@vicons/ionicons5"
+import {useRouter} from "vue-router";
+
+const router = useRouter()
 
 function renderCustomHeader() {
   return h("div", {
     style: "display: flex; align-items: center; padding: 8px 12px;"
-  }, [
-    h(NAvatar, {
-      round: true,
-      style: "margin-right: 12px;",
-      src: "https://07akioni.oss-cn-beijing.aliyuncs.com/demo1.JPG"
-    }),
-    h("div", null, [
-      h("div", null, [h(NText, { depth: 2 }, { default: () => "打工仔" })]),
-      h("div", { style: "font-size: 12px;" }, [
-        h(NText, { depth: 3 }, { default: () => "毫无疑问，你是办公室里最亮的星" })
+    }, [
+      h(NAvatar, {
+        round: true,
+        style: "margin-right: 12px;",
+        src: "https://07akioni.oss-cn-beijing.aliyuncs.com/demo1.JPG"
+      }),
+      h("div", null, [
+        h("div", null, [h(NText, { depth: 2 }, { default: () => "打工仔" })]),
+        h("div", { style: "font-size: 12px;" }, [
+          h(NText, { depth: 3 }, { default: () => "毫无疑问，你是办公室里最亮的星" })
+        ])
       ])
-    ])
   ]);
 }
 
@@ -47,10 +50,25 @@ const options = [
   {
     label: "加入群 17 个",
     key: "stmt3"
+  },
+  {
+    type: "render",
+    key: "bottom",
+    render: ()=>{
+      return h(NDivider,{style:'margin:0'})
+    }
+  },
+  {
+    label: "退出登录",
+    key: "logout"
   }
 ]
 function handleSelect(key) {
   message.info(String(key))
+  switch (key){
+    case 'logout':
+      router.push('/login')
+  }
 }
 
 
@@ -70,7 +88,6 @@ const breadcrumb= computed(()=>{
     <div class="head-left-area head-item-center">
       <n-breadcrumb>
         <n-breadcrumb-item v-for="e in breadcrumb" :key="e.menuId">
-
           <n-icon>
             <i :class="e.icon" v-if="e.icon"></i>
             <cube-outline v-else/>
@@ -114,7 +131,6 @@ const breadcrumb= computed(()=>{
       <n-icon size="25" color="#CFCFCF" :component="Notifications" />
       <n-badge value="99+"></n-badge>
       <n-divider vertical/>
-
       <n-dropdown trigger="hover" :options="options" @select="handleSelect">
         <n-avatar round bordered src="https://07akioni.oss-cn-beijing.aliyuncs.com/demo1.JPG"></n-avatar>
       </n-dropdown>

diff --git a/src/global/router/config.js b/src/global/router/config.js
@@ -35,7 +35,23 @@ const beforeInterceptor = createDefaultRouterInterceptor({
   }
 })
 
-const routes = []
+const routes = [
+  {
+    name: 'login',
+    path: '/login',
+    component: () => import('/src/views/login/index.vue')
+  },
+  {
+    name: 'signup',
+    path: '/signup',
+    component: () => import('/src/views/signup/index.vue')
+  },
+  {
+    name: 'recover',
+    path: '/recover',
+    component: () => import('/src/views/recover/index.vue')
+  }
+]
 
 export const beforeEachHandler = (to, from, next) => {
   // 使用拦截器

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
@@ -0,0 +1,67 @@
+<script setup>
+import {theme} from "../../global/config";
+import {
+  NConfigProvider,
+  NCard,NSpace,NInput,NForm,NFormItem, zhCN,
+  dateZhCN,NLayout,NButton,NIcon
+} from 'naive-ui'
+import {
+  LockOpenOutline,Person
+} from "@vicons/ionicons5"
+</script>
+<template>
+  <n-config-provider :theme="theme" :locale="zhCN" :date-locale="dateZhCN">
+    <n-layout class="hb-admin-login" content-style="width:100%">
+      <n-space vertical justify="center" align="center" style="height: 100%;width: 100%">
+        <n-card title="登录" hoverable class="hb-card">
+          <n-form class="hb-form">
+            <n-form-item label="账号">
+              <n-input size="large">
+                <template #prefix>
+                  <n-icon :component="Person" />
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item label="密码">
+              <n-input type="password" size="large">
+                <template #prefix>
+                  <n-icon :component="LockOpenOutline" />
+                </template>
+              </n-input>
+            </n-form-item>
+          </n-form>
+          <template #action>
+            <n-button size="large" type="success" block>
+              登录
+            </n-button>
+            <n-space justify="center" style="margin-top: 30px">
+              <n-button type="info" tag="a" text>忘记密码？</n-button>
+            </n-space>
+            <n-space justify="center">
+              尚未用有账户?<n-button type="info" tag="a" text>注册</n-button>
+            </n-space>
+          </template>
+        </n-card>
+      </n-space>
+    </n-layout>
+  </n-config-provider>
+</template>
+
+
+<style scoped>
+.hb-admin-login{
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hb-card{
+  box-shadow: var(--n-box-shadow);
+}
+
+.hb-form{
+  width: 340px;
+}
+</style>
diff --git a/src/views/recover/index.vue b/src/views/recover/index.vue
@@ -0,0 +1,54 @@
+<script setup>
+import {theme} from "../../global/config";
+import {
+  NConfigProvider,
+  NCard,NSpace,NInput,NForm,NFormItem, zhCN,
+  dateZhCN,NLayout,NButton,NIcon
+} from 'naive-ui'
+import {
+  LockOpenOutline,Person,MailOutline
+} from "@vicons/ionicons5"
+</script>
+<template>
+  <n-config-provider :theme="theme" :locale="zhCN" :date-locale="dateZhCN">
+    <n-layout class="hb-admin-login" content-style="width:100%">
+      <n-space vertical justify="center" align="center" style="height: 100%;width: 100%">
+        <n-card title="通过邮箱地址重置密码" hoverable class="hb-card">
+          <n-form>
+            <n-form-item label="电子邮箱">
+              <n-input size="large">
+                <template #prefix>
+                  <n-icon :component="MailOutline" />
+                </template>
+              </n-input>
+            </n-form-item>
+          </n-form>
+          <template #action>
+            <n-button size="large" type="success" block>
+              发送验证邮件
+            </n-button>
+            <n-space justify="center" style="margin-top: 30px">
+              我们会向您注册的邮箱发送一封验证邮件，请通过邮件中的链接完成剩余操作。
+            </n-space>
+          </template>
+        </n-card>
+      </n-space>
+    </n-layout>
+  </n-config-provider>
+</template>
+
+
+<style scoped>
+.hb-admin-login{
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hb-card{
+  box-shadow: var(--n-box-shadow);
+  width: 400px;
+}
+</style>
diff --git a/src/views/signup/index.vue b/src/views/signup/index.vue
@@ -0,0 +1,74 @@
+<script setup>
+import {theme} from "../../global/config";
+import {
+  NConfigProvider,
+  NCard,NSpace,NInput,NForm,NFormItem, zhCN,
+  dateZhCN,NLayout,NButton,NIcon
+} from 'naive-ui'
+import {
+  LockOpenOutline,Person,MailOutline
+} from "@vicons/ionicons5"
+</script>
+<template>
+  <n-config-provider :theme="theme" :locale="zhCN" :date-locale="dateZhCN">
+    <n-layout class="hb-admin-login" content-style="width:100%">
+      <n-space vertical justify="center" align="center" style="height: 100%;width: 100%">
+        <n-card title="使用邮箱地址注册" hoverable class="hb-card">
+          <n-form class="hb-form">
+            <n-form-item label="电子邮箱">
+              <n-input size="large">
+                <template #prefix>
+                  <n-icon :component="MailOutline" />
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item label="账号">
+              <n-input size="large">
+                <template #prefix>
+                  <n-icon :component="Person" />
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item label="密码">
+              <n-input type="password" size="large">
+                <template #prefix>
+                  <n-icon :component="LockOpenOutline" />
+                </template>
+              </n-input>
+            </n-form-item>
+          </n-form>
+          <template #action>
+            <n-button size="large" type="success" block>
+              注册
+            </n-button>
+            <n-space justify="center" style="margin-top: 30px">
+              注册即表示您同意我们的<n-button type="info" tag="a" text>服务条款与隐私政策</n-button>
+            </n-space>
+            <n-space justify="center">
+              已经拥有账户？?<n-button type="info" tag="a" text>登录</n-button>
+            </n-space>
+          </template>
+        </n-card>
+      </n-space>
+    </n-layout>
+  </n-config-provider>
+</template>
+
+
+<style scoped>
+.hb-admin-login{
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hb-card{
+  box-shadow: var(--n-box-shadow);
+}
+
+.hb-form{
+  width: 340px;
+}
+</style>