feat: workbench公共组件增加支持slot方式进行自定义

packages/effects/common-ui/src/ui/dashboard/typing.ts

@@ -2,13 +2,15 @@ import type { Component } from 'vue';
 
 interface AnalysisOverviewItem {
   icon: Component | string;
-  title: string;
+  title?: string;
   totalTitle: string;
   totalValue: number;
-  value: number;
+  value?: number;
 }
 
 interface WorkbenchProjectItem {
+  /** 临时字段 */
+  [key: string]: any;
   color?: string;
   content: string;
   date: string;

packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue

@@ -15,7 +15,7 @@ withDefaults(defineProps<Props>(), {
 </script>
 <template>
   <div class="card-box p-4 py-6 lg:flex">
-    <VbenAvatar :src="avatar" class="size-20" />
+    <VbenAvatar v-if="avatar" :src="avatar" class="size-20" />
     <div
       v-if="$slots.title || $slots.description"
       class="flex flex-col justify-center md:mt-0 md:ml-6"
@@ -28,19 +28,21 @@ withDefaults(defineProps<Props>(), {
       </span>
     </div>
     <div class="mt-4 flex flex-1 justify-end md:mt-0">
-      <div class="flex flex-col justify-center text-right">
+      <slot name="actions">
-        <span class="text-foreground/80"> 待办 </span>
+        <div class="flex flex-col justify-center text-right">
-        <span class="text-2xl">2/10</span>
+          <span class="text-foreground/80"> 待办 </span>
-      </div>
+          <span class="text-2xl">2/10</span>
+        </div>
 
-      <div class="mx-12 flex flex-col justify-center text-right md:mx-16">
+        <div class="mx-12 flex flex-col justify-center text-right md:mx-16">
-        <span class="text-foreground/80"> 项目 </span>
+          <span class="text-foreground/80"> 项目 </span>
-        <span class="text-2xl">8</span>
+          <span class="text-2xl">8</span>
-      </div>
+        </div>
-      <div class="mr-4 flex flex-col justify-center text-right md:mr-10">
+        <div class="mr-4 flex flex-col justify-center text-right md:mr-10">
-        <span class="text-foreground/80"> 团队 </span>
+          <span class="text-foreground/80"> 团队 </span>
-        <span class="text-2xl">300</span>
+          <span class="text-2xl">300</span>
-      </div>
+        </div>
+      </slot>
     </div>
   </div>
 </template>

packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue

@@ -35,29 +35,37 @@ defineEmits(['click']);
         <div
           :class="{
             'border-r-0': index % 3 === 2,
-            'border-b-0': index < 3,
+            'border-t-0': index > 2,
             'pb-4': index > 2,
-            'rounded-bl-xl': index === items.length - 3,
+            'rounded-bl-xl': index >= items.length - 3 && index % 3 === 0,
-            'rounded-br-xl': index === items.length - 1,
+            'rounded-br-xl': index === items.length - 1 && index % 3 === 2,
           }"
-          class="group w-full cursor-pointer border-t border-r border-border p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
+          class="border-border group w-full cursor-pointer border-b border-r border-t p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
+          @click="$emit('click', item)"
         >
           <div class="flex items-center">
             <VbenIcon
               :color="item.color"
               :icon="item.icon"
               class="size-8 transition-all duration-300 group-hover:scale-110"
-              @click="$emit('click', item)"
             />
             <span class="ml-4 text-lg font-medium">{{ item.title }}</span>
           </div>
-          <div class="mt-4 flex h-10 text-foreground/80">
+
-            {{ item.content }}
+          <!-- 内容区域支持插槽自定义 -->
-          </div>
+          <slot name="content" :item="item" :index="index">
-          <div class="flex justify-between text-foreground/80">
+            <div class="text-foreground/80 mt-4 flex h-10">
-            <span>{{ item.group }}</span>
+              {{ item.content }}
-            <span>{{ item.date }}</span>
+            </div>
-          </div>
+          </slot>
+
+          <!-- 底部信息区域支持插槽自定义 -->
+          <slot name="footer" :item="item" :index="index">
+            <div class="text-foreground/80 flex justify-between">
+              <span>{{ item.group }}</span>
+              <span>{{ item.date }}</span>
+            </div>
+          </slot>
         </div>
       </template>
     </CardContent>