feat(projects): 分析页更新，添加关于页面

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

@@ -0,0 +1,75 @@
+<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>
+    </n-grid-item>
+  </n-grid>
+</template>
+
+<script setup lang="ts">
+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 { dynamicIconRender } from '@/utils';
+import { GradientBg } from './components';
+
+interface CardData {
+  id: string;
+  title: string;
+  value: number;
+  unit: string;
+  colors: [string, string];
+  icon: () => VNodeChild;
+}
+
+const cardData: CardData[] = [
+  {
+    id: 'visit',
+    title: '访问量',
+    value: 1000000,
+    unit: '',
+    colors: ['#ec4786', '#b955a4'],
+    icon: dynamicIconRender(BarChartOutlined)
+  },
+  {
+    id: 'amount',
+    title: '成交额',
+    value: 234567.89,
+    unit: '$',
+    colors: ['#865ec0', '#5144b4'],
+    icon: dynamicIconRender(MoneyCollectOutlined)
+  },
+  {
+    id: 'download',
+    title: '下载数',
+    value: 666666,
+    unit: '',
+    colors: ['#56cdf3', '#719de3'],
+    icon: dynamicIconRender(DocumentDownload)
+  },
+  {
+    id: 'trade',
+    title: '成交数',
+    value: 999999,
+    unit: '',
+    colors: ['#fcbc25', '#f68057'],
+    icon: dynamicIconRender(TrademarkOutlined)
+  }
+];
+</script>
+<style scoped></style>