feat(projects): 登录页面实现

src/views/dashboard/analysis/index.vue

@@ -2,12 +2,14 @@
   <div class="p-10px">
     <data-card :loading="loading" />
     <nav-card :loading="loading" />
+    <router-link :to="EnumRoutePaths['dashboard-workbench']">workbench</router-link>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { DataCard, NavCard } from './components';
+import { EnumRoutePaths } from '@/enum';
 
 const loading = ref(true);
 

src/views/dashboard/workbench/index.vue

@@ -1,6 +1,21 @@
 <template>
-  <div></div>
+  <div>
+    <h2>工作台</h2>
+    <router-link :to="EnumRoutePaths['dashboard-analysis']">analysis</router-link>
+    <n-button @click="removeCurrent">去除</n-button>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { NButton } from 'naive-ui';
+import { useRouter } from 'vue-router';
+import { EnumRoutePaths } from '@/enum';
+import { RouteNameMap } from '@/router';
+
+const router = useRouter();
+
+function removeCurrent() {
+  router.removeRoute(RouteNameMap.get('dashboard-workbench')!);
+}
+</script>
 <style scoped></style>

src/views/home/index.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="min-h-500px">
-    <n-space>
-      <n-button v-for="item in actions" :key="item.key" type="primary" @click="handleClick(item.key)">
-        {{ item.label }}
-      </n-button>
-    </n-space>
-    <n-space>
-      <n-button>Default</n-button>
-      <n-button type="primary">Primary</n-button>
-      <n-button type="info">Info</n-button>
-      <n-button type="success">Success</n-button>
-      <n-button type="warning">Warning</n-button>
-      <n-button type="error">Error</n-button>
-    </n-space>
-    <router-link class="text-primary" to="/system">system</router-link>
-    <div>
-      <span class="text-primary">primary</span>
-      <span class="text-info">info</span>
-      <span class="text-success">success</span>
-      <span class="text-warning">warning</span>
-      <span class="text-error">error</span>
-    </div>
-    <p v-for="i in 100" :key="i">{{ i }}</p>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { NButton, NSpace, useDialog, useNotification, useMessage } from 'naive-ui';
-
-type ActionType = 'dialog' | 'notification' | 'message';
-interface Action {
-  key: ActionType;
-  label: string;
-}
-
-defineProps({
-  code: {
-    type: String,
-    default: ''
-  }
-});
-
-const dialog = useDialog();
-const notification = useNotification();
-const message = useMessage();
-
-const actions: Action[] = [
-  { key: 'dialog', label: 'dialog' },
-  { key: 'notification', label: 'notification' },
-  { key: 'message', label: 'message' }
-];
-function handleClick(type: ActionType) {
-  if (type === 'dialog') {
-    dialog.info({ content: '弹窗示例！' });
-  }
-  if (type === 'notification') {
-    notification.info({ content: '通知示例！' });
-  }
-  if (type === 'message') {
-    message.info('消息示例！');
-  }
-}
-</script>
-<style scoped></style>

src/views/system/login/components/BindWechat/index.vue

@@ -0,0 +1,6 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts" setup></script>
+<style scoped></style>

src/views/system/login/components/CodeLogin/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="pt-24px">
+    <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" @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="toLogin('pwd-login')">返回</n-button>
+      </n-space>
+    </n-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import { NForm, NFormItem, NInput, NSpace, NButton, useMessage } from 'naive-ui';
+import type { FormInst } from 'naive-ui';
+import { useRouterChange, useSmsCode } from '@/hooks';
+
+const message = useMessage();
+const { toLogin } = useRouterChange();
+const { label, isCounting, start } = useSmsCode();
+
+const formRef = ref<(HTMLElement & FormInst) | null>(null);
+const model = reactive({
+  phone: '',
+  code: ''
+});
+const rules = {
+  phone: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入手机号'
+  },
+  code: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入验证码'
+  }
+};
+
+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>

src/views/system/login/components/PwdLogin/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="pt-24px">
+    <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" placeholder="密码" />
+      </n-form-item>
+      <n-space :vertical="true" size="large">
+        <div class="flex-y-center justify-between">
+          <n-checkbox v-model:checked="rememberMe">记住我</n-checkbox>
+          <span class="text-primary cursor-pointer" @click="toLogin('reset-pwd')">忘记密码？</span>
+        </div>
+        <n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">确定</n-button>
+        <div class="flex-y-center justify-between">
+          <n-button class="flex-1" :block="true" @click="toLogin('code-login')">
+            {{ EnumLoginModule['code-login'] }}
+          </n-button>
+          <div class="w-12px"></div>
+          <n-button class="flex-1" :block="true" @click="toLogin('register')">{{ EnumLoginModule.register }}</n-button>
+        </div>
+      </n-space>
+    </n-form>
+    <other-login />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import { NForm, NFormItem, NInput, NSpace, NCheckbox, NButton, useMessage } from 'naive-ui';
+import type { FormInst } from 'naive-ui';
+import { EnumLoginModule } from '@/enum';
+import { useRouterChange } from '@/hooks';
+import { OtherLogin } from '../common';
+
+const { toLogin } = useRouterChange();
+const message = useMessage();
+
+const formRef = ref<(HTMLElement & FormInst) | null>(null);
+const model = reactive({
+  phone: '',
+  pwd: ''
+});
+const rules = {
+  phone: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入手机号'
+  },
+  pwd: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入密码'
+  }
+};
+const rememberMe = ref(false);
+
+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>

