134 lines
4.2 KiB
TypeScript
134 lines
4.2 KiB
TypeScript
/**
|
||
* 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: 后续补充其余布局的骨架配置
|
||
};
|