feat(projects): 首页更新

src/layouts/BasicLayout/components/GlobalFooter/index.vue

@@ -1,6 +1,6 @@
 <template>
   <n-layout-footer>
-    <h3 class="flex-center h-48px text-18px text-error">页脚</h3>
+    <div class="flex-center h-48px text-[#00000073]">Copyright ©2021 Soybean Admin</div>
   </n-layout-footer>
 </template>
 

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

@@ -1,6 +1,74 @@
 <template>
-  <div></div>
+  <n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8">
+    <n-grid-item v-for="item in cardData" :key="item.title">
+      <n-card :title="item.title" :segmented="{ content: true, footer: true }" size="small" :bordered="false">
+        <template #header-extra>
+          <n-tag :type="item.color">{{ item.action }}</n-tag>
+        </template>
+        <div class="flex justify-between py-4px px-4px">
+          <n-skeleton v-if="loading" :width="100" size="medium" />
+          <count-to v-else prefix="$" :start-value="1" :end-value="item.value" class="text-30px" />
+        </div>
+        <div class="flex justify-between p-8px px-16px">
+          <n-skeleton v-if="loading" :width="100" size="medium" />
+          <template v-else>
+            <span>总{{ item.title }}</span>
+            <count-to prefix="$" :start-value="1" :end-value="item.total" />
+          </template>
+        </div>
+      </n-card>
+    </n-grid-item>
+  </n-grid>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { NGrid, NGridItem, NCard, NTag, NSkeleton } from 'naive-ui';
+import { CountTo } from '@/components';
+
+interface CardData {
+  title: string;
+  value: number;
+  total: number;
+  color: 'default' | 'primary' | 'warning' | 'success' | 'info' | 'error';
+  action: string;
+}
+
+defineProps({
+  loading: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const cardData: CardData[] = [
+  {
+    title: '访问数',
+    value: 2000,
+    total: 120000,
+    color: 'error',
+    action: '月'
+  },
+  {
+    title: '成交额',
+    value: 20000,
+    total: 500000,
+    color: 'success',
+    action: '月'
+  },
+  {
+    title: '下载数',
+    value: 8000,
+    total: 120000,
+    color: 'primary',
+    action: '周'
+  },
+  {
+    title: '成交数',
+    value: 5000,
+    total: 50000,
+    color: 'warning',
+    action: '年'
+  }
+];
+</script>
 <style scoped></style>

src/views/dashboard/analysis/components/NavCard.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="py-16px">
+    <n-grid cols="1 s:2 m:3 l:8 xl:8 2xl:8" responsive="screen" :x-gap="16" :y-gap="8">
+      <n-grid-item v-for="item in navData" :key="item.label">
+        <n-card content-style="padding-top: 0;" size="small" :bordered="false">
+          <template #footer>
+            <n-skeleton v-if="loading" size="medium" />
+            <div v-else class="cursor-pointer">
+              <p class="flex-x-center">
+                <span>
+                  <n-icon :size="32" class="flex-1" :color="item.color">
+                    <Icon :icon="item.icon" />
+                  </n-icon>
+                </span>
+              </p>
+              <p class="flex-x-center">
+                <span>{{ item.label }}</span>
+              </p>
+            </div>
+          </template>
+        </n-card>
+      </n-grid-item>
+    </n-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NGrid, NGridItem, NCard, NSkeleton, NIcon } from 'naive-ui';
+import { Icon } from '@iconify/vue';
+
+interface NavData {
+  label: string;
+  color: string;
+  icon: String;
+}
+
+defineProps({
+  loading: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const navData: NavData[] = [
+  {
+    label: '用户',
+    color: '#69c0ff',
+    icon: 'ant-design:usergroup-add-outlined'
+  },
+  {
+    label: '分析',
+    color: '#69c0ff',
+    icon: 'ant-design:bar-chart-outlined'
+  },
+  {
+    label: '商品',
+    color: '#ff9c6e',
+    icon: 'ant-design:shopping-cart-outlined'
+  },
+  {
+    label: '订单',
+    color: '#b37feb',
+    icon: 'ant-design:account-book-outlined'
+  },
+  {
+    label: '票据',
+    color: '#ffd666',
+    icon: 'ant-design:credit-card-outlined'
+  },
+  {
+    label: '消息',
+    color: '#5cdbd3',
+    icon: 'ant-design:mail-outlined'
+  },
+  {
+    label: '标签',
+    color: '#ff85c0',
+    icon: 'ant-design:tags-outlined'
+  },
+  {
+    label: '配置',
+    color: '#ffc069',
+    icon: 'ant-design:setting-outlined'
+  }
+];
+</script>
+<style scoped></style>

src/views/dashboard/analysis/components/index.ts

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

src/views/dashboard/analysis/index.vue

@@ -1,55 +1,18 @@
 <template>
-  <div>
-    <n-space>
-      <n-card v-for="item in cardData" :key="item.title" :title="item.title">
-        <template #header-extra>
-          <n-tag :type="item.color">{{ item.action }}</n-tag>
-        </template>
-      </n-card>
-    </n-space>
+  <div class="p-10px">
+    <data-card :loading="loading" />
+    <nav-card :loading="loading" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { NSpace, NCard, NTag } from 'naive-ui';
+import { ref } from 'vue';
+import { DataCard, NavCard } from './components';
 
-interface CardData {
-  title: string;
-  value: number;
-  total: number;
-  color: 'default' | 'primary' | 'warning' | 'success';
-  action: string;
-}
+const loading = ref(true);
 
-const cardData: CardData[] = [
-  {
-    title: '访问数',
-    value: 2000,
-    total: 120000,
-    color: 'default',
-    action: '月'
-  },
-  {
-    title: '成交额',
-    value: 20000,
-    total: 500000,
-    color: 'success',
-    action: '月'
-  },
-  {
-    title: '下载数',
-    value: 8000,
-    total: 120000,
-    color: 'primary',
-    action: '周'
-  },
-  {
-    title: '成交数',
-    value: 5000,
-    total: 50000,
-    color: 'warning',
-    action: '年'
-  }
-];
+setTimeout(() => {
+  loading.value = false;
+}, 1500);
 </script>
 <style scoped></style>