src/views/system/login/components/Register/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="pt-24px">
+    <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" @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-checkbox v-model:checked="agreement">我已经仔细阅读并接受用户协议和隐私政策</n-checkbox>
+        <n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">确定</n-button>
+        <n-button size="large" :block="true" :round="true" @click="toLogin('pwd-login')">返回</n-button>
+      </n-space>
+    </n-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import { NForm, NFormItem, NInput, NSpace, NCheckbox, NButton, useMessage } from 'naive-ui';
+import type { FormInst } from 'naive-ui';
+import { useRouterChange, useSmsCode } from '@/hooks';
+
+const message = useMessage();
+const { toLogin } = useRouterChange();
+const { label, isCounting, start } = useSmsCode();
+
+const formRef = ref<(HTMLElement & FormInst) | null>(null);
+const model = reactive({
+  phone: '',
+  code: '',
+  pwd: '',
+  confirmPwd: ''
+});
+const rules = {
+  phone: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入手机号'
+  },
+  code: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入验证码'
+  },
+  pwd: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入密码'
+  },
+  confirmPwd: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入确认密码'
+  }
+};
+const agreement = ref(false);
+
+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>

src/views/system/login/components/ResetPwd/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="pt-24px">
+    <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" @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="toLogin('pwd-login')">返回</n-button>
+      </n-space>
+    </n-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import { NForm, NFormItem, NInput, NSpace, NButton, useMessage } from 'naive-ui';
+import type { FormInst } from 'naive-ui';
+import { useRouterChange, useSmsCode } from '@/hooks';
+
+const message = useMessage();
+const { toLogin } = useRouterChange();
+const { label, isCounting, start } = useSmsCode();
+
+const formRef = ref<(HTMLElement & FormInst) | null>(null);
+const model = reactive({
+  phone: '',
+  code: '',
+  pwd: '',
+  confirmPwd: ''
+});
+const rules = {
+  phone: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入手机号'
+  },
+  code: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入验证码'
+  },
+  pwd: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入密码'
+  },
+  confirmPwd: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入确认密码'
+  }
+};
+
+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>

src/views/system/login/components/common/OtherLogin/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <n-space :vertical="true">
+    <n-divider class="!mb-0 text-14px text-[#666]">其他登录方式</n-divider>
+    <div class="flex-center">
+      <icon-mdi-wechat class="text-22px text-[#888] hover:text-[#52BF5E] cursor-pointer" />
+    </div>
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+import { NSpace, NDivider } from 'naive-ui';
+</script>
+<style scoped></style>

src/views/system/login/components/common/index.ts

@@ -0,0 +1,3 @@
+import OtherLogin from './OtherLogin/index.vue';
+
+export { OtherLogin };

src/views/system/login/components/index.ts

@@ -0,0 +1,7 @@
+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 { PwdLogin, CodeLogin, Register, ResetPwd, BindWechat };

src/views/system/login/composable.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue';
+import { useCreateContext } from '@/hooks';
+import { LoginModuleType } from '@/interface';
+
+interface ShareState {
+  activeModule: Ref<LoginModuleType>;
+  handleLoginModule(module: LoginModuleType): void;
+}
+
+const { useContext, useProvider } = useCreateContext<ShareState>();
+
+export function useLoginContext() {
+  return {
+    useContext,
+    useProvider
+  };
+}

src/views/system/login/index.vue

@@ -1,18 +1,53 @@
 <template>
-  <div class="flex w-full h-full">
-    <div class="flex-center w-1/2 h-full">
-      <h3>登录</h3>
-    </div>
-    <div class="flex-center w-1/2 h-full bg-primary bg-opacity-25">
-      <banner-svg class="w-400px h-400px" type="1" :color="theme.themeColor" />
+  <div class="relative flex-center w-full h-full bg-[#DBE0F9]">
+    <login-bg />
+    <div class="w-400px p-40px bg-white rounded-20px z-10">
+      <header class="flex-y-center justify-between">
+        <div class="w-70px h-70px rounded-35px overflow-hidden">
+          <system-logo class="w-full h-full" :fill="true" />
+        </div>
+        <n-gradient-text type="primary" :size="28">{{ title }}</n-gradient-text>
+      </header>
+      <main class="pt-24px">
+        <div v-for="item in modules" v-show="module === item.key" :key="item.key">
+          <h3 class="text-18px text-primary font-medium">{{ item.label }}</h3>
+          <component :is="item.component" />
+        </div>
+      </main>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { BannerSvg } from '@/components';
-import { useThemeStore } from '@/store';
+import type { Component, PropType } from 'vue';
+import { NGradientText } from 'naive-ui';
+import { SystemLogo, LoginBg } from '@/components';
+import { useAppTitle } from '@/hooks';
+import { EnumLoginModule } from '@/enum';
+import type { LoginModuleType } from '@/interface';
+import { PwdLogin, CodeLogin, Register, ResetPwd, BindWechat } from './components';
 
-const theme = useThemeStore();
+interface LoginModule {
+  key: LoginModuleType;
+  label: string;
+  component: Component;
+}
+
+defineProps({
+  module: {
+    type: String as PropType<LoginModuleType>,
+    default: 'pwd-login'
+  }
+});
+
+const title = useAppTitle();
+
+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 }
+];
 </script>
 <style scoped></style>