From 048eae6748170d22cb344a25b75d579c1984be37 Mon Sep 17 00:00:00 2001
From: Soybean <honghuangdc@gmail.com>
Date: Sat, 6 Nov 2021 01:53:17 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E7=94=A8NCard=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=9B=BF=E6=8D=A2ShadowCard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/custom/ShadowCard/index.vue    |  8 ----
 src/components/custom/index.ts                |  3 +-
 .../about/components/DevDependency/index.vue  |  7 ++-
 .../about/components/ProDependency/index.vue  |  7 ++-
 .../about/components/ProjectInfo/index.vue    |  7 ++-
 .../components/ProjectIntroduction/index.vue  |  9 ++--
 .../analysis/components/BottomPart/index.vue  | 23 +++++----
 .../DataCard/components/GradientBg.vue        |  2 +-
 .../analysis/components/DataCard/index.vue    | 28 +++++------
 .../analysis/components/TopChart/index.vue    | 48 +++++++++----------
 .../workbench/components/HeaderInfo/index.vue | 47 ------------------
 .../components/WorkbenchHeader/index.vue      | 48 +++++++++++++++++++
 .../components/WorkbenchMain/index.vue        | 29 +++++++++++
 .../dashboard/workbench/components/index.ts   |  5 +-
 src/views/dashboard/workbench/index.vue       | 20 ++------
 src/views/system/login/index.vue              | 34 ++++++-------
 16 files changed, 167 insertions(+), 158 deletions(-)
 delete mode 100644 src/components/custom/ShadowCard/index.vue
 delete mode 100644 src/views/dashboard/workbench/components/HeaderInfo/index.vue
 create mode 100644 src/views/dashboard/workbench/components/WorkbenchHeader/index.vue
 create mode 100644 src/views/dashboard/workbench/components/WorkbenchMain/index.vue

diff --git a/src/components/custom/ShadowCard/index.vue b/src/components/custom/ShadowCard/index.vue
deleted file mode 100644
index 2987084b..00000000
--- a/src/components/custom/ShadowCard/index.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="overflow-hidden shadow-sm rounded-16px bg-light dark:bg-dark">
-    <slot></slot>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-<style scoped></style>
diff --git a/src/components/custom/index.ts b/src/components/custom/index.ts
index 19a6c71b..851dfd28 100644
--- a/src/components/custom/index.ts
+++ b/src/components/custom/index.ts
@@ -2,7 +2,6 @@ import CountTo from './CountTo/index.vue';
 import IconClose from './IconClose/index.vue';
 import ButtonTab from './ButtonTab/index.vue';
 import ChromeTab from './ChromeTab/index.vue';
-import ShadowCard from './ShadowCard/index.vue';
 import BetterScroll from './BetterScroll/index.vue';
 
-export { CountTo, IconClose, ButtonTab, ChromeTab, ShadowCard, BetterScroll };
+export { CountTo, IconClose, ButtonTab, ChromeTab, BetterScroll };
diff --git a/src/views/about/components/DevDependency/index.vue b/src/views/about/components/DevDependency/index.vue
index 4bfa7270..046abe96 100644
--- a/src/views/about/components/DevDependency/index.vue
+++ b/src/views/about/components/DevDependency/index.vue
@@ -1,16 +1,15 @@
 <template>
-  <shadow-card class="p-18px !rounded-4px">
-    <h3 class="pb-18px text-16px font-semibold">开发环境依赖</h3>
+  <n-card title="开发环境依赖" :bordered="false" size="small" class="rounded-16px shadow-sm">
     <n-descriptions label-placement="left" bordered size="small">
       <n-descriptions-item v-for="item in dependencies" :key="item.name" :label="item.name">
         {{ item.version }}
       </n-descriptions-item>
     </n-descriptions>
-  </shadow-card>
+  </n-card>
 </template>
 
 <script setup lang="ts">
