☰

CKUIToolkit

A simple settings modal framework.

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/441653/1034229/CKUIToolkit.js 

  1. // ==UserScript==
  2. // @name         CKUIToolkit
  3. // @namespace    ckylin-script-lib-combined-ui-components
  4. // @version      1.2.1
  5. // @match        http://*
  6. // @match        https://*
  7. // // @require      https://greasyfork.org/scripts/429720-cktools/code/CKTools.js?version=1029952
  8. // @resource     popjs https://cdn.jsdelivr.net/gh/CKylinMC/PopNotify.js@master/PopNotify.js
  9. // @resource     popcss https://cdn.jsdelivr.net/gh/CKylinMC/PopNotify.js@master/PopNotify.css
  10. // @resource     fpjs https://cdn.jsdelivr.net/gh/CKylinMC/FloatWindow.js@main/floatwin.js
  11. // @resource     fpcss https://cdn.jsdelivr.net/gh/CKylinMC/FloatWindow.js@main/floatwin.modal.css
  12. // @resource     cktools https://greasyfork.org/scripts/429720-cktools/code/CKTools.js?version=1029952
  13. // @author       CKylinMC
  14. // @license      GPL-3.0-only
  15. // @grant        GM_getResourceText
  16. // @grant        unsafeWindow
  17. // ==/UserScript==
  18.  
  19. (function () {
  20.     if (typeof (unsafeWindow) == 'undefined') {
  21.         unsafeWindow = window;
  22.     }
  23.     if (typeof (GM_getResourceText) != 'function') {
  24.         GM_getResourceText = () => null;
  25.     }
  26.     unsafeWindow.CKUIToolkit_loaded = false;
  27.     //======[Apply all resources]
  28.     const resourceList = [
  29.         { name: 'popjs', type: 'js', source: 'https://cdn.jsdelivr.net/gh/CKylinMC/PopNotify.js@master/PopNotify.js'},
  30.         { name: 'popcss', type: 'css', source:'https://cdn.jsdelivr.net/gh/CKylinMC/PopNotify.js@master/PopNotify.css' },
  31.         { name: 'fpjs', type: 'js', source: 'https://cdn.jsdelivr.net/gh/CKylinMC/FloatWindow.js@main/floatwin.js' },
  32.         { name: 'fpcss', type: 'css', source: 'https://cdn.jsdelivr.net/gh/CKylinMC/FloatWindow.js@main/floatwin.modal.css' },
  33.         { name: 'cktools', type: 'js', source: 'https://greasyfork.org/scripts/429720-cktools/code/CKTools.js?version=1029952' },
  34.         { name: 'popcsspatch', type: 'rawcss', content: "div.popNotifyUnitFrame{z-index:110000!important;}.CKTOOLS-modal-content{color: #616161!important;max-height: 80vh;overflow: auto;}" },
  35.         { name: 'settingscss', type: 'rawcss', content: `
  36.             .ckui-base .ckui-text{
  37.                 font-size: 14px;
  38.                 line-height: 1.428571429;
  39.             }
  40.             .ckui-base label{
  41.                 display: block;
  42.                 color: rgb(16, 140, 255);
  43.                 padding-top: 12px;
  44.             }
  45.             .ckui-base .ckui-texttoggle{
  46.                 display: block;
  47.                 color: rgb(16, 140, 255);
  48.                 padding-top: 12px;
  49.             }
  50.             .ckui-base .ckui-texttoggle-container::before{
  51.                 display: inline;
  52.                 content: "🔹";
  53.             }
  54.             .ckui-base .ckui-texttoggle-container .ckui-texttoggle-value{
  55.                 padding: 0px 6px;
  56.                 font-weight: bold;
  57.                 -webkit-user-select: none;
  58.                 -moz-user-select: none;
  59.                 -ms-user-select: none;
  60.                 user-select: none;
  61.                 cursor: pointer;
  62.             }
  63.             .ckui-base .ckui-texttoggle-container .ckui-texttoggle-value::before{
  64.                 content: "["
  65.             }
  66.             .ckui-base .ckui-texttoggle-container .ckui-texttoggle-value::after{
  67.                 content: "]"
  68.             }
  69.             .ckui-base .ckui-texttoggle-container::after{
  70.                 display: inline;
  71.                 content: "(点击切换)";
  72.                 color: gray;
  73.                 font-size: 12px;
  74.                 font-style: italic;
  75.                 padding-left: 12px;
  76.             }
  77.             .ckui-base .ckui-description{
  78.                 display: block;
  79.                 color: rgb(92, 92, 92);
  80.                 font-size: small;
  81.                 font-style: italic;
  82.             }
  83.             .ckui-base .ckui-toggle{
  84.                 padding-top: 12px;
  85.             }
  86.             .ckui-base label.ckui-inline-label{
  87.                 display: inline;
  88.                 line-height: 18px;
  89.             }
  90.             .ckui-base .ckui-input input{
  91.                 display: block;
  92.                 width: calc(100% - 28px);
  93.                 height: 34px;
  94.                 padding: 1px 3px;
  95.                 margin: 3px 6px;
  96.                 font-size: 14px;
  97.                 line-height: 1.428571429;
  98.                 color: rgb(51, 51, 51);
  99.                 background-color: rgb(255, 255, 255);
  100.                 border: 1px solid rgb(204, 204, 204);
  101.                 border-radius: 4px;
  102.                 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  103.             }
  104.             .ckui-base .ckui-inputnumber input{
  105.                 display: block;
  106.                 width: calc(100% - 36px);
  107.                 height: 34px;
  108.                 padding: 1px 12px;
  109.                 margin: 3px 6px;
  110.                 font-size: 14px;
  111.                 line-height: 1.428571429;
  112.                 color: rgb(51, 51, 51);
  113.                 background-color: rgb(255, 255, 255);
  114.                 border: 1px solid rgb(204, 204, 204);
  115.                 border-radius: 4px;
  116.                 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  117.             }
  118.             .ckui-base .ckui-inputarea textarea{
  119.                 display: block;
  120.                 width: calc(100% - 28px);
  121.                 height: 100px;
  122.                 padding: 6px 6px;
  123.                 margin: 3px 6px;
  124.                 font-size: 14px;
  125.                 line-height: 1.428571429;
  126.                 color: rgb(51, 51, 51);
  127.                 background-color: rgb(255, 255, 255);
  128.                 border: 1px solid rgb(204, 204, 204);
  129.                 border-radius: 4px;
  130.                 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  131.             }
  132.             .ckui-base .ckui-select select{
  133.                 display: block;
  134.                 width: calc(100% - 28px);
  135.                 height: 34px;
  136.                 padding: 6px 6px;
  137.                 margin: 3px 6px;
  138.                 font-size: 14px;
  139.                 line-height: 1.428571429;
  140.                 color: rgb(51, 51, 51);
  141.                 background-color: rgb(255, 255, 255);
  142.                 border: 1px solid rgb(204, 204, 204);
  143.                 border-radius: 4px;
  144.                 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  145.             }
  146.             .ckui-base .ckui-select select option{
  147.                 font-size: 16px;
  148.                 line-height: 1.428571429;
  149.                 color: rgb(51, 51, 51);
  150.             }
  151.             .ckui-base .ckui-header::before{
  152.                 content: "💠";
  153.             }
  154.             .ckui-base .ckui-header{
  155.                 width: calc(100% - 8px);
  156.                 display: block;
  157.                 color: rgb(16, 140, 255);
  158.                 padding: 12px 3px;
  159.                 border-bottom: 2px solid rgb(16, 140, 255);
  160.                 margin: 12px 0px 12px 0px;
  161.             }
  162.             .ckui-base .ckui-btns{
  163.                 display: flex;
  164.                 flex-wrap: wrap;
  165.                 flex-direction: row;
  166.             }
  167.             .ckui-base .ckui-btn{
  168.                 display: block;
  169.                 width: calc(50% - 8px);
  170.                 height: 40px;
  171.                 padding: 6px 12px;
  172.                 margin: 6px;
  173.                 font-size: 14px;
  174.                 line-height: 1.428571429;
  175.                 color: rgb(255, 255, 255);
  176.                 background-color: rgb(16, 140, 255);
  177.                 border: 1px solid rgb(16, 140, 255);
  178.                 border-radius: 4px;
  179.                 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  180.             }
  181.             .ckui-base .ckui-btn:hover{
  182.                 background-color: rgb(0, 122, 255);
  183.             }
  184.             .ckui-base .ckui-btns .ckui-btn{
  185.                 flex: 1;
  186.             }` }
  187.     ]
  188.     async function applyResource() {
  189.         resloop: for (let res of resourceList) {
  190.             if (true||!document.querySelector("#" + res.name)) {
  191.                 let el;
  192.                 switch (res.type) {
  193.                     case 'js':
  194.                     case 'rawjs':
  195.                         el = document.createElement("script");
  196.                         break;
  197.                     case 'css':
  198.                     case 'rawcss':
  199.                         el = document.createElement("style");
  200.                         break;
  201.                     default:
  202.                         console.error('[CKUI]','Err:unknown type', res);
  203.                         continue resloop;
  204.                 }
  205.                 el.id = res.name;
  206.                 let result = res.type.startsWith('raw') ? res.content : GM_getResourceText(res.name);
  207.                 if (result == null || result == 'null' || typeof result === 'undefined') {
  208.                     console.info('[CKUI]', 'Alternative method is using:',res.type,res.name);
  209.                     if (!res.source) {
  210.                         console.info('[CKUI]', 'Failed to apply:',res.type,res.name);
  211.                         continue resloop;
  212.                     }
  213.                     try {
  214.                         let response = await fetch(res.source);
  215.                         if (!response.ok) {
  216.                             console.info('[CKUI]', 'Failed to apply:',res.type,res.name,response.statusText);
  217.                             continue resloop;
  218.                         }
  219.                         result = await response.text();
  220.                     } catch (e) {
  221.                         console.info('[CKUI]', 'Failed to apply:',res.type,res.name,e);
  222.                         continue resloop;
  223.                     }
  224.                 }
  225.                 el.appendChild(document.createTextNode(result));
  226.                 document.head.appendChild(el);
  227.                 console.info('[CKUI]', 'Applied:',res.type,res.name);
  228.             }
  229.         }
  230.         console.info('[CKUI]', 'Resources all applied');
  231.     }
  232.     applyResource().then(() => unsafeWindow.CKUIToolkit_loaded = true);
  233.     
  234.     let deepClone = (obj)=>{
  235.         let newObject = {};
  236.         if (Array.isArray(obj)) {
  237.             newObject = [];
  238.             for (let i = 0; i < obj.length; i++) {
  239.                 newObject.push(deepClone(obj[i]));
  240.             }
  241.             return newObject;
  242.         }
  243.         Object.keys(obj).map(key => {
  244.             if (typeof obj[key] === 'object') {
  245.                 newObject[key] = deepClone(obj[key]);
  246.             } else {
  247.                 newObject[key] = obj[key];
  248.             }
  249.         });
  250.         return newObject;
  251.     };
  252.  
  253.     let domHelper = (...args) => {
  254.         return CKTools.domHelper(...args);
  255.     }
  256.  
  257.     const CKUIToolkit = {};
  258.     class CompUtils{
  259.         static getId(name) {
  260.             return 'ckui-settings-' + name;
  261.         }
  262.         static getClass(type) {
  263.             return 'ckui-' + type;
  264.         }
  265.         static runChecker(checker = null,...args) {
  266.             if (checker && typeof (checker) == 'function') {
  267.                 try {
  268.                     const result = checker(...args);
  269.                     return !!result;
  270.                 } catch (e) {
  271.                     console.log('checker errored', e);
  272.                     return false;
  273.                 }
  274.             } else return true;
  275.         }
  276.         static cfgValidator(cfg, keystr='') {
  277.             let keys = keystr.split(',').map(el => el.trim()).filter(el => el.length > 0);
  278.             keys.concat(['name', 'type']);
  279.             if (!cfg) return false;
  280.             for (let key of keys) {
  281.                 if (cfg[key]===undefined) return false;
  282.             }
  283.             return true;
  284.         }
  285.     }
  286.     class Components{
  287.         static text(cfg) {
  288.             if (!CompUtils.cfgValidator(cfg, 'label')) return;
  289.             return domHelper('div', {
  290.                 id: CompUtils.getId(cfg.name),
  291.                 classlist: CompUtils.getClass(cfg.type),
  292.                 html: cfg.label
  293.             });
  294.         }
  295.         static header(cfg) {
  296.             if (!CompUtils.cfgValidator(cfg, 'label')) return;
  297.             return domHelper('div', {
  298.                 id: CompUtils.getId(cfg.name),
  299.                 classlist: CompUtils.getClass(cfg.type),
  300.                 html: cfg.label
  301.             });
  302.         }
  303.         static toggle(cfg) {
  304.             if (!CompUtils.cfgValidator(cfg, 'label')) return;
  305.             const customId = 'toggle'+CKTools.GUID.getShort();
  306.             return domHelper('div', {
  307.                 id: CompUtils.getId(cfg.name),
  308.                 classlist: CompUtils.getClass(cfg.type),
  309.                 childs: [
  310.                     domHelper('input', {
  311.                         id: customId,
  312.                         attr: {
  313.                             type: 'checkbox',
  314.                             checked: cfg.value??false
  315.                         },
  316.                         on: {
  317.                             change: (e) => {
  318.                                 const value = !!(e.target?.checked);
  319.                                 if (CompUtils.runChecker(cfg.checker,value)) cfg.value = value;
  320.                                 // else  TODO: error tip
  321.                             }
  322.                         }
  323.                     }),
  324.                     domHelper('label', {
  325.                         attr: {
  326.                             for: customId
  327.                         },
  328.                         classlist:'ckui-inline-label',
  329.                         html: cfg.label
  330.                     }),
  331.                     domHelper('span', {
  332.                         classList: 'ckui-description',
  333.                         html: cfg.description??''
  334.                     }),
  335.                 ]
  336.             });
  337.         }
  338.         static input(cfg) {
  339.             if (!CompUtils.cfgValidator(cfg, 'label')) return;
  340.             return domHelper('div', {
  341.                 id: CompUtils.getId(cfg.name),
  342.                 classlist: CompUtils.getClass(cfg.type),
  343.                 childs: [
  344.                     domHelper('label', {
  345.                         html: cfg.label
  346.                     }),
  347.                     domHelper('input', {
  348.                         attr: {
  349.                             value: cfg.value??''
  350.                         },
  351.                         on: {
  352.                             keyup: CKTools.debounce((e) => {
  353.                                 const value = e.target?.value;
  354.                                 if (CompUtils.runChecker(cfg.checker,value)) cfg.value = value;
  355.                                 // else  TODO: error tip
  356.                             })
  357.                         }
  358.                     }),
  359.                     domHelper('span', {
  360.                         classList: 'ckui-description',
  361.                         html: cfg.description??''
  362.                     }),
  363.                 ]
  364.             });
  365.         }
  366.         static inputarea(cfg) {
  367.             if (!CompUtils.cfgValidator(cfg, 'label')) return;
  368.             return domHelper('div', {
  369.                 id: CompUtils.getId(cfg.name),
  370.                 classlist: CompUtils.getClass(cfg.type),
  371.                 childs: [
  372.                     domHelper('label', {
  373.                         html: cfg.label
  374.                     }),
  375.                     domHelper('textarea', {
  376.                         attr: {
  377.                             value: cfg.value??''//not work until it put into dom
  378.                         },
  379.                         html:cfg.value??'',
  380.                         on: {
  381.                             keyup: CKTools.debounce((e) => {
  382.                                 const value = e.target?.value ?? e.target.innerHTMl;
  383.                                 console.log('inputarea', value,e.target?.value,e.target.innerHTMl);
  384.                                 if (CompUtils.runChecker(cfg.checker, value)) cfg.value = value;
  385.                                 else console.warn('checker refused');
  386.                                 // else  TODO: error tip
  387.                             })
  388.                         }
  389.                     }),
  390.                     domHelper('span', {
  391.                         classList: 'ckui-description',
  392.                         html: cfg.description??''
  393.                     }),
  394.                 ]
  395.             });
  396.         }
  397.         static inputnumber(cfg) {
  398.             if (!CompUtils.cfgValidator(cfg, 'label,min,max,step')) return;
  399.             return domHelper('div', {
  400.                 id: CompUtils.getId(cfg.name),
  401.                 classlist: CompUtils.getClass(cfg.type),
  402.                 childs: [
  403.                     domHelper('label', {
  404.                         html: cfg.label
  405.                     }),
  406.                     domHelper('input', {
  407.                         attr: {
  408.                             type: 'number',
  409.                             value: isNaN(cfg.value)?undefined:+cfg.value,
  410.                             min: cfg.min,
  411.                             max: cfg.max,
  412.                             step: cfg.step
  413.                         },
  414.                         on: {
  415.                             change: (e) => {
  416.                                 let value = e.target?.value;
  417.                                 if (!isNaN(value)) {
  418.                                     value = +value;
  419.                                 }
  420.                                 if (CompUtils.runChecker(cfg.checker, value)) {
  421.                                     console.log('updated:', value);
  422.                                     cfg.value = value;
  423.                                 } else {
  424.                                     console.log('refused to update value', value);
  425.                                 }
  426.                                 // else  TODO: error tip
  427.                             }
  428.                         }
  429.                     }),
  430.                     domHelper('span', {
  431.                         classList: 'ckui-description',
  432.                         html: cfg.description??''
  433.                     }),
  434.                 ]
  435.             });
  436.         }
  437.         static select(cfg) {
  438.             if (!CompUtils.cfgValidator(cfg, 'label,options')) return;
  439.             return domHelper('div', {
  440.                 id: CompUtils.getId(cfg.name),
  441.                 classlist: CompUtils.getClass(cfg.type),
  442.                 childs: [
  443.                     domHelper('label', {
  444.                         html: cfg.label
  445.                     }),
  446.                     domHelper('select', {
  447.                         init: select => {
  448.                             for (let option of cfg.options) {
  449.                                 console.log('select option', option.opt,option.value,cfg.value == option.value);
  450.                                 select.appendChild(domHelper('option', {
  451.                                     attr: {
  452.                                         value: option.value,
  453.                                     },
  454.                                     html: option.opt,
  455.                                     init: optionel => {
  456.                                         if (cfg.value == option.value) optionel.setAttribute('selected', true);
  457.                                     }
  458.                                 }));
  459.                             }
  460.                         },
  461.                         on: {
  462.                             change: (e) => {
  463.                                 const value = e.target?.value??'';
  464.                                 if (CompUtils.runChecker(cfg.checker,value)) cfg.value = value;
  465.                                 // else  TODO: error tip
  466.                             }
  467.                         }
  468.                     }),
  469.                     domHelper('span', {
  470.                         classList: 'ckui-description',
  471.                         html: cfg.description??''
  472.                     }),
  473.                 ]
  474.             });
  475.         }
  476.         static texttoggle(cfg) {
  477.             if (!CompUtils.cfgValidator(cfg, 'before,on,off,after')) return;
  478.             return domHelper('div', {
  479.                 id: CompUtils.getId(cfg.name),
  480.                 classlist: CompUtils.getClass(cfg.type),
  481.                 childs: [
  482.                     domHelper('div', {
  483.                         classList:'ckui-texttoggle-container',
  484.                         childs: [
  485.                             domHelper('span', { text: cfg.before }),
  486.                             domHelper('span', {classList:'ckui-texttoggle-value',text:'...'}),
  487.                             domHelper('span', {text:cfg.after}),
  488.                         ],
  489.                         init: div => {
  490.                             const getText = () => cfg.value ? cfg.on : cfg.off;
  491.                             const setValue = (value) => {
  492.                                 cfg.value = !!value;
  493.                                 div.querySelector('.ckui-texttoggle-value').innerText = getText();
  494.                             }
  495.                             const toggleValue = () => setValue(!cfg.value);
  496.                             div.addEventListener('click', toggleValue);
  497.                             setTimeout(()=>setValue(cfg.value),50);
  498.                         }
  499.                     }),
  500.                     domHelper('span', {
  501.                         classList: 'ckui-description',
  502.                         html: cfg.description??''
  503.                     }),
  504.                 ]
  505.             });
  506.         }
  507.         static raw(cfg) {
  508.             if (!CompUtils.cfgValidator(cfg, 'contents')) return;
  509.             return domHelper('div', {
  510.                 id: CompUtils.getId(cfg.name),
  511.                 classlist: CompUtils.getClass(cfg.type),
  512.                 childs:domHelper(cfg.contents)
  513.             })
  514.         }
  515.         static window(cfg,type) {
  516.             if (!CompUtils.cfgValidator(cfg, 'label,config')) return;
  517.             return domHelper('div', {
  518.                 id: CompUtils.getId(cfg.name),
  519.                 classlist: CompUtils.getClass(cfg.type),
  520.                 childs: [
  521.                     domHelper('button', {
  522.                         classList: 'ckui-btn',
  523.                         html: cfg.label,
  524.                         on: {
  525.                             click: async (e) => {
  526.                                 let subres = {};
  527.                                 if (type == 'confirm') subres = await SettingsBuilder.open(cfg.config);
  528.                                 else if (type == 'modal') subres = await SettingsBuilder.modal(cfg.config);
  529.                                 else return;
  530.                                 console.log('subres:', subres)
  531.                                 Object.assign(cfg.config, subres);
  532.                             }
  533.                         }
  534.                     })
  535.                 ]
  536.             })
  537.         }
  538.         static btns(cfg) {
  539.             if (!CompUtils.cfgValidator(cfg, 'btns')) return;
  540.             return domHelper('div', {
  541.                 id: CompUtils.getId(cfg.name),
  542.                 classlist: CompUtils.getClass(cfg.type),
  543.                 init: el => {
  544.                     for(let btn of cfg.btns) {
  545.                         el.appendChild(domHelper('button', {
  546.                             classList: 'ckui-btn',
  547.                             html: btn.label,
  548.                             on: {
  549.                                 click: async (e) => {
  550.                                     await btn.onclick();
  551.                                 }
  552.                             }
  553.                         }));
  554.                     }
  555.                 }
  556.             })
  557.         }
  558.     }
  559.     class SettingsBuilder{
  560.         static builder(cfg) {
  561.             return new SettingsBuilder(cfg);
  562.         }
  563.         static async open(cfg, values = null) {
  564.             const s = new SettingsBuilder(cfg);
  565.             if(values) s.setValues(values);
  566.             const result = await s.showWindow();
  567.             return result;
  568.         }
  569.         static async modal(cfg, values = null) {
  570.             const s = new SettingsBuilder(cfg);
  571.             if(values) s.setValues(values);
  572.             const result = await s.showAlertWindow();
  573.             return result;
  574.         }
  575.         constructor(config) {
  576.             this.config = Object.assign({
  577.                 title: '设置',
  578.                 settings:[]
  579.             },config);
  580.         }
  581.         findSettingObjectByName(key = '',cfg = this.config) {
  582.             const settings = cfg.settings;
  583.             for (const setting of settings) {
  584.                 if(setting.name == key) return setting;
  585.             }
  586.             const subSettings = settings.filter(el => el.type == 'window');
  587.             if (!subSettings.length) return null;
  588.             for (const setting of subSettings) {
  589.                 const subresult = this.findSettingObjectByName(key, setting);
  590.                 if(subresult) return subresult;
  591.             }
  592.             return null;
  593.         }
  594.         setValues(settingsValues = {}) {
  595.             for (let vk of Object.keys(settingsValues)) {
  596.                 const setting = this.findSettingObjectByName(vk);
  597.                 if (setting) setting.value = settingsValues[vk];
  598.                 else console.warn('[CKUI]', `${vk} not found in scheme`);
  599.             }
  600.         }
  601.         flatValues(cfg) {
  602.             const cfgs = {};
  603.             if(cfg.settings){
  604.                 cfg = cfg.settings;
  605.             }
  606.             if(!Array.isArray(cfg)){
  607.                 return cfgs;
  608.             }
  609.             for(const s of cfg){
  610.                 if(!s.name || !s.type) {
  611.                     console.warn('[CKUI]', 'missing name or type',s);
  612.                     continue;
  613.                 }
  614.                 switch(s.type){
  615.                     case "toggle":
  616.                     case "texttoggle":
  617.                         cfgs[s.name] = !!s.value;
  618.                         break;
  619.                     case "select":
  620.                     case "input":
  621.                     case "inputarea":
  622.                         cfgs[s.name] = s.value?s.value+"":"";
  623.                         break;
  624.                     case "inputnumber":
  625.                         if(!isNaN(s.value)) cfgs[s.name] = +s.value;
  626.                         break;
  627.                     case "window":
  628.                         {
  629.                             const sub = Settings.flatValues(s.config);
  630.                             Object.assign(cfgs,sub);
  631.                         }
  632.                         break;
  633.                     default:
  634.                         console.log('[CKUI]','unrecognized type',s.type);
  635.                 }
  636.             }
  637.             return cfgs;
  638.         }
  639.         async showAlertWindow(config = this.config) {
  640.             const copiedConfig = deepClone(config);
  641.             return new Promise(r => {
  642.                 FloatWindow.alert(copiedConfig.title, domHelper('div', {
  643.                     classlist:'ckui-base',
  644.                     init: el => {
  645.                         for (const comp of copiedConfig.settings) {
  646.                             const r = this.makeComponent(comp,'alert');
  647.                             r&&el.appendChild(r);
  648.                         }
  649.                     }
  650.                 }), copiedConfig.btnName ?? "确定").then(() => {
  651.                     r(this.flatValues(copiedConfig));
  652.                 });
  653.             })
  654.         }
  655.         async showWindow(config = this.config) {
  656.             const copiedConfig = deepClone(config);
  657.             return new Promise(r => {
  658.                 FloatWindow.confirm(copiedConfig.title, domHelper('div', {
  659.                     classlist:'ckui-base',
  660.                     init: el => {
  661.                         for (const comp of copiedConfig.settings) {
  662.                             const r = this.makeComponent(comp);
  663.                             r&&el.appendChild(r);
  664.                         }
  665.                     }
  666.                 }), copiedConfig.saveBtn??"保存", copiedConfig.cancelBtn??"取消").then(result => {
  667.                     console.log('[CKUI]', 'Save?', result);
  668.                     result ? r(this.flatValues(copiedConfig)) : r({});
  669.                 });
  670.             })
  671.         }
  672.         makeComponent(cfg, type='confirm') {
  673.             if (Components.hasOwnProperty(cfg.type)) {
  674.                 return Components[cfg.type](cfg,type);
  675.             }
  676.         }
  677.     }
  678.     CKUIToolkit.showSettings = SettingsBuilder.open;
  679.     CKUIToolkit.showModal = SettingsBuilder.modal;
  680.     CKUIToolkit.builder = SettingsBuilder.builder;
  681.  
  682.     unsafeWindow.CKUIToolkit = CKUIToolkit;
  683. })();