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

<script setup lang="ts">
import { useLoading } from '/@/utils/loading-util'
import { computed, ref } 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 } from '/@/components/assistant/types'

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

const data = ref<MarkdownDashBoard[]>([
	// 示例数据
	{
		id: 'card-1',
		x: 10,
		y: 10,
		w: 40,
		h: 30,
		z: 1,
		title: '示例卡片1',
		data: '> 这是一个引用块示例\n> \n> 可以包含多行内容'
	},
	{
		id: 'card-2',
		x: 55,
		y: 15,
		w: 35,
		h: 25,
		z: 2,
		title: '示例卡片2',
		data: '| 列1 | 列2 | 列3 |\n|-----|-----|-----|\n| 数据1 | 数据2 | 数据3 |\n| 数据4 | 数据5 | 数据6 |'
	}
])

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

const renderer = computed<MarkdownDashBoard[]>(() => [...data.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 {
		// 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(...data.value.map(item => item.z), 0) + 1,
		title: cardData.title,
		data: cardData.data
	}
	data.value.push(newCard)
}

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

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

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

// 删除卡片
const removeCard = (id: string) => {
	const index = data.value.findIndex(item => item.id === id)
	if (index !== -1) {
		data.value.splice(index, 1)
	}
}
</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"
				>
					保存仪表板
				</el-button>
			</div>
		</div>

		<!-- 主要内容区域 -->
		<div class="main-content">
			<!-- 左侧设计器面板 -->
			<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">
				<ComponentLibrary @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);
}
</style>