Skip to content

fix: style bug #7626

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wangdan-fit2cloud merged 1 commit into from
Nov 3, 2026
Merged

fix: style bug #7626

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 32 additions & 2 deletions ui/src/components/business/workspace-relation-tags/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<script setup lang="ts">
import { h, ref } from 'vue'
import { ElScrollbar, type TableTooltipData } from 'element-plus'
import { TOOLTIP_SHOW_DELAY } from '@/components/global/mk-tooltip/constants'
defineOptions({ name: 'WorkspaceRelationTags' })

Expand All @@ -13,21 +15,49 @@ defineProps<{
columns: RelationColumn[]
}>()

// 将内层提示挂载在关联浮层内，移入提示时保持外层浮层打开。
const relationContentRef = ref<HTMLDivElement>()

function formatCellValue(value: unknown): string {
if (Array.isArray(value)) return value.length ? value.join('、') : '-'
return value === null || value === undefined || value === '' ? '-' : String(value)
}

function formatOverflowTooltip({ cellValue }: TableTooltipData<Record<string, unknown>>) {
return h(
ElScrollbar,
{
maxHeight: 'min(300px, calc(100vh - 48px))',
viewClass: 'px-3 py-2',
// 滚动容器需要明确宽度，避免提示框按内容测量时收缩为空。
style: { width: '312px', maxWidth: 'calc(100vw - 48px)', overflowWrap: 'anywhere' },
},
() => formatCellValue(cellValue),
)
}
</script>

<template>
<el-popover placement="bottom" trigger="hover" :width="420" :persistent="false" :show-after="TOOLTIP_SHOW_DELAY" :disabled="!data.length">
<template #reference>
<MkTagGroup :tags="tags" popover-disabled :class="{ 'cursor-pointer': data.length }" />
</template>
<div class="p-6">
<div ref="relationContentRef" class="p-6">
<MkTable :data="data" max-height="300" size="small">
<template v-for="column in columns" :key="column.prop">
<el-table-column :label="column.label" :prop="column.prop" :show-overflow-tooltip="{ appendTo: 'body' }">
<el-table-column
:label="column.label"
:prop="column.prop"
:show-overflow-tooltip="{
appendTo: relationContentRef,
placement: 'bottom',
popperOptions: { strategy: 'absolute' },
popperStyle: { padding: '0' },
enterable: true,
hideAfter: 200,
}"
:tooltip-formatter="formatOverflowTooltip"
>
<template #default="{ row }">
{{ formatCellValue(row[column.prop]) }}
</template>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/workflow-canvas/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ defineExpose({ onmousedown, validate, getGraphData, addNode, clearGraphData, ren
<NodeControl v-if="lf" :logic-flow="lf" />
<div class="absolute left-4 top-4 z-10">
<el-card shadow="always" style="--el-card-padding: 8px">
<NodeAdd v-if="lf" :workflow-mode="workflowMode" @dragstart="onmousedown" @select="addNode" class="mb-1" />
<NodeAdd v-if="lf" :workflow-mode="workflowMode" @dragstart="onmousedown" @select="addNode" class="mb-2" />
<NodeSearch v-if="lf" :logic-flow="lf" />
</el-card>
</div>
Expand Down
Loading