feat(projects): add login module

soybeanjs · Oct 19, 2023 · 314e813 · 314e813
1 parent 486dec4
commit 314e813
Show file tree

Hide file tree

Showing 15 changed files with 348 additions and 12 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -46,10 +46,15 @@
     "*.svg": "html"
   },
   "files.eol": "\n",
+  "i18n-ally.displayLanguage": "zh-CN",
+  "i18n-ally.enabledParsers": ["ts"],
+  "i18n-ally.enabledFrameworks": ["vue"],
+  "i18n-ally.editor.preferEditor": true,
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.localesPaths": ["src/locales/lang"],
   "unocss.root": ["./"],
   "[html][css][less][scss][sass][markdown][yaml][yml][json][jsonc]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true
-  },
-  "i18n-ally.localesPaths": ["src/locales", "src/locales/lang"]
+  }
 }
diff --git a/packages/eslint-config/configs/vue.js b/packages/eslint-config/configs/vue.js
@@ -25,11 +25,6 @@ module.exports = {
     }
   ],
   rules: {
-    'vue/multi-word-component-names': [
-      'error',
-      {
-        ignores: ['index', 'App', '[id]']
-      }
-    ]
+    'vue/multi-word-component-names': 'off'
   }
 };
diff --git a/src/constants/app.ts b/src/constants/app.ts
@@ -1,5 +1,14 @@
+import { $t } from '@/locales';
 import { transformObjectToOption } from '@/utils/common';
 
+export const loginModuleLabels: Record<UnionKey.LoginModule, string> = {
+  'pwd-login': $t('page.login.pwdLogin.title'),
+  'code-login': $t('page.login.codeLogin.title'),
+  register: $t('page.login.register.title'),
+  'reset-pwd': $t('page.login.resetPwd.title'),
+  'bind-wechat': $t('page.login.bindWeChat.title')
+};
+
 export const themeLayoutModeLabels: Record<UnionKey.ThemeLayoutMode, string> = {
   vertical: '左侧菜单模式',
   horizontal: '顶部菜单模式',

diff --git a/src/hooks/common/router.ts b/src/hooks/common/router.ts
@@ -1,3 +1,4 @@
+import { toRefs } from 'vue';
 import { useRouter } from 'vue-router';
 import type { RouteLocationRaw } from 'vue-router';
 import type { RouteKey } from '@elegant-router/types';
@@ -62,11 +63,30 @@ export function useRouterPush(inSetup = true) {
     return routerPushByKey('login', options);
   }
 
+  /**
+   * toggle login module
+   * @param module
+   */
+  async function toggleLoginModule(module: UnionKey.LoginModule) {
+    const query = route.value.query as Record<string, string>;
+
+    return routerPushByKey('login', { query, params: { module } });
+  }
+
   return {
     route,
     routerPush,
     routerBack,
     routerPushByKey,
-    toLogin
+    toLogin,
+    toggleLoginModule
   };
 }
+
+export function useRouteQuery<T extends Record<string, string>>() {
+  const route = globalRouter.currentRoute;
+
+  const query = route.value.query as T;
+
+  return toRefs(query);
+}
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
@@ -20,6 +20,51 @@ const local: App.I18n.Schema = {
     userCenter: 'User Center',
     logout: 'Logout',
     logoutConfirm: 'Are you sure you want to log out?'
+  },
+  page: {
+    login: {
+      common: {
+        userNamePlaceholder: 'Please enter user name',
+        phonePlaceholder: 'Please enter phone number',
+        codePlaceholder: 'Please enter verification code',
+        passwordPlaceholder: 'Please enter password',
+        confirmPasswordPlaceholder: 'Please enter password again',
+        codeLogin: 'Verification code login',
+        confirm: 'Confirm',
+        back: 'Back',
+        validateSuccess: 'Verification passed',
+        loginSuccess: 'Login success',
+        welcomeBack: 'Welcome back, {userName}!'
+      },
+      pwdLogin: {
+        title: 'Password Login',
+        rememberMe: 'Remember me',
+        forgetPassword: 'Forget password?',
+        register: 'Register account',
+        otherAccountLogin: 'Other Account Login',
+        otherLoginMode: 'Other Login Mode',
+        superAdmin: 'Super Administrator',
+        admin: 'Administrator',
+        user: 'Ordinary User'
+      },
+      codeLogin: {
+        title: 'Verification Code Login',
+        getCode: 'Get verification code',
+        imageCodePlaceholder: 'Please enter image verification code'
+      },
+      register: {
+        title: 'Register Account',
+        agreement: 'I have read and agree to',
+        protocol: '《User Agreement》',
+        policy: '《Privacy Policy》'
+      },
+      resetPwd: {
+        title: 'Reset Password'
+      },
+      bindWeChat: {
+        title: 'Bind WeChat'
+      }
+    }
   }
 };
 

