🐛 fix #289,#291,#290

2025-12-29 22:39:45 +08:00 · 2023-11-10 14:35:37 +08:00
parent dfb8446cfd
commit f671b83b6a
17 changed files with 277 additions and 88 deletions
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -27,18 +27,22 @@
      :currentSelect="currentSelect"
      :options="options"
      :clipboardFile="clipboardFile || []"
+      @setPluginHistory="setPluginHistory"
+      @choosePlugin="choosePlugin"
    />
  </div>
 </template>

 <script setup lang="ts">
-import { watch, ref, nextTick, toRaw } from 'vue';
-import { ipcRenderer } from 'electron';
+import { watch, ref, toRaw } from 'vue';
 import Result from './components/result.vue';
 import Search from './components/search.vue';
 import getWindowHeight from '../common/utils/getWindowHeight';
 import createPluginManager from './plugins-manager';
 import useDrag from '../common/utils/dragWindow';
+import { getGlobal } from '@electron/remote';
+import { PLUGIN_HISTORY } from '@/common/constans/renderer';
+import { message } from 'ant-design-vue';

 const { onMouseDown } = useDrag();
 const remote = window.require('@electron/remote');
@@ -60,6 +64,8 @@ const {
  clearClipboardFile,
  readClipboardContent,
  pluginHistory,
+  setPluginHistory,
+  changePluginHistory,
 } = createPluginManager();

 initPlugins();
@@ -76,19 +82,22 @@ getPluginInfo({
  remote.getGlobal('LOCAL_PLUGINS').addPlugin(res);
 });

