🐛 修复 #212
@ -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>
|
||||
|
1
detach/src/assets/close-hover.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 1011 B |
1
detach/src/assets/close.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 1011 B |
1
detach/src/assets/info.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 995 B |
1
detach/src/assets/maximize.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 510 B |
1
detach/src/assets/minimize.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 613 B |
1
detach/src/assets/pin.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 685 B |
1
detach/src/assets/setting.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 539 B |
1
detach/src/assets/tool.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 570 B |
1
detach/src/assets/unmaximize.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 642 B |
1
detach/src/assets/unpin.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 685 B |
1
detach/src/assets/zoom.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 720 B |