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

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

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

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

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

onMounted(doLoadingDashBoard)

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 {
		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(...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)
	}
}

// 组件库数据
const library = ref<ComponentLibraryItem[]>([
	{
		id: 'quote-block',
		title: '引用块',
		icon: 'ele-Document',
		description: '用于显示引用内容',
		data: `> ### 重要提示
>
> 这是一个引用块示例，可以用来显示重要信息、提示或者引用其他内容。
>
> 支持多行内容和**格式化文本**。`,
		preview: `> 这是一个引用块示例\n> 可以包含重要信息`,
	},
	{
		id: 'data-table',
		title: '数据表格',
		icon: 'ele-Document',
		description: '用于显示结构化数据',
		data: `| 指标名称 | 当前值 | 目标值 | 完成率 |
|----------|--------|--------|--------|
| 用户注册 | 1,234 | 1,500 | 82.3% |
| 活跃用户 | 856 | 1,000 | 85.6% |
| 转化率 | 12.5% | 15% | 83.3% |
| 收入 | ¥45,678 | ¥50,000 | 91.4% |`,
		preview: `| 指标 | 数值 | 状态 |\n|------|------|------|\n| 用户 | 1,234 | 正常 |`,
	},
])
//
</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">
				<ComponentLibrary :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);
}
</style>