-watch([options, pluginHistory, currentPlugin], () => {
-  currentSelect.value = 0;
-  if (currentPlugin.value.name) return;
-  nextTick(() => {
-    ipcRenderer.sendSync('msg-trigger', {
-      type: 'setExpendHeight',
-      data: getWindowHeight(
+watch(
+  [options, pluginHistory, currentPlugin],
+  () => {
+    currentSelect.value = 0;
+    if (currentPlugin.value.name) return;
+    window.rubick.setExpendHeight(
+      getWindowHeight(
        options.value,
-        (pluginLoading.value) ? [] : pluginHistory.value
-      ),
-    });
-  });
-});
+        pluginLoading.value ? [] : pluginHistory.value
+      )
+    );
+  },
+  {
+    immediate: true,
+  }
+);

 const changeIndex = (index) => {
  if (!options.value.length) {
@@ -125,13 +134,40 @@ const openMenu = (ext) => {

 window.rubick.openMenu = openMenu;

-const choosePlugin = () => {
+const choosePlugin = (plugin) => {
  if (options.value.length) {
    const currentChoose = options.value[currentSelect.value];
    currentChoose.click();
  } else {
-    const currentChoose = pluginHistory.value[currentSelect.value];
-    currentChoose.click();
+    const localPlugins = getGlobal('LOCAL_PLUGINS').getLocalPlugins();
+    const currentChoose = plugin || pluginHistory.value[currentSelect.value];
+    let hasRemove = true;
+    localPlugins.find((plugin) => {
+      if (plugin.name === currentChoose.originName) {
+        hasRemove = false;
+        return true;
+      }
+      return false;
+    });
+    if (hasRemove) {
+      const result = window.rubick.db.get(PLUGIN_HISTORY) || {};
+      const history = result.data.filter(item => item.originName !== currentChoose.originName);
+      setPluginHistory(history);
+      return message.warning('插件已被卸载！');
+    }
+    changePluginHistory(currentChoose);
+    window.rubick.openPlugin(
+      JSON.parse(
+        JSON.stringify({
+          ...currentChoose,
+          ext: {
+            code: currentChoose.feature.code,
+            type: currentChoose.cmd.type || 'text',
+            payload: null,
+          },
+        })
+      )
+    );
  }
 };

--- a/src/renderer/components/result.vue
+++ b/src/renderer/components/result.vue
@@ -1,20 +1,25 @@
 <template>
-  <div
-    v-show="!currentPlugin.name"
-    class="options"
-    ref="scrollDom"
-  >
-    <div class="history-plugins" v-if="!options.length || !(searchValue || !!clipboardFile.length)">
+  <div v-show="!currentPlugin.name" class="options">
+    <div
+      class="history-plugins"
+      v-if="!options.length || !(searchValue || !!clipboardFile.length)"
+    >
      <a-row>
        <a-col
-          @click="() => item.click()"
-          :class="currentSelect === index ? 'active history-item' : 'history-item'"
+          @click="() => openPlugin(item)"
+          @contextmenu.prevent="openMenu($event,item)"
+          :class="
+            currentSelect === index ? 'active history-item' : 'history-item'
+          "
          :span="3"
          v-for="(item, index) in pluginHistory"
          :key="index"
        >
-          <a-avatar style="width: 28px; height: 28px;" :src="item.icon" />
-          <div class="name ellpise">{{item.cmd || item.pluginName || item._name || item.name}}</div>
+          <a-avatar style="width: 28px; height: 28px" :src="item.icon" />
+          <div class="name ellpise">
+            {{ item.cmd || item.pluginName || item._name || item.name }}
+          </div>
+          <div class="badge" v-if="item.pin"></div>
        </a-col>
      </a-row>
    </div>
@@ -39,16 +44,13 @@
 </template>

 <script lang="ts" setup>
-import BScroll from '@better-scroll/core';
-import { defineProps, onMounted, ref } from 'vue';
+import {defineEmits, defineProps, reactive, toRaw, watch} from 'vue';
+const path = window.require('path');
+const remote = window.require('@electron/remote');

-const scrollDom = ref(null);
+declare const __static: string;

-onMounted(() => {
-  new BScroll(scrollDom.value);
-});
-
-const props = defineProps({
+const props: any = defineProps({
  searchValue: {
    type: [String, Number],
    default: '',
@@ -66,14 +68,22 @@ const props = defineProps({
  clipboardFile: (() => [])(),
 });

+const emit = defineEmits(['choosePlugin', 'setPluginHistory']);
+
 const renderTitle = (title, match) => {
  if (typeof title !== 'string') return;
  if (!props.searchValue || !match) return title;
  const result = title.substring(match[0], match[1] + 1);
-  return `<div>${title.substring(0, match[0])}<span style='color: var(--ant-error-color)'>${result}</span>${title.substring(match[1]+1, title.length)}</div>`;
+  return `<div>${title.substring(
+    0,
+    match[0]
+  )}<span style='color: var(--ant-error-color)'>${result}</span>${title.substring(
+    match[1] + 1,
+    title.length
+  )}</div>`;
 };

-const renderDesc = (desc) => {
+const renderDesc = (desc = '') => {
  if (desc.length > 80) {
    return `${desc.substr(0, 63)}...${desc.substr(
      desc.length - 14,
@@ -93,17 +103,97 @@ const sort = (options) => {
      }
    }
  }
-  return options;
+  return options.slice(0, 20);
 };
+
+const openPlugin = (item) => {
+  emit('choosePlugin', item);
+};
+
+const menuState: any = reactive({
+  plugin: null,
+});
+let mainMenus;
+
+const openMenu = (e, item) => {
+  const pinToMain = mainMenus.getMenuItemById('pinToMain');
+  const unpinFromMain = mainMenus.getMenuItemById('unpinFromMain');
+  pinToMain.visible = !item.pin;
+  unpinFromMain.visible = item.pin;
+  mainMenus.popup({
+    x: e.pageX,
+    y: e.pageY,
+  });
+  menuState.plugin = item;
+};
+
+const initMainCmdMenus = () => {
+  const menu = [
+    {
+      id: 'removeRecentCmd',
+      label: '从"使用记录"中删除',
+      icon: path.join(__static, 'icons', 'delete@2x.png'),
+      click: () => {
+        const history = props.pluginHistory.filter((item) => item.name !== menuState.plugin.name);
+        emit('setPluginHistory', toRaw(history));
+      },
+    },
+    {
+      id: 'pinToMain',
+      label: '固定到"搜索面板"',
+      icon: path.join(__static, 'icons', 'pin@2x.png'),
+      click: () => {
+        const history = props.pluginHistory.map((item) => {
+          if (item.name === menuState.plugin.name) {
+            item.pin = true;
+          }
+          return item;
+        });
+        emit('setPluginHistory', toRaw(history));
+      },
+    },
+    {
+      id: 'unpinFromMain',
+      label: '从"搜索面板"取消固定',
+      icon: path.join(__static, 'icons', 'unpin@2x.png'),
+      click: () => {
+        const history = props.pluginHistory.map((item) => {
+          if (item.name === menuState.plugin.name) {
+            item.pin = false;
+          }
+          return item;
+        });
+        emit('setPluginHistory', toRaw(history));
+      },
+    },
+  ];
+  mainMenus = remote.Menu.buildFromTemplate(menu);
+};
+
+initMainCmdMenus();
 </script>

 <style lang="less">
 .ellpise {
-  overflow:hidden;
-  text-overflow:ellipsis;
-  display:-webkit-box;
-  -webkit-line-clamp:1;
-  -webkit-box-orient:vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.contextmenu {
+  margin: 0;
+  background: #fff;
+  z-index: 3000;
+  position: absolute;
+  list-style-type: none;
+  padding: 5px 0;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #333;
+  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
 }

 .options {
@@ -120,6 +210,7 @@ const sort = (options) => {
    border-top: 1px dashed var(--color-border-light);
    box-sizing: border-box;
    .history-item {
+      cursor: pointer;
      box-sizing: border-box;
      height: 69px;
      display: flex;
@@ -128,6 +219,19 @@ const sort = (options) => {
      flex-direction: column;
      color: var(--color-text-content);
      border-right: 1px dashed var(--color-border-light);
+      position: relative;
+      .badge {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        width: 0;
+        height: 0;
+        border-radius: 4px;
+        border-top: 6px solid var(--ant-primary-4);
+        border-right: 6px solid var(--ant-primary-4);
+        border-left: 6px solid transparent;
+        border-bottom: 6px solid transparent;
+      }
      &.active {
        background: var(--color-list-hover);
      }
@@ -141,7 +245,7 @@ const sort = (options) => {
  }
  .op-item {
    padding: 0 10px;
-    height: 60px;
+    height: 70px;
    line-height: 50px;
    max-height: 500px;
    overflow: auto;
--- a/src/renderer/plugins-manager/index.ts
+++ b/src/renderer/plugins-manager/index.ts
@@ -8,7 +8,10 @@ import commonConst from '@/common/utils/commonConst';
 import { exec } from 'child_process';
 import searchManager from './search';
 import optionsManager from './options';
-import { PLUGIN_INSTALL_DIR as baseDir } from '@/common/constans/renderer';
+import {
+  PLUGIN_INSTALL_DIR as baseDir,
+  PLUGIN_HISTORY,
+} from '@/common/constans/renderer';
 import { message } from 'ant-design-vue';

 const createPluginManager = (): any => {
@@ -28,16 +31,22 @@ const createPluginManager = (): any => {
  const appList: any = ref([]);

  const initPlugins = async () => {
+    initPluginHistory();
    appList.value = await appSearch(nativeImage);
    initLocalStartPlugin();
  };

+  const initPluginHistory = () => {
+    const result = window.rubick.db.get(PLUGIN_HISTORY) || {};
+    if (result && result.data) {
+      state.pluginHistory = result.data;
+    }
+  };
+
  const initLocalStartPlugin = () => {
    const result = ipcRenderer.sendSync('msg-trigger', {
      type: 'dbGet',
-      data: {
-        id: 'rubick-local-start-app',
-      },
+      data: { id: PLUGIN_HISTORY },
    });
    if (result && result.value) {
      appList.value.push(...result.value);
@@ -70,15 +79,12 @@ const createPluginManager = (): any => {
  const openPlugin = async (plugin, option) => {
    if (plugin.pluginType === 'ui' || plugin.pluginType === 'system') {
      if (state.currentPlugin && state.currentPlugin.name === plugin.name) {
-        ipcRenderer.sendSync('msg-trigger', {
-          type: 'showMainWindow',
-        });
+        window.rubick.showMainWindow();
        return;
      }
      await loadPlugin(plugin);
-      ipcRenderer.sendSync('msg-trigger', {
-        type: 'openPlugin',
-        data: JSON.parse(
+      window.rubick.openPlugin(
+        JSON.parse(
          JSON.stringify({
            ...plugin,
            ext: plugin.ext || {
@@ -87,8 +93,8 @@ const createPluginManager = (): any => {
              payload: null,
            },
          })
-        ),
-      });
+        )
+      );
    }
    if (plugin.pluginType === 'app') {
      try {
@@ -101,19 +107,52 @@ const createPluginManager = (): any => {
    changePluginHistory({
      ...plugin,
      ...option,
+      originName: plugin.name,
    });
  };

  const changePluginHistory = (plugin) => {
-    state.pluginHistory.forEach((p, index) => {
-      if (p.name === plugin.name) {
-        state.pluginHistory.splice(index, 1);
-      }
-    });
-    state.pluginHistory.unshift(plugin);
-    if (state.pluginHistory.length > 8) {
-      state.pluginHistory.pop();
+    const unpin = state.pluginHistory.filter((plugin) => !plugin.pin);
+    const pin = state.pluginHistory.filter((plugin) => plugin.pin);
+    const isPin = state.pluginHistory.find((p) => p.name === plugin.name)?.pin;
+    if (isPin) {
+      pin.forEach((p, index) => {
+        if (p.name === plugin.name) {
+          pin.splice(index, 1);
+        }
+      });
+      pin.unshift(plugin);
+    } else {
+      unpin.forEach((p, index) => {
+        if (p.name === plugin.name) {
+          unpin.splice(index, 1);
+        }
+      });
+      unpin.unshift(plugin);
    }
+    if (state.pluginHistory.length > 8) {
+      unpin.pop();
+    }
+    state.pluginHistory = [...pin, ...unpin];
+    const result = window.rubick.db.get(PLUGIN_HISTORY) || {};
+    window.rubick.db.put({
+      _id: PLUGIN_HISTORY,
+      _rev: result._rev,
+      data: JSON.parse(JSON.stringify(state.pluginHistory)),
+    });
+  };
+
+  const setPluginHistory = (plugins) => {
+    state.pluginHistory = plugins;
+    const unpin = state.pluginHistory.filter((plugin) => !plugin.pin);
+    const pin = state.pluginHistory.filter((plugin) => plugin.pin);
+    state.pluginHistory = [...pin, ...unpin];
+    const result = window.rubick.db.get(PLUGIN_HISTORY) || {};
+    window.rubick.db.put({
+      _id: PLUGIN_HISTORY,
+      _rev: result._rev,
+      data: JSON.parse(JSON.stringify(state.pluginHistory)),
+    });
  };

  const { searchValue, onSearch, setSearchValue, placeholder } =
@@ -206,6 +245,8 @@ const createPluginManager = (): any => {
    clipboardFile,
    clearClipboardFile,
    readClipboardContent,
+    setPluginHistory,
+    changePluginHistory,
  };
 };

--- a/src/renderer/plugins-manager/options.ts
+++ b/src/renderer/plugins-manager/options.ts
@@ -1,5 +1,5 @@
 import { ref, watch } from 'vue';
-import throttle from 'lodash.throttle';
+import debounce from 'lodash.debounce';
 import { ipcRenderer } from 'electron';
 import { getGlobal } from '@electron/remote';
 import PinyinMatch from 'pinyin-match';
@@ -130,7 +130,7 @@ const optionsManager = ({

  watch(searchValue, () => search(searchValue.value));
  // search Input operation
-  const search = throttle((value) => {
+  const search = debounce((value) => {
    if (currentPlugin.value.name) return;
    if (clipboardFile.value.length) return;
    if (!value) {
@@ -138,7 +138,7 @@ const optionsManager = ({
      return;
    }
    optionsRef.value = getOptionsFromSearchValue(value);
-  }, 500);
+  }, 100);

  const setOptionsRef = (options) => {
    optionsRef.value = options;