mirror of
https://github.com/rubickCenter/rubick
synced 2025-06-14 23:36:56 +08:00
✨ 主界面开发&插件运行容器开发&菜单开发
This commit is contained in:
parent
766ba46dcc
commit
c2f43bea39
126
package-lock.json
generated
126
package-lock.json
generated
@ -1142,6 +1142,19 @@
|
|||||||
"to-fast-properties": "^2.0.0"
|
"to-fast-properties": "^2.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@better-scroll/core": {
|
||||||
|
"version": "2.4.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@better-scroll/core/-/core-2.4.2.tgz",
|
||||||
|
"integrity": "sha512-IqVZLnh04YpaEAy9wJDxtFK/stxVQjB9A9Wcr3Uwkj7Av1TtFpin+t/TObl53diNDG5ZJ+vck/OAthphpuugLA==",
|
||||||
|
"requires": {
|
||||||
|
"@better-scroll/shared-utils": "^2.4.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@better-scroll/shared-utils": {
|
||||||
|
"version": "2.4.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@better-scroll/shared-utils/-/shared-utils-2.4.2.tgz",
|
||||||
|
"integrity": "sha512-Gy/Jfbpu+hq0u+PcjkTqyXGqAf+0dexTzEZ5IDXEVwJVLmd3cx8A73oTcAZ8QZgk4wSHvlMjXecSaptkhnNPEw=="
|
||||||
|
},
|
||||||
"@ctrl/tinycolor": {
|
"@ctrl/tinycolor": {
|
||||||
"version": "3.4.0",
|
"version": "3.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
|
||||||
@ -7458,103 +7471,6 @@
|
|||||||
"safe-buffer": "^5.1.1"
|
"safe-buffer": "^5.1.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"execa": {
|
|
||||||
"version": "6.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/execa/-/execa-6.0.0.tgz",
|
|
||||||
"integrity": "sha512-m4wU9j4Z9nXXoqT8RSfl28JSwmMNLFF69OON8H/lL3NeU0tNpGz313bcOfYoBBHokB0dC2tMl3VUcKgHELhL2Q==",
|
|
||||||
"requires": {
|
|
||||||
"cross-spawn": "^7.0.3",
|
|
||||||
"get-stream": "^6.0.1",
|
|
||||||
"human-signals": "^3.0.1",
|
|
||||||
"is-stream": "^3.0.0",
|
|
||||||
"merge-stream": "^2.0.0",
|
|
||||||
"npm-run-path": "^5.0.1",
|
|
||||||
"onetime": "^6.0.0",
|
|
||||||
"signal-exit": "^3.0.5",
|
|
||||||
"strip-final-newline": "^3.0.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"cross-spawn": {
|
|
||||||
"version": "7.0.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
|
||||||
"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
|
|
||||||
"requires": {
|
|
||||||
"path-key": "^3.1.0",
|
|
||||||
"shebang-command": "^2.0.0",
|
|
||||||
"which": "^2.0.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"human-signals": {
|
|
||||||
"version": "3.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-3.0.1.tgz",
|
|
||||||
"integrity": "sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ=="
|
|
||||||
},
|
|
||||||
"is-stream": {
|
|
||||||
"version": "3.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
|
|
||||||
"integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA=="
|
|
||||||
},
|
|
||||||
"mimic-fn": {
|
|
||||||
"version": "4.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
|
|
||||||
"integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw=="
|
|
||||||
},
|
|
||||||
"npm-run-path": {
|
|
||||||
"version": "5.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.0.1.tgz",
|
|
||||||
"integrity": "sha512-ybBJQUSyFwEEhqO2lXmyKOl9ucHtyZBWVM0h0FiMfT/+WKxCUZFa95qAR2X3w/w6oigN3B0b2UNHZbD+kdfD5w==",
|
|
||||||
"requires": {
|
|
||||||
"path-key": "^4.0.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"path-key": {
|
|
||||||
"version": "4.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
|
|
||||||
"integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ=="
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"onetime": {
|
|
||||||
"version": "6.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
|
|
||||||
"integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
|
|
||||||
"requires": {
|
|
||||||
"mimic-fn": "^4.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"path-key": {
|
|
||||||
"version": "3.1.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
|
|
||||||
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
|
|
||||||
},
|
|
||||||
"shebang-command": {
|
|
||||||
"version": "2.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
|
||||||
"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
|
|
||||||
"requires": {
|
|
||||||
"shebang-regex": "^3.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"shebang-regex": {
|
|
||||||
"version": "3.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
|
|
||||||
"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
|
|
||||||
},
|
|
||||||
"strip-final-newline": {
|
|
||||||
"version": "3.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
|
|
||||||
"integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw=="
|
|
||||||
},
|
|
||||||
"which": {
|
|
||||||
"version": "2.0.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
|
||||||
"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
|
|
||||||
"requires": {
|
|
||||||
"isexe": "^2.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"expand-brackets": {
|
"expand-brackets": {
|
||||||
"version": "2.1.4",
|
"version": "2.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
|
||||||
@ -8446,11 +8362,6 @@
|
|||||||
"integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
|
"integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"get-stream": {
|
|
||||||
"version": "6.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
|
|
||||||
"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="
|
|
||||||
},
|
|
||||||
"get-symbol-description": {
|
"get-symbol-description": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
|
||||||
@ -10471,6 +10382,11 @@
|
|||||||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"lodash.throttle": {
|
||||||
|
"version": "4.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
|
||||||
|
"integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
|
||||||
|
},
|
||||||
"lodash.transform": {
|
"lodash.transform": {
|
||||||
"version": "4.6.0",
|
"version": "4.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",
|
||||||
@ -10743,7 +10659,8 @@
|
|||||||
"merge-stream": {
|
"merge-stream": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
||||||
"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
|
"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"merge2": {
|
"merge2": {
|
||||||
"version": "1.4.1",
|
"version": "1.4.1",
|
||||||
@ -13837,7 +13754,8 @@
|
|||||||
"signal-exit": {
|
"signal-exit": {
|
||||||
"version": "3.0.6",
|
"version": "3.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz",
|
||||||
"integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ=="
|
"integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"simple-swizzle": {
|
"simple-swizzle": {
|
||||||
"version": "0.2.2",
|
"version": "0.2.2",
|
||||||
|
@ -14,12 +14,14 @@
|
|||||||
},
|
},
|
||||||
"main": "background.js",
|
"main": "background.js",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@better-scroll/core": "^2.4.2",
|
||||||
"ant-design-vue": "^2.2.8",
|
"ant-design-vue": "^2.2.8",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"cross-spawn": "^7.0.3",
|
"cross-spawn": "^7.0.3",
|
||||||
"get-mac-apps": "^1.0.2",
|
"get-mac-apps": "^1.0.2",
|
||||||
"got": "^11.8.3",
|
"got": "^11.8.3",
|
||||||
"libnpmsearch": "^3.1.2",
|
"libnpmsearch": "^3.1.2",
|
||||||
|
"lodash.throttle": "^4.1.1",
|
||||||
"vue": "^3.0.0",
|
"vue": "^3.0.0",
|
||||||
"vue-router": "^4.0.0-0",
|
"vue-router": "^4.0.0-0",
|
||||||
"vuex": "^4.0.0-0",
|
"vuex": "^4.0.0-0",
|
||||||
|
@ -1,6 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
{{pluginInfo}}
|
<webview
|
||||||
<webview id="webview" :src="`File://${pluginInfo.indexPath}`"></webview>
|
id="webview"
|
||||||
|
:src="`File://${pluginInfo.indexPath}`"
|
||||||
|
:preload="preload"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -10,6 +13,7 @@ const state = reactive({
|
|||||||
});
|
});
|
||||||
|
|
||||||
window.setPluginInfo = (pluginInfo: any) => {
|
window.setPluginInfo = (pluginInfo: any) => {
|
||||||
|
console.log(pluginInfo);
|
||||||
try {
|
try {
|
||||||
state.pluginInfo = pluginInfo;
|
state.pluginInfo = pluginInfo;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
40
src/common/utils/throttle.ts
Normal file
40
src/common/utils/throttle.ts
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
||||||
|
export default function throttle(func, wait, options?: any): () => void {
|
||||||
|
let context, args, result;
|
||||||
|
let timeout = null;
|
||||||
|
let previous = 0;
|
||||||
|
if (!options) options = {};
|
||||||
|
const later = function () {
|
||||||
|
previous = options.leading === false ? 0 : Date.now();
|
||||||
|
timeout = null;
|
||||||
|
result = func.apply(context, args);
|
||||||
|
if (!timeout) context = args = null;
|
||||||
|
};
|
||||||
|
return () => {
|
||||||
|
const now = Date.now();
|
||||||
|
if (!previous && options.leading === false) previous = now;
|
||||||
|
// 计算剩余时间
|
||||||
|
const remaining = wait - (now - previous);
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
context = this;
|
||||||
|
// eslint-disable-next-line prefer-rest-params
|
||||||
|
args = arguments;
|
||||||
|
if (remaining <= 0 || remaining > wait) {
|
||||||
|
if (timeout) {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = null;
|
||||||
|
}
|
||||||
|
previous = now;
|
||||||
|
result = func.apply(context, args);
|
||||||
|
if (!timeout) context = args = null;
|
||||||
|
} else if (!timeout && options.trailing !== false) {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
timeout = setTimeout(later, remaining);
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
}
|
@ -29,7 +29,7 @@ export default () => {
|
|||||||
|
|
||||||
if (process.env.WEBPACK_DEV_SERVER_URL) {
|
if (process.env.WEBPACK_DEV_SERVER_URL) {
|
||||||
// Load the url of the dev server if in development mode
|
// Load the url of the dev server if in development mode
|
||||||
win.loadURL("http://localhost:8080" as string);
|
win.loadURL("http://localhost:8081" as string);
|
||||||
} else {
|
} else {
|
||||||
// Load the index.html when not in development
|
// Load the index.html when not in development
|
||||||
win.loadURL(`file://${__static}/runner/index.html`);
|
win.loadURL(`file://${__static}/runner/index.html`);
|
||||||
|
@ -1,139 +1,64 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="components-layout">
|
<div id="components-layout">
|
||||||
<div class="search-container">
|
<div class="rubick-select">
|
||||||
<a-select
|
<Search @changeCurrent="changeIndex" :menuPluginInfo="menuPluginInfo" @onSearch="onSearch" />
|
||||||
class="rubick-select"
|
|
||||||
v-model:value="selectFeat"
|
|
||||||
mode="tags"
|
|
||||||
style="width: 100%"
|
|
||||||
placeholder="HI, Rubick 2.0"
|
|
||||||
@select="handleChange"
|
|
||||||
autofocus
|
|
||||||
show-search
|
|
||||||
:maxTagTextLength="6"
|
|
||||||
:dropdownClassName="!options.length ? 'none-option' : 'rubick-option'"
|
|
||||||
@dropdownVisibleChange="changeWindowHeight"
|
|
||||||
:open="open"
|
|
||||||
>
|
|
||||||
<a-select-option
|
|
||||||
v-for="(item, index) in options"
|
|
||||||
:key="index"
|
|
||||||
:value="item"
|
|
||||||
>
|
|
||||||
<div class="search-item">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
<div @click="openMenu" class="rubick-logo">
|
|
||||||
<img src="./assets/logo.png" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<Result :searchValue="searchValue" :currentSelect="currentSelect" :options="options" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, toRefs } from "vue";
|
import { watch, ref, nextTick } from "vue";
|
||||||
import { ipcRenderer } from "electron";
|
import { ipcRenderer } from "electron";
|
||||||
|
import Result from "./components/result.vue";
|
||||||
|
import Search from "./components/search.vue";
|
||||||
import getWindowHeight from "../common/utils/getWindowHeight";
|
import getWindowHeight from "../common/utils/getWindowHeight";
|
||||||
import createPluginManager from "./plugins-manager";
|
import createPluginManager from "./plugins-manager";
|
||||||
|
|
||||||
const { appList, initPlugins, getPluginInfo } = createPluginManager();
|
const { initPlugins, getPluginInfo, options, onSearch, searchValue } = createPluginManager();
|
||||||
|
|
||||||
initPlugins();
|
initPlugins();
|
||||||
|
|
||||||
const state = reactive({
|
const currentSelect = ref(0);
|
||||||
selectFeat: [],
|
const menuPluginInfo = ref({});
|
||||||
options: [],
|
|
||||||
open: false,
|
getPluginInfo({
|
||||||
|
pluginName: "feature",
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
pluginPath: `${__static}/feature/plugin.json`,
|
||||||
|
}).then((res) => {
|
||||||
|
menuPluginInfo.value = res;
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleChange = (v: string) => {
|
watch([searchValue], () => {
|
||||||
state.selectFeat = v;
|
currentSelect.value = 0;
|
||||||
closeDropDown();
|
nextTick(() => {
|
||||||
};
|
|
||||||
|
|
||||||
const closeDropDown = () => {
|
|
||||||
state.open = false;
|
|
||||||
setTimeout(() => {
|
|
||||||
ipcRenderer.sendSync("msg-trigger", {
|
ipcRenderer.sendSync("msg-trigger", {
|
||||||
type: "setExpendHeight",
|
type: "setExpendHeight",
|
||||||
height: getWindowHeight([]),
|
height: getWindowHeight(searchValue.value ? options.value : []),
|
||||||
});
|
});
|
||||||
}, 200);
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeWindowHeight = (open) => {
|
|
||||||
if (open) {
|
|
||||||
ipcRenderer.sendSync("msg-trigger", {
|
|
||||||
type: "setExpendHeight",
|
|
||||||
height: getWindowHeight(state.options),
|
|
||||||
});
|
|
||||||
state.open = open;
|
|
||||||
} else {
|
|
||||||
closeDropDown();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const openMenu = async () => {
|
|
||||||
const pluginInfo = await getPluginInfo({
|
|
||||||
pluginName: "feature",
|
|
||||||
// eslint-disable-next-line no-undef
|
|
||||||
pluginPath: `${__static}/feature/plugin.json`,
|
|
||||||
});
|
});
|
||||||
console.log(pluginInfo)
|
});
|
||||||
ipcRenderer.sendSync("msg-trigger", {
|
|
||||||
type: "openPlugin",
|
|
||||||
plugin: pluginInfo,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const { selectFeat, options, open } = toRefs(state);
|
const changeIndex = (index) => {
|
||||||
|
if (!options.value.length) return;
|
||||||
|
if (
|
||||||
|
currentSelect.value + index > options.value.length - 1 ||
|
||||||
|
currentSelect.value + index < 0
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
currentSelect.value = currentSelect.value + index;
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
#components-layout {
|
#components-layout {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: auto;
|
overflow: hidden;
|
||||||
overflow-x: hidden;
|
|
||||||
-webkit-app-region: drag;
|
-webkit-app-region: drag;
|
||||||
.search-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
.rubick-select {
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: normal;
|
|
||||||
flex: 1;
|
|
||||||
.ant-select-selector {
|
|
||||||
box-shadow: none !important;
|
|
||||||
height: 60px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rubick-logo {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background: #574778;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
img {
|
|
||||||
width: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.none-option {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.rubick-option {
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
89
src/renderer/components/result.vue
Normal file
89
src/renderer/components/result.vue
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
<template>
|
||||||
|
<div v-show="!!options.length && searchValue" class="options" ref="scrollDom">
|
||||||
|
<a-list item-layout="horizontal" :dataSource="options">
|
||||||
|
<template #renderItem="{ item, index }">
|
||||||
|
<a-list-item
|
||||||
|
@click="() => item.click()"
|
||||||
|
:class="currentSelect === index ? 'active op-item' : 'op-item'"
|
||||||
|
>
|
||||||
|
<a-list-item-meta :description="renderDesc(item.desc)">
|
||||||
|
<template #title>
|
||||||
|
<span v-html="renderTitle(item.name)"></span>
|
||||||
|
</template>
|
||||||
|
<template #avatar>
|
||||||
|
<a-avatar
|
||||||
|
style="border-radius: 0"
|
||||||
|
:src="item.icon"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</a-list-item-meta>
|
||||||
|
</a-list-item>
|
||||||
|
</template>
|
||||||
|
</a-list>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import BScroll from "@better-scroll/core";
|
||||||
|
import { defineProps, onMounted, ref } from "vue";
|
||||||
|
const scrollDom = ref(null);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
new BScroll(scrollDom.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
searchValue: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
currentSelect: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const renderTitle = (title) => {
|
||||||
|
if (typeof title !== "string") return;
|
||||||
|
const result = title.toLowerCase().split(props.searchValue.toLowerCase());
|
||||||
|
if (result && result.length > 1) {
|
||||||
|
return `<div>${result[0]}<span style="color: red">${props.searchValue}</span>${result[1]}</div>`;
|
||||||
|
} else {
|
||||||
|
return `<div>${result[0]}</div>`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderDesc = (desc) => {
|
||||||
|
if (desc.length > 80) {
|
||||||
|
return `${desc.substr(0, 63)}...${desc.substr(desc.length - 14, desc.length)}`
|
||||||
|
}
|
||||||
|
return desc;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.options {
|
||||||
|
position: absolute;
|
||||||
|
top: 62px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 99;
|
||||||
|
max-height: calc(~"100vh - 64px");
|
||||||
|
overflow: auto;
|
||||||
|
.op-item {
|
||||||
|
padding: 0 10px;
|
||||||
|
height: 60px;
|
||||||
|
line-height: 50px;
|
||||||
|
max-height: 500px;
|
||||||
|
overflow: auto;
|
||||||
|
background: #fafafa;
|
||||||
|
&.active {
|
||||||
|
background: #dee2e8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
78
src/renderer/components/search.vue
Normal file
78
src/renderer/components/search.vue
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<div class="rubick-select">
|
||||||
|
<a-input
|
||||||
|
class="main-input"
|
||||||
|
placeholder="Hi, Rubick2"
|
||||||
|
@change="(e) => emit('onSearch', e)"
|
||||||
|
@keydown.down="() => emit('changeCurrent', 1)"
|
||||||
|
@keydown.up="() => emit('changeCurrent', -1)"
|
||||||
|
>
|
||||||
|
<template #suffix>
|
||||||
|
<div @click="openMenu" class="suffix-tool" >
|
||||||
|
<div class="rubick-logo">
|
||||||
|
<img src="../assets/logo.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { defineProps, defineEmits, toRaw } from "vue";
|
||||||
|
import { ipcRenderer } from "electron";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
menuPluginInfo: {},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(["onSearch", "changeCurrent"]);
|
||||||
|
|
||||||
|
const openMenu = async () => {
|
||||||
|
ipcRenderer.sendSync("msg-trigger", {
|
||||||
|
type: "openPlugin",
|
||||||
|
plugin: toRaw(props.menuPluginInfo),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.rubick-select {
|
||||||
|
display: flex;
|
||||||
|
padding-left: 10px;
|
||||||
|
background: #fff;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
.main-input {
|
||||||
|
height: 60px !important;
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex: 1;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: none !important;
|
||||||
|
.ant-select-selection, .ant-input, .ant-select-selection__rendered {
|
||||||
|
height: 100% !important;
|
||||||
|
font-size: 22px;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rubick-logo {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: #574778;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 100%;
|
||||||
|
img {
|
||||||
|
width: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-input:focus {
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -1,7 +1,8 @@
|
|||||||
import { reactive, toRefs } from "vue";
|
import { reactive, toRefs, nextTick } from "vue";
|
||||||
import { nativeImage, remote } from "electron";
|
import { nativeImage, remote } from "electron";
|
||||||
import { appSearch, PluginHandler } from "@/core";
|
import { appSearch, PluginHandler } from "@/core";
|
||||||
import path from "path";
|
import path from "path";
|
||||||
|
import throttle from "lodash.throttle";
|
||||||
|
|
||||||
const appPath = remote.app.getPath("cache");
|
const appPath = remote.app.getPath("cache");
|
||||||
|
|
||||||
@ -14,6 +15,8 @@ const createPluginManager = (): any => {
|
|||||||
const state: any = reactive({
|
const state: any = reactive({
|
||||||
appList: [],
|
appList: [],
|
||||||
plugins: [],
|
plugins: [],
|
||||||
|
options: [],
|
||||||
|
searchValue: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
const initPlugins = async () => {
|
const initPlugins = async () => {
|
||||||
@ -28,10 +31,47 @@ const createPluginManager = (): any => {
|
|||||||
// todo
|
// todo
|
||||||
};
|
};
|
||||||
|
|
||||||
const searchPlugin = () => {
|
const onSearch = throttle((e) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
state.searchValue = value;
|
||||||
|
if (!value) return;
|
||||||
// todo 先搜索 plugin
|
// todo 先搜索 plugin
|
||||||
// todo 再搜索 app
|
// todo 再搜索 app
|
||||||
};
|
let options: any = [];
|
||||||
|
const descMap = new Map();
|
||||||
|
options = [
|
||||||
|
...options,
|
||||||
|
...state.appList
|
||||||
|
.filter((plugin) => {
|
||||||
|
if (!descMap.get(plugin)) {
|
||||||
|
descMap.set(plugin, true);
|
||||||
|
let has = false;
|
||||||
|
plugin.keyWords.some((keyWord) => {
|
||||||
|
if (
|
||||||
|
keyWord
|
||||||
|
.toLocaleUpperCase()
|
||||||
|
.indexOf(value.toLocaleUpperCase()) >= 0
|
||||||
|
) {
|
||||||
|
has = keyWord;
|
||||||
|
plugin.name = keyWord;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
return has;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.map((plugin) => {
|
||||||
|
plugin.click = () => {
|
||||||
|
_openPlugin({ plugin });
|
||||||
|
};
|
||||||
|
return plugin;
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
state.options = options;
|
||||||
|
}, 500);
|
||||||
|
|
||||||
const getPluginInfo = async ({ pluginName, pluginPath }) => {
|
const getPluginInfo = async ({ pluginName, pluginPath }) => {
|
||||||
const pluginInfo = await pluginInstance.getAdapterInfo(pluginName, pluginPath);
|
const pluginInfo = await pluginInstance.getAdapterInfo(pluginName, pluginPath);
|
||||||
@ -41,12 +81,16 @@ const createPluginManager = (): any => {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const _openPlugin = ({ plugin }) => {
|
||||||
|
//
|
||||||
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...toRefs(state),
|
...toRefs(state),
|
||||||
initPlugins,
|
initPlugins,
|
||||||
addPlugin,
|
addPlugin,
|
||||||
removePlugin,
|
removePlugin,
|
||||||
searchPlugin,
|
onSearch,
|
||||||
getPluginInfo,
|
getPluginInfo,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
2
src/renderer/shims-vue.d.ts
vendored
2
src/renderer/shims-vue.d.ts
vendored
@ -10,3 +10,5 @@ declare module 'main' {
|
|||||||
}
|
}
|
||||||
|
|
||||||
declare const __static: string
|
declare const __static: string
|
||||||
|
|
||||||
|
declare module 'lodash.throttle'
|
||||||
|
Loading…
x
Reference in New Issue
Block a user