feat(projects): 迁移登录完成

2025-09-24 07:49:47 +08:00 · 2022-01-05 01:35:32 +08:00
parent f5a36a05cb
commit b93b80cb4b
54 changed files with 1679 additions and 260 deletions
--- a/src/views/system/login/components/BindWechat/index.vue
+++ b/src/views/system/login/components/BindWechat/index.vue
@ -0,0 +1,61 @@
+<template>
+  <n-form ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
+    <n-form-item path="phone">
+      <n-input v-model:value="model.phone" placeholder="手机号码" />
+    </n-form-item>
+    <n-form-item path="code">
+      <div class="flex-y-center w-full">
+        <n-input v-model:value="model.code" placeholder="验证码" />
+        <div class="w-18px"></div>
+        <n-button size="large" :disabled="isCounting" :loading="smsLoading" @click="handleSmsCode">
+          {{ label }}
+        </n-button>
+      </div>
+    </n-form-item>
+    <n-space :vertical="true" size="large">
+      <n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">确定</n-button>
+      <n-button size="large" :block="true" :round="true" @click="toLoginModule('pwd-login')">返回</n-button>
+    </n-space>
+  </n-form>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { NForm, NFormItem, NInput, NSpace, NButton } from 'naive-ui';
+import type { FormInst } from 'naive-ui';
+import { useRouterPush } from '@/composables';
+import { useSmsCode } from '@/hooks';
+import { formRules } from '@/utils';
+
+const { toLoginModule } = useRouterPush();
+const { label, isCounting, loading: smsLoading, getSmsCode } = useSmsCode();
+
+const formRef = ref<(HTMLElement & FormInst) | null>(null);
+const model = reactive({
+  phone: '',
+  code: '',
+  imgCode: ''
+});
+const rules = {
+  phone: formRules.phone,
+  code: formRules.code
+};
+
+function handleSmsCode() {
+  getSmsCode(model.phone);
+}
+
+function handleSubmit(e: MouseEvent) {
+  if (!formRef.value) return;
+  e.preventDefault();
+
+  formRef.value.validate(errors => {
+    if (!errors) {
+      window.$message?.success('验证成功');
+    } else {
+      window.$message?.error('验证失败');
+    }
+  });
+}
+</script>
+<style scoped></style>
--- a/src/views/system/login/components/CodeLogin/index.vue
+++ b/src/views/system/login/components/CodeLogin/index.vue
@ -0,0 +1,81 @@
+<template>
+  <n-form ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
+    <n-form-item path="phone">
+      <n-input v-model:value="model.phone" placeholder="手机号码" />
+    </n-form-item>
+    <n-form-item path="code">
+      <div class="flex-y-center w-full">
+        <n-input v-model:value="model.code" placeholder="验证码" />
+        <div class="w-18px"></div>
+        <n-button size="large" :disabled="isCounting" :loading="smsLoading" @click="handleSmsCode">
+          {{ label }}
+        </n-button>
+      </div>
+    </n-form-item>
+    <n-form-item path="imgCode">
+      <n-input v-model:value="model.imgCode" placeholder="验证码,点击图片刷新" />
+      <div class="pl-8px">
+        <image-verify v-model:code="imgCode" />
+      </div>
+    </n-form-item>
+    <n-space :vertical="true" size="large">
+      <n-button
+        type="primary"
+        size="large"
+        :block="true"
+        :round="true"
+        :loading="auth.loginLoding"
+        @click="handleSubmit"
+      >
+        确定
+      </n-button>
+      <n-button size="large" :block="true" :round="true" @click="toLoginModule('pwd-login')">返回</n-button>
+    </n-space>
+  </n-form>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { NForm, NFormItem, NInput, NSpace, NButton } from 'naive-ui';
+import type { FormInst } from 'naive-ui';
+import { ImageVerify } from '@/components';
+import { useAuthStore } from '@/store';
+import { useRouterPush } from '@/composables';
+import { useSmsCode } from '@/hooks';
+import { formRules, getImgCodeRule } from '@/utils';
+
+const auth = useAuthStore();
+const { login } = useAuthStore();
+const { toLoginModule } = useRouterPush();
+const { label, isCounting, loading: smsLoading, getSmsCode } = useSmsCode();
+
+const formRef = ref<(HTMLElement & FormInst) | null>(null);
+const model = reactive({
+  phone: '',
+  code: '',
+  imgCode: ''
+});
+const imgCode = ref('');
+const rules = {
+  phone: formRules.phone,
+  code: formRules.code,
+  imgCode: getImgCodeRule(imgCode)
+};
+
+function handleSmsCode() {
+  getSmsCode(model.phone);
+}
+
+function handleSubmit(e: MouseEvent) {
+  if (!formRef.value) return;
+  e.preventDefault();
+
+  formRef.value.validate(errors => {
+    if (!errors) {
+      const { phone, code } = model;
+      login(phone, code, 'sms');
+    }
+  });
+}
+</script>
+<style scoped></style>
--- a/src/views/system/login/components/LoginBg/index.vue
+++ b/src/views/system/login/components/LoginBg/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="absolute-lt wh-full overflow-hidden">
+  <div class="absolute-lt z-1 wh-full overflow-hidden">
    <div class="absolute -right-300px -top-900px">
      <corner-top :start-color="lightColor" :end-color="darkColor" />
    </div>
