mirror of
https://github.com/rubickCenter/rubick
synced 2025-07-29 13:11:51 +08:00
400 lines
8.8 KiB
Vue
400 lines
8.8 KiB
Vue
<template>
|
|
<div class="rubick-select">
|
|
<div
|
|
:class="clipboardFile[0].name ? 'clipboard-tag' : 'clipboard-img'"
|
|
v-if="!!clipboardFile.length"
|
|
>
|
|
<img style="margin-right: 8px" :src="getIcon()" />
|
|
<div class="ellipse">{{ clipboardFile[0].name }}</div>
|
|
<a-tag color="#aaa" v-if="clipboardFile.length > 1">
|
|
{{ clipboardFile.length }}
|
|
</a-tag>
|
|
</div>
|
|
<div v-else :class="currentPlugin.cmd ? 'rubick-tag' : ''">
|
|
<img
|
|
@click="() => emit('openMenu')"
|
|
class="rubick-logo"
|
|
:src="currentPlugin.logo || config.perf.custom.logo"
|
|
/>
|
|
<div class="select-tag" v-show="currentPlugin.cmd">
|
|
{{ currentPlugin.cmd }}
|
|
</div>
|
|
</div>
|
|
<a-input
|
|
id="search"
|
|
ref="mainInput"
|
|
class="main-input"
|
|
@input="(e) => changeValue(e)"
|
|
@keydown.down="(e) => keydownEvent(e, 'down')"
|
|
@keydown.tab="(e) => keydownEvent(e, 'down')"
|
|
@keydown.up="(e) => keydownEvent(e, 'up')"
|
|
@keydown="(e) => checkNeedInit(e)"
|
|
:value="searchValue"
|
|
:placeholder="
|
|
pluginLoading
|
|
? '更新检测中...'
|
|
: placeholder || config.perf.custom.placeholder
|
|
"
|
|
@keypress.enter="(e) => keydownEvent(e, 'enter')"
|
|
@keypress.space="(e) => keydownEvent(e, 'space')"
|
|
@focus="emit('focus')"
|
|
>
|
|
<template #suffix>
|
|
<div class="suffix-tool">
|
|
<MoreOutlined
|
|
@click="showSeparate()"
|
|
class="icon-more"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</a-input>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineProps, defineEmits, ref } from 'vue';
|
|
import { ipcRenderer } from 'electron';
|
|
import { MoreOutlined } from '@ant-design/icons-vue';
|
|
|
|
const remote = window.require('@electron/remote');
|
|
import localConfig from '../confOp';
|
|
const { Menu } = remote;
|
|
|
|
const config: any = ref(localConfig.getConfig());
|
|
|
|
const props: any = defineProps({
|
|
searchValue: {
|
|
type: [String, Number],
|
|
default: '',
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
pluginHistory: (() => [])(),
|
|
currentPlugin: {},
|
|
pluginLoading: Boolean,
|
|
clipboardFile: (() => [])(),
|
|
});
|
|
|
|
const changeValue = (e) => {
|
|
// if (props.currentPlugin.name === 'rubick-system-feature') return;
|
|
targetSearch({ value: e.target.value });
|
|
emit('onSearch', e);
|
|
};
|
|
|
|
const emit = defineEmits([
|
|
'onSearch',
|
|
'changeCurrent',
|
|
'openMenu',
|
|
'changeSelect',
|
|
'choosePlugin',
|
|
'focus',
|
|
'clearSearchValue',
|
|
'readClipboardContent',
|
|
'clearClipbord',
|
|
]);
|
|
|
|
const keydownEvent = (e, key: string) => {
|
|
const { ctrlKey, shiftKey, altKey, metaKey } = e;
|
|
const modifiers: Array<string> = [];
|
|
ctrlKey && modifiers.push('control');
|
|
shiftKey && modifiers.push('shift');
|
|
altKey && modifiers.push('alt');
|
|
metaKey && modifiers.push('meta');
|
|
ipcRenderer.send('msg-trigger', {
|
|
type: 'sendPluginSomeKeyDownEvent',
|
|
data: {
|
|
keyCode: e.code,
|
|
modifiers,
|
|
},
|
|
});
|
|
const runPluginDisable =
|
|
(e.target.value === '' && !props.pluginHistory.length) ||
|
|
props.currentPlugin.name;
|
|
switch (key) {
|
|
case 'up':
|
|
emit('changeCurrent', -1);
|
|
break;
|
|
case 'down':
|
|
emit('changeCurrent', 1);
|
|
break;
|
|
case 'enter':
|
|
if (runPluginDisable) return;
|
|
emit('choosePlugin');
|
|
break;
|
|
case 'space':
|
|
if (runPluginDisable || !config.value.perf.common.space) return;
|
|
emit('choosePlugin');
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
const checkNeedInit = (e) => {
|
|
const { ctrlKey, metaKey } = e;
|
|
|
|
if (e.target.value === '' && e.keyCode === 8) {
|
|
closeTag();
|
|
}
|
|
// 手动粘贴
|
|
if ((ctrlKey || metaKey) && e.key === 'v') {
|
|
emit('readClipboardContent');
|
|
}
|
|
};
|
|
|
|
const targetSearch = ({ value }) => {
|
|
if (props.currentPlugin.name) {
|
|
return ipcRenderer.sendSync('msg-trigger', {
|
|
type: 'sendSubInputChangeEvent',
|
|
data: { text: value },
|
|
});
|
|
}
|
|
};
|
|
|
|
const closeTag = () => {
|
|
emit('changeSelect', {});
|
|
emit('clearClipbord');
|
|
ipcRenderer.send('msg-trigger', {
|
|
type: 'removePlugin',
|
|
});
|
|
};
|
|
|
|
const showSeparate = () => {
|
|
let pluginMenu: any = [
|
|
{
|
|
label: config.value.perf.common.hideOnBlur ? '钉住' : '自动隐藏',
|
|
click: changeHideOnBlur,
|
|
},
|
|
{
|
|
label:
|
|
config.value.perf.common.lang === 'zh-CN'
|
|
? '切换语言'
|
|
: 'Change Language',
|
|
submenu: [
|
|
{
|
|
label: '简体中文',
|
|
click: () => {
|
|
changeLang('zh-CN');
|
|
},
|
|
},
|
|
{
|
|
label: 'English',
|
|
click: () => {
|
|
changeLang('en-US');
|
|
},
|
|
},
|
|
],
|
|
},
|
|
];
|
|
if (props.currentPlugin && props.currentPlugin.logo) {
|
|
pluginMenu = pluginMenu.concat([
|
|
{
|
|
label: '开发者工具',
|
|
click: () => {
|
|
ipcRenderer.send('msg-trigger', { type: 'openPluginDevTools' });
|
|
// todo
|
|
},
|
|
},
|
|
{
|
|
label: '当前插件信息',
|
|
submenu: [
|
|
{
|
|
label: '简介',
|
|
},
|
|
{
|
|
label: '功能',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: '分离窗口',
|
|
click: newWindow,
|
|
},
|
|
]);
|
|
}
|
|
let menu = Menu.buildFromTemplate(pluginMenu);
|
|
menu.popup();
|
|
};
|
|
|
|
const changeLang = (lang) => {
|
|
let cfg = { ...config.value };
|
|
cfg.perf.common.lang = lang;
|
|
localConfig.setConfig(JSON.parse(JSON.stringify(cfg)));
|
|
config.value = cfg;
|
|
};
|
|
|
|
const changeHideOnBlur = () => {
|
|
let cfg = { ...config.value };
|
|
cfg.perf.common.hideOnBlur = !cfg.perf.common.hideOnBlur;
|
|
localConfig.setConfig(JSON.parse(JSON.stringify(cfg)));
|
|
config.value = cfg;
|
|
};
|
|
|
|
const getIcon = () => {
|
|
if (props.clipboardFile[0].dataUrl) return props.clipboardFile[0].dataUrl;
|
|
try {
|
|
return ipcRenderer.sendSync('msg-trigger', {
|
|
type: 'getFileIcon',
|
|
data: { path: props.clipboardFile[0].path },
|
|
});
|
|
} catch (e) {
|
|
return require('../assets/file.png');
|
|
}
|
|
};
|
|
|
|
const newWindow = () => {
|
|
ipcRenderer.send('msg-trigger', {
|
|
type: 'detachPlugin',
|
|
});
|
|
// todo
|
|
};
|
|
|
|
const mainInput = ref(null);
|
|
window.rubick.hooks.onShow = () => {
|
|
(mainInput.value as unknown as HTMLDivElement).focus();
|
|
};
|
|
|
|
window.rubick.hooks.onHide = () => {
|
|
emit('clearSearchValue');
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.rubick-select {
|
|
display: flex;
|
|
padding-left: 16px;
|
|
background: var(--color-body-bg);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
align-items: center;
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
.ellipse {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 200px;
|
|
}
|
|
.rubick-tag {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 4px 8px;
|
|
height: 40px;
|
|
border-radius: 9px;
|
|
background: var(--color-list-hover);
|
|
}
|
|
.select-tag {
|
|
white-space: pre;
|
|
user-select: none;
|
|
font-size: 16px;
|
|
color: var(--color-text-primary);
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.main-input {
|
|
height: 40px !important;
|
|
box-sizing: border-box;
|
|
flex: 1;
|
|
border: none;
|
|
outline: none;
|
|
box-shadow: none !important;
|
|
background: var(--color-body-bg);
|
|
padding-left: 8px;
|
|
.ant-select-selection,
|
|
.ant-input,
|
|
.ant-select-selection__rendered {
|
|
caret-color: var(--ant-primary-color);
|
|
height: 100% !important;
|
|
font-size: 16px;
|
|
border: none !important;
|
|
background: var(--color-body-bg);
|
|
color: var(--color-text-primary);
|
|
}
|
|
}
|
|
|
|
.rubick-logo {
|
|
width: 32px;
|
|
border-radius: 100%;
|
|
}
|
|
.icon-tool {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #574778;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 100%;
|
|
img {
|
|
width: 32px;
|
|
}
|
|
}
|
|
.icon-tool {
|
|
background: var(--color-input-hover);
|
|
}
|
|
.ant-input:focus {
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
.suffix-tool {
|
|
display: flex;
|
|
align-items: center;
|
|
.icon-more {
|
|
font-size: 26px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
color: var(--color-text-content);
|
|
}
|
|
.loading {
|
|
color: var(--ant-primary-color);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.update-tips {
|
|
position: absolute;
|
|
right: 46px;
|
|
top: 50%;
|
|
font-size: 14px;
|
|
transform: translateY(-50%);
|
|
color: #aaa;
|
|
}
|
|
}
|
|
.clipboard-tag {
|
|
white-space: pre;
|
|
user-select: none;
|
|
font-size: 16px;
|
|
height: 32px;
|
|
position: relative;
|
|
align-items: center;
|
|
display: flex;
|
|
border: 1px solid var(--color-border-light);
|
|
padding: 0 8px;
|
|
margin-right: 12px;
|
|
img {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
.clipboard-img {
|
|
white-space: pre;
|
|
user-select: none;
|
|
font-size: 16px;
|
|
height: 32px;
|
|
position: relative;
|
|
align-items: center;
|
|
display: flex;
|
|
img {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|