From 6516042809f27fdaf6c4af72c1e78c08709747fb Mon Sep 17 00:00:00 2001
From: muwoo <2424880409@qq.com>
Date: Tue, 1 Aug 2023 11:41:18 +0800
Subject: [PATCH] =?UTF-8?q?:bug:=20=E4=BF=AE=E5=A4=8D=20#212?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 detach/src/App.vue                | 84 ++++++++++++++++++++++++++-----
 detach/src/assets/close-hover.svg |  1 +
 detach/src/assets/close.svg       |  1 +
 detach/src/assets/info.svg        |  1 +
 detach/src/assets/maximize.svg    |  1 +
 detach/src/assets/minimize.svg    |  1 +
 detach/src/assets/pin.svg         |  1 +
 detach/src/assets/setting.svg     |  1 +
 detach/src/assets/tool.svg        |  1 +
 detach/src/assets/unmaximize.svg  |  1 +
 detach/src/assets/unpin.svg       |  1 +
 detach/src/assets/zoom.svg        |  1 +
 12 files changed, 83 insertions(+), 12 deletions(-)
 create mode 100644 detach/src/assets/close-hover.svg
 create mode 100644 detach/src/assets/close.svg
 create mode 100644 detach/src/assets/info.svg
 create mode 100644 detach/src/assets/maximize.svg
 create mode 100644 detach/src/assets/minimize.svg
 create mode 100644 detach/src/assets/pin.svg
 create mode 100644 detach/src/assets/setting.svg
 create mode 100644 detach/src/assets/tool.svg
 create mode 100644 detach/src/assets/unmaximize.svg
 create mode 100644 detach/src/assets/unpin.svg
 create mode 100644 detach/src/assets/zoom.svg

diff --git a/detach/src/App.vue b/detach/src/App.vue
index ca70e6b..396dda4 100644
--- a/detach/src/App.vue
+++ b/detach/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="[platform, 'detach']">
     <div class="info">
-      <img :src="plugInfo.logo" />
+      <img :src="plugInfo.logo"/>
       <input
         autofocus
         @input="changeValue"
@@ -11,17 +11,25 @@
       />
       <span v-else>{{ plugInfo.pluginName }}</span>
     </div>
-    <div class="handle">
-      <div class="devtool" @click="openDevTool" title="开发者工具"></div>
+    <div class="handle-container">
+      <div class="handle">
+        <div class="devtool" @click="openDevTool" title="开发者工具"></div>
+      </div>
+      <div class="window-handle" v-if="platform !== 'darwin'">
+        <div class="minimize" @click="minimize"></div>
+        <div class="maximize" @click="maximize"></div>
+        <div class="close" @click="close"></div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import throttle from "lodash.throttle";
-import { ref } from "vue";
+import throttle from 'lodash.throttle';
+import { ref } from 'vue';
+
+const { ipcRenderer } = window.require('electron');
 
-const { ipcRenderer } = window.require("electron");
 const platform = ref(window.process.platform);
 const showInput = ref(false);
 