diff --git a/src/locales/lang/zh-CN.ts b/src/locales/lang/zh-CN.ts
@@ -20,6 +20,51 @@ const local: App.I18n.Schema = {
     userCenter: '个人中心',
     logout: '退出登录',
     logoutConfirm: '确认退出登录吗？'
+  },
+  page: {
+    login: {
+      common: {
+        userNamePlaceholder: '请输入用户名',
+        phonePlaceholder: '请输入手机号',
+        codePlaceholder: '请输入验证码',
+        passwordPlaceholder: '请输入密码',
+        confirmPasswordPlaceholder: '请再次输入密码',
+        codeLogin: '验证码登录',
+        confirm: '确定',
+        back: '返回',
+        validateSuccess: '验证成功',
+        loginSuccess: '登录成功',
+        welcomeBack: '欢迎回来，{userName}!'
+      },
+      pwdLogin: {
+        title: '密码登录',
+        rememberMe: '记住我',
+        forgetPassword: '忘记密码？',
+        register: '注册账号',
+        otherAccountLogin: '其他账号登录',
+        otherLoginMode: '其他登录方式',
+        superAdmin: '超级管理员',
+        admin: '管理员',
+        user: '普通用户'
+      },
+      codeLogin: {
+        title: '验证码登录',
+        getCode: '获取验证码',
+        imageCodePlaceholder: '请输入图片验证码'
+      },
+      register: {
+        title: '注册账号',
+        agreement: '我已经仔细阅读并接受',
+        protocol: '《用户协议》',
+        policy: '《隐私权政策》'
+      },
+      resetPwd: {
+        title: '重置密码'
+      },
+      bindWeChat: {
+        title: '绑定微信'
+      }
+    }
   }
 };
 

diff --git a/src/router/elegant/routes.ts b/src/router/elegant/routes.ts
@@ -69,6 +69,7 @@ export const autoRoutes: ElegantRoute[] = [
         name: 'login',
         path: '',
         component: 'view.login',
+        props: true,
         meta: {
           title: 'login'
         }

diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
@@ -95,6 +95,51 @@ declare namespace App {
         logout: string;
         logoutConfirm: string;
       };
+      page: {
+        login: {
+          common: {
+            userNamePlaceholder: string;
+            phonePlaceholder: string;
+            codePlaceholder: string;
+            passwordPlaceholder: string;
+            confirmPasswordPlaceholder: string;
+            codeLogin: string;
+            confirm: string;
+            back: string;
+            validateSuccess: string;
+            loginSuccess: string;
+            welcomeBack: string;
+          };
+          pwdLogin: {
+            title: string;
+            rememberMe: string;
+            forgetPassword: string;
+            register: string;
+            otherAccountLogin: string;
+            otherLoginMode: string;
+            superAdmin: string;
+            admin: string;
+            user: string;
+          };
+          codeLogin: {
+            title: string;
+            getCode: string;
+            imageCodePlaceholder: string;
+          };
+          register: {
+            title: string;
+            agreement: string;
+            protocol: string;
+            policy: string;
+          };
+          resetPwd: {
+            title: string;
+          };
+          bindWeChat: {
+            title: string;
+          };
+        };
+      };
     };
 
     type GetI18nKey<T extends Record<string, unknown>, K extends keyof T = keyof T> = K extends string

diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
@@ -8,12 +8,18 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AButton: typeof import('ant-design-vue/es')['Button']
+    ACard: typeof import('ant-design-vue/es')['Card']
+    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    AForm: typeof import('ant-design-vue/es')['Form']
+    AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AInput: typeof import('ant-design-vue/es')['Input']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AppLoading: typeof import('./../components/common/app-loading.vue')['default']
+    ASpace: typeof import('ant-design-vue/es')['Space']
     ColorSchemaSwitch: typeof import('./../components/common/color-schema-switch.vue')['default']
     DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
     ExceptionBase: typeof import('./../components/common/exception-base.vue')['default']

diff --git a/src/views/_builtin/login/components/bind-wechat.vue b/src/views/_builtin/login/components/bind-wechat.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'BindWechat'
+});
+</script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/_builtin/login/components/code-login.vue b/src/views/_builtin/login/components/code-login.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import { useRouterPush } from '@/hooks/common/router';
+
+defineOptions({
+  name: 'CodeLogin'
+});
+
+const { toggleLoginModule } = useRouterPush();
+</script>
+
+<template>
+  <AForm>
+    <AFormItem>
+      <AInput size="large" :placeholder="$t('page.login.common.phonePlaceholder')" />
+    </AFormItem>
+    <AFormItem>
+      <AInput size="large" :placeholder="$t('page.login.common.codePlaceholder')" />
+    </AFormItem>
+    <AButton block size="large" shape="round" @click="toggleLoginModule('pwd-login')">
+      {{ $t('page.login.common.back') }}
+    </AButton>
+  </AForm>
+</template>
+
+<style scoped></style>
diff --git a/src/views/_builtin/login/components/pwd-login.vue b/src/views/_builtin/login/components/pwd-login.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import { loginModuleLabels } from '@/constants/app';
+import { useRouterPush } from '@/hooks/common/router';
+
+defineOptions({
+  name: 'PwdLogin'
+});
+
+const { toggleLoginModule } = useRouterPush();
+</script>
+
+<template>
+  <AForm>
+    <AFormItem>
+      <AInput size="large" :placeholder="$t('page.login.common.userNamePlaceholder')" />
+    </AFormItem>
+    <AFormItem>
+      <AInput size="large" :placeholder="$t('page.login.common.passwordPlaceholder')" />
+    </AFormItem>
+    <ASpace direction="vertical" size="large" class="w-full">
+      <div class="flex-y-center justify-between">
+        <ACheckbox>{{ $t('page.login.pwdLogin.rememberMe') }}</ACheckbox>
+        <AButton type="link">{{ $t('page.login.pwdLogin.forgetPassword') }}</AButton>
+      </div>
+      <AButton type="primary" block size="large" shape="round">{{ $t('common.confirm') }}</AButton>
+      <div class="flex-y-center justify-between">
+        <AButton class="flex-1" block @click="toggleLoginModule('code-login')">
+          {{ loginModuleLabels['code-login'] }}
+        </AButton>
+        <div class="w-12px"></div>
+        <AButton class="flex-1" block @click="toggleLoginModule('register')">
+          {{ loginModuleLabels.register }}
+        </AButton>
+      </div>
+    </ASpace>
+  </AForm>
+</template>
+
+<style scoped></style>
diff --git a/src/views/_builtin/login/components/register.vue b/src/views/_builtin/login/components/register.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import { useRouterPush } from '@/hooks/common/router';
+
+defineOptions({
+  name: 'CodeLogin'
+});
+
+const { toggleLoginModule } = useRouterPush();
+</script>
+
+<template>
+  <AForm>
+    <AFormItem>
+      <AInput size="large" :placeholder="$t('page.login.common.phonePlaceholder')" />
+    </AFormItem>
+    <AFormItem>
+      <AInput size="large" :placeholder="$t('page.login.common.codePlaceholder')" />
+    </AFormItem>
+    <AButton block size="large" shape="round" @click="toggleLoginModule('pwd-login')">
+      {{ $t('page.login.common.back') }}
+    </AButton>
+  </AForm>
+</template>
+
+<style scoped></style>
diff --git a/src/views/_builtin/login/components/reset-pwd.vue b/src/views/_builtin/login/components/reset-pwd.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'ResetPwd'
+});
+</script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>