feat(maps): 画布聚焦减负(聚焦层/详情浮层/汇总条/目标树收起/跨层摘要)— C 方案
ci/woodpecker/push/main Pipeline was successful

- MapCanvas: 层聚焦与回全景联动;右栏停用改自绘可拖详情浮层;目标树默认收起+localStorage 持久化;底部跨层关系摘要条;聚焦态只绘聚焦层同层连线
- StrategyLayer: 层标题可点击聚焦并标「聚焦中」;非聚焦层压缩为 ≤48px 单行摘要(层名—达成率/目标数/mini 色条)
- MapSummaryBar: 汇总条压缩 ≤44px、5 项同排;窄屏无横向溢出
- MapEditBar: 新增「全景 / L1–L4」聚焦切换 chip(内联 SVG,无 emoji)
- 只读渲染层改动:不写 canvas_data / map_connections,无新增写链路调用
This commit is contained in:
wecom-fullstack
2026-10-24 20:03:32 +08:00
parent b3f31f9ac9
commit 63a2bac424
4 changed files with 682 additions and 152 deletions
@@ -90,9 +90,32 @@
回全景
</el-button>
<el-button size="small" text @click="$emit('toggle-tree')">
<el-button size="small" text @click="$emit('toggle-tree')" :title="treeOpen ? '收起左侧目标树(画布全宽)' : '展开左侧目标树'">
{{ treeOpen ? '收起目标树' : '展开目标树' }}
</el-button>
<!-- C 方案:聚焦开关(全景 = 默认四层等宽) -->
<div class="eb-chips eb-focus" role="group" aria-label="聚焦层">
<button
type="button"
class="eb-chip"
:class="{ on: !focusLayer }"
title="四层全景(默认)"
@click="$emit('focus-layer', null)"
>全景</button>
<button
v-for="cfg in layerConfigs"
:key="'focus-' + cfg.key"
type="button"
class="eb-chip"
:class="{ on: focusLayer === cfg.key }"
:title="focusLayer === cfg.key ? '再次点击退出聚焦' : '聚焦' + cfg.label"
@click="$emit('focus-layer', focusLayer === cfg.key ? null : cfg.key)"
>
<span class="layer-dot" :style="{ background: cfg.color }"></span>
{{ cfg.short }}
</button>
</div>
</div>
</div>
</template>
@@ -105,6 +128,8 @@ defineProps<{
layerConfigs: { key: string; label: string; short: string; color: string }[]
canUndo: boolean
treeOpen: boolean
/** C 方案聚焦层:null = 四层全景 */
focusLayer?: string | null
}>()
const emit = defineEmits<{
@@ -117,6 +142,7 @@ const emit = defineEmits<{
(e: 'fit'): void
(e: 'toggle-tree'): void
(e: 'completeness'): void
(e: 'focus-layer', key: string | null): void
}>()
const filterOptions: { value: 'all' | 'risk' | 'nodata'; label: string }[] = [