feat(projects): 登录页面开始迁移

.env

@@ -4,4 +4,4 @@ VITE_APP_NAME=SoybeanAdmin
 
 VITE_APP_TITLE=Soybean管理系统
 
-VITE_APP_DESC=中后台管理系统模版
+VITE_APP_DESC=SoybeanAdmin是一个中后台管理系统模版

src/AppProvider.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-config-provider :theme-overrides="theme.naiveThemeOverrides">
+  <n-config-provider :theme-overrides="theme.naiveThemeOverrides" class="h-full">
     <slot></slot>
   </n-config-provider>
 </template>

src/components/common/SystemLogo/components/SvgFillLogo.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg viewBox="0 0 158.88 158.88">
+    <path
+      d="M158.86.3q0,78.74,0,157.48c0,.9-.2,1.1-1.1,1.1q-78.77,0-157.52,0a2.61,2.61,0,0,1-.11-1.3q0-78,0-155.91C.14,0,0,.18,1.61.18h156A2.62,2.62,0,0,1,158.86.3Z"
+      style="fill: currentColor"
+    />
+    <path
+      d="M158.86.3H2C0,.31.27,0,.27,2q0,78.42,0,156.85c-.07-.05-.25.12-.24-.12s0-.64,0-1Q0,79.46,0,1.14C0,.24.2,0,1.1,0l156.68,0C158.13.08,158.59-.2,158.86.3Z"
+      style="fill: #ffffff"
+    />
+    <path
+      d="M93.65,51.52a68.65,68.65,0,0,1-6.47,28.81,1.72,1.72,0,0,0,.19,2c6.08,8.28,13.58,14.79,23.19,18.69a46.22,46.22,0,0,0,17.15,3.39,28.87,28.87,0,0,0,3.34-.25,6.2,6.2,0,0,1,7,5.12,6.07,6.07,0,0,1-5.15,7.14,50.39,50.39,0,0,1-18.06-1c-15.85-3.66-28-12.75-37.44-25.7a2.15,2.15,0,0,0-2.23-1.09C61.17,90,49,95.06,39.67,105.84a38.47,38.47,0,0,0-6.23,9.74A6.21,6.21,0,0,1,25.27,119,6.14,6.14,0,0,1,22,110.8a49.31,49.31,0,0,1,9.63-14.62c10.56-11.44,23.8-17.54,39.09-19.54a13.93,13.93,0,0,1,2.84-.34c1.61.14,2.18-.73,2.73-2A54.38,54.38,0,0,0,81.12,51a44,44,0,0,0-8-25,6.11,6.11,0,0,1-.65-6.46A6,6,0,0,1,77.75,16a6.34,6.34,0,0,1,5.66,3,53.61,53.61,0,0,1,7.17,14.28A59.33,59.33,0,0,1,93.65,51.52Z"
+      style="fill: #ffffff"
+    />
+    <path
+      d="M46.92,118.63a6,6,0,0,1,1.35-3.88,37.89,37.89,0,0,1,22.5-14,6.08,6.08,0,0,1,6.65,2.47,6.18,6.18,0,0,1-3.84,9.63,26.09,26.09,0,0,0-15.71,9.77,6.2,6.2,0,0,1-10.95-4Z"
+      style="fill: #ffffff"
+    />
+    <path
+      d="M124.3,92.8a34.66,34.66,0,0,1-9.82-2.48A35.46,35.46,0,0,1,99.83,79.87a6.19,6.19,0,0,1,2.84-9.93,5.79,5.79,0,0,1,6.44,1.73,26.79,26.79,0,0,0,16.51,8.85,6,6,0,0,1,5,5.54,6.21,6.21,0,0,1-4.29,6.46A6.55,6.55,0,0,1,124.3,92.8Z"
+      style="fill: #ffffff"
+    />
+    <path
+      d="M69.32,53.27a33.46,33.46,0,0,1-2.27,12.52,6.21,6.21,0,0,1-10.94,1,6.09,6.09,0,0,1-.65-5.4,26,26,0,0,0-.53-18.25,6.21,6.21,0,0,1,11.49-4.72A40.24,40.24,0,0,1,69.32,53.27Z"
+      style="fill: #ffffff"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped></style>