@@ -43,8 +51,8 @@ try {
 }
 
 const changeValue = throttle((e) => {
-  ipcRenderer.send("msg-trigger", {
-    type: "detachInputChange",
+  ipcRenderer.send('msg-trigger', {
+    type: 'detachInputChange',
     data: {
       text: e.target.value,
     },
@@ -52,7 +60,19 @@ const changeValue = throttle((e) => {
 }, 500);
 
 const openDevTool = () => {
-  ipcRenderer.send("msg-trigger", { type: "openPluginDevTools" });
+  ipcRenderer.send('msg-trigger', { type: 'openPluginDevTools' });
+};
+
+const minimize = () => {
+  ipcRenderer.send('detach:service', { type: 'minimize' });
+};
+
+const maximize = () => {
+  ipcRenderer.send('detach:service', { type: 'maximize' });
+};
+
+const close = () => {
+  ipcRenderer.send('detach:service', { type: 'close' });
 };
 
 Object.assign(window, {
@@ -82,7 +102,6 @@ html, body {
   height: 60px;
   display: flex;
   align-items: center;
-  background: var(--color-body-bg);
   color: var(--color-text-primary);
 }
 
@@ -153,8 +172,49 @@ html, body {
   background-color: #dee2e6;
 }
 
-.detach .devtool {
-  background: center / 18px no-repeat url("./assets/devtool.svg");
+.handle .devtool {
+  background: center no-repeat url("./assets/tool.svg")
+}
+
+.handle-container {
+  display: flex;
+  align-items: center;
+}
+
+.window-handle {
+  display: flex;
+  align-items: center;
+}
+
+.window-handle > div {
+  width: 48px;
+  height: 56px;
+  cursor: pointer;
+}
+
+.window-handle > div:hover {
+  background-color: #dee2e6;
+}
+
+.window-handle .minimize {
+  background: center / 20px no-repeat url("./assets/minimize.svg");
+}
+
+.window-handle .maximize {
+  background: center / 20px no-repeat url("./assets/maximize.svg");
+}
+
+.window-handle .unmaximize {
+  background: center / 20px no-repeat url("./assets/unmaximize.svg");
+}
+
+.window-handle .close {
+  background: center / 20px no-repeat url("./assets/close.svg");
+}
+
+.window-handle .close:hover {
+  background-color: #e53935 !important;
+  background-image: url("./assets/close-hover.svg") !important;
 }
 
 </style>
diff --git a/detach/src/assets/close-hover.svg b/detach/src/assets/close-hover.svg
new file mode 100644
index 0000000..e26e2d3
--- /dev/null
+++ b/detach/src/assets/close-hover.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618205429990" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2034" width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M529.066667 524.8l241.066666-241.066667c8.533333-8.533333 8.533333-21.333333 0-29.866666s-21.333333-8.533333-29.866666 0L499.2 494.933333 258.133333 253.866667c-8.533333-8.533333-21.333333-8.533333-29.866666 0s-8.533333 21.333333 0 29.866666L469.333333 524.8 228.266667 765.866667c-8.533333 8.533333-8.533333 21.333333 0 29.866666 4.266667 4.266667 10.666667 6.4 14.933333 6.4s10.666667-2.133333 14.933333-6.4L499.2 554.666667l241.066667 241.066666c4.266667 4.266667 10.666667 6.4 14.933333 6.4s10.666667-2.133333 14.933333-6.4c8.533333-8.533333 8.533333-21.333333 0-29.866666L529.066667 524.8z" fill="#ffffff" p-id="2035"></path></svg>
\ No newline at end of file
diff --git a/detach/src/assets/close.svg b/detach/src/assets/close.svg
new file mode 100644
index 0000000..f72fea5
--- /dev/null
+++ b/detach/src/assets/close.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618205429990" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2034" width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M529.066667 524.8l241.066666-241.066667c8.533333-8.533333 8.533333-21.333333 0-29.866666s-21.333333-8.533333-29.866666 0L499.2 494.933333 258.133333 253.866667c-8.533333-8.533333-21.333333-8.533333-29.866666 0s-8.533333 21.333333 0 29.866666L469.333333 524.8 228.266667 765.866667c-8.533333 8.533333-8.533333 21.333333 0 29.866666 4.266667 4.266667 10.666667 6.4 14.933333 6.4s10.666667-2.133333 14.933333-6.4L499.2 554.666667l241.066667 241.066666c4.266667 4.266667 10.666667 6.4 14.933333 6.4s10.666667-2.133333 14.933333-6.4c8.533333-8.533333 8.533333-21.333333 0-29.866666L529.066667 524.8z" fill="#888888" p-id="2035"></path></svg>
\ No newline at end of file
diff --git a/detach/src/assets/info.svg b/detach/src/assets/info.svg
new file mode 100644
index 0000000..f7981b6
--- /dev/null
+++ b/detach/src/assets/info.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M24 44C29.5228 44 34.5228 41.7614 38.1421 38.1421C41.7614 34.5228 44 29.5228 44 24C44 18.4772 41.7614 13.4772 38.1421 9.85786C34.5228 6.23858 29.5228 4 24 4C18.4772 4 13.4772 6.23858 9.85786 9.85786C6.23858 13.4772 4 18.4772 4 24C4 29.5228 6.23858 34.5228 9.85786 38.1421C13.4772 41.7614 18.4772 44 24 44Z" fill="none" stroke="#888" stroke-width="3" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24 11C25.3807 11 26.5 12.1193 26.5 13.5C26.5 14.8807 25.3807 16 24 16C22.6193 16 21.5 14.8807 21.5 13.5C21.5 12.1193 22.6193 11 24 11Z" fill="#888"/><path d="M24.5 34V20H23.5H22.5" stroke="#888" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 34H28" stroke="#888" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/detach/src/assets/maximize.svg b/detach/src/assets/maximize.svg
new file mode 100644
index 0000000..fc96b32
--- /dev/null
+++ b/detach/src/assets/maximize.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618205323520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1376" width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M832 832H192V192h640v640z m-597.333333-42.666667h554.666666V234.666667H234.666667v554.666666z" fill="#888888" p-id="1377"></path></svg>
\ No newline at end of file
diff --git a/detach/src/assets/minimize.svg b/detach/src/assets/minimize.svg
new file mode 100644
index 0000000..d87ee88
--- /dev/null
+++ b/detach/src/assets/minimize.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618205449254" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2381" width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M768 533.333333H256c-12.8 0-21.333333-8.533333-21.333333-21.333333s8.533333-21.333333 21.333333-21.333333h512c12.8 0 21.333333 8.533333 21.333333 21.333333s-8.533333 21.333333-21.333333 21.333333z" fill="#888888" p-id="2382"></path></svg>
\ No newline at end of file
diff --git a/detach/src/assets/pin.svg b/detach/src/assets/pin.svg
new file mode 100644
index 0000000..d43a6b1
--- /dev/null
+++ b/detach/src/assets/pin.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#icon-3d122e4c72881c3e)"><path d="M10.6963 17.5042C13.3347 14.8657 16.4701 14.9387 19.8781 16.8076L32.62 9.74509L31.8989 4.78683L43.2126 16.1005L38.2656 15.3907L31.1918 28.1214C32.9752 31.7589 33.1337 34.6647 30.4953 37.3032C30.4953 37.3032 26.235 33.0429 22.7171 29.525L6.44305 41.5564L18.4382 25.2461C14.9202 21.7281 10.6963 17.5042 10.6963 17.5042Z" fill="#888" stroke="#888" stroke-width="3" stroke-linejoin="round"/></g><defs><clipPath id="icon-3d122e4c72881c3e"><rect width="48" height="48" fill="#FFF"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/detach/src/assets/setting.svg b/detach/src/assets/setting.svg
new file mode 100644
index 0000000..9431b0e
--- /dev/null
+++ b/detach/src/assets/setting.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M34.0003 41L44 24L34.0003 7H14.0002L4 24L14.0002 41H34.0003Z" fill="none" stroke="#888" stroke-width="3" stroke-linejoin="round"/><path d="M24 29C26.7614 29 29 26.7614 29 24C29 21.2386 26.7614 19 24 19C21.2386 19 19 21.2386 19 24C19 26.7614 21.2386 29 24 29Z" fill="none" stroke="#888" stroke-width="3" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/detach/src/assets/tool.svg b/detach/src/assets/tool.svg
new file mode 100644
index 0000000..c36a885
--- /dev/null
+++ b/detach/src/assets/tool.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M44 16C44 22.6274 38.6274 28 32 28C29.9733 28 28.0639 27.4975 26.3896 26.6104L9 44L4 39L21.3896 21.6104C20.5025 19.9361 20 18.0267 20 16C20 9.37258 25.3726 4 32 4C34.0267 4 35.9361 4.50245 37.6104 5.38959L30 13L35 18L42.6104 10.3896C43.4975 12.0639 44 13.9733 44 16Z" fill="none" stroke="#888" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/detach/src/assets/unmaximize.svg b/detach/src/assets/unmaximize.svg
new file mode 100644
index 0000000..0e56b98
--- /dev/null
+++ b/detach/src/assets/unmaximize.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618205464128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2718" width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M855.466667 168.533333h-554.666667V277.333333H192v554.666667h554.666667v-108.8h108.8v-554.666667zM704 789.333333H234.666667V320h469.333333v469.333333z m108.8-108.8H746.666667V277.333333H343.466667V211.2h469.333333v469.333333z" fill="#888888" p-id="2719"></path></svg>
\ No newline at end of file
diff --git a/detach/src/assets/unpin.svg b/detach/src/assets/unpin.svg
new file mode 100644
index 0000000..795d415
--- /dev/null
+++ b/detach/src/assets/unpin.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#icon-7599d19572881c3e)"><path d="M10.6963 17.5042C13.3347 14.8657 16.4701 14.9387 19.8781 16.8076L32.62 9.74509L31.8989 4.78683L43.2126 16.1005L38.2656 15.3907L31.1918 28.1214C32.9752 31.7589 33.1337 34.6647 30.4953 37.3032C30.4953 37.3032 26.235 33.0429 22.7171 29.525L6.44305 41.5564L18.4382 25.2461C14.9202 21.7281 10.6963 17.5042 10.6963 17.5042Z" fill="none" stroke="#888" stroke-width="3" stroke-linejoin="round"/></g><defs><clipPath id="icon-7599d19572881c3e"><rect width="48" height="48" fill="#888"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/detach/src/assets/zoom.svg b/detach/src/assets/zoom.svg
new file mode 100644
index 0000000..147bc8a
--- /dev/null
+++ b/detach/src/assets/zoom.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M21 38C30.3888 38 38 30.3888 38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38Z" fill="none" stroke="#888" stroke-width="3" stroke-linejoin="round"/><path d="M21 15L21 27" stroke="#888" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 21L27 21" stroke="#888" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M33.2218 33.2218L41.7071 41.7071" stroke="#888" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file