WholeProcessPlatform/frontend/src/views/dianZhanZhuanTi/layoutGridSkeletons.ts

/**
 * CSS Grid 布局骨架配置
 *
 * 每种布局只定义网格结构（行、列、区域划分），不指定具体模块。
 * 具体模块由后端 bclData 动态决定，通过 position + per-position-index 映射到 grid-area 名。
 *
 * 区域命名规则：{position}-{areaIdx}
 *   areaIdx = 按 position 各自从 0 递增编号（非全局 index）
 *   例如 left-0 = 左侧第 1 个模块，right-2 = 右侧第 3 个模块
 *
 * 相同区域名出现多次 = 合并单元格（如某侧只有 1 个模块时撑满多行）
 * "." = 空白区域（透出底图）
 */

export interface GridSkeleton {
  /** CSS grid-template-areas 字符串 */
  gridTemplateAreas: string;
  /** CSS grid-template-columns 字符串 */
  gridTemplateColumns: string;
  /** CSS grid-template-rows 字符串 */
  gridTemplateRows: string;
}

export const LAYOUT_GRID_SKELETONS: Record<string, GridSkeleton> = {
  // 左3右3加底
  layout1: {
    gridTemplateAreas:
      '"left-0 . right-0" "left-1 . right-1" "left-2 bottom-0 right-2"',
    gridTemplateColumns: '440px 1fr 440px',
    gridTemplateRows: '1fr 1fr 1fr'
  },
  //左4右4加底
  layout2: {
    gridTemplateAreas:
      '"left-0 . right-0" "left-1 . right-1" "left-2 . right-2" "left-3 bottom-0 right-3"',
    gridTemplateColumns: '440px 1fr 440px',
    gridTemplateRows: '1fr 1fr 1fr 1fr'
  },
  // 左三右三（无底部）
  layout3: {
    gridTemplateAreas:
      '"left-0 . right-0" "left-1 . right-1" "left-2 . right-2"',
    gridTemplateColumns: '440px 1fr 440px',
    gridTemplateRows: '1fr 1fr 1fr'
  },
  //左4右4无底
  layout4: {
    gridTemplateAreas:
      '"left-0 . right-0" "left-1 . right-1" "left-2 . right-2" "left-3 . right-3"',
    gridTemplateColumns: '440px 1fr 440px',
    gridTemplateRows: '1fr 1fr 1fr 1fr'
  },

  // 右二（无左侧、无底部）
  layout5: {
    gridTemplateAreas: '". . right-0" ". . right-1"',
    gridTemplateColumns: '440px 1fr 440px',
    gridTemplateRows: '1fr 1fr'
  },
  // 左2右1加底
  layout6: {
    gridTemplateAreas:
      '"left-0 . right-0" "left-1 . right-0" "bottom-0 bottom-0 bottom-0"',
    gridTemplateColumns: '440px 1fr 440px',
    gridTemplateRows: '1fr 1fr 1fr'
  },
  //仅左3
  layout7: {
    gridTemplateAreas: '"left-0 . ." "left-1 . ." "left-2 . ."',
    gridTemplateColumns: '440px 1fr 440px',
    gridTemplateRows: '1fr 1fr 1fr'
  },
  //左2右3加底
  layout8: {
    gridTemplateAreas:
      '"left-0 . right-0" "left-1 . right-1" "bottom-0 bottom-0 right-2"',
    gridTemplateColumns: '440px 1fr 440px',
    gridTemplateRows: '1fr 1fr 1fr'
  },
  //左3加底
  layout9: {
    gridTemplateAreas: '"left-0 . ." "left-1 . ." "left-2 bottom-0 bottom-0"',
    gridTemplateColumns: '440px 1fr 440px',
    gridTemplateRows: '1fr 1fr 1fr'
  },

  // 左二右二 + 底部（底部撑满全宽）
  layout10: {
    gridTemplateAreas:
      '"left-0 . right-0" "left-1 . right-1" "bottom-0 bottom-0 bottom-0"',
    gridTemplateColumns: '440px 1fr 440px',
    gridTemplateRows: '1fr 1fr 1fr'
  },
  // 左3右1无底
  layout11: {
    gridTemplateAreas: '"left-0 . right-0"   "left-1 . right-0"  "left-2 . ."',
    gridTemplateColumns: '440px 1fr 440px',
    gridTemplateRows: '1fr 1fr 1fr'
  },
  //右一无底
  layout12: {
    gridTemplateAreas: '". . right-0" ". . right-0" ". . ." ". . ."',
    gridTemplateColumns: '440px 1fr 440px',
    gridTemplateRows: '1fr 1fr 1fr 1fr'
  },
  //右1(2/3高)无底
  layout13: {
    gridTemplateAreas: '". . right-0" ". . right-0" ". . ." ',
    gridTemplateColumns: '440px 1fr 440px',
    gridTemplateRows: '1fr 1fr 1fr '
  },
  //左一右一无底
  layout14: {
    gridTemplateAreas: '". left-0 . right-0" "left-0 . right-0" ". . ."',
    gridTemplateColumns: '440px 1fr 440px',
    gridTemplateRows: '1fr 1fr 1fr'
  },
  //左4右3满底
  layout15: {
    gridTemplateAreas:
      ' "left-0 . right-0"    "left-1 . right-1"  "left-2 . right-2"  "left-3 bottom-0 bottom-0"',
    gridTemplateColumns: '440px 1fr 440px',
    gridTemplateRows: '1fr 1fr 1fr'
  },
  //左(2/3+1/3)右3加底
  layout16: {
    gridTemplateAreas:
      '"left-0 . right-0" "left-0 . right-1" "bottom-0 bottom-0 right-2" ',
    gridTemplateColumns: '440px 1fr 440px',
    gridTemplateRows: '1fr 1fr 1fr'
  },
  // TODO: 后续补充其余布局的骨架配置
};