src/components/common/SystemLogo/components/SvgLogo.vue

@@ -0,0 +1,32 @@
+<template>
+  <svg viewBox="0 0 158.88 158.88">
+    <path
+      d="M0,158.86Q0,80,0,1.1C0,.2.2,0,1.1,0Q79.44,0,157.78,0c.9,0,1.1.2,1.1,1.1q0,78.35,0,156.68c0,.9-.2,1.1-1.1,1.1Q78.9,158.83,0,158.86Z"
+      transform="translate(0)"
+      style="fill: #ffffff00"
+    />
+    <path
+      d="M81.28,55.9c-.1-11.67-2.93-22.55-9.37-32.38-1-1.5-2.14-2.86-2.5-4.71a8.1,8.1,0,0,1,4-8.61,7.89,7.89,0,0,1,9.3,1.23,36,36,0,0,1,5.9,8.83,75.18,75.18,0,0,1,8.44,28.58,83.21,83.21,0,0,1-5.23,36.74c-.91,2.47-1.91,4.9-3,7.28a1.2,1.2,0,0,0,0,1.41c9.58,13.3,21.76,23,37.85,27.24a54.35,54.35,0,0,0,19.68,1.57,7.72,7.72,0,0,1,8.36,6.9,7.9,7.9,0,0,1-6.7,9,64.74,64.74,0,0,1-23-1.33,77.68,77.68,0,0,1-36.93-19.88,93.64,93.64,0,0,1-11.91-13.71A2.18,2.18,0,0,0,73.87,103a72.75,72.75,0,0,0-27.38,7.55c-11.6,6-20.67,14.58-26.4,26.45a10.13,10.13,0,0,1-3.7,4.7A8,8,0,0,1,7.2,141a7.86,7.86,0,0,1-2.36-9.28,60.32,60.32,0,0,1,8.72-14.52c12.2-15.43,28.21-24.59,47.32-28.57A85.08,85.08,0,0,1,73.07,87a1.22,1.22,0,0,0,1.18-.8A76.06,76.06,0,0,0,80.78,63.9,57.87,57.87,0,0,0,81.28,55.9Z"
+      transform="translate(0)"
+      style="fill: currentColor"
+    />
+    <path
+      d="M136.26,108.34a44.72,44.72,0,0,1-11.13-2.87,46.11,46.11,0,0,1-19.66-13.76,8,8,0,0,1,5.72-13.22,7.93,7.93,0,0,1,6.54,2.93A33.27,33.27,0,0,0,136.6,92.17a14.76,14.76,0,0,1,4.48,1.18,8.08,8.08,0,0,1,3.84,9.21C144,106.08,140.79,108.37,136.26,108.34Z"
+      transform="translate(0)"
+      style="fill: currentColor"
+    />
+    <path
+      d="M55.66,33.32a7.61,7.61,0,0,1,6.64,5,49.14,49.14,0,0,1,3.64,17,46.33,46.33,0,0,1-2.46,17.28c-2,5.77-8.24,7.79-12.89,4.15a8.1,8.1,0,0,1-2.39-9,31.68,31.68,0,0,0,1.68-12.36,35.77,35.77,0,0,0-2.43-11C45.35,38.94,49.2,33.32,55.66,33.32Z"
+      transform="translate(0)"
+      style="fill: currentColor"
+    />
+    <path
+      d="M77.92,126.57a8,8,0,0,1-6.68,7.86,32.88,32.88,0,0,0-19.7,12.19,8.13,8.13,0,0,1-11.21,1.62,8,8,0,0,1-1.41-11.58A51.05,51.05,0,0,1,54,123.81a45.85,45.85,0,0,1,14-5.1C73.35,117.67,77.91,121.27,77.92,126.57Z"
+      transform="translate(0)"
+      style="fill: currentColor"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped></style>

src/components/common/SystemLogo/components/index.ts

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

