💄 UI 升级

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');