feat(projects): 添加常用组件、composables函数

src/views/system/exception/403.vue

@@ -1,17 +1,8 @@
 <template>
-  <div class="flex-center flex-col wh-full">
-    <exception-svg type="403" :color="theme.themeColor" />
-    <router-link to="/">
-      <n-button type="primary">回到首页</n-button>
-    </router-link>
-  </div>
+  <exception-base type="403" />
 </template>
 
 <script lang="ts" setup>
-import { NButton } from 'naive-ui';
-import { ExceptionSvg } from '@/components';
-import { useThemeStore } from '@/store';
-
-const theme = useThemeStore();
+import { ExceptionBase } from './components';
 </script>
 <style scoped></style>

src/views/system/exception/404.vue

@@ -1,17 +1,8 @@
 <template>
-  <div class="flex-center flex-col wh-full">
-    <exception-svg type="404" :color="theme.themeColor" />
-    <router-link to="/">
-      <n-button type="primary">回到首页</n-button>
-    </router-link>
-  </div>
+  <exception-base type="404" />
 </template>
 
 <script lang="ts" setup>
-import { NButton } from 'naive-ui';
-import { ExceptionSvg } from '@/components';
-import { useThemeStore } from '@/store';
-
-const theme = useThemeStore();
+import { ExceptionBase } from './components';
 </script>
 <style scoped></style>

src/views/system/exception/500.vue

@@ -1,17 +1,8 @@
 <template>
-  <div class="flex-center flex-col wh-full">
-    <exception-svg type="500" :color="theme.themeColor" />
-    <router-link to="/">
-      <n-button type="primary">回到首页</n-button>
-    </router-link>
-  </div>
+  <exception-base type="500" />
 </template>
 
 <script lang="ts" setup>
-import { NButton } from 'naive-ui';
-import { ExceptionSvg } from '@/components';
-import { useThemeStore } from '@/store';
-
-const theme = useThemeStore();
+import { ExceptionBase } from './components';
 </script>
 <style scoped></style>

src/views/system/exception/components/ExceptionBase.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="flex-col-center wh-full">
+    <div class="w-400px h-400px text-primary">
+      <svg-no-permission v-if="type === '403'" />
+      <svg-not-found v-if="type === '404'" />
+      <svg-service-error v-if="type === '500'" />
+    </div>
+    <router-link :to="ROUTE_HOME.path">
+      <n-button type="primary">回到首页</n-button>
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NButton } from 'naive-ui';
+import { SvgNoPermission, SvgNotFound, SvgServiceError } from '@/components';
+import { ROUTE_HOME } from '@/router';
+
+interface Props {
+  /** 异常类型 */
+  type: '403' | '404' | '500';
+}
+
+defineProps<Props>();
+</script>
+<style scoped></style>

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

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

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

@@ -11,8 +11,17 @@
           <n-button size="large" :disabled="isCounting" @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" @click="handleSubmit">确定</n-button>
+        <login-agreement v-model:value="agreement" />
+        <n-button type="primary" size="large" :block="true" :round="true" :loading="loading" @click="handleSubmit">
+          确定
+        </n-button>
         <n-button size="large" :block="true" :round="true" @click="toCurrentLogin('pwd-login')">返回</n-button>
       </n-space>
     </n-form>
@@ -21,35 +30,34 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
-import { NForm, NFormItem, NInput, NSpace, NButton, useMessage } from 'naive-ui';
+import { NForm, NFormItem, NInput, NSpace, NButton } from 'naive-ui';
 import type { FormInst } from 'naive-ui';
-import { useRouterPush } from '@/composables';
-import { useSmsCode } from '@/hooks';
+import { ImageVerify } from '@/components';
+import { useRouterPush, useLogin } from '@/composables';
+import { useSmsCode, useAgreement } from '@/hooks';
+import { formRules, getImgCodeRule } from '@/utils';
+import { LoginAgreement } from '../common';
 
-const message = useMessage();
 const { toCurrentLogin } = useRouterPush();
-const { label, isCounting, start } = useSmsCode();
+const { loading, login } = useLogin();
+const { label, isCounting, getSmsCode } = useSmsCode();
+const { agreement, isAgree } = useAgreement();
 
 const formRef = ref<(HTMLElement & FormInst) | null>(null);
 const model = reactive({
   phone: '',
-  code: ''
+  code: '',
+  imgCode: ''
 });
