模块:战斗员/display/立绘

此模块的文档可以在模块:战斗员/display/立绘/doc创建

local p = {}

function p.display(frame)
    -- 从模板参数获取数据
    local args = frame:getParent().args
    local data = {}
    
    -- 复制所有参数到data表
    for k, v in pairs(args) do
        data[k] = mw.text.trim(v)
    end
    
    -- 如果名称未设置，使用默认值
    if not data["名称"] or data["名称"] == "" then
        data["名称"] = "未命名角色"
    end
    
    -- 收集所有可用的图片标签页
    local tabs = {}
    
    -- 默认标签
    if data["默认"] and data["默认"] ~= "" then
        table.insert(tabs, {name = "默认", key = "默认", index = #tabs})
    end
    
    -- 立绘标签
    if data["立绘"] and data["立绘"] ~= "" then
        table.insert(tabs, {name = "立绘", key = "立绘", index = #tabs})
    end
    
    -- 皮肤标签
    for i = 1, 3 do
        local skinKey = "皮肤" .. i
        if data[skinKey] and data[skinKey] ~= "" then
            table.insert(tabs, {name = "皮肤" .. i, key = skinKey, index = #tabs})
        end
    end
    
    -- 创建主容器
    local mainContainer = mw.html.create('div')
    
    -- PC端内容
    local desktopDiv = mainContainer:tag('div'):attr('class', 'desktop-only')
    local desktopHtml = p.createDesktopLayout(data, tabs)
    desktopDiv:wikitext(tostring(desktopHtml))
    
    -- 移动端内容
    local mobileDiv = mainContainer:tag('div'):attr('class', 'mobile-only')
    local mobileHtml = p.createMobileLayout(data, tabs)
    mobileDiv:wikitext(tostring(mobileHtml))
    
    return tostring(mainContainer)
end

-- 创建PC端布局
function p.createDesktopLayout(data, tabs)
    -- 构建HTML结构
    local html = mw.html.create('div')
        :attr('style', 'position: relative; width: 100%; height: 585px; margin: 0 auto; overflow: hidden;')
    
    -- 背景图片
    html:tag('div')
        :attr('style', 'position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat;')
        :wikitext('[[File:bg_character_info.png|link=]]')
    
    -- 切换标签
    local tabsDiv = html:tag('div')
        :attr('class', 'main-line-wrap')
        :attr('style', 'position: absolute; top: 10px; left: 10px; z-index: 10; margin: 0;')
    
    local respTabs = tabsDiv:tag('div')
        :attr('class', 'resp-tabs')
    
    local tabsList = respTabs:tag('ul')
        :attr('class', 'resp-tabs-list')
    
    -- 生成标签页
    for i, tab in ipairs(tabs) do
        local li = tabsList:tag('li')
            :attr('class', i == 1 and 'active czn-list-style' or 'czn-list-style')
            :attr('onclick', 'switchPortrait(' .. (tab.index) .. ')')
            :attr('style', 'cursor: pointer;')
        
        li:tag('span')
            :attr('class', 'tab-panel')
            :wikitext(tab.name)
    end
    
    -- 左侧内容 - 职业和属性图标
    if data["职业"] and data["职业"] ~= "" then
        html:tag('div')
            :attr('style', 'position: absolute; left: 32px; top: 155px; z-index: 2;')
            :wikitext('[[File:icon_职业_' .. data["职业"] .. '.png|35px|link=]]')
    end
    
    if data["属性"] and data["属性"] ~= "" then
        html:tag('div')
            :attr('style', 'position: absolute; left: 72px; top: 155px; z-index: 2;')
            :wikitext('[[File:icon_属性_' .. data["属性"] .. '.png|35px|link=]]')
    end
    
    -- 角色名称
    html:tag('div')
        :attr('style', 'position: absolute; left: 30px; top: 180px; color: white; font-size: 68px; font-weight: bold; text-shadow: 2px 2px 5px #000000; z-index: 2;')
        :wikitext(data["名称"] or "")
    
    -- 声优信息
    if data["声优_韩"] or data["声优_日"] or data["声优_英"] then
        html:tag('div')
            :attr('style', 'position: absolute; left: 30px; top: 270px; z-index: 2;')
            :wikitext('[[File:icon_CV.png|28px|link=]]')
        
        local cvText = (data["声优_韩"] or "") .. "（韩）、" .. (data["声优_日"] or "") .. "（日）、" .. (data["声优_英"] or "") .. "（英）"
        html:tag('div')
            :attr('style', 'position: absolute; left: 63px; top: 273px; z-index: 2; color: #9d9e9e;')
            :wikitext(cvText)
    end
    
    -- 信息框架
    local infoItems = {
        {label = "实装日期", value = data["实装日期"] or "", width = "310px"},
        {label = "种族", value = data["种族"] or "", width = "100px"},
        {label = "生日", value = data["生日"] or "", width = "100px"},
        {label = "异能", value = data["异能"] or "", width = "100px"},
        {label = "所属势力", value = data["所属势力"] or "", width = "100px"}
    }
    
    local yPos = 300
    for i, item in ipairs(infoItems) do
        if i == 1 then
            -- 实装日期标签
            html:tag('div')
                :attr('style', 'position: absolute; left: 30px; top: ' .. yPos .. 'px; background-color: rgba(0, 0, 0, 0.5); color: white; text-align: center; padding:2px 5px 2px 5px; width: 100px; height:30px; z-index: 2;')
                :wikitext(item.label)
            html:tag('div')
                :attr('style', 'position: absolute; left: 135px; top: ' .. yPos .. 'px; background-color: rgba(0, 0, 0, 0.5); color: white; text-align: center; padding:2px 5px 2px 5px; width: ' .. item.width .. '; height:30px; z-index: 2;')
                :wikitext(item.value)
        elseif i == 2 or i == 4 then
            -- 种族和异能
            html:tag('div')
                :attr('style', 'position: absolute; left: 30px; top: ' .. yPos .. 'px; background-color: rgba(0, 0, 0, 0.5); color: white; text-align: center; padding:2px 5px 2px 5px; width: 100px; height:30px; z-index: 2;')
                :wikitext(item.label)
            html:tag('div')
                :attr('style', 'position: absolute; left: 135px; top: ' .. yPos .. 'px; background-color: rgba(0, 0, 0, 0.5); color: white; text-align: center; padding:2px 5px 2px 5px; width: ' .. item.width .. '; height:30px; z-index: 2;')
                :wikitext(item.value)
        else
            -- 生日和所属势力
            html:tag('div')
                :attr('style', 'position: absolute; left: 240px; top: ' .. (yPos - 35) .. 'px; background-color: rgba(0, 0, 0, 0.5); color: white; text-align: center; padding:2px 5px 2px 5px; width: 100px; height:30px; z-index: 2;')
                :wikitext(item.label)
            html:tag('div')
                :attr('style', 'position: absolute; left: 345px; top: ' .. (yPos - 35) .. 'px; background-color: rgba(0, 0, 0, 0.5); color: white; text-align: center; padding:2px 5px 2px 5px; width: ' .. item.width .. '; height:30px; z-index: 2;')
                :wikitext(item.value)
        end
        if i ~= 3 and i ~= 5 then
            yPos = yPos + 35
        end
    end
    
    -- 档案信息
    if data["档案"] and data["档案"] ~= "" then
        html:tag('div')
            :attr('style', 'position: absolute; left: 30px; top: 405px; background-color: rgba(0, 0, 0, 0.5); color: white; text-align: left; padding:2px 5px 2px 5px; width: 415px; height:auto; z-index: 2;')
            :wikitext(data["档案"])
    end
    
    -- 右侧属性列表
    local attributes = {
        {name = "攻击力", key = "攻击力_1级"},
        {name = "防御力", key = "防御力_1级"},
        {name = "HP", key = "HP_1级"},
        {name = "暴击率", key = "暴击率_1级"},
        {name = "暴击伤害", key = "暴击伤害_1级"},
        {name = "弱点伤害率", key = "弱点伤害率_1级"},
        {name = "自我意识恢复力", key = "自我意识恢复力_1级"},
        {name = "热情属性伤害量", key = "热情属性伤害量_1级"},
        {name = "正义属性伤害量", key = "正义属性伤害量_1级"},
        {name = "秩序属性伤害量", key = "秩序属性伤害量_1级"},
        {name = "本能属性伤害量", key = "本能属性伤害量_1级"},
        {name = "虚无属性伤害量", key = "虚无属性伤害量_1级"},
        {name = "额外伤害量", key = "额外伤害量_1级"},
        {name = "持续伤害量", key = "持续伤害量_1级"},
        {name = "分析", key = "分析_1级"}
    }

    local startY = 100
    for i, attr in ipairs(attributes) do
        local value = data[attr.key] or "0"
        -- 只显示有值的属性
        if value ~= "" then
            local yPosition = startY + (i - 1) * 30
            local isEven = (i % 2 == 0)
            local bgStyle = isEven and "background-color: #dfe1e3; border-radius: 3px 0px 0px 3px;" or ""
            local bgStyleRight = isEven and "background-color: #dfe1e3; border-radius: 0px 3px 3px 0px;" or ""
            
            -- 属性名称
            html:tag('div')
                :attr('style', 'position: absolute; right: 150px; top: ' .. yPosition .. 'px; width: 200px; height: 25px; ' .. bgStyle .. ' color: #666666; padding-left: 5px; z-index: 2;')
                :wikitext(attr.name)
            
            -- 属性值
            html:tag('div')
                :attr('style', 'position: absolute; right: 50px; top: ' .. yPosition .. 'px; width: 100px; height: 25px; ' .. bgStyleRight .. ' color: #666666; padding-right: 5px; z-index: 2; text-align: right;')
                :wikitext(value)
        end
    end
    
    -- 立绘图片容器
    local portraitContainer = html:tag('div')
        :attr('id', 'portrait-container')
        :attr('style', 'position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: 100%; max-width: 100%; z-index: 1;')
    
    -- 生成所有可用的立绘图片
    for i, tab in ipairs(tabs) do
        local imageDiv = portraitContainer:tag('div')
            :attr('class', 'portrait-image')
            :attr('data-index', tostring(tab.index))
            :attr('style', i == 1 and 'display: block;' or 'display: none;')
        
        if data[tab.key] and data[tab.key] ~= "" then
            imageDiv:wikitext('[[File:' .. data[tab.key] .. '|center|link=]]')
        end
    end
    
    -- 添加JavaScript代码
    local script = html:tag('script')
    script:wikitext([[
function switchPortrait(index) {
    // 隐藏所有图片
    var images = document.querySelectorAll('.portrait-image');
    images.forEach(function(img) {
        img.style.display = 'none';
    });
    
    // 显示选中的图片
    var selectedImage = document.querySelector('.portrait-image[data-index="' + index + '"]');
    if (selectedImage) {
        selectedImage.style.display = 'block';
    }
    
    // 更新标签页状态
    var tabs = document.querySelectorAll('.resp-tabs-list li');
    tabs.forEach(function(tab, i) {
        if (i === index) {
            tab.classList.add('active');
        } else {
            tab.classList.remove('active');
        }
    });
}
]])
    
    return html
end

-- 创建移动端布局
function p.createMobileLayout(data, tabs)
    local html = mw.html.create('div')
    
    -- 角色名称标题
    html:tag('h2')
        :attr('style', 'text-align: center; margin-bottom: 20px;')
        :wikitext(data["名称"] or "")
    
    -- 立绘切换区域
    local tabsContainer = html:tag('div')
        :attr('class', 'main-line-wrap')
        :attr('style', 'margin-bottom: 20px;')
    
    local respTabs = tabsContainer:tag('div')
        :attr('class', 'resp-tabs')
    
    -- 标签页列表
    local tabsList = respTabs:tag('ul')
        :attr('class', 'resp-tabs-list clearfix')
        :attr('style', 'margin:15px 5px')
    
    -- 生成标签页
    for i, tab in ipairs(tabs) do
        local li = tabsList:tag('li')
            :attr('class', i == 1 and 'active czn-list-style' or 'czn-list-style')
        
        li:tag('span')
            :attr('class', 'tab-panel')
            :wikitext(tab.name)
    end
    
    -- 标签页内容容器
    local tabsContentContainer = respTabs:tag('div')
        :attr('class', 'resp-tabs-container')
    
    -- 生成所有可用的立绘图片内容
    for i, tab in ipairs(tabs) do
        local tabContent = tabsContentContainer:tag('div')
            :attr('class', 'resp-tab-content')
            :attr('style', i == 1 and 'display:block; text-align: center;' or 'text-align: center;')
        
        if data[tab.key] and data[tab.key] ~= "" then
            tabContent:wikitext('[[File:' .. data[tab.key] .. '|300px|center|link=]]')
        end
    end
    
    -- 基本信息表格
    html:tag('h3'):wikitext('基本信息')
    
    local basicInfoTable = html:tag('table')
        :attr('class', 'wikitable')
        :attr('style', 'width: 100%; margin-bottom: 20px;')
    
    -- 职业和属性行
    if data["职业"] or data["属性"] then
        local row1 = basicInfoTable:tag('tr')
        row1:tag('th'):wikitext('职业')
        row1:tag('th'):wikitext('属性')
        
        local row2 = basicInfoTable:tag('tr')
        row2:tag('td'):wikitext(data["职业"] and ('[[File:icon_职业_' .. data["职业"] .. '.png|35px|link=]] ' .. data["职业"]) or "")
        row2:tag('td'):wikitext(data["属性"] and ('[[File:icon_属性_' .. data["属性"] .. '.png|35px|link=]] ' .. data["属性"]) or "")
    end
    
    -- 种族和生日行
    if data["种族"] or data["生日"] then
        local row3 = basicInfoTable:tag('tr')
        row3:tag('th'):wikitext('种族')
        row3:tag('th'):wikitext('生日')
        
        local row4 = basicInfoTable:tag('tr')
        row4:tag('td'):wikitext(data["种族"] or "")
        row4:tag('td'):wikitext(data["生日"] or "")
    end
    
    -- 异能和所属势力行
    if data["异能"] or data["所属势力"] then
        local row5 = basicInfoTable:tag('tr')
        row5:tag('th'):wikitext('异能')
        row5:tag('th'):wikitext('所属势力')
        
        local row6 = basicInfoTable:tag('tr')
        row6:tag('td'):wikitext(data["异能"] or "")
        row6:tag('td'):wikitext(data["所属势力"] or "")
    end
    
    -- 实装日期行
    if data["实装日期"] and data["实装日期"] ~= "" then
        local row7 = basicInfoTable:tag('tr')
        row7:tag('th'):attr('colspan', '2'):wikitext('实装日期')
        
        local row8 = basicInfoTable:tag('tr')
        row8:tag('td'):attr('colspan', '2'):wikitext(data["实装日期"])
    end
    
    -- 声优信息行
    if data["声优_韩"] or data["声优_日"] or data["声优_英"] then
        local row9 = basicInfoTable:tag('tr')
        row9:tag('th'):attr('colspan', '2'):wikitext('声优信息')
        
        local cvText = ""
        local cvParts = {}
        if data["声优_韩"] and data["声优_韩"] ~= "" then
            table.insert(cvParts, data["声优_韩"] .. "（韩）")
        end
        if data["声优_日"] and data["声优_日"] ~= "" then
            table.insert(cvParts, data["声优_日"] .. "（日）")
        end
        if data["声优_英"] and data["声优_英"] ~= "" then
            table.insert(cvParts, data["声优_英"] .. "（英）")
        end
        cvText = table.concat(cvParts, "、")
        
        local row10 = basicInfoTable:tag('tr')
        row10:tag('td'):attr('colspan', '2'):wikitext('[[File:icon_CV.png|28px|link=]] ' .. cvText)
    end
    
    -- 档案信息
    if data["档案"] and data["档案"] ~= "" then
        html:tag('h3'):wikitext('档案')
        html:tag('div')
            :attr('style', 'background-color: #f8f9fa; padding: 10px; border-left: 4px solid #0645ad; margin-bottom: 20px;')
            :wikitext(data["档案"])
    end
    
    -- 属性信息表格
    html:tag('h3'):wikitext('能力值 Lv.1')
    
    local attributes = {
        {name = "攻击力", key = "攻击力_1级"},
        {name = "防御力", key = "防御力_1级"},
        {name = "HP", key = "HP_1级"},
        {name = "暴击率", key = "暴击率_1级"},
        {name = "暴击伤害", key = "暴击伤害_1级"},
        {name = "弱点伤害率", key = "弱点伤害率_1级"},
        {name = "自我意识恢复力", key = "自我意识恢复力_1级"},
        {name = "热情属性伤害量", key = "热情属性伤害量_1级"},
        {name = "正义属性伤害量", key = "正义属性伤害量_1级"},
        {name = "秩序属性伤害量", key = "秩序属性伤害量_1级"},
        {name = "本能属性伤害量", key = "本能属性伤害量_1级"},
        {name = "虚无属性伤害量", key = "虚无属性伤害量_1级"},
        {name = "额外伤害量", key = "额外伤害量_1级"},
        {name = "持续伤害量", key = "持续伤害量_1级"},
        {name = "分析", key = "分析_1级"}
    }
    
    -- 检查是否有任何属性值
    local hasAttributes = false
    for _, attr in ipairs(attributes) do
        local value = data[attr.key] or "0"
        if value ~= "0" and value ~= "" then
            hasAttributes = true
            break
        end
    end
    
    if hasAttributes then
        local attributesTable = html:tag('table')
            :attr('class', 'wikitable')
            :attr('style', 'width: 100%;')
        
        -- 表头
        local headerRow = attributesTable:tag('tr')
        headerRow:tag('th'):wikitext('属性名称')
        headerRow:tag('th'):wikitext('数值')
        
        -- 属性行（只显示有值的属性）
        for _, attr in ipairs(attributes) do
            local value = data[attr.key] or "0"
            if value ~= "0" and value ~= "" then
                local attrRow = attributesTable:tag('tr')
                attrRow:tag('td'):wikitext(attr.name)
                attrRow:tag('td'):wikitext(value)
            end
        end
    end
    
    return html
end

return p