refactor(components): 用NCard组件替换ShadowCard

src/components/custom/ShadowCard/index.vue

@@ -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>

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 };

src/views/about/components/DevDependency/index.vue

@@ -1,16 +1,15 @@
 <template>
-  <shadow-card class="p-18px !rounded-4px">
+  <n-card title="开发环境依赖" :bordered="false" size="small" class="rounded-16px shadow-sm">
-    <h3 class="pb-18px text-16px font-semibold">开发环境依赖</h3>
     <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;

src/views/about/components/ProDependency/index.vue

@@ -1,16 +1,15 @@
 <template>
-  <shadow-card class="p-18px !rounded-4px">
+  <n-card title="生产环境依赖" :bordered="false" size="small" class="rounded-16px shadow-sm">
-    <h3 class="pb-18px text-16px font-semibold">生产环境依赖</h3>
     <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;

src/views/about/components/ProjectInfo/index.vue

@@ -1,6 +1,5 @@
 <template>
-  <shadow-card class="p-18px !rounded-4px">
+  <n-card title="项目信息" :bordered="false" size="small" class="rounded-16px shadow-sm">
-    <h3 class="pb-18px text-16px font-semibold">项目信息</h3>
     <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;

src/views/about/components/ProjectIntroduction/index.vue

@@ -1,12 +1,13 @@
 <template>
-  <shadow-card class="h-120px p-18px !rounded-4px">
+  <n-card title="关于" :bordered="false" size="large" class="rounded-16px shadow-sm">
-    <h3 class="h-36px leading-36px text-26px font-bold">关于</h3>
     <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>

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-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>
-      </shadow-card>
+        </div>
+      </n-card>
     </n-grid-item>
     <n-grid-item span="s:24 m:16">
-      <shadow-card class="h-400px p-18px">
+      <n-card title="表格" :bordered="false" class="rounded-16px shadow-sm">
+        <div class="h-360px">
           <n-data-table size="small" :columns="columns" :data="tableData" />
-      </shadow-card>
+        </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 { NGrid, NGridItem, NCard, NTimeline, NTimelineItem, NDataTable, NTag } from 'naive-ui';
-import { ShadowCard } from '@/components';
 
 interface TimelineData {
   type: 'default' | 'info' | 'success' | 'warning' | 'error';

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>

src/views/dashboard/analysis/components/DataCard/index.vue

@@ -1,8 +1,7 @@
 <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 class="h-100px" :start-color="item.colors[0]" :end-color="item.colors[1]">
-        <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" />
@@ -14,7 +13,6 @@
           />
         </div>
       </gradient-bg>
-      </shadow-card>
     </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';
 

src/views/dashboard/analysis/components/TopChart/index.vue

@@ -1,7 +1,8 @@
 <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">
+      <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>
@@ -16,21 +17,22 @@
             <n-button class="mt-24px" type="primary">Last Month Summary</n-button>
           </div>
           <div ref="lineRef" class="flex-1 h-full"></div>
-      </shadow-card>
+        </div>
+      </n-card>
     </n-grid-item>
     <n-grid-item span="s:24 m:8">
-      <shadow-card class="h-360px">
+      <n-card :bordered="false" class="rounded-16px shadow-sm">
-        <div ref="pieRef" class="wh-full"></div>
+        <div ref="pieRef" class="w-full h-360px"></div>
-      </shadow-card>
+      </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',
+      type: 'inner',
-      offset: '8%',
       autoRotate: false,
-      formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
+      formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`
-      style: { fontSize: 18 }
     },
     statistic: undefined,
     pieStyle: {

src/views/dashboard/workbench/components/HeaderInfo/index.vue

@@ -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>

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>

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>

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 };

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 { WorkbenchHeader, WorkbenchMain } from './components';
-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();
-});
 </script>
 <style scoped></style>

src/views/system/login/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="login-bg relative flex-center wh-full">
-    <shadow-card class="w-400px p-40px !rounded-20px z-10">
+    <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" />
@@ -13,7 +14,8 @@
             <component :is="item.component" />
           </div>
         </main>
-    </shadow-card>
+      </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 { NCard, NGradientText } from 'naive-ui';
-import { ShadowCard, SystemLogo, LoginBg } from '@/components';
+import { SystemLogo, LoginBg } from '@/components';
 import { useAppTitle } from '@/hooks';
 import { EnumLoginModule } from '@/enum';
 import { addColorAlpha } from '@/utils';