wip: code refine & refine debug way

src/Setting/Panel.vue

@@ -0,0 +1,57 @@
+<template>
+  <div v-show="show" class="root" @click.self="show = false">
+    <div class="container">{{ state.matchedSetList.length }}1</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ISet } from '@/data';
+import { defineComponent, reactive } from 'vue';
+
+export default defineComponent({
+  data() {
+    return {
+      show: false,
+    };
+  },
+  setup() {
+    const state = reactive<{
+      matchedSetList: ISet[];
+    }>({
+      matchedSetList: [],
+    });
+
+    return {
+      state,
+    };
+  },
+});
+</script>
+
+<style scoped lang="less">
+.root {
+  overflow: hidden auto;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  outline: none;
+  position: fixed;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.container {
+  position: absolute;
+  left: 50%;
+  box-sizing: border-box;
+  pointer-events: auto;
+  top: 40%;
+  transform: translate(-50%, -40%);
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 0 24px 0 rgba(102, 102, 102, 0.08);
+  min-height: 360px;
+  max-width: 100%;
+  width: 720px;
+}
+</style>

src/Setting/index.ts

@@ -1,8 +1,8 @@
 import { createApp } from 'vue';
-import App from './Panel.vue';
+import Panel from './Panel.vue';
 
 export function render(el: any) {
-  const vm = createApp(App);
+  const vm = createApp(Panel);
   const $root = vm.mount(el);
 
   return {

src/SettingPanel/Panel.vue

@@ -1,22 +0,0 @@
-<template>
-  <div v-if="show" @click="show = false">dsds {{ val }}</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  data() {
-    return {
-      val: 1,
-      show: false,
-    };
-  },
-});
-</script>
-
-<style scoped lang="less">
-div {
-  color: red;
-}
-</style>

src/data/index.ts

@@ -21,6 +21,11 @@ export const Store = {
     res = Array.isArray(res) ? res : [];
     return res;
   },
+  getMatchedSetList(): ISet[] {
+    return Store.getSetList().filter(it =>
+      new RegExp(it.domainTest, 'ig').test(location.host)
+    );
+  },
   findCurrentSet(): ISet {
     const ruleSet = Store.getSetList().find(it =>
       new RegExp(it.domainTest, 'ig').test(location.host)

src/global.less

@@ -10,6 +10,9 @@
   opacity: 0.5;
   transition: opacity 0.3s;
   box-shadow: 0 0 10px 0px rgb(0 0 0 / 35%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   &:hover {
     opacity: 1;

src/index.ts

@@ -4,19 +4,19 @@ import './global.less';
 import { vmCtx } from './common';
 
 // TODO change to async
-import { render } from './SettingPanel';
-// import(/* webpackChunkName: 'setting-panel' */ './SettingPanel');
+import { render } from './Setting';
+// import(/* webpackChunkName: 'setting' */ './Setting');
 
-let handler: any;
-let isDrag = false;
-let isMove = false;
-let tX = 0;
-let tY = 0;
-let elRect: DOMRect | null = null;
+function bootstrap() {
+  let handler: any;
+  let isDrag = false;
+  let isMove = false;
+  let tX = 0;
+  let tY = 0;
+  let elRect: DOMRect | null = null;
 
-vmCtx.addEventListener('DOMContentLoaded', () => {
   const el = document.createElement('div');
-  el.innerText = '设置';
+  el.innerText = 'o_O||';
   el.className = 'response-proxy-page-root-fixed-button';
 
   function onClickEl(_e: MouseEvent) {
@@ -77,4 +77,12 @@ vmCtx.addEventListener('DOMContentLoaded', () => {
 
   document.body.appendChild(el);
   document.body.appendChild(elForMount);
-});
+}
+
+if (document.readyState === 'loading') {
+  vmCtx.addEventListener('DOMContentLoaded', () => {
+    bootstrap();
+  });
+} else {
+  bootstrap();
+}