上移/下移

src/components/assistant/DashboardDesigner.vue

@@ -19,6 +19,10 @@ const emit = defineEmits<{
 	(e: 'removeCard', id: string): void
 	// eslint-disable-next-line no-unused-vars
 	(e: 'addCard', cardData: AddCardData): void
+	// eslint-disable-next-line no-unused-vars
+	(e: 'moveCardUp', id: string): void
+	// eslint-disable-next-line no-unused-vars
+	(e: 'moveCardDown', id: string): void
 }>()
 
 const designerContainer = ref<HTMLElement>()
@@ -43,6 +47,16 @@ const handleCardRemove = (id: string) => {
 	emit('removeCard', id)
 }
 
+// 处理卡片上移
+const handleCardMoveUp = (id: string) => {
+	emit('moveCardUp', id)
+}
+
+// 处理卡片下移
+const handleCardMoveDown = (id: string) => {
+	emit('moveCardDown', id)
+}
+
 // 处理拖拽放置
 const handleDrop = (event: DragEvent) => {
 	event.preventDefault()
@@ -97,6 +111,8 @@ const handleDragOver = (event: DragEvent) => {
 				@update-size="handleCardSizeUpdate"
 				@update-content="handleCardContentUpdate"
 				@remove="handleCardRemove"
+				@move-up="handleCardMoveUp"
+				@move-down="handleCardMoveDown"
 			/>
 
 			<!-- 空状态提示 -->

src/components/assistant/DraggableCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, onUnmounted, watch, nextTick } from 'vue'
-import { Delete, Edit } from '@element-plus/icons-vue'
+import { Delete, Edit, Top, Bottom } 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'
@@ -23,6 +23,10 @@ const emit = defineEmits<{
 	(e: 'updateContent', id: string, content: Content): void
 	// eslint-disable-next-line no-unused-vars
 	(e: 'remove', id: string): void
+	// eslint-disable-next-line no-unused-vars
+	(e: 'moveUp', id: string): void
+	// eslint-disable-next-line no-unused-vars
+	(e: 'moveDown', id: string): void
 }>()
 
 const cardRef = ref<HTMLElement>()
@@ -221,6 +225,18 @@ const handleContextEdit = () => {
 	showContextMenu.value = false
 }
 
+// 处理上移一层
+const handleMoveUp = () => {
+	emit('moveUp', props.card.id)
+	showContextMenu.value = false
+}
+
+// 处理下移一层
+const handleMoveDown = () => {
+	emit('moveDown', props.card.id)
+	showContextMenu.value = false
+}
+
 // 清理事件监听器
 onUnmounted(() => {
 	document.removeEventListener('mousemove', handleDrag)
@@ -303,6 +319,16 @@ watch(()=> props.card.h, () => {
 				<el-icon><Edit /></el-icon>
 				<span>编辑</span>
 			</div>
+			<div class="context-menu-divider"></div>
+			<div class="context-menu-item" @click="handleMoveUp">
+				<el-icon><Top /></el-icon>
+				<span>上移一层</span>
+			</div>
+			<div class="context-menu-item" @click="handleMoveDown">
+				<el-icon><Bottom /></el-icon>
+				<span>下移一层</span>
+			</div>
+			<div class="context-menu-divider"></div>
 			<div class="context-menu-item context-menu-item-danger" @click="handleRemove">
 				<el-icon><Delete /></el-icon>
 				<span>删除</span>
@@ -675,4 +701,10 @@ watch(()=> props.card.h, () => {
 		}
 	}
 }
+
+.context-menu-divider {
+	height: 1px;
+	background: var(--el-border-color-lighter);
+	margin: 4px 0;
+}
 </style>

src/views/assistant/dashboard/edit.vue

@@ -103,6 +103,44 @@ const removeCard = (id: string) => {
 	}
 }
 
+// 上移卡片层级
+const moveCardUp = (id: string) => {
+	const card = cards.value.find((item) => item.id === id)
+	if (card) {
+		// 找到当前卡片上方最近的卡片
+		const upperCards = cards.value.filter((item) => item.z > card.z)
+		if (upperCards.length > 0) {
+			// 找到z值最小的上层卡片
+			const nearestUpperCard = upperCards.reduce((min, current) =>
+				current.z < min.z ? current : min
+			)
+			// 交换z值
+			const tempZ = card.z
+			card.z = nearestUpperCard.z
+			nearestUpperCard.z = tempZ
+		}
+	}
+}
+
+// 下移卡片层级
+const moveCardDown = (id: string) => {
+	const card = cards.value.find((item) => item.id === id)
+	if (card) {
+		// 找到当前卡片下方最近的卡片
+		const lowerCards = cards.value.filter((item) => item.z < card.z)
+		if (lowerCards.length > 0) {
+			// 找到z值最大的下层卡片
+			const nearestLowerCard = lowerCards.reduce((max, current) =>
+				current.z > max.z ? current : max
+			)
+			// 交换z值
+			const tempZ = card.z
+			card.z = nearestLowerCard.z
+			nearestLowerCard.z = tempZ
+		}
+	}
+}
+
 const chat = ref<LmSession[]>([])
 const currentSelectedChat = ref<number>()
 
@@ -456,6 +494,8 @@ onMounted( () => {
 					@update-content="updateCardContent"
 					@remove-card="removeCard"
 					@add-card="addCard"
+					@move-card-up="moveCardUp"
+					@move-card-down="moveCardDown"
 				/>
 			</div>