瀏覽代碼

非对话页面表格会自动刷新

kagg886 1 月之前
父節點
當前提交
56d1255733

+ 1 - 1
src/api/assist/index.ts

@@ -70,7 +70,7 @@ export default {
 		},
 	},
 
-	struct: (uuid: string) => post('/ai/chat/structdata', { uuid }),
+	struct: (uuid: string, refresh?: boolean) => post('/ai/chat/structdata', { uuid,refresh }),
 
 	// SSE聊天方法
 	chat: (data: {

+ 3 - 0
src/components/assistant/ComponentLibrary.vue

@@ -6,6 +6,7 @@ import type { ComponentLibraryItem, Content } 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()]
 
@@ -91,6 +92,7 @@ const openPreview = (component: any) => {
 							class="preview-content"
 						/>
 						<vue-charts style="width: 100%;height: 200px" :data="component.data" v-if="component.type === 'echarts'"/>
+						<vue-struct-data :uuid="component.data" v-if="component.type === 'structdata'" refresh/>
 					</div>
 
 					<div class="component-actions">
@@ -143,6 +145,7 @@ const openPreview = (component: any) => {
 					:plugins="plugin"
 					class="full-preview-content"
 				/>
+				<vue-struct-data :uuid="previewComponent.data" v-if="previewComponent.type === 'structdata'" refresh/>
 			</div>
 			<template #footer>
 				<div class="dialog-footer">

+ 0 - 8
src/components/assistant/DashboardDesigner.vue

@@ -61,7 +61,6 @@ const handleDrop = (event: DragEvent) => {
 			// 限制在画布范围内
 			const constrainedX = Math.max(0, Math.min(70, x)) // 预留30%宽度
 			const constrainedY = Math.max(0, Math.min(75, y)) // 预留25%高度
-			debugger
 			emit('addCard', {
 				...componentData,
 				x: constrainedX,
@@ -80,13 +79,6 @@ const handleDragOver = (event: DragEvent) => {
 
 <template>
 	<div class="dashboard-designer">
-		<div class="designer-header">
-			<h3>设计画布</h3>
-			<div class="designer-info">
-				<span>{{ cards.length }} 个组件</span>
-			</div>
-		</div>
-
 		<div
 			ref="designerContainer"
 			class="designer-canvas"

+ 2 - 0
src/components/assistant/DraggableCard.vue

@@ -6,6 +6,7 @@ import type { MarkdownDashBoard, Position, Size, Content, ResizeType } from './t
 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()]
 
@@ -263,6 +264,7 @@ watch(()=> props.card.h, () => {
 					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>
 

+ 4 - 0
src/components/assistant/ViewerCard.vue

@@ -5,6 +5,7 @@ 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()]
 
@@ -30,6 +31,8 @@ watch(()=> props.card.w, () => {
 watch(()=> props.card.h, () => {
 	charts.value?.resize()
 })
+
+debugger
 </script>
 
 <template>
@@ -54,6 +57,7 @@ watch(()=> props.card.h, () => {
 					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>

+ 5 - 3
src/components/assistant/types.ts

@@ -2,6 +2,8 @@
  * 仪表板助手相关类型定义
  */
 
+export type MarkdownDashBoardType = 'echarts' | 'markdown' | 'structdata'
+
 // 仪表板卡片类型
 export interface MarkdownDashBoard {
 	/** 卡片唯一标识 */
@@ -18,7 +20,7 @@ export interface MarkdownDashBoard {
 	z: number
 	/** 卡片标题 */
 	title?: string
-	type: 'markdown' | 'echarts'
+	type: MarkdownDashBoardType
 	/** 卡片内容 (Markdown格式) */
 	data: string
 }
@@ -52,7 +54,7 @@ export interface ComponentLibraryItem {
 	/** 组件描述 */
 	description: string
 
-	type: 'markdown' | 'echarts'
+	type: MarkdownDashBoardType
 	/** 组件完整数据 */
 	data: string
 	/** 组件预览数据 */
@@ -65,7 +67,7 @@ export type ResizeType = 'se' | 'e' | 's' | ''
 // 卡片添加数据类型
 export interface AddCardData {
 	title?: string
-	type: 'markdown' | 'echarts'
+	type: MarkdownDashBoardType
 	data: string
 	x?: number
 	y?: number

+ 6 - 3
src/components/markdown/plugins/impl/VueStructData.vue

@@ -8,9 +8,12 @@ import download from 'downloadjs'
 import VueCharts from './VueCharts.vue'
 import { EChartsOption } from 'echarts'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	uuid: string
-}>()
+	refresh?: boolean
+}>(),{
+	refresh: false,
+})
 
 // 定义数据结构类型
 interface StructData {
@@ -21,7 +24,7 @@ interface StructData {
 const data = ref<StructData>()
 
 const { loading: loadingStruct, doLoading: doLoadingStruct } = useLoading(async () => {
-	data.value = await assist.struct(props.uuid)
+	data.value = await assist.struct(props.uuid,props.refresh)
 })
 
 // 导出数据为CSV格式

+ 29 - 0
src/views/assistant/dashboard/edit.vue

@@ -196,6 +196,9 @@ const parseMessagesForLibrary = (messages: Message[]): ComponentLibraryItem[] =>
 
 		// 提取表格
 		extractTablesFromTokens(tokens, messageIndex, libraryItems)
+
+		// 提取结构化数据
+		extractStructDataFromTokens(tokens, messageIndex, libraryItems)
 	})
 
 	return libraryItems
@@ -243,6 +246,32 @@ const extractEchartsFromTokens = (tokens: any[], messageIndex: number, libraryIt
 	})
 }
 
+// 从tokens中提取echarts代码块
+const extractStructDataFromTokens = (tokens: any[], messageIndex: number, libraryItems: ComponentLibraryItem[]) => {
+	tokens.forEach((token, tokenIndex) => {
+		if (token.type === 'fence') {
+			const info = token.info ? token.info.trim() : ''
+			const content = token.content.trim()
+
+			if (info === 'structdata') {
+				try {
+					libraryItems.push({
+						id: `struct-${messageIndex}-${tokenIndex}`,
+						icon: PieChart,
+						description: `来自消息的动态图表`,
+						type: 'structdata',
+						data: content,
+						preview: content,
+					})
+				} catch (error) {
+					console.warn('解析struct配置失败:', error)
+				}
+			}
+		}
+	})
+}
+
+
 // 解析表格数据的接口
 interface TableData {
 	headers: string[]