wip: init setting panel

src/SettingPanel/Panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>dsds {{ val }}</div>
+  <div v-if="show" @click="show = false">dsds {{ val }}</div>
 </template>
 
 <script lang="ts">
@@ -9,13 +9,14 @@ export default defineComponent({
   data() {
     return {
       val: 1,
+      show: false,
     };
   },
 });
 </script>
 
 <style scoped lang="less">
-.div {
+div {
   color: red;
 }
 </style>

src/SettingPanel/index.ts

@@ -2,5 +2,16 @@ import { createApp } from 'vue';
 import App from './Panel.vue';
 
 export function render(el: any) {
-  createApp(App).mount(el);
+  const vm = createApp(App);
+  const $root = vm.mount(el);
+
+  return {
+    $root,
+    open: () => {
+      ($root.$data as any).show = true;
+    },
+    close: () => {
+      ($root.$data as any).show = false;
+    },
+  };
 }

src/global.less

@@ -7,4 +7,10 @@
   z-index: 4000;
   cursor: pointer;
   background-color: #6cf;
+  transition: all 0.3s;
+
+  &.hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
 }

src/index.ts

@@ -5,13 +5,26 @@ import './global.less';
 import { render } from './SettingPanel';
 // import(/* webpackChunkName: 'setting-panel' */ './SettingPanel');
 
+let handler: any;
+
 window.addEventListener('DOMContentLoaded', () => {
   const el = document.createElement('div');
   el.innerText = '设置';
-  el.className += 'response-proxy-page-root-fixed-button';
+  el.className = 'response-proxy-page-root-fixed-button';
+
   el.addEventListener('click', async () => {
-    //
-    render(el);
+    if (!handler) {
+      handler = render(elForMount);
+      handler.$root.$watch('show', (newVal: boolean) => {
+        el.classList[newVal ? 'add' : 'remove']('hidden');
+      });
+    }
+
+    handler.open();
   });
+
+  const elForMount = document.createElement('div');
+
   document.body.appendChild(el);
+  document.body.appendChild(elForMount);
 });