💄 UI 升级

src/common/constans/common.ts

@@ -0,0 +1,2 @@
+export const WINDOW_WIDTH = 688;
+export const WINDOW_HEIGHT = 60;

src/common/constans/defaultConfig.ts

@@ -1,14 +1,16 @@
 export default {
-  version: 0,
+  version: 4,
   perf: {
     custom: {
+      theme: 'SPRING',
       primaryColor: '#ff4ea4',
       errorColor: '#ed6d46',
       warningColor: '#e5a84b',
       successColor: '#c0d695',
       infoColor: '#aa8eeB',
       logo: `file://${__static}/logo.png`,
-      placeholder: '你好 rubick',
+      placeholder: '你好，Rubick！请输入插件关键词',
+      username: 'Rubick',
     },
     shortCut: {
       showAndHidden: 'Option+R',

src/common/utils/getWindowHeight.ts

@@ -1,7 +1,7 @@
 const WINDOW_MAX_HEIGHT = 600;
 const WINDOW_MIN_HEIGHT = 60;
 const PRE_ITEM_HEIGHT = 60;
-const HISTORY_HEIGHT = 80;
+const HISTORY_HEIGHT = 70;
 
 export default (searchList: Array<any>, historyList): number => {
   const defaultHeight = historyList.length ? HISTORY_HEIGHT : 0;

src/core/plugin-handler/index.ts

@@ -169,6 +169,8 @@ class AdapterHandler {
         cwd: this.baseDir,
       });
 
+      console.log(args);
+
       let output = '';
       npm.stdout
         .on('data', (data: string) => {

src/main/browsers/main.ts

@@ -3,6 +3,7 @@ import path from 'path';
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib';
 // import versonHandler from '../common/versionHandler';
 import localConfig from '@/main/common/initLocalConfig';
+import { WINDOW_HEIGHT, WINDOW_WIDTH } from '@/common/constans/common';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 require('@electron/remote/main').initialize();
 
@@ -17,10 +18,10 @@ export default () => {
 
   const createWindow = async () => {
     win = new BrowserWindow({
-      height: 60,
+      height: WINDOW_HEIGHT,
       useContentSize: true,
       resizable: true,
-      width: 800,
+      width: WINDOW_WIDTH,
       frame: false,
       title: '拉比克',
       show: false,

src/main/browsers/runner.ts

@@ -57,8 +57,8 @@ export default () => {
   const viewReadyFn = async (window, { pluginSetting, ext }) => {
     if (!view) return;
     const height = pluginSetting && pluginSetting.height;
-    window.setSize(800, height || 660);
-    view.setBounds({ x: 0, y: 60, width: 800, height: height || 600 });
+    window.setSize(800, height || 600);
+    view.setBounds({ x: 0, y: 60, width: 800, height: height || 540 });
     view.setAutoResize({ width: true });
     executeHooks('PluginEnter', ext);
     executeHooks('PluginReady', ext);

src/main/common/initLocalConfig.ts

@@ -6,7 +6,7 @@ const db = new DBInstance();
 
 const localConfig = {
   async init(): Promise<any> {
-    const localConfig = await db.dbGet({ data: { id: LOCAL_CONFIG_KEY } });
+    const localConfig: any = await db.dbGet({ data: { id: LOCAL_CONFIG_KEY } });
     if (
       !localConfig ||
       !localConfig.data ||
@@ -16,8 +16,8 @@ const localConfig = {
         _id: LOCAL_CONFIG_KEY,
         data: defaultConfig,
       };
-      if (localConfig && localConfig.data) {
-        data._rev = localConfig.data._rev;
+      if (localConfig && localConfig) {
+        data._rev = localConfig._rev;
       }
       await db.dbPut({
         data: { data },

src/main/common/registerHotKey.ts

@@ -3,7 +3,6 @@ import {
   nativeTheme,
   BrowserWindow,
   BrowserView,
-  screen,
   ipcMain,
   app,
   Notification,
@@ -21,6 +20,14 @@ const registerHotKey = (mainWindow: BrowserWindow): void => {
       openAsHidden: true,
     });
   };
+
+  const setTheme = async () => {
+    mainWindow.webContents.executeJavaScript(`window.rubick.changeTheme()`);
+    mainWindow.getBrowserViews().forEach((view: BrowserView) => {
+      view.webContents.executeJavaScript(`window.rubick.changeTheme()`);
+    });
+  };
+
   // 设置暗黑模式
   const setDarkMode = async () => {
     const config = await localConfig.getConfig();
@@ -51,6 +58,7 @@ const registerHotKey = (mainWindow: BrowserWindow): void => {
   const init = async () => {
     await setAutoLogin();
     await setDarkMode();
+    await setTheme();
     const config = await localConfig.getConfig();
     globalShortcut.unregisterAll();
     // 注册偏好快捷键

src/renderer/assets/var.less

@@ -4,8 +4,8 @@
   --color-text-desc: rgba(0, 0, 0, 0.45);
   // 背景色
   --color-body-bg: #fff;
-  --color-menu-bg: #f3efef;
-  --color-list-hover: #ebeee8;
+  --color-menu-bg: rgb(248, 248, 248);
+  --color-list-hover: rgba(247, 247, 247);
   --color-input-hover: #fff;
   // 边框
   --color-border-light: #f0f0f0;
@@ -18,8 +18,8 @@
   // 背景色
   --color-body-bg: #1c1c28;
   --color-menu-bg: #1c1c28;
-  --color-list-hover: #33333d;
-  --color-input-hover: #33333d;
+  --color-list-hover: #2c2f3b;
+  --color-input-hover: #444d;
   // 边框
   --color-border-light: #33333d;
 }

src/renderer/components/result.vue

@@ -13,7 +13,7 @@
           v-for="(item, index) in pluginHistory"
           :key="index"
         >
-          <a-avatar style="border-radius: 0" :src="item.icon" />
+          <a-avatar style="width: 28px; height: 28px;" :src="item.icon" />
           <div class="name ellpise">{{item.pluginName || item._name || item.name}}</div>
         </a-col>
       </a-row>
@@ -117,21 +117,23 @@ const sort = (options) => {
   background: var(--color-body-bg);
   .history-plugins {
     width: 100%;
-    border-top: 1px dashed #ddd;
+    border-top: 1px dashed var(--color-border-light);
     box-sizing: border-box;
     .history-item {
       box-sizing: border-box;
-      height: 79px;
+      height: 69px;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
-      border-right: 1px dashed #ddd;
+      color: var(--color-text-content);
+      border-right: 1px dashed var(--color-border-light);
       &.active {
         background: var(--color-list-hover);
       }
     }
     .name {
+      font-size: 12px;
       margin-top: 4px;
       width: 100%;
       text-align: center;
@@ -146,7 +148,7 @@ const sort = (options) => {
     background: var(--color-body-bg);
     color: var(--color-text-content);
     border-color: var(--color-border-light);
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-light) !important;
     &.active {
       background: var(--color-list-hover);
     }

src/renderer/components/search.vue

@@ -1,51 +1,51 @@
 <template>
   <div class="rubick-select">
-    <div class="select-tag" v-show="currentPlugin.cmd">
-      {{ currentPlugin.cmd }}
+    <div :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>
     <div
       :class="clipboardFile[0].name ? 'clipboard-tag' : 'clipboard-img'"
       v-if="!!clipboardFile.length"
     >
-      <img :src="getIcon()" />
+      <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>
+      <a-tag color="#aaa" v-if="clipboardFile.length > 1">
+        {{ clipboardFile.length }}
+      </a-tag>
     </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)"
+      @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="placeholder || config.perf.custom.placeholder"
-      @keypress.enter="e => keydownEvent(e, 'enter')"
-      @keypress.space="e => keydownEvent(e, 'space')"
+      :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 v-show="!pluginLoading" @click="showSeparate()" class="icon-more" />
-          <div
-            v-if="currentPlugin && currentPlugin.logo"
-            style="position: relative"
-          >
-            <div v-show="pluginLoading" class="update-tips">检测更新中...</div>
-            <a-spin v-show="pluginLoading" class="loading">
-              <template #indicator>
-                <LoadingOutlined style="font-size: 42px" />
-              </template>
-            </a-spin>
-            <img class="icon-tool" :src="currentPlugin.logo" />
-          </div>
-          <div @click="() => emit('openMenu')" v-else class="rubick-logo">
-            <img :src="config.perf.custom.logo" />
-          </div>
+          <MoreOutlined
+            v-show="!pluginLoading"
+            @click="showSeparate()"
+            class="icon-more"
+          />
         </div>
       </template>
     </a-input>
@@ -55,11 +55,11 @@
 <script setup lang="ts">
 import { defineProps, defineEmits, ref } from 'vue';
 import { ipcRenderer } from 'electron';
-import { LoadingOutlined, MoreOutlined } from '@ant-design/icons-vue';
+import { MoreOutlined } from '@ant-design/icons-vue';
 
 const remote = window.require('@electron/remote');
 import localConfig from '../confOp';
-const { Menu, app } = remote;
+const { Menu } = remote;
 
 const config: any = ref(localConfig.getConfig());
 
@@ -78,8 +78,8 @@ const props: any = defineProps({
   clipboardFile: (() => [])(),
 });
 
-const changeValue = e => {
-  if (props.currentPlugin.name === 'rubick-system-feature') return;
+const changeValue = (e) => {
+  // if (props.currentPlugin.name === 'rubick-system-feature') return;
   targetSearch({ value: e.target.value });
   emit('onSearch', e);
 };
@@ -109,7 +109,9 @@ const keydownEvent = (e, key: string) => {
       modifiers,
     },
   });
-  const runPluginDisable = ((e.target.value === '' && !props.pluginHistory.length) || props.currentPlugin.name) ;
+  const runPluginDisable =
+    (e.target.value === '' && !props.pluginHistory.length) ||
+    props.currentPlugin.name;
   switch (key) {
     case 'up':
       emit('changeCurrent', -1);
@@ -130,7 +132,7 @@ const keydownEvent = (e, key: string) => {
   }
 };
 
-const checkNeedInit = e => {
+const checkNeedInit = (e) => {
   const { ctrlKey, metaKey } = e;
 
   if (e.target.value === '' && e.keyCode === 8) {
@@ -262,7 +264,7 @@ window.rubick.hooks.onHide = () => {
 <style lang="less">
 .rubick-select {
   display: flex;
-  padding-left: 10px;
+  padding-left: 16px;
   background: var(--color-body-bg);
   position: fixed;
   top: 0;
@@ -278,20 +280,21 @@ window.rubick.hooks.onHide = () => {
     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: 18px;
-    border-radius: 16px;
-    height: 32px;
-    position: relative;
-    color: #fff;
-    background-color: var(--ant-primary-color);
-    display: inline-flex;
-    align-items: center;
-    margin-right: 1px;
-    padding: 0 10px;
+    font-size: 16px;
+    color: var(--color-text-primary);
+    margin-left: 8px;
   }
 
   .main-input {
@@ -302,18 +305,23 @@ window.rubick.hooks.onHide = () => {
     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: 22px;
+      font-size: 16px;
       border: none !important;
       background: var(--color-body-bg);
       color: var(--color-text-primary);
     }
   }
 
-  .rubick-logo,
+  .rubick-logo {
+    width: 32px;
+    border-radius: 100%;
+  }
   .icon-tool {
     width: 40px;
     height: 40px;

src/renderer/main.ts

@@ -9,6 +9,7 @@ import {
   ConfigProvider,
   Row,
   Col,
+  Divider,
 } from 'ant-design-vue';
 import App from './App.vue';
 import localConfig from './confOp';
@@ -21,6 +22,13 @@ ConfigProvider.config({
   theme: config.perf.custom || {},
 });
 
+window.rubick.changeTheme = () => {
+  const config: any = localConfig.getConfig();
+  ConfigProvider.config({
+    theme: config.perf.custom || {},
+  });
+};
+
 createApp(App)
   .use(Button)
   .use(List)
@@ -30,4 +38,5 @@ createApp(App)
   .use(Tag)
   .use(Row)
   .use(Col)
+  .use(Divider)
   .mount('#app');