bsn-utilities

工具箱

当前为 2024-01-30 提交的版本,查看 最新版本

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

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