admin-ui/src/components/assistant/ViewerCard.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import Markdown from '/@/components/markdown/Markdown.vue'
import type { MarkdownDashBoard } from './types'
import { MarkdownPlugin } from '/@/components/markdown/type/markdown'
import EChartsPlugin from '/@/components/markdown/plugins/echarts'
import VueCharts from '/@/components/markdown/plugins/impl/VueCharts.vue'
import VueStructData from '/@/components/markdown/plugins/impl/VueStructData.vue'

const plugin: Array<MarkdownPlugin<any>> = [EChartsPlugin()]

const props = defineProps<{
	card: MarkdownDashBoard
}>()

// 计算卡片样式
const cardStyle = computed(() => ({
	position: 'absolute' as const,
	left: `${props.card.x}%`,
	top: `${props.card.y}%`,
	width: `${props.card.w}%`,
	height: `${props.card.h}%`,
	zIndex: props.card.z + 100
}))

const charts = ref()

watch(()=> props.card.w, () => {
	charts.value?.resize()
})
watch(()=> props.card.h, () => {
	charts.value?.resize()
})
</script>

<template>
	<div
		:style="cardStyle"
		class="viewer-card"
	>
		<el-card class="card-content" shadow="hover">
			<!-- 卡片标题栏 -->
			<template #header v-if="card.title !== undefined">
				<div class="card-header">
					<span class="card-title">{{ card.title }}</span>
				</div>
			</template>

			<!-- 卡片内容 -->
			<div class="card-body">
				<Markdown
					v-if="card.type === 'markdown'"
					:content="card.data"
					:plugins="plugin"
					class="markdown-content"
				/>
				<vue-charts ref="charts" style="width: 100%;height: 100%" :data="card.data" v-if="card.type === 'echarts'"/>
				<vue-struct-data :uuid="card.data" v-if="card.type === 'structdata'" refresh/>
			</div>
		</el-card>
	</div>
</template>

<style scoped lang="scss">
.viewer-card {
	transition: none;
}

.card-content {
	height: 100%;
	display: flex;
	flex-direction: column;

	:deep(.el-card__header) {
		padding: 12px 16px;
		border-bottom: 1px solid var(--el-border-color-lighter);
		background: var(--el-fill-color-extra-light);
	}

	:deep(.el-card__body) {
		flex: 1;
		padding: 16px;
		overflow: auto;
	}
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	user-select: none;
}

.card-title {
	font-weight: 600;
	color: var(--el-text-color-primary);
	font-size: 14px;
}

.card-body {
	height: 100%;
	overflow: auto;
}

.markdown-content {
	font-size: 13px;
	line-height: 1.5;

	:deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
		margin-top: 12px;
		margin-bottom: 8px;
		font-size: 14px;
	}

	:deep(p) {
		margin-bottom: 8px;
	}

	:deep(blockquote) {
		margin: 8px 0;
		padding: 8px 12px;
		font-size: 12px;
	}

	:deep(table) {
		font-size: 12px;
		margin: 8px 0;
	}

	:deep(th), :deep(td) {
		padding: 4px 8px;
	}
}
</style>