refactor(projects): 重构路由页面组件的导入

src/views/system-view/components/ExceptionBase.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="flex-col-center wh-full">
+    <div class="w-400px h-400px text-primary">
+      <component :is="active" />
+    </div>
+    <router-link :to="{ name: routeHomePath }">
+      <n-button type="primary">回到首页</n-button>
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import { NButton } from 'naive-ui';
+import { SvgNoPermission, SvgNotFound, SvgServiceError } from '@/components';
+import { routeName } from '@/router';
+
+type ExceptionType = '403' | '404' | '500';
+
+interface Props {
+  /** 异常类型 403 404 500 */
+  type: ExceptionType;
+}
+
+type ExceptionComponent = Record<ExceptionType, Component>;
+
+const props = defineProps<Props>();
+
+const routeHomePath = routeName('root');
+
+const exceptions: ExceptionComponent = {
+  '403': SvgNoPermission,
+  '404': SvgNotFound,
+  '500': SvgServiceError
+};
+
+const active = computed(() => exceptions[props.type]);
+</script>
+<style scoped></style>

src/views/system-view/components/index.ts

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

src/views/system-view/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>

src/views/system-view/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="18">
+      <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>

src/views/system-view/login/components/LoginBg/components/CornerBottom.vue

@@ -0,0 +1,40 @@
+<template>
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    height="896"
+    width="967.8852157128662"
+  >
+    <defs>
+      <path
+        id="path-2"
+        opacity="1"
+        fill-rule="evenodd"
+        d="M896,448 C1142.6325445712241,465.5747656464056 695.2579309733121,896 448,896 C200.74206902668806,896 5.684341886080802e-14,695.2579309733121 0,448.0000000000001 C0,200.74206902668806 200.74206902668791,5.684341886080802e-14 447.99999999999994,0 C695.2579309733121,0 475,418 896,448Z"
+      />
+      <linearGradient id="linearGradient-3" x1="0.5" y1="0" x2="0.5" y2="1">
+        <stop offset="0" :stop-color="startColor" stop-opacity="1" />
+        <stop offset="1" :stop-color="endColor" stop-opacity="1" />
+      </linearGradient>
+    </defs>
+    <g opacity="1">
+      <use xlink:href="#path-2" fill="url(#linearGradient-3)" fill-opacity="1" />
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  /** 过渡的开始颜色 */
+  startColor?: string;
+  /** 过渡的结束颜色 */
+  endColor?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  startColor: '#28aff0',
+  endColor: '#120fc4'
+});
+</script>
+<style scoped></style>

src/views/system-view/login/components/LoginBg/components/CornerTop.vue

@@ -0,0 +1,34 @@
+<template>
+  <svg height="1337" width="1337">
+    <defs>
+      <path
+        id="path-1"
+        opacity="1"
+        fill-rule="evenodd"
+        d="M1337,668.5 C1337,1037.455193874239 1037.455193874239,1337 668.5,1337 C523.6725684305388,1337 337,1236 370.50000000000006,1094 C434.03835568300906,824.6732385973953 6.906089672974592e-14,892.6277623047779 0,668.5000000000001 C0,299.5448061257611 299.5448061257609,1.1368683772161603e-13 668.4999999999999,0 C1037.455193874239,0 1337,299.544806125761 1337,668.5Z"
+      />
+      <linearGradient id="linearGradient-2" x1="0.79" y1="0.62" x2="0.21" y2="0.86">
+        <stop offset="0" :stop-color="startColor" stop-opacity="1" />
+        <stop offset="1" :stop-color="endColor" stop-opacity="1" />
+      </linearGradient>
+    </defs>
+    <g opacity="1">
+      <use xlink:href="#path-1" fill="url(#linearGradient-2)" fill-opacity="1" />
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  /** 过渡的开始颜色 */
+  startColor?: string;
+  /** 过渡的结束颜色 */
+  endColor?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  startColor: '#28aff0',
+  endColor: '#120fc4'
+});
+</script>
+<style scoped></style>

src/views/system-view/login/components/LoginBg/components/index.ts

@@ -0,0 +1,4 @@
+import CornerTop from './CornerTop.vue';
+import CornerBottom from './CornerBottom.vue';
+
+export { CornerTop, CornerBottom };

src/views/system-view/login/components/LoginBg/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <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>
+    <div class="absolute -left-200px -bottom-400px">
+      <corner-bottom :start-color="darkColor" :end-color="lightColor" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getColorPalette } from '@/utils';
+import { CornerTop, CornerBottom } from './components';
+
+interface Props {
+  /** 主题颜色 */
+  themeColor: string;
+}
+
+const props = defineProps<Props>();
+
+const lightColor = computed(() => getColorPalette(props.themeColor, 3));
+const darkColor = computed(() => getColorPalette(props.themeColor, 6));
+</script>
+<style scoped></style>

src/views/system-view/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>

src/views/system-view/login/components/PwdLogin/components/index.ts

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

src/views/system-view/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" @click="toLoginModule('reset-pwd')">忘记密码？</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: '15170283876',
+  pwd: 'abc123456'
+});
+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>

src/views/system-view/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="18">
+      <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>

src/views/system-view/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>

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

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

src/views/system-view/login/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="relative flex-center wh-full" :style="{ backgroundColor: bgColor }">
+    <dark-mode-switch
+      :dark="theme.darkMode"
+      class="absolute left-48px top-24px z-3 text-20px"
+      @update:dark="theme.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">
+            <system-logo class="wh-full text-primary" :fill="true" />
+          </div>
+          <n-gradient-text type="primary" :size="28">{{ title }}</n-gradient-text>
+        </header>
+        <main class="pt-24px">
+          <h3 class="text-18px text-primary font-medium">{{ activeModule.label }}</h3>
+          <div class="pt-24px">
+            <transition name="fade-slide" mode="out-in" appear>
+              <component :is="activeModule.component" />
+            </transition>
+          </div>
+        </main>
+      </div>
+    </n-card>
+    <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 { EnumLoginModule } from '@/enum';
+import { SystemLogo, DarkModeSwitch } from '@/components';
+import { useThemeStore } from '@/store';
+import { useAppInfo } from '@/composables';
+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 { 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 ratio = theme.darkMode ? 0.5 : 0.2;
+  return mixColor(COLOR_WHITE, theme.themeColor, ratio);
+});
+</script>
+<style scoped></style>

src/views/system-view/no-permission/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <exception-base type="403" />
+</template>
+
+<script lang="ts" setup>
+import { ExceptionBase } from '../components';
+</script>
+<style scoped></style>

src/views/system-view/not-found-page/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <exception-base type="404" />
+</template>
+
+<script lang="ts" setup>
+import { ExceptionBase } from '../components';
+</script>
+<style scoped></style>

src/views/system-view/not-found/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <exception-base type="404" />
+</template>
+
+<script lang="ts" setup>
+import { ExceptionBase } from '../components';
+</script>
+<style scoped></style>

src/views/system-view/service-error/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <exception-base type="500" />
+</template>
+
+<script lang="ts" setup>
+import { ExceptionBase } from '../components';
+</script>
+<style scoped></style>