-import { NDescriptions, NDescriptionsItem } from 'naive-ui';
+import { NCard, NDescriptions, NDescriptionsItem } from 'naive-ui';
 import { packageJson } from '@/utils';
 
 const dependencies = packageJson.devDependencies;
diff --git a/src/views/about/components/ProDependency/index.vue b/src/views/about/components/ProDependency/index.vue
index 322c8d10..59e1046c 100644
--- a/src/views/about/components/ProDependency/index.vue
+++ b/src/views/about/components/ProDependency/index.vue
@@ -1,16 +1,15 @@
 <template>
-  <shadow-card class="p-18px !rounded-4px">
-    <h3 class="pb-18px text-16px font-semibold">生产环境依赖</h3>
+  <n-card title="生产环境依赖" :bordered="false" size="small" class="rounded-16px shadow-sm">
     <n-descriptions label-placement="left" bordered size="small">
       <n-descriptions-item v-for="item in dependencies" :key="item.name" :label="item.name">
         {{ item.version }}
       </n-descriptions-item>
     </n-descriptions>
-  </shadow-card>
+  </n-card>
 </template>
 
 <script setup lang="ts">
-import { NDescriptions, NDescriptionsItem } from 'naive-ui';
+import { NCard, NDescriptions, NDescriptionsItem } from 'naive-ui';
 import { packageJson } from '@/utils';
 
 const { dependencies } = packageJson;
diff --git a/src/views/about/components/ProjectInfo/index.vue b/src/views/about/components/ProjectInfo/index.vue
index f737ae0d..4149bae7 100644
--- a/src/views/about/components/ProjectInfo/index.vue
+++ b/src/views/about/components/ProjectInfo/index.vue
@@ -1,6 +1,5 @@
 <template>
-  <shadow-card class="p-18px !rounded-4px">
-    <h3 class="pb-18px text-16px font-semibold">项目信息</h3>
+  <n-card title="项目信息" :bordered="false" size="small" class="rounded-16px shadow-sm">
     <n-descriptions label-placement="left" bordered size="small" :column="2">
       <n-descriptions-item label="版本">
         <n-tag type="primary">{{ version }}</n-tag>
@@ -15,11 +14,11 @@
         <a class="g_text-primary" href="https://soybean.pro" target="_blank">预览地址</a>
       </n-descriptions-item>
     </n-descriptions>
-  </shadow-card>
+  </n-card>
 </template>
 
 <script setup lang="ts">
-import { NDescriptions, NDescriptionsItem, NTag } from 'naive-ui';
+import { NCard, NDescriptions, NDescriptionsItem, NTag } from 'naive-ui';
 import { packageJson } from '@/utils';
 
 const { version } = packageJson;
diff --git a/src/views/about/components/ProjectIntroduction/index.vue b/src/views/about/components/ProjectIntroduction/index.vue
index 58abd80e..4d113b27 100644
--- a/src/views/about/components/ProjectIntroduction/index.vue
+++ b/src/views/about/components/ProjectIntroduction/index.vue
@@ -1,12 +1,13 @@
 <template>
-  <shadow-card class="h-120px p-18px !rounded-4px">
-    <h3 class="h-36px leading-36px text-26px font-bold">关于</h3>
+  <n-card title="关于" :bordered="false" size="large" class="rounded-16px shadow-sm">
     <p class="leading-24px">
       Soybean Admin 是一个基于 Vue3、Vite、Naive UI、TypeScript
       的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你。
     </p>
-  </shadow-card>
+  </n-card>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { NCard } from 'naive-ui';
+</script>
 <style scoped></style>
diff --git a/src/views/dashboard/analysis/components/BottomPart/index.vue b/src/views/dashboard/analysis/components/BottomPart/index.vue
index 0e20514e..a810a0c4 100644
--- a/src/views/dashboard/analysis/components/BottomPart/index.vue
+++ b/src/views/dashboard/analysis/components/BottomPart/index.vue
@@ -1,24 +1,27 @@
 <template>
   <n-grid :x-gap="16" :y-gap="16" :item-responsive="true" responsive="screen">
     <n-grid-item span="s:24 m:8">