--- a/src/views/system/login/components/PwdLogin/components/OtherLogin.vue
+++ b/src/views/system/login/components/PwdLogin/components/OtherLogin.vue
@ -0,0 +1,15 @@
+<template>
+  <n-space :vertical="true">
+    <n-divider class="!mb-0 text-14px text-[#666]">其他登录方式</n-divider>
+    <div class="flex-center">
+      <n-button :text="true">
+        <icon-mdi-wechat class="text-22px text-[#888] hover:text-[#52BF5E]" />
+      </n-button>
+    </div>
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+import { NSpace, NDivider, NButton } from 'naive-ui';
+</script>
+<style scoped></style>
--- a/src/views/system/login/components/PwdLogin/components/index.ts
+++ b/src/views/system/login/components/PwdLogin/components/index.ts
@ -0,0 +1,3 @@
+import OtherLogin from './OtherLogin.vue';
+
+export { OtherLogin };
--- a/src/views/system/login/components/PwdLogin/index.vue
+++ b/src/views/system/login/components/PwdLogin/index.vue
@ -0,0 +1,75 @@
+<template>
+  <n-form ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
+    <n-form-item path="phone">
+      <n-input v-model:value="model.phone" placeholder="请输入手机号码" />
+    </n-form-item>
+    <n-form-item path="pwd">
+      <n-input v-model:value="model.pwd" type="password" show-password-on="click" placeholder="请输入密码" />
+    </n-form-item>
+    <n-space :vertical="true" :size="24">
+      <div class="flex-y-center justify-between">
+        <n-checkbox v-model:checked="rememberMe">记住我</n-checkbox>
+        <n-button :text="true">忘记密码？</n-button>
+      </div>
+      <n-button
+        type="primary"
+        size="large"
+        :block="true"
+        :round="true"
+        :loading="auth.loginLoding"
+        @click="handleSubmit"
+      >
+        确定
+      </n-button>
+      <div class="flex-y-center justify-between">
+        <n-button class="flex-1" :block="true" @click="toLoginModule('code-login')">
+          {{ EnumLoginModule['code-login'] }}
+        </n-button>
+        <div class="w-12px"></div>
+        <n-button class="flex-1" :block="true" @click="toLoginModule('register')">
+          {{ EnumLoginModule.register }}
+        </n-button>
+      </div>
+    </n-space>
+    <other-login />
+  </n-form>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { NForm, NFormItem, NInput, NSpace, NCheckbox, NButton } from 'naive-ui';
+import type { FormInst, FormRules } from 'naive-ui';
+import { EnumLoginModule } from '@/enum';
+import { useAuthStore } from '@/store';
+import { useRouterPush } from '@/composables';
+import { formRules } from '@/utils';
+import { OtherLogin } from './components';
+
+const auth = useAuthStore();
+const { login } = useAuthStore();
+const { toLoginModule } = useRouterPush();
+
+const formRef = ref<(HTMLElement & FormInst) | null>(null);
+const model = reactive({
+  phone: '',
+  pwd: ''
+});
+const rules: FormRules = {
+  phone: formRules.phone,
+  pwd: formRules.pwd
+};
+const rememberMe = ref(false);
+
+function handleSubmit(e: MouseEvent) {
+  if (!formRef.value) return;
+  e.preventDefault();
+
+  formRef.value.validate(errors => {
+    if (!errors) {
+      const { phone, pwd } = model;
+      login(phone, pwd, 'pwd');
+    }
+  });
+}
+</script>
+<style scoped></style>
--- a/src/views/system/login/components/Register/index.vue
+++ b/src/views/system/login/components/Register/index.vue
@ -0,0 +1,75 @@
+<template>
+  <n-form ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
+    <n-form-item path="phone">
+      <n-input v-model:value="model.phone" placeholder="手机号码" />
+    </n-form-item>
+    <n-form-item path="code">
+      <div class="flex-y-center w-full">
+        <n-input v-model:value="model.code" placeholder="验证码" />
+        <div class="w-18px"></div>
+        <n-button size="large" :disabled="isCounting" :loading="smsLoading" @click="handleSmsCode">
+          {{ label }}
+        </n-button>
+      </div>
+    </n-form-item>
+    <n-form-item path="pwd">
+      <n-input v-model:value="model.pwd" placeholder="密码" />
+    </n-form-item>
+    <n-form-item path="confirmPwd">
+      <n-input v-model:value="model.confirmPwd" placeholder="确认密码" />
+    </n-form-item>
+    <n-space :vertical="true" size="large">
+      <login-agreement v-model:value="agreement" />
+      <n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">确定</n-button>
+      <n-button size="large" :block="true" :round="true" @click="toLoginModule('pwd-login')">返回</n-button>
+    </n-space>
+  </n-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, toRefs } from 'vue';
+import { NForm, NFormItem, NInput, NSpace, NButton } from 'naive-ui';
+import type { FormInst, FormRules } from 'naive-ui';
+import { LoginAgreement } from '@/components';
+import { useRouterPush } from '@/composables';
+import { useSmsCode } from '@/hooks';
+import { formRules, getConfirmPwdRule } from '@/utils';
+
+const { toLoginModule } = useRouterPush();
+const { label, isCounting, loading: smsLoading, start } = useSmsCode();
+
+const formRef = ref<(HTMLElement & FormInst) | null>(null);
+const model = reactive({
+  phone: '',
+  code: '',
+  pwd: '',
+  confirmPwd: ''
+});
+const rules: FormRules = {
+  phone: formRules.phone,
+  code: formRules.code,
+  pwd: formRules.pwd,
+  confirmPwd: getConfirmPwdRule(toRefs(model).pwd)
+};
+
+const agreement = ref(false);
+
+function handleSmsCode() {
+  start();
+}
+
+function handleSubmit(e: MouseEvent) {
+  if (!formRef.value) return;
+  e.preventDefault();
+
+  formRef.value.validate(errors => {
+    if (!errors) {
+      if (!agreement.value) return;
+      window.$message?.success('验证成功');
+    } else {
+      window.$message?.error('验证失败');
+    }
+  });
+}
+</script>
+<style scoped></style>
--- a/src/views/system/login/components/ResetPwd/index.vue
+++ b/src/views/system/login/components/ResetPwd/index.vue
@ -0,0 +1,71 @@
+<template>
+  <n-form ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
+    <n-form-item path="phone">
+      <n-input v-model:value="model.phone" placeholder="手机号码" />
+    </n-form-item>
+    <n-form-item path="code">
+      <div class="flex-y-center w-full">
+        <n-input v-model:value="model.code" placeholder="验证码" />
+        <div class="w-18px"></div>
+        <n-button size="large" :disabled="isCounting" :loading="smsLoading" @click="handleSmsCode">
+          {{ label }}
+        </n-button>
+      </div>
+    </n-form-item>
+    <n-form-item path="pwd">
+      <n-input v-model:value="model.pwd" placeholder="密码" />
+    </n-form-item>
+    <n-form-item path="confirmPwd">
+      <n-input v-model:value="model.confirmPwd" placeholder="确认密码" />
+    </n-form-item>
+    <n-space :vertical="true" size="large">
+      <n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">确定</n-button>
+      <n-button size="large" :block="true" :round="true" @click="toLoginModule('pwd-login')">返回</n-button>
+    </n-space>
+  </n-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, toRefs } from 'vue';
+import { NForm, NFormItem, NInput, NSpace, NButton, useMessage } from 'naive-ui';
+import type { FormInst, FormRules } from 'naive-ui';
+import { useRouterPush } from '@/composables';
+import { useSmsCode } from '@/hooks';
+import { formRules, getConfirmPwdRule } from '@/utils';
+
+const message = useMessage();
+const { toLoginModule } = useRouterPush();
+const { label, isCounting, loading: smsLoading, start } = useSmsCode();
+
+const formRef = ref<(HTMLElement & FormInst) | null>(null);
+const model = reactive({
+  phone: '',
+  code: '',
+  pwd: '',
+  confirmPwd: ''
+});
+const rules: FormRules = {
+  phone: formRules.phone,
+  code: formRules.code,
+  pwd: formRules.pwd,
+  confirmPwd: getConfirmPwdRule(toRefs(model).pwd)
+};
+
+function handleSmsCode() {
+  start();
+}
+
+function handleSubmit(e: MouseEvent) {
+  if (!formRef.value) return;
+  e.preventDefault();
+
+  formRef.value.validate(errors => {
+    if (!errors) {
+      message.success('验证成功');
+    } else {
+      message.error('验证失败');
+    }
+  });
+}
+</script>
+<style scoped></style>
--- a/src/views/system/login/components/index.ts
+++ b/src/views/system/login/components/index.ts
@ -1,3 +1,8 @@
 import LoginBg from './LoginBg/index.vue';
