☰

bsn-utilities

工具箱

目前為 2024-05-02 提交的版本，檢視 最新版本。

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/486039/1370015/bsn-utilities.js 

  1. // 随眠
  2. function sleep(time) {
  3.   return new Promise(resolve => setTimeout(resolve, time))
  4. }
  5. // 修改输入框的值(模拟键盘输入)
  6. function setInputValue(input, value) {
  7.   input.value = value;
  8.   input.dispatchEvent(new InputEvent('input'));
  9. }
  10. // 获取粘贴板文字
  11. async function getClipboardText() {
  12.   if (navigator.clipboard && navigator.clipboard.readText) {
  13.     const text = await navigator.clipboard.readText();
  14.     return text;
  15.   }
  16.   return "";
  17. }
  18. // 在HTML_ELEMENT中查找所有满足条件的元素，参数innerText可以是字符串(判断innerText是否相等)或REG
  19. function findAllIn(ele, selectors, innerText) {
  20.   const arr = Array.from(ele.querySelectorAll(selectors));
  21.   return innerText === undefined
  22.     ? arr
  23.     : typeof innerText === "string"
  24.       ? arr.filter(x => x.innerText.trim() === innerText.trim())
  25.       : arr.filter(x => x.innerText.trim().match(innerText));
  26. }
  27. // 在HTML_ELEMENT中查找第一个满足条件的元素，参数innerText可以是字符串(判断innerText是否相等)或REG
  28. function findIn(ele, selectors, innerText) {
  29.   const arr = findAllIn(ele, selectors, innerText);
  30.   return arr.length > 0 ? arr[0] : null;
  31. }
  32. // 在document中查找所有满足条件的元素，参数innerText可以是字符串(判断innerText是否相等)或REG
  33. function findAll(selectors, innerText) {
  34.   return findAllIn(document, selectors, innerText);
  35. }
  36. // 在document中查找第一个满足条件的元素，参数innerText可以是字符串(判断innerText是否相等)或REG
  37. function find(selectors, innerText) {
  38.   return findIn(document, selectors, innerText);
  39. }
  40. // 选择下拉选项，input为下拉选项元素，wait为等待时间，optionParent为选项父元素，optionSelectors为选项的选择器，matchFunc为匹配函数(满足条件后触发点击操作)
  41. async function selectOptionIn(input, wait, optionParent, optionSelectors, matchFunc) {
  42.   input.click();
  43.   await sleep(wait);
  44.   const optionEles = findAllIn(optionParent, optionSelectors);
  45.   const option = optionEles.find((x, i) => matchFunc(x.innerText, i));
  46.   if (option) {
  47.     option.click();
  48.   }
  49. }
  50. // 选择下拉选项，input为下拉选项元素，wait为等待时间，optionSelectors为选项的选择器，matchFunc为匹配函数(满足条件后触发点击操作)
  51. async function selectOption(input, wait, optionSelectors, matchFunc) {
  52.   await selectOptionIn(input, wait, document, optionSelectors, matchFunc);
  53. }
  54. // 创建naive对话框，增加异步功能，只能在组件的setup函数里调用
  55. function createNaiveDialog() {
  56.   const dialog = naive.useDialog();
  57.   ["create", "error", "info", "success", "warning"].forEach(x => {
  58.     dialog[x + "Async"] = options => {
  59.       return new Promise((resolve,reject) => {
  60.         dialog[x]({
  61.           ...options,
  62.           onNegativeClick: () => resolve(false),
  63.           onPositiveClick: () => resolve(true)
  64.         });
  65.       });
  66.     }
  67.   });
  68.   return dialog;
  69. }
  70. // 初始化Vue3，包括naive及自定义BTable组件
  71. function initVue3(Com) {
  72.   const style = document.createElement('style'); 
  73.   style.type = 'text/css'; 
  74.   style.innerHTML=`
  75. .app-wrapper .btn-toggle {
  76.   position: fixed;
  77.   top: 50vh;
  78.   right: 0;
  79.   padding-left: 12px;
  80.   padding-bottom: 4px;
  81.   transform: translateX(calc(100% - 32px)) translateY(-50%);
  82. }
  83. .drawer-wrapper .n-form {
  84.   margin: 0 8px;
  85. }
  86. .drawer-wrapper .n-form .n-form-item {
  87.   margin: 8px 0;
  88. }
  89. .drawer-wrapper .n-form .n-form-item .n-space {
  90.   flex: 1;
  91. }
  92. .drawer-wrapper .n-form .n-form-item .n-input-number {
  93.   width: 100%;
  94. }
  95.   `; 
  96.   document.getElementsByTagName('head').item(0).appendChild(style); 
  97.   const el = document.createElement("div");
  98.   el.innerHTML = `
  99. <div id="app" class="app-wrapper"></div>`;
  100.   document.body.append(el);
  101.  
  102. const BTable = {
  103.   template: `
  104. <table cellspacing="0" cellpadding="0">
  105.   <tr v-for="(row, rowIndex) in rows">
  106.     <td v-for="cell in row" :rowspan="cell.rowspan" :colspan="cell.colspan" :width="cell.width" :class="cell.class">
  107.       <slot :cell="cell">{{cell.value}}</slot>
  108.     </td>
  109.   </tr>
  110. </table>
  111.   `,
  112.   props: {
  113.     rowCount: Number,
  114.     columns: Array, // [{ key: "", label: "", width: "100px", unit: "", editable: false }]
  115.     cells: Array // [{ row: 0, col: 0, rowspan: 1, colspan: 1, value: "", useColumnLabel: false }]
  116.   },
  117.   setup(props) {
  118.     const data = Vue.reactive({
  119.       rows: Vue.computed(() => {
  120.         const arr1 = [];
  121.         for(let i = 0; i < props.rowCount; i++) {
  122.           const arr2 = [];
  123.           for (let j = 0; j < props.columns.length; j++) {
  124.             const column = props.columns[j];
  125.             const cell = props.cells.find(x => x.row === i && x.col === j);
  126.             if (cell) {
  127.               const colspan = cell.colspan ?? 1;
  128.               arr2.push({
  129.                 ...cell,
  130.                 rowspan: cell.rowspan ?? 1,
  131.                 colspan: colspan,
  132.                 value: cell.useColumnLabel ? column.label : cell.value,
  133.                 width: colspan > 1 ? undefined : column.width,
  134.                 column: column
  135.               });
  136.             }
  137.           }
  138.           arr1.push(arr2);
  139.         }
  140.         return arr1;
  141.       })
  142.     });
  143.     return data;
  144.   }
  145. }
  146.   const app = Vue.createApp({
  147.     template: `
  148. <n-dialog-provider>
  149.   <n-message-provider>
  150.     <n-button class="btn-toggle" type="primary" round @click="showDrawer=true">
  151.       <template #icon>⇆</template>
  152.     </n-button>
  153.   <n-drawer v-model:show="showDrawer" display-directive="show" resizable class="drawer-wrapper">
  154.     <com @closeDrawer="showDrawer=false"/>
  155.   </n-drawer>
  156.   </n-message-provider>
  157. </n-dialog-provider>
  158.     `,
  159.     setup() {
  160.       const data = Vue.reactive({
  161.         showDrawer: false
  162.       });
  163.       return data;
  164.     }
  165.   });
  166.   app.use(naive);
  167.   app.component('b-table', BTable);
  168.   app.component('com', Com);
  169.   app.mount("#app");
  170. }