src/components/common/SystemLogo/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <svg-fill-logo v-if="fill" />
+    <svg-logo v-else />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { SvgLogo, SvgFillLogo } from './components';
+
+interface Props {
+  /** logo是否填充 */
+  fill?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  fill: false
+});
+</script>
+<style scoped></style>

src/components/common/index.ts

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

src/components/index.ts

@@ -1,3 +1 @@
-export const test = {
-  age: 1
-};
+export * from './common';

src/composables/common/index.ts

@@ -0,0 +1 @@
+export * from './system';

src/composables/common/system.ts

@@ -0,0 +1,28 @@
+import { useBreakpoints, breakpointsTailwind } from '@vueuse/core';
+
+interface AppInfo {
+  /** 项目名称 */
+  name: string;
+  /** 项目标题 */
+  title: string;
+  /** 项目描述 */
+  desc: string;
+}
+
+/** 项目信息 */
+export function useAppInfo(): AppInfo {
+  const { VITE_APP_NAME: name, VITE_APP_TITLE: title, VITE_APP_DESC: desc } = import.meta.env;
+
+  return {
+    name,
+    title,
+    desc
+  };
+}
+
+/** 是否是移动端 */
+export function useIsMobile() {
+  const breakpoints = useBreakpoints(breakpointsTailwind);
+  const isMobile = breakpoints.smaller('lg');
+  return isMobile;
+}

src/composables/index.ts

@@ -0,0 +1 @@
+export * from './common';

src/enum/common/index.ts

@@ -1,3 +1,4 @@
 export * from './typeof';
 export * from './storage';
 export * from './service';
+export * from './system';

src/enum/common/system.ts

@@ -0,0 +1,8 @@
+/** 登录模块 */
+export enum EnumLoginModule {
+  'pwd-login' = '账密登录',
+  'code-login' = '手机验证码登录',
+  'register' = '注册',
+  'reset-pwd' = '重置密码',
+  'bind-wechat' = '微信绑定'
+}

src/interface/enum.ts

@@ -0,0 +1,6 @@
+import { EnumLoginModule } from '@/enum';
+
+/** 登录模块 */
+export type LoginModuleKey = keyof typeof EnumLoginModule;
+
+export type LoginModuleRegexp = LoginModuleKey;

src/interface/index.ts

@@ -1,3 +1 @@
-export interface TestType {
-  name: string;
-}
+export * from './enum';

src/layouts/Layout/index.vue

@@ -1,6 +1,5 @@
 <template>
-  <div>
-    <h4>Layout</h4>
+  <div class="h-full">
     <router-view v-slot="{ Component }">
       <component :is="Component" />
     </router-view>

src/router/routes/constant.ts