+import PwdLogin from './PwdLogin/index.vue';
+import CodeLogin from './CodeLogin/index.vue';
+import Register from './Register/index.vue';
+import ResetPwd from './ResetPwd/index.vue';
+import BindWechat from './BindWechat/index.vue';

-export { LoginBg };
+export { LoginBg, PwdLogin, CodeLogin, Register, ResetPwd, BindWechat };
--- a/src/views/system/login/index.vue
+++ b/src/views/system/login/index.vue
@ -1,6 +1,11 @@
 <template>
  <div class="relative flex-center wh-full" :style="{ backgroundColor: bgColor }">
-    <n-card :bordered="false" size="large" class="z-20 !w-auto rounded-20px shadow-sm">
+    <dark-mode-switch
+      :dark="theme.darkMode"
+      class="absolute left-48px top-24px z-3 text-20px"
+      @update:dark="setDarkMode"
+    />
+    <n-card :bordered="false" size="large" class="z-4 !w-auto rounded-20px shadow-sm">
      <div class="w-360px">
        <header class="flex-y-center justify-between">
          <div class="w-70px h-70px rounded-35px overflow-hidden">
@ -9,30 +14,70 @@
          <n-gradient-text type="primary" :size="28">{{ title }}</n-gradient-text>
        </header>
        <main class="pt-24px">
