wangziqi/yudao-ui-admin-vben
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
雪忆天堂
2026-06-16 10:01:24 +08:00
parent ad3f996bdb
commit dd4afec7ed
3 changed files with 39 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/effects/common-ui/src/ui/dashboard/typing.ts
View File

@@ -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;

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

@@ -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">
<span class="text-foreground/80"> 待办 </span>
<span class="text-2xl">2/10</span>
</div>
<slot name="actions">
<div class="flex flex-col justify-center text-right">
<span class="text-foreground/80"> 待办 </span>
<span class="text-2xl">2/10</span>
</div>
<div class="mx-12 flex flex-col justify-center text-right md:mx-16">
<span class="text-foreground/80"> 项目 </span>
<span class="text-2xl">8</span>
</div>
<div class="mr-4 flex flex-col justify-center text-right md:mr-10">
<span class="text-foreground/80"> 团队 </span>
<span class="text-2xl">300</span>
</div>
<div class="mx-12 flex flex-col justify-center text-right md:mx-16">
<span class="text-foreground/80"> 项目 </span>
<span class="text-2xl">8</span>
</div>
<div class="mr-4 flex flex-col justify-center text-right md:mr-10">
<span class="text-foreground/80"> 团队 </span>
<span class="text-2xl">300</span>
</div>
</slot>
</div>
</div>
</template>

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

@@ -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-br-xl': index === items.length - 1,
'rounded-bl-xl': index >= items.length - 3 && index % 3 === 0,
'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>
<div class="flex justify-between text-foreground/80">
<span>{{ item.group }}</span>
<span>{{ item.date }}</span>
</div>
<!-- 内容区域支持插槽自定义 -->
<slot name="content" :item="item" :index="index">
<div class="text-foreground/80 mt-4 flex h-10">
{{ item.content }}
</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>