feat(3d-situational-awareness): 为可折叠面板添加标题点击处理程序

为 CollapsiblePanel 组件添加一个新的“title-click”事件,以允许父组件处理面板标题的点击。在 LeftPanel 中实现此功能,以便在点击“快速匹配”面板标题时触发“force-preset-toggle”事件。
This commit is contained in:
Zzc 2025-11-25 14:44:03 +08:00
parent 568e89686f
commit 994b237ea4
2 changed files with 21 additions and 5 deletions

View File

@ -13,7 +13,11 @@
<DisasterAnalysis />
</CollapsiblePanel>
<CollapsiblePanel title="快速匹配" subtitle="「力量预置」">
<CollapsiblePanel
title="快速匹配"
subtitle="「力量预置」"
@title-click="handleForcePresetToggle"
>
<ForcePreset />
</CollapsiblePanel>
@ -110,7 +114,7 @@ const handleCloseVideoModal = () => {
}
//
const emit = defineEmits(['start-dispatch', 'view-plan'])
const emit = defineEmits(['start-dispatch', 'view-plan', 'force-preset-toggle'])
/**
* 处理力量调度启动事件向上传递给父组件
@ -125,6 +129,14 @@ const handleStartDispatch = (payload) => {
const handleViewPlan = (plan) => {
emit('view-plan', plan)
}
/**
* 处理快速匹配面板标题点击事件
*/
const handleForcePresetToggle = () => {
console.log('[LeftPanel] 快速匹配标题被点击')
emit('force-preset-toggle')
}
</script>
<style scoped lang="scss">

View File

@ -2,8 +2,7 @@
<section class="collapsible-panel" :class="{ 'collapsible-panel--collapsed': isCollapsed }">
<div
class="collapsible-panel__header"
:class="{ 'collapsible-panel__header--clickable': collapsible }"
@click="collapsible && toggle()"
@click="handleHeaderClick"
>
<PanelHeader :title="title" :subtitle="subtitle">
<template #title-icon>
@ -85,7 +84,7 @@ const props = defineProps({
}
})
const emit = defineEmits(['update:collapsed', 'toggle'])
const emit = defineEmits(['update:collapsed', 'toggle', 'title-click'])
//
const isControlled = computed(() => props.collapsed !== undefined)
@ -108,6 +107,11 @@ const isCollapsed = computed({
}
})
//
function handleHeaderClick() {
emit('title-click')
}
// /
function toggle() {
if (!props.collapsible) return