+const imgCode = ref('');
 const rules = {
-  phone: {
-    required: true,
-    trigger: ['blur', 'input'],
-    message: '请输入手机号'
-  },
-  code: {
-    required: true,
-    trigger: ['blur', 'input'],
-    message: '请输入验证码'
-  }
+  phone: formRules.phone,
+  code: formRules.code,
+  imgCode: getImgCodeRule(imgCode)
 };
 
 function handleSmsCode() {
-  start();
+  getSmsCode(model.phone);
 }
 
 function handleSubmit(e: MouseEvent) {
@@ -58,9 +66,9 @@ function handleSubmit(e: MouseEvent) {
 
   formRef.value.validate(errors => {
     if (!errors) {
-      message.success('验证成功');
-    } else {
-      message.error('验证失败');
+      if (!isAgree()) return;
+      const { phone, code } = model;
+      login({ phone, pwdOrCode: code, type: 'sms' });
     }
   });
 }

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

@@ -2,16 +2,23 @@
   <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-input v-model:value="model.phone" placeholder="请输入手机号码" />
       </n-form-item>
       <n-form-item path="pwd">
-        <n-input v-model:value="model.pwd" placeholder="密码" />
+        <n-input v-model:value="model.pwd" type="password" show-password-on="click" placeholder="请输入密码" />
+      </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">
         <div class="flex-y-center justify-between">
           <n-checkbox v-model:checked="rememberMe">记住我</n-checkbox>
           <span class="text-primary cursor-pointer" @click="toCurrentLogin('reset-pwd')">忘记密码？</span>
         </div>
+        <login-agreement v-model:value="agreement" />
         <n-button type="primary" size="large" :block="true" :round="true" :loading="loading" @click="handleSubmit">
           确定
         </n-button>
@@ -32,37 +39,31 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
-import { NForm, NFormItem, NInput, NSpace, NCheckbox, NButton, useNotification } from 'naive-ui';
+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, useRouteQuery } from '@/composables';
-import { useLoading } from '@/hooks';
-import { setToken } from '@/utils';
+import { ImageVerify } from '@/components';
+import { useRouterPush, useLogin } from '@/composables';
+import { useAgreement } from '@/hooks';
+import { formRules, getImgCodeRule } from '@/utils';
 import { OtherLogin } from './components';
+import { LoginAgreement } from '../common';
 
-const notification = useNotification();
-const auth = useAuthStore();
-const { routerPush, toHome, toCurrentLogin } = useRouterPush();
-const { loginRedirectUrl } = useRouteQuery();
-const { loading, startLoading, endLoading } = useLoading();
+const { toCurrentLogin } = useRouterPush();
+const { loading, login } = useLogin();
+const { agreement, isAgree } = useAgreement();
 
 const formRef = ref<(HTMLElement & FormInst) | null>(null);
 const model = reactive({
-  phone: '151****3876',
-  pwd: '123456'
+  phone: '15170283876',
+  pwd: 'a123456789',
+  imgCode: ''
 });
+const imgCode = ref('');
 const rules: FormRules = {
-  phone: {
-    required: true,
-    trigger: ['blur', 'input'],
-    message: '请输入手机号'
-  },
-  pwd: {
-    required: true,
-    trigger: ['blur', 'input'],
-    message: '请输入密码'
-  }
+  phone: formRules.phone,
+  pwd: formRules.pwd,
+  imgCode: getImgCodeRule(imgCode)
 };
 const rememberMe = ref(false);
 
@@ -72,22 +73,9 @@ function handleSubmit(e: MouseEvent) {
 
   formRef.value.validate(errors => {
     if (!errors) {
-      startLoading();
-      setTimeout(() => {
-        endLoading();
-        setToken('temp-token');
-        if (loginRedirectUrl.value) {
-          routerPush(loginRedirectUrl.value);
-        } else {
-          toHome();
-        }
-        const { userName } = auth.userInfo;
-        notification.success({
-          title: '登录成功！',
-          content: `欢迎回来，${userName}!`,
-          duration: 3000
-        });
-      }, 1000);
+      if (!isAgree()) return;
+      const { phone, pwd } = model;
+      login({ phone, pwdOrCode: pwd, type: 'pwd' });
     }
   });
 }

src/views/system/login/components/common/LoginAgreement.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="w-full text-[14px]">
+    <n-checkbox v-model:checked="checked">我已经仔细阅读并接受</n-checkbox>
+    <n-button :text="true" type="primary">《用户协议》</n-button>
+    <n-button :text="true" type="primary">《隐私权政策》</n-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+import { NCheckbox, NButton } from 'naive-ui';
+import { useBoolean } from '@/hooks';
+
+interface Props {
+  /** 是否选中 */
+  value: boolean;
+}
+
+interface Emits {
+  (e: 'update:value', value: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: true
+});
+
+const emit = defineEmits<Emits>();
+
+const { bool: checked, setBool } = useBoolean(props.value);
+
+watch(
+  () => props.value,
+  newValue => {
+    setBool(newValue);
+  }
+);
+watch(checked, newValue => {
+  emit('update:value', newValue);
+});
+</script>
+<style scoped></style>

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

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

src/views/system/login/index.vue

@@ -23,7 +23,7 @@ import { computed } from 'vue';
 import type { Component } from 'vue';
 import { NCard, NGradientText } from 'naive-ui';
 import { SystemLogo, LoginBg } from '@/components';
-import { useAppTitle } from '@/composables';
+import { useAppInfo } from '@/composables';
 import { EnumLoginModule } from '@/enum';
 import { mixColor } from '@/utils';
 import type { LoginModuleType } from '@/interface';
@@ -44,7 +44,7 @@ interface LoginModule {
 const props = defineProps<Props>();
 
 const theme = useThemeStore();
-const title = useAppTitle();
+const { title } = useAppInfo();
 
 const modules: LoginModule[] = [
   { key: 'pwd-login', label: EnumLoginModule['pwd-login'], component: PwdLogin },