MWI角色名片插件 - 一键生成角色名片
目前為
// ==UserScript==
// @name MWI角色名片插件
// @namespace http://tampermonkey.net/
// @version 1.2.0
// @license MIT
// @description MWI角色名片插件 - 一键生成角色名片
// @author Windoge
// @match https://www.milkywayidle.com/*
// @grant none
// @run-at document-idle
// @require https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
// ==/UserScript==
(function() {
'use strict';
// 使用立即执行函数避免全局变量污染
const MWICharacterCard = (function() {
const isZH = navigator.language.includes('zh');
// 检测移动端
function isMobile() {
return window.innerWidth <= 768 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
// 简化的SVG创建工具
class CharacterCardSVGTool {
constructor() {
this.isLoaded = true; // 简化：直接设为true
this.spriteSheets = {
items: '/static/media/items_sprite.6d12eb9d.svg',
skills: '/static/media/skills_sprite.57eb3a30.svg',
abilities: '/static/media/abilities_sprite.38932ac3.svg',
misc: '/static/media/misc_sprite.6b3198dc.svg'
};
}
async loadSpriteSheets() {
console.log('SVG sprite系统已初始化');
console.log('Sprite文件路径:', this.spriteSheets);
this.isLoaded = true;
return true;
}
// 创建MWI风格的SVG图标 - 直接返回HTML字符串
createSVGIcon(itemId, options = {}) {
const { className = 'Icon_icon__2LtL_', title = itemId, type = 'items' } = options;
const svgHref = `${this.spriteSheets[type]}#${itemId}`;
// 收集调试信息
if (!state.debugInfo.firstSvgPath) {
state.debugInfo.firstSvgPath = svgHref;
}
state.debugInfo.iconCount++;
return `<svg role="img" aria-label="${title}" class="${className}" width="100%" height="100%">
<use href="${svgHref}"></use>
</svg>`;
}
// 后备图标
createFallbackIcon(itemId, className, title) {
const text = itemId.length > 6 ? itemId.substring(0, 6) : itemId;
return `<div class="${className}" title="${title}" style="
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
background: #4a90e2; color: white; font-size: 10px; border-radius: 4px;
">${text}</div>`;
}
hasIcon() { return this.isLoaded; }
}
// 使用闭包管理状态，避免全局变量
const state = {
svgTool: new CharacterCardSVGTool(),
debugInfo: {
firstSvgPath: null,
iconCount: 0
},
observer: null,
timer: null,
isInitialized: false
};
// 简化的SVG图标创建函数
function createSvgIcon(itemHrid, iconType = null, className = 'Icon_icon__2LtL_') {
// 自动检测图标类型和提取itemId
let type = 'items';
let itemId = itemHrid;
if (itemHrid.startsWith('/items/')) {
type = 'items';
itemId = itemHrid.replace('/items/', '');
} else if (itemHrid.startsWith('/abilities/')) {
type = 'abilities';
itemId = itemHrid.replace('/abilities/', '');
} else if (itemHrid.startsWith('/skills/')) {
type = 'skills';
itemId = itemHrid.replace('/skills/', '');
} else if (itemHrid.startsWith('/misc/')) {
type = 'misc';
itemId = itemHrid.replace('/misc/', '');
} else {
// 对于基础属性图标
if (['stamina', 'intelligence', 'attack', 'power', 'defense', 'ranged', 'magic'].includes(itemHrid)) {
type = 'skills';
itemId = itemHrid;
} else {
itemId = itemHrid.replace("/items/", "").replace("/abilities/", "").replace("/skills/", "").replace("/misc/", "");
}
}
// 如果手动指定了类型，使用指定的类型
if (iconType) {
type = iconType;
}
// 使用SVG工具创建图标
if (state.svgTool && state.svgTool.isLoaded) {
return state.svgTool.createSVGIcon(itemId, {
className: className,
title: itemId,
type: type
});
}
// 后备方案
return state.svgTool.createFallbackIcon(itemId, className, itemId);
}
function generateEquipmentPanel(characterObj) {
// MWI装备槽位映射 - 使用grid位置
const equipmentSlots = {
"/item_locations/back": { row: 1, col: 1, name: "背部" },
"/item_locations/head": { row: 1, col: 2, name: "头部" },
"/item_locations/main_hand": { row: 2, col: 1, name: "主手" },
"/item_locations/body": { row: 2, col: 2, name: "身体" },
"/item_locations/off_hand": { row: 2, col: 3, name: "副手" },
"/item_locations/hands": { row: 3, col: 1, name: "手部" },
"/item_locations/legs": { row: 3, col: 2, name: "腿部" },
"/item_locations/pouch": { row: 3, col: 3, name: "口袋" },
"/item_locations/feet": { row: 4, col: 2, name: "脚部" },
"/item_locations/neck": { row: 1, col: 5, name: "项链" },
"/item_locations/earrings": { row: 2, col: 5, name: "耳环" },
"/item_locations/ring": { row: 3, col: 5, name: "戒指" },
"/item_locations/trinket": { row: 4, col: 5, name: "饰品" },
"/item_locations/two_hand": { row: 2, col: 1, name: "双手" }
};
let items = characterObj.equipment || characterObj.characterItems || [];
const equipmentMap = {};
let hasTwoHandWeapon = false;
// 构建装备映射
items.forEach(item => {
const slotInfo = equipmentSlots[item.itemLocationHrid];
if (slotInfo) {
equipmentMap[item.itemLocationHrid] = item;
if (item.itemLocationHrid === "/item_locations/two_hand") hasTwoHandWeapon = true;
}
});
// 创建MWI风格的装备面板
let html = '<div class="equipment-panel">';
html += `<div class="panel-title">${isZH ? '装备' : 'Equipment'}</div>`;
html += '<div class="EquipmentPanel_playerModel__3LRB6" style="margin-top:40px">';
// 遍历所有装备槽位
Object.entries(equipmentSlots).forEach(([slotHrid, slotInfo]) => {
// 如果有双手武器，跳过单手主手槽
if (hasTwoHandWeapon && slotHrid === "/item_locations/main_hand") {
return;
}
// 如果没有双手武器，跳过双手槽
if (!hasTwoHandWeapon && slotHrid === "/item_locations/two_hand") {
return;
}
const item = equipmentMap[slotHrid];
html += `<div style="grid-row-start: ${slotInfo.row}; grid-column-start: ${slotInfo.col};">`;
html += '<div class="ItemSelector_itemSelector__2eTV6">';
html += '<div class="ItemSelector_itemContainer__3olqe">';
html += '<div class="Item_itemContainer__x7kH1">';
html += '<div>';
if (item) {
// 有装备的槽位
const itemName = item.itemHrid.replace('/items/', '');
const enhancementLevel = item.enhancementLevel || 0;
html += '<div class="Item_item__2De2O Item_clickable__3viV6" style="position: relative;">';
html += '<div class="Item_iconContainer__5z7j4">';
html += createSvgIcon(item.itemHrid, 'items'); // 使用MWI的Icon类
html += '</div>';
// 强化等级 - 完全按照MWI原生格式
if (enhancementLevel > 0) {
html += `<div class="Item_enhancementLevel__19g-e enhancementProcessed enhancementLevel_${enhancementLevel}" style="z-index: 9">+${enhancementLevel}</div>`;
}
html += '</div>';
} else {
// 空装备槽
html += '<div class="Item_item__2De2O" style="position: relative; opacity: 0.3;">';
html += '<div class="Item_iconContainer__5z7j4">';
html += `<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #999; font-size: 10px;">${isZH ? '空' : 'Empty'}</div>`;
html += '</div>';
html += '</div>';
}
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
});
html += '</div>'; // EquipmentPanel_playerModel__3LRB6
html += '</div>'; // equipment-panel
return html;
}
// 从页面获取战斗等级
function getCombatLevelFromPage() {
try {
// 查找包含战斗等级信息的元素
const overviewTab = document.querySelector('.SharableProfile_overviewTab__W4dCV');
if (overviewTab) {
// 查找包含"战斗等级:"文本的div元素
const combatLevelDiv = Array.from(overviewTab.querySelectorAll('div')).find(div =>
div.textContent && div.textContent.includes('战斗等级:')
);
if (combatLevelDiv) {
// 提取数字
const match = combatLevelDiv.textContent.match(/战斗等级:\s*(\d+)/);
if (match && match[1]) {
return parseInt(match[1]);
}
}
}
} catch (error) {
console.log('获取战斗等级失败:', error);
}
return 0;
}
function generateAbilityPanel(characterObj) {
const abilityMapping = [
{ key: "staminaLevel", name: isZH ? "耐力" : "Stamina", icon: "stamina" },
{ key: "intelligenceLevel", name: isZH ? "智力" : "Intelligence", icon: "intelligence" },
{ key: "attackLevel", name: isZH ? "攻击" : "Attack", icon: "attack" },
{ key: "powerLevel", name: isZH ? "力量" : "Power", icon: "power" },
{ key: "defenseLevel", name: isZH ? "防御" : "Defense", icon: "defense" },
{ key: "rangedLevel", name: isZH ? "远程" : "Ranged", icon: "ranged" },
{ key: "magicLevel", name: isZH ? "魔法" : "Magic", icon: "magic" }
];
let html = '<div class="ability-panel">';
html += `<div class="panel-title">${isZH ? '属性等级' : 'Abilities'}</div><div class="ability-list">`;
// 添加战斗等级作为第一行
const combatLevel = getCombatLevelFromPage();
html += `<div class="ability-row">
<div class="ability-icon">
<svg role="img" aria-label="combat" class="Icon_icon__2LtL_" width="100%" height="100%">
<use href="/static/media/misc_sprite.6b3198dc.svg#combat"></use>
</svg>
</div>
<span style="flex: 1;">${isZH ? '战斗' : 'Combat'}</span>
<span class="level">Lv.${combatLevel}</span>
</div>`;
abilityMapping.forEach(ability => {
let level = 0;
if (characterObj[ability.key]) {
level = characterObj[ability.key];
} else if (characterObj.characterSkills) {
const skillKey = ability.key.replace('Level', '');
const skill = characterObj.characterSkills.find(skill => skill.skillHrid.includes(`/skills/${skillKey}`));
level = skill ? skill.level : 0;
}
html += `<div class="ability-row">
<div class="ability-icon">${createSvgIcon(ability.icon, 'skills')}</div>
<span style="flex: 1;">${ability.name}</span>
<span class="level">Lv.${level}</span>
</div>`;
});
return html + '</div></div>';
}
function generateSkillPanel(data) {
let abilities = data.abilities || data.characterSkills || [];
// 获取所有技能能力（过滤掉战斗技能以外的）
const combatSkills = abilities
.filter(ability => ability.abilityHrid && ability.abilityHrid.startsWith("/abilities/"))
.sort((a, b) => b.level - a.level); // 按等级降序排列
let html = '<div class="skill-panel">';
html += `<div class="panel-title">${isZH ? '技能等级' : 'Skills'}</div>`;
// 使用MWI原生的技能网格容器
html += '<div class="AbilitiesPanel_abilityGrid__-p-VF">';
// 渲染每个技能
combatSkills.forEach(ability => {
const abilityId = ability.abilityHrid.replace('/abilities/', '');
html += '<div>';
html += '<div class="Ability_ability__1njrh Ability_clickable__w9HcM">';
html += '<div class="Ability_iconContainer__3syNQ">';
html += createSvgIcon(ability.abilityHrid, 'abilities'); // 使用完整的hrid
html += '</div>';
html += `<div class="Ability_level__1L-do">Lv.${ability.level}</div>`;
html += '</div>';
html += '</div>';
});
html += '</div>'; // AbilitiesPanel_abilityGrid__-p-VF
html += '</div>'; // skill-panel
return html;
}
function generateHousePanel(data) {
const houseRoomsMapping = [
{ hrid: "/house_rooms/dining_room", icon: "stamina", name: isZH ? "餐厅" : "Dining Room" },
{ hrid: "/house_rooms/library", icon: "intelligence", name: isZH ? "图书馆" : "Library" },
{ hrid: "/house_rooms/dojo", icon: "attack", name: isZH ? "道场" : "Dojo" },
{ hrid: "/house_rooms/gym", icon: "power", name: isZH ? "健身房" : "Gym" },
{ hrid: "/house_rooms/armory", icon: "defense", name: isZH ? "军械库" : "Armory" },
{ hrid: "/house_rooms/archery_range", icon: "ranged", name: isZH ? "射箭场" : "Archery Range" },
{ hrid: "/house_rooms/mystical_study", icon: "magic", name: isZH ? "神秘研究室" : "Mystical Study" }
];
let houseRoomMap = data.houseRooms || data.characterHouseRoomMap || {};
let html = '<div class="house-panel">';
html += `<div class="panel-title">${isZH ? '房屋等级' : 'House Rooms'}</div>`;
// 使用和技能面板相同的MWI原生结构
html += '<div class="AbilitiesPanel_abilityGrid__-p-VF">';
// 遍历所有房屋类型
houseRoomsMapping.forEach(houseRoom => {
let level = 0;
if (houseRoomMap[houseRoom.hrid]) {
level = typeof houseRoomMap[houseRoom.hrid] === 'object'
? houseRoomMap[houseRoom.hrid].level || 0
: houseRoomMap[houseRoom.hrid];
}
// 使用和技能相同的MWI原生结构
html += '<div>';
html += '<div class="Ability_ability__1njrh Ability_clickable__w9HcM">';
html += '<div class="Ability_iconContainer__3syNQ">';
html += createSvgIcon(houseRoom.icon, 'skills'); // 使用标准的Icon类
html += '</div>';
// 为8级房屋添加特殊显示
let levelText = '';
let levelClass = 'Ability_level__1L-do';
if (level === 8) {
levelText = `Lv.8`;
levelClass += ' house-max-level';
} else if (level > 0) {
levelText = `Lv.${level}`;
} else {
levelText = isZH ? '未建造' : 'Lv.0';
}
html += `<div class="${levelClass}">${levelText}</div>`;
html += '</div>';
html += '</div>';
});
html += '</div>'; // AbilitiesPanel_abilityGrid__-p-VF
html += '</div>'; // house-panel
return html;
}
function generateCharacterCard(data, characterName, characterNameElement = null) {
let characterObj = data.player || data;
const equipmentPanel = generateEquipmentPanel(characterObj);
// 创建标题栏内容
let headerContent = '';
if (characterNameElement) {
// 使用从页面复制的角色信息元素
headerContent = characterNameElement;
} else {
// 后备方案：使用简单的角色名
headerContent = `<h2>${characterName}</h2>`;
}
return `
<div id="character-card" class="character-card">
<div class="card-header">${headerContent}</div>
<div class="card-content">
${equipmentPanel}
${generateAbilityPanel(characterObj)}
${generateSkillPanel(data)}
${generateHousePanel(data)}
</div>
</div>
`;
}
function createModalStyles() {
const style = document.createElement('style');
style.textContent = `
.character-card-modal {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.8); z-index: 10000; display: flex;
justify-content: center; align-items: center; padding: 16px; box-sizing: border-box;
}
.modal-content {
background: white; border-radius: 15px; padding: 20px;
max-width: 90vw; max-height: 90vh; overflow: auto; position: relative;
}
.close-modal {
position: absolute; top: 10px; right: 15px; background: none;
border: none; font-size: 24px; cursor: pointer; color: #666; z-index: 1;
}
.close-modal:hover { color: #000; }
.character-card {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
border: 2px solid #4a90e2; border-radius: 15px; padding: 20px; color: white;
font-family: 'Arial', sans-serif; max-width: 800px; margin: 0 auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.card-header {
text-align: center; margin-bottom: 20px; border-bottom: 2px solid #4a90e2; padding-bottom: 10px;
}
.card-header h2 {
margin: 0; color: #4a90e2; font-size: 24px; text-shadow: 0 0 10px rgba(74, 144, 226, 0.5);
}
/* 角色信息元素在名片中的样式 */
.card-header .CharacterName_characterName__2FqyZ {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
}
.card-header .CharacterName_chatIcon__22lxV {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.card-header .CharacterName_name__1amXp {
font-size: 20px;
font-weight: bold;
text-shadow: 0 0 10px rgba(74, 144, 226, 0.5);
}
.card-header .CharacterName_gameMode__2Pvw8 {
font-size: 14px;
opacity: 0.8;
}
.card-content {
display: grid; grid-template-columns: 1fr 0.7fr; grid-template-rows: auto 1fr; gap: 20px;
}
.equipment-panel, .house-panel, .ability-panel, .skill-panel {
background: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 6px;
border: 1px solid rgba(74, 144, 226, 0.3);
}
.panel-title {
margin: 0 0 15px 0; color: #4a90e2; font-size: 16px;
border-bottom: 1px solid rgba(74, 144, 226, 0.3); padding-bottom: 5px; text-align: center;
}
.equipment-panel { grid-column: 1; grid-row: 1; }
/* 只为模态框内的装备面板添加网格布局，不影响游戏原生UI */
.character-card .EquipmentPanel_playerModel__3LRB6 {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(4, auto);
gap: 8px;
padding: 10px;
max-width: 350px;
margin: 0 auto;
}
/* 确保装备槽的基本布局 */
.character-card .ItemSelector_itemSelector__2eTV6 {
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
}
/* 技能面板样式 - 仅作用于角色名片内 */
.character-card .AbilitiesPanel_abilityGrid__-p-VF {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
gap: 8px;
padding: 10px;
max-height: 200px;
overflow-y: auto;
}
/* 技能项容器 */
.character-card .Ability_ability__1njrh {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 70px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(74, 144, 226, 0.3);
transition: all 0.2s ease;
}
.character-card .Ability_ability__1njrh.Ability_clickable__w9HcM:hover {
background: rgba(74, 144, 226, 0.1);
border-color: #4a90e2;
transform: scale(1.05);
}
/* 技能图标容器 */
.character-card .Ability_iconContainer__3syNQ {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
/* 技能等级文字 */
.character-card .Ability_level__1L-do {
font-size: 12px;
font-weight: bold;
color: #fff;
text-align: center;
}
/* 房屋最高等级特殊样式 */
.character-card .house-max-level {
color: #ff8c00 !important;
font-weight: bold;
text-shadow: 0 0 4px rgba(255, 140, 0, 0.5);
}
.ability-panel { grid-column: 2; grid-row: 1; }
.ability-list { flex: 1; }
.ability-row {
display: flex; align-items: center; margin-bottom: 8px; padding: 4px; border-radius: 4px;
}
.ability-icon {
width: 30px; height: 30px; margin-right: 10px; display: flex;
align-items: center; justify-content: center;
}
.house-panel {
grid-column: 1;
grid-row: 2;
}
.skill-panel {
grid-column: 2;
grid-row: 2;
}
.level { color: #fff; font-weight: bold; }
@media (max-width: 768px) {
/* 移动端模态框调整 */
.character-card-modal {
padding: 8px;
}
.modal-content {
max-width: 95vw;
max-height: 95vh;
padding: 12px;
overflow-y: auto;
}
/* 移动端单列布局 */
.card-content {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
gap: 12px;
}
.equipment-panel { grid-column: 1; grid-row: 1; }
.ability-panel { grid-column: 1; grid-row: 2; }
.house-panel { grid-column: 1; grid-row: 3; }
.skill-panel { grid-column: 1; grid-row: 4; }
/* 移动端面板样式调整 */
.equipment-panel, .house-panel, .ability-panel, .skill-panel {
padding: 10px;
margin-bottom: 4px;
}
/* 移动端装备面板调整 - 保持游戏原始布局 */
.character-card .EquipmentPanel_playerModel__3LRB6 {
gap: 6px;
padding: 8px;
max-width: 100%;
}
/* 移动端技能面板调整 - 每行3个 */
.character-card .ability-panel .AbilitiesPanel_abilityGrid__-p-VF {
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
gap: 10px;
padding: 12px;
max-height: 220px;
}
/* 移动端房屋面板调整 - 每行4个 */
.character-card .house-panel .AbilitiesPanel_abilityGrid__-p-VF {
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 10px;
max-height: 180px;
}
/* 移动端技能卡片间距调整 */
.character-card .ability-panel .Ability_ability__1njrh {
margin: 2px;
min-height: 75px;
}
/* 移动端房屋卡片间距调整 - 4列布局 */
.character-card .house-panel .Ability_ability__1njrh {
margin: 1px;
min-height: 65px;
font-size: 11px;
}
/* 移动端面板标题调整 */
.panel-title {
font-size: 14px;
margin-bottom: 8px;
padding-bottom: 4px;
}
/* 移动端字体调整 */
.character-card {
font-size: 12px;
}
/* 移动端指示横幅调整 */
.instruction-banner {
padding: 8px;
font-size: 14px;
}
}
.instruction-banner {
background: #17a2b8; color: white; padding: 10px; border-radius: 5px;
margin-bottom: 10px; font-weight: bold; text-align: center;
}
.download-section {
text-align: center; margin-bottom: 15px;
}
.download-card-btn {
background: #28a745; color: white; border: none; padding: 8px 16px;
border-radius: 5px; font-size: 14px; font-weight: bold; cursor: pointer;
transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.download-card-btn:hover:not(:disabled) {
background: #218838; transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.download-card-btn:disabled {
background: #6c757d; cursor: not-allowed; transform: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* 仅为角色名片内的SVG图标添加优化，不影响游戏原生UI */
.character-card .Icon_icon__2LtL_ {
width: 100%;
height: 100%;
filter: drop-shadow(0 0 2px rgba(0,0,0,0.3));
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: pixelated;
}
`;
document.head.appendChild(style);
}
async function readClipboardData() {
try {
const text = await navigator.clipboard.readText();
return text;
} catch (error) {
console.log('无法读取剪贴板:', error);
return null;
}
}
function isValidCharacterData(data) {
if (!data || typeof data !== 'object') return false;
// 检查新格式 (player对象)
if (data.player && (
data.player.equipment ||
data.player.characterItems ||
data.player.staminaLevel !== undefined ||
data.player.name
)) {
return true;
}
// 检查旧格式
if (data.character && (data.characterSkills || data.characterItems)) {
return true;
}
// 检查是否直接包含关键字段
if (data.equipment || data.characterItems || data.characterSkills) {
return true;
}
// 检查是否包含技能等级字段
if (data.staminaLevel !== undefined || data.intelligenceLevel !== undefined ||
data.attackLevel !== undefined || data.powerLevel !== undefined) {
return true;
}
// 检查是否包含房屋数据
if (data.houseRooms || data.characterHouseRoomMap) {
return true;
}
// 检查是否包含能力数据
if (data.abilities && Array.isArray(data.abilities)) {
return true;
}
return false;
}
// 获取SVG sprite内容
async function loadSpriteContent(spriteUrl) {
try {
const response = await fetch(spriteUrl);
const svgText = await response.text();
const parser = new DOMParser();
const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
return svgDoc.documentElement;
} catch (error) {
console.warn('无法加载sprite:', spriteUrl, error);
return null;
}
}
// 下载名片功能
async function downloadCharacterCard() {
try {
// 获取名片元素
const cardElement = document.getElementById('character-card');
if (!cardElement) {
alert(isZH ? '未找到名片元素' : 'Character card element not found');
return;
}
// 显示下载提示
const downloadBtn = document.querySelector('.download-card-btn');
const originalText = downloadBtn.textContent;
downloadBtn.textContent = isZH ? '生成中...' : 'Generating...';
downloadBtn.disabled = true;
// 克隆名片元素用于处理
const clonedCard = cardElement.cloneNode(true);
// 预加载所有sprite内容
const spriteContents = {};
const spriteUrls = Object.values(state.svgTool.spriteSheets);
// 检查是否需要加载聊天图标sprite
const needsChatSprite = clonedCard.querySelector('svg use[href*="chat_icons_sprite"]');
if (needsChatSprite) {
spriteUrls.push('/static/media/chat_icons_sprite.2a8f0be2.svg');
}
for (const url of spriteUrls) {
const content = await loadSpriteContent(url);
if (content) {
spriteContents[url] = content;
}
}
// 替换所有使用<use>的SVG为实际内容
const useElements = clonedCard.querySelectorAll('svg use');
useElements.forEach((useElement, index) => {
try {
const href = useElement.getAttribute('href');
const svg = useElement.closest('svg');
if (href && href.includes('#')) {
const [spriteUrl, symbolId] = href.split('#');
const spriteContent = spriteContents[spriteUrl];
if (spriteContent && symbolId) {
const symbol = spriteContent.querySelector(`#${symbolId}`);
if (symbol) {
// 创建新的SVG内容
const svg = useElement.closest('svg');
if (svg) {
const symbolClone = symbol.cloneNode(true);
// 清空原SVG内容并添加symbol内容
svg.innerHTML = '';
// 添加fill="none"属性解决填充问题
svg.setAttribute('fill', 'none');
// 如果symbol有viewBox，应用到svg
const viewBox = symbol.getAttribute('viewBox');
if (viewBox) {
svg.setAttribute('viewBox', viewBox);
}
// 复制symbol的所有子元素到svg
while (symbolClone.firstChild) {
svg.appendChild(symbolClone.firstChild);
}
}
} else {
// 如果找不到symbol，创建文字替代
const svg = useElement.closest('svg');
if (svg) {
svg.innerHTML = `<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="white" font-size="10">${symbolId.substring(0, 3)}</text>`;
}
}
} else {
// 如果找不到spriteContent，创建简单替代
const svg = useElement.closest('svg');
if (svg && symbolId) {
const shortText = symbolId.length > 2 ? symbolId.substring(0, 2) : symbolId;
svg.innerHTML = `<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="white" font-size="8">${shortText}</text>`;
}
}
}
} catch (error) {
console.warn('处理SVG元素时出错:', error);
}
});
// 简单处理角色名 - 移除上级div的class使其显示为白色
const characterNameDiv = clonedCard.querySelector('.CharacterName_name__1amXp');
if (characterNameDiv) {
characterNameDiv.className = ''; // 清除所有class，使角色名显示为白色
}
// 检测是否为移动端设备
const isMobileDevice = isMobile();
// 内联关键样式（避免linear-gradient问题）
const styleElement = document.createElement('style');
// 根据设备类型选择不同的样式
if (isMobileDevice) {
// 移动端样式 - 单列布局
styleElement.textContent = `
.character-card {
background: #1a1a2e !important;
border: 2px solid #4a90e2 !important;
border-radius: 15px !important;
padding: 15px !important;
color: white !important;
font-family: Arial, sans-serif !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
max-width: 100% !important;
width: 350px !important;
}
.card-header {
text-align: center !important;
margin-bottom: 15px !important;
border-bottom: 2px solid #4a90e2 !important;
padding-bottom: 8px !important;
}
.card-content {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto auto auto !important;
gap: 15px !important;
}
.equipment-panel { grid-column: 1 !important; grid-row: 1 !important; }
.ability-panel { grid-column: 1 !important; grid-row: 2 !important; }
.house-panel { grid-column: 1 !important; grid-row: 3 !important; }
.skill-panel { grid-column: 1 !important; grid-row: 4 !important; }
.equipment-panel, .house-panel, .ability-panel, .skill-panel {
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 10px !important;
padding: 10px !important;
margin-bottom: 4px !important;
border: 1px solid rgba(74, 144, 226, 0.3) !important;
}
.panel-title {
margin: 0 0 10px 0 !important;
color: #4a90e2 !important;
font-size: 14px !important;
border-bottom: 1px solid rgba(74, 144, 226, 0.3) !important;
padding-bottom: 4px !important;
text-align: center !important;
}
.EquipmentPanel_playerModel__3LRB6 {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
grid-template-rows: repeat(4, auto) !important;
gap: 6px !important;
padding: 8px !important;
max-width: 100% !important;
margin: 0 auto !important;
}
/* 技能面板 - 每行3个 */
.ability-panel .AbilitiesPanel_abilityGrid__-p-VF {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) !important;
gap: 10px !important;
padding: 12px !important;
max-height: 220px !important;
overflow-y: auto !important;
}
/* 房屋面板 - 每行4个 */
.house-panel .AbilitiesPanel_abilityGrid__-p-VF {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
padding: 10px !important;
max-height: 180px !important;
overflow-y: auto !important;
}
/* 技能卡片样式 */
.ability-panel .Ability_ability__1njrh {
margin: 2px !important;
min-height: 75px !important;
}
/* 房屋卡片样式 - 4列布局 */
.house-panel .Ability_ability__1njrh {
margin: 1px !important;
min-height: 65px !important;
font-size: 11px !important;
}
.level { color: #fff !important; font-weight: bold !important; font-size: 12px !important; }
svg { width: 100% !important; height: 100% !important; }
`;
} else {
// 桌面端样式 - 双列布局
styleElement.textContent = `
.character-card {
background: #1a1a2e !important;
border: 2px solid #4a90e2 !important;
border-radius: 15px !important;
padding: 20px !important;
color: white !important;
font-family: Arial, sans-serif !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
.card-header {
text-align: center !important;
margin-bottom: 20px !important;
border-bottom: 2px solid #4a90e2 !important;
padding-bottom: 10px !important;
}
.card-content {
display: grid !important;
grid-template-columns: 1fr 0.7fr !important;
grid-template-rows: auto 1fr !important;
gap: 20px !important;
}
.equipment-panel { grid-column: 1 !important; grid-row: 1 !important; }
.ability-panel { grid-column: 2 !important; grid-row: 1 !important; }
.house-panel { grid-column: 1 !important; grid-row: 2 !important; }
.skill-panel { grid-column: 2 !important; grid-row: 2 !important; }
.equipment-panel, .house-panel, .ability-panel, .skill-panel {
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 10px !important;
padding: 15px !important;
border: 1px solid rgba(74, 144, 226, 0.3) !important;
}
.panel-title {
margin: 0 0 15px 0 !important;
color: #4a90e2 !important;
font-size: 16px !important;
border-bottom: 1px solid rgba(74, 144, 226, 0.3) !important;
padding-bottom: 5px !important;
text-align: center !important;
}
.EquipmentPanel_playerModel__3LRB6 {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
grid-template-rows: repeat(4, auto) !important;
gap: 8px !important;
padding: 10px !important;
max-width: 350px !important;
margin: 0 auto !important;
}
.AbilitiesPanel_abilityGrid__-p-VF {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)) !important;
gap: 8px !important;
padding: 10px !important;
max-height: 200px !important;
overflow-y: auto !important;
}
.level { color: #fff !important; font-weight: bold !important; }
svg { width: 100% !important; height: 100% !important; }
`;
}
clonedCard.insertBefore(styleElement, clonedCard.firstChild);
// 创建临时容器
const tempContainer = document.createElement('div');
tempContainer.style.position = 'absolute';
tempContainer.style.left = '-9999px';
tempContainer.style.top = '-9999px';
tempContainer.appendChild(clonedCard);
document.body.appendChild(tempContainer);
// 配置html2canvas选项（根据设备类型调整）
const options = {
backgroundColor: '#1a1a2e', // 使用纯色背景代替渐变
scale: isMobileDevice ? 1.5 : 2, // 移动端使用较小的缩放比例
useCORS: true,
allowTaint: true,
foreignObjectRendering: false,
width: isMobileDevice ? 350 : cardElement.offsetWidth, // 移动端使用固定宽度
height: isMobileDevice ? undefined : cardElement.offsetHeight, // 移动端自动计算高度
logging: false, // 关闭日志减少干扰
onclone: function(clonedDoc) {
try {
// 在克隆的文档中应用样式修复
const clonedCard = clonedDoc.querySelector('#character-card');
if (clonedCard) {
if (isMobileDevice) {
// 移动端样式修复
clonedCard.style.background = '#1a1a2e';
clonedCard.style.border = '2px solid #4a90e2';
clonedCard.style.borderRadius = '15px';
clonedCard.style.padding = '15px';
clonedCard.style.color = 'white';
clonedCard.style.fontFamily = 'Arial, sans-serif';
clonedCard.style.width = '350px';
clonedCard.style.maxWidth = '100%';
} else {
// 桌面端样式修复
clonedCard.style.background = '#1a1a2e';
clonedCard.style.border = '2px solid #4a90e2';
clonedCard.style.borderRadius = '15px';
clonedCard.style.padding = '20px';
clonedCard.style.color = 'white';
clonedCard.style.fontFamily = 'Arial, sans-serif';
}
// 确保所有文本都是白色
const allText = clonedCard.querySelectorAll('*');
allText.forEach(el => {
if (el.tagName !== 'SVG' && el.tagName !== 'USE') {
el.style.color = 'white';
}
});
}
} catch (error) {
console.warn('处理克隆文档时出错:', error);
}
}
};
// 生成画布
const canvas = await html2canvas(clonedCard, options);
// 清理临时容器
document.body.removeChild(tempContainer);
// 检查画布是否有内容
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
let hasContent = false;
// 检查是否有非透明像素
for (let i = 3; i < data.length; i += 4) {
if (data[i] > 0) {
hasContent = true;
break;
}
}
if (!hasContent) {
console.warn('主要下载方法生成的图片为空，尝试备用方法...');
// 使用更简单的方法重试
const simpleOptions = {
backgroundColor: '#1a1a2e',
scale: 1,
useCORS: false,
allowTaint: true,
logging: false,
width: cardElement.offsetWidth,
height: cardElement.offsetHeight
};
const simpleCanvas = await html2canvas(cardElement, simpleOptions);
const simpleCtx = simpleCanvas.getContext('2d');
const simpleImageData = simpleCtx.getImageData(0, 0, simpleCanvas.width, simpleCanvas.height);
const simpleData = simpleImageData.data;
let simpleHasContent = false;
// 检查备用方法是否有内容
for (let i = 3; i < simpleData.length; i += 4) {
if (simpleData[i] > 0) {
simpleHasContent = true;
break;
}
}
if (simpleHasContent) {
// 备用方法成功，使用备用画布
const link = document.createElement('a');
link.download = `MWI_Character_Card_${new Date().getTime()}.png`;
link.href = simpleCanvas.toDataURL('image/png', 1.0);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// 清理并恢复按钮状态
document.body.removeChild(tempContainer);
downloadBtn.textContent = originalText;
downloadBtn.disabled = false;
console.log('使用备用方法成功生成名片图片');
return;
} else {
throw new Error('生成的图片没有内容（主要方法和备用方法都失败）');
}
}
// 创建下载链接
const link = document.createElement('a');
link.download = `MWI_Character_Card_${new Date().getTime()}.png`;
link.href = canvas.toDataURL('image/png', 1.0);
// 触发下载
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// 恢复按钮状态
downloadBtn.textContent = originalText;
downloadBtn.disabled = false;
console.log('名片图片已生成并下载');
} catch (error) {
console.error('下载名片失败:', error);
alert(isZH ?
'下载名片失败\n\n错误信息: ' + error.message + '\n\n建议：请确保网络连接正常，并允许浏览器下载文件' :
'Failed to download character card\n\nError: ' + error.message + '\n\nSuggestion: Please ensure network connection and allow browser downloads');
// 恢复按钮状态
const downloadBtn = document.querySelector('.download-card-btn');
if (downloadBtn) {
downloadBtn.textContent = isZH ? '下载名片(Beta)' : 'Download Card(Beta)';
downloadBtn.disabled = false;
}
}
}
// 自动点击导出按钮的辅助函数
async function autoClickExportButton() {
try {
console.log('尝试自动点击导出按钮...');
// 查找导出按钮的多种可能选择器
const exportButtonSelectors = [
// 中文版本的按钮文本
'button:contains("导出人物到剪贴板")',
// 英文版本的按钮文本
'button:contains("Export to clipboard")',
];
let exportButton = null;
// 尝试通过按钮文本查找（中文和英文）
const allButtons = document.querySelectorAll('button');
for (const button of allButtons) {
const buttonText = button.textContent.trim();
if (buttonText.includes('导出人物到剪贴板') ||
buttonText.includes('Export to clipboard')) {
exportButton = button;
break;
}
}
// 如果通过文本没找到，尝试其他属性
if (!exportButton) {
for (const selector of exportButtonSelectors.slice(4)) { // 跳过contains选择器
try {
exportButton = document.querySelector(selector);
if (exportButton) {
console.log('通过选择器找到导出按钮:', selector);
break;
}
} catch (e) {
// 忽略选择器错误
}
}
}
if (!exportButton) {
console.log('未找到导出按钮，将直接尝试读取剪贴板');
return false;
}
// 检查按钮是否可点击
if (exportButton.disabled || exportButton.style.display === 'none') {
console.log('导出按钮不可用，将直接尝试读取剪贴板');
return false;
}
// 点击按钮
exportButton.click();
console.log('已点击导出按钮，等待数据导出...');
// 等待一段时间让数据导出到剪贴板
await new Promise(resolve => setTimeout(resolve, 500));
return true;
} catch (error) {
console.log('自动点击导出按钮失败:', error);
return false;
}
}
async function showCharacterCard() {
try {
// 先尝试自动点击导出按钮
const autoExportSuccess = await autoClickExportButton();
if (autoExportSuccess) {
console.log('自动导出成功，尝试读取剪贴板数据...');
} else {
console.log('自动导出失败或未找到按钮，直接尝试读取剪贴板数据...');
}
const clipboardText = await readClipboardData();
if (!clipboardText) {
const errorMessage = autoExportSuccess ?
(isZH ?
'已尝试自动导出，但无法读取剪贴板数据\n\n请确保：\n1. 允许浏览器访问剪贴板\n2. 等待导出完成后重试' :
'Auto export attempted, but cannot read clipboard data\n\nPlease ensure:\n1. Allow browser to access clipboard\n2. Wait for export to complete and retry'
) :
(isZH ?
'无法读取剪贴板数据\n\n请确保：\n1. 先点击"导出人物到剪贴板"按钮\n2. 允许浏览器访问剪贴板\n3. 剪贴板中有有效的角色数据' :
'Cannot read clipboard data\n\nPlease ensure:\n1. Click "Export to clipboard" button first\n2. Allow browser to access clipboard\n3. Valid character data in clipboard'
);
alert(errorMessage);
return;
}
console.log('剪贴板数据长度:', clipboardText.length);
let characterData;
try {
characterData = JSON.parse(clipboardText);
} catch (error) {
alert(isZH ?
'剪贴板中的数据不是有效的JSON格式\n\n请确保先点击"导出人物到剪贴板"按钮' :
'Data in clipboard is not valid JSON\n\nPlease ensure you clicked "Export to clipboard" button first');
return;
}
if (!isValidCharacterData(characterData)) {
alert(isZH ?
'剪贴板中的数据不包含有效的角色信息\n\n请确保使用MWI Tools的"导出人物到剪贴板"功能' :
'Data in clipboard does not contain valid character information\n\nPlease ensure you use MWI Tools "Export to clipboard" feature');
return;
}
console.log('检测到有效的角色数据:', characterData);
console.log('SVG图标加载状态:', state.svgTool.isLoaded ? '已加载' : '未加载');
// 重置调试信息
state.debugInfo.firstSvgPath = null;
state.debugInfo.iconCount = 0;
const characterName = characterData.player?.name || characterData.character?.name || (isZH ? '角色' : 'Character');
// 查找页面中的角色信息元素 - 获取最后一个
let characterNameElement = null;
const characterNameDivs = document.querySelectorAll('.CharacterName_characterName__2FqyZ');
if (characterNameDivs.length > 0) {
// 取最后一个元素
const lastCharacterNameDiv = characterNameDivs[characterNameDivs.length - 1];
characterNameElement = lastCharacterNameDiv.outerHTML;
console.log(`找到${characterNameDivs.length}个角色信息元素，使用最后一个（第${characterNameDivs.length}个）`);
} else {
console.log('未找到角色信息元素，将使用后备显示方式');
}
const modal = document.createElement('div');
modal.className = 'character-card-modal';
modal.innerHTML = `
<div class="modal-content">
<button class="close-modal">×</button>
<div class="instruction-banner">
${isZH ?
`MWI角色名片插件 v1.2.0` :
`MWI Character Card Plugin v1.2.0`
}
</div>
<div class="download-section">
<button class="download-card-btn">${isZH ? '下载名片(Beta)' : 'Download Card(Beta)'}</button>
</div>
${generateCharacterCard(characterData, characterName, characterNameElement)}
</div>
`;
modal.querySelector('.close-modal').onclick = () => document.body.removeChild(modal);
modal.querySelector('.download-card-btn').onclick = downloadCharacterCard;
modal.onclick = (e) => { if (e.target === modal) document.body.removeChild(modal); };
document.body.appendChild(modal);
} catch (error) {
console.error('生成角色名片失败:', error);
alert(isZH ?
'生成角色名片时发生错误\n\n错误信息: ' + error.message :
'Error occurred while generating character card\n\nError: ' + error.message);
}
}
function addCharacterCardButton() {
const checkElem = () => {
const selectedElement = document.querySelector(`div.SharableProfile_overviewTab__W4dCV`);
if (selectedElement) {
clearInterval(state.timer);
if (selectedElement.querySelector('.character-card-btn')) return;
const button = document.createElement("button");
button.className = 'character-card-btn';
button.textContent = isZH ? "查看角色名片" : "View Character Card";
button.style.cssText = `
border-radius: 6px; height: 24px; background-color: #17a2b8; color: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1); border: 0px; margin: 10px auto;
display: inline-block; padding: 0 16px; min-width: 140px; max-width: 180px;
font-size: 13px; cursor: pointer; transition: all 0.2s ease;
`;
// 添加hover效果
button.addEventListener('mouseenter', () => {
button.style.backgroundColor = '#138496';
button.style.transform = 'translateY(-1px)';
});
button.addEventListener('mouseleave', () => {
button.style.backgroundColor = '#17a2b8';
button.style.transform = 'translateY(0)';
});
button.onclick = () => {
showCharacterCard();
return false;
};
// 创建按钮容器并居中
const buttonContainer = document.createElement('div');
buttonContainer.style.cssText = 'text-align: center; margin-top: 10px;';
buttonContainer.appendChild(button);
// 插入按钮容器
selectedElement.appendChild(buttonContainer);
console.log('角色名片按钮已添加');
return false;
}
};
state.timer = setInterval(checkElem, 1000);
}
async function init() {
console.log('MWI角色名片插件 v1.2.0');
console.log('使用说明：');
console.log('1. 直接点击"查看角色名片"按钮（插件会自动尝试导出数据）');
console.log('2. 如果自动导出失败，请手动点击MWI Tools的"导出人物到剪贴板"按钮');
console.log('3. 系统将自动从剪贴板读取数据生成名片');
console.log('4. 下载选项：');
console.log(' • "下载名片(Beta)" - 自动转换为PNG图片下载');
createModalStyles();
const spritesLoaded = await state.svgTool.loadSpriteSheets();
console.log(`图标系统初始化${spritesLoaded ? '成功' : '失败'}，将使用${spritesLoaded ? 'MWI原版SVG图标' : '后备图标显示'}`);
if (spritesLoaded) {
console.log('SVG Sprite文件:', state.svgTool.spriteSheets);
}
addCharacterCardButton();
// 创建一个MutationObserver来监听body的子节点变化
state.observer = new MutationObserver((mutationsList, observer) => {
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
// 检查是否是SharableProfile_overviewTab__W4dCV的子节点变化
if (mutation.target.classList.contains('SharableProfile_overviewTab__W4dCV')) {
// 延迟执行，确保DOM更新完成
setTimeout(addCharacterCardButton, 100);
}
}
}
});
state.observer.observe(document.body, { childList: true, subtree: true });
}
// 清理函数
function cleanup() {
if (state.observer) {
state.observer.disconnect();
state.observer = null;
}
if (state.timer) {
clearInterval(state.timer);
state.timer = null;
}
}
// 在脚本卸载时清理
window.addEventListener('unload', cleanup);
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})(); // 结束立即执行函数
})();