-      <shadow-card class="h-400px p-18px">
-        <n-timeline>
-          <n-timeline-item v-for="item in timelines" :key="item.type" v-bind="item" />
-        </n-timeline>
-      </shadow-card>
+      <n-card title="时间线" :bordered="false" class="rounded-16px shadow-sm">
+        <div class="h-360px">
+          <n-timeline>
+            <n-timeline-item v-for="item in timelines" :key="item.type" v-bind="item" />
+          </n-timeline>
+        </div>
+      </n-card>
     </n-grid-item>
     <n-grid-item span="s:24 m:16">
-      <shadow-card class="h-400px p-18px">
-        <n-data-table size="small" :columns="columns" :data="tableData" />
-      </shadow-card>
+      <n-card title="表格" :bordered="false" class="rounded-16px shadow-sm">
+        <div class="h-360px">
+          <n-data-table size="small" :columns="columns" :data="tableData" />
+        </div>
+      </n-card>
     </n-grid-item>
   </n-grid>
 </template>
 
 <script setup lang="ts">
 import { h } from 'vue';
-import { NGrid, NGridItem, NTimeline, NTimelineItem, NDataTable, NTag } from 'naive-ui';
-import { ShadowCard } from '@/components';
+import { NGrid, NGridItem, NCard, NTimeline, NTimelineItem, NDataTable, NTag } from 'naive-ui';
 
 interface TimelineData {
   type: 'default' | 'info' | 'success' | 'warning' | 'error';
diff --git a/src/views/dashboard/analysis/components/DataCard/components/GradientBg.vue b/src/views/dashboard/analysis/components/DataCard/components/GradientBg.vue
index c1f991a6..f3bc0dd4 100644
--- a/src/views/dashboard/analysis/components/DataCard/components/GradientBg.vue
+++ b/src/views/dashboard/analysis/components/DataCard/components/GradientBg.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-gradient wh-full p-16px text-white">
+  <div class="bg-gradient p-16px rounded-16px text-white">
     <slot></slot>
   </div>
 </template>
diff --git a/src/views/dashboard/analysis/components/DataCard/index.vue b/src/views/dashboard/analysis/components/DataCard/index.vue
index 5b16ad8f..f74cb13d 100644
--- a/src/views/dashboard/analysis/components/DataCard/index.vue
+++ b/src/views/dashboard/analysis/components/DataCard/index.vue
@@ -1,20 +1,18 @@
 <template>
   <n-grid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
     <n-grid-item v-for="item in cardData" :key="item.id">
-      <shadow-card class="h-100px">
-        <gradient-bg :start-color="item.colors[0]" :end-color="item.colors[1]">
-          <h3 class="text-16px">{{ item.title }}</h3>
-          <div class="flex justify-between pt-12px">
-            <component :is="item.icon" class="text-32px" />
-            <count-to
-              :prefix="item.unit"
-              :start-value="1"
-              :end-value="item.value"
-              class="text-30px text-white dark:text-dark"
-            />
-          </div>
-        </gradient-bg>
-      </shadow-card>
+      <gradient-bg class="h-100px" :start-color="item.colors[0]" :end-color="item.colors[1]">
+        <h3 class="text-16px">{{ item.title }}</h3>
+        <div class="flex justify-between pt-12px">
+          <component :is="item.icon" class="text-32px" />
+          <count-to
+            :prefix="item.unit"
+            :start-value="1"
+            :end-value="item.value"
+            class="text-30px text-white dark:text-dark"
+          />
+        </div>
+      </gradient-bg>
     </n-grid-item>
   </n-grid>
 </template>
@@ -24,7 +22,7 @@ import type { VNodeChild } from 'vue';
 import { NGrid, NGridItem } from 'naive-ui';
 import { BarChartOutlined, MoneyCollectOutlined, TrademarkOutlined } from '@vicons/antd';
 import { DocumentDownload } from '@vicons/carbon';
-import { ShadowCard, CountTo } from '@/components';
+import { CountTo } from '@/components';
 import { dynamicIconRender } from '@/utils';
 import { GradientBg } from './components';
 
diff --git a/src/views/dashboard/analysis/components/TopChart/index.vue b/src/views/dashboard/analysis/components/TopChart/index.vue
index d968ecf8..349047f8 100644
--- a/src/views/dashboard/analysis/components/TopChart/index.vue
+++ b/src/views/dashboard/analysis/components/TopChart/index.vue
@@ -1,36 +1,38 @@
 <template>
   <n-grid :x-gap="16" :y-gap="16" :item-responsive="true" responsive="screen">
     <n-grid-item span="s:24 m:16">
-      <shadow-card class="flex h-360px p-18px">
-        <div class="w-200px h-full py-12px">
-          <h3 class="text-16px font-bold">Dashboard</h3>
-          <p class="text-[#aaa]">Overview Of Lasted Month</p>
-          <h3 class="pt-36px text-24px font-bold">
-            <count-to prefix="$" :start-value="0" :end-value="7754" />
-          </h3>
-          <p class="text-[#aaa]">Current Month Earnings</p>
-          <h3 class="pt-36px text-24px font-bold">
-            <count-to :start-value="0" :end-value="1234" />
-          </h3>
-          <p class="text-[#aaa]">Current Month Sales</p>
-          <n-button class="mt-24px" type="primary">Last Month Summary</n-button>
+      <n-card :bordered="false" class="rounded-16px shadow-sm">
+        <div class="flex h-360px">
+          <div class="w-200px h-full py-12px">
+            <h3 class="text-16px font-bold">Dashboard</h3>
+            <p class="text-[#aaa]">Overview Of Lasted Month</p>
+            <h3 class="pt-36px text-24px font-bold">
+              <count-to prefix="$" :start-value="0" :end-value="7754" />
+            </h3>
+            <p class="text-[#aaa]">Current Month Earnings</p>
+            <h3 class="pt-36px text-24px font-bold">
+              <count-to :start-value="0" :end-value="1234" />
+            </h3>
+            <p class="text-[#aaa]">Current Month Sales</p>
+            <n-button class="mt-24px" type="primary">Last Month Summary</n-button>
+          </div>
+          <div ref="lineRef" class="flex-1 h-full"></div>
         </div>
-        <div ref="lineRef" class="flex-1 h-full"></div>
-      </shadow-card>
+      </n-card>
     </n-grid-item>
     <n-grid-item span="s:24 m:8">
-      <shadow-card class="h-360px">
-        <div ref="pieRef" class="wh-full"></div>
-      </shadow-card>
+      <n-card :bordered="false" class="rounded-16px shadow-sm">
+        <div ref="pieRef" class="w-full h-360px"></div>
+      </n-card>
     </n-grid-item>
   </n-grid>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { NGrid, NGridItem, NButton } from 'naive-ui';
+import { NGrid, NGridItem, NCard, NButton } from 'naive-ui';
 import { Line, Pie } from '@antv/g2plot';
-import { ShadowCard, CountTo } from '@/components';
+import { CountTo } from '@/components';
 import data from './data.json';
 
 const lineRef = ref<HTMLElement | null>(null);
@@ -83,11 +85,9 @@ function renderPieChart() {
       }
     },
     label: {
-      type: 'spider',
-      offset: '8%',
+      type: 'inner',
       autoRotate: false,
-      formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
-      style: { fontSize: 18 }
+      formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`
     },
     statistic: undefined,
     pieStyle: {
diff --git a/src/views/dashboard/workbench/components/HeaderInfo/index.vue b/src/views/dashboard/workbench/components/HeaderInfo/index.vue
deleted file mode 100644
index fbc813da..00000000
--- a/src/views/dashboard/workbench/components/HeaderInfo/index.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <shadow-card class="flex-y-center justify-between h-120px p-12px">
-    <div class="flex-y-center">
-      <img src="@/assets/svg/avatar/avatar01.svg" alt="" class="w-70px h-70px" />
-      <div class="pl-12px">
-        <h3 class="text-18px font-semibold">早安，{{ auth.userInfo.userName }}, 今天又是充满活力的一天！</h3>
-        <p class="leading-30px text-[#999]">今日多云转晴，20℃ - 25℃！</p>
-      </div>
-    </div>
-    <n-space :size="36">
-      <n-statistic v-for="item in statisticData" :key="item.id" v-bind="item"></n-statistic>
-    </n-space>
-  </shadow-card>
-</template>
-
-<script setup lang="ts">
-import { NSpace, NStatistic } from 'naive-ui';
-import { useAuthStore } from '@/store';
-import { ShadowCard } from '@/components';
-
-interface StatisticData {
-  id: number;
-  label: string;
-  value: string;
-}
-
-const auth = useAuthStore();
-
-const statisticData: StatisticData[] = [
-  {
-    id: 0,
-    label: '经验',
-    value: '3年'
-  },
-  {
-    id: 1,
-    label: '项目数量',
-    value: '10+'
-  },
-  {
-    id: 2,
-    label: '主要技术栈',
-    value: 'TS,Vue3,React,Nodejs'
-  }
-];
-</script>
-<style scoped></style>
diff --git a/src/views/dashboard/workbench/components/WorkbenchHeader/index.vue b/src/views/dashboard/workbench/components/WorkbenchHeader/index.vue
new file mode 100644
index 00000000..d72e7ee6
--- /dev/null
+++ b/src/views/dashboard/workbench/components/WorkbenchHeader/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <n-card :bordered="false" class="rounded-16px shadow-sm">
+    <div class="flex-y-center justify-between">
+      <div class="flex-y-center">
+        <img src="@/assets/svg/avatar/avatar01.svg" alt="" class="w-70px h-70px" />
+        <div class="pl-12px whitespace-nowrap">
+          <h3 class="text-18px font-semibold">早安，{{ auth.userInfo.userName }}, 今天又是充满活力的一天！</h3>
+          <p class="leading-30px text-[#999]">今日多云转晴，20℃ - 25℃！</p>
+        </div>
+      </div>
+      <n-space :size="36">
+        <n-statistic v-for="item in statisticData" :key="item.id" v-bind="item"></n-statistic>
+      </n-space>
+    </div>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { NCard, NSpace, NStatistic } from 'naive-ui';
+import { useAuthStore } from '@/store';
+
+interface StatisticData {
+  id: number;
+  label: string;
+  value: string;
+}
+
+const auth = useAuthStore();
+
+const statisticData: StatisticData[] = [
+  {
+    id: 0,
+    label: '项目数',
+    value: '25'
+  },
+  {
+    id: 1,
+    label: '待办',
+    value: '4/16'
+  },
+  {
+    id: 2,
+    label: '消息',
+    value: '12'
+  }
+];
+</script>
+<style scoped></style>
diff --git a/src/views/dashboard/workbench/components/WorkbenchMain/index.vue b/src/views/dashboard/workbench/components/WorkbenchMain/index.vue
new file mode 100644
index 00000000..a94ca62e
--- /dev/null
+++ b/src/views/dashboard/workbench/components/WorkbenchMain/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <n-grid cols="s:1 m:2" responsive="screen" :x-gap="16" :y-gap="16">
+    <n-grid-item>
+      <n-space :vertical="true" :size="16">
+        <n-card title="项目" :bordered="false" size="small" class="shadow-sm rounded-16px">
+          <template #header-extra>
+            <a class="g_text-primary" href="javascript:;">全部项目</a>
+          </template>
+        </n-card>
+        <n-card title="动态" :bordered="false" size="small" class="shadow-sm rounded-16px">
+          <template #header-extra>
+            <a class="g_text-primary" href="javascript:;">更多动态</a>
+          </template>
+        </n-card>
+      </n-space>
+    </n-grid-item>
+    <n-grid-item>
+      <n-space :vertical="true" :size="16">
+        <n-card title="快捷操作" :bordered="false" size="small" class="shadow-sm rounded-16px"></n-card>
+        <n-card title="XX指数" :bordered="false" size="small" class="shadow-sm rounded-16px"></n-card>
+      </n-space>
+    </n-grid-item>
+  </n-grid>
+</template>
+
+<script setup lang="ts">
+import { NGrid, NGridItem, NSpace, NCard } from 'naive-ui';
+</script>
+<style scoped></style>
diff --git a/src/views/dashboard/workbench/components/index.ts b/src/views/dashboard/workbench/components/index.ts
index 09119354..208c51c4 100644
--- a/src/views/dashboard/workbench/components/index.ts
+++ b/src/views/dashboard/workbench/components/index.ts
@@ -1,3 +1,4 @@
-import HeaderInfo from './HeaderInfo/index.vue';
+import WorkbenchHeader from './WorkbenchHeader/index.vue';
+import WorkbenchMain from './WorkbenchMain/index.vue';
 
-export { HeaderInfo };
+export { WorkbenchHeader, WorkbenchMain };
diff --git a/src/views/dashboard/workbench/index.vue b/src/views/dashboard/workbench/index.vue
index 7970127e..9355a59f 100644
--- a/src/views/dashboard/workbench/index.vue
+++ b/src/views/dashboard/workbench/index.vue
@@ -1,25 +1,11 @@
 <template>
   <n-space :vertical="true" :size="16">
-    <header-info />
+    <workbench-header />
+    <workbench-main />
   </n-space>
 </template>
 <script lang="ts" setup>
-import { onActivated } from 'vue';
 import { NSpace } from 'naive-ui';
-import { useLoading } from '@/hooks';
-import { HeaderInfo } from './components';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { loading, startLoading, endLoading } = useLoading(true);
-
-function handleEndLoading() {
-  startLoading();
-  setTimeout(() => {
-    endLoading();
-  }, 800);
-}
-onActivated(() => {
-  handleEndLoading();
-});
+import { WorkbenchHeader, WorkbenchMain } from './components';
 </script>
 <style scoped></style>
diff --git a/src/views/system/login/index.vue b/src/views/system/login/index.vue
index 12a26707..98c2da3d 100644
--- a/src/views/system/login/index.vue
+++ b/src/views/system/login/index.vue
@@ -1,19 +1,21 @@
 <template>
   <div class="login-bg relative flex-center wh-full">
-    <shadow-card class="w-400px p-40px !rounded-20px z-10">
-      <header class="flex-y-center justify-between">
-        <div class="w-70px h-70px rounded-35px overflow-hidden">
-          <system-logo class="wh-full" :fill="true" :color="theme.themeColor" />
-        </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 g_text-primary font-medium">{{ item.label }}</h3>
-          <component :is="item.component" />
-        </div>
-      </main>
-    </shadow-card>
+    <n-card :bordered="false" size="large" class="z-20 !w-auto rounded-20px shadow-sm">
+      <div class="w-400px">
+        <header class="flex-y-center justify-between">
+          <div class="w-70px h-70px rounded-35px overflow-hidden">
+            <system-logo class="wh-full" :fill="true" :color="theme.themeColor" />
+          </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 g_text-primary font-medium">{{ item.label }}</h3>
+            <component :is="item.component" />
+          </div>
+        </main>
+      </div>
+    </n-card>
     <login-bg :theme-color="theme.themeColor" />
   </div>
 </template>
@@ -21,8 +23,8 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import type { Component, PropType } from 'vue';
-import { NGradientText } from 'naive-ui';
-import { ShadowCard, SystemLogo, LoginBg } from '@/components';
+import { NCard, NGradientText } from 'naive-ui';
+import { SystemLogo, LoginBg } from '@/components';
 import { useAppTitle } from '@/hooks';
 import { EnumLoginModule } from '@/enum';
 import { addColorAlpha } from '@/utils';