admin-ui/src/views/assistant/dashboard/edit.vue

<script setup lang="ts">
import { useLoading } from '/@/utils/loading-util'
import { computed, onMounted, ref, watch } from 'vue'
import DashboardDesigner from '/@/components/assistant/DashboardDesigner.vue'
import ComponentLibrary from '/@/components/assistant/ComponentLibrary.vue'
import { ElMessage } from 'element-plus'
import type { MarkdownDashBoard, Position, Size, Content, AddCardData, ComponentLibraryItem } from '/@/components/assistant/types'
import { LmSession } from '/@/api/assist/type'
import assist from '/@/api/assist'

// 预留props，暂时不使用
const props = defineProps<{
	id?: number
}>()

const cards = ref<MarkdownDashBoard[]>([])

// 预留加载功能，暂时不使用
const { loading: loadingDashboard, doLoading: doLoadingDashBoard } = useLoading(async () => {
	if (props.id === undefined) {
		return
	}
	await new Promise((resolve) => setTimeout(resolve, 1000))
	//TODO fetch remote
})

const renderer = computed<MarkdownDashBoard[]>(() => [...cards.value].sort((a, b) => a.z - b.z))

// 生成唯一ID
const generateId = () => {
	return `card-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`
}

const { loading: loadingDashboardSubmit, doLoading: doLoadingDashboardSubmit } = useLoading(async () => {
	try {
		await new Promise((resolve) => setTimeout(resolve, 1000))
		// TODO: 实际的保存逻辑
		// 这里应该调用API保存data.value到后端
		ElMessage.success('仪表板保存成功')
	} catch (error) {
		ElMessage.error('保存失败')
		throw error
	}
})

// 添加新卡片
const addCard = (cardData: AddCardData) => {
	const newCard: MarkdownDashBoard = {
		id: generateId(),
		x: cardData.x ?? Math.random() * 50, // 使用传入位置或随机位置
		y: cardData.y ?? Math.random() * 50,
		w: 30,
		h: 25,
		z: Math.max(...cards.value.map((item) => item.z), 0) + 1,
		title: cardData.title,
		data: cardData.data,
	}
	cards.value.push(newCard)
}

// 更新卡片位置
const updateCardPosition = (id: string, position: Position) => {
	const card = cards.value.find((item) => item.id === id)
	if (card) {
		card.x = position.x
		card.y = position.y
	}
}

// 更新卡片大小
const updateCardSize = (id: string, size: Size) => {
	const card = cards.value.find((item) => item.id === id)
	if (card) {
		card.w = size.w
		card.h = size.h
	}
}

// 更新卡片内容
const updateCardContent = (id: string, content: Content) => {
	const card = cards.value.find((item) => item.id === id)
	if (card) {
		card.title = content.title
		card.data = content.data
	}
}

// 删除卡片
const removeCard = (id: string) => {
	const index = cards.value.findIndex((item) => item.id === id)
	if (index !== -1) {
		cards.value.splice(index, 1)
	}
}

const chat = ref<LmSession[]>([])
const currentSelectedChat = ref<number>()

watch(currentSelectedChat, (newVal) => {
	if (newVal === undefined) {
		library.value = []
		return
	}
	doLoadingLibrary(chat.value[newVal].session_id)
})

const { loading: loadingChat, doLoading: doLoadingChat } = useLoading(async () => {
	const data: { list: LmSession[]; total: number } = await assist.session
		.list({
			pageNum: 1,
			pageSize: 30,
		})
		.catch(() => {
			return {
				list: [],
				total: 0,
			}
		})

	chat.value = data.list
})

// 组件库数据
const library = ref<ComponentLibraryItem[]>([])

const { loading: loadingLibrary, doLoading: doLoadingLibrary } = useLoading(async (id: number) => {})

onMounted(async ()=> {
	await Promise.all([
		doLoadingChat(),
		doLoadingDashBoard(),
	])
})
</script>

<template>
	<div class="dashboard-edit-container">
		<!-- 顶部工具栏 -->
		<div class="toolbar">
			<div class="toolbar-left">
				<h2>仪表板设计器</h2>
			</div>
			<div class="toolbar-right">
				<el-button type="primary" @click="doLoadingDashboardSubmit" :loading="loadingDashboardSubmit" :disabled="loadingDashboard">
					保存仪表板
				</el-button>
			</div>
		</div>

		<!-- 主要内容区域 -->
		<div class="main-content" v-loading="loadingDashboard">
			<!-- 左侧设计器面板 -->
			<div class="designer-panel">
				<DashboardDesigner
					:cards="renderer"
					@update-position="updateCardPosition"
					@update-size="updateCardSize"
					@update-content="updateCardContent"
					@remove-card="removeCard"
					@add-card="addCard"
				/>
			</div>

			<!-- 右侧组件库面板 -->
			<div class="library-panel">
				<el-select class="library-panel-header" v-model="currentSelectedChat" v-loading="loadingChat">
					<el-option v-for="(i,index) in chat" :key="i.session_id" :value="index" :label="i.title"></el-option>
				</el-select>
				<ComponentLibrary class="library-panel-content" :library="library" @add-card="addCard" />
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.dashboard-edit-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--el-bg-color-page);
}

.toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 24px;
	background: var(--el-bg-color);
	border-bottom: 1px solid var(--el-border-color-light);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

	.toolbar-left {
		h2 {
			margin: 0;
			color: var(--el-text-color-primary);
			font-size: 18px;
			font-weight: 600;
		}
	}

	.toolbar-right {
		display: flex;
		gap: 12px;
	}
}

.main-content {
	flex: 1;
	display: flex;
	overflow: hidden;
}

.designer-panel {
	flex: 1;
	background: var(--el-bg-color);
	border-right: 1px solid var(--el-border-color-light);
}

.library-panel {
	width: 300px;
	background: var(--el-bg-color);
	border-left: 1px solid var(--el-border-color-light);

	display: flex;
	flex-direction: column;
	align-items: center;

	.library-panel-header {
		width: 95%;
		margin: 5%;
	}

	.library-panel-content {
		width: 100%;
	}
}
</style>