@@ -1,3 +1,5 @@
+// import { getLoginModuleRegExp } from '@/utils';
+
 /** 固定的路由 */
 const constantRoutes: AuthRoute.Route[] = [
   {

src/store/modules/theme/helpers.ts

@@ -1,5 +1,4 @@
-import { colord } from 'colord';
-import { getColorPalette } from '@/utils';
+import { getColorPalette, addColorAlpha } from '@/utils';
 
 type ColorType = 'primary' | 'info' | 'success' | 'warning' | 'error';
 
@@ -23,7 +22,7 @@ export function getThemeColors(colors: [ColorType, string][]) {
     { scene: 'Suppl', handler: color => color },
     { scene: 'Hover', handler: color => getColorPalette(color, 5) },
     { scene: 'Pressed', handler: color => getColorPalette(color, 7) },
-    { scene: 'Active', handler: color => colord(color).alpha(0.1).toHex() }
+    { scene: 'Active', handler: color => addColorAlpha(color, 0.1) }
   ];
 
   const themeColor: ThemeColor = {};

src/styles/css/global.css

@@ -1 +1,5 @@
 @import './scrollbar.css';
+
+html, body, #app {
+	height: 100%;
+}

src/typings/common/route.d.ts

@@ -24,7 +24,7 @@ declare namespace AuthRoute {
     : `/${Key}`;
 
   /** 路由路径 */
-  type RoutePath<Key extends string = ''> =
+  type RoutePath<Key extends string = string> =
     | '/'
     | Exclude<KeyToPath<RouteKey>, '/root' | '/redirect'>
     | Key
@@ -66,11 +66,11 @@ declare namespace AuthRoute {
   };
 
   /** 单个路由的类型结构(后端返回此类型结构的路由) */
-  interface Route {
+  interface Route<T extends string = ''> {
     /** 路由名称(路由唯一标识) */
     name: RouteKey;
     /** 路由路径 */
-    path: RoutePath;
+    path: RoutePath<T>;
     /** 路由重定向 */
     redirect?: RoutePath;
     /**

src/typings/common/util.d.ts

@@ -0,0 +1,17 @@
+declare namespace Util {
+  /** convert a union to an intersection: X | Y | Z ==> X & Y & Z */
+  type UnionToIntersection<T> = (T extends any ? (args: T) => any : never) extends (args: infer R) => any ? R : never;
+
+  /** returns true if the type is a union otherwise false */
+  type IsUnion<T> = [T] extends [UnionToIntersection<T>] ? false : true;
+
+  type LastInUnion<T> = UnionToIntersection<T extends any ? (arg: T) => any : never> extends (arg: infer R) => any
+    ? R
+    : never;
+
+  type UnionToTuple<T, U = T> = [T] extends [never]
+    ? []
+    : [LastInUnion<T>, ...UnionToTuple<Exclude<U, LastInUnion<T>>>];
+
+  type Inter = UnionToTuple<'1' | '2'>;
+}

src/utils/common/color.ts

@@ -1,6 +1,9 @@
-import { colord } from 'colord';
+import { colord, extend } from 'colord';
+import mixPlugin from 'colord/plugins/mix';
 import type { HsvColor } from 'colord';
 
+extend([mixPlugin]);
+
 type ColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
 
 const hueStep = 2;
@@ -114,3 +117,22 @@ function getValue(hsv: HsvColor, i: number, isLight: boolean) {
   }
   return value;
 }
+
+/**
+ * 给颜色加透明度
+ * @param color - 颜色
+ * @param alpha - 透明度(0 - 1)
+ */
+export function addColorAlpha(color: string, alpha: number) {
+  return colord(color).alpha(alpha).toHex();
+}
+
+/**
+ * 颜色混合
+ * @param firstColor - 第一个颜色
+ * @param secondColor - 第二个颜色
+ * @param ratio - 第二个颜色占比
+ */
+export function mixColor(firstColor: string, secondColor: string, ratio: number) {
+  return colord(firstColor).mix(secondColor, ratio).toHex();
+}

src/utils/router/index.ts

@@ -1 +1,2 @@
 export * from './helpers';
+export * from './regexp';

src/utils/router/regexp.ts

@@ -0,0 +1,7 @@
+import type { LoginModuleKey } from '@/interface';
+
+/** 获取登录页面模块的动态路由的正则 */
+export function getLoginModuleRegExp() {
+  const modules: LoginModuleKey[] = ['pwd-login', 'code-login', 'register', 'reset-pwd', 'bind-wechat'];
+  return modules.join('|');
+}

src/views/system/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/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/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/login/components/LoginBg/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="absolute-lt 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/login/components/index.ts

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

src/views/system/login/index.vue

@@ -1,8 +1,39 @@
 <template>
-  <div>
-    <h3 class="text-primary">Login</h3>
+  <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">
+      <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">登录</h3>
+        </main>
+      </div>
+    </n-card>
+    <login-bg :theme-color="theme.themeColor" />
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { NCard, NGradientText } from 'naive-ui';
+import { SystemLogo } from '@/components';
+import { useThemeStore } from '@/store';
+import { useAppInfo } from '@/composables';
+import { mixColor } from '@/utils';
+import { LoginBg } from './components';
+
+const theme = useThemeStore();
+const { title } = useAppInfo();
+
+const bgColor = computed(() => {
+  const COLOR_WHITE = '#ffffff';
+  const darkMode = false;
+  const ratio = darkMode ? 0.6 : 0.2;
+  return mixColor(COLOR_WHITE, theme.themeColor, ratio);
+});
+</script>
 <style scoped></style>