模块:战斗员/display/立绘

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

local p = {}

function p.display(frame)
    -- 获取角色名称参数，默认为蕾欧娜
    local characterName = frame.args[1] or "蕾欧娜"
    
    -- 动态加载对应角色的数据模块
    local dataModule = mw.loadData("模块:战斗员/" .. characterName)
    local data = dataModule.data
    
    -- 构建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')
    
    -- 收集所有可用的图片标签页
    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
    
    -- 生成标签页
    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
    
    -- 左侧内容 - 职业和属性图标
    html:tag('div')
        :attr('style', 'position: absolute; left: 32px; top: 155px; z-index: 2;')
        :wikitext('[[File:icon_职业_' .. (data["职业"] or "") .. '.png|35px|link=]]')
    
    html:tag('div')
        :attr('style', 'position: absolute; left: 72px; top: 155px; z-index: 2;')
        :wikitext('[[File:icon_属性_' .. (data["属性"] or "") .. '.png|35px|link=]]')
    
    -- 角色名称
    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 "")
    
    -- 声优信息
    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)
    
    -- 信息框架
    local infoItems = {
        {label = "实装日期", value = "", 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
    
    -- 档案信息
    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["档案"] or "")
    
    -- 右侧属性列表
    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 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: 150px; 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: 150px; height: 25px; ' .. bgStyleRight .. ' color: #666666; padding-right: 5px; z-index: 2; text-align: right;')
            :wikitext(data[attr.key] or "0")
    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 tostring(html)
end

return p