模块:FlexGrid

此模块的文档可以在模块:FlexGrid/doc创建

local p = {}
local function generateCell(cellData, index, cellSize)
    local content = ""

    if cellData then
        if cellData.image then
            content = cellData.image  -- 直接返回，不做格式检查
        end
        
        -- 添加文本（如果有）
        if cellData.text and cellData.text ~= "" then
            content = content .. string.format(
                '%s',
                cellData.text
            )
        end
    end

    -- 跨行列样式
    local spanStyle = ""
    local cellWidth = cellSize -- 默认宽度：1 个单元格大小
    local cellHeight = cellSize -- 默认高度：1 个单元格大小

    if cellData and cellData.colspan and cellData.colspan > 1 then
        spanStyle = spanStyle .. string.format("grid-column: span %d; ", cellData.colspan)
        cellWidth = cellSize * cellData.colspan -- 动态计算跨列宽度
    end
    if cellData and cellData.rowspan and cellData.rowspan > 1 then
        spanStyle = spanStyle .. string.format("grid-row: span %d; ", cellData.rowspan)
        cellHeight = cellSize * cellData.rowspan -- 动态计算跨行高度
    end
    
    -- 组合格子HTML
    local cellClass = string.format("grid-cell cell-index-%d", index)
    return string.format(
        '<div class="%s" style="%swidth:%dpx;height:%dpx;">%s</div>',
        cellClass, spanStyle, cellWidth, cellHeight, content
    )
end
    
    -- 添加索引标识（方便编辑）
    --     local indexDisplay = string.format('<span class="cell-index">%d</span>', index)
    -- 1. 将index添加到class（推荐：class可重复，适合批量样式控制）
    -- 格式：class="grid-cell cell-index-0"（0为具体索引值）
    -- local cellClass = string.format("grid-cell cell-index-%d", index)
    
    -- 2. （可选）将index添加到id（注意：id需唯一，适合单独控制某个格子）
    -- 格式：id="grid-cell-0"（0为具体索引值）
    --     local cellId = string.format("grid-cell-%d", index)

    -- 组合成单个格子的HTML（选择需要的属性，class或id）
    -- return string.format(
        -- 同时使用class和id（按需选择）
        -- '<div class="%s" id="%s" style="width:%dpx;height:%dpx;">%s</div>',
        -- cellClass, cellId, cellSize, cellSize, content
        -- 仅使用class（推荐）
        -- '<div class="%s" style="width:%dpx;height:%dpx;">%s</div>',
        -- cellClass, cellSize, cellSize, content
    -- )
-- end

-- 主函数：生成完整网格
function p.generateGrid(frame)
    local args = frame.args
    local rows = tonumber(args.rows) or 12
    local cols = tonumber(args.cols) or 12
    local total = tonumber(args.total) or 144
    local cellSize = tonumber(args.cellSize) or 60
    local cellDataStr = args.cells or ""
    

    -- 解析格子数据
    local cellData = {}
    for entry in string.gmatch(cellDataStr, "[^;]+") do
        local index, data = string.match(entry, "(%d+)=(.+)")
        if index and data then
            local colspan, rowspan = 1, 1
            local content = data

            -- 提取colspan
            if string.find(data, "colspan=%d+") then
                colspan = tonumber(string.match(data, "colspan=(%d+)")) or 1
                content = string.gsub(content, "colspan=%d+|?", "")
            end
           
            -- 提取rowspan
            if string.find(data, "rowspan=%d+") then
                rowspan = tonumber(string.match(data, "rowspan=(%d+)")) or 1
                content = string.gsub(content, "rowspan=%d+|?", "")
            end
            

            -- 直接将content拆分为image和text（不验证是否为图片）
            -- 匹配可能的图片语法作为image，其余作为text
            local image, text = string.match(content, "(%[%[file:.-%]%]|%[%[文件:.-%]%])|?(.*)")
            if not image then
                image = nil
                text = content  -- 非图片格式时，全部作为文本
            end
           
            cellData[tonumber(index)] = {
                image = image,
                text = text ~= "" and text or nil,
                colspan = colspan,
                rowspan = rowspan
            }
        end
    end
    
    -- 3. 生成所有格子的HTML
    local totalCells = total
    local cellsHtml = {}
    for i = 1, totalCells do
        table.insert(cellsHtml, generateCell(cellData[i], i, cellSize))
    end
    
    -- 生成网格容器
    local grid = mw.html.create("div")
        :addClass("grid-container")
        :css("grid-template-columns", string.format("repeat(%d, %dpx)", cols, cellSize))
        :css("width", string.format("%dpx", cols * cellSize + (cols - 1) * 1))

    for _, cellHtml in ipairs(cellsHtml) do
        grid:wikitext(cellHtml)
    end

    
    return tostring(grid)
end

return p