docs(projects): 添加书写规范文档

src/components/custom/CountTo/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <span :style="{ color }">
-    {{ value }}
-  </span>
+  <span>{{ value }}</span>
 </template>
 <script lang="ts" setup>
 import { ref, computed, onMounted, watch, watchEffect } from 'vue';
@@ -48,10 +46,6 @@ const props = defineProps({
     type: String,
     default: '.'
   },
-  color: {
-    type: String,
-    default: '#666'
-  },
   useEasing: {
     type: Boolean,
     default: true

src/components/custom/ShadowCard/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-light dark:bg-dark rounded-16px shadow-sm">
+  <div class="overflow-hidden shadow-sm rounded-16px bg-light dark:bg-dark">
     <slot></slot>
   </div>
 </template>

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

@@ -7,7 +7,7 @@
         </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" />
+          <count-to v-else prefix="$" :start-value="1" :end-value="item.value" class="text-30px text-[#666]" />
         </div>
         <div class="flex justify-between p-8px px-16px">
           <n-skeleton v-if="loading" :width="100" size="medium" />

src/views/dashboard/workbench/components/GradientBg.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="bg-gradient w-full h-full p-16px text-white">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  /** 渐变开始的颜色 */
+  startColor: string;
+  /** 渐变结束的颜色 */
+  endColor: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  startColor: '#56cdf3',
+  endColor: '#719de3'
+});
+
+const gradientStyle = computed(() => `linear-gradient(to bottom right, ${props.startColor}, ${props.endColor})`);
+</script>
+<style scoped>
+.bg-gradient {
+  background-image: v-bind(gradientStyle);
+}
+</style>

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

@@ -0,0 +1,3 @@
+import GradientBg from './GradientBg.vue';
+
+export { GradientBg };

src/views/dashboard/workbench/index.vue

@@ -8,9 +8,22 @@
         <shadow-card class="h-360px"></shadow-card>
       </n-grid-item>
     </n-grid>
-    <n-grid cols="s:2 m:4" responsive="screen" :x-gap="16" :y-gap="16">
-      <n-grid-item v-for="i in 4" :key="i">
-        <shadow-card class="h-100px"></shadow-card>
+    <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>
     <n-grid :x-gap="16" :y-gap="16" :item-responsive="true" responsive="screen">
@@ -25,8 +38,56 @@
 </template>
 
 <script lang="ts" setup>
+import type { VNodeChild } from 'vue';
 import { NSpace, NGrid, NGridItem } from 'naive-ui';
-import { ShadowCard } from '@/components';
-// import { NGradientText, NSpace, NButton, NSpin, NTag, NSwitch, NCheckbox, NRadio, useDialog } 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>