@fses/workbench-app 0.2.0 → 0.2.2

package/node_modules/@fses/workbench-card/src/renderers/WorkbenchBlockRenderer.vue

@@ -0,0 +1,2728 @@
+/**
+ * @fileoverview 工作台卡片运行时渲染器 - 根据卡片数据协议渲染图表、指标、表格和占位卡交互
+ * @author seadon
+ * @created 2026-05-10
+ */
+<script setup lang="ts">
+import { Table as ATable } from 'ant-design-vue';
+import {
+  ArrowRight,
+  CalendarDays,
+  CircleCheck,
+  ClipboardCheck,
+  CloudRain,
+  Droplets,
+  FileBarChart2,
+  Play,
+  Send,
+  Sparkles,
+  ThermometerSun,
+  Wind,
+} from 'lucide-vue-next';
+import ChartRegistryRenderer from './chart/ChartRegistry.vue';
+import EChartsProtocolRenderer from './chart/EChartsProtocolRenderer.vue';
+import type { WorkbenchEchartClickParams } from './chart/useEchart';
+import type { WorkbenchRendererHostBridge } from './hostBridge';
+import type {
+  CalendarCardData,
+  CategoryRankingData,
+  CustomCanvasData,
+  DashboardGridData,
+  DisplayBlockData,
+  EmbeddedFrameData,
+  FdeCustomComponentData,
+  GeoGlobeData,
+  InsightNarrativeData,
+  MaterializedBlock,
+  MetricSummaryData,
+  ProtocolRenderData,
+  ReportSummaryDisplayData,
+  RoleId,
+  TableRowsData,
+  TaskSummaryData,
+  WeatherCurrentData,
+} from '../types';
+
+import { useWorkbenchBlockRendererBindings } from './useWorkbenchBlockRendererBindings';
+
+const props = withDefaults(defineProps<{
+  block: MaterializedBlock;
+  roleId?: RoleId | string;
+  userId?: string;
+  density?: 'thumbnail' | 'compact' | 'standard' | 'expanded';
+  hostBridge?: WorkbenchRendererHostBridge;
+}>(), {
+  density: 'expanded',
+  hostBridge: undefined,
+});
+
+const emit = defineEmits<{
+  submitForm: [blockId: string, values: Record<string, unknown>];
+  submitSurvey: [blockId: string, answers: Record<string, unknown>];
+  executeAction: [blockId: string, actionId: string, actionLabel: string];
+  generateReport: [blockId: string];
+  workbenchShowcaseTabChange: [tabId: string];
+  runWorkbenchShortcut: [prompt: string];
+  replaceManualPlaceholder: [payload: { block: MaterializedBlock; overrideCapabilityId?: string }];
+  focusBlock: [blockId: string];
+  focusNestedBlock: [payload: { parentId: string; childId: string }];
+  chartClick: [payload: WorkbenchEchartClickParams & { blockId: string; block: MaterializedBlock }];
+}>();
+
+const {
+  chartRefreshRuntime,
+  effectiveBlock,
+  effectiveData,
+  formatMetricValue,
+  isFormBlockData,
+  isSurveyBlockData,
+  isActionGroupData,
+  isWorkflowBlockData,
+  isReportBlockData,
+  textValue,
+  numberValue,
+  welcomeBannerMetrics,
+  formValues,
+  surveyAnswers,
+  compactLimit,
+  toggleMultiValue,
+  formCompletedCount,
+  renderFieldType,
+  updateMatrixAnswer,
+  matrixAnswerValue,
+  multipleAnswerIncludes,
+  taskStatusClass,
+  taskTypeLabel,
+  taskStatusLabel,
+  tableRowsPreviewVisualKind,
+  tableRowsPreviewCard,
+  tableRowsPreviewRecords,
+  tableRowsPreviewCell,
+  tableRowsTimelinePrimaryCell,
+  tableRowsTimelineBadgeCell,
+  tableRowsPreviewAntTableColumns,
+  tableRowsPreviewAntTableRows,
+  tableRowsFallbackAntTableColumns,
+  tableRowsFallbackAntTableRows,
+  tableRowsAntTableScroll,
+  handleTableRowsAntTableColumnResize,
+  formatWeatherTemp,
+  weatherIcon,
+  isChartShape,
+  imageComposeEmptyChartPreview,
+  imageComposeChartPreview,
+  imageComposeMetricLeadingVisualKind,
+  imageComposeChartPreviewKind,
+  imageComposeChartPreviewMetric,
+  imageComposeChartPreviewStatus,
+  imageComposeChartPreviewBars,
+  imageComposeChartPreviewDonutStyle,
+  imageComposeEmptyRankingPreview,
+  imageComposeRankingPreviewItems,
+  imageComposeRankingPreviewLabel,
+  imageComposeRankingPreviewDetail,
+  imageComposeRankingPreviewValue,
+  imageComposeRankingPreviewAvatar,
+  imageComposeRankingPreviewAvatarClass,
+  imageComposeRankingPreviewValueClass,
+  imageComposeBidRowsCard,
+  imageComposeBidRowsVisualKind,
+  imageComposeBidInfoItems,
+  imageComposeBidRowsRecords,
+  imageComposeBidRowsColumns,
+  imageComposeBidRowsGridStyle,
+  imageComposeBidRowsCell,
+  imageComposeBidRowCards,
+  imageComposeBidPanelClasses,
+  imageComposeBidPillClasses,
+  imageComposeBidCardGridStyle,
+  imageComposeBidCardTileClasses,
+  imageComposeBidCardPillPlacementClasses,
+  imageComposeBidTargetInfoGridStyle,
+  imageComposeBidInfoTilePlacementStyle,
+  imageComposeBidInfoTileClasses,
+  imageComposeBidInfoLabelClasses,
+  imageComposeBidInfoValueClasses,
+  imageComposeBidConclusionCard,
+  imageComposeBidConclusionBadge,
+  imageComposeBidConclusionDetail,
+  activeTabFor,
+  tabsFor,
+  orgMetricValues,
+  visualFor,
+  rowGrid,
+  metricSummaryDisplayValue,
+  metricSummaryUnitLabel,
+  imageComposeMetricSubText,
+  imageComposeMetricFooterStatus,
+  imageComposeMetricFooterMain,
+  imageComposeMetricFooterStatusClass,
+  imageComposeMetricFooterVisible,
+  chartRendererKey,
+  manualReplacementView,
+  manualReplacementCapabilityOptionsForBlock,
+  manualReplacementCapabilityDraft,
+  setManualReplacementCapabilityDraft,
+  replaceManualPlaceholder,
+  nestedBlockDataSummary,
+  nestedBlockRendererKey,
+  nestedBlockComposeSource,
+  customCanvasVisibleNestedBlocks,
+  customCanvasUsesAbsoluteNestedBlocks,
+  customCanvasNestedBlockContainerClasses,
+  customCanvasDenseNestedStack,
+  customCanvasUsesNaturalNestedGrid,
+  customCanvasShouldFillNaturalNestedGrid,
+  customCanvasUsesReferenceCompositePreview,
+  customCanvasReferenceCompositeKind,
+  referenceCompositeHeaderChip,
+  customCanvasPageHeaderBlock,
+  customCanvasEmptyPageHeaderPlaceholder,
+  customCanvasEmptyImagePlaceholder,
+  customCanvasAlertLeafContainer,
+  customCanvasAlertLeafItems,
+  customCanvasHeaderTitle,
+  customCanvasHeaderSubtitle,
+  customCanvasHeaderLogo,
+  customCanvasHeaderLogoStyle,
+  customCanvasPageHeaderStyle,
+  customCanvasPageHeaderTextClass,
+  customCanvasHeaderPillsWithFallback,
+  referenceCompositeDiagnosticStyle,
+  referenceRiskMetricValue,
+  referenceRiskKpiItems,
+  referenceRiskMovementItems,
+  referenceOpsServiceItems,
+  referenceOpsResourceItems,
+  referenceOpsIncidentItems,
+  referenceSecurityScoreBlock,
+  referenceSecurityRiskItems,
+  referenceSecurityComplianceItems,
+  referenceAssetLedgerItems,
+  referenceAssetExceptionItems,
+  referenceCostItems,
+  referenceCostDonutItems,
+  referenceCostDonutStyle,
+  referenceProjectProgressItems,
+  referenceTodoItems,
+  referenceEfficiencyItems,
+  referenceQuickLinkItems,
+  referenceBusinessMetricItems,
+  referenceBusinessChartItems,
+  referenceBusinessListItems,
+  referenceBidHero,
+  referenceBidQuickActions,
+  referenceBidKpiItems,
+  referenceBidInfoItems,
+  referenceBidTableBlocks,
+  referenceBidRiskRows,
+  referenceBidConclusionItems,
+  referenceBidDataBoundaryItems,
+  referenceBidSanitizedMetricValue,
+  referenceNoticeItems,
+  referenceHealthRadarRiskItems,
+  referenceHealthRadarPoints,
+  referenceDeviationBars,
+  referenceDeviationRiskItems,
+  referenceFinanceRiskBottomItems,
+  referenceFinanceRiskMetricDisplayValue,
+  referenceHrOrganizationMetrics,
+  referenceHrOrganizationRows,
+  referenceHrRiskRows,
+  referenceHrPeopleCostItems,
+  referenceHrCostTrendItems,
+  referenceHrTalentMetrics,
+  referenceHrTalentTodoRows,
+  referenceExpenseRiskRows,
+  referenceExpenseSummaryItems,
+  referenceDeviationInsightItems,
+  referenceOrganizationRiskMetrics,
+  referenceOrganizationDonutStyle,
+  referenceInvestmentRiskRows,
+  referenceInvestmentSummaryItems,
+  referenceExecutiveTodoItems,
+  referenceExecutiveTodoBadge,
+  referenceExecutiveTodoBadgeClasses,
+  referenceExecutiveTodoImpact,
+  referenceExecutiveTodoDeadline,
+  referenceExecutiveTodoProgress,
+  referenceShortcutDrillItems,
+  referenceQuickWorkbenchGroups,
+  referenceQuickWorkbenchGroupItems,
+  referenceQuickWorkbenchUrgentBadge,
+  referenceStrategyKpiMetrics,
+  referenceOperationEfficiencyGroups,
+  referenceOperationEfficiencyPanelStyle,
+  referenceOperationHealthProgressItems,
+  referenceOperationHealthTrendItems,
+  referenceOperationHealthStructureBlock,
+  referenceOperationHealthStructureItems,
+  referenceStrategyKpiTrendPath,
+  referenceStrategyKpiRiskItems,
+  referenceStrategyKpiRiskSummaryLabel,
+  referenceStrategyKpiRiskItemsGridStyle,
+  referenceItemNestedCardAttrs,
+  referenceItemNestedRoleLabel,
+  focusReferenceNestedItem,
+  customCanvasNestedStackContainerStyle,
+  nestedBlockCanvasStyle,
+  nestedBlockStackTailPlacementStyle,
+  nestedBlockGridPlacementStyle,
+  nestedBlockAccentStyle,
+  customCanvasElementStyle,
+  customCanvasElementClasses,
+  customCanvasStyle,
+  customCanvasShellClasses,
+  nestedBlockShellClasses,
+  manualReplacementContainerStyle,
+  manualReplacementShellClasses,
+  manualReplacementCompactView,
+  manualReplacementCapabilityDraftLabel,
+  manualReplacementActionLabel,
+  manualReplacementPrimaryActionLabel,
+  dataBindingFailureReason,
+  dataBindingFailureQueryIntent,
+  dataBindingNeedsHumanIntervention,
+  nestedBlockNeedsHumanIntervention,
+  nestedBlockDataSnapshotRenderable,
+  imageComposeCompactCard,
+  imageComposeBusinessGapBadgeLabel,
+  customCanvasShowsStructureLabels,
+  customCanvasVisibleElements,
+  customCanvasOverlaysVisibleElements,
+  customCanvasVisibleNarrative,
+  customCanvasStandaloneQuickLinks,
+  customCanvasStandaloneQuickLinkItems,
+  dataBindingFailureRegistryLabel,
+  dataBindingFailureView,
+  metricSummaryShowsPrimaryLabel,
+  metricSummaryValueClass,
+  businessMetricMatrixLargePanel,
+  imageComposeMetricSummaryCardClasses,
+  imageComposeMetricSummaryCardStyle,
+  imageComposeMetricTitleClass,
+  imageComposeMetricValueRowClass,
+  imageComposeMetricValueClass,
+  imageComposeMetricValueStyle,
+  imageComposeMetricUnitClass,
+  metricSummaryShowsChrome,
+  metricSummaryShowsComparisonBadge,
+  imageComposeAlertRankingCard,
+  imageComposeAlertRankingItems,
+  imageComposeAlertRankingSeverity,
+  imageComposeAlertRankingTitle,
+  imageComposeAlertRankingTime,
+  imageComposeAlertSeverityClasses,
+  nestedBlockMetricValue,
+  nestedBlockVisualKind,
+  nestedBlockItems,
+  nestedBlockBarItems,
+  nestedBlockTileItems,
+  nestedBlockItemLabel,
+  nestedBlockItemValue,
+  nestedBlockItemDetail,
+  nestedBlockItemTitle,
+  nestedBlockItemSeverity,
+  nestedBlockItemTime,
+  nestedBlockPercent,
+  nestedBlockItemProgress,
+  referenceOpsTrendChartItems,
+  nestedBlockToneClass,
+  nestedBlockStatusSummary,
+  nestedBlockStatusSummaryLabel,
+  nestedBlockPillClasses,
+  nestedBlockDotClasses,
+  nestedBlockBarClasses,
+  referenceOpsTrendBarClasses,
+  nestedBlockBarStyle,
+  nestedBlockProgressStage,
+  nestedBlockSecurityScore,
+  nestedBlockSecurityScoreRingLabel,
+  nestedBlockSecurityMetrics,
+  nestedBlockDonutItems,
+  nestedBlockDonutStyle,
+  nestedBlockQuickIconLabel,
+  nestedBlockQuickLinksGridStyle,
+  nestedBlockRows,
+  nestedBlockColumns,
+  nestedBlockRankingItems,
+  nestedBlockCell,
+  nestedBlockCompactPreview,
+  nestedBlockEmptyImageContainer,
+  nestedBlockFailureReason,
+  nestedBlockBusinessGapReason,
+  nestedBlockQueryIntent,
+  nestedBlockFocusTitle,
+  focusNestedBlock,
+  fdeCustomComponentRenderState,
+} = useWorkbenchBlockRendererBindings(props, emit as unknown as (event: string, ...args: unknown[]) => void);
+</script>
+
+<template>
+  <div
+    class="h-full min-h-0 w-full"
+    :data-image-compose-business-gap-label="imageComposeCompactCard(effectiveBlock) ? imageComposeBusinessGapBadgeLabel(effectiveBlock) : undefined"
+  >
+    <template v-if="effectiveBlock.blockType === 'display'">
+      <template v-if="effectiveBlock.meta?.fullValidationRole === 'group'">
+        <div class="flex h-full min-h-0 items-center rounded-lg border border-blue-100 bg-white p-[5px] shadow-sm">
+          <div class="flex min-h-0 w-full items-center gap-2 overflow-hidden">
+            <button
+              v-for="tab in tabsFor(effectiveBlock)"
+              :key="textValue(tab.id)"
+              type="button"
+              :class="[
+                'workbench-card-action flex min-w-0 shrink-0 items-center justify-center rounded-full border px-4 py-1.5 text-xs font-semibold leading-none transition',
+                textValue(tab.id) === textValue(activeTabFor(effectiveBlock).id, 'all-capabilities')
+                  ? 'border-[#4f73ff] bg-[#4f73ff] text-white shadow-sm'
+                  : 'border-transparent bg-[#edf4ff] text-[#4f73ff] hover:bg-[#e3edff]',
+              ]"
+              @click="textValue(tab.id) && emit('workbenchShowcaseTabChange', textValue(tab.id))"
+            >
+              <span class="min-w-0 truncate">{{ textValue(tab.shortName, textValue(tab.name, textValue(tab.id))) }}</span>
+            </button>
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="effectiveBlock.meta?.organizationKind === 'welcome_banner' || effectiveBlock.meta?.fullValidationRole === 'banner'">
+        <component
+          :is="hostBridge?.WelcomeBanner"
+          v-if="hostBridge?.WelcomeBanner"
+          :portal-metrics="welcomeBannerMetrics(effectiveBlock)"
+          class="h-full min-h-0"
+        />
+        <div v-else class="flex h-full min-h-0 flex-col justify-center rounded-lg border border-blue-100 bg-blue-50 px-4 py-3 text-blue-900">
+          <div class="text-xs text-blue-500">欢迎回来 / 百特搭工作台</div>
+          <div class="mt-1 text-lg font-semibold">{{ effectiveBlock.title }}</div>
+        </div>
+      </template>
+
+      <template v-else-if="dataBindingFailureView(effectiveBlock)">
+        <div class="workbench-data-binding-failure-placeholder grid h-full min-h-0 w-full grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden rounded-lg border border-rose-100 bg-rose-50 px-3 py-2 text-rose-900">
+          <div class="min-w-0">
+            <div class="inline-flex max-w-full rounded-full bg-white px-2 py-0.5 text-xs font-semibold leading-5 text-rose-700">
+              {{ dataBindingNeedsHumanIntervention(effectiveBlock) ? '需补充业务口径' : '问数失败' }}
+            </div>
+            <div class="mt-1 truncate text-xs font-semibold leading-4 text-slate-950" :title="effectiveBlock.title || dataBindingFailureRegistryLabel(effectiveBlock)">
+              {{ effectiveBlock.title || dataBindingFailureRegistryLabel(effectiveBlock) }}
+            </div>
+          </div>
+          <p class="min-h-0 overflow-hidden text-xs leading-4 text-rose-800" :title="dataBindingFailureReason(effectiveBlock)">
+            {{ dataBindingFailureReason(effectiveBlock) }}
+          </p>
+          <div class="min-w-0 text-xs leading-4 text-slate-600">
+            <span class="min-w-0 truncate" :title="dataBindingFailureQueryIntent(effectiveBlock)">{{ dataBindingFailureQueryIntent(effectiveBlock) }}</span>
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="effectiveBlock.meta?.workbenchOrganizationCard === true || textValue(effectiveBlock.meta?.macroCapabilityId) === 'card.workbench_organization' || String(effectiveBlock.id).startsWith('workbench-org-')">
+        <div v-if="effectiveBlock.meta?.organizationKind === 'capability_overview'" class="grid h-full content-start gap-2 sm:grid-cols-2">
+          <div v-for="item in orgMetricValues(effectiveBlock)" :key="item.label" class="rounded-md border border-blue-100 bg-white px-2.5 py-2">
+            <div class="flex items-center gap-1.5 text-[11px] text-slate-500">
+              <component :is="item.icon" class="h-3.5 w-3.5 text-blue-600" />
+              {{ item.label }}
+            </div>
+            <div class="mt-1 text-lg font-semibold leading-none text-slate-950">{{ item.value }}</div>
+          </div>
+        </div>
+        <div v-else-if="effectiveBlock.meta?.organizationKind === 'ai_shortcut'" class="grid gap-2">
+          <button
+            v-for="shortcut in ['只看图表卡能力', '把全部验收卡按分类说明一下', '生成 CEO 角色首页推荐布局', '检查当前画布哪些卡片适合改成大屏']"
+            :key="shortcut"
+            type="button"
+            class="workbench-card-action h-8 rounded-md border border-slate-200 bg-slate-50 px-2 text-left text-[11px] font-medium text-slate-700 transition hover:border-blue-200 hover:bg-blue-50 hover:text-blue-700"
+            @click="emit('runWorkbenchShortcut', shortcut)"
+          >
+            {{ shortcut }}
+          </button>
+        </div>
+        <div v-else-if="effectiveBlock.meta?.organizationKind === 'category_navigator'" class="flex h-full min-h-0 items-center">
+          <div class="flex w-full max-h-full flex-wrap items-center gap-1.5 overflow-y-auto pr-1">
+            <button
+              v-for="tab in tabsFor(effectiveBlock)"
+              :key="textValue(tab.id)"
+              type="button"
+              :class="[
+                'workbench-card-action h-6 shrink-0 whitespace-nowrap rounded-full border px-2 text-[11px] font-semibold leading-none transition',
+                textValue(tab.id) === textValue(activeTabFor(effectiveBlock).id, 'all-capabilities')
+                  ? 'border-blue-600 bg-blue-600 text-white shadow-sm'
+                  : 'border-slate-200 bg-white text-slate-600 hover:border-blue-200 hover:bg-blue-50 hover:text-blue-700',
+              ]"
+              @click="textValue(tab.id) && emit('workbenchShowcaseTabChange', textValue(tab.id))"
+            >
+              {{ textValue(tab.shortName, textValue(tab.name, textValue(tab.id))) }}
+              <span :class="textValue(tab.id) === textValue(activeTabFor(effectiveBlock).id, 'all-capabilities') ? 'ml-1 text-xs text-blue-100' : 'ml-1 text-xs text-slate-400'">
+                {{ numberValue(tab.count) }}
+              </span>
+            </button>
+          </div>
+        </div>
+        <div v-else-if="effectiveBlock.meta?.organizationKind === 'section_description'" class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
+          <div class="flex flex-wrap items-center gap-2">
+            <span class="rounded-full border border-blue-200 bg-white px-2 py-0.5 text-[11px] font-semibold text-blue-700">
+              {{ textValue(activeTabFor(effectiveBlock).shortName, '全部') }} · {{ numberValue(activeTabFor(effectiveBlock).count) }} 个能力
+            </span>
+            <span class="text-[11px] text-slate-500">{{ textValue(activeTabFor(effectiveBlock).id, 'all-capabilities') === 'all-capabilities' ? '当前可配置完整画布。' : '当前分类排版会同步到全部视图。' }}</span>
+          </div>
+          <p class="mt-1 text-xs leading-5 text-slate-600">{{ textValue(activeTabFor(effectiveBlock).description, '展示当前能力分类的业务场景和使用边界。') }}</p>
+        </div>
+      </template>
+
+      <template v-else-if="effectiveData?.shape === 'metricSummary'">
+        <div
+          v-if="imageComposeCompactCard(effectiveBlock)"
+          class="workbench-image-metric-summary-card grid h-full min-h-0 w-full grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-lg bg-white"
+          :class="imageComposeMetricSummaryCardClasses(effectiveBlock)"
+          :style="imageComposeMetricSummaryCardStyle()"
+        >
+          <div class="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
+            <div :class="['truncate font-semibold text-slate-600', imageComposeMetricTitleClass(effectiveBlock)]" :title="effectiveBlock.title">{{ effectiveBlock.title }}</div>
+            <span v-if="imageComposeMetricLeadingVisualKind(effectiveBlock) === 'bars'" class="flex shrink-0 items-end gap-0.5 opacity-80" aria-hidden="true">
+              <i class="h-2 w-1 rounded-full bg-[#4c2cff]" />
+              <i class="h-3 w-1 rounded-full bg-[#4c2cff]/70" />
+              <i class="h-4 w-1 rounded-full bg-[#4c2cff]" />
+            </span>
+            <svg v-else-if="imageComposeMetricLeadingVisualKind(effectiveBlock) === 'sparkline'" class="h-5 w-12 shrink-0" viewBox="0 0 48 20" preserveAspectRatio="none" aria-hidden="true">
+              <path d="M1 15 C8 11, 12 16, 18 10 S29 4, 36 8 S43 11, 47 5" fill="none" stroke="#4c2cff" stroke-width="2.5" stroke-linecap="round" />
+              <path d="M1 17 C9 14, 15 18, 22 13 S33 8, 47 10" fill="none" stroke="#19c7ad" stroke-width="1.5" stroke-linecap="round" opacity="0.72" />
+            </svg>
+            <span v-else class="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-[#f0efff] text-xs font-semibold text-[#4c2cff]" aria-hidden="true">
+              {{ textValue(effectiveBlock.title, 'K').slice(0, 1).toUpperCase() }}
+            </span>
+          </div>
+          <div :class="['flex min-h-0 min-w-0 flex-1 items-center', imageComposeMetricValueRowClass(effectiveBlock)]">
+            <div class="flex min-w-0 items-baseline gap-1">
+              <div
+                :class="['workbench-image-metric-value max-w-full whitespace-nowrap font-semibold leading-none text-slate-950', imageComposeMetricValueClass(effectiveBlock)]"
+                :style="imageComposeMetricValueStyle(effectiveBlock)"
+                :title="metricSummaryDisplayValue(effectiveData as MetricSummaryData & Record<string, unknown>)"
+              >
+                {{ metricSummaryDisplayValue(effectiveData as MetricSummaryData & Record<string, unknown>) }}
+              </div>
+              <span v-if="metricSummaryUnitLabel(effectiveData as MetricSummaryData & Record<string, unknown>)" :class="['shrink-0 font-semibold text-slate-500', imageComposeMetricUnitClass(effectiveBlock)]">
+                {{ metricSummaryUnitLabel(effectiveData as MetricSummaryData & Record<string, unknown>) }}
+              </span>
+            </div>
+          </div>
+          <div
+            v-if="imageComposeMetricFooterVisible(effectiveBlock, effectiveData as MetricSummaryData & Record<string, unknown>)"
+            class="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2 text-xs leading-5"
+            :title="imageComposeMetricSubText(effectiveData as MetricSummaryData & Record<string, unknown>)"
+          >
+            <span class="min-w-0 truncate text-slate-500">{{ imageComposeMetricFooterMain(effectiveData as MetricSummaryData & Record<string, unknown>) }}</span>
+            <span
+              v-if="imageComposeMetricFooterStatus(effectiveData as MetricSummaryData & Record<string, unknown>)"
+              :class="['max-w-[5.5rem] shrink-0 truncate text-right font-semibold', imageComposeMetricFooterStatusClass(imageComposeMetricFooterStatus(effectiveData as MetricSummaryData & Record<string, unknown>))]"
+            >
+              {{ imageComposeMetricFooterStatus(effectiveData as MetricSummaryData & Record<string, unknown>) }}
+            </span>
+          </div>
+        </div>
+        <div v-else-if="visualFor(effectiveBlock).metricVariant === 'centerNumber'" class="flex h-full min-h-0 w-full flex-col items-center justify-center text-center">
+          <div v-if="!visualFor(effectiveBlock).hideMetricLabel" class="mb-1 text-[11px] text-slate-400">{{ (effectiveData as MetricSummaryData).primaryLabel }}</div>
+          <div class="font-semibold leading-none text-slate-950" :class="density === 'thumbnail' ? 'text-3xl' : density === 'compact' ? 'text-4xl' : 'text-5xl'" :style="visualFor(effectiveBlock).accentColor ? { color: visualFor(effectiveBlock).accentColor } : undefined">
+            {{ metricSummaryDisplayValue(effectiveData as MetricSummaryData & Record<string, unknown>) }}
+          </div>
+          <div v-if="!visualFor(effectiveBlock).hideMetricFooter && density !== 'thumbnail'" class="mt-2 text-xs text-slate-500">{{ (effectiveData as MetricSummaryData).periodLabel }}</div>
+        </div>
+        <div v-else class="flex h-full min-h-0 w-full flex-col justify-between overflow-hidden space-y-5">
+          <div class="flex items-end justify-between gap-2">
+            <div class="min-w-0">
+              <div v-if="metricSummaryShowsPrimaryLabel(effectiveBlock, effectiveData as MetricSummaryData)" class="truncate text-[11px] text-slate-400">{{ (effectiveData as MetricSummaryData).primaryLabel }}</div>
+              <div class="font-semibold leading-none text-slate-950" :class="[metricSummaryValueClass(effectiveBlock), metricSummaryShowsPrimaryLabel(effectiveBlock, effectiveData as MetricSummaryData) ? 'mt-2' : 'mt-0']">
+                {{ metricSummaryDisplayValue(effectiveData as MetricSummaryData & Record<string, unknown>) }}
+              </div>
+            </div>
+            <div v-if="metricSummaryShowsComparisonBadge(effectiveBlock, effectiveData as MetricSummaryData)" :class="['rounded-full px-3 py-1 text-xs font-semibold', ((effectiveData as MetricSummaryData).deltaPct || 0) >= 0 ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600']">
+              {{ `${(effectiveData as MetricSummaryData).compareLabel} ${(((effectiveData as MetricSummaryData).deltaPct || 0) * 100).toFixed(1)}%` }}
+            </div>
+          </div>
+          <div v-if="metricSummaryShowsChrome(effectiveBlock, effectiveData as MetricSummaryData) && !visualFor(effectiveBlock).hideSecondary" class="grid gap-3 sm:grid-cols-2">
+            <div v-for="item in compactLimit((effectiveData as MetricSummaryData).secondary, 0, 1)" :key="item.label" class="rounded-lg border border-slate-100 bg-slate-50/80 p-3">
+              <div class="text-xs text-slate-500">{{ item.label }}</div>
+              <div class="mt-2 text-lg font-semibold text-slate-900">{{ formatMetricValue(item.value, item.format) }}</div>
+            </div>
+          </div>
+          <div v-if="metricSummaryShowsChrome(effectiveBlock, effectiveData as MetricSummaryData) && !visualFor(effectiveBlock).hideMetricFooter" class="flex items-center justify-between text-xs text-slate-500">
+            <span>{{ (effectiveData as MetricSummaryData).periodLabel }}</span>
+            <span>{{ (effectiveData as MetricSummaryData).sourceLabel }}</span>
+          </div>
+        </div>
+      </template>
+
+      <!-- 通用卡片协议分发 -->
+      <template v-else-if="effectiveData?.shape === 'protocolRender' && effectiveData?.rendererType === 'echarts'">
+        <EChartsProtocolRenderer
+          :configPayload="(effectiveData as ProtocolRenderData).protocolConfig"
+          :dataPayload="(effectiveData as ProtocolRenderData).protocolData"
+          :cardTitle="effectiveBlock.title"
+          :roleId="roleId"
+          :userId="userId"
+          :dataBinding="(effectiveData as ProtocolRenderData).dataBinding"
+          :blockMeta="effectiveBlock.meta"
+          :blockSource="effectiveBlock.source"
+          :refreshRuntime="chartRefreshRuntime"
+          @chart-click="emit('chartClick', { ...$event, blockId: effectiveBlock.id, block: effectiveBlock })"
+        />
+      </template>
+
+      <template v-else-if="imageComposeChartPreview(effectiveBlock, effectiveData) || imageComposeEmptyChartPreview(effectiveBlock, effectiveData)">
+        <div class="workbench-image-empty-chart-preview flex h-full min-h-0 w-full flex-col overflow-hidden rounded-lg border border-slate-200 bg-white px-4 py-3 shadow-[0_2px_8px_rgba(15,23,42,0.04)]">
+          <div class="workbench-image-empty-chart-preview__header grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-3">
+            <div class="min-w-0">
+              <div class="truncate text-[11px] font-semibold leading-4 text-slate-400" :title="effectiveBlock.title">{{ effectiveBlock.title }}</div>
+              <div class="mt-1 truncate text-xl font-semibold leading-6 text-slate-950" :title="imageComposeChartPreviewMetric(effectiveBlock, effectiveData)">
+                {{ imageComposeChartPreviewMetric(effectiveBlock, effectiveData) }}
+              </div>
+              <div v-if="imageComposeChartPreviewStatus(effectiveBlock, effectiveData)" class="mt-1 inline-flex max-w-full items-center gap-1 rounded bg-[#e8fbf7] px-1.5 py-0.5 text-[11px] font-semibold leading-4 text-[#0f9f8b]">
+                <span class="h-1.5 w-1.5 rounded-full bg-[#19c7ad]" aria-hidden="true" />
+                <span class="min-w-0 truncate">{{ imageComposeChartPreviewStatus(effectiveBlock, effectiveData) }}</span>
+              </div>
+            </div>
+            <span class="flex shrink-0 items-end gap-0.5 pt-1 opacity-80" aria-hidden="true">
+              <i class="h-2 w-1 rounded-full bg-[#4c2cff]" />
+              <i class="h-3 w-1 rounded-full bg-[#4c2cff]/70" />
+              <i class="h-4 w-1 rounded-full bg-[#4c2cff]" />
+            </span>
+          </div>
+          <div class="workbench-image-empty-chart-preview__plot workbench-image-empty-chart-preview__plot-frame relative mt-3 min-h-0 flex-1 overflow-hidden rounded-md border border-slate-100 bg-slate-50/70 px-2 py-2">
+            <div class="workbench-image-empty-chart-preview__plot-grid pointer-events-none absolute inset-x-2 bottom-8 top-3 grid grid-rows-4" aria-hidden="true">
+              <span class="border-t border-slate-200/90" />
+              <span class="border-t border-slate-200/80" />
+              <span class="border-t border-slate-200/70" />
+              <span class="border-t border-slate-200/60" />
+            </div>
+            <div class="workbench-image-empty-chart-preview__plot-axis pointer-events-none absolute inset-x-2 bottom-8 h-px bg-slate-300" aria-hidden="true" />
+            <div
+              v-if="imageComposeChartPreviewKind(effectiveBlock, effectiveData) === 'donut'"
+              class="relative z-10 flex h-full min-h-0 items-center justify-center"
+            >
+              <span
+                class="block h-28 w-28 rounded-full"
+                :style="imageComposeChartPreviewDonutStyle(effectiveBlock, effectiveData)"
+                aria-hidden="true"
+              >
+                <span class="m-7 block h-14 w-14 rounded-full bg-white shadow-inner" />
+              </span>
+            </div>
+            <svg v-else class="relative z-10 h-full w-full" viewBox="0 0 360 128" preserveAspectRatio="none" aria-hidden="true">
+              <g opacity="0.72" stroke="#edf0f7" stroke-width="1">
+                <line x1="0" y1="28" x2="360" y2="28" />
+                <line x1="0" y1="64" x2="360" y2="64" />
+                <line x1="0" y1="100" x2="360" y2="100" />
+              </g>
+              <line x1="0" y1="36" x2="360" y2="36" stroke="#6d5cff" stroke-width="1.5" stroke-dasharray="6 8" opacity="0.28" />
+              <g
+                v-if="imageComposeChartPreviewKind(effectiveBlock, effectiveData) === 'bar' || imageComposeChartPreviewKind(effectiveBlock, effectiveData) === 'mixed'"
+                fill="#edeff6"
+              >
+                <rect
+                  v-for="bar in imageComposeChartPreviewBars(effectiveBlock, effectiveData)"
+                  :key="`${bar.x}-${bar.height}-${bar.label}`"
+                  :x="bar.x"
+                  :y="bar.y"
+                  :width="bar.width"
+                  :height="bar.height"
+                  rx="5"
+                  :fill="bar.fill"
+                  :opacity="bar.opacity"
+                />
+              </g>
+              <path
+                v-if="imageComposeChartPreviewKind(effectiveBlock, effectiveData) === 'line' || imageComposeChartPreviewKind(effectiveBlock, effectiveData) === 'mixed'"
+                d="M0 94 C42 96, 72 78, 104 82 C140 86, 154 48, 190 56 C222 62, 236 94, 270 84 C308 72, 328 46, 360 52"
+                fill="none"
+                stroke="#3426d9"
+                stroke-width="4"
+                stroke-linecap="round"
+              />
+              <path
+                v-if="imageComposeChartPreviewKind(effectiveBlock, effectiveData) === 'line' || imageComposeChartPreviewKind(effectiveBlock, effectiveData) === 'mixed'"
+                d="M0 100 C48 92, 76 110, 118 96 C154 84, 186 92, 220 74 C256 54, 290 70, 322 58 C340 52, 350 52, 360 54"
+                fill="none"
+                stroke="#19c7ad"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                opacity="0.55"
+              />
+            </svg>
+            <div class="hidden">
+              <span class="truncate">基准线</span>
+              <span class="truncate text-center">异动区间</span>
+              <span class="truncate text-right">待回填</span>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <ChartRegistryRenderer
+        v-else-if="isChartShape(effectiveData) && !imageComposeCompactCard(effectiveBlock)"
+        :renderer-key="chartRendererKey(effectiveBlock)"
+        :data="effectiveData as DisplayBlockData"
+        :card-title="effectiveBlock.title"
+        :role-id="roleId"
+        :user-id="userId"
+        :density="density"
+        :block-meta="effectiveBlock.meta"
+        :block-source="effectiveBlock.source"
+        :refresh-runtime="chartRefreshRuntime"
+        @chart-click="emit('chartClick', { ...$event, blockId: effectiveBlock.id, block: effectiveBlock })"
+      />
+
+      <div
+        v-else-if="isChartShape(effectiveData)"
+        class="workbench-image-system-chart-card grid h-full min-h-0 w-full grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-lg border border-slate-200 bg-white px-4 py-3 shadow-[0_2px_8px_rgba(15,23,42,0.04)]"
+      >
+        <div class="min-w-0">
+          <strong class="block truncate text-sm font-semibold leading-5 text-slate-900" :title="effectiveBlock.title">{{ effectiveBlock.title }}</strong>
+          <span v-if="effectiveBlock.subtitle" class="mt-0.5 block truncate text-xs leading-4 text-slate-500" :title="effectiveBlock.subtitle">{{ effectiveBlock.subtitle }}</span>
+        </div>
+        <ChartRegistryRenderer
+          class="min-h-0"
+          :renderer-key="chartRendererKey(effectiveBlock)"
+          :data="effectiveData as DisplayBlockData"
+          :card-title="effectiveBlock.title"
+          :role-id="roleId"
+          :user-id="userId"
+          :density="density"
+          :block-meta="effectiveBlock.meta"
+          :block-source="effectiveBlock.source"
+          :refresh-runtime="chartRefreshRuntime"
+          @chart-click="emit('chartClick', { ...$event, blockId: effectiveBlock.id, block: effectiveBlock })"
+        />
+      </div>
+
+      <template v-else-if="effectiveData?.shape === 'categoryRanking'">
+        <div
+          v-if="imageComposeAlertRankingCard(effectiveBlock, effectiveData as CategoryRankingData)"
+          class="workbench-image-alert-ranking-list flex h-full min-h-0 w-full flex-col overflow-hidden rounded-md bg-[#241817] px-5 py-3 text-[#f8efe9]"
+        >
+          <div class="mb-1 flex h-6 shrink-0 items-center justify-between gap-2 pr-2">
+            <span class="min-w-0 truncate text-base font-semibold leading-5 text-[#fff7ed]" :title="effectiveBlock.title">{{ effectiveBlock.title }}</span>
+            <span class="rounded-full bg-red-600 px-2.5 py-1 text-xs font-semibold leading-none text-white">P1</span>
+          </div>
+          <div class="grid min-h-0 flex-1 gap-1 overflow-hidden" style="grid-template-rows: repeat(3, minmax(28px, 1fr));">
+            <div
+              v-for="(item, index) in imageComposeAlertRankingItems(effectiveBlock, effectiveData as CategoryRankingData).slice(0, 3)"
+              :key="`image-alert-${index}-${imageComposeAlertRankingTitle(item, index)}`"
+              class="workbench-image-alert-ranking-row grid min-h-0 items-center overflow-hidden rounded-md bg-transparent text-sm"
+            >
+              <span :class="['workbench-image-alert-ranking-severity', ...imageComposeAlertSeverityClasses(item)]">{{ imageComposeAlertRankingSeverity(item) }}</span>
+              <strong class="workbench-image-alert-ranking-title min-w-0 truncate text-sm text-[#f8efe9]" :title="imageComposeAlertRankingTitle(item, index)">{{ imageComposeAlertRankingTitle(item, index) }}</strong>
+              <time class="workbench-image-alert-ranking-time shrink-0 text-sm text-[#d7c0ba]" :title="imageComposeAlertRankingTime(item, index)">{{ imageComposeAlertRankingTime(item, index) }}</time>
+            </div>
+          </div>
+        </div>
+        <div
+          v-else-if="imageComposeBidConclusionCard(effectiveBlock, effectiveData)"
+          class="workbench-image-bid-conclusion grid h-full min-h-0 w-full grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-5"
+        >
+          <div class="grid min-w-0 grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2">
+            <strong class="min-w-0 truncate text-sm leading-5 text-slate-900" :title="effectiveBlock.title">{{ effectiveBlock.title }}</strong>
+            <span v-if="dataBindingNeedsHumanIntervention(effectiveBlock)" class="shrink-0 rounded bg-white px-1.5 py-0.5 text-xs font-semibold leading-5 text-amber-700">
+              {{ imageComposeBusinessGapBadgeLabel(effectiveBlock) }}
+            </span>
+            <span class="shrink-0 rounded bg-amber-100 px-2 py-0.5 text-xs font-semibold leading-5 text-amber-700">
+              {{ imageComposeBidConclusionBadge(effectiveData as CategoryRankingData) }}
+            </span>
+          </div>
+          <p class="mt-2 min-h-0 overflow-hidden text-sm leading-6 text-slate-700" :title="imageComposeBidConclusionDetail(effectiveData as CategoryRankingData)">
+            {{ imageComposeBidConclusionDetail(effectiveData as CategoryRankingData) }}
+          </p>
+        </div>
+        <div
+          v-else-if="imageComposeEmptyRankingPreview(effectiveBlock, effectiveData as CategoryRankingData)"
+          class="workbench-image-empty-ranking-preview flex h-full min-h-0 w-full flex-col overflow-hidden rounded-lg border border-slate-200 bg-white px-4 py-3 shadow-[0_2px_8px_rgba(15,23,42,0.04)]"
+        >
+          <div class="min-w-0">
+            <strong class="min-w-0 truncate text-sm leading-5 text-slate-900" :title="effectiveBlock.title">{{ effectiveBlock.title }}</strong>
+          </div>
+          <div class="workbench-image-empty-ranking-preview__body mt-3 grid min-h-0 flex-1 content-start gap-2 overflow-hidden">
+            <div
+              v-for="(item, index) in imageComposeRankingPreviewItems(effectiveBlock, effectiveData as CategoryRankingData)"
+              :key="`image-empty-ranking-preview-${effectiveBlock.id}-${index}-${imageComposeRankingPreviewLabel(item, index)}`"
+              class="grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2"
+            >
+              <span :class="imageComposeRankingPreviewAvatarClass(item, index)">{{ imageComposeRankingPreviewAvatar(item, index) }}</span>
+              <span class="grid min-w-0 gap-1">
+                <strong class="min-w-0 truncate text-xs font-semibold leading-4 text-slate-800" :title="imageComposeRankingPreviewLabel(item, index)">
+                  {{ imageComposeRankingPreviewLabel(item, index) }}
+                </strong>
+                <span v-if="imageComposeRankingPreviewDetail(item)" class="min-w-0 truncate text-[11px] leading-4 text-slate-400" :title="imageComposeRankingPreviewDetail(item)">
+                  {{ imageComposeRankingPreviewDetail(item) }}
+                </span>
+                <span v-else class="h-1.5 w-16 rounded-full bg-slate-100" aria-hidden="true" />
+              </span>
+              <span :class="imageComposeRankingPreviewValueClass(item, index)">
+                {{ imageComposeRankingPreviewValue(item, effectiveData as CategoryRankingData) }}
+              </span>
+            </div>
+          </div>
+          <div class="workbench-image-empty-ranking-preview__action mt-3 flex shrink-0 justify-end">
+            <span class="inline-flex items-center gap-1 text-xs font-semibold leading-5 text-[#4c2cff]">View all <ArrowRight class="h-3.5 w-3.5" /></span>
+          </div>
+        </div>
+        <div
+          v-else-if="imageComposeCompactCard(effectiveBlock)"
+          class="workbench-image-empty-ranking-preview flex h-full min-h-0 w-full flex-col overflow-hidden rounded-lg border border-slate-200 bg-white px-4 py-3 shadow-[0_2px_8px_rgba(15,23,42,0.04)]"
+        >
+          <div class="min-w-0">
+            <strong class="min-w-0 truncate text-sm leading-5 text-slate-900" :title="effectiveBlock.title">{{ effectiveBlock.title }}</strong>
+          </div>
+          <div class="workbench-image-empty-ranking-preview__body mt-3 grid min-h-0 flex-1 content-start gap-2 overflow-hidden">
+            <div
+              v-for="(item, index) in imageComposeRankingPreviewItems(effectiveBlock, effectiveData as CategoryRankingData)"
+              :key="`image-ranking-preview-${effectiveBlock.id}-${index}-${imageComposeRankingPreviewLabel(item, index)}`"
+              class="grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2"
+            >
+              <span :class="imageComposeRankingPreviewAvatarClass(item, index)">{{ imageComposeRankingPreviewAvatar(item, index) }}</span>
+              <span class="grid min-w-0 gap-1">
+                <strong class="min-w-0 truncate text-xs font-semibold leading-4 text-slate-800" :title="imageComposeRankingPreviewLabel(item, index)">
+                  {{ imageComposeRankingPreviewLabel(item, index) }}
+                </strong>
+                <span v-if="imageComposeRankingPreviewDetail(item)" class="min-w-0 truncate text-[11px] leading-4 text-slate-400" :title="imageComposeRankingPreviewDetail(item)">
+                  {{ imageComposeRankingPreviewDetail(item) }}
+                </span>
+                <span v-else class="h-1.5 w-16 rounded-full bg-slate-100" aria-hidden="true" />
+              </span>
+              <span :class="imageComposeRankingPreviewValueClass(item, index)">
+                {{ imageComposeRankingPreviewValue(item, effectiveData as CategoryRankingData) }}
+              </span>
+            </div>
+          </div>
+          <div class="workbench-image-empty-ranking-preview__action mt-3 flex shrink-0 justify-end">
+            <span class="inline-flex items-center gap-1 text-xs font-semibold leading-5 text-[#4c2cff]">View all <ArrowRight class="h-3.5 w-3.5" /></span>
+          </div>
+        </div>
+        <div v-else :class="['h-full min-h-0 w-full overflow-hidden', imageComposeCompactCard(effectiveBlock) ? 'space-y-2 px-3 py-2' : 'space-y-3']">
+          <div v-for="(item, index) in compactLimit((effectiveData as CategoryRankingData).items, 2, imageComposeCompactCard(effectiveBlock) ? 3 : 4)" :key="item.label" :class="imageComposeCompactCard(effectiveBlock) ? 'space-y-1' : 'space-y-2'">
+            <div class="flex items-center justify-between gap-2">
+              <div class="flex min-w-0 items-center gap-2">
+                <div
+                  :class="[
+                    'flex shrink-0 items-center justify-center text-xs font-semibold',
+                    imageComposeCompactCard(effectiveBlock)
+                      ? ['h-6 w-6 rounded-full', index % 3 === 0 ? 'bg-[#4c2cff] text-white' : index % 3 === 1 ? 'bg-[#e9f8f5] text-[#0f9f8b]' : 'bg-[#fff3d6] text-[#d78b00]']
+                      : 'h-7 w-7 rounded bg-slate-100 text-slate-600',
+                  ]"
+                >{{ imageComposeCompactCard(effectiveBlock) ? textValue((item as Record<string, unknown>).avatar, (item.label || String(index + 1)).slice(0, 1)).toUpperCase() : index + 1 }}</div>
+                <div>
+                  <div class="truncate font-medium text-slate-900" :class="imageComposeCompactCard(effectiveBlock) ? 'text-[11px]' : ''">{{ item.label }}</div>
+                  <div v-if="density !== 'thumbnail' && item.badge && !imageComposeCompactCard(effectiveBlock)" class="text-[11px] text-slate-500">{{ item.badge }}</div>
+                  <div v-if="imageComposeCompactCard(effectiveBlock)" class="mt-0.5 h-1.5 w-16 rounded-full bg-slate-100" />
+                </div>
+              </div>
+              <div class="text-right">
+                <div class="font-semibold text-slate-900" :class="imageComposeCompactCard(effectiveBlock) ? 'text-[11px]' : ''">{{ textValue((item as Record<string, unknown>).valueLabel) || formatMetricValue(item.value, (effectiveData as CategoryRankingData).valueFormat) }}</div>
+                <div v-if="density !== 'thumbnail' && !imageComposeCompactCard(effectiveBlock)" class="text-[11px] text-slate-500">{{ (item.share * 100).toFixed(1) }}%</div>
+              </div>
+            </div>
+            <div v-if="!imageComposeCompactCard(effectiveBlock)" class="h-2 rounded-full bg-slate-100"><div class="h-2 rounded-full bg-gradient-to-r from-[#1f4fd4] to-[#6fa9ff]" :style="{ width: `${Math.max(6, item.share * 100)}%` }" /></div>
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="effectiveData?.shape === 'rows'">
+        <div
+          v-if="imageComposeBidRowsCard(effectiveBlock, effectiveData)"
+          class="workbench-image-bid-rows-card grid h-full min-h-0 w-full grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-white text-xs leading-5"
+        >
+          <div class="grid h-9 shrink-0 grid-cols-[auto_minmax(0,1fr)_minmax(0,14rem)] items-center gap-2 border-b border-slate-200 bg-slate-50 px-3">
+            <i class="h-4 w-1.5 rounded-full bg-emerald-600" />
+            <strong class="min-w-0 truncate text-sm leading-5 text-slate-900" :title="effectiveBlock.title">{{ effectiveBlock.title }}</strong>
+            <span class="min-w-0 truncate text-right text-xs font-semibold text-slate-500" :title="effectiveBlock.subtitle">{{ effectiveBlock.subtitle }}</span>
+          </div>
+
+          <div
+            v-if="imageComposeBidRowsVisualKind(effectiveBlock, effectiveData) === 'infoGrid'"
+            class="grid min-h-0 content-start gap-2 overflow-hidden p-2"
+            :style="imageComposeBidTargetInfoGridStyle(imageComposeBidInfoItems(effectiveData).length)"
+          >
+            <div
+              v-for="(item, index) in imageComposeBidInfoItems(effectiveData).slice(0, 9)"
+              :key="`${item.label}-${item.value}`"
+              :class="[imageComposeBidInfoTileClasses(imageComposeBidInfoItems(effectiveData).length), imageComposeBidPanelClasses(item.record)]"
+              :style="imageComposeBidInfoTilePlacementStyle(index, imageComposeBidInfoItems(effectiveData).slice(0, 9).length)"
+              :title="`${item.label}：${item.value}`"
+            >
+              <span :class="imageComposeBidInfoLabelClasses(imageComposeBidInfoItems(effectiveData).length)">{{ item.label }}</span>
+              <b :class="imageComposeBidInfoValueClasses(imageComposeBidInfoItems(effectiveData).length)">{{ item.value }}</b>
+            </div>
+          </div>
+
+          <div
+            v-else-if="imageComposeBidRowsVisualKind(effectiveBlock, effectiveData) === 'cardGrid'"
+            class="grid min-h-0 content-start gap-2 overflow-hidden p-2"
+            :style="imageComposeBidCardGridStyle(imageComposeBidRowCards(effectiveData).length)"
+          >
+            <div
+              v-for="item in imageComposeBidRowCards(effectiveData).slice(0, 8)"
+              :key="`${item.label}-${item.value}`"
+              :class="[imageComposeBidCardTileClasses(imageComposeBidRowCards(effectiveData).length), imageComposeBidPanelClasses(item.record)]"
+              :title="[item.label, item.value, item.detail].filter(Boolean).join(' · ')"
+            >
+              <strong class="truncate text-sm leading-5 text-slate-900">{{ item.label }}</strong>
+              <span :class="[imageComposeBidCardPillPlacementClasses(imageComposeBidRowCards(effectiveData).length), imageComposeBidPillClasses(item.record)]">{{ item.value }}</span>
+              <span v-if="imageComposeBidRowCards(effectiveData).length < 7" class="mt-1 max-h-10 overflow-hidden leading-5 text-slate-600">{{ item.detail }}</span>
+            </div>
+          </div>
+
+          <div v-else class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden">
+            <div class="grid border-b border-slate-200 bg-slate-50 px-3 py-1.5 font-semibold text-slate-500" :style="imageComposeBidRowsGridStyle(imageComposeBidRowsColumns(effectiveData))">
+              <span v-for="column in imageComposeBidRowsColumns(effectiveData)" :key="column" class="truncate">{{ column }}</span>
+            </div>
+            <div class="min-h-0 overflow-hidden">
+              <div
+                v-for="(row, rowIndex) in imageComposeBidRowsRecords(effectiveData).slice(0, 6)"
+                :key="`bid-row-${rowIndex}`"
+                :class="['grid min-h-0 items-center border-b border-slate-100 px-3 py-1.5 last:border-b-0', imageComposeBidPanelClasses(row)]"
+                :style="imageComposeBidRowsGridStyle(imageComposeBidRowsColumns(effectiveData))"
+                :title="imageComposeBidRowsColumns(effectiveData).map((column) => `${column}：${imageComposeBidRowsCell(row, column)}`).join(' · ')"
+              >
+                <span
+                  v-for="column in imageComposeBidRowsColumns(effectiveData)"
+                  :key="column"
+                  class="min-w-0 truncate font-semibold text-slate-700"
+                >
+                  {{ imageComposeBidRowsCell(row, column) }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          v-else-if="tableRowsPreviewCard(effectiveBlock, effectiveData)"
+          class="grid h-full min-h-0 w-full grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-100 bg-white text-xs leading-5"
+        >
+          <div class="flex h-9 shrink-0 items-center justify-between gap-2 border-b border-slate-100 bg-slate-50 px-3">
+            <strong class="min-w-0 truncate text-sm text-slate-900" :title="effectiveBlock.title">{{ effectiveBlock.title }}</strong>
+            <span class="shrink-0 text-[11px] font-semibold text-slate-400">{{ ((effectiveData as TableRowsData).rows || []).length }} 行</span>
+          </div>
+
+          <div
+            v-if="['tableParameter', 'tableDescription'].includes(tableRowsPreviewVisualKind(effectiveData, effectiveBlock))"
+            class="grid min-h-0 content-start gap-1 overflow-y-auto p-1.5"
+            :style="{ gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' }"
+          >
+            <div
+              v-for="row in tableRowsPreviewRecords(effectiveData)"
+              :key="row.id"
+              class="grid min-h-[36px] grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-slate-50 px-2 py-1"
+            >
+              <span class="truncate text-[11px] font-semibold leading-4 text-slate-500" :title="tableRowsPreviewCell(row, ((effectiveData as TableRowsData).columns || [])[0])">{{ tableRowsPreviewCell(row, ((effectiveData as TableRowsData).columns || [])[0]) }}</span>
+              <b class="truncate text-[13px] font-semibold leading-5 text-slate-900" :title="tableRowsPreviewCell(row, ((effectiveData as TableRowsData).columns || [])[1])">{{ tableRowsPreviewCell(row, ((effectiveData as TableRowsData).columns || [])[1]) }}</b>
+            </div>
+          </div>
+
+          <div
+            v-else-if="['tableTimeline', 'tableSteps'].includes(tableRowsPreviewVisualKind(effectiveData, effectiveBlock))"
+            class="min-h-0 overflow-y-auto p-2"
+          >
+            <div
+              v-for="(row, rowIndex) in tableRowsPreviewRecords(effectiveData)"
+              :key="row.id"
+              class="grid grid-cols-[1.75rem_minmax(0,1fr)_auto] items-center gap-2 border-b border-slate-100 py-1.5 last:border-b-0"
+            >
+              <span class="grid h-6 w-6 place-items-center rounded-full bg-[#edf1ff] text-[11px] font-semibold text-[#4C78FC]">
+                {{ rowIndex + 1 }}
+              </span>
+              <span class="min-w-0 truncate font-semibold text-slate-800">{{ tableRowsTimelinePrimaryCell(row, ((effectiveData as TableRowsData).columns || [])) }}</span>
+              <span class="shrink-0 rounded bg-slate-100 px-1.5 py-0.5 text-[11px] font-medium text-slate-500">
+                {{ tableRowsTimelineBadgeCell(row, ((effectiveData as TableRowsData).columns || [])) }}
+              </span>
+            </div>
+          </div>
+
+          <div v-else class="min-h-0 overflow-hidden">
+            <ATable
+              class="workbench-card-ant-table h-full"
+              size="small"
+              row-key="__rowKey"
+              :columns="tableRowsPreviewAntTableColumns(effectiveBlock.id, (effectiveData as TableRowsData).columns || [])"
+              :data-source="tableRowsPreviewAntTableRows(effectiveData, (effectiveData as TableRowsData).columns || [])"
+              :pagination="false"
+              :scroll="tableRowsAntTableScroll(tableRowsPreviewAntTableColumns(effectiveBlock.id, (effectiveData as TableRowsData).columns || []))"
+              @resize-column="handleTableRowsAntTableColumnResize"
+            />
+          </div>
+        </div>
+        <div v-else class="grid h-full min-h-0 w-full grid-rows-[auto_minmax(0,1fr)] overflow-hidden border border-slate-100">
+          <ATable
+            class="workbench-card-ant-table h-full"
+            size="small"
+            row-key="__rowKey"
+            :columns="tableRowsFallbackAntTableColumns(effectiveBlock.id, effectiveData as TableRowsData)"
+            :data-source="tableRowsFallbackAntTableRows(effectiveData as TableRowsData)"
+            :pagination="false"
+            :scroll="tableRowsAntTableScroll(tableRowsFallbackAntTableColumns(effectiveBlock.id, effectiveData as TableRowsData))"
+            @resize-column="handleTableRowsAntTableColumnResize"
+          />
+        </div>
+      </template>
+
+      <template v-else-if="effectiveData?.shape === 'insightNarrative'">
+        <div class="h-full min-h-0 w-full space-y-4 overflow-y-auto">
+          <div class="flex items-center gap-2 text-sm font-semibold text-slate-900"><Sparkles class="h-4 w-4 text-[#1f4fd4]" /><span>AI 经营判断</span></div>
+          <div class="space-y-3">
+            <div v-for="item in compactLimit((effectiveData as InsightNarrativeData).bullets, 1, 2)" :key="item" class="flex items-center gap-3 rounded-lg border border-slate-100 bg-slate-50/80 p-3">
+              <div class="h-2.5 w-2.5 shrink-0 rounded-full bg-[#1f4fd4]" />
+              <p class="text-sm leading-6 text-slate-700">{{ item }}</p>
+            </div>
+          </div>
+          <div v-if="density !== 'thumbnail'" class="flex items-center justify-between text-xs text-slate-500">
+            <span>{{ (effectiveData as InsightNarrativeData).owner || 'Workbench AI' }}</span>
+            <span v-if="typeof (effectiveData as InsightNarrativeData).confidence === 'number'">置信度 {{ (((effectiveData as InsightNarrativeData).confidence || 0) * 100).toFixed(0) }}%</span>
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="effectiveData?.shape === 'taskSummary'">
+        <div class="h-full min-h-0 w-full space-y-4 overflow-y-auto">
+          <div v-if="density !== 'thumbnail'" class="grid grid-cols-4 gap-2">
+            <div v-for="item in [['全部', (effectiveData as TaskSummaryData).total], ['今日', (effectiveData as TaskSummaryData).dueToday], ['逾期', (effectiveData as TaskSummaryData).overdue], ['完成', (effectiveData as TaskSummaryData).completed]]" :key="String(item[0])" class="rounded-lg border border-slate-100 bg-slate-50/80 px-3 py-2">
+              <div class="text-[11px] text-slate-500">{{ item[0] }}</div>
+              <div class="mt-1 text-lg font-semibold text-slate-900">{{ item[1] }}</div>
+            </div>
+          </div>
+          <div class="space-y-2">
+            <div v-for="item in compactLimit((effectiveData as TaskSummaryData).items, 2, 3)" :key="item.id" class="rounded-lg border border-slate-100 bg-white px-3 py-2">
+              <div class="flex items-start justify-between gap-3">
+                <div class="min-w-0">
+                  <div class="truncate text-sm font-semibold text-slate-900">{{ item.title }}</div>
+                  <div v-if="density !== 'thumbnail'" class="mt-1 text-[11px] text-slate-500">{{ item.source || (effectiveData as TaskSummaryData).sourceLabel }}{{ item.dueAt ? ` · 截止 ${item.dueAt}` : '' }}</div>
+                </div>
+                <div class="flex shrink-0 gap-1">
+                  <span class="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-600">{{ taskTypeLabel(item.type) }}</span>
+                  <span :class="['rounded-full px-2 py-0.5 text-xs', taskStatusClass(item.status)]">{{ taskStatusLabel(item.status) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="effectiveData?.shape === 'weatherCurrent'">
+        <div class="h-full min-h-0 w-full space-y-3 overflow-y-auto">
+          <div class="rounded-lg border border-sky-100 bg-gradient-to-br from-sky-50 via-white to-emerald-50 p-3">
+            <div class="flex items-start justify-between gap-3">
+              <div class="min-w-0">
+                <div class="truncate text-xs font-medium text-slate-500">{{ (effectiveData as WeatherCurrentData).location }}</div>
+                <div class="mt-2 flex items-end gap-2">
+                  <span :class="density === 'thumbnail' || density === 'compact' ? 'text-3xl' : 'text-5xl'" class="font-semibold text-slate-950">{{ formatWeatherTemp((effectiveData as WeatherCurrentData).temperatureC) }}</span>
+                  <span class="pb-1 text-sm font-medium text-slate-600">{{ (effectiveData as WeatherCurrentData).conditionLabel }}</span>
+                </div>
+              </div>
+              <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-white text-sky-600 shadow-sm shadow-sky-100">
+                <component :is="weatherIcon((effectiveData as WeatherCurrentData).condition)" class="h-6 w-6" />
+              </div>
+            </div>
+          </div>
+          <div v-if="density !== 'thumbnail'" class="grid grid-cols-2 gap-2">
+            <div class="rounded-lg border border-slate-100 bg-slate-50/70 px-3 py-2"><div class="flex items-center gap-1.5 text-[11px] text-slate-500"><ThermometerSun class="h-3.5 w-3.5" />体感</div><div class="mt-1 text-sm font-semibold text-slate-900">{{ formatWeatherTemp((effectiveData as WeatherCurrentData).feelsLikeC) }}</div></div>
+            <div class="rounded-lg border border-slate-100 bg-slate-50/70 px-3 py-2"><div class="flex items-center gap-1.5 text-[11px] text-slate-500"><Droplets class="h-3.5 w-3.5" />湿度</div><div class="mt-1 text-sm font-semibold text-slate-900">{{ typeof (effectiveData as WeatherCurrentData).humidityPct === 'number' ? `${(effectiveData as WeatherCurrentData).humidityPct}%` : '--' }}</div></div>
+            <div class="rounded-lg border border-slate-100 bg-slate-50/70 px-3 py-2"><div class="flex items-center gap-1.5 text-[11px] text-slate-500"><CloudRain class="h-3.5 w-3.5" />降雨</div><div class="mt-1 text-sm font-semibold text-slate-900">{{ typeof (effectiveData as WeatherCurrentData).precipitationPct === 'number' ? `${(effectiveData as WeatherCurrentData).precipitationPct}%` : '--' }}</div></div>
+            <div class="rounded-lg border border-slate-100 bg-slate-50/70 px-3 py-2"><div class="flex items-center gap-1.5 text-[11px] text-slate-500"><Wind class="h-3.5 w-3.5" />风力</div><div class="mt-1 text-sm font-semibold text-slate-900">{{ (effectiveData as WeatherCurrentData).wind ? `${(effectiveData as WeatherCurrentData).wind?.direction} ${(effectiveData as WeatherCurrentData).wind?.level}` : '--' }}</div></div>
+          </div>
+          <div class="grid gap-2" :style="{ gridTemplateColumns: `repeat(${Math.max(1, compactLimit((effectiveData as WeatherCurrentData).forecast, 2, 2).length)}, minmax(0, 1fr))` }">
+            <div v-for="item in compactLimit((effectiveData as WeatherCurrentData).forecast, 2, 2)" :key="item.label" class="rounded-lg border border-slate-100 bg-white px-2 py-2 text-center">
+              <div class="text-[11px] font-medium text-slate-500">{{ item.label }}</div>
+              <div class="mt-1 text-xs text-slate-600">{{ item.conditionLabel }}</div>
+              <div class="mt-1 text-xs font-semibold text-slate-900">{{ formatWeatherTemp(item.lowC) }} / {{ formatWeatherTemp(item.highC) }}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="effectiveData?.shape === 'dashboardGrid'">
+        <div class="flex h-full min-h-0 w-full flex-col overflow-hidden">
+          <div
+            class="grid min-h-0 flex-1 grid-cols-2 gap-2"
+            :style="{ gridTemplateRows: `repeat(${Math.max(1, Math.ceil((effectiveData as DashboardGridData).panels.length / 2))}, minmax(0, 1fr))` }"
+          >
+            <div v-for="panel in (effectiveData as DashboardGridData).panels" :key="panel.id" class="flex min-h-0 min-w-0 flex-col overflow-hidden border border-slate-100 bg-slate-50/70 px-2 py-2">
+              <div class="mb-1 flex shrink-0 items-center justify-between gap-2">
+                <div class="min-w-0"><div class="truncate text-xs font-semibold text-slate-900">{{ panel.title }}</div><div v-if="density === 'expanded' && panel.subtitle" class="truncate text-xs text-slate-500">{{ panel.subtitle }}</div></div>
+                <FileBarChart2 class="h-3.5 w-3.5 shrink-0 text-[#1f4fd4]" />
+              </div>
+              <div class="min-h-0 flex-1 overflow-hidden"><ChartRegistryRenderer :renderer-key="panel.rendererKey" :data="panel.data" :card-title="panel.title" :role-id="roleId" :user-id="userId" density="thumbnail" :refresh-runtime="chartRefreshRuntime" /></div>
+            </div>
+          </div>
+          <div v-if="density === 'expanded'" class="mt-2 shrink-0 border border-slate-100 bg-white px-3 py-1.5 text-xs leading-5 text-slate-600">{{ (effectiveData as DashboardGridData).narrative }}</div>
+        </div>
+      </template>
+
+      <template v-else-if="effectiveData?.shape === 'calendarCard'">
+        <div class="h-full min-h-0 w-full space-y-3 overflow-y-auto">
+          <div class="flex items-center justify-between gap-3">
+            <div><div class="text-lg font-semibold text-slate-900">{{ (effectiveData as CalendarCardData).dateLabel }}</div><div class="text-xs text-slate-500">{{ (effectiveData as CalendarCardData).weekLabel }} · {{ (effectiveData as CalendarCardData).timezone }}</div></div>
+            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[#edf3ff] text-[#1f4fd4]"><CalendarDays class="h-5 w-5" /></div>
+          </div>
+          <div class="space-y-2">
+            <div v-for="item in compactLimit((effectiveData as CalendarCardData).items, 2, 2)" :key="item.id" class="flex items-center justify-between gap-3 rounded-lg border border-slate-100 bg-slate-50/80 px-3 py-2">
+              <div class="min-w-0"><div class="truncate text-sm font-medium text-slate-800">{{ item.title }}</div><div v-if="density !== 'thumbnail'" class="text-[11px] text-slate-500">{{ item.type }}</div></div>
+              <span class="shrink-0 text-xs font-semibold text-slate-600">{{ item.time }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="effectiveData?.shape === 'reportSummary'">
+        <div class="h-full min-h-0 w-full space-y-3 overflow-y-auto">
+          <p class="text-sm leading-6 text-slate-700">{{ (effectiveData as ReportSummaryDisplayData).summary }}</p>
+          <div class="space-y-2">
+            <div v-for="item in compactLimit((effectiveData as ReportSummaryDisplayData).highlights, 1, 2)" :key="item" class="rounded-lg border border-slate-100 bg-slate-50 px-3 py-2 text-sm leading-6 text-slate-700">{{ item }}</div>
+          </div>
+          <div v-if="density !== 'thumbnail'" class="text-[11px] text-slate-500">{{ (effectiveData as ReportSummaryDisplayData).sourceLabel }}</div>
+        </div>
+      </template>
+
+      <template v-else-if="effectiveData?.shape === 'embeddedFrame'">
+        <div v-if="!(effectiveData as EmbeddedFrameData).srcUrl || (effectiveData as EmbeddedFrameData).status === 'blocked'" class="rounded-lg border border-dashed border-amber-200 bg-amber-50 px-4 py-5 text-sm leading-6 text-amber-800">
+          {{ (effectiveData as EmbeddedFrameData).fallbackText || '缺少可嵌入页面地址。' }}
+        </div>
+        <div v-else class="flex h-full min-h-0 w-full flex-col overflow-hidden border border-slate-100 bg-white">
+          <iframe :title="(effectiveData as EmbeddedFrameData).title" :src="(effectiveData as EmbeddedFrameData).srcUrl" :sandbox="(effectiveData as EmbeddedFrameData).sandbox" class="min-h-0 w-full flex-1 border-0" />
+          <div class="border-t border-slate-100 px-3 py-2 text-[11px] text-slate-500">{{ (effectiveData as EmbeddedFrameData).sourceLabel }}</div>
+        </div>
+      </template>
+
+      <template v-else-if="effectiveData?.shape === 'fdeCustomComponent'">
+        <component
+          :is="fdeCustomComponentRenderState.component"
+          v-if="fdeCustomComponentRenderState.component && fdeCustomComponentRenderState.status === 'ready'"
+          v-bind="fdeCustomComponentRenderState.componentProps"
+        />
+        <div v-else class="h-full min-h-0 w-full overflow-y-auto border border-slate-100 bg-slate-50/80 p-4">
+          <div class="flex items-start justify-between gap-3">
+            <div><div class="text-sm font-semibold text-slate-900">{{ (effectiveData as FdeCustomComponentData).componentName }}</div><div class="mt-1 text-xs text-slate-500">{{ (effectiveData as FdeCustomComponentData).componentRef }}</div></div>
+            <span :class="fdeCustomComponentRenderState.status === 'ready' ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'" class="rounded-full px-2 py-0.5 text-[11px]">{{ fdeCustomComponentRenderState.status }}</span>
+          </div>
+          <p class="mt-3 text-xs leading-5 text-slate-500">{{ fdeCustomComponentRenderState.message || (effectiveData as FdeCustomComponentData).fallbackText || (effectiveData as FdeCustomComponentData).sourceLabel }}</p>
+        </div>
+      </template>
+
+      <template v-else-if="effectiveData?.shape === 'customCanvas' || effectiveData?.shape === 'geoGlobe'">
+        <div v-if="effectiveData?.shape === 'geoGlobe'" class="space-y-3">
+          <div class="relative overflow-hidden rounded-lg border border-slate-100 bg-[#07111f] p-4 text-white">
+            <div class="absolute inset-0 opacity-60" style="background: radial-gradient(circle at 50% 45%, #2563eb 0, #0f766e 26%, #0f172a 58%)" />
+            <div class="relative z-10 flex min-h-[120px] flex-col justify-between">
+              <div><div class="text-sm font-semibold">{{ (effectiveData as GeoGlobeData).title }}</div><div class="mt-1 text-xs text-slate-200">{{ (effectiveData as GeoGlobeData).centerLabel }}</div></div>
+              <div class="grid grid-cols-3 gap-2">
+                <div v-for="item in (effectiveData as GeoGlobeData).metrics" :key="item.label" class="rounded-lg bg-white/10 px-2 py-2 backdrop-blur"><div class="text-xs text-slate-300">{{ item.label }}</div><div class="mt-1 text-sm font-semibold">{{ item.value }}</div></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else :class="customCanvasShellClasses(effectiveBlock)" :style="customCanvasStyle(effectiveBlock, effectiveData as CustomCanvasData)">
+          <div
+            v-if="customCanvasEmptyPageHeaderPlaceholder(effectiveBlock, effectiveData as CustomCanvasData)"
+            class="workbench-custom-canvas-page-header workbench-custom-canvas-page-header--placeholder pointer-events-none h-full min-h-0 w-full overflow-hidden"
+            :style="customCanvasPageHeaderStyle(effectiveBlock, effectiveData as CustomCanvasData)"
+            aria-hidden="true"
+          />
+          <div
+            v-else-if="customCanvasPageHeaderBlock(effectiveBlock, effectiveData as CustomCanvasData)"
+            class="workbench-custom-canvas-page-header grid h-full min-h-0 w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-3 overflow-hidden rounded-md border px-4 py-0"
+            :style="customCanvasPageHeaderStyle(effectiveBlock, effectiveData as CustomCanvasData)"
+          >
+            <div class="workbench-custom-canvas-page-header__brand grid min-w-0 items-center gap-3 overflow-hidden">
+              <span class="workbench-custom-canvas-page-header__logo grid shrink-0 place-items-center rounded font-semibold leading-none" :style="customCanvasHeaderLogoStyle(effectiveBlock, effectiveData as CustomCanvasData)" :title="customCanvasHeaderLogo(effectiveBlock, effectiveData as CustomCanvasData)">
+                {{ customCanvasHeaderLogo(effectiveBlock, effectiveData as CustomCanvasData) }}
+              </span>
+              <div class="grid min-h-0 min-w-0 content-center">
+                <h3 :class="['workbench-custom-canvas-page-header__title truncate font-semibold', customCanvasPageHeaderTextClass(effectiveBlock, effectiveData as CustomCanvasData, 'title')]" :title="customCanvasHeaderTitle(effectiveBlock, effectiveData as CustomCanvasData)">
+                  {{ customCanvasHeaderTitle(effectiveBlock, effectiveData as CustomCanvasData) }}
+                </h3>
+                <p
+                  v-if="customCanvasHeaderSubtitle(effectiveBlock, effectiveData as CustomCanvasData)"
+                  :class="['workbench-custom-canvas-page-header__subtitle truncate', customCanvasPageHeaderTextClass(effectiveBlock, effectiveData as CustomCanvasData, 'subtitle')]"
+                  :title="customCanvasHeaderSubtitle(effectiveBlock, effectiveData as CustomCanvasData)"
+                >
+                  {{ customCanvasHeaderSubtitle(effectiveBlock, effectiveData as CustomCanvasData) }}
+                </p>
+              </div>
+            </div>
+            <div class="workbench-custom-canvas-page-header__actions flex min-w-0 items-center justify-end gap-2 overflow-hidden">
+              <span
+                v-for="pill in customCanvasHeaderPillsWithFallback(effectiveBlock, effectiveData as CustomCanvasData)"
+                :key="pill"
+                :class="['workbench-custom-canvas-page-header__pill shrink-0 truncate rounded border font-semibold', customCanvasPageHeaderTextClass(effectiveBlock, effectiveData as CustomCanvasData, 'pill')]"
+                :title="pill"
+              >
+                {{ pill }}
+              </span>
+            </div>
+            <span
+              v-for="(nestedBlock, index) in customCanvasVisibleNestedBlocks(effectiveData as CustomCanvasData)"
+              :key="`page-header-diagnostic-${nestedBlock.id}`"
+              data-testid="workbench-nested-card-preview"
+              :data-parent-block-id="effectiveBlock.id"
+              :data-nested-block-id="nestedBlock.id"
+              :data-nested-card-id="nestedBlock.id"
+              :data-nested-card-title="nestedBlock.title"
+              :data-nested-card-kind="nestedBlock.kind"
+              :data-capability-id="nestedBlock.capabilityId"
+              :data-compose-source="nestedBlockComposeSource(nestedBlock)"
+              :data-binding-id="nestedBlock.dataBindingId || nestedBlock.dataBinding?.bindingId || nestedBlock.dataBinding?.id || ''"
+              :data-binding-status="nestedBlock.dataBindingStatus"
+              :data-renderer-key="nestedBlockRendererKey(nestedBlock)"
+              :data-data-shape="nestedBlock.dataShape"
+              :data-visual-kind="nestedBlockVisualKind(nestedBlock)"
+              :data-business-gap="nestedBlockNeedsHumanIntervention(nestedBlock) ? 'true' : undefined"
+              :data-business-gap-reason="nestedBlockNeedsHumanIntervention(nestedBlock) ? nestedBlockBusinessGapReason(nestedBlock) : undefined"
+              :data-business-gap-diagnostics="nestedBlockNeedsHumanIntervention(nestedBlock) ? nestedBlockFailureReason(nestedBlock) : undefined"
+              :style="referenceCompositeDiagnosticStyle('', nestedBlock, index, customCanvasVisibleNestedBlocks(effectiveData as CustomCanvasData))"
+              aria-hidden="true"
+            />
+          </div>
+        <div
+          v-else-if="customCanvasAlertLeafContainer(effectiveBlock, effectiveData as CustomCanvasData)"
+            class="workbench-image-alert-ranking-list flex h-full min-h-0 w-full flex-col overflow-hidden rounded-md bg-[#241817] px-5 py-3 text-[#f8efe9]"
+          >
+            <div class="mb-1 flex h-6 shrink-0 items-center justify-between gap-2 pr-2">
+              <span class="truncate text-base font-semibold leading-5 text-[#fff7ed]" :title="effectiveBlock.title">{{ effectiveBlock.title }}</span>
+              <span class="rounded-full bg-red-600 px-2.5 py-1 text-xs font-semibold leading-none text-white">P1</span>
+            </div>
+            <div class="grid min-h-0 flex-1 gap-1 overflow-hidden" style="grid-template-rows: repeat(3, minmax(28px, 1fr));">
+              <div
+                v-for="(item, index) in customCanvasAlertLeafItems(effectiveData as CustomCanvasData).slice(0, 3)"
+                :key="`custom-alert-${index}-${imageComposeAlertRankingTitle(item, index)}`"
+                class="workbench-image-alert-ranking-row grid min-h-0 items-center overflow-hidden rounded-md bg-transparent text-sm"
+              >
+                <span :class="['workbench-image-alert-ranking-severity', ...imageComposeAlertSeverityClasses(item)]">{{ imageComposeAlertRankingSeverity(item) }}</span>
+                <strong class="workbench-image-alert-ranking-title min-w-0 truncate text-sm text-[#f8efe9]" :title="imageComposeAlertRankingTitle(item, index)">{{ imageComposeAlertRankingTitle(item, index) }}</strong>
+                <time class="workbench-image-alert-ranking-time shrink-0 text-sm text-[#d7c0ba]" :title="imageComposeAlertRankingTime(item, index)">{{ imageComposeAlertRankingTime(item, index) }}</time>
+              </div>
+            </div>
+          </div>
+            <div
+              v-else-if="customCanvasUsesReferenceCompositePreview(effectiveBlock, effectiveData as CustomCanvasData)"
+              :class="customCanvasNestedBlockContainerClasses(effectiveBlock, effectiveData as CustomCanvasData)"
+            >
+            <span
+              v-for="(nestedBlock, index) in customCanvasVisibleNestedBlocks(effectiveData as CustomCanvasData)"
+              :key="`diagnostic-${nestedBlock.id}`"
+              data-testid="workbench-nested-card-preview"
+              :data-parent-block-id="effectiveBlock.id"
+              :data-nested-block-id="nestedBlock.id"
+              :data-nested-card-id="nestedBlock.id"
+              :data-nested-card-title="nestedBlock.title"
+              :data-nested-card-kind="nestedBlock.kind"
+              :data-capability-id="nestedBlock.capabilityId"
+              :data-compose-source="nestedBlockComposeSource(nestedBlock)"
+              :data-binding-id="nestedBlock.dataBindingId || nestedBlock.dataBinding?.bindingId || nestedBlock.dataBinding?.id || ''"
+              :data-binding-status="nestedBlock.dataBindingStatus"
+              :data-renderer-key="nestedBlockRendererKey(nestedBlock)"
+              :data-data-shape="nestedBlock.dataShape"
+              :data-visual-kind="nestedBlockVisualKind(nestedBlock)"
+              :data-business-gap="nestedBlockNeedsHumanIntervention(nestedBlock) ? 'true' : undefined"
+              :data-business-gap-reason="nestedBlockNeedsHumanIntervention(nestedBlock) ? nestedBlockBusinessGapReason(nestedBlock) : undefined"
+              :data-business-gap-diagnostics="nestedBlockNeedsHumanIntervention(nestedBlock) ? nestedBlockFailureReason(nestedBlock) : undefined"
+              :style="referenceCompositeDiagnosticStyle(customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData), nestedBlock, index, customCanvasVisibleNestedBlocks(effectiveData as CustomCanvasData))"
+              aria-hidden="true"
+            />
+            <div v-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) !== 'riskSummary'" class="workbench-reference-panel-header grid h-[30px] shrink-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 overflow-hidden px-2 text-slate-900">
+              <i class="h-2.5 w-2.5 rounded-full bg-[#d83a3a]" />
+              <h3 class="truncate text-sm font-semibold leading-5" :title="effectiveBlock.title">{{ effectiveBlock.title }}</h3>
+              <span class="max-w-[8rem] truncate rounded-full border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-xs font-semibold leading-4 text-slate-500" :title="referenceCompositeHeaderChip(customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData))">
+                {{ referenceCompositeHeaderChip(customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData)) }}
+              </span>
+            </div>
+            <div
+              v-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'riskSummary'"
+              class="workbench-reference-risk-summary-band grid min-h-0 flex-1 grid-cols-[1.42fr_repeat(4,minmax(0,0.86fr))_2.18fr] items-stretch gap-1.5 overflow-hidden rounded-md bg-[#172235] p-2 text-white"
+            >
+              <section class="workbench-reference-risk-summary-body grid min-h-0 grid-cols-[4.75rem_minmax(0,1fr)] items-center gap-2 overflow-hidden">
+                <div class="workbench-reference-risk-score-donut grid h-[4.5rem] w-[4.5rem] place-items-center rounded-full bg-[conic-gradient(#dc2f2f_0_62%,#66758a_62%_100%)] p-2">
+                  <div class="grid h-full w-full place-items-center rounded-full bg-white text-base font-bold leading-none text-[#0b1f3a]">{{ referenceRiskMetricValue(effectiveData as CustomCanvasData, /经营健康|综合得分|health|score/i, '62 分') }}</div>
+                </div>
+                <div class="min-w-0">
+                  <div class="truncate text-xs font-semibold uppercase tracking-[0.04em] text-slate-300">GLOBAL RISK POSTURE</div>
+                  <h4 class="mt-0.5 truncate text-sm font-semibold leading-5 text-white" title="集团经营健康综合得分">集团经营健康综合得分</h4>
+                  <p class="workbench-reference-risk-narrative max-h-9 overflow-hidden text-xs leading-[18px] text-slate-200" title="低于安全线，盈利、资金、投资项目三类风险同步抬升。">低于安全线，盈利、资金、投资项目三类风险同步抬升。</p>
+                </div>
+              </section>
+              <section
+                v-for="item in referenceRiskKpiItems(effectiveData as CustomCanvasData)"
+                :key="`risk-kpi-${item.label}`"
+                class="workbench-reference-risk-kpi-tile grid min-h-0 grid-rows-[auto_auto_minmax(0,1fr)] overflow-hidden rounded-md border px-2 py-1.5"
+                :class="item.tone === 'warning' ? 'border-amber-500/40 bg-amber-500/15' : 'border-red-500/40 bg-red-500/15'"
+              >
+                <div class="truncate text-xs font-semibold leading-4 text-slate-100" :title="item.label">{{ item.label }}</div>
+                <div class="truncate pt-2 text-2xl font-bold leading-none text-white" :title="item.value">{{ item.value }}</div>
+                <div class="self-end truncate text-xs leading-4 text-slate-300" :title="item.detail">{{ item.detail }}</div>
+              </section>
+              <section class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)_auto] gap-1 overflow-hidden rounded-md border border-white/10 bg-white/8 px-2 py-1.5">
+                <h4 class="truncate text-xs font-semibold uppercase tracking-[0.12em] text-slate-200">TODAY MOVEMENT</h4>
+                <div class="grid min-h-0 gap-0.5 overflow-hidden" style="grid-auto-rows: minmax(0, 1fr);">
+                  <div v-for="(item, index) in referenceRiskMovementItems(effectiveData as CustomCanvasData)" :key="`risk-move-${index}`" class="grid min-h-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 overflow-hidden rounded bg-white/8 px-1.5 py-0.5 text-xs">
+                    <i class="h-1.5 w-1.5 rounded-full bg-red-400" />
+                    <span class="truncate font-semibold leading-4 text-slate-100" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</span>
+                  </div>
+                </div>
+                <div class="workbench-reference-risk-movement-action grid h-6 grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 rounded border border-white/15 bg-white/8 px-1.5 text-xs font-semibold text-slate-100">
+                  <span class="text-sm leading-none">⌄</span>
+                  <span class="truncate text-right leading-4">一键风险全景下钻</span>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'quickWorkbench'"
+              class="workbench-reference-quick-workbench-panel grid min-h-0 flex-1 grid-rows-[1fr_1fr_1.05fr_1fr] gap-2 overflow-hidden px-3 pb-3"
+            >
+              <section
+                v-for="group in referenceQuickWorkbenchGroups()"
+                :key="`quick-workbench-${group.id}`"
+                class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-slate-50 px-3 py-2"
+              >
+                <div class="grid h-6 grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
+                  <h4 class="truncate text-sm font-semibold leading-5 text-slate-900" :title="group.title">{{ group.title }}</h4>
+                  <span v-if="group.id === 'todo'" class="inline-flex h-6 max-w-[4.5rem] shrink-0 items-center justify-center truncate rounded-full bg-red-50 px-2 text-xs font-semibold leading-none text-red-600" :title="referenceQuickWorkbenchUrgentBadge(effectiveData as CustomCanvasData)">{{ referenceQuickWorkbenchUrgentBadge(effectiveData as CustomCanvasData) }}</span>
+                </div>
+                <div
+                  v-if="group.id === 'entry'"
+                  class="mt-2 grid min-h-0 grid-cols-2 gap-1.5 overflow-hidden"
+                >
+                  <div
+                    v-for="(item, index) in referenceQuickWorkbenchGroupItems(effectiveData as CustomCanvasData, group)"
+                    :key="`quick-entry-${index}`"
+                    class="grid min-h-0 place-items-center overflow-hidden rounded border border-[#b8c9f8] bg-[#eef4ff] px-2 text-center text-sm font-semibold leading-5 text-[#1f55b8]"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    <span class="max-w-full truncate">{{ nestedBlockItemLabel(item, index) }}</span>
+                  </div>
+                </div>
+                <div v-else class="mt-2 grid min-h-0 gap-1 overflow-hidden" style="grid-auto-rows: minmax(0, 1fr);">
+                  <div
+                    v-for="(item, index) in referenceQuickWorkbenchGroupItems(effectiveData as CustomCanvasData, group)"
+                    :key="`quick-row-${group.id}-${index}`"
+                    class="grid min-h-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 overflow-hidden text-sm leading-5"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    <i :class="nestedBlockDotClasses(item)" />
+                    <span class="min-w-0 truncate text-slate-600">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <b class="max-w-[4rem] truncate text-right text-slate-900" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) }}</b>
+                  </div>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'strategyKpi'"
+              class="workbench-reference-strategy-kpi-panel grid min-h-0 flex-1 grid-cols-[1.22fr_repeat(3,minmax(0,1fr))] grid-rows-[minmax(0,1fr)_minmax(0,1fr)_auto] gap-2 overflow-hidden px-3 pb-3"
+            >
+              <button
+                v-for="item in referenceStrategyKpiMetrics(effectiveData as CustomCanvasData).slice(0, 1)"
+                :key="`strategy-kpi-primary-${nestedBlockItemLabel(item, 0)}`"
+                type="button"
+                class="workbench-reference-strategy-kpi-main relative row-span-2 grid min-h-0 overflow-hidden rounded-md bg-[#1769d6] p-3 text-left text-white transition hover:ring-2 hover:ring-[#4C78FC]/35 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-[#1769d6]"
+                v-bind="referenceItemNestedCardAttrs(item)"
+                :title="nestedBlockItemTitle(item, 0)"
+                :aria-label="nestedBlockItemTitle(item, 0)"
+                :tabindex="referenceItemNestedRoleLabel(item) ? 0 : -1"
+                @pointerdown.stop
+                @click.stop="focusReferenceNestedItem(item)"
+              >
+                <div class="relative z-10 min-w-0">
+                  <div class="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-2">
+                    <div class="truncate text-sm font-semibold leading-5 text-blue-100" :title="nestedBlockItemLabel(item, 0)">{{ nestedBlockItemLabel(item, 0) }}</div>
+                    <span v-if="referenceItemNestedRoleLabel(item)" class="workbench-nested-card-role-badge shrink-0 rounded border border-white/30 bg-white/15 px-1.5 py-0 text-[12px] font-semibold leading-4 text-blue-50">{{ referenceItemNestedRoleLabel(item) }}</span>
+                  </div>
+                  <strong class="mt-3 block max-w-full truncate text-[clamp(2rem,4.3vw,3.4rem)] font-bold leading-none" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) }}</strong>
+                  <p class="mt-2 truncate text-sm font-semibold leading-5 text-blue-50" :title="nestedBlockItemDetail(item)">{{ nestedBlockItemDetail(item) }}</p>
+                </div>
+                <svg class="absolute inset-x-4 bottom-4 h-[38%] text-white/80" viewBox="0 0 200 76" preserveAspectRatio="none" aria-hidden="true">
+                  <path d="M0 68 H200" stroke="rgba(255,255,255,0.24)" stroke-width="2" />
+                  <path :d="referenceStrategyKpiTrendPath(effectiveData as CustomCanvasData)" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+                <div class="absolute -bottom-12 right-[-24px] h-40 w-40 rounded-full border-[22px] border-white/25" aria-hidden="true" />
+              </button>
+              <button
+                v-for="(item, index) in referenceStrategyKpiMetrics(effectiveData as CustomCanvasData).slice(1)"
+                :key="`strategy-kpi-${index}`"
+                type="button"
+                class="grid min-h-0 grid-rows-[auto_minmax(1.75rem,1fr)_auto] overflow-hidden rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-left transition hover:border-[#4C78FC] hover:bg-[#f8fbff] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4C78FC] focus-visible:ring-offset-2"
+                v-bind="referenceItemNestedCardAttrs(item)"
+                :title="nestedBlockItemTitle(item, index + 1)"
+                :aria-label="nestedBlockItemTitle(item, index + 1)"
+                :tabindex="referenceItemNestedRoleLabel(item) ? 0 : -1"
+                @pointerdown.stop
+                @click.stop="focusReferenceNestedItem(item)"
+              >
+                <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2 text-sm leading-5">
+                  <span class="truncate text-slate-500" :title="nestedBlockItemLabel(item, index + 1)">{{ nestedBlockItemLabel(item, index + 1) }}</span>
+                  <span v-if="referenceItemNestedRoleLabel(item)" class="workbench-nested-card-role-badge shrink-0 rounded border border-slate-200 bg-white px-1.5 py-0 text-[12px] font-semibold leading-4 text-slate-500">{{ referenceItemNestedRoleLabel(item) }}</span>
+                  <span v-else :class="nestedBlockPillClasses(item)" :title="nestedBlockItemValue(item)">{{ nestedBlockToneClass(item) === 'critical' ? '紧张' : nestedBlockToneClass(item) === 'warning' ? '进行中' : '领先' }}</span>
+                </div>
+                <strong class="self-center truncate text-[clamp(1.15rem,1.55vw,1.65rem)] font-bold leading-none text-slate-900" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) }}</strong>
+                <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2 text-xs leading-5 text-slate-500">
+                  <span class="h-2 overflow-hidden rounded-full bg-slate-200"><i :class="nestedBlockBarClasses(item)" :style="nestedBlockBarStyle(item, index === 0 ? 78 : 58)" /></span>
+                  <span class="max-w-[5rem] truncate text-right" :title="nestedBlockItemDetail(item)">{{ nestedBlockItemDetail(item) }}</span>
+                </div>
+              </button>
+              <section class="workbench-reference-strategy-kpi-risk-strip col-span-4 grid min-h-[4.75rem] grid-cols-[minmax(4.75rem,auto)_minmax(0,1fr)] items-center gap-3 overflow-hidden rounded-md border border-red-200 bg-red-50 px-4 py-2">
+                <strong class="truncate text-lg leading-6 text-red-600">{{ referenceStrategyKpiRiskSummaryLabel(effectiveData as CustomCanvasData) }}</strong>
+                <div class="grid min-w-0 gap-3 overflow-hidden" :style="referenceStrategyKpiRiskItemsGridStyle(effectiveData as CustomCanvasData)">
+                  <button
+                    v-for="(item, index) in referenceStrategyKpiRiskItems(effectiveData as CustomCanvasData)"
+                    :key="`strategy-risk-${index}`"
+                    type="button"
+                    class="grid min-w-0 grid-rows-[auto_auto_auto] border-l border-red-200 bg-transparent pl-3 text-left text-xs leading-5 transition hover:text-[#4C78FC] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4C78FC] focus-visible:ring-offset-2 first:border-l-0 first:pl-0"
+                    v-bind="referenceItemNestedCardAttrs(item)"
+                    :title="nestedBlockItemTitle(item, index)"
+                    :aria-label="nestedBlockItemTitle(item, index)"
+                    :tabindex="referenceItemNestedRoleLabel(item) ? 0 : -1"
+                    @pointerdown.stop
+                    @click.stop="focusReferenceNestedItem(item)"
+                  >
+                    <b class="truncate text-sm leading-5 text-slate-700">{{ nestedBlockItemLabel(item, index) }}</b>
+                    <span class="truncate text-slate-600">{{ nestedBlockItemDetail(item) || nestedBlockItemValue(item) }}</span>
+                    <span v-if="referenceItemNestedRoleLabel(item)" class="workbench-nested-card-role-badge mt-0.5 w-fit max-w-full truncate rounded border border-red-200 bg-white px-1.5 py-0 text-[12px] font-semibold leading-4 text-red-500">{{ referenceItemNestedRoleLabel(item) }}</span>
+                  </button>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'operationHealth'"
+              class="workbench-reference-operation-health-panel grid min-h-0 flex-1 grid-cols-[0.8fr_1.52fr_1.08fr] gap-2 overflow-hidden px-3 pb-3"
+            >
+              <section class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-slate-50 px-2 py-2">
+                <h4 class="truncate text-sm font-semibold leading-5 text-slate-900">目标进度条</h4>
+                <div class="mt-2 grid min-h-0 gap-1.5 overflow-hidden" style="grid-auto-rows: minmax(0, 1fr);">
+                  <div
+                    v-for="(item, index) in referenceOperationHealthProgressItems(effectiveData as CustomCanvasData)"
+                    :key="`operation-health-progress-${index}`"
+                    class="grid min-h-0 grid-rows-[auto_auto] gap-1 overflow-hidden text-xs leading-4"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    <div class="grid grid-cols-[minmax(0,1fr)_auto] gap-2">
+                      <span class="min-w-0 truncate font-semibold text-slate-700">{{ nestedBlockItemLabel(item, index) }}</span>
+                      <b class="max-w-[4rem] truncate text-right text-slate-900">{{ nestedBlockItemValue(item) || '--' }}</b>
+                    </div>
+                    <span class="h-2 overflow-hidden rounded-full bg-slate-200"><i :class="nestedBlockBarClasses(item)" :style="nestedBlockBarStyle(item, 62)" /></span>
+                  </div>
+                </div>
+              </section>
+              <section class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-white px-2 py-2">
+                <h4 class="truncate text-sm font-semibold leading-5 text-slate-900">近6个月核心指标</h4>
+                <div class="mt-2 grid min-h-0 grid-cols-6 items-end gap-1.5 overflow-hidden border-b border-slate-200 px-1 pb-1.5">
+                  <div
+                    v-for="(item, index) in referenceOperationHealthTrendItems(effectiveData as CustomCanvasData)"
+                    :key="`operation-health-trend-${index}`"
+                    class="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto] items-end gap-1 text-center text-xs text-slate-500"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    <span class="flex h-full items-end justify-center"><i :class="referenceOpsTrendBarClasses(item)" :style="{ height: nestedBlockItemProgress(item, 54), width: '100%' }" /></span>
+                    <span class="truncate">{{ nestedBlockItemLabel(item, index) }}</span>
+                  </div>
+                </div>
+              </section>
+              <section class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-slate-50 px-2 py-2">
+                <h4 class="truncate text-sm font-semibold leading-5 text-slate-900">结构占比</h4>
+                <div class="mt-2 grid min-h-0 grid-cols-[4.75rem_minmax(0,1fr)] items-center gap-2 overflow-hidden">
+                  <div class="grid h-[4.5rem] w-[4.5rem] place-items-center rounded-full text-xs font-semibold text-slate-500" :style="nestedBlockDonutStyle(referenceOperationHealthStructureBlock(effectiveData as CustomCanvasData))">结构</div>
+                  <div class="grid min-w-0 gap-1 overflow-hidden text-xs leading-4">
+                    <div
+                      v-for="(item, index) in referenceOperationHealthStructureItems(effectiveData as CustomCanvasData)"
+                      :key="`operation-health-structure-${index}`"
+                      class="grid grid-cols-[minmax(0,1fr)_auto] gap-1 overflow-hidden"
+                      :title="nestedBlockItemTitle(item, index)"
+                    >
+                      <span class="truncate text-slate-600">{{ nestedBlockItemLabel(item, index) }}</span>
+                      <b class="max-w-[3.5rem] truncate text-slate-900">{{ nestedBlockItemValue(item) || '--' }}</b>
+                    </div>
+                  </div>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'operationEfficiency'"
+              class="workbench-reference-operation-efficiency-panel grid min-h-0 flex-1 gap-2 overflow-hidden px-3 pb-3"
+              :style="referenceOperationEfficiencyPanelStyle(effectiveData as CustomCanvasData)"
+            >
+              <section
+                v-for="group in referenceOperationEfficiencyGroups(effectiveData as CustomCanvasData)"
+                :key="`operation-efficiency-${group.id}`"
+                class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-slate-50 px-2 py-2"
+              >
+                <div class="grid h-6 grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
+                  <h4 class="truncate text-sm font-semibold leading-5 text-slate-900" :title="group.title">{{ group.title }}</h4>
+                  <span class="rounded-full border border-slate-200 bg-white px-1.5 py-0.5 text-xs font-semibold leading-none text-slate-500">{{ group.items.length }}</span>
+                </div>
+                <div
+                  :class="[
+                    'mt-2 grid min-h-0 gap-1 overflow-hidden',
+                    group.items.length <= 1 ? 'h-full' : 'h-full auto-rows-fr',
+                  ]"
+                >
+                  <button
+                    v-for="(item, index) in group.items.slice(0, 4)"
+                    :key="`operation-efficiency-row-${group.id}-${index}`"
+                    type="button"
+                    :class="[
+                      'overflow-hidden rounded border border-slate-100 bg-white text-left text-xs leading-5 transition hover:border-[#4C78FC] hover:bg-[#f8fbff] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4C78FC] focus-visible:ring-offset-2',
+                      group.items.length <= 1
+                        ? 'workbench-reference-operation-efficiency-single grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)_auto] gap-2 px-3 py-2'
+                        : 'grid min-h-0 grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 px-2 py-1',
+                    ]"
+                    v-bind="referenceItemNestedCardAttrs(item)"
+                    :title="nestedBlockItemTitle(item, index)"
+                    :aria-label="nestedBlockItemTitle(item, index)"
+                    :tabindex="referenceItemNestedRoleLabel(item) ? 0 : -1"
+                    @pointerdown.stop
+                    @click.stop="focusReferenceNestedItem(item)"
+                  >
+                    <template v-if="group.items.length <= 1">
+                      <div class="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
+                        <span class="min-w-0 truncate font-semibold text-slate-700">{{ nestedBlockItemLabel(item, index) }}</span>
+                        <span v-if="referenceItemNestedRoleLabel(item)" class="workbench-nested-card-role-badge max-w-[5.5rem] shrink-0 truncate rounded border border-slate-200 bg-slate-50 px-1.5 py-0 text-[12px] font-semibold leading-4 text-slate-500">
+                          {{ referenceItemNestedRoleLabel(item) }}
+                        </span>
+                      </div>
+                      <strong :class="['self-center truncate text-[clamp(1.25rem,2vw,1.75rem)] font-bold leading-none', nestedBlockToneClass(item) === 'critical' ? 'text-red-600' : nestedBlockToneClass(item) === 'warning' ? 'text-amber-700' : 'text-slate-900']">
+                        {{ nestedBlockItemValue(item) || '--' }}
+                      </strong>
+                      <p class="min-w-0 truncate text-slate-500" :title="nestedBlockItemDetail(item)">{{ nestedBlockItemDetail(item) || '等待补充业务口径后问数' }}</p>
+                    </template>
+                    <template v-else>
+                      <span class="min-w-0 truncate font-semibold text-slate-700">{{ nestedBlockItemLabel(item, index) }}</span>
+                      <b :class="['max-w-[4.5rem] truncate text-right font-semibold', nestedBlockToneClass(item) === 'critical' ? 'text-red-600' : nestedBlockToneClass(item) === 'warning' ? 'text-amber-700' : 'text-slate-900']">
+                        {{ nestedBlockItemValue(item) || '--' }}
+                      </b>
+                      <span v-if="referenceItemNestedRoleLabel(item)" class="workbench-nested-card-role-badge max-w-[4.75rem] shrink-0 truncate rounded border border-slate-200 bg-slate-50 px-1.5 py-0 text-[12px] font-semibold leading-4 text-slate-500">
+                        {{ referenceItemNestedRoleLabel(item) }}
+                      </span>
+                    </template>
+                  </button>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'hrOrganization'"
+              class="workbench-reference-hr-organization-panel grid min-h-0 flex-1 grid-cols-[0.82fr_1.18fr] grid-rows-[minmax(0,0.62fr)_minmax(0,0.38fr)] gap-2 overflow-hidden px-3 pb-3 text-xs leading-4"
+            >
+              <section class="row-span-2 grid min-h-0 content-start gap-1.5 overflow-hidden rounded-md border border-slate-200 bg-slate-50 px-2 py-2">
+                <h4 class="truncate text-sm font-semibold leading-5 text-slate-900">组织结构概览</h4>
+                <div
+                  v-for="(item, index) in referenceHrOrganizationMetrics(effectiveData as CustomCanvasData)"
+                  :key="`hr-org-metric-${index}`"
+                  class="grid min-h-[3.5rem] grid-cols-[minmax(0,1fr)_auto] items-center gap-2 overflow-hidden rounded border border-slate-100 bg-white px-2 py-1.5"
+                  :title="nestedBlockItemTitle(item, index)"
+                >
+                  <span class="min-w-0 truncate font-semibold text-slate-600">{{ nestedBlockItemLabel(item, index) }}</span>
+                  <strong class="max-w-[5rem] truncate text-right text-base font-bold leading-5 text-slate-950" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) || '--' }}</strong>
+                </div>
+              </section>
+              <section class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-white px-2 py-2">
+                <h4 class="truncate text-sm font-semibold leading-5 text-slate-900">部门编制达成</h4>
+                <div class="mt-2 grid min-h-0 content-start gap-1.5 overflow-hidden">
+                  <div
+                    v-for="(item, index) in referenceHrOrganizationRows(effectiveData as CustomCanvasData)"
+                    :key="`hr-org-row-${index}`"
+                    class="grid grid-cols-[4.75rem_minmax(0,1fr)_3.5rem] items-center gap-2 overflow-hidden text-xs"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    <span class="truncate font-semibold text-slate-700">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <span class="h-2 overflow-hidden rounded-full bg-slate-200"><i :class="nestedBlockBarClasses(item)" :style="nestedBlockBarStyle(item, 68)" /></span>
+                    <b class="truncate text-right text-slate-800">{{ nestedBlockItemValue(item) || nestedBlockItemProgress(item, 68) }}</b>
+                  </div>
+                </div>
+              </section>
+              <section class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-slate-50 px-2 py-2">
+                <h4 class="truncate text-sm font-semibold leading-5 text-slate-900">关键异动趋势</h4>
+                <div class="mt-2 grid min-h-0 grid-cols-6 items-end gap-1.5 overflow-hidden border-b border-slate-200 px-1 pb-1.5">
+                  <div
+                    v-for="(item, index) in referenceHrCostTrendItems(effectiveData as CustomCanvasData).slice(0, 6)"
+                    :key="`hr-org-trend-${index}`"
+                    class="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto] items-end gap-1 text-center"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    <span class="flex h-full min-h-0 items-end justify-center"><i :class="referenceOpsTrendBarClasses(item)" :style="{ height: nestedBlockItemProgress(item, 58), width: '62%' }" /></span>
+                    <span class="truncate text-slate-500">{{ nestedBlockItemLabel(item, index) }}</span>
+                  </div>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'hrRiskCompliance'"
+              class="workbench-reference-hr-risk-panel grid min-h-0 flex-1 grid-cols-3 grid-rows-[minmax(0,0.42fr)_minmax(0,0.58fr)] gap-2 overflow-hidden px-3 pb-3 text-xs leading-4"
+            >
+              <section
+                v-for="(item, index) in referenceHrRiskRows(effectiveData as CustomCanvasData).slice(0, 3)"
+                :key="`hr-risk-kpi-${index}`"
+                :class="['grid min-h-0 grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden rounded-md border px-2 py-2', nestedBlockToneClass(item) === 'critical' ? 'border-red-100 bg-red-50' : 'border-amber-100 bg-amber-50']"
+                :title="nestedBlockItemTitle(item, index)"
+              >
+                <span class="truncate font-semibold text-slate-700">{{ nestedBlockItemLabel(item, index) }}</span>
+                <strong :class="['self-center truncate text-[clamp(1.35rem,2.2vw,1.9rem)] font-bold leading-none', nestedBlockToneClass(item) === 'critical' ? 'text-red-700' : 'text-amber-800']">{{ nestedBlockItemValue(item) || '--' }}</strong>
+                <span class="truncate text-slate-600">{{ nestedBlockItemDetail(item) || '待 HRBP 跟进' }}</span>
+              </section>
+              <section class="col-span-3 grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-white px-2 py-2">
+                <h4 class="truncate text-sm font-semibold leading-5 text-slate-900">合规处置清单</h4>
+                <div class="mt-2 grid min-h-0 content-start gap-1.5 overflow-hidden">
+                  <div
+                    v-for="(item, index) in referenceHrRiskRows(effectiveData as CustomCanvasData)"
+                    :key="`hr-risk-row-${index}`"
+                    class="grid min-h-[2.25rem] grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 overflow-hidden rounded border border-slate-100 bg-slate-50 px-2 py-1"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    <i :class="nestedBlockDotClasses(item)" />
+                    <span class="min-w-0 truncate font-semibold text-slate-700">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <span :class="nestedBlockPillClasses(item)" :title="nestedBlockItemValue(item) || nestedBlockItemDetail(item)">{{ nestedBlockItemValue(item) || nestedBlockItemDetail(item) || '待确认' }}</span>
+                  </div>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'hrPeopleCost'"
+              class="workbench-reference-hr-people-cost-panel grid min-h-0 flex-1 grid-cols-[0.9fr_1.1fr] gap-2 overflow-hidden px-3 pb-3 text-xs leading-4"
+            >
+              <section class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-slate-50 px-2 py-2">
+                <h4 class="truncate text-sm font-semibold leading-5 text-slate-900">薪酬成本结构</h4>
+                <div class="mt-2 grid min-h-0 content-start gap-1.5 overflow-hidden">
+                  <div
+                    v-for="(item, index) in referenceHrPeopleCostItems(effectiveData as CustomCanvasData)"
+                    :key="`hr-cost-item-${index}`"
+                    class="grid min-h-[2.75rem] grid-cols-[minmax(0,1fr)_auto] items-center gap-2 overflow-hidden rounded border border-slate-100 bg-white px-2 py-1"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    <span class="min-w-0 truncate font-semibold text-slate-600">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <strong :class="['max-w-[5rem] truncate text-right text-base leading-5', nestedBlockToneClass(item) === 'critical' ? 'text-red-600' : nestedBlockToneClass(item) === 'warning' ? 'text-amber-700' : 'text-slate-950']">{{ nestedBlockItemValue(item) || '--' }}</strong>
+                  </div>
+                </div>
+              </section>
+              <section class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden rounded-md border border-slate-200 bg-white px-2 py-2">
+                <h4 class="truncate text-sm font-semibold leading-5 text-slate-900">成本趋势与人效</h4>
+                <div class="mt-2 grid min-h-0 grid-cols-5 items-end gap-2 overflow-hidden border-b border-slate-200 px-1 pb-2">
+                  <div
+                    v-for="(item, index) in referenceHrCostTrendItems(effectiveData as CustomCanvasData)"
+                    :key="`hr-cost-trend-${index}`"
+                    class="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto] items-end gap-1 text-center"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    <span class="flex h-full min-h-0 items-end justify-center"><i :class="referenceOpsTrendBarClasses(item)" :style="{ height: nestedBlockItemProgress(item, 62), width: '58%' }" /></span>
+                    <span class="truncate text-slate-500">{{ nestedBlockItemLabel(item, index) }}</span>
+                  </div>
+                </div>
+                <div class="mt-2 grid shrink-0 grid-cols-2 gap-1.5 overflow-hidden">
+                  <div
+                    v-for="(item, index) in referenceHrPeopleCostItems(effectiveData as CustomCanvasData).slice(2, 4)"
+                    :key="`hr-cost-footer-${index}`"
+                    class="grid min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2 overflow-hidden rounded border border-slate-100 bg-slate-50 px-2 py-1"
+                    :title="nestedBlockItemTitle(item, index + 2)"
+                  >
+                    <span class="truncate font-semibold text-slate-600">{{ nestedBlockItemLabel(item, index + 2) }}</span>
+                    <span :class="nestedBlockPillClasses(item)" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) || '待确认' }}</span>
+                  </div>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'hrTalentTodo'"
+              class="workbench-reference-hr-talent-panel grid min-h-0 flex-1 grid-cols-[0.78fr_1.22fr] gap-2 overflow-hidden px-3 pb-3 text-xs leading-4"
+            >
+              <section class="grid min-h-0 content-start gap-1.5 overflow-hidden rounded-md border border-slate-200 bg-slate-50 px-2 py-2">
+                <h4 class="truncate text-sm font-semibold leading-5 text-slate-900">人才梯队</h4>
+                <div
+                  v-for="(item, index) in referenceHrTalentMetrics(effectiveData as CustomCanvasData)"
+                  :key="`hr-talent-metric-${index}`"
+                  class="grid min-h-[3.75rem] grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded border border-slate-100 bg-white px-2 py-1.5"
+                  :title="nestedBlockItemTitle(item, index)"
+                >
+                  <span class="truncate font-semibold text-slate-500">{{ nestedBlockItemLabel(item, index) }}</span>
+                  <strong class="self-center truncate text-xl font-bold leading-none text-slate-950" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) || '--' }}</strong>
+                </div>
+              </section>
+              <section class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-white px-2 py-2">
+                <h4 class="truncate text-sm font-semibold leading-5 text-slate-900">重大人事待办</h4>
+                <div class="mt-2 grid min-h-0 content-start gap-1.5 overflow-hidden">
+                  <div
+                    v-for="(item, index) in referenceHrTalentTodoRows(effectiveData as CustomCanvasData)"
+                    :key="`hr-talent-todo-${index}`"
+                    class="grid min-h-[2.45rem] grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 overflow-hidden rounded border border-slate-100 bg-slate-50 px-2 py-1"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    <i :class="nestedBlockDotClasses(item)" />
+                    <span class="min-w-0 truncate font-semibold text-slate-700">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <span :class="nestedBlockPillClasses(item)" :title="nestedBlockItemValue(item) || nestedBlockItemDetail(item)">{{ nestedBlockItemValue(item) || nestedBlockItemDetail(item) || '待确认' }}</span>
+                  </div>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'bidCollaboration'"
+              class="workbench-reference-bid-collaboration-panel grid min-h-0 flex-1 overflow-hidden rounded-lg bg-[#f6fafc] px-3 pb-3 text-xs leading-4"
+            >
+              <section
+                class="workbench-reference-bid-hero grid min-h-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 overflow-hidden rounded-t-lg px-4 py-3 text-white"
+                :style="{ background: referenceBidHero(effectiveBlock, effectiveData as CustomCanvasData).accent }"
+              >
+                <div class="grid h-12 w-12 place-items-center rounded-lg border border-white/25 bg-white/10 text-2xl font-semibold">
+                  {{ referenceBidHero(effectiveBlock, effectiveData as CustomCanvasData).icon }}
+                </div>
+                <div class="min-w-0">
+                  <h3 class="truncate text-xl font-semibold leading-7" :title="referenceBidHero(effectiveBlock, effectiveData as CustomCanvasData).title">
+                    {{ referenceBidHero(effectiveBlock, effectiveData as CustomCanvasData).title }}
+                  </h3>
+                  <p class="mt-0.5 truncate text-sm leading-5 text-white/75" :title="referenceBidHero(effectiveBlock, effectiveData as CustomCanvasData).subtitle">
+                    {{ referenceBidHero(effectiveBlock, effectiveData as CustomCanvasData).subtitle }}
+                  </p>
+                </div>
+                <div class="flex max-w-[34rem] flex-wrap justify-end gap-2 overflow-hidden text-xs font-semibold leading-5 text-white/90">
+                  <span class="rounded-full border border-white/20 bg-white/10 px-2.5 py-0.5">期间：今日</span>
+                  <span class="rounded-full border border-white/20 bg-white/10 px-2.5 py-0.5">口径：{{ referenceBidHero(effectiveBlock, effectiveData as CustomCanvasData).route }}</span>
+                  <span class="rounded-full border border-white/20 bg-white/10 px-2.5 py-0.5">范围：{{ referenceBidHero(effectiveBlock, effectiveData as CustomCanvasData).scope }}</span>
+                  <span class="rounded-full border border-white/20 bg-white/10 px-2.5 py-0.5">刷新：{{ referenceBidHero(effectiveBlock, effectiveData as CustomCanvasData).refresh }}</span>
+                </div>
+              </section>
+
+              <section class="grid min-h-[3rem] grid-cols-[auto_minmax(0,1fr)] items-center gap-3 overflow-hidden border-x border-b border-slate-200 bg-white px-4 py-2">
+                <span class="shrink-0 font-semibold text-slate-500">快速入口</span>
+                <div class="flex min-w-0 flex-wrap gap-2 overflow-hidden">
+                  <span
+                    v-for="action in referenceBidQuickActions(effectiveData as CustomCanvasData)"
+                    :key="action"
+                    class="rounded-md border border-slate-200 bg-white px-3 py-1 text-xs font-semibold leading-5 text-slate-700"
+                  >
+                    {{ action }}
+                  </span>
+                </div>
+              </section>
+
+              <section class="grid min-h-[5.75rem] grid-cols-4 gap-2 overflow-hidden pt-2">
+                <div
+                  v-for="(item, index) in referenceBidKpiItems(effectiveData as CustomCanvasData)"
+                  :key="`bid-kpi-${index}`"
+                  :class="['grid min-h-0 grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden rounded-md border px-3 py-2', nestedBlockToneClass(item) === 'critical' ? 'border-red-200 bg-red-50' : nestedBlockToneClass(item) === 'warning' ? 'border-amber-200 bg-amber-50' : nestedBlockToneClass(item) === 'healthy' ? 'border-emerald-200 bg-emerald-50' : 'border-slate-200 bg-white']"
+                  :title="nestedBlockItemTitle(item, index)"
+                >
+                  <span class="truncate font-semibold text-slate-500">{{ nestedBlockItemLabel(item, index) }}</span>
+                  <strong class="self-center truncate text-2xl font-bold leading-7 text-slate-950" :title="referenceBidSanitizedMetricValue(item)">{{ referenceBidSanitizedMetricValue(item) }}</strong>
+                  <span class="truncate text-slate-500" :title="nestedBlockItemDetail(item)">{{ nestedBlockItemDetail(item) }}</span>
+                </div>
+              </section>
+
+              <section class="grid min-h-[8rem] grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-white">
+                <div class="grid h-9 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 border-b border-slate-200 px-3">
+                  <i class="h-4 w-1.5 rounded-full bg-emerald-600" />
+                  <h4 class="truncate text-sm font-semibold leading-5 text-slate-900">目标标案信息</h4>
+                  <span class="truncate text-xs font-semibold text-slate-500">客户 / 产品 / 时间 / 地点</span>
+                </div>
+                <div
+                  class="grid min-h-0 gap-2 overflow-hidden p-2"
+                  :style="imageComposeBidTargetInfoGridStyle(referenceBidInfoItems(effectiveData as CustomCanvasData).slice(0, 9).length)"
+                >
+                  <div
+                    v-for="(item, index) in referenceBidInfoItems(effectiveData as CustomCanvasData).slice(0, 9)"
+                    :key="`bid-info-${index}`"
+                    :class="[imageComposeBidInfoTileClasses(referenceBidInfoItems(effectiveData as CustomCanvasData).slice(0, 9).length), nestedBlockToneClass(item) === 'warning' ? 'border-amber-200 bg-amber-50' : 'border-slate-200 bg-white']"
+                    :style="imageComposeBidInfoTilePlacementStyle(index, referenceBidInfoItems(effectiveData as CustomCanvasData).slice(0, 9).length)"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    <span class="truncate font-semibold leading-4 text-slate-500">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <b class="truncate text-base leading-6 text-slate-900" :title="referenceBidSanitizedMetricValue(item, nestedBlockItemDetail(item) || '--')">{{ referenceBidSanitizedMetricValue(item, nestedBlockItemDetail(item) || '--') }}</b>
+                  </div>
+                </div>
+              </section>
+
+              <section class="grid min-h-0 grid-cols-3 gap-2 overflow-hidden">
+                <div
+                  v-for="(section, sectionIndex) in referenceBidTableBlocks(effectiveData as CustomCanvasData)"
+                  :key="`bid-table-${section.block.id}`"
+                  class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-white"
+                >
+                  <div class="grid h-9 grid-cols-[auto_minmax(0,1fr)] items-center gap-2 border-b border-slate-200 px-3">
+                    <i class="h-4 w-1.5 rounded-full bg-emerald-600" />
+                    <h4 class="truncate text-sm font-semibold leading-5 text-slate-900" :title="section.block.title">{{ section.block.title }}</h4>
+                  </div>
+                  <div class="grid min-h-0 gap-1 overflow-hidden p-2" style="grid-auto-rows: minmax(0, 1fr);">
+                    <div
+                      v-for="(item, index) in section.rows"
+                      :key="`bid-table-${sectionIndex}-${index}`"
+                      :class="['grid min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2 overflow-hidden rounded border px-2 py-1', nestedBlockToneClass(item) === 'critical' ? 'border-red-100 bg-red-50' : nestedBlockToneClass(item) === 'warning' ? 'border-amber-100 bg-amber-50' : nestedBlockToneClass(item) === 'healthy' ? 'border-emerald-100 bg-emerald-50' : 'border-slate-100 bg-slate-50']"
+                      :title="nestedBlockItemTitle(item, index)"
+                    >
+                      <span class="min-w-0 truncate font-semibold text-slate-700">{{ nestedBlockItemLabel(item, index) }}</span>
+                      <span :class="nestedBlockPillClasses(item)" :title="referenceBidSanitizedMetricValue(item, nestedBlockItemDetail(item) || '待确认')">{{ referenceBidSanitizedMetricValue(item, nestedBlockItemDetail(item) || '待确认') }}</span>
+                    </div>
+                  </div>
+                </div>
+              </section>
+
+              <section class="workbench-reference-bid-risk-table grid min-h-[8.75rem] grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-white">
+                <div class="grid h-9 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 border-b border-slate-200 px-3">
+                  <i class="h-4 w-1.5 rounded-full bg-emerald-600" />
+                  <h4 class="truncate text-sm font-semibold leading-5 text-slate-900">关键风险与待确认事项</h4>
+                  <span class="truncate text-xs font-semibold text-slate-500">责任角色 / 协同动作</span>
+                </div>
+                <div class="grid min-h-0 overflow-hidden">
+                  <div class="grid grid-cols-[minmax(0,1.05fr)_minmax(0,0.62fr)_minmax(0,1.58fr)] border-b border-slate-200 bg-slate-50 px-3 py-1.5 font-semibold text-slate-500">
+                    <span class="truncate">待确认事项</span>
+                    <span class="truncate">责任角色</span>
+                    <span class="truncate">协同动作</span>
+                  </div>
+                  <div
+                    v-for="(item, index) in referenceBidRiskRows(effectiveData as CustomCanvasData).slice(0, 5)"
+                    :key="`bid-risk-${index}`"
+                    :class="['grid min-h-0 grid-cols-[minmax(0,1.05fr)_minmax(0,0.62fr)_minmax(0,1.58fr)] items-center border-b border-slate-100 px-3 py-1.5 last:border-b-0', nestedBlockToneClass(item) === 'critical' ? 'bg-red-50' : nestedBlockToneClass(item) === 'warning' ? 'bg-amber-50' : nestedBlockToneClass(item) === 'healthy' ? 'bg-emerald-50' : 'bg-white']"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    <span class="min-w-0 truncate font-semibold text-slate-800">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <span class="min-w-0 truncate font-semibold text-slate-600">{{ textValue(item.owner, '待确认') }}</span>
+                    <span class="min-w-0 truncate font-semibold text-slate-700">{{ nestedBlockItemDetail(item) || referenceBidSanitizedMetricValue(item, '待确认') }}</span>
+                  </div>
+                </div>
+              </section>
+
+              <section class="grid min-h-[6.25rem] grid-cols-2 gap-2 overflow-hidden">
+                <div
+                  v-for="(item, index) in referenceBidConclusionItems(effectiveData as CustomCanvasData)"
+                  :key="`bid-conclusion-${index}`"
+                  :class="['grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border px-3 py-2', nestedBlockToneClass(item) === 'critical' ? 'border-red-200 bg-red-50' : nestedBlockToneClass(item) === 'warning' ? 'border-amber-200 bg-amber-50' : nestedBlockToneClass(item) === 'healthy' ? 'border-emerald-200 bg-emerald-50' : 'border-slate-200 bg-white']"
+                  :title="nestedBlockItemTitle(item, index)"
+                >
+                  <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
+                    <strong class="truncate text-sm leading-5 text-slate-900">{{ nestedBlockItemLabel(item, index) }}</strong>
+                    <span :class="nestedBlockPillClasses(item)" :title="referenceBidSanitizedMetricValue(item, '待确认')">{{ referenceBidSanitizedMetricValue(item, '待确认') }}</span>
+                  </div>
+                  <span class="mt-1 max-h-12 overflow-hidden text-slate-700" :title="nestedBlockItemDetail(item) || referenceBidSanitizedMetricValue(item, '待确认')">{{ nestedBlockItemDetail(item) || referenceBidSanitizedMetricValue(item, '待确认') }}</span>
+                </div>
+              </section>
+
+              <section class="grid min-h-[4.25rem] grid-cols-[minmax(0,1fr)_auto] items-center gap-3 overflow-hidden rounded-md border border-amber-200 bg-amber-50 px-3 py-2">
+                <div class="min-w-0">
+                  <h4 class="truncate text-sm font-semibold leading-5 text-slate-900">待补口径与问数动作</h4>
+                  <p class="mt-1 truncate text-xs font-semibold text-slate-700">真实数据问数前仅作截图预览，请补充指标、表、字段或系统口径后再刷新。</p>
+                </div>
+                <div class="flex max-w-[32rem] flex-wrap justify-end gap-1.5 overflow-hidden">
+                  <span
+                    v-for="(item, index) in referenceBidDataBoundaryItems(effectiveData as CustomCanvasData)"
+                    :key="`bid-boundary-${index}`"
+                    :class="nestedBlockPillClasses(item)"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    {{ nestedBlockItemLabel(item, index) }}：{{ referenceBidSanitizedMetricValue(item, '待确认') }}
+                  </span>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'businessMetricMatrix'"
+              :class="[
+                'workbench-reference-business-metric-matrix-panel min-h-0 flex-1 overflow-hidden px-3 pb-3',
+                businessMetricMatrixLargePanel(effectiveBlock)
+                  ? 'workbench-reference-business-metric-matrix-large-panel grid grid-cols-[minmax(0,1.05fr)_minmax(0,1.25fr)] grid-rows-[minmax(0,1fr)_auto] gap-2.5'
+                  : 'workbench-reference-business-metric-matrix-compact-panel grid grid-cols-[1.08fr_1.08fr_0.92fr] grid-rows-[minmax(0,0.64fr)_minmax(0,0.36fr)] gap-2'
+              ]"
+            >
+              <template v-if="businessMetricMatrixLargePanel(effectiveBlock)">
+                <section class="workbench-reference-business-metric-large-primary grid min-h-0 grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden rounded-md border border-slate-200 bg-slate-50 px-3 py-2">
+                  <h4 class="truncate text-sm font-semibold leading-5 text-slate-900" title="指标矩阵">指标矩阵</h4>
+                  <div class="mt-2 grid min-h-0 grid-cols-2 gap-2 overflow-hidden" style="grid-auto-rows: minmax(0, 1fr);">
+                  <div
+                    v-for="(item, index) in referenceBusinessMetricItems(effectiveData as CustomCanvasData).slice(0, 4)"
+                    :key="`business-metric-large-${index}`"
+                    :class="['workbench-reference-business-metric-tile grid min-h-0 grid-rows-[auto_minmax(0,1fr)] content-center overflow-hidden rounded-md border bg-white px-2.5 py-2', nestedBlockToneClass(item) === 'critical' ? 'border-red-100' : nestedBlockToneClass(item) === 'warning' ? 'border-amber-100' : 'border-slate-200']"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    <span class="max-w-full truncate text-xs font-semibold leading-4 text-slate-500" :title="nestedBlockItemLabel(item, index)">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <strong class="workbench-reference-business-metric-value mt-1 max-w-full truncate text-[clamp(1rem,1.4vw,1.35rem)] font-bold leading-6 text-slate-950" :title="nestedBlockItemValue(item)">
+                      {{ nestedBlockItemValue(item) || '--' }}
+                    </strong>
+                  </div>
+                  </div>
+                  <div class="workbench-reference-business-metric-large-summary mt-2 grid min-h-0 grid-cols-2 gap-2 overflow-hidden">
+                    <div
+                      v-for="(item, index) in referenceBusinessMetricItems(effectiveData as CustomCanvasData).slice(4, 8)"
+                      :key="`business-metric-summary-large-${index}`"
+                      class="grid min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2 overflow-hidden rounded-md border border-slate-200 bg-white px-2 py-1 text-xs leading-4"
+                      :title="nestedBlockItemTitle(item, index + 4)"
+                    >
+                      <span class="truncate font-semibold text-slate-600">{{ nestedBlockItemLabel(item, index + 4) }}</span>
+                      <b class="max-w-[4.25rem] truncate text-right text-slate-900">{{ nestedBlockItemValue(item) || '--' }}</b>
+                    </div>
+                  </div>
+                </section>
+                <section class="workbench-reference-business-metric-large-flow grid min-h-0 grid-rows-[minmax(0,0.52fr)_minmax(0,0.48fr)] gap-2 overflow-hidden">
+                <div class="workbench-reference-business-chart-bars grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-white px-3 py-2">
+                  <h4 class="truncate text-sm font-semibold leading-5 text-slate-900" :title="effectiveBlock.title">趋势摘要</h4>
+                  <div class="mt-2 grid min-h-0 content-start gap-2 overflow-hidden">
+                    <div
+                      v-for="(item, index) in referenceBusinessChartItems(effectiveData as CustomCanvasData).slice(0, 4)"
+                      :key="`business-chart-large-${index}`"
+                      class="grid grid-cols-[4.75rem_minmax(0,1fr)_3.5rem] items-center gap-2 overflow-hidden text-sm leading-5"
+                      :title="nestedBlockItemTitle(item, index)"
+                    >
+                      <span class="truncate text-slate-600">{{ nestedBlockItemLabel(item, index) }}</span>
+                      <span class="h-3 overflow-hidden rounded-full bg-slate-200"><i :class="nestedBlockBarClasses(item)" :style="nestedBlockBarStyle(item, 62)" /></span>
+                      <b class="truncate text-right font-semibold text-slate-700">{{ nestedBlockItemValue(item) || nestedBlockItemProgress(item, 62) }}</b>
+                    </div>
+                  </div>
+                </div>
+                <div class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-slate-50 px-2 py-2">
+                  <h4 class="truncate text-sm font-semibold leading-5 text-slate-900">业务动态</h4>
+                  <div class="mt-2 grid min-h-0 gap-1 overflow-hidden" style="grid-auto-rows: minmax(0, 1fr);">
+                    <div
+                      v-for="(item, index) in referenceBusinessListItems(effectiveData as CustomCanvasData).slice(0, 4)"
+                      :key="`business-list-large-${index}`"
+                      class="workbench-reference-business-list-row grid min-h-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1.5 overflow-hidden rounded border border-slate-100 bg-white px-2 py-1 text-xs"
+                      :title="nestedBlockItemTitle(item, index)"
+                    >
+                      <i :class="nestedBlockDotClasses(item)" />
+                      <span class="min-w-0 truncate font-semibold leading-4 text-slate-700">{{ nestedBlockItemLabel(item, index) }}</span>
+                      <b class="max-w-[5rem] truncate text-right leading-4 text-slate-900" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) }}</b>
+                    </div>
+                  </div>
+                </div>
+                </section>
+                <section class="col-span-2 grid min-h-0 grid-cols-4 gap-2 overflow-hidden">
+                  <div
+                    v-for="(item, index) in referenceBusinessListItems(effectiveData as CustomCanvasData).slice(0, 4)"
+                    :key="`business-footer-large-${index}`"
+                    class="grid min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2 overflow-hidden rounded-md border border-slate-200 bg-white px-2 py-1.5 text-xs"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    <span class="truncate font-semibold text-slate-600">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <span :class="nestedBlockPillClasses(item)" :title="nestedBlockItemValue(item) || nestedBlockItemDetail(item)">{{ nestedBlockItemValue(item) || nestedBlockItemDetail(item) || '待确认' }}</span>
+                  </div>
+                </section>
+              </template>
+              <template v-else>
+              <section class="grid min-h-0 grid-cols-2 gap-1.5 overflow-hidden">
+                <div
+                  v-for="(item, index) in referenceBusinessMetricItems(effectiveData as CustomCanvasData)"
+                  :key="`business-metric-${index}`"
+                  class="workbench-reference-business-metric-tile grid min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-1.5 overflow-hidden rounded-md border border-slate-200 bg-slate-50 px-2 py-1.5 text-xs"
+                  :title="nestedBlockItemTitle(item, index)"
+                >
+                  <span class="min-w-0 truncate font-semibold leading-4 text-slate-600" :title="nestedBlockItemLabel(item, index)">{{ nestedBlockItemLabel(item, index) }}</span>
+                  <strong class="workbench-reference-business-metric-value max-w-[4.25rem] shrink-0 truncate text-right text-sm font-bold leading-5 text-slate-900" :title="nestedBlockItemValue(item)">
+                    {{ nestedBlockItemValue(item) || '--' }}
+                  </strong>
+                </div>
+              </section>
+              <section class="workbench-reference-business-chart-bars grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-white px-2 py-2">
+                <h4 class="truncate text-sm font-semibold leading-5 text-slate-900" :title="effectiveBlock.title">趋势摘要</h4>
+                <div class="mt-2 grid min-h-0 grid-cols-6 items-end gap-1.5 overflow-hidden border-b border-slate-200 px-1 pb-1.5">
+                  <div
+                    v-for="(item, index) in referenceBusinessChartItems(effectiveData as CustomCanvasData)"
+                    :key="`business-chart-${index}`"
+                    class="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto] items-end gap-1 text-center text-xs text-slate-500"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    <span class="flex h-full min-h-0 items-end justify-center"><i :class="referenceOpsTrendBarClasses(item)" :style="{ height: nestedBlockItemProgress(item, 58), width: '62%' }" /></span>
+                    <span class="truncate">{{ nestedBlockItemLabel(item, index) }}</span>
+                  </div>
+                </div>
+              </section>
+              <section class="row-span-2 grid min-h-0 grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-md border border-slate-200 bg-slate-50 px-2 py-2">
+                <h4 class="truncate text-sm font-semibold leading-5 text-slate-900">业务动态</h4>
+                <div class="mt-2 grid min-h-0 gap-1 overflow-hidden" style="grid-auto-rows: minmax(0, 1fr);">
+                  <div
+                    v-for="(item, index) in referenceBusinessListItems(effectiveData as CustomCanvasData)"
+                    :key="`business-list-${index}`"
+                    class="workbench-reference-business-list-row grid min-h-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1.5 overflow-hidden rounded border border-slate-100 bg-white px-2 py-1 text-xs"
+                    :title="nestedBlockItemTitle(item, index)"
+                  >
+                    <i :class="nestedBlockDotClasses(item)" />
+                    <span class="min-w-0 truncate font-semibold leading-4 text-slate-700">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <b class="max-w-[4.75rem] truncate text-right leading-4 text-slate-900" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) }}</b>
+                  </div>
+                </div>
+              </section>
+              <section class="col-span-2 grid min-h-0 grid-cols-3 gap-1.5 overflow-hidden">
+                <div
+                  v-for="(item, index) in referenceBusinessListItems(effectiveData as CustomCanvasData).slice(0, 3)"
+                  :key="`business-footer-${index}`"
+                  class="grid min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2 overflow-hidden rounded-md border border-slate-200 bg-white px-2 py-1.5 text-xs"
+                  :title="nestedBlockItemTitle(item, index)"
+                >
+                  <span class="truncate font-semibold text-slate-600">{{ nestedBlockItemLabel(item, index) }}</span>
+                  <span :class="nestedBlockPillClasses(item)" :title="nestedBlockItemValue(item) || nestedBlockItemDetail(item)">{{ nestedBlockItemValue(item) || nestedBlockItemDetail(item) || '待确认' }}</span>
+                </div>
+              </section>
+              </template>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'asset'"
+              class="workbench-reference-asset-panel grid min-h-0 flex-1 grid-cols-[1fr_1.08fr] gap-1.5 overflow-hidden px-1 pb-1 text-xs leading-4"
+              style="grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);"
+            >
+              <section class="workbench-reference-asset-left-column grid min-h-0 grid-rows-[auto_minmax(0,0.44fr)_minmax(0,0.56fr)] gap-1 overflow-hidden">
+                <h4 class="truncate text-xs font-semibold text-slate-500">全域 IT 资产台账</h4>
+                <div class="workbench-reference-asset-ledger-grid grid h-full min-h-0 grid-cols-2 gap-1 overflow-hidden" style="grid-template-rows: repeat(2, minmax(0, 1fr));">
+                  <div v-for="(item, index) in referenceAssetLedgerItems(effectiveData as CustomCanvasData).slice(0, 4)" :key="`asset-ledger-${index}`" class="grid min-h-0 grid-rows-[minmax(0,1fr)_auto] content-center gap-0.5 overflow-hidden rounded border border-slate-100 bg-slate-50 px-1.5 py-0.5 text-center">
+                    <span class="min-w-0 truncate text-xs leading-4 text-slate-500" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <strong class="workbench-reference-metric-value max-w-full truncate text-sm leading-none text-slate-900" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) }}</strong>
+                  </div>
+                </div>
+                <div class="workbench-reference-asset-exception-list grid h-full min-h-0 gap-1 overflow-hidden" style="grid-auto-rows: minmax(0, 1fr);">
+                  <div v-for="(item, index) in referenceAssetExceptionItems(effectiveData as CustomCanvasData).slice(0, 3)" :key="`asset-exception-${index}`" class="grid min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-1.5 overflow-hidden rounded border border-slate-100 bg-slate-50 px-1.5 py-0.5 text-xs leading-4">
+                    <span class="min-w-0 truncate font-semibold text-slate-800" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <span :class="['workbench-reference-asset-value-pill', ...nestedBlockPillClasses(item)]" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) }}</span>
+                  </div>
+                </div>
+              </section>
+              <section class="workbench-reference-asset-right-column grid min-h-0 grid-rows-[auto_minmax(0,0.62fr)_minmax(0,0.38fr)] gap-1 overflow-hidden">
+                <h4 class="truncate text-xs font-semibold text-slate-500">IT 成本分析</h4>
+                <div class="workbench-reference-cost-donut-card grid h-full min-h-0 items-center overflow-hidden rounded border border-slate-100 bg-slate-50 p-1.5" style="grid-template-columns: minmax(2.5rem, min(5.5rem, 34%)) minmax(0, 1fr);">
+                  <div class="workbench-reference-cost-donut-ring grid place-items-center rounded-full text-xs font-semibold leading-4 text-slate-500" :style="referenceCostDonutStyle(effectiveData as CustomCanvasData)">预算</div>
+                  <div class="grid min-h-0 min-w-0 gap-0.5 overflow-hidden text-xs leading-4" style="grid-auto-rows: minmax(0, 1fr);">
+                    <div v-for="(item, index) in referenceCostDonutItems(effectiveData as CustomCanvasData).slice(0, 4)" :key="`asset-cost-donut-${index}`" class="grid min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-1 overflow-hidden" style="grid-template-columns: minmax(0, 1fr) auto;">
+                      <span class="truncate text-slate-500" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</span>
+                      <b class="max-w-[4.5rem] truncate text-slate-800" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) }}</b>
+                    </div>
+                  </div>
+                </div>
+                <div class="workbench-reference-cost-list grid h-full min-h-0 gap-1 overflow-hidden" style="grid-auto-rows: minmax(0, 1fr);">
+                  <div v-for="(item, index) in referenceCostItems(effectiveData as CustomCanvasData).slice(0, 3)" :key="`asset-cost-${index}`" class="grid min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-1.5 overflow-hidden rounded border border-slate-100 bg-slate-50 px-1.5 py-0.5 text-xs leading-4" style="grid-template-columns: minmax(0, 1fr) auto;">
+                    <span class="min-w-0 truncate font-semibold text-slate-800" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <span :class="['workbench-reference-asset-value-pill', ...nestedBlockPillClasses(item)]" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) }}</span>
+                  </div>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'ops'"
+              class="workbench-reference-ops-panel grid min-h-0 flex-1 grid-cols-2 gap-1.5 overflow-hidden px-1 pb-1 text-xs leading-4"
+            >
+              <section class="workbench-reference-ops-left-column grid min-h-0 grid-rows-[auto_minmax(0,0.58fr)_minmax(0,0.42fr)] gap-1 overflow-hidden">
+                <h4 class="truncate text-xs font-semibold text-slate-500">全局服务监控</h4>
+                <div class="workbench-reference-ops-service-list grid h-full min-h-0 content-start gap-1 overflow-hidden" style="grid-auto-rows: minmax(16px, 1fr);">
+                  <div v-for="(item, index) in referenceOpsServiceItems(effectiveData as CustomCanvasData).slice(0, 4)" :key="`ops-service-${index}`" class="grid min-h-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1 overflow-hidden rounded border border-slate-100 bg-slate-50 px-1.5 py-0 text-xs leading-4" :title="`${nestedBlockItemTitle(item, index)} ${nestedBlockItemValue(item) || '正常'}`">
+                    <i :class="nestedBlockDotClasses(item)" />
+                    <span class="min-w-0 truncate font-semibold text-slate-800" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <span :class="nestedBlockPillClasses(item)" :title="nestedBlockItemValue(item) || '正常'">{{ nestedBlockItemValue(item) || '正常' }}</span>
+                  </div>
+                </div>
+                <div class="workbench-reference-ops-resource-list grid h-full min-h-0 gap-0.5 overflow-hidden" style="grid-template-rows: repeat(4, minmax(0, 1fr));">
+                  <div v-for="(item, index) in referenceOpsResourceItems(effectiveData as CustomCanvasData).slice(0, 4)" :key="`ops-resource-${index}`" class="grid min-h-0 grid-cols-[2.25rem_minmax(0,1fr)_2rem] items-center gap-1.5 text-xs leading-4" style="grid-template-columns: 2.25rem minmax(0, 1fr) 2rem;">
+                    <span class="truncate text-slate-500" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <span class="h-2 overflow-hidden rounded-full bg-slate-200"><i :class="nestedBlockBarClasses(item)" :style="nestedBlockBarStyle(item, 60)" /></span>
+                    <b class="truncate text-right font-semibold text-slate-600" :title="nestedBlockItemValue(item) || nestedBlockItemProgress(item)">{{ nestedBlockItemValue(item) || nestedBlockItemProgress(item) }}</b>
+                  </div>
+                </div>
+              </section>
+              <section class="workbench-reference-ops-right-column grid min-h-0 grid-rows-[auto_auto_minmax(0,1fr)] gap-1 overflow-hidden">
+                <h4 class="truncate text-xs font-semibold text-slate-500">故障 & 告警中心</h4>
+                <div class="workbench-reference-ops-incident-list grid min-h-0 content-start gap-1 overflow-hidden" style="grid-auto-rows: minmax(0, 1fr);">
+                  <div v-for="(item, index) in referenceOpsIncidentItems(effectiveData as CustomCanvasData).slice(0, 3)" :key="`ops-incident-${index}`" class="grid min-h-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1.5 overflow-hidden rounded border border-slate-100 bg-slate-50 px-1.5 py-0.5 text-xs leading-4" style="grid-template-columns: auto minmax(0, 1fr) auto;">
+                    <span
+                      :class="[
+                        'inline-block h-4 max-w-[2rem] shrink-0 truncate rounded border px-1 text-xs font-semibold leading-4',
+                        nestedBlockToneClass(item) === 'critical' ? 'border-red-200 bg-red-50 text-red-600' : nestedBlockToneClass(item) === 'warning' ? 'border-amber-200 bg-amber-50 text-amber-700' : 'border-slate-200 bg-white text-slate-600',
+                      ]"
+                      :title="nestedBlockItemSeverity(item)"
+                    >
+                      {{ nestedBlockItemSeverity(item) }}
+                    </span>
+                    <span class="min-w-0">
+                      <strong class="block truncate text-xs leading-4 text-slate-800" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</strong>
+                      <span class="block truncate text-xs leading-4 text-slate-500" :title="nestedBlockItemDetail(item)">{{ nestedBlockItemDetail(item) }}</span>
+                    </span>
+                    <span class="shrink-0 text-xs font-medium text-slate-500" :title="nestedBlockItemTime(item)">{{ nestedBlockItemTime(item) }}</span>
+                  </div>
+                </div>
+                <div class="workbench-reference-ops-trend-card grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-0.5 overflow-hidden rounded border border-slate-100 bg-slate-50 px-1.5 py-1">
+                  <div class="flex items-center justify-between gap-2 text-xs leading-4">
+                    <span class="truncate font-semibold text-slate-500">近七日故障趋势</span>
+                    <b class="text-slate-800">合计 58 件</b>
+                  </div>
+                  <div class="grid min-h-0 grid-cols-7 items-stretch gap-1 overflow-hidden">
+                    <div v-for="(item, index) in referenceOpsTrendChartItems(effectiveData as CustomCanvasData)" :key="`ops-trend-${index}`" class="grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)_auto] gap-0.5 text-center text-xs text-slate-500">
+                      <b class="truncate text-slate-700">{{ nestedBlockItemValue(item) || nestedBlockItemLabel(item, index) }}</b>
+                      <span class="flex h-full min-h-0 items-end justify-center"><i :class="referenceOpsTrendBarClasses(item)" :style="{ height: textValue(item.barHeight, '60%'), minHeight: '12px', width: '46%' }" /></span>
+                      <span class="truncate">{{ nestedBlockItemValue(item) ? nestedBlockItemLabel(item, index) : `周${index + 1}` }}</span>
+                    </div>
+                  </div>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'security'"
+              class="workbench-reference-security-panel grid min-h-0 flex-1 grid-cols-[1.18fr_1fr] gap-1.5 overflow-hidden px-1 pb-1 text-xs leading-4"
+            >
+              <section class="workbench-reference-security-left-column grid min-h-0 gap-1 overflow-hidden">
+                <h4 class="truncate text-xs font-semibold text-slate-500">安全风险总览</h4>
+                <div class="workbench-reference-security-score-card grid h-full min-h-0 grid-cols-[minmax(128px,0.46fr)_minmax(0,1fr)] gap-1 overflow-hidden rounded-md bg-[#101820] p-2 text-white">
+                  <div class="workbench-reference-security-score-main grid min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
+                    <div class="min-w-0 flex items-end gap-1">
+                      <strong class="text-3xl leading-none">{{ nestedBlockSecurityScore(referenceSecurityScoreBlock(effectiveData as CustomCanvasData)) }}</strong>
+                      <span class="pb-0.5 text-xs leading-4 text-slate-300">/ 100</span>
+                    </div>
+                    <span class="workbench-reference-security-score-ring grid place-items-center rounded-full border-[6px] border-emerald-500/80 bg-slate-950 text-sm font-semibold leading-none text-white">{{ nestedBlockSecurityScoreRingLabel(referenceSecurityScoreBlock(effectiveData as CustomCanvasData)) }}</span>
+                  </div>
+                  <div class="workbench-reference-security-score-metrics grid h-full min-h-0 shrink-0 gap-1">
+                    <div v-for="(item, index) in nestedBlockSecurityMetrics(referenceSecurityScoreBlock(effectiveData as CustomCanvasData)).slice(0, 3)" :key="`security-score-${index}`" class="workbench-reference-security-score-metric flex min-w-0 items-center gap-1 overflow-hidden rounded border border-slate-700 bg-slate-800 px-1.5 py-0.5">
+                      <strong class="max-w-[2.25rem] shrink-0 truncate text-sm leading-4" :title="nestedBlockItemValue(item) || nestedBlockItemTitle(item, index)">{{ nestedBlockItemValue(item) || nestedBlockItemLabel(item, index) }}</strong>
+                      <span class="min-w-0 flex-1 truncate text-xs leading-4 text-slate-400" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemValue(item) ? nestedBlockItemLabel(item, index) : '' }}</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="workbench-reference-security-risk-list grid h-full min-h-0 content-start gap-1 overflow-hidden">
+                  <div v-for="(item, index) in referenceSecurityRiskItems(effectiveData as CustomCanvasData).slice(0, 3)" :key="`security-risk-${index}`" class="grid min-h-[1.25rem] grid-cols-[minmax(0,1fr)_auto] items-center gap-1.5 overflow-hidden rounded border border-slate-100 bg-slate-50 px-1.5 py-0 text-xs leading-4">
+                    <span class="min-w-0 truncate font-semibold text-slate-800" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <span :class="nestedBlockPillClasses(item)" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) }}</span>
+                  </div>
+                </div>
+              </section>
+              <section class="workbench-reference-security-right-column grid min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-1 overflow-hidden">
+                <h4 class="truncate text-xs font-semibold text-slate-500">合规与审计</h4>
+                <div class="workbench-reference-security-compliance-list grid h-full min-h-0 gap-1 overflow-hidden">
+                  <div v-for="(item, index) in referenceSecurityComplianceItems(effectiveData as CustomCanvasData).slice(0, 6)" :key="`security-compliance-${index}`" class="grid min-h-[1.5rem] grid-cols-[minmax(0,1fr)_auto] items-center gap-1.5 overflow-hidden rounded border border-slate-100 bg-slate-50 px-1.5 py-0.5 text-xs leading-4">
+                    <span class="min-w-0 truncate font-semibold text-slate-800" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <span :class="nestedBlockPillClasses(item)" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) }}</span>
+                  </div>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'project'"
+              class="workbench-reference-project-panel grid min-h-0 flex-1 grid-cols-[1.16fr_0.84fr] gap-1.5 overflow-hidden px-1 pb-1 text-xs leading-4"
+              style="grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);"
+            >
+              <section class="workbench-reference-project-left-column grid min-h-0 grid-rows-[auto_minmax(5.5rem,0.68fr)_minmax(4.25rem,0.32fr)] gap-1 overflow-hidden">
+                <h4 class="truncate text-xs font-semibold text-slate-500">重点 IT 项目看板</h4>
+                <div class="workbench-reference-project-progress-list grid h-full min-h-0 gap-1 overflow-hidden" style="grid-template-rows: repeat(4, minmax(1.25rem, 1fr));">
+                  <div v-for="(item, index) in referenceProjectProgressItems(effectiveData as CustomCanvasData).slice(0, 4)" :key="`project-progress-${index}`" class="grid min-h-[1.25rem] grid-cols-[minmax(0,1fr)_3rem_auto] items-center gap-1.5 overflow-hidden rounded border border-slate-100 bg-slate-50 px-1.5 py-0 text-xs leading-4" style="grid-template-columns: minmax(0, 1fr) 3rem auto;">
+                    <span class="min-w-0 truncate font-semibold text-slate-800">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <span class="h-2 overflow-hidden rounded-full bg-slate-200"><i :class="nestedBlockBarClasses(item)" :style="nestedBlockBarStyle(item, 52)" /></span>
+                    <span :class="nestedBlockPillClasses(item)">{{ nestedBlockItemValue(item) || nestedBlockItemProgress(item) }}</span>
+                  </div>
+                </div>
+                <div class="workbench-reference-project-efficiency-list grid h-full min-h-0 gap-1 overflow-hidden" style="grid-auto-rows: minmax(1.25rem, 1fr);">
+                  <div v-for="(item, index) in referenceEfficiencyItems(effectiveData as CustomCanvasData).slice(0, 3)" :key="`project-efficiency-${index}`" class="grid min-h-[1.25rem] grid-cols-[minmax(0,1fr)_auto] items-center gap-1.5 overflow-hidden rounded border border-slate-100 bg-slate-50 px-1.5 py-0 text-xs leading-4" style="grid-template-columns: minmax(0, 1fr) auto;">
+                    <span class="min-w-0 truncate font-semibold text-slate-800">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <span :class="nestedBlockPillClasses(item)">{{ nestedBlockItemValue(item) }}</span>
+                  </div>
+                </div>
+              </section>
+              <section class="workbench-reference-project-right-column grid min-h-0 grid-rows-[auto_minmax(4.75rem,0.45fr)_minmax(3.25rem,0.28fr)_minmax(2.75rem,0.27fr)] gap-1 overflow-hidden">
+                <h4 class="truncate text-xs font-semibold text-slate-500">个人待办快捷区</h4>
+                <div class="workbench-reference-project-todo-grid grid h-full min-h-0 grid-cols-2 gap-1 overflow-hidden" style="grid-template-rows: repeat(2, minmax(2rem, 1fr));">
+                  <div v-for="(item, index) in referenceTodoItems(effectiveData as CustomCanvasData)" :key="`project-todo-${index}`" class="grid h-full min-h-[2rem] place-items-center overflow-hidden rounded border border-slate-100 bg-slate-50 px-1.5 py-0.5 text-center">
+                    <strong class="workbench-reference-metric-value max-w-full truncate text-sm leading-none text-slate-900">{{ nestedBlockItemValue(item) }}</strong>
+                    <span class="mt-0.5 max-w-full truncate text-xs leading-3 text-slate-500">{{ nestedBlockItemLabel(item, index) }}</span>
+                  </div>
+                </div>
+                <div class="workbench-reference-project-quick-links grid h-full min-h-0 grid-cols-2 gap-1 overflow-hidden">
+                  <div v-for="(item, index) in referenceQuickLinkItems(effectiveData as CustomCanvasData).slice(0, 4)" :key="`project-quick-${index}`" class="grid h-full min-h-[1.5rem] grid-cols-[minmax(0,1fr)_auto] items-center gap-1 overflow-hidden rounded border border-slate-100 bg-slate-50 px-1.5 py-0 text-xs leading-4">
+                    <span class="min-w-0 truncate font-semibold text-slate-800">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <span class="text-slate-400">›</span>
+                  </div>
+                </div>
+                <div class="workbench-reference-notice-list grid h-full min-h-0 gap-1 overflow-hidden" style="grid-auto-rows: minmax(1.25rem, 1fr);">
+                  <div v-for="(item, index) in referenceNoticeItems(effectiveData as CustomCanvasData).slice(0, 2)" :key="`project-notice-${index}`" class="grid h-full min-h-[1.25rem] grid-cols-[minmax(0,1fr)_auto] items-center gap-1.5 overflow-hidden rounded border border-slate-100 bg-slate-50 px-1.5 py-0 text-xs leading-4">
+                    <span class="min-w-0 truncate font-semibold text-slate-700">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <span :class="nestedBlockPillClasses(item)">{{ nestedBlockItemValue(item) }}</span>
+                  </div>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'healthRadar'"
+              class="workbench-reference-health-radar-panel grid min-h-0 flex-1 grid-cols-[0.95fr_1.05fr] gap-2 overflow-hidden"
+            >
+              <section class="workbench-reference-health-radar-chart grid h-[15rem] min-h-0 grid-rows-[minmax(0,1fr)_auto] gap-1.5 overflow-hidden rounded border border-slate-100 bg-slate-50 px-2 py-2">
+                <svg class="h-full min-h-0 w-full" viewBox="0 0 144 132" aria-label="五维健康雷达图">
+                  <polygon points="72,14 125,52 105,114 39,114 19,52" fill="rgba(15,139,141,0.08)" stroke="#cbd5e1" stroke-width="1" />
+                  <polygon points="72,38 101,59 90,93 54,93 43,59" fill="rgba(198,133,26,0.08)" stroke="#e2e8f0" stroke-width="1" />
+                  <line x1="72" y1="70" x2="72" y2="14" stroke="#d8dee8" />
+                  <line x1="72" y1="70" x2="125" y2="52" stroke="#d8dee8" />
+                  <line x1="72" y1="70" x2="105" y2="114" stroke="#d8dee8" />
+                  <line x1="72" y1="70" x2="39" y2="114" stroke="#d8dee8" />
+                  <line x1="72" y1="70" x2="19" y2="52" stroke="#d8dee8" />
+                  <polygon :points="referenceHealthRadarPoints(effectiveData as CustomCanvasData)" fill="rgba(199,52,49,0.18)" stroke="#c73431" stroke-width="2.5" stroke-linejoin="round" />
+                  <text x="72" y="10" text-anchor="middle" font-size="7" font-weight="700" class="fill-slate-500">经营盈利</text>
+                  <text x="132" y="55" text-anchor="end" font-size="7" font-weight="700" class="fill-slate-500">财务资金</text>
+                  <text x="110" y="128" text-anchor="middle" font-size="7" font-weight="700" class="fill-slate-500">供应链</text>
+                  <text x="34" y="128" text-anchor="middle" font-size="7" font-weight="700" class="fill-slate-500">组织人力</text>
+                  <text x="12" y="55" text-anchor="start" font-size="7" font-weight="700" class="fill-slate-500">合规安全</text>
+                </svg>
+                <div class="grid grid-cols-3 gap-1 text-xs">
+                  <span class="rounded border border-red-100 bg-red-50 px-1.5 py-1 font-semibold text-red-600">红色维度 2</span>
+                  <span class="rounded border border-amber-100 bg-amber-50 px-1.5 py-1 font-semibold text-amber-700">预警维度 3</span>
+                  <span class="rounded border border-slate-100 bg-white px-1.5 py-1 font-semibold text-slate-500">健康项弱化</span>
+                </div>
+              </section>
+              <section class="workbench-reference-health-radar-risk-list grid min-h-0 content-start gap-2 overflow-hidden">
+                <div v-for="(item, index) in referenceHealthRadarRiskItems(effectiveData as CustomCanvasData)" :key="`health-risk-${index}`" :class="['workbench-reference-health-risk-card grid h-[7.25rem] min-h-0 grid-rows-[auto_minmax(0,1fr)_auto] rounded border px-3 py-2 text-xs', nestedBlockToneClass(item) === 'critical' ? 'border-red-100 bg-red-50' : 'border-amber-100 bg-amber-50']">
+                  <strong class="block truncate text-sm leading-5 text-slate-900" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</strong>
+                  <p class="mt-1 max-h-10 self-center overflow-hidden text-sm leading-5 text-slate-600" :title="nestedBlockItemDetail(item)">{{ nestedBlockItemDetail(item) }}</p>
+                  <span :class="['mt-1 inline-flex max-w-full truncate', nestedBlockPillClasses(item)]" :title="nestedBlockItemValue(item) || '穿透'">{{ nestedBlockItemValue(item) || '穿透' }}</span>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'deviation'"
+              class="workbench-reference-deviation-panel grid min-h-0 flex-1 content-start gap-2 overflow-hidden"
+            >
+              <section class="workbench-reference-deviation-chart grid h-[13.5rem] min-h-0 grid-rows-[auto_minmax(0,1fr)_auto] gap-1 overflow-hidden rounded border border-slate-100 bg-slate-50 px-2 py-2">
+                <div class="grid grid-cols-6 gap-1 text-center text-[11px] font-semibold text-slate-400">
+                  <span v-for="(item, index) in referenceDeviationBars(effectiveData as CustomCanvasData)" :key="`deviation-target-${index}`" class="truncate" :title="nestedBlockItemValue(item) || '目标'">
+                    目标 {{ nestedBlockItemValue(item) }}
+                  </span>
+                </div>
+                <div class="relative grid min-h-0 grid-cols-6 items-end gap-1 overflow-hidden px-3">
+                  <svg class="pointer-events-none absolute inset-x-2 top-2 h-[54%]" viewBox="0 0 300 72" preserveAspectRatio="none" aria-hidden="true">
+                    <path d="M6 58 H294 M6 44 H294 M6 30 H294 M6 16 H294" stroke="#e2e8f0" stroke-width="1" />
+                    <polyline points="6,18 64,22 122,42 180,34 238,52 294,62" fill="none" stroke="#c73431" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+                  </svg>
+                  <div v-for="(item, index) in referenceDeviationBars(effectiveData as CustomCanvasData)" :key="`deviation-bar-${index}`" class="relative z-10 flex h-full min-h-0 items-end justify-center gap-1 text-center text-xs">
+                    <i class="block h-[82%] w-3 rounded-t bg-slate-300" />
+                    <i :class="['block w-3 rounded-t', nestedBlockToneClass(item) === 'critical' ? 'bg-red-500' : nestedBlockToneClass(item) === 'warning' ? 'bg-amber-500' : 'bg-[#4C78FC]']" :style="{ height: nestedBlockItemProgress(item, 70), minHeight: '36px' }" />
+                  </div>
+                </div>
+                <div class="grid grid-cols-6 gap-1 text-center text-xs">
+                  <span v-for="(item, index) in referenceDeviationBars(effectiveData as CustomCanvasData)" :key="`deviation-label-${index}`" class="truncate font-semibold text-slate-600" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</span>
+                </div>
+              </section>
+              <section class="workbench-reference-deviation-conclusion-band grid min-h-[9.5rem] gap-1.5 overflow-hidden">
+                <div v-for="(item, index) in referenceDeviationRiskItems(effectiveData as CustomCanvasData)" :key="`deviation-risk-${index}`" class="workbench-reference-deviation-conclusion-row grid min-h-[4.5rem] grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded border border-red-100 bg-red-50 px-3 py-2 text-xs">
+                  <strong class="shrink-0 truncate text-sm leading-5 text-red-700" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</strong>
+                  <p class="min-w-0 truncate leading-5 text-red-700/80" :title="nestedBlockItemDetail(item)">{{ nestedBlockItemDetail(item) }}</p>
+                  <span class="inline-flex max-w-[6rem] shrink-0 truncate rounded-full border border-red-200 bg-white px-2 py-0.5 font-semibold text-red-600" :title="nestedBlockItemValue(item) || '专项复盘'">{{ nestedBlockItemValue(item) || '专项复盘' }}</span>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'financeRisk'"
+              class="workbench-reference-finance-risk-panel grid min-h-0 flex-1 grid-rows-[minmax(8rem,0.42fr)_minmax(8rem,0.58fr)] gap-2 overflow-hidden"
+            >
+              <section class="workbench-reference-finance-trend-card grid h-full min-h-0 overflow-hidden rounded border border-slate-100 bg-slate-50 px-2 py-2">
+                <svg class="h-full min-h-0 w-full" viewBox="0 0 280 112" preserveAspectRatio="none" aria-label="资金风险趋势">
+                  <line x1="0" y1="34" x2="280" y2="34" stroke="#c73431" stroke-width="2" stroke-dasharray="6 6" />
+                  <path d="M0 86 C34 80, 64 76, 92 67 C126 56, 142 40, 170 36 C200 31, 226 24, 280 18 L280 112 L0 112 Z" fill="rgba(199,52,49,0.16)" />
+                  <path d="M0 86 C34 80, 64 76, 92 67 C126 56, 142 40, 170 36 C200 31, 226 24, 280 18" fill="none" stroke="#c73431" stroke-width="3" />
+                  <path d="M0 96 C42 90, 82 92, 116 82 C150 72, 176 75, 206 63 C238 51, 264 58, 280 48" fill="none" stroke="#d9821b" stroke-width="3" />
+                </svg>
+              </section>
+              <section class="workbench-reference-finance-metric-grid grid h-full min-h-0 grid-cols-3 gap-1.5 overflow-hidden">
+                <div v-for="(item, index) in referenceFinanceRiskBottomItems(effectiveData as CustomCanvasData)" :key="`finance-bottom-${index}`" :class="['grid min-h-0 grid-rows-[auto_minmax(0,1fr)] content-between rounded px-2 py-2 text-xs', nestedBlockToneClass(item) === 'critical' ? 'border border-red-100 bg-red-50' : 'border border-amber-100 bg-amber-50']">
+                  <strong :class="['block max-w-full truncate text-[clamp(1.25rem,2.8vw,2.2rem)] leading-tight', nestedBlockToneClass(item) === 'critical' ? 'text-red-700' : 'text-amber-800']" :title="referenceFinanceRiskMetricDisplayValue(item, index) || nestedBlockItemTitle(item, index)">{{ referenceFinanceRiskMetricDisplayValue(item, index) }}</strong>
+                  <span :class="['self-end truncate text-xs leading-5', nestedBlockToneClass(item) === 'critical' ? 'text-red-700/80' : 'text-amber-800/80']" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemValue(item) ? nestedBlockItemLabel(item, index) : nestedBlockItemDetail(item) }}</span>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'expenseRisk'"
+              class="workbench-reference-expense-risk-panel grid min-h-0 flex-1 grid-cols-[1.35fr_0.85fr] gap-2 overflow-hidden"
+            >
+              <section class="workbench-reference-expense-ranking-list grid h-full min-h-0 gap-1.5 overflow-hidden rounded border border-slate-100 bg-slate-50 px-2 py-2" style="grid-auto-rows: minmax(0, 1fr);">
+                <div v-for="(item, index) in referenceExpenseRiskRows(effectiveData as CustomCanvasData)" :key="`expense-row-${index}`" class="grid min-h-0 grid-cols-[4.5rem_minmax(0,1fr)_3.5rem] items-center gap-2 text-xs">
+                  <span class="truncate font-semibold text-slate-700" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</span>
+                  <span class="h-2.5 overflow-hidden rounded-full bg-slate-200"><i :class="nestedBlockBarClasses(item)" :style="nestedBlockBarStyle(item, 52)" /></span>
+                  <b class="truncate text-right text-slate-800" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) }}</b>
+                </div>
+              </section>
+              <section class="workbench-reference-expense-summary-list grid h-full min-h-0 gap-1.5 overflow-hidden" style="grid-auto-rows: minmax(0, 1fr);">
+                <div v-for="(item, index) in referenceExpenseSummaryItems(effectiveData as CustomCanvasData)" :key="`expense-summary-${index}`" class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)_auto] rounded border border-red-100 bg-red-50 px-2 py-2 text-xs">
+                  <strong class="block truncate text-sm leading-5 text-red-700" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</strong>
+                  <p class="mt-1 self-center truncate leading-5 text-red-700/80" :title="nestedBlockItemDetail(item)">{{ nestedBlockItemDetail(item) }}</p>
+                  <span class="mt-1 inline-flex max-w-full truncate rounded-full border border-red-200 bg-white px-2 py-0.5 font-semibold text-red-600" :title="nestedBlockItemValue(item) || '冻结非必要开支'">{{ nestedBlockItemValue(item) || '冻结非必要开支' }}</span>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'deviationInsight'"
+              class="workbench-reference-deviation-insight-panel grid min-h-0 flex-1 content-start gap-2 overflow-hidden"
+            >
+              <div
+                v-for="(item, index) in referenceDeviationInsightItems(effectiveData as CustomCanvasData)"
+                :key="`deviation-insight-${index}`"
+                class="workbench-reference-deviation-insight-row grid h-12 min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2 rounded border border-slate-100 bg-slate-50 px-2.5 py-1.5 text-xs"
+              >
+                <span class="min-w-0 truncate leading-5 text-slate-800" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</span>
+                <strong :class="['shrink-0 truncate text-sm leading-5', nestedBlockToneClass(item) === 'warning' ? 'text-amber-700' : 'text-slate-900']" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) }}</strong>
+              </div>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'organizationRisk'"
+              class="workbench-reference-organization-risk-panel grid min-h-0 flex-1 grid-cols-[0.92fr_1.28fr] gap-2 overflow-hidden"
+            >
+              <section class="workbench-reference-organization-donut grid h-full min-h-0 place-items-center overflow-hidden rounded border border-slate-100 bg-slate-50 px-2 py-2 text-center">
+                <div class="relative grid h-[min(10.5rem,66%)] min-h-[7rem] w-[min(10.5rem,80%)] min-w-[7rem] place-items-center rounded-full" :style="referenceOrganizationDonutStyle(referenceOrganizationRiskMetrics(effectiveData as CustomCanvasData)[0])">
+                  <div class="grid h-[58%] w-[58%] place-items-center rounded-full bg-white shadow-sm">
+                    <strong class="max-w-full truncate text-[clamp(1.6rem,3.4vw,2.5rem)] leading-none text-slate-900" :title="nestedBlockItemValue(referenceOrganizationRiskMetrics(effectiveData as CustomCanvasData)[0])">{{ nestedBlockItemValue(referenceOrganizationRiskMetrics(effectiveData as CustomCanvasData)[0]) }}</strong>
+                  </div>
+                </div>
+                <span class="mt-1 max-w-full truncate text-xs font-semibold text-slate-600" :title="nestedBlockItemTitle(referenceOrganizationRiskMetrics(effectiveData as CustomCanvasData)[0], 0)">{{ nestedBlockItemLabel(referenceOrganizationRiskMetrics(effectiveData as CustomCanvasData)[0], 0) }}</span>
+              </section>
+              <section class="grid min-h-0 content-start gap-1.5 overflow-hidden">
+                <div class="workbench-reference-organization-trend-card grid h-44 min-h-0 grid-rows-[minmax(0,1fr)] rounded border border-slate-100 bg-slate-50 px-2 py-2">
+                  <svg class="h-full min-h-0 w-full" viewBox="0 0 280 92" preserveAspectRatio="none" aria-label="人效风险趋势">
+                    <path d="M10 88 H270 M10 68 H270 M10 48 H270 M10 28 H270" stroke="#e5e7eb" stroke-width="1" />
+                    <path d="M24 78 C58 76, 84 72, 112 65 S166 58, 192 43 S238 28, 264 22" fill="none" stroke="#c73431" stroke-width="4" />
+                    <path d="M24 86 C70 84, 102 80, 142 74 S216 64, 264 56" fill="none" stroke="#d9821b" stroke-width="3" stroke-dasharray="6 7" />
+                  </svg>
+                </div>
+                <div class="grid grid-cols-3 gap-1.5">
+                  <div v-for="(item, index) in referenceOrganizationRiskMetrics(effectiveData as CustomCanvasData).slice(1)" :key="`org-risk-${index}`" class="rounded border border-slate-100 bg-slate-50 px-1.5 py-1 text-center">
+                    <strong class="block truncate text-base leading-5 text-red-600" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) }}</strong>
+                    <span class="block truncate text-xs text-slate-500" :title="nestedBlockItemTitle(item, index + 1)">{{ nestedBlockItemLabel(item, index + 1) }}</span>
+                  </div>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'investmentRisk'"
+              class="workbench-reference-investment-risk-panel grid min-h-0 flex-1 grid-cols-[1.35fr_0.78fr] gap-2 overflow-hidden"
+            >
+              <section class="workbench-reference-investment-gantt-grid grid h-full min-h-0 overflow-hidden rounded border border-slate-100 bg-slate-50 px-2 py-2" style="grid-auto-rows: minmax(0, 1fr);">
+                <div v-for="(item, index) in referenceInvestmentRiskRows(effectiveData as CustomCanvasData)" :key="`investment-row-${index}`" class="grid min-h-0 grid-cols-[4.75rem_minmax(0,1fr)_3rem] items-center gap-2 text-xs">
+                  <span class="truncate font-semibold text-slate-800" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</span>
+                  <span class="relative h-4 overflow-hidden rounded bg-slate-200">
+                    <i class="absolute inset-y-0 rounded bg-slate-300/80" style="left: 0; right: 0;" />
+                    <i :class="['absolute top-0 block h-full rounded', nestedBlockToneClass(item) === 'critical' ? 'bg-red-500' : 'bg-amber-500']" :style="{ left: `${8 + (index % 3) * 8}%`, width: nestedBlockItemProgress(item, 58) }" />
+                  </span>
+                  <b :class="['truncate text-right', nestedBlockToneClass(item) === 'critical' ? 'text-red-600' : 'text-amber-700']" :title="nestedBlockItemValue(item)">{{ nestedBlockItemValue(item) }}</b>
+                </div>
+              </section>
+              <section class="grid min-h-0 content-start gap-1.5 overflow-hidden">
+                <div v-for="(item, index) in referenceInvestmentSummaryItems(effectiveData as CustomCanvasData)" :key="`investment-summary-${index}`" class="workbench-reference-investment-summary-card grid h-56 min-h-0 grid-rows-[auto_minmax(0,1fr)_auto] rounded border border-amber-100 bg-amber-50 px-2 py-2 text-xs">
+                  <strong class="block truncate text-sm leading-5 text-amber-800" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</strong>
+                  <p class="mt-1 self-center truncate leading-5 text-amber-800/80" :title="nestedBlockItemDetail(item)">{{ nestedBlockItemDetail(item) }}</p>
+                  <span :class="['mt-1 inline-flex max-w-full truncate', nestedBlockPillClasses(item)]" :title="nestedBlockItemValue(item) || '重排里程碑'">{{ nestedBlockItemValue(item) || '重排里程碑' }}</span>
+                </div>
+                <div class="workbench-reference-investment-status-pills grid grid-cols-2 gap-1">
+                  <span class="truncate rounded-full border border-red-100 bg-red-50 px-2 py-1 text-center text-xs font-semibold text-red-600">延期 2</span>
+                  <span class="truncate rounded-full border border-amber-100 bg-amber-50 px-2 py-1 text-center text-xs font-semibold text-amber-600">超支 2</span>
+                </div>
+              </section>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'executiveTodo'"
+              class="workbench-reference-executive-todo-panel grid min-h-0 flex-1 content-start gap-2 overflow-hidden"
+            >
+              <div v-for="(item, index) in referenceExecutiveTodoItems(effectiveData as CustomCanvasData, 3)" :key="`executive-todo-${index}`" :class="['grid h-[4.75rem] min-h-0 grid-cols-[minmax(0,1fr)_3.5rem] items-center gap-2 rounded px-3 py-1.5 text-xs workbench-reference-executive-todo-card', nestedBlockToneClass(item) === 'critical' ? 'border border-red-100 bg-red-50' : 'border border-amber-100 bg-amber-50']">
+                <div class="min-w-0">
+                  <strong class="block truncate text-sm leading-5 text-slate-900" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</strong>
+                  <div class="workbench-reference-executive-todo-detail-grid mt-1.5 grid grid-cols-3 gap-x-2 overflow-hidden text-slate-700">
+                    <span class="truncate" :title="referenceExecutiveTodoImpact(item, index)">影响 {{ referenceExecutiveTodoImpact(item, index) }}</span>
+                    <span class="truncate" :title="referenceExecutiveTodoDeadline(item, index)">截止 {{ referenceExecutiveTodoDeadline(item, index) }}</span>
+                    <span class="truncate" :title="referenceExecutiveTodoProgress(item, index)">进度 {{ referenceExecutiveTodoProgress(item, index) }}</span>
+                  </div>
+                </div>
+                <span :class="referenceExecutiveTodoBadgeClasses(item, index)" :title="referenceExecutiveTodoBadge(item, index)">{{ referenceExecutiveTodoBadge(item, index) }}</span>
+              </div>
+            </div>
+            <div
+              v-else-if="customCanvasReferenceCompositeKind(effectiveBlock, effectiveData as CustomCanvasData) === 'shortcutDrill'"
+              class="workbench-reference-shortcut-drill-panel grid min-h-0 flex-1 grid-cols-3 content-start gap-1.5 overflow-hidden"
+            >
+              <div v-for="(item, index) in referenceShortcutDrillItems(effectiveData as CustomCanvasData)" :key="`shortcut-drill-${index}`" class="grid min-h-[52px] min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2 rounded border border-slate-100 bg-slate-50 px-2 py-1.5 text-xs">
+                <span class="min-w-0 truncate font-semibold text-slate-800" :title="nestedBlockItemTitle(item, index)">{{ nestedBlockItemLabel(item, index) }}</span>
+                <span :class="['max-w-[4rem] truncate', nestedBlockPillClasses(item)]" :title="nestedBlockItemValue(item) || '›'">{{ nestedBlockItemValue(item) || '›' }}</span>
+              </div>
+            </div>
+          </div>
+          <div
+            v-else-if="customCanvasStandaloneQuickLinks(effectiveBlock, effectiveData as CustomCanvasData)"
+            class="workbench-custom-canvas-quick-links absolute inset-0 flex min-h-0 w-full items-center gap-2 overflow-hidden border-y border-[#d9e2ec] bg-[#f7fafc] px-4 py-0"
+          >
+            <div class="flex h-full w-[64px] shrink-0 items-center overflow-hidden">
+              <span class="truncate text-sm font-semibold leading-5 text-slate-600">{{ '\u5feb\u6377\u5165\u53e3' }}</span>
+            </div>
+            <div class="flex min-h-0 min-w-0 flex-1 items-center gap-3 overflow-hidden">
+              <div
+                v-for="(item, index) in customCanvasStandaloneQuickLinkItems(effectiveBlock, effectiveData as CustomCanvasData)"
+                :key="`custom-quick-${index}-${nestedBlockItemLabel(item, index)}`"
+                class="flex h-7 min-w-[78px] max-w-[104px] shrink-0 items-center justify-center overflow-hidden rounded border border-[#cfdbe7] bg-white px-3 text-xs"
+                :title="nestedBlockItemTitle(item, index)"
+              >
+                <span class="min-w-0 truncate font-semibold text-[#17243a]">{{ nestedBlockItemLabel(item, index) }}</span>
+              </div>
+            </div>
+          </div>
+          <div
+            v-else-if="customCanvasVisibleNestedBlocks(effectiveData as CustomCanvasData).length"
+            :class="customCanvasNestedBlockContainerClasses(effectiveBlock, effectiveData as CustomCanvasData)"
+            :style="customCanvasNestedStackContainerStyle(effectiveData as CustomCanvasData)"
+          >
+            <button
+              v-for="nestedBlock in customCanvasVisibleNestedBlocks(effectiveData as CustomCanvasData)"
+              :key="nestedBlock.id"
+              type="button"
+              data-testid="workbench-nested-card-preview"
+              :data-parent-block-id="effectiveBlock.id"
+              :data-nested-block-id="nestedBlock.id"
+              :data-nested-card-id="nestedBlock.id"
+              :data-nested-card-title="nestedBlock.title"
+              :data-nested-card-kind="nestedBlock.kind"
+              :data-capability-id="nestedBlock.capabilityId"
+              :data-compose-source="nestedBlockComposeSource(nestedBlock)"
+              :data-binding-id="nestedBlock.dataBindingId || nestedBlock.dataBinding?.bindingId || nestedBlock.dataBinding?.id || ''"
+              :data-binding-status="nestedBlock.dataBindingStatus"
+              :data-renderer-key="nestedBlockRendererKey(nestedBlock)"
+              :data-data-shape="nestedBlock.dataShape"
+              :data-visual-kind="nestedBlockVisualKind(nestedBlock)"
+              :data-business-gap="nestedBlockNeedsHumanIntervention(nestedBlock) ? 'true' : undefined"
+              :data-business-gap-reason="nestedBlockNeedsHumanIntervention(nestedBlock) ? nestedBlockBusinessGapReason(nestedBlock) : undefined"
+              :data-business-gap-diagnostics="nestedBlockNeedsHumanIntervention(nestedBlock) ? nestedBlockFailureReason(nestedBlock) : undefined"
+              :class="nestedBlockShellClasses(nestedBlock, customCanvasUsesAbsoluteNestedBlocks(effectiveBlock, effectiveData as CustomCanvasData), customCanvasDenseNestedStack(effectiveData as CustomCanvasData), customCanvasUsesNaturalNestedGrid(effectiveData as CustomCanvasData) && !customCanvasShouldFillNaturalNestedGrid(effectiveBlock, effectiveData as CustomCanvasData))"
+              :style="{
+                ...nestedBlockCanvasStyle(nestedBlock, effectiveData as CustomCanvasData, customCanvasUsesAbsoluteNestedBlocks(effectiveBlock, effectiveData as CustomCanvasData)),
+                ...nestedBlockStackTailPlacementStyle(nestedBlock, effectiveData as CustomCanvasData),
+                ...nestedBlockGridPlacementStyle(nestedBlock, effectiveData as CustomCanvasData, customCanvasUsesAbsoluteNestedBlocks(effectiveBlock, effectiveData as CustomCanvasData)),
+              }"
+              :title="nestedBlockFocusTitle(nestedBlock)"
+              :aria-label="nestedBlockFocusTitle(nestedBlock)"
+              @pointerdown.stop
+              @click.stop="focusNestedBlock(nestedBlock)"
+            >
+              <div class="flex min-w-0 items-start justify-between gap-2">
+                <div class="min-w-0">
+                  <div class="truncate text-xs font-semibold text-slate-900">{{ nestedBlock.title }}</div>
+                  <div v-if="customCanvasShowsStructureLabels(effectiveBlock)" class="mt-1 truncate text-[11px] text-slate-500">{{ nestedBlock.slot }} · {{ nestedBlock.kind }}</div>
+                </div>
+                <span
+                  v-if="nestedBlockNeedsHumanIntervention(nestedBlock)"
+                  class="workbench-nested-business-gap-dot workbench-nested-card-role-badge shrink-0 rounded border border-amber-200 bg-amber-50 px-1.5 py-0 text-[12px] font-semibold leading-4 text-amber-700"
+                  data-nested-business-gap-action-label="true"
+                  :title="nestedBlockFailureReason(nestedBlock)"
+                  aria-label="需补充业务口径"
+                >
+                  子卡 · 补口径
+                </span>
+                <span v-if="!nestedBlockNeedsHumanIntervention(nestedBlock) && !nestedBlockEmptyImageContainer(nestedBlock)" :class="['workbench-nested-card-role-badge shrink-0 rounded border border-slate-200 bg-slate-50 text-xs font-medium text-slate-500', nestedBlockCompactPreview(nestedBlock) ? 'px-1.5 py-0' : 'px-2 py-0.5']">
+                  子卡
+                </span>
+              </div>
+              <div v-if="nestedBlock.dataBindingStatus === 'error' && !nestedBlockDataSnapshotRenderable(nestedBlock) && !nestedBlockNeedsHumanIntervention(nestedBlock)" class="mt-2 rounded border border-rose-100 bg-rose-50 px-2 py-1 text-[11px] leading-5 text-rose-700">
+                <div v-if="nestedBlockNeedsHumanIntervention(nestedBlock)" class="mb-1 font-semibold text-amber-700">需补充业务口径</div>
+                <div class="line-clamp-2 font-medium" :title="nestedBlockFailureReason(nestedBlock)">{{ nestedBlockFailureReason(nestedBlock) }}</div>
+                <div class="mt-0.5 line-clamp-1 text-rose-600" :title="nestedBlockQueryIntent(nestedBlock)">{{ nestedBlockQueryIntent(nestedBlock) }}</div>
+              </div>
+              <div v-else-if="nestedBlockEmptyImageContainer(nestedBlock)" class="mt-1 grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)_auto] items-center gap-2 overflow-hidden rounded border border-slate-100 bg-slate-50 px-2 py-1 text-xs">
+                <span class="min-w-0 truncate text-slate-500">保留截图区域，等待可用业务口径</span>
+                <span class="shrink-0 rounded-full border border-slate-200 bg-white px-1.5 py-0.5 font-semibold leading-4 text-slate-500">待回填</span>
+              </div>
+              <div v-else-if="nestedBlockVisualKind(nestedBlock) === 'statusList'" class="workbench-nested-status-list mt-1 grid min-h-0 flex-1 auto-rows-fr gap-1 overflow-hidden">
+                <div class="workbench-nested-status-summary grid grid-cols-3 gap-1">
+                  <div v-for="item in nestedBlockStatusSummary(nestedBlock)" :key="`${nestedBlock.id}-status-summary-${item.tone}`" class="min-w-0 rounded border border-slate-100 bg-slate-50 px-1.5 py-1 text-center">
+                    <strong class="block text-sm leading-4 text-slate-900">{{ item.count }}</strong>
+                    <span class="block truncate text-[11px] leading-4 text-slate-500">{{ nestedBlockStatusSummaryLabel(item.tone) }}</span>
+                  </div>
+                </div>
+                <div v-for="(item, index) in nestedBlockItems(nestedBlock).slice(0, 4)" :key="`${nestedBlock.id}-status-${index}`" class="grid min-h-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1.5 rounded border border-slate-100 bg-white px-2 py-1 text-xs">
+                  <i :class="nestedBlockDotClasses(item)" />
+                  <span class="min-w-0 truncate font-semibold text-slate-800">{{ nestedBlockItemLabel(item, index) }}</span>
+                  <span :class="nestedBlockPillClasses(item)">{{ nestedBlockItemValue(item) || '正常' }}</span>
+                </div>
+              </div>
+              <div v-else-if="nestedBlockVisualKind(nestedBlock) === 'incidentList'" class="workbench-nested-incident-list workbench-nested-incident-timeline mt-1 grid min-h-0 flex-1 auto-rows-fr gap-1 overflow-hidden">
+                <div v-for="(item, index) in nestedBlockItems(nestedBlock).slice(0, 3)" :key="`${nestedBlock.id}-incident-${index}`" class="grid min-h-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1.5 rounded border border-slate-100 bg-white px-2 py-1 text-xs">
+                  <span class="grid place-items-center gap-0.5">
+                    <i :class="nestedBlockDotClasses(item)" />
+                    <span :class="nestedBlockPillClasses(item)">{{ nestedBlockItemSeverity(item) }}</span>
+                  </span>
+                  <span class="min-w-0">
+                    <strong class="block truncate text-xs leading-4 text-slate-800">{{ nestedBlockItemLabel(item, index) }}</strong>
+                    <span class="block truncate text-xs leading-4 text-slate-500">{{ nestedBlockItemDetail(item) }}</span>
+                  </span>
+                  <span class="shrink-0 text-xs font-medium text-slate-500">{{ nestedBlockItemTime(item) }}</span>
+                </div>
+              </div>
+              <div v-else-if="nestedBlockVisualKind(nestedBlock) === 'resourceBars'" class="workbench-nested-resource-bars mt-2 grid min-h-0 flex-1 auto-rows-fr gap-2 overflow-hidden">
+                <div v-for="(item, index) in nestedBlockBarItems(nestedBlock)" :key="`${nestedBlock.id}-resource-${index}`" class="grid grid-cols-[3.5rem_minmax(0,1fr)_2.5rem] items-center gap-2 text-xs">
+                  <span class="truncate text-slate-500">{{ nestedBlockItemLabel(item, index) }}</span>
+                  <span class="grid gap-0.5">
+                    <span class="h-3 overflow-hidden rounded-full bg-slate-200"><i :class="nestedBlockBarClasses(item)" :style="nestedBlockBarStyle(item, 60)" /></span>
+                    <span class="workbench-nested-resource-threshold grid grid-cols-3 text-xs leading-3 text-slate-400">
+                      <i>0</i><i class="text-center">70</i><i class="text-right">100</i>
+                    </span>
+                  </span>
+                  <b class="text-right font-semibold text-slate-600">{{ nestedBlockItemValue(item) || nestedBlockItemProgress(item) }}</b>
+                </div>
+              </div>
+              <div v-else-if="nestedBlockVisualKind(nestedBlock) === 'securityScore'" class="workbench-nested-security-score mt-1 rounded-md bg-[#101820] p-2 text-white">
+                <div class="flex items-center justify-between gap-2">
+                  <span class="truncate text-xs text-slate-300">安全健康分</span>
+                  <span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-semibold text-amber-700">中风险</span>
+                </div>
+                <div class="mt-2 grid grid-cols-[minmax(0,1fr)_4rem] items-center gap-2">
+                  <div class="min-w-0">
+                    <strong class="text-3xl leading-none">{{ nestedBlockSecurityScore(nestedBlock) }}</strong>
+                    <span class="ml-1 text-xs text-slate-300">/ 100</span>
+                    <div class="workbench-nested-security-track mt-2 h-1.5 overflow-hidden rounded-full bg-slate-700">
+                      <i class="block h-full rounded-full bg-emerald-500" :style="{ width: nestedBlockPercent(nestedBlockSecurityScore(nestedBlock), 86) }" />
+                    </div>
+                  </div>
+                  <div class="grid h-14 w-14 place-items-center rounded-full text-sm font-bold shadow-inner" style="background: radial-gradient(circle at center, #101820 0 54%, transparent 55%), conic-gradient(#15875a 0 62%, #bf811d 62% 86%, #334155 86% 100%);">{{ nestedBlockSecurityScoreRingLabel(nestedBlock) }}</div>
+                </div>
+                <div class="mt-2 grid grid-cols-3 gap-1">
+                  <div v-for="(item, index) in nestedBlockSecurityMetrics(nestedBlock)" :key="`${nestedBlock.id}-security-${index}`" class="min-w-0 rounded border border-slate-700 bg-slate-800 px-1.5 py-1">
+                    <strong class="block truncate text-sm leading-4">{{ nestedBlockItemValue(item) || nestedBlockItemLabel(item, index) }}</strong>
+                    <span class="block truncate text-xs leading-4 text-slate-400">{{ nestedBlockItemValue(item) ? nestedBlockItemLabel(item, index) : '' }}</span>
+                  </div>
+                </div>
+              </div>
+              <div v-else-if="nestedBlockVisualKind(nestedBlock) === 'simpleList'" class="workbench-nested-simple-list mt-1 grid min-h-0 flex-1 auto-rows-fr gap-1 overflow-hidden">
+                <div v-for="(item, index) in nestedBlockItems(nestedBlock).slice(0, 5)" :key="`${nestedBlock.id}-simple-${index}`" class="grid min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2 rounded border border-slate-100 bg-slate-50 px-2 py-1 text-xs">
+                  <span class="min-w-0 truncate font-semibold text-slate-800">{{ nestedBlockItemLabel(item, index) }}</span>
+                  <span :class="nestedBlockPillClasses(item)">{{ nestedBlockItemValue(item) || '待确认' }}</span>
+                </div>
+              </div>
+              <div v-else-if="nestedBlockVisualKind(nestedBlock) === 'progressList'" class="workbench-nested-progress-list mt-1 grid min-h-0 flex-1 auto-rows-fr gap-1.5 overflow-hidden">
+                <div v-for="(item, index) in nestedBlockBarItems(nestedBlock)" :key="`${nestedBlock.id}-progress-${index}`" class="grid min-h-0 grid-cols-[minmax(0,1fr)_5rem] gap-1.5 rounded border border-slate-100 bg-white px-2 py-1.5 text-xs">
+                  <div class="min-w-0">
+                    <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
+                      <span class="min-w-0 truncate font-semibold text-slate-800">{{ nestedBlockItemLabel(item, index) }}</span>
+                      <span class="workbench-nested-progress-stage shrink-0 text-[11px] text-slate-500">{{ nestedBlockProgressStage(item, index) }}</span>
+                    </div>
+                    <span class="mt-1 block h-2 overflow-hidden rounded-full bg-slate-200"><i :class="nestedBlockBarClasses(item)" :style="nestedBlockBarStyle(item, 52)" /></span>
+                  </div>
+                  <span :class="nestedBlockPillClasses(item)">{{ nestedBlockItemValue(item) || nestedBlockItemProgress(item) }}</span>
+                </div>
+              </div>
+              <div v-else-if="nestedBlockVisualKind(nestedBlock) === 'todoGrid'" class="workbench-nested-todo-grid mt-1 grid min-h-0 flex-1 grid-cols-2 gap-1.5 overflow-hidden">
+                <div v-for="(item, index) in nestedBlockTileItems(nestedBlock)" :key="`${nestedBlock.id}-todo-${index}`" class="relative grid min-h-[54px] place-items-center rounded border border-slate-100 bg-white px-2 py-1 text-center">
+                  <span class="workbench-nested-todo-corner absolute right-1 top-1 rounded bg-slate-100 px-1 text-xs leading-4 text-slate-500">{{ index + 1 }}</span>
+                  <strong class="text-xl leading-none text-slate-900">{{ nestedBlockItemValue(item) || nestedBlockItemLabel(item, index) }}</strong>
+                  <span class="mt-1 max-w-full truncate text-xs text-slate-500">{{ nestedBlockItemValue(item) ? nestedBlockItemLabel(item, index) : '' }}</span>
+                </div>
+              </div>
+              <div v-else-if="nestedBlockVisualKind(nestedBlock) === 'quickLinks'" class="workbench-nested-quick-links mt-1 grid min-h-0 flex-1 content-start gap-1.5 overflow-hidden" :style="nestedBlockQuickLinksGridStyle(nestedBlock)">
+                <div v-for="(item, index) in nestedBlockTileItems(nestedBlock)" :key="`${nestedBlock.id}-quick-${index}`" class="grid min-h-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 rounded border border-slate-100 bg-white px-2 py-1.5 text-xs">
+                  <span class="workbench-nested-quick-icon grid h-6 w-6 shrink-0 place-items-center rounded bg-[#edf3ff] text-xs font-semibold text-[#1f4fd4]">{{ nestedBlockQuickIconLabel(item, index) }}</span>
+                  <span class="workbench-nested-quick-label min-w-0 break-words font-semibold leading-4 text-slate-800">{{ nestedBlockItemLabel(item, index) }}</span>
+                </div>
+              </div>
+              <div v-else-if="nestedBlockVisualKind(nestedBlock) === 'donut'" class="workbench-nested-donut mt-1 grid grid-cols-[4.5rem_minmax(0,1fr)] items-center gap-2 overflow-hidden rounded border border-slate-100 bg-slate-50 p-2">
+                <div class="grid h-16 w-16 place-items-center rounded-full text-xs font-semibold text-slate-500" :style="nestedBlockDonutStyle(nestedBlock)">年度预算</div>
+                <div class="grid min-w-0 gap-1 text-xs">
+                  <div v-for="(item, index) in nestedBlockDonutItems(nestedBlock)" :key="`${nestedBlock.id}-donut-${index}`" class="grid grid-cols-[minmax(0,1fr)_auto] gap-1">
+                    <span class="truncate text-slate-500">{{ nestedBlockItemLabel(item, index) }}</span>
+                    <b class="text-slate-800">{{ nestedBlockItemValue(item) }}</b>
+                  </div>
+                </div>
+              </div>
+              <div v-else-if="nestedBlockVisualKind(nestedBlock) === 'metric'" :class="nestedBlockCompactPreview(nestedBlock) ? 'mt-1' : 'mt-2'">
+                <div :class="['font-semibold leading-none text-slate-950', nestedBlockCompactPreview(nestedBlock) ? 'text-lg' : 'text-xl']" :style="nestedBlockAccentStyle(nestedBlock)">{{ nestedBlockMetricValue(nestedBlock) }}</div>
+                <div v-if="!nestedBlockCompactPreview(nestedBlock)" class="mt-1 truncate text-[11px] text-slate-500">{{ nestedBlockDataSummary(nestedBlock) }}</div>
+              </div>
+              <div v-else-if="nestedBlockVisualKind(nestedBlock) === 'table'" :class="['overflow-hidden rounded border border-slate-100', nestedBlockCompactPreview(nestedBlock) ? 'mt-1' : 'mt-2']">
+                <div class="grid bg-slate-50" :style="rowGrid(nestedBlockColumns(nestedBlock))">
+                  <div v-for="column in nestedBlockColumns(nestedBlock)" :key="column" :class="['truncate border-b border-slate-100 px-2 text-xs font-semibold text-slate-500', nestedBlockCompactPreview(nestedBlock) ? 'py-0.5' : 'py-1']">{{ column }}</div>
+                </div>
+                <div v-for="row in nestedBlockRows(nestedBlock).slice(0, 2)" :key="JSON.stringify(row)" class="grid" :style="rowGrid(nestedBlockColumns(nestedBlock))">
+                  <div v-for="column in nestedBlockColumns(nestedBlock)" :key="column" :class="['truncate px-2 text-xs text-slate-700', nestedBlockCompactPreview(nestedBlock) ? 'py-0.5' : 'py-1']">{{ nestedBlockCell(row, column) }}</div>
+                </div>
+              </div>
+              <div v-else-if="nestedBlockVisualKind(nestedBlock) === 'list'" :class="nestedBlockCompactPreview(nestedBlock) ? 'mt-1 space-y-0.5' : 'mt-2 space-y-1'">
+                <div v-for="(item, index) in nestedBlockRankingItems(nestedBlock)" :key="`${nestedBlock.id}-${index}`" class="flex items-center justify-between gap-2 text-xs">
+                  <span class="min-w-0 truncate text-slate-600">{{ textValue(item.label, textValue(item.name, textValue(item.title, String(index + 1)))) }}</span>
+                  <span class="shrink-0 font-semibold text-slate-900">{{ textValue(item.value, textValue(item.amount, '')) }}</span>
+                </div>
+              </div>
+              <div v-else-if="nestedBlockVisualKind(nestedBlock) === 'chart'" :class="['flex min-h-[48px] flex-1 items-end gap-1 rounded border border-slate-100 bg-slate-50 px-2', nestedBlockCompactPreview(nestedBlock) ? 'mt-1 py-1.5' : 'mt-2 py-2']">
+                <div v-for="index in 8" :key="index" class="min-w-0 flex-1 rounded-sm bg-[#4C78FC]/70" :style="{ ...nestedBlockAccentStyle(nestedBlock), backgroundColor: nestedBlock.visual?.accentColor || undefined, height: nestedBlockCompactPreview(nestedBlock) ? `${10 + ((index * 13) % 24)}px` : `${18 + ((index * 17) % 36)}px` }" />
+              </div>
+              <div v-else :class="['truncate text-xs text-slate-500', nestedBlockCompactPreview(nestedBlock) ? 'mt-1' : 'mt-2']">{{ nestedBlockDataSummary(nestedBlock) }}</div>
+            </button>
+          </div>
+          <div
+            v-else-if="customCanvasEmptyImagePlaceholder(effectiveBlock, effectiveData as CustomCanvasData)"
+            class="workbench-custom-canvas-empty-placeholder grid h-full min-h-0 w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-2 overflow-hidden rounded-md border border-slate-200 bg-slate-50 px-3 py-1 text-xs"
+          >
+            <div class="min-w-0">
+              <span class="block truncate text-slate-500">保留截图区域，等待可用业务口径</span>
+            </div>
+            <span class="shrink-0 rounded-full border border-slate-200 bg-white px-2 py-0.5 font-semibold leading-5 text-slate-500">待回填</span>
+          </div>
+          <div v-if="customCanvasOverlaysVisibleElements(effectiveBlock, effectiveData as CustomCanvasData)" class="pointer-events-none absolute inset-0 overflow-hidden">
+            <template v-for="element in customCanvasVisibleElements(effectiveBlock, effectiveData as CustomCanvasData)" :key="element.id">
+              <div
+                v-if="element.kind === 'divider'"
+                :class="customCanvasElementClasses(element)"
+                :style="customCanvasElementStyle(element)"
+              />
+              <div
+                v-else
+                :class="customCanvasElementClasses(element)"
+                :style="customCanvasElementStyle(element)"
+                :title="element.label || element.value"
+              >
+                <template v-if="element.kind === 'metric'">
+                  <span class="block truncate text-xs opacity-75">{{ element.label }}</span>
+                  <span class="block truncate text-lg font-semibold leading-6">{{ element.value }}</span>
+                </template>
+                <template v-else>{{ element.label || element.value }}</template>
+              </div>
+            </template>
+          </div>
+          <template v-else>
+            <template v-for="element in customCanvasVisibleElements(effectiveBlock, effectiveData as CustomCanvasData)" :key="element.id">
+              <span v-if="element.kind === 'badge'" class="inline-flex rounded-full bg-white px-2.5 py-1 text-xs text-slate-600">{{ element.label }}{{ element.value ? ` · ${element.value}` : '' }}</span>
+              <div v-else-if="element.kind === 'divider'" class="h-px bg-slate-200" />
+              <div v-else-if="element.kind === 'metric'"><div class="text-xs text-slate-500">{{ element.label }}</div><div class="text-2xl font-semibold text-slate-900">{{ element.value }}</div></div>
+              <div v-else class="text-sm leading-6 text-slate-700">{{ element.label || element.value }}</div>
+            </template>
+          </template>
+          <div v-if="!customCanvasOverlaysVisibleElements(effectiveBlock, effectiveData as CustomCanvasData) && customCanvasVisibleNarrative(effectiveBlock, effectiveData as CustomCanvasData)" class="text-xs text-slate-500">{{ customCanvasVisibleNarrative(effectiveBlock, effectiveData as CustomCanvasData) }}</div>
+        </div>
+      </template>
+
+      <template v-else-if="manualReplacementView(effectiveBlock)">
+        <div :class="manualReplacementShellClasses(effectiveBlock)" :style="manualReplacementContainerStyle(effectiveBlock)">
+          <div class="min-h-0 flex-1 space-y-1 overflow-y-auto pr-1">
+            <div class="min-w-0 space-y-1">
+              <div class="inline-flex rounded-full bg-white px-2.5 py-0.5 text-xs font-semibold text-amber-700">需手动替换</div>
+              <div class="truncate text-sm font-semibold leading-5 text-slate-900" :title="effectiveBlock.title || '未识别区域'">{{ effectiveBlock.title || '未识别区域' }}</div>
+              <p class="line-clamp-1 text-xs leading-5 text-amber-800" :title="manualReplacementView(effectiveBlock)?.reason">{{ manualReplacementView(effectiveBlock)?.reason }}</p>
+              <p v-if="manualReplacementCompactView(effectiveBlock)" class="truncate text-xs font-medium text-amber-700" :title="manualReplacementView(effectiveBlock)?.suggestedCapabilityLabel || manualReplacementView(effectiveBlock)?.suggestedKindLabel">
+                {{ manualReplacementView(effectiveBlock)?.suggestedCapabilityLabel || manualReplacementView(effectiveBlock)?.suggestedKindLabel }}
+              </p>
+            </div>
+            <div v-if="!manualReplacementCompactView(effectiveBlock)" class="grid gap-1 text-xs text-slate-600" style="grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));">
+              <div class="min-w-0 rounded-md bg-white px-2 py-1">
+                <div class="text-slate-400">建议类型</div>
+                <div class="mt-0.5 font-semibold text-slate-800">{{ manualReplacementView(effectiveBlock)?.suggestedKindLabel }}</div>
+                <div v-if="manualReplacementView(effectiveBlock)?.suggestedCapabilityLabel" class="mt-0.5 truncate text-xs font-medium text-amber-700" :title="manualReplacementView(effectiveBlock)?.suggestedCapabilityLabel">{{ manualReplacementView(effectiveBlock)?.suggestedCapabilityLabel }}</div>
+              </div>
+              <div class="min-w-0 rounded-md bg-white px-2 py-1">
+                <div class="text-slate-400">置信度</div>
+                <div class="mt-0.5 font-semibold text-slate-800">{{ manualReplacementView(effectiveBlock)?.confidenceLabel }}</div>
+              </div>
+              <div class="min-w-0 rounded-md bg-white px-2 py-1">
+                <div class="text-slate-400">截图区域</div>
+                <div class="mt-0.5 truncate font-semibold text-slate-800">{{ manualReplacementView(effectiveBlock)?.regionLabel }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="grid shrink-0 min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-1 border-t border-amber-100 pt-1">
+            <label v-if="!manualReplacementCompactView(effectiveBlock)" class="min-w-0 text-xs font-medium text-amber-900">
+              <span class="sr-only">替换卡片</span>
+              <select
+                class="h-6 w-full rounded-md border border-amber-200 bg-white px-2 text-xs text-slate-800 outline-none transition focus:border-[#4C78FC] focus:ring-2 focus:ring-blue-100"
+                :value="manualReplacementCapabilityDraft(effectiveBlock)"
+                :title="manualReplacementCapabilityDraftLabel(effectiveBlock)"
+                @change="setManualReplacementCapabilityDraft(effectiveBlock.id, ($event.target as HTMLSelectElement).value)"
+              >
+                <option
+                  v-for="option in manualReplacementCapabilityOptionsForBlock(effectiveBlock)"
+                  :key="option.capabilityId"
+                  :value="option.capabilityId"
+                >
+                  {{ option.title }}
+                </option>
+              </select>
+            </label>
+            <span v-else class="min-w-0 truncate text-xs font-semibold text-amber-900" :title="manualReplacementCapabilityDraftLabel(effectiveBlock)">
+              {{ manualReplacementCapabilityDraftLabel(effectiveBlock) }}
+            </span>
+            <button
+              type="button"
+              class="workbench-card-action inline-flex h-6 max-w-[108px] min-w-0 shrink-0 items-center justify-center rounded-md border border-amber-300 bg-white px-2 text-xs font-semibold text-amber-800 transition hover:border-amber-400 hover:bg-amber-100"
+              :aria-label="manualReplacementActionLabel(effectiveBlock)"
+              :title="manualReplacementActionLabel(effectiveBlock)"
+              @click="replaceManualPlaceholder(effectiveBlock)"
+            >
+              <span class="min-w-0 truncate">{{ manualReplacementPrimaryActionLabel(effectiveBlock) }}</span>
+            </button>
+          </div>
+        </div>
+      </template>
+
+      <div v-else class="rounded-lg border border-slate-100 bg-slate-50 px-4 py-5 text-sm leading-6 text-slate-500">
+        {{ effectiveBlock.title || '未命名卡片' }}
+      </div>
+    </template>
+
+    <template v-else-if="effectiveBlock.blockType === 'form' && isFormBlockData(effectiveBlock.form)">
+      <div class="space-y-4 overflow-y-auto">
+        <div class="flex items-center justify-between rounded-lg bg-slate-50 px-4 py-3 text-xs text-slate-500">
+          <span>草稿状态：{{ effectiveBlock.form.status === 'submitted' ? '已提交' : '编辑中' }}</span>
+          <span>已完成 {{ formCompletedCount(effectiveBlock.id, effectiveBlock.form) }}/{{ effectiveBlock.form.fields.length }}</span>
+        </div>
+        <div class="space-y-4">
+          <label v-for="field in compactLimit(effectiveBlock.form.fields, 2, 3)" :key="field.id" class="block space-y-2">
+            <span class="text-sm font-medium text-slate-800">{{ field.label }}<span v-if="field.required" class="ml-1 text-rose-500">*</span></span>
+            <textarea v-if="field.type === 'textarea'" v-model="formValues(effectiveBlock.id)[field.id] as string" class="min-h-[92px] w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm" :placeholder="field.placeholder" />
+            <select v-else-if="field.type === 'select' || field.type === 'user'" v-model="formValues(effectiveBlock.id)[field.id] as string" class="h-11 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-700">
+              <option value="">{{ field.type === 'user' ? '请选择人员' : '请选择' }}</option>
+              <option v-for="option in field.options || []" :key="option" :value="option">{{ option }}</option>
+            </select>
+            <input v-else v-model="formValues(effectiveBlock.id)[field.id] as string" :type="renderFieldType(field)" class="h-11 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm" :placeholder="field.placeholder" />
+          </label>
+        </div>
+        <div class="flex justify-end">
+          <button type="button" class="inline-flex items-center rounded-full bg-[#1f4fd4] px-5 py-2 text-sm font-medium text-white hover:bg-[#163eab]" @click="emit('submitForm', effectiveBlock.id, formValues(effectiveBlock.id))">
+            <Send class="mr-2 h-4 w-4" />提交表单
+          </button>
+        </div>
+      </div>
+    </template>
+
+    <template v-else-if="effectiveBlock.blockType === 'survey' && isSurveyBlockData(effectiveBlock.survey)">
+      <div class="space-y-5 overflow-y-auto">
+        <div class="flex items-center justify-between rounded-lg bg-slate-50 px-4 py-3 text-xs text-slate-500">
+          <span>进度 {{ effectiveBlock.survey.progress.current }}/{{ effectiveBlock.survey.progress.total }}</span>
+          <span>{{ effectiveBlock.survey.status === 'submitted' ? '已提交' : '待提交' }}</span>
+        </div>
+        <div class="space-y-4">
+          <div v-for="(question, questionIndex) in compactLimit(effectiveBlock.survey.questions, 1, 2)" :key="question.id" class="rounded-lg border border-slate-100 p-4">
+            <div class="mb-3 text-sm font-semibold text-slate-900">{{ questionIndex + 1 }}. {{ question.label }}</div>
+            <textarea v-if="question.type === 'text'" v-model="surveyAnswers(effectiveBlock.id)[question.id] as string" class="min-h-[82px] w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm" placeholder="请输入补充说明" />
+            <div v-else-if="question.type === 'score'" class="flex flex-wrap gap-2">
+              <button v-for="option in Array.from({ length: question.scale || 5 }, (_, index) => String(index + 1))" :key="option" type="button" :class="surveyAnswers(effectiveBlock.id)[question.id] === option ? 'bg-[#1f4fd4] text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'" class="flex h-9 w-9 items-center justify-center rounded-full text-xs font-semibold transition" @click="surveyAnswers(effectiveBlock.id)[question.id] = option">{{ option }}</button>
+            </div>
+            <div v-else-if="question.type === 'matrix'" class="overflow-hidden rounded-lg border border-slate-100">
+              <div v-for="row in question.rows || []" :key="row" class="grid grid-cols-[minmax(90px,1fr)_2fr] border-b border-slate-100 last:border-b-0">
+                <div class="bg-slate-50 px-3 py-3 text-xs font-medium text-slate-600">{{ row }}</div>
+                <div class="flex flex-wrap gap-2 px-3 py-2">
+                  <button v-for="option in question.options" :key="`${row}-${option}`" type="button" :class="matrixAnswerValue(effectiveBlock.id, question.id, row) === option ? 'bg-[#1f4fd4] text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'" class="rounded-full px-3 py-1.5 text-xs font-medium transition" @click="updateMatrixAnswer(effectiveBlock.id, question.id, row, option)">{{ option }}</button>
+                </div>
+              </div>
+            </div>
+            <div v-else class="flex flex-wrap gap-2">
+              <button v-for="option in question.options" :key="option" type="button" :class="(question.type === 'multiple' ? multipleAnswerIncludes(effectiveBlock.id, question.id, option) : surveyAnswers(effectiveBlock.id)[question.id] === option) ? 'bg-[#1f4fd4] text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'" class="rounded-full px-3 py-2 text-xs font-medium transition" @click="surveyAnswers(effectiveBlock.id)[question.id] = question.type === 'multiple' ? toggleMultiValue(surveyAnswers(effectiveBlock.id)[question.id], option) : option">{{ option }}</button>
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-end"><button type="button" class="inline-flex items-center rounded-full bg-[#1f4fd4] px-5 py-2 text-sm font-medium text-white hover:bg-[#163eab]" @click="emit('submitSurvey', effectiveBlock.id, surveyAnswers(effectiveBlock.id))"><ClipboardCheck class="mr-2 h-4 w-4" />提交问卷</button></div>
+      </div>
+    </template>
+
+    <template v-else-if="effectiveBlock.blockType === 'action' && isActionGroupData(effectiveBlock.actionGroup)">
+      <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+        <button v-for="item in compactLimit(effectiveBlock.actionGroup.buttons, 2, 4)" :key="item.id" type="button" class="group rounded-lg border border-slate-100 bg-white p-4 text-left transition hover:border-[#bfd1ff] hover:bg-[#f5f9ff]" @click="emit('executeAction', effectiveBlock.id, item.id, item.label)">
+          <div class="flex items-center justify-between"><div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[#edf3ff] text-[#1f4fd4]"><Play class="h-4 w-4" /></div><ArrowRight class="h-4 w-4 text-slate-300 transition group-hover:translate-x-1 group-hover:text-[#1f4fd4]" /></div>
+          <div class="mt-4 text-sm font-semibold text-slate-900">{{ item.label }}</div>
+          <p class="mt-2 text-xs leading-5 text-slate-500">{{ item.description }}</p>
+        </button>
+      </div>
+    </template>
+
+    <template v-else-if="effectiveBlock.blockType === 'workflow' && isWorkflowBlockData(effectiveBlock.workflow)">
+      <div class="space-y-5 overflow-y-auto">
+        <div v-if="effectiveBlock.workflow.statusBoard" class="grid gap-3 sm:grid-cols-3">
+          <div v-for="item in effectiveBlock.workflow.statusBoard" :key="item.label" class="rounded-lg bg-slate-50 px-4 py-3"><div class="text-xs text-slate-500">{{ item.label }}</div><div class="mt-1 text-xl font-semibold text-slate-900">{{ item.count }}</div></div>
+        </div>
+        <div class="space-y-4">
+          <div v-for="(step, index) in compactLimit(effectiveBlock.workflow.steps, 2, 4)" :key="`${step.time}-${step.label}`" class="flex gap-4">
+            <div class="flex flex-col items-center"><div :class="step.status === 'done' ? 'bg-emerald-100 text-emerald-600' : step.status === 'running' ? 'bg-[#edf3ff] text-[#1f4fd4]' : 'bg-slate-100 text-slate-500'" class="flex h-9 w-9 items-center justify-center rounded-full"><CircleCheck class="h-4 w-4" /></div><div v-if="index < effectiveBlock.workflow.steps.length - 1" class="mt-2 h-full w-px bg-slate-200" /></div>
+            <div class="flex-1 pb-6"><div class="flex items-center justify-between gap-3"><div class="text-sm font-semibold text-slate-900">{{ step.label }}</div><span class="rounded-full bg-slate-100 px-2.5 py-1 text-[11px] text-slate-600">{{ step.time }}</span></div><div class="mt-1 text-xs text-slate-500">责任主体：{{ step.owner || '系统' }}</div><div v-if="step.description" class="mt-2 text-xs leading-5 text-slate-400">{{ step.description }}</div></div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template v-else-if="effectiveBlock.blockType === 'report' && isReportBlockData(effectiveBlock.report)">
+      <div class="space-y-5 overflow-y-auto">
+        <div class="flex flex-col gap-4 rounded-lg bg-gradient-to-br from-[#0f172a] to-[#1e3a8a] p-6 text-white lg:flex-row lg:items-end lg:justify-between">
+          <div><div class="text-xs uppercase text-blue-100">Report Artifact</div><div class="mt-2 text-2xl font-semibold">第 {{ effectiveBlock.report.version }} 版管理简报</div><p class="mt-3 max-w-2xl text-sm leading-6 text-blue-50">{{ effectiveBlock.report.summary }}</p></div>
+          <button type="button" class="inline-flex items-center rounded-full bg-white/12 px-5 py-2 text-sm font-medium text-white hover:bg-white/20" @click="emit('generateReport', effectiveBlock.id)"><FileBarChart2 class="mr-2 h-4 w-4" />生成新版本</button>
+        </div>
+        <div class="grid gap-4 lg:grid-cols-3">
+          <div v-for="section in compactLimit(effectiveBlock.report.sections, 1, 2)" :key="section.title" class="rounded-lg border border-slate-100 bg-white p-5"><div class="text-sm font-semibold text-slate-900">{{ section.title }}</div><p class="mt-3 text-sm leading-6 text-slate-600">{{ section.body }}</p></div>
+        </div>
+      </div>
+    </template>
+
+    <div v-else class="rounded-lg border border-slate-100 bg-slate-50 px-4 py-5 text-sm leading-6 text-slate-500">
+      {{ effectiveBlock.title || '暂未匹配渲染器' }}
+    </div>
+  </div>
+</template>