feat: add dashboard page

packages/business/universal-ui/src/dashboard/workbench/workbench-project.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { WorkbenchProjectItem } from '../typing';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  items: WorkbenchProjectItem[];
+  title: string;
+}
+
+defineOptions({
+  name: 'WorkbenchProject',
+});
+
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+</script>
+
+<template>
+  <Card>
+    <CardHeader class="py-4">
+      <CardTitle class="text-lg">{{ title }}</CardTitle>
+    </CardHeader>
+    <CardContent class="flex flex-wrap p-0">
+      <template v-for="(item, index) in items" :key="item.title">
+        <div
+          :class="{
+            'border-r-0': index % 3 === 2,
+            'border-b-0': index < 3,
+            'pb-4': index > 2,
+          }"
+          class="border-border w-1/3 border-b border-r border-t p-4 transition-all hover:shadow-xl"
+        >
+          <div class="flex items-center">
+            <VbenIcon :color="item.color" :icon="item.icon" class="size-8" />
+            <span class="ml-4 text-lg font-medium">{{ item.title }}</span>
+          </div>
+          <div class="text-foreground/80 mt-4 flex h-10">
+            {{ item.content }}
+          </div>
+          <div class="text-foreground/80 flex justify-between">
+            <span>{{ item.group }}</span>
+            <span>{{ item.date }}</span>
+          </div>
+        </div>
+      </template>
+    </CardContent>
+  </Card>
+</template>