☰

lcap_tools

提供一些网页小工具，低代码开发专用

当前为 2024-07-26 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         lcap_tools
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2.0
  5. // @description  提供一些网页小工具，低代码开发专用
  6. // @author       yuan longhui
  7. // @match        *://*/*lcap*
  8. // @match        *://*/*uac*
  9. // @match        *://*/*ucs*
  10. // @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAbCAYAAACJISRoAAAABHNCSVQICAgIfAhkiAAAAQtJREFUSInt1c1Kw0AUhuFTF8kFTJnAFFwKYrHQUjE0Fq2iOxG8Bn/vQ8SbEMX+oLhQ9+raXom9g0lI8roQBDdmFi0q5FsOfOdZDIdTAZAZZ27WQImUyC8ju3v7Ug1q0tva+fZ+dn4h1aAmYacreZ7/PISCPL+8orRBacPbeAyAtZaFxTpKG27v7otGUIgAbGxuo7Th4OgEgMFwhNKGVjskTdPpIA+PTyhtCMw875MJ671PtD8YudTdkCzLWFmNUNpweHyK0oZGs02SJNNDAG76w6+/UdpweXXtWnVH4jim3mihtGFpuYm11hlx3hPP86S7FomISNQJxfd91+ofWcZ/g1SgPL8lUiIF+QCIeCJE+P0wYgAAAABJRU5ErkJggg==
  11. // @grant        GM_cookie
  12. // @grant        GM_addStyle
  13. // @grant        GM_setValue
  14. // @grant        GM_getValue
  15. // @grant        GM_deleteValue
  16. // @grant        GM_listValues
  17. // ==/UserScript==
  18.  
  19. (function () {
  20.     'use strict';
  21.     GM_addStyle(
  22.         `.y-panel {
  23.             width: 150px;
  24.             display: flex;
  25.             flex-direction: column;
  26.             position: fixed;
  27.             top: 32px;
  28.             right: -150px;
  29.             background-color: #a1d4e2;
  30.             border-radius: 3px;
  31.             transition: all 0.3s;
  32.             cursor: pointer;
  33.             z-index: 9999999999;
  34.           }
  35.         .y-panel:before {
  36.             width: 16px;
  37.             height: 40px;
  38.             position: absolute;
  39.             top: calc(50% - 24px);
  40.             left: -16px;
  41.             background-color: #a1d4e2;
  42.             border-radius: 36px 0px 0px 36px;
  43.             border: 1px solid #5ac6aa;
  44.             border-right: none;
  45.             content: \"\";
  46.             opacity: 0.8;
  47.             cursor: pointer;
  48.             z-index: 9999999999;
  49.         }
  50.         .y-panel:hover {
  51.             right: 0;
  52.         }
  53.         .y-panel > .y-panel-btn {
  54.             position: relative;
  55.             border: 1px solid #fff;
  56.             border-radius: 3px;
  57.             cursor: pointer;
  58.             font-size: 12px;
  59.             font-weight: bold;
  60.             margin: 4px 5px;
  61.             padding: 2px 5px;
  62.             text-align: center;
  63.             user-select: none;
  64.             background-color: #f0f0f0;
  65.             z-index: 9999999999;
  66.         }
  67.         .y-panel-btn:hover {
  68.             box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  69.         }
  70.         .y-panel-input {
  71.             height: 24px;
  72.             margin: 5px 4px;
  73.             border-radius: 3px;
  74.         }
  75.         .y-panel ::-webkit-input-placeholder {
  76.             color: rgba(0, 0, 0, 0.5);
  77.             padding-left: 5px;
  78.             font-size: 12px;
  79.         }
  80.         .y-panel-btn_delete {
  81.             padding: 0px 3px;
  82.             color: #000;
  83.             font-size: 10px;
  84.             position: absolute;
  85.             right: 3px;
  86.             top: 1px;
  87.             background-color: #88befc;
  88.         }
  89.         .y-panel-btn_delete:hover {
  90.             color: #fff;
  91.             background-color: #F3629C;
  92.         }`
  93.     );
  94.  
  95.     /**
  96.      * type BUTTON_TYPE = {
  97.      *   text: string
  98.      *   onclick: () => void
  99.      *   type?: 'function' | 'normal'
  100.      *   password?: string
  101.      *   isStored?: boolean
  102.      * }
  103.      */
  104.  
  105.     // 可以在这里配置常用工号，例如：
  106.     const name_map = ['袁龙辉10331290', '孟香君00268638', '郭绍云10286708']
  107.     //const name_map = []
  108.     // 本地存储的工号
  109.     const stored_name_map = GM_listValues().map(item => GM_getValue(item))
  110.  
  111.     function register(btns) {
  112.         const yPanel = document.querySelector('.y-panel')
  113.         if (yPanel) {
  114.             yPanel.parentNode.removeChild(yPanel)
  115.         }
  116.         const container = document.createElement("div");
  117.         container.className = "y-panel";
  118.         document.body.appendChild(container);
  119.         // 生成基本功能的按钮
  120.         generateBasicBtn(btns, container)
  121.         // 添加跳转按钮
  122.         addJumpBtn(container)
  123.         // 添加创建员工信息输入框
  124.         generateEmpInfoInput(container)
  125.     };
  126.  
  127.     // 功能1 点击按钮清空cookie并刷新页面
  128.     function func_clearCookies() {
  129.         const cookies = document.cookie.split(';').map(cookie => cookie.trim().split('=')[0]);
  130.         cookies.forEach(item => {
  131.             GM_cookie.delete({ name: item });
  132.         })
  133.         location.reload();
  134.     }
  135.  
  136.     // 功能2 切换cookie的语言
  137.     function func_changeLang() {
  138.         const currentUrl = new URL(window.location.href)
  139.         const params = currentUrl.searchParams
  140.         if (params.get('lang')) {
  141.             params.set('lang', params.get('lang') === 'zh' ? 'en' : 'zh')
  142.             window.history.replaceState({}, '', currentUrl)
  143.         }
  144.         const cookies = document.cookie.split(';').map(cookie => cookie.trim());
  145.         cookies.forEach(cookie => {
  146.             const [name, value] = cookie.trim().split('=')
  147.             if (name.includes('Language')) {
  148.                 GM_cookie.delete({ name });
  149.                 GM.cookie.set({
  150.                     name,
  151.                     value: value === 'zh_CN' ? 'en_US' : 'zh_CN'
  152.                 })
  153.             }
  154.         })
  155.         location.reload();
  156.     }
  157.  
  158.     // 功能3 登录
  159.     function func_login(empInfo, password = '1') {
  160.         const empNo = empInfo.match(/\d+/)[0] // 取出工号
  161.         const empNoInput = document.getElementById('input-loginname')
  162.         if (!empNoInput) return
  163.         const passwordInput = document.getElementById('input-password')
  164.         const login_btn = document.getElementsByClassName("el-button login-btn el-button--primary")[0]
  165.         var event = new Event('input', {
  166.             bubbles: true,
  167.             cancelable: true,
  168.         });
  169.         empNoInput.value = empNo
  170.         empNoInput.dispatchEvent(event);
  171.         passwordInput.value = password
  172.         passwordInput.dispatchEvent(event);
  173.         login_btn.click()
  174.     }
  175.  
  176.     // 在name新增删除后刷新面板
  177.     function util_refreshPanel() {
  178.         const current_stored_name_map = GM_listValues().map(item => GM_getValue(item))
  179.         const current_btn_map = getBasicBtnMap(current_stored_name_map)
  180.         register(current_btn_map)
  181.     }
  182.  
  183.     // 添加跳转按钮
  184.     function addJumpBtn(container) {
  185.         // 主机名、端口号、路径、查询参数、hash
  186.         const { hostname, port, pathname, searchParams, hash } = new URL(window.location.href);
  187.         // 获取url中#之后的内容
  188.         const hashParts = hash.slice(2).split('/')
  189.         // 获取url中的app、bizObject、page
  190.         const hashObject = {
  191.             app: hashParts.indexOf('app') !== -1 ? hashParts[hashParts.indexOf('app') + 1] : null,
  192.             bizObject: hashParts.indexOf('bizObject') !== -1 ? hashParts[hashParts.indexOf('bizObject') + 1] : null,
  193.             page: hashParts.indexOf('page') !== -1 ? hashParts[hashParts.indexOf('page') + 1] : null
  194.         }
  195.         const host = port ? `${hostname}:${port}` : hostname
  196.         // 微服务信息 如：zte-paas-lcap-frontendcli
  197.         const microServiceInfo = pathname.slice(1).split('/')[0]
  198.         // 设计态的微服务路径
  199.         const design_path = microServiceInfo.includes('frontendrenderdemo')
  200.             ? microServiceInfo.replace('frontendrenderdemo', 'frontendcli')
  201.             : microServiceInfo
  202.         // 布局、实体、应用主页url
  203.         const layoutUrl = `https://${host}/${design_path}/layout-designer.html?lang=zh`
  204.         const entityUrl = `https://${host}/${design_path}/entity-designer.html?lang=zh`
  205.         const mainPageUrl = `https://${host}/${design_path}/index.html#/platform/applicationdevelopment`
  206.         // 当前为布局设计器的运行态
  207.         if (searchParams.get('bizObject') && searchParams.get('bizObject') !== 'null') {
  208.             generateJumpBtn([
  209.                 {
  210.                     text: 'to->当前布局',
  211.                     title: '适用于表单页，列表页跳转之后需要切换一下布局',
  212.                     toUrl: `${layoutUrl}${hash}/bizObject/${searchParams.get('bizObject')}`
  213.                 },
  214.                 {
  215.                     text: 'to->当前实体',
  216.                     toUrl: `${entityUrl}#/app/${hashObject.app}/bizObject/${searchParams.get('bizObject')}`
  217.                 }
  218.             ], container)
  219.         }
  220.         // 当前为自定义页面的运行态
  221.         else if (searchParams.get('bizObject') === 'null') {
  222.             generateJumpBtn([
  223.                 {
  224.                     text: 'to->当前页面设计',
  225.                     toUrl: `${layoutUrl}#/app/${hashObject.app}/page/${hashObject.page}`
  226.                 }
  227.             ], container)
  228.         }
  229.         // 当前为布局设计器的设计态
  230.         else if (pathname.includes(`${design_path}/layout-designer.html`) && hashObject.bizObject) {
  231.             generateJumpBtn([
  232.                 {
  233.                     text: 'to->当前实体',
  234.                     toUrl: `${entityUrl}#/app/${hashObject.app}/bizObject/${hashObject.bizObject}`
  235.                 }
  236.             ], container)
  237.         }
  238.         // 当前为设计器的设计态或者运行态
  239.         if (hashObject.app) {
  240.             generateJumpBtn([
  241.                 { text: 'to->应用主页', toUrl: `${mainPageUrl}/${hashObject.app}` }
  242.             ], container)
  243.         }
  244.         // 当前不是本地环境，需要跳转本地环境调试
  245.         if (hostname !== 'local.zte.com.cn'
  246.             && (pathname.includes('zte-paas-lcap-frontendcli')
  247.                 || pathname.includes('zte-paas-lcap-frontendrenderdemo')
  248.                 || pathname.includes('zte-paas-lcap-promgr')
  249.                 || pathname.includes('zte-paas-lcap-promc'))) {
  250.             let url = new URL(window.location.href)
  251.             url.host = 'local.zte.com.cn';
  252.             if (pathname.includes('zte-paas-lcap-frontendcli')) {
  253.                 url.host += ':8080';
  254.             } else if (pathname.includes('zte-paas-lcap-frontendrenderdemo')) {
  255.                 url.host += ':8081';
  256.             } else if (pathname.includes('zte-paas-lcap-promgr')) {
  257.                 url.host += ':8086';
  258.             } else if (pathname.includes('zte-paas-lcap-promc')) {
  259.                 url.host += ':8082';
  260.             }
  261.             generateJumpBtn([
  262.                 { text: '切换到本地调试', toUrl: url.toString() }
  263.             ], container)
  264.         }
  265.     }
  266.  
  267.     // 创建基本的按钮（登录账号按钮等）
  268.     function generateBasicBtn(btns, container) {
  269.         btns.forEach(btn => {
  270.             const button = document.createElement("button");
  271.             button.textContent = btn.text;
  272.             button.className = "y-panel-btn";
  273.             button.onclick = btn.onclick;
  274.             container.appendChild(button);
  275.             if (btn.isStored) {
  276.                 const delete_btn = document.createElement("button");
  277.                 delete_btn.textContent = 'x';
  278.                 delete_btn.className = 'y-panel-btn_delete';
  279.                 delete_btn.onclick = (e) => {
  280.                     e.stopPropagation()
  281.                     GM_deleteValue(btn.text)
  282.                     util_refreshPanel()
  283.                 };
  284.                 button.appendChild(delete_btn);
  285.             }
  286.             if (btn.password) {
  287.                 button.title = btn?.password
  288.             }
  289.             button.style.backgroundColor = btn.type === 'function' && '#5ac6aa'
  290.         });
  291.     }
  292.  
  293.     // 创建额外的按钮（跳转按钮等）
  294.     function generateJumpBtn(btns, container) {
  295.         btns.forEach(btn => {
  296.             const button = document.createElement("button");
  297.             button.textContent = btn.text;
  298.             button.className = "y-panel-btn";
  299.             button.style.backgroundColor = '#5ac6aa'
  300.             button.onclick = () => {
  301.                 if (btn.toUrl) {
  302.                     // 不能使用window.open，低代码项目的代码里有判断是否是通过这个api打开的页面的判断逻辑，会导致接口报错(-_-)
  303.                     const a = document.createElement('a');
  304.                     a.href = btn.toUrl;
  305.                     a.target = '_blank';
  306.                     document.body.appendChild(a);
  307.                     a.click();
  308.                     document.body.removeChild(a);
  309.                 }
  310.             };
  311.             if (btn.title) {
  312.                 button.title = btn.title
  313.             }
  314.             container.appendChild(button);
  315.         })
  316.     }
  317.  
  318.     // 创建员工信息输入框
  319.     function generateEmpInfoInput(container) {
  320.         const empInfo_input = document.createElement("input");
  321.         empInfo_input.className = 'y-panel-input'
  322.         empInfo_input.placeholder = '输入姓名+工号, 回车~'
  323.         container.appendChild(empInfo_input);
  324.         empInfo_input.addEventListener('keydown', (event) => {
  325.             if (event.key === 'Enter') {
  326.                 // TODO 校验格式
  327.                 GM_setValue(empInfo_input.value, empInfo_input.value)
  328.                 func_login(empInfo_input.value)
  329.                 util_refreshPanel()
  330.             }
  331.         });
  332.     }
  333.  
  334.     // 构建基础按钮列表（基础功能+姓名）
  335.     function getBasicBtnMap(stored_name_map) {
  336.         return [
  337.             {
  338.                 text: '清空Cookie并刷新',
  339.                 type: 'function',
  340.                 onclick: () => func_clearCookies()
  341.             },
  342.             {
  343.                 text: '切换cookie的语言',
  344.                 type: 'function',
  345.                 onclick: () => func_changeLang()
  346.             },
  347.             // 可以通过修改func_login的参数，添加自定义的工号和密码
  348.             // {
  349.             //     text: '袁龙辉10331290',
  350.             //     password: '1',
  351.             //     onclick: () => func_login('袁龙辉10331290', '1')
  352.             // },
  353.             ...name_map.map(name => {
  354.                 return {
  355.                     text: name,
  356.                     password: '1',
  357.                     onclick: () => func_login(name)
  358.                 }
  359.             }),
  360.             ...stored_name_map.map(name => {
  361.                 return {
  362.                     text: name,
  363.                     isStored: true,
  364.                     password: '1',
  365.                     onclick: () => func_login(name)
  366.                 }
  367.             })
  368.         ]
  369.     }
  370.  
  371.     // 入口函数
  372.     (function init() {
  373.         const initial_btn_map = getBasicBtnMap(stored_name_map)
  374.         register(initial_btn_map)
  375.     })()
  376.  
  377. })();