wip: refine

README.md

@@ -2,7 +2,7 @@
 
 一款代理了请求响应的油猴脚本，可以设置请求返回的内容。
 
-Vue3 的尝试、油猴脚本的开发尝试，简陋的功能和 UI。
+yarn@berry、Vue3、油猴脚本的尝试，简陋的功能和 UI。
 
 插件启用后，页面左上角会出现一个小按钮，点击可打开操作面板。
 
@@ -14,8 +14,10 @@ Vue3 的尝试、油猴脚本的开发尝试，简陋的功能和 UI。
 
 - [x] 支持 XHR
 - [x] 支持 fetch
-- [ ] 界面（Vue）异步加载
+- [ ] 界面（Vue 模块）异步加载
 - [ ] iframe 的情况
+- [ ] 规则开关
+- [ ] 国际化（大概）
 
 ## 笔记
 

src/Setting/Root.vue

@@ -130,8 +130,6 @@ export default defineComponent({
     watch(
       isAll,
       () => {
-        console.log(222, isAll);
-
         state.matchedSetList = isAll.value
           ? Store.getSetList()
           : Store.getMatchedSetList();
@@ -172,7 +170,7 @@ export default defineComponent({
       },
       handleDelSet: (item: ISet) => {
         if (confirm('是否删除该集合，包括其下所有 Api 配置？')) {
-          Store.deleteSets([item.id]);
+          Store.deleteSetList([item.id]);
           state.matchedSetList = state.matchedSetList.filter(it => it !== item);
         }
       },

src/compts/Button.vue

@@ -71,6 +71,7 @@ export default defineComponent({
 
 <style scoped lang="less">
 .@{prefix}__button {
+  appearance: none;
   text-transform: none;
   position: relative;
   display: inline-flex;

src/data/index.ts

@@ -1,5 +1,6 @@
 import { isMatchUrl, NAMESPACE, uuid4 } from '@/common';
 import values from 'lodash/values';
+import debounce from 'lodash/debounce';
 
 export interface IPrxyRule {
   id: string;
@@ -42,7 +43,7 @@ export const Store = {
     };
     return ruleSet;
   },
-  updateSetList(input: ISet[]) {
+  updateSetList: debounce((input: ISet[]) => {
     const store = Store.getStoreObject();
     input.forEach(it => {
       const target = store[it.id];
@@ -52,8 +53,8 @@ export const Store = {
       store[it.id] = it;
     });
     GM_setValue(KEY_SET, store);
-  },
-  deleteSets(ids: string[]) {
+  }, 2000),
+  deleteSetList(ids: string[]) {
     const store = Store.getStoreObject();
     ids.forEach(id => {
       delete store[id];

src/proxy/fetch.ts

@@ -59,7 +59,11 @@ if (typeof Response !== 'undefined') {
     return nativeRes;
   };
 
-  vmCtx.fetch = async function (input: RequestInfo, init?: RequestInit) {
+  vmCtx.fetch = async function (
+    input: RequestInfo,
+    init?: RequestInit,
+    ...rest: any[]
+  ) {
     let method = 'GET';
     if (input instanceof Request) {
       method = input.method;
@@ -67,7 +71,7 @@ if (typeof Response !== 'undefined') {
       method = init?.method || method;
     }
 
-    const res: Response = await nativeFetch.apply(this, [input, init]);
+    const res: Response = await nativeFetch.apply(this, [input, init, ...rest]);
 
     const proxyedResponse = proxyRes(res);
 

src/proxy/xhr.ts

@@ -37,7 +37,7 @@ vmCtx.XMLHttpRequest = class extends (
     return this.#mockResponse || super.responseText;
   }
 
-  open(method: string, url: string): void {
+  open(method: string, url: string, ...rest: any[]): void {
     this.#method = method;
     this.#url = url;
 
@@ -57,6 +57,7 @@ vmCtx.XMLHttpRequest = class extends (
       this.#proxyed = true;
     }
 
-    return super.open(method, url);
+    // @ts-ignore
+    return super.open(method, url, ...rest);
   }
 };