From 131fa7cb7678c69366f7d7da2f53f5da119fb035 Mon Sep 17 00:00:00 2001
From: daief <1437931235@qq.com>
Date: Sun, 29 Nov 2020 21:37:00 +0800
Subject: [PATCH] wip: init setting panel

---
 src/SettingPanel/Panel.vue |  5 +++--
 src/SettingPanel/index.ts  | 13 ++++++++++++-
 src/global.less            |  6 ++++++
 src/index.ts               | 19 ++++++++++++++++---
 4 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/SettingPanel/Panel.vue b/src/SettingPanel/Panel.vue
index b7bb173..d4cbee5 100644
--- a/src/SettingPanel/Panel.vue
+++ b/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>
diff --git a/src/SettingPanel/index.ts b/src/SettingPanel/index.ts
index b4b7853..bd24b77 100644
--- a/src/SettingPanel/index.ts
+++ b/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;
+    },
+  };
 }
diff --git a/src/global.less b/src/global.less
index 6c7c74a..a937987 100644
--- a/src/global.less
+++ b/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;
+  }
 }
diff --git a/src/index.ts b/src/index.ts
index 13f834e..c7266fa 100644
--- a/src/index.ts
+++ b/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);
 });