提供运营与开发界面的互跳功能
// ==UserScript==
// @name 德鲁伊被强化了
// @namespace http://tampermonkey.net/
// @version 0.1.3
// @description 提供运营与开发界面的互跳功能
// @author 燕修
// @match http://insiopweb.stable.alipay.net/*
// @match https://insiopweb.alipay.com/*
// @icon https://www.google.com/s2/favicons?domain=alipay.net
// @require https://greasyfork.org/scripts/415581-jquery%E5%BA%93/code/jquery%E5%BA%93.js?version=866373
// @grant GM_setValue
// @grant GM_getValue
// @license GNU AGPLv3
// ==/UserScript==
// 公用数据
//js模拟触发React DOM点击
function simulateReactClick(element) {
['mousedown', 'click', 'mouseup'].forEach(mouseEventType=>element.dispatchEvent(new MouseEvent(mouseEventType,{
view: window,
bubbles: true,
cancelable: true,
buttons: 1
})));
}
var url = document.location.href;
var modeMap = {
scene: '运营场景管理',
sceneEdit: '运营场景配置',
// queryCode 有意义
adminScene: '开发场景管理',
template: '开发模板管理',
// sceneCode sceneName
templateEdit: '开发模板配置',
// templateCode edit sceneCode sceneName
sceneModule: '运营场景模块管理',
// sceneCode sceneName keyword
sceneModuleEdit: '运营场景模块配置',
// queryCode 数字串
unsupport: '暂不支持',
}
var envMap = {
stable: '开发环境',
prod: '线上环境',
change: '修改地址',
}
var urlEnvMap = {
stable: 'http://insiopweb.stable.alipay.net',
prod: 'https://insiopweb.alipay.com'
}
var urlModeMap = {
sceneModuleEdit: '/scene/module/edit',
sceneModule: '/scene/module',
templateEdit: '/admin/template/edit',
template: '/admin/template',
adminScene: '/admin/scene',
sceneEdit: '/scene/edit',
scene: '/scene',
unsupport: '/'
}
var getStorage = () =>{
let _storage;
try {
_storage = JSON.parse(GM_getValue('$_POWER_DRUID_DATA','{}'));
} catch(e){}
return _storage;
}
var data = getStorage();
const moduleEditURLMap = data && data.moduleEditURLMap || {};
let logedVersion = data && data.logedVersion || 0 ;
var setStorage = () =>{
var data = {
moduleEditURLMap,
logedVersion
};
GM_setValue('$_POWER_DRUID_DATA',JSON.stringify(data));
}
var jumpAndSave = (url)=>{
setStorage();
url && (location.href = url);
}
var getMode = (url)=>{
for (let name of Object.keys(urlModeMap)) {
if (url.includes(urlModeMap[name]))
return name;
}
}
var mode, env, param;
var updateEnvModeParam = ()=>{
url = location.href;
mode = getMode(url);
env = url.includes('.stable.') ? 'stable' : 'prod';
}
updateEnvModeParam();
cc(mode, env, param)
// 公用数据结束
// 处理更新日志
const upgradeLog = [
{
version: 1,
log: '增加了跳转地址记录功能，现在输入一次可以记录模块编辑线上环境与线下环境跳转的地址，以解决他们querycode不相同的问题',
}
];
if( logedVersion < upgradeLog[0].version ){
alert(upgradeLog[0].log);
logedVersion = upgradeLog[0].version;
setStorage();
}
// 处理待发布
var dealPublic = (param)=>{
if (!param || !param.insiopPlusInfoModuleName)
return;
const _list = $(".ant-table-tbody tr");
for (let row in _list) {
const list = $(_list[row]).children();
for (let col in list) {
if (list[col].innerText === param.insiopPlusInfoModuleName) {
for (let col in list) {
if (list[col].innerText === '发布') {
simulateReactClick(list[col].firstChild.firstChild.firstChild);
}
}
}
}
}
}
// 注入逻辑
var injectPlugin = ()=>{
$("#insiop-plus-panel").remove();
$("#insiop-plus-css").length || loadCss();
loadPanel();
//给所有Dom提供触发方法
document.__proto__.__proto__.__proto__.reactClick = function() {
simulateReactClick(this);
}
}
var doAfterLoad = (fn,condition)=>{
var inject = setInterval(()=>{
if (condition ? condition() : $('[class^=contentRight]').length) {
fn();
clearInterval(inject);
}
}
, 100);
}
doAfterLoad(()=>{
injectPlugin()
}
)
if (mode === 'sceneModule') {
doAfterLoad(()=>{
var param = getQuery(url);
dealPublic(param);
}
, ()=>{
if ($('.ant-table-tbody tr').length > 1)
return true;
return false;
}
)
}
$(window).on('hashchange', ()=>{
updateEnvModeParam();
injectPlugin();
}
);
$(window).on('popstate', ()=>{
updateEnvModeParam();
injectPlugin();
}
);
// 注入逻辑结束
// 公用函数
function cc(...arg) {
console.log(' ========= ');
console.log('德鲁伊Plus[日志]：', ...arg);
console.log(' ========= ');
}
function getQuery(url) {
if (!url)
url = document.location.href + '';
let query = {};
if (url.indexOf("?") != -1) {
url = url.split("?")[1];
let str = decodeURI(url);
// 获取url中"?"符后的字串(包括问号)
const pairs = str.split("&");
for (let i = 0; i < pairs.length; i++) {
const pair = pairs[i].split("=");
query[pair[0]] = pair[1];
}
}
return query;
// 返回对象
}
function getPureUrl(url) {
url += '';
if (url.indexOf("?") != -1) {
return url.split("?")[0];
}
return url
}
function getUrlWithParam(url, param) {
let result = getPureUrl(url);
result += '?'
for (let name in param) {
result += `${name}=${param[name]}&`
}
result = result.substring(0, result.length - 1);
cc('result', result);
return result;
}
var urlReplace = (find,target)=>{
return document.location.href.replace(find, target)
}
var getUrlWithoutQueryCode = (url,param)=>{
url = getPureUrl(url);
delete param.queryCode;
url = getUrlWithParam(url, param);
return url;
}
var itemFn = {
switchEnv: (targetEnv)=>{
const ismoduleEdit = mode === 'sceneModuleEdit';
if(ismoduleEdit){
if(targetEnv == 'change'|| !moduleEditURLMap[url]){
const targetUrl = prompt('请输入要切换对应环境的地址，只需设置一次即可存储双向跳转');
moduleEditURLMap[url] = targetUrl;
moduleEditURLMap[targetUrl] = url;
}
jumpAndSave(moduleEditURLMap[url]);
return;
}
let targetUrl;
var param = getQuery(url);
if (targetEnv == 'stable') {
targetUrl = url.replace(urlEnvMap.prod, urlEnvMap.stable)
}
if (targetEnv == 'prod') {
targetUrl = url.replace(urlEnvMap.stable, urlEnvMap.prod)
}
jumpAndSave(targetUrl);
}
,
switchMode: (targetMode)=>{
var param = getQuery(url);
const targetUrl = getUrlWithParam(location.origin + urlModeMap[targetMode], param);
cc(targetUrl);
jumpAndSave(targetUrl);
}
,
handlePublish: ()=>{
var param = getQuery($('.ant-breadcrumb > span:nth-child(2) a').attr('href'));
param.insiopPlusInfoModuleName = $('.ant-breadcrumb > span:last-child>span>span').text();
const targetUrl = getUrlWithParam(location.origin + urlModeMap['sceneModule'], param);
cc(targetUrl);
jumpAndSave(targetUrl);
}
}
var itemBuild = (type,options)=>{
var temp;
if (!options.id) {
options.id = options.fnName
}
switch (type) {
case 'btn':
temp = `<button ##ID## ##CLASS##>${options.content}</button>`;
temp = temp.replace('##ID##', `id="${options.id}"`).replace('##CLASS##', 'class="ant-btn ant-btn-primary insiop-plus-middle"');
break;
case 'state':
temp = `<span class="ant-tag insiop-plus-tag ${options.color ? options.color : 'ant-tag-blue'}">${options.content}</span>${options.break ? '<br/>' : ''}`
break;
default:
case 'select':
temp = `<select ##ID## ##CLASS## > ${options.options.map(item=>`<option value="${item.value}" ${item.value === options.default ? 'selected' : ''}>${item.label}</option>`).join('')}
</select>`;
temp = temp.replace('##ID##', `id="${options.id}"`).replace('##CLASS##', 'class="ant-select-selection ant-select-selection--single insiop-plus-select"');
break;
}
return [temp, {
...options,
type
}];
}
// 公用函数 结束
// 业务逻辑
var loadCss = ()=>{
$('body').append(`<style id="insiop-plus-css">
#insiop-plus-panel{
height: 64px;
width: 400px;
background: #ffffff;
border: #e4e3e3 solid 1px;
padding: 13px;
border-radius: 0 0 10px 10px;
position: absolute;
top: 0;
right: 600px;
z-index: 9999;
display: flex;
justify-content: center;
flex-direction: row;
}
#insiop-plus-panel.stable{
width: 500px;
}
#insiop-plus-entry{
height: 20px;
width: 20px;
background: #ffffff;
border: #f1a700 solid 1px;
color: #f1a700;
position: absolute;
top: 0;
right: 593px;
text-align: center;
line-height: 15px;
z-index: 99999;
cursor: pointer;
}
.insiop-plus-tag {
height:20px;
}
.insiop-plus-select{
margin-right:20px;
min-width: 130px;
align-self: center;
}
#insiop-plus-close{
color: #333333;
position: absolute;
top: 0;
right: 10px;
cursor: pointer;
}
.insiop-plus-middle{
align-self: center;
}
</style>`);
}
var loadPanel = ()=>{
$('#insiop-plus-entry').remove();
const ismoduleEdit = mode === 'sceneModuleEdit';
const modeList = Object.keys(modeMap);
const modeOptions = modeList.map(item=>{
return {
value: item,
label: modeMap[item]
}
}
);
const envList = ismoduleEdit?['stable', 'prod','change']:['stable', 'prod'];
const envOptions = envList.map(item=>{
return {
value: item,
label: envMap[item]
}
}
);
const hasModuleEditMap = ismoduleEdit && url && !!moduleEditURLMap[url];
const panelItems = [// itemBuild('state',{content:modeMap[mode],color:'ant-tag-green'}),
// itemBuild('state',{content:envMap[env],break:true}),
itemBuild('select', {
fnName: 'switchMode',
id: 'switchMode',
options: modeOptions,
default: mode
}), itemBuild('select', {
fnName: 'switchEnv',
id: 'switchEnv',
options: envOptions,
default: env
}),hasModuleEditMap? itemBuild('state',{
content: '可切换',
color:'ant-tag-green insiop-plus-middle',
}) : ['', ''],
env === 'stable' && ismoduleEdit ? itemBuild('btn', {
content: '一键发布',
fnName: 'handlePublish'
}) : ['', ''], // itemBuild('btn',{content:'切换模式',fnName:'switchMode'}),
]
const panelEl = panelItems.map(item=>item[0]);
const isStable = env === 'stable';
$('body').append(`<div id="insiop-plus-panel" class="${isStable ? 'stable' : ''}">${panelEl.join('')}<div id="insiop-plus-close">X</div></div>`)
panelItems.map(item=>{
let {id, fnName, type} = item[1];
if (['btn'].includes(type)) {
$('#' + id).click(itemFn[fnName])
}
;if (['select'].includes(type)) {
$('#' + id).change(function() {
var value = $(this).children('option:selected').val();
itemFn[fnName](value);
});
}
}
);
$('#insiop-plus-close').click(()=>{
$('#insiop-plus-panel').remove();
$('body').append(`<div id="insiop-plus-entry">+</div>`);
$('#insiop-plus-entry').click(loadPanel);
}
)
}
// 业务逻辑结束