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

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>