merge: origin/main (A3 三维切片) 合入战略地图改造分支

frontend/src/components/map-canvas/MapDimensionFilter.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="dim-filter" v-if="mapId">
+    <div class="df-group">
+      <span class="df-label">时间</span>
+      <el-radio-group v-model="granularity" size="small" :disabled="!timeReady" @change="onGranularityChange">
+        <el-radio-button value="month">月</el-radio-button>
+        <el-radio-button value="quarter">季</el-radio-button>
+        <el-radio-button value="year">年</el-radio-button>
+      </el-radio-group>
+      <el-select
+        v-model="period"
+        size="small"
+        placeholder="选择期间"
+        style="width: 132px"
+        :loading="loadingOptions"
+        :disabled="!timeReady"
+        @change="apply"
+      >
+        <el-option v-for="p in periodOptions" :key="p" :label="p" :value="p" />
+      </el-select>
+    </div>
+
+    <div class="df-group">
+      <span class="df-label">门店</span>
+      <el-select
+        v-model="store"
+        size="small"
+        placeholder="全部门店"
+        style="width: 148px"
+        clearable
+        :loading="loadingOptions"
+        @change="apply"
+      >
+        <el-option v-for="s in storeValues" :key="s.name" :label="s.name" :value="s.name" />
+      </el-select>
+      <el-tooltip v-if="!storeAvailable && storeReason" :content="storeReason" placement="top">
+        <span class="df-badge df-badge-warn">无门店级取数</span>
+      </el-tooltip>
+    </div>
+
+    <div class="df-group">
+      <span class="df-label">产品</span>
+      <el-select
+        v-model="product"
+        size="small"
+        placeholder="全部产品"
+        style="width: 148px"
+        clearable
+        filterable
+        :loading="loadingOptions"
+        :disabled="!productAvailable"
+        @change="apply"
+      >
+        <el-option v-for="p in productValues" :key="p.name" :label="p.name" :value="p.name" />
+      </el-select>
+      <span v-if="productAvailable" class="df-badge" :title="productScopeText">仅 {{ productScopeText }}</span>
+      <el-tooltip v-else-if="productReason" :content="productReason" placement="top">
+        <span class="df-badge df-badge-warn">无产品级取数</span>
+      </el-tooltip>
+    </div>
+
+    <div class="df-actions">
+      <span v-if="slice" class="df-active">
+        已切片：{{ sliceLabel }}
+      </span>
+      <el-button size="small" :disabled="!slice" @click="clear">清除切片</el-button>
+    </div>
+
+    <div v-if="slice && slice.empty" class="df-empty" role="status">
+      <span class="df-empty-title">该维度暂无数据</span>
+      <span class="df-empty-desc">{{ slice.empty_reason }}</span>
+      <span class="df-empty-note">地图不回退总额，相关目标按「无数据」显示</span>
+    </div>
+    <div v-else-if="slice" class="df-summary" role="status">
+      {{ summaryText }}
+    </div>
+    <div v-else class="df-hint">
+      选择时间/门店/产品后，地图 KPI 达成率按所选切片重算（数据源：kpi_values / product_sales）
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import api from '../../api/index'
+
+const props = defineProps<{ mapId: number | null }>()
+const emit = defineEmits<{ (e: 'slice', payload: any | null): void }>()
+
+const loadingOptions = ref(false)
+const granularity = ref<'month' | 'quarter' | 'year'>('month')
+const period = ref<string>('')
+const store = ref<string>('')
+const product = ref<string>('')
+
+const options = ref<any>(null)
+const slice = ref<any>(null)
+const sliceSeq = ref(0)
+
+const timeReady = computed(() => !!options.value?.time?.available)
+const storeAvailable = computed(() => !!options.value?.store?.available)
+const storeReason = computed(() => options.value?.store?.reason || '')
+const storeValues = computed<any[]>(() => options.value?.store?.values || [])
+const productAvailable = computed(() => !!options.value?.product?.available)
+const productReason = computed(() => options.value?.product?.reason || '')
+const productValues = computed<any[]>(() => options.value?.product?.values || [])
+const productScopeText = computed(() => (options.value?.product?.kpi_scope || []).join(' / ') || '部分 KPI')
+
+const periodOptions = computed<string[]>(() => {
+  const t = options.value?.time
+  if (!t) return []
+  if (granularity.value === 'year') return t.years || []
+  if (granularity.value === 'quarter') return t.quarters || []
+  return t.months || []
+})
+
+const sliceLabel = computed(() => {
+  const s = slice.value?.slice || {}
+  const parts: string[] = []
+  if (s.period) parts.push(s.period)
+  if (s.store) parts.push(`门店：${s.store}`)
+  if (s.product) parts.push(`产品：${s.product}`)
+  return parts.join(' · ') || '—'
+})
+
+const summaryText = computed(() => {
+  const objs = slice.value?.objectives || []
+  const kpis = objs.flatMap((o: any) => o.kpis || []).filter((k: any) => k.available)
+  const missing = objs.flatMap((o: any) => o.kpis || []).length - kpis.length
+  const partial = kpis.filter((k: any) => k.reason && k.aggregation !== 'exact')
+  const bits = [`切片内 ${kpis.length} 支 KPI 有实测值`]
+  if (missing > 0) bits.push(`${missing} 支无数据（已显式标注，不填总额）`)
+  if (partial.length) bits.push(`${partial.length} 支为区间聚合/部分月份`)
+  return bits.join(' · ')
+})
+
+function pickDefaultPeriod() {
+  const t = options.value?.time
+  if (!t) return ''
+  if (granularity.value === 'year') return (t.years || []).slice(-1)[0] || ''
+  if (granularity.value === 'quarter') return (t.quarters || []).slice(-1)[0] || ''
+  return (t.months || []).slice(-1)[0] || ''
+}
+
+async function loadOptions() {
+  slice.value = null
+  emit('slice', null)
+  period.value = ''
+  store.value = ''
+  product.value = ''
+  options.value = null
+  if (!props.mapId) return
+  loadingOptions.value = true
+  try {
+    const r: any = await api.get(`/maps/${props.mapId}/dimension-options`)
+    options.value = r
+    granularity.value = (r?.time?.months?.length ? 'month' : (r?.time?.quarters?.length ? 'quarter' : 'year'))
+    period.value = pickDefaultPeriod()
+  } catch {
+    options.value = null
+  } finally {
+    loadingOptions.value = false
+  }
+}
+
+function onGranularityChange() {
+  period.value = pickDefaultPeriod()
+  apply()
+}
+
+async function apply() {
+  if (!props.mapId || !period.value) return
+  const seq = ++sliceSeq.value
+  loadingOptions.value = true
+  try {
+    const params: any = { period: period.value }
+    if (store.value) params.store = store.value
+    if (product.value) params.product = product.value
+    const r: any = await api.get(`/maps/${props.mapId}/slice`, { params })
+    if (seq !== sliceSeq.value) return // 只认最后一次选择，避免乱序回包
+    slice.value = r
+    emit('slice', r)
+  } catch (e: any) {
+    if (seq !== sliceSeq.value) return
+    slice.value = { empty: true, empty_reason: e?.message || '切片请求失败', objectives: [] }
+    emit('slice', slice.value)
+  } finally {
+    if (seq === sliceSeq.value) loadingOptions.value = false
+  }
+}
+
+function clear() {
+  sliceSeq.value++
+  slice.value = null
+  store.value = ''
+  product.value = ''
+  period.value = pickDefaultPeriod()
+  emit('slice', null)
+}
+
+watch(() => props.mapId, loadOptions, { immediate: true })
+</script>
+
+<style scoped>
+.dim-filter {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px 18px;
+  padding: 8px 16px;
+  margin: 0 0 6px;
+  background: var(--bh-bg-card, #fff);
+  border: 1px solid var(--bh-border, #E5E7EB);
+  border-radius: 8px;
+  flex-shrink: 0;
+  position: relative;
+}
+.df-group { display: inline-flex; align-items: center; gap: 8px; }
+.df-label { font-size: 12px; color: var(--bh-text-secondary, #6B7280); white-space: nowrap; }
+.df-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
+.df-active { font-size: 12px; color: var(--bh-text-secondary, #6B7280); font-variant-numeric: tabular-nums; }
+.df-badge {
+  font-size: 11px; padding: 1px 6px; border-radius: 4px;
+  color: var(--bh-text-secondary, #6B7280);
+  background: var(--bh-bg-muted, #F3F4F6);
+  border: 1px solid var(--bh-border, #E5E7EB);
+  white-space: nowrap;
+}
+.df-badge-warn { color: #B45309; background: #FFFBEB; border-color: #FDE68A; }
+.df-hint { font-size: 12px; color: var(--bh-text-secondary, #9CA3AF); }
+.df-summary { font-size: 12px; color: var(--bh-text-secondary, #6B7280); }
+.df-empty {
+  flex-basis: 100%;
+  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+  padding: 6px 10px; border-radius: 6px;
+  background: #FFFBEB; border: 1px solid #FDE68A;
+  font-size: 12px; color: #92400E;
+}
+.df-empty-title { font-weight: 600; }
+.df-empty-desc { color: #92400E; }
+.df-empty-note { color: #B45309; opacity: .85; }
+</style>

frontend/src/views/AlertList.vue

@@ -360,6 +360,8 @@
         <el-button type="primary" @click="savePlan" :loading="savingPlan">保存</el-button>
       </template>
     </MyDialog>
+    <!-- KBFF-v1.1: 按 related_page 关联知识接线 · /alerts -->
+    <KnowledgePanel related-page="/alerts" />
   </div>
 </template>
 
@@ -372,6 +374,7 @@ import BotSourceTag from '../components/BotSourceTag.vue'
 import RiskCell from '../components/charts/RiskCell.vue'
 import { sessionEntityName } from '../utils/entity'
 import MyDialog from '../components/MyDialog.vue'
+import KnowledgePanel from '../components/KnowledgePanel.vue'
 
 const route = useRoute()
 const activeTab = ref((route.meta?.tab as string) || 'alerts')

frontend/src/views/BudgetManagement.vue

@@ -769,6 +769,8 @@
       </el-form>
       <template #footer><el-button @click="showDerivationRuleDialog = false">取消</el-button><el-button type="primary" @click="saveDerivationRule">保存</el-button></template>
     </MyDialog>
+    <!-- KBFF-v1.1: 按 related_page 关联知识接线 · /budget -->
+    <KnowledgePanel related-page="/budget" />
   </div>
 </div>
 </template>
@@ -778,6 +780,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { budgetApi, kpiApi, mapApi, actionPlanApi } from '../api/index'
 import MyDialog from '../components/MyDialog.vue'
 import DriverFactorBudget from '../components/DriverFactorBudget.vue'
+import KnowledgePanel from '../components/KnowledgePanel.vue'
 
 const activeTab = ref('input')
 const currentYear = new Date().getFullYear()

frontend/src/views/DeviationDashboard.vue

@@ -184,6 +184,8 @@
 
     <!-- 无数据提示 -->
     <el-empty v-if="!loading && hierarchyData.length === 0 && reportData.length === 0" description="暂无差异分析数据，请先在预算管理中录入预算" style="padding:40px 0;" />
+    <!-- KBFF-v1.1: 按 related_page 关联知识接线 · /deviations -->
+    <KnowledgePanel related-page="/deviations" />
   </div>
 </template>
 
@@ -191,6 +193,7 @@
 import { ref, computed, onMounted, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { budgetApi, kpiApi } from '../api/index'
+import KnowledgePanel from '../components/KnowledgePanel.vue'
 
 const currentYear = new Date().getFullYear()
 const yearOptions = computed(() => {

frontend/src/views/KPIList.vue

@@ -398,6 +398,8 @@
         <el-button type="primary" :disabled="!selectedTemplate" @click="doInstantiate">从模板创建</el-button>
       </template>
     </MyDialog>
+    <!-- KBFF-v1.1: 按 related_page 关联知识接线 · /kpis -->
+    <KnowledgePanel related-page="/kpis" />
   </div>
 </template>
 
@@ -407,6 +409,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { kpiApi, templateApi, dashboardApi, userApi, orgApi } from '../api/index'
 import MyDialog from '../components/MyDialog.vue'
 import { useFormGuard, trackDialogForm } from '../composables/useFormGuard'
+import KnowledgePanel from '../components/KnowledgePanel.vue'
 
 // ── 数据 ──
 const kpis = ref<any[]>([])

frontend/src/views/MapCanvas.vue

@@ -54,6 +54,9 @@
       @completeness="showCompleteness = true"
     />
 
+    <!-- A3 三维切片（时间/门店/产品）：切换即重算；空态显式，不回退总额 -->
+    <MapDimensionFilter :map-id="selectedMap" @slice="onDimensionSlice" />
+
     <!-- 因果链查看模式提示 -->
     <div v-if="chainMode" class="chain-mode-bar">
       <span class="chain-ico">
@@ -312,6 +315,7 @@ import MapNodeDetail from "../components/strategy-map/MapNodeDetail.vue"
 import MapCompleteness from "../components/strategy-map/MapCompleteness.vue"
 import ConnectionLines from "../components/strategy/ConnectionLines.vue"
 import MapCanvasToolbar from "../components/map-canvas/MapCanvasToolbar.vue"
+import MapDimensionFilter from "../components/map-canvas/MapDimensionFilter.vue"
 import MapCanvasDialogs from "../components/map-canvas/MapCanvasDialogs.vue"
 import ConnectionManagerDialog from "../components/map-canvas/ConnectionManagerDialog.vue"
 import MyDialog from "../components/MyDialog.vue"
@@ -573,6 +577,44 @@ const visibleObjectiveCount = computed(() =>
   treeGroups.value.reduce((n: number, g: any) => n + g.objectives.length, 0)
 )
 
+// ── A3 维度切片（时间/门店/产品）──────────────────────────────
+// 切片激活时用它覆盖 objectiveLevels / kpiProgressMap 的展示值：
+// - available=false 的 KPI 一律 null，不用总额或其它期间冒充
+const dimSlice = ref<any | null>(null)
+
+/** 切片结果 → 节点键（dimKey-index）；按 目标名 对齐 map_objectives 与本地 dimensions */
+const sliceByKey = computed<Record<string, any>>(() => {
+  const out: Record<string, any> = {}
+  const payload = dimSlice.value
+  if (!payload || !Array.isArray(payload.objectives)) return out
+  for (const o of payload.objectives) {
+    const dim = dimensions.find((d: any) => d.key === o.dimension_key)
+    if (!dim) continue
+    const idx = (dim.objectives || []).findIndex((x: any) => x.name === o.name)
+    if (idx < 0) continue
+    const kpis = (o.kpis || []).map((k: any) => ({
+      code: k.kpi_code, name: k.kpi_name, actual: k.actual_value, target: k.target_value,
+      unit: k.unit, available: k.available, reason: k.reason,
+    }))
+    const ratios = (o.kpis || [])
+      .filter((k: any) => k.available && k.achievement_pct != null)
+      .map((k: any) => Number(k.achievement_pct))
+    out[`${o.dimension_key}-${idx}`] = {
+      ratio: ratios.length ? Math.round(ratios.reduce((a: number, b: number) => a + b, 0) / ratios.length) : 0,
+      level: o.has_data ? (o.level || 'gray') : 'gray',
+      kpiList: kpis,
+      slice: true,
+    }
+  }
+  return out
+})
+
+function onDimensionSlice(payload: any | null) {
+  dimSlice.value = payload
+  // 切回全景（payload=null）时恢复 /review 的原始状态
+  if (!payload) loadObjectiveLevels()
+}
+
 // 弹窗
 const showNodeDialog = ref(false)
 const editingNodeData = ref<any>(null)
@@ -679,9 +721,20 @@ function setLayerRef(key: string, el: any) {
 }
 
 function getNodeLevel(key: string): string {
+  if (dimSlice.value) return sliceByKey.value[key]?.level || 'gray'
   return objectiveLevels[key] || 'gray'
 }
 function getNodeProgress(key: string): any {
+  if (dimSlice.value) {
+    const s = sliceByKey.value[key]
+    return {
+      ratio: s?.ratio ?? 0,
+      level: s?.level || 'gray',
+      kpiList: s?.kpiList || [],
+      planSummary: kpiProgressMap[key]?.planSummary ?? null,
+      slice: true,
+    }
+  }
   return kpiProgressMap[key] || null
 }
 

frontend/src/views/MapReview.vue

@@ -340,6 +340,8 @@
         </el-timeline-item>
       </el-timeline>
     </MyDialog>
+    <!-- KBFF-v1.1: 按 related_page 关联知识接线 · /maps-review -->
+    <KnowledgePanel related-page="/maps-review" />
   </div>
 </template>
 
@@ -349,6 +351,7 @@ import { useRoute, useRouter } from "vue-router"
 import { ElMessage } from "element-plus"
 import api from "../api/index"
 import MyDialog from '../components/MyDialog.vue'
+import KnowledgePanel from '../components/KnowledgePanel.vue'
 
 const route = useRoute()
 const $router = useRouter()

frontend/src/views/PredictDashboard.vue

@@ -434,6 +434,8 @@
         <CostIntelligence />
       </el-tab-pane>
     </el-tabs>
+    <!-- KBFF-v1.1: 按 related_page 关联知识接线 · /predict -->
+    <KnowledgePanel related-page="/predict" />
   </div>
 </template>
 
@@ -442,6 +444,7 @@ import { ref, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import { predictApi } from '../api/index'
 import CostIntelligence from './CostIntelligence.vue'
+import KnowledgePanel from '../components/KnowledgePanel.vue'
 
 const activeTab = ref('cvp')