MediaWiki:Equipment.js
来自卡厄思梦境WIKI
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5。
(function() {
'use strict';
// 加载 CSS
mw.loader.load('/index.php?title=MediaWiki:Equipment.css&action=raw&ctype=text/css', 'text/css');
// 装备数据管理类
var EquipmentManager = {
currentData: {},
editingEquipment: null,
// 初始化
init: function() {
this.loadData();
this.renderUI();
this.bindEvents();
},
// 从模块加载数据
loadData: function() {
var self = this;
new mw.Api().get({
action: 'parse',
page: '模块:装备/data',
prop: 'wikitext'
}).done(function(data) {
if (data.parse && data.parse.wikitext) {
self.parseDataModule(data.parse.wikitext['*']);
}
});
},
// 解析 Lua 数据模块
parseDataModule: function(luaCode) {
var dataMatch = luaCode.match(/local data = \{([\s\S]*)\}\s*return/);
if (dataMatch) {
this.loadDataViaInvoke();
}
},
// 通过 scribunto 调用获取数据
loadDataViaInvoke: function() {
var self = this;
new mw.Api().get({
action: 'expandtemplates',
text: '{{#invoke:装备|getAllData}}',
prop: 'wikitext'
}).done(function(data) {
if (data.expandtemplates && data.expandtemplates.wikitext) {
try {
self.currentData = JSON.parse(data.expandtemplates.wikitext);
self.renderEquipmentList();
} catch(e) {
console.error('数据解析失败', e);
}
}
});
},
// 渲染界面
renderUI: function() {
var $container = $('#mw-content-text');
$container.empty();
var html = '<div class="equipment-manager">' +
'<div class="eq-header">' +
'<div class="eq-title">装备数据管理</div>' +
'<div class="eq-btn eq-btn-primary" id="eq-add-new">新增装备</div>' +
'</div>' +
'<div class="eq-list" id="equipment-list"></div>' +
'<div class="eq-modal" id="eq-modal" style="display:none;">' +
'<div class="eq-modal-content">' +
'<div class="eq-modal-header">' +
'<div class="eq-modal-title" id="modal-title">新增装备</div>' +
'<div class="eq-modal-close" id="modal-close">×</div>' +
'</div>' +
'<div class="eq-modal-body">' +
this.renderForm() +
'</div>' +
'<div class="eq-modal-footer">' +
'<div class="eq-btn eq-btn-secondary" id="eq-cancel">取消</div>' +
'<div class="eq-btn eq-btn-primary" id="eq-save">保存</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="eq-modal-backdrop" id="modal-backdrop" style="display:none;"></div>' +
'</div>';
$container.html(html);
},
// 渲染表单
renderForm: function() {
return '<div class="eq-form">' +
'<div class="eq-form-group">' +
'<div class="eq-label">装备名称:</div>' +
'<div class="eq-input" contenteditable="true" id="eq-name" data-placeholder="请输入装备名称"></div>' +
'</div>' +
'<div class="eq-form-group">' +
'<div class="eq-label">遗物ID:</div>' +
'<div class="eq-input" contenteditable="true" id="eq-relic-id" data-placeholder="例如: 1001"></div>' +
'</div>' +
'<div class="eq-form-group">' +
'<div class="eq-label">地区:</div>' +
'<div class="eq-select" id="eq-area">' +
'<div class="eq-select-display" data-value="">请选择地区</div>' +
'<div class="eq-select-dropdown">' +
'<div class="eq-select-option" data-value="蓝壶">蓝壶</div>' +
'<div class="eq-select-option" data-value="双星之影">双星之影</div>' +
'<div class="eq-select-option" data-value="雾之都市">雾之都市</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="eq-form-group">' +
'<div class="eq-label">稀有度:</div>' +
'<div class="eq-select" id="eq-rarity">' +
'<div class="eq-select-display" data-value="">请选择稀有度</div>' +
'<div class="eq-select-dropdown">' +
'<div class="eq-select-option" data-value="蓝">蓝</div>' +
'<div class="eq-select-option" data-value="紫">紫</div>' +
'<div class="eq-select-option" data-value="金">金</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="eq-form-group">' +
'<div class="eq-label">类型:</div>' +
'<div class="eq-select" id="eq-type">' +
'<div class="eq-select-display" data-value="">请选择类型</div>' +
'<div class="eq-select-dropdown">' +
'<div class="eq-select-option" data-value="武器">武器</div>' +
'<div class="eq-select-option" data-value="装甲">装甲</div>' +
'<div class="eq-select-option" data-value="戒指">戒指</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="eq-form-group">' +
'<div class="eq-label">属性类型:</div>' +
'<div class="eq-input" contenteditable="true" id="eq-value-type" data-placeholder="例如: 攻击力"></div>' +
'</div>' +
'<div class="eq-form-group">' +
'<div class="eq-label">TAG (用逗号分隔):</div>' +
'<div class="eq-input" contenteditable="true" id="eq-tag" data-placeholder="例如: 输出,爆发"></div>' +
'</div>' +
'<div class="eq-form-section">' +
'<div class="eq-section-title">等级数据</div>' +
this.renderLevelInputs() +
'</div>' +
'</div>';
},
// 渲染等级输入
renderLevelInputs: function() {
var html = '';
for (var i = 1; i <= 5; i++) {
html += '<div class="eq-level-group">' +
'<div class="eq-level-title">★' + i + '</div>' +
'<div class="eq-form-row">' +
'<div class="eq-form-col">' +
'<div class="eq-label-small">属性值:</div>' +
'<div class="eq-input-small" contenteditable="true" id="eq-value-' + i + '" data-placeholder="数值"></div>' +
'</div>' +
'<div class="eq-form-col">' +
'<div class="eq-label-small">描述:</div>' +
'<div class="eq-input-small" contenteditable="true" id="eq-desc-' + i + '" data-placeholder="效果描述"></div>' +
'</div>' +
'</div>' +
'</div>';
}
return html;
},
// 渲染装备列表
renderEquipmentList: function() {
var $list = $('#equipment-list');
$list.empty();
var html = '<div class="eq-table">' +
'<div class="eq-table-header">' +
'<div class="eq-th eq-th-image">图片</div>' +
'<div class="eq-th eq-th-name">名称</div>' +
'<div class="eq-th">地区</div>' +
'<div class="eq-th">稀有度</div>' +
'<div class="eq-th">类型</div>' +
'<div class="eq-th">TAG</div>' +
'<div class="eq-th eq-th-actions">操作</div>' +
'</div>' +
'<div class="eq-table-body">';
for (var name in this.currentData) {
if (name === 'base') continue;
var equip = this.currentData[name];
var base = equip.base;
var relicId = base.art ? base.art.replace('.png', '') : 'unknown';
html += '<div class="eq-table-row" data-equipment="' + name + '">' +
'<div class="eq-td eq-td-image">' +
'<img src="/images/' + relicId + '.png" alt="' + name + '" class="eq-thumbnail">' +
'</div>' +
'<div class="eq-td eq-td-name">' + name + '</div>' +
'<div class="eq-td">' + (base.area || '') + '</div>' +
'<div class="eq-td"><span class="eq-rarity eq-rarity-' + base.rarity + '">' + base.rarity + '</span></div>' +
'<div class="eq-td">' + (base.type || '') + '</div>' +
'<div class="eq-td">' + (base.tag || '') + '</div>' +
'<div class="eq-td eq-td-actions">' +
'<div class="eq-btn-small eq-btn-edit" data-name="' + name + '">编辑</div>' +
'<div class="eq-btn-small eq-btn-delete" data-name="' + name + '">删除</div>' +
'</div>' +
'</div>';
}
html += '</div></div>';
$list.html(html);
},
// 绑定事件
bindEvents: function() {
var self = this;
// 新增按钮
$(document).on('click', '#eq-add-new', function() {
self.openModal('add');
});
// 编辑按钮
$(document).on('click', '.eq-btn-edit', function() {
var name = $(this).data('name');
self.openModal('edit', name);
});
// 删除按钮
$(document).on('click', '.eq-btn-delete', function() {
var name = $(this).data('name');
self.deleteEquipment(name);
});
// 关闭模态框
$(document).on('click', '#modal-close, #eq-cancel, #modal-backdrop', function() {
self.closeModal();
});
// 保存按钮
$(document).on('click', '#eq-save', function() {
self.saveEquipment();
});
// 自定义下拉框
$(document).on('click', '.eq-select-display', function(e) {
e.stopPropagation();
$(this).siblings('.eq-select-dropdown').toggle();
});
$(document).on('click', '.eq-select-option', function() {
var value = $(this).data('value');
var text = $(this).text();
$(this).closest('.eq-select').find('.eq-select-display')
.text(text)
.attr('data-value', value);
$(this).parent().hide();
});
$(document).on('click', function() {
$('.eq-select-dropdown').hide();
});
},
// 打开模态框
openModal: function(mode, equipmentName) {
this.editingEquipment = equipmentName;
if (mode === 'edit' && equipmentName) {
$('#modal-title').text('编辑装备');
this.fillFormData(equipmentName);
} else {
$('#modal-title').text('新增装备');
this.clearForm();
}
$('#eq-modal, #modal-backdrop').fadeIn(200);
},
// 关闭模态框
closeModal: function() {
$('#eq-modal, #modal-backdrop').fadeOut(200);
this.editingEquipment = null;
},
// 填充表单数据
fillFormData: function(name) {
var equip = this.currentData[name];
if (!equip) return;
var base = equip.base;
$('#eq-name').text(name);
$('#eq-relic-id').text(base.art ? base.art.replace('.png', '') : '');
$('#eq-area .eq-select-display').text(base.area).attr('data-value', base.area);
$('#eq-rarity .eq-select-display').text(base.rarity).attr('data-value', base.rarity);
$('#eq-type .eq-select-display').text(base.type).attr('data-value', base.type);
$('#eq-value-type').text(base.value_type || '');
$('#eq-tag').text(base.tag || '');
for (var i = 1; i <= 5; i++) {
if (equip[i]) {
$('#eq-value-' + i).text(equip[i].value || '');
$('#eq-desc-' + i).text(equip[i].desc_global || '');
}
}
},
// 清空表单
clearForm: function() {
$('.eq-input, .eq-input-small').text('');
$('.eq-select-display').text('请选择').attr('data-value', '');
$('#eq-area .eq-select-display').text('请选择地区');
$('#eq-rarity .eq-select-display').text('请选择稀有度');
$('#eq-type .eq-select-display').text('请选择类型');
},
// 获取表单数据
getFormData: function() {
var name = $('#eq-name').text().trim();
var relicId = $('#eq-relic-id').text().trim();
var area = $('#eq-area .eq-select-display').attr('data-value');
var rarity = $('#eq-rarity .eq-select-display').attr('data-value');
var type = $('#eq-type .eq-select-display').attr('data-value');
var valueType = $('#eq-value-type').text().trim();
var tag = $('#eq-tag').text().trim();
// 验证必填项
if (!name) {
mw.notify('请输入装备名称', {type: 'error'});
return null;
}
if (!relicId) {
mw.notify('请输入遗物ID', {type: 'error'});
return null;
}
if (!area) {
mw.notify('请选择地区', {type: 'error'});
return null;
}
if (!rarity) {
mw.notify('请选择稀有度', {type: 'error'});
return null;
}
if (!type) {
mw.notify('请选择类型', {type: 'error'});
return null;
}
var data = {
name: name,
base: {
area: area,
rarity: rarity,
type: type,
value_type: valueType,
tag: tag,
art: relicId + '.png'
},
levels: {}
};
// 获取等级数据
for (var i = 1; i <= 5; i++) {
var value = $('#eq-value-' + i).text().trim();
var desc = $('#eq-desc-' + i).text().trim();
if (value || desc) {
data.levels[i] = {
value: value,
desc_global: desc
};
}
}
return data;
},
// 保存装备
saveEquipment: function() {
var self = this;
var formData = this.getFormData();
if (!formData) return;
// 检查是否重名(新增模式下)
if (!this.editingEquipment && this.currentData[formData.name]) {
mw.notify('装备名称已存在', {type: 'error'});
return;
}
// 更新本地数据
var equipmentData = {
base: formData.base
};
for (var level in formData.levels) {
equipmentData[level] = formData.levels[level];
}
// 如果是编辑模式且名称改变,删除旧条目
if (this.editingEquipment && this.editingEquipment !== formData.name) {
delete this.currentData[this.editingEquipment];
}
this.currentData[formData.name] = equipmentData;
// 生成 Lua 代码
var luaCode = this.generateLuaCode();
// 保存到模块
this.saveToModule(luaCode);
},
// 删除装备
deleteEquipment: function(name) {
var self = this;
if (!confirm('确定要删除装备"' + name + '"吗?')) {
return;
}
delete this.currentData[name];
// 生成 Lua 代码
var luaCode = this.generateLuaCode();
// 保存到模块
this.saveToModule(luaCode);
},
// 生成 Lua 代码
generateLuaCode: function() {
var lua = 'local data = {\n';
// 按名称排序
var names = Object.keys(this.currentData).sort();
for (var i = 0; i < names.length; i++) {
var name = names[i];
var equip = this.currentData[name];
lua += ' ["' + this.escapeLua(name) + '"] = {\n';
lua += ' base = {\n';
lua += ' area = "' + this.escapeLua(equip.base.area) + '",\n';
lua += ' rarity = "' + this.escapeLua(equip.base.rarity) + '",\n';
lua += ' type = "' + this.escapeLua(equip.base.type) + '",\n';
lua += ' value_type = "' + this.escapeLua(equip.base.value_type || '') + '",\n';
lua += ' tag = "' + this.escapeLua(equip.base.tag || '') + '",\n';
lua += ' art = "' + this.escapeLua(equip.base.art) + '"\n';
lua += ' },\n';
// 添加等级数据
for (var level = 1; level <= 5; level++) {
if (equip[level]) {
lua += ' ["' + level + '"] = {\n';
lua += ' value = "' + this.escapeLua(equip[level].value || '') + '",\n';
lua += ' desc_global = "' + this.escapeLua(equip[level].desc_global || '') + '"\n';
lua += ' },\n';
}
}
lua += ' },\n';
}
lua += '}\n\nreturn data';
return lua;
},
// 转义 Lua 字符串
escapeLua: function(str) {
if (!str) return '';
return str.replace(/\\/g, '\\\\')
.replace(/"/g, '\\"')
.replace(/\n/g, '\\n')
.replace(/\r/g, '\\r');
},
// 保存到模块
saveToModule: function(luaCode) {
var self = this;
// 显示保存中状态
mw.notify('正在保存...', {type: 'info'});
new mw.Api().postWithToken('csrf', {
action: 'edit',
title: '模块:装备/data',
text: luaCode,
summary: '通过装备管理器更新数据',
minor: true
}).done(function(data) {
if (data.edit && data.edit.result === 'Success') {
mw.notify('保存成功!', {type: 'success'});
self.closeModal();
self.renderEquipmentList();
} else {
mw.notify('保存失败', {type: 'error'});
}
}).fail(function(code, result) {
mw.notify('保存失败: ' + (result.error ? result.error.info : '未知错误'), {type: 'error'});
});
}
};
// 页面加载完成后初始化
$(function() {
EquipmentManager.init();
});
})();