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

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

@@ -1,28 +0,0 @@
-<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/HeaderInfo/index.vue

@@ -0,0 +1,47 @@
+<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/index.ts

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