-          <h3 class="text-18px text-primary font-medium">登录</h3>
+          <h3 class="text-18px text-primary font-medium">{{ activeModule.label }}</h3>
+          <div class="pt-24px">
+            <transition>
+              <component :is="activeModule.component" />
+            </transition>
+          </div>
        </main>
      </div>
    </n-card>
-    <login-bg :theme-color="theme.themeColor" />
+    <login-bg :theme-color="bgThemeColor" />
  </div>
 </template>

 <script setup lang="ts">
 import { computed } from 'vue';
+import type { Component } from 'vue';
 import { NCard, NGradientText } from 'naive-ui';
-import { SystemLogo } from '@/components';
+import { EnumLoginModule } from '@/enum';
+import { SystemLogo, DarkModeSwitch } from '@/components';
 import { useThemeStore } from '@/store';
 import { useAppInfo } from '@/composables';
-import { mixColor } from '@/utils';
-import { LoginBg } from './components';
+import { getColorPalette, mixColor } from '@/utils';
+import type { LoginModuleKey } from '@/interface';
+import { LoginBg, PwdLogin, CodeLogin, Register, ResetPwd, BindWechat } from './components';
+
+interface Props {
+  /** 登录模块分类 */
+  module: LoginModuleKey;
+}
+
+interface LoginModule {
+  key: LoginModuleKey;
+  label: EnumLoginModule;
+  component: Component;
+}
+
+const props = defineProps<Props>();

 const theme = useThemeStore();
+const { setDarkMode } = useThemeStore();
 const { title } = useAppInfo();

+const modules: LoginModule[] = [
+  { key: 'pwd-login', label: EnumLoginModule['pwd-login'], component: PwdLogin },
+  { key: 'code-login', label: EnumLoginModule['code-login'], component: CodeLogin },
+  { key: 'register', label: EnumLoginModule.register, component: Register },
+  { key: 'reset-pwd', label: EnumLoginModule['reset-pwd'], component: ResetPwd },
+  { key: 'bind-wechat', label: EnumLoginModule['bind-wechat'], component: BindWechat }
+];
+
+const activeModule = computed(() => {
+  const active: LoginModule = { ...modules[0] };
+  const findItem = modules.find(item => item.key === props.module);
+  if (findItem) {
+    Object.assign(active, findItem);
+  }
+  return active;
+});
+
+const bgThemeColor = computed(() => (theme.darkMode ? getColorPalette(theme.themeColor, 7) : theme.themeColor));
+
 const bgColor = computed(() => {
  const COLOR_WHITE = '#ffffff';
-  const darkMode = false;
-  const ratio = darkMode ? 0.6 : 0.2;
+  const ratio = theme.darkMode ? 0.5 : 0.2;
  return mixColor(COLOR_WHITE, theme.themeColor, ratio);
 });
 </script>