xkyy/xk-admin
1
0
Fork 0
Code Issues Pull Requests Actions 3 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 { interface AnalysisOverviewItem {
icon: Component | string; icon: Component | string;
title: string; title?: string;
totalTitle: string; totalTitle: string;
totalValue: number; totalValue: number;
value: number; value?: number;
} }
interface WorkbenchProjectItem { interface WorkbenchProjectItem {
/** 临时字段 */
[key: string]: any;
color?: string; color?: string;
content: string; content: string;
date: 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> </script>
<template> <template>
<div class="card-box p-4 py-6 lg:flex"> <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 <div
v-if="$slots.title || $slots.description" v-if="$slots.title || $slots.description"
class="flex flex-col justify-center md:mt-0 md:ml-6" class="flex flex-col justify-center md:mt-0 md:ml-6"
@@ -28,19 +28,21 @@ withDefaults(defineProps<Props>(), {
</span> </span>
</div> </div>
<div class="mt-4 flex flex-1 justify-end md:mt-0"> <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>
</div> </div>
</template> </template>

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

@@ -35,29 +35,37 @@ defineEmits(['click']);
<div <div
:class="{ :class="{
'border-r-0': index % 3 === 2, 'border-r-0': index % 3 === 2,
'border-b-0': index < 3, 'border-t-0': index > 2,
'pb-4': 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"> <div class="flex items-center">
<VbenIcon <VbenIcon
:color="item.color" :color="item.color"
:icon="item.icon" :icon="item.icon"
class="size-8 transition-all duration-300 group-hover:scale-110" 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> <span class="ml-4 text-lg font-medium">{{ item.title }}</span>
</div> </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> </div>
</template> </template>
</CardContent> </CardContent>