修复预览页面内的charts不随card移动而改变大小的bug

src/components/assistant/ComponentLibrary.vue

@@ -35,7 +35,8 @@ const handleDragStart = (event: DragEvent, component: any) => {
 const addComponent = (component: any) => {
 	emit('addCard', {
 		title: component.title,
-		data: component.data
+		data: component.data,
+		type: component.type
 	})
 }
 

src/components/assistant/DraggableCard.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, computed, onUnmounted } from 'vue'
+import { ref, computed, onUnmounted, watch } from 'vue'
 import { Delete, Edit } from '@element-plus/icons-vue'
 import Markdown from '/@/components/markdown/Markdown.vue'
 import type { MarkdownDashBoard, Position, Size, Content, ResizeType } 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'
 
 const plugin: Array<MarkdownPlugin<any>> = [EChartsPlugin()]
 
@@ -217,6 +218,16 @@ onUnmounted(() => {
 	document.removeEventListener('mousemove', handleResize)
 	document.removeEventListener('mouseup', stopResize)
 })
+
+const charts = ref()
+
+watch(()=> props.card.w, () => {
+	charts.value?.resize()
+})
+watch(()=> props.card.h, () => {
+	charts.value?.resize()
+})
+
 </script>
 
 <template>
@@ -237,10 +248,12 @@ onUnmounted(() => {
 			<!-- 卡片内容 -->
 			<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'"/>
 			</div>
 		</el-card>
 

src/components/assistant/types.ts

@@ -18,6 +18,7 @@ export interface MarkdownDashBoard {
 	z: number
 	/** 卡片标题 */
 	title?: string
+	type: 'markdown' | 'echarts'
 	/** 卡片内容 (Markdown格式) */
 	data: string
 }
@@ -50,6 +51,8 @@ export interface ComponentLibraryItem {
 	icon: any
 	/** 组件描述 */
 	description: string
+
+	type: 'markdown' | 'echarts'
 	/** 组件完整数据 */
 	data: string
 	/** 组件预览数据 */
@@ -61,7 +64,8 @@ export type ResizeType = 'se' | 'e' | 's' | ''
 
 // 卡片添加数据类型
 export interface AddCardData {
-	title: string
+	title?: string
+	type: 'markdown' | 'echarts'
 	data: string
 	x?: number
 	y?: number

src/components/markdown/plugins/impl/VueCharts.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import {onMounted, onUnmounted, ref} from "vue";
+import { onMounted, onUnmounted, ref } from 'vue'
 import * as echarts from 'echarts'
 
 type Props = {
-  data: string
+	data: string
 }
 
 const prop = defineProps<Props>()
@@ -12,19 +12,19 @@ let instance: echarts.ECharts
 const dom = ref<HTMLDivElement>()
 
 const resizeHandler = () => {
-  instance?.resize()
+	instance?.resize()
 }
 
 const showOrigin = ref(false)
-onMounted(()=> {
-  let data: echarts.EChartsOption
-  try {
-    data = JSON.parse(decodeURIComponent(prop.data))
-  } catch (e) {
-    console.error(e)
-    return
-  }
-  instance = echarts.init(dom.value)
+onMounted(() => {
+	let data: echarts.EChartsOption
+	try {
+		data = JSON.parse(decodeURIComponent(prop.data))
+	} catch (e) {
+		console.error(e)
+		return
+	}
+	instance = echarts.init(dom.value)
 
 	try {
 		instance.setOption(data)
@@ -32,19 +32,21 @@ onMounted(()=> {
 		showOrigin.value = true
 	}
 
-  window.addEventListener('resize', resizeHandler)
+	window.addEventListener('resize', resizeHandler)
 })
 
 onUnmounted(() => {
-  window.removeEventListener('resize', resizeHandler)
-  instance?.dispose()
+	window.removeEventListener('resize', resizeHandler)
+	instance?.dispose()
 })
+
+defineExpose<{
+	resize: () => void
+}>({ resize: resizeHandler })
 </script>
 
 <template>
-  <div ref="dom"></div>
+	<div ref="dom"></div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/assistant/dashboard/edit.vue

@@ -58,6 +58,7 @@ const addCard = (cardData: AddCardData) => {
 		w: 30,
 		h: 25,
 		z: Math.max(...cards.value.map((item) => item.z), 0) + 1,
+		type: cardData.type,
 		title: cardData.title,
 		data: cardData.data,
 	}
@@ -146,6 +147,7 @@ const defaultLibrary: ComponentLibraryItem[] = [
 		id: Math.random().toString(),
 		icon: 'ele-PieChart',
 		description: '测试',
+		type: 'markdown',
 		data: '测试',
 		preview: '测试',
 	},
@@ -226,12 +228,9 @@ const extractEchartsFromTokens = (tokens: any[], messageIndex: number, libraryIt
 						title: title,
 						icon: PieChart,
 						description: `来自消息的ECharts图表`,
-						data: `\`\`\`echarts
-${content}
-\`\`\``,
-						preview: `\`\`\`echarts
-${content}
-\`\`\``,
+						type: 'echarts',
+						data: content,
+						preview: content,
 					})
 				} catch (error) {
 					console.warn('解析echarts配置失败:', error)
@@ -264,6 +263,7 @@ const extractTablesFromTokens = (tokens: any[], messageIndex: number, libraryIte
 					id: `table-${messageIndex}-${tokenIndex}`,
 					title: title,
 					icon: 'ele-Table',
+					type: 'markdown',
 					description: `来自消息的数据表格 (${tableData.rows.length}行 x ${tableData.headers.length}列)`,
 					data: generateMarkdownTable(tableData),
 					preview: generateMarkdownTable(previewData),