✨ 支持本地启动，修改mac 下获取 APP icon 的方式

2025-07-18 22:05:05 +08:00 · 2023-09-15 16:17:52 +08:00 · 2023-09-15 16:17:52 +08:00 · c21c08c370
commit c21c08c370
parent 61b4e37fe0
24 changed files with 493 additions and 124 deletions
--- a/feature/public/package.json
+++ b/feature/public/package.json
@ -1,7 +1,7 @@
 {
  "name": "rubick-system-feature",
-  "pluginName": "rubick 系统菜单",
-  "description": "rubick 系统菜单",
+  "pluginName": "系统菜单",
+  "description": "系统菜单",
  "main": "index.html",
  "logo": "https://pic1.zhimg.com/80/v2-c09780808301668a82e6646cb42f0806_720w.png",
  "version": "0.0.0",
@ -10,19 +10,19 @@
  "features": [
    {
      "code": "market",
-      "explain": "rubick 插件市场",
+      "explain": "插件市场",
      "cmds":[
        "插件市场"
      ]
    },{
      "code": "installed",
-      "explain": "rubick 已安装插件",
+      "explain": "已安装插件",
      "cmds":[
        "已安装插件"
      ]
    },{
      "code": "settings",
-      "explain": "rubick 偏好设置",
+      "explain": "偏好设置",
      "cmds":[
        "偏好设置"
      ]
--- a/feature/public/preload.js
+++ b/feature/public/preload.js
@ -1,4 +1,21 @@
 const remote = require('@electron/remote');
+const { ipcRenderer } = require('electron');
+
+const ipcSendSync = (type, data) => {
+  const returnValue = ipcRenderer.sendSync('msg-trigger', {
+    type,
+    data,
+  });
+  if (returnValue instanceof Error) throw returnValue;
+  return returnValue;
+};
+
+const ipcSend = (type, data) => {
+  ipcRenderer.send('msg-trigger', {
+    type,
+    data,
+  });
+};

 window.market = {
  getLocalPlugins() {
@ -13,4 +30,10 @@ window.market = {
  refreshPlugin(plugin) {
    return remote.getGlobal('LOCAL_PLUGINS').refreshPlugin(plugin);
  },
+  addLocalStartPlugin(plugin) {
+    ipcSend('addLocalStartPlugin', { plugin });
+  },
+  removeLocalStartPlugin(plugin) {
+    ipcSend('removeLocalStartPlugin', { plugin });
+  },
 };
--- a/feature/src/languages/langs/en-US.ts
+++ b/feature/src/languages/langs/en-US.ts
@ -96,6 +96,9 @@ export default {
          accessToken: 'access token',
          placeholder: 'required for private network gitlab warehouse',
        },
+        localstart: {
+          title: 'Local Start',
+        },
      },
      dev: {
        title: 'Developer',
--- a/feature/src/languages/langs/zh-CN.ts
+++ b/feature/src/languages/langs/zh-CN.ts
@ -94,6 +94,9 @@ export default {
          accessToken: 'access token',
          placeholder: '内网gitlab仓库必填',
        },
+        localstart: {
+          title: '本地启动',
+        },
      },
      dev: {
        title: '开发者',
--- a/feature/src/views/settings/index.vue
+++ b/feature/src/views/settings/index.vue
@ -14,6 +14,12 @@
          </template>
          {{ $t('feature.settings.basic.title') }}
        </a-menu-item>
+        <a-menu-item key="localstart">
+          <template #icon>
+            <FolderOpenOutlined />
+          </template>
+          {{ $t('feature.settings.localstart.title') }}
+        </a-menu-item>
        <a-menu-item key="global">
          <template #icon>
            <LaptopOutlined />
@ -220,6 +226,7 @@
      </div>
      <SuperPanel v-if="currentSelect[0] === 'superpanel'" />
      <Localhost v-if="currentSelect[0] === 'localhost'" />
+      <LocalStart v-if="currentSelect[0] === 'localstart'" />
    </div>
  </div>
 </template>
@ -232,6 +239,7 @@ import {
  MinusCircleOutlined,
  PlusCircleOutlined,
  UserOutlined,
+  FolderOpenOutlined,
 } from '@ant-design/icons-vue';
 import debounce from 'lodash.debounce';
 import { ref, reactive, watch, toRefs, computed } from 'vue';
@ -239,6 +247,7 @@ import keycodes from './keycode';
 import Localhost from './localhost.vue';
 import SuperPanel from './super-panel.vue';
 import UserInfo from './user-info';
+import LocalStart from './local-start';
 import { useI18n } from 'vue-i18n';
 import localConfig from '@/confOp';

--- a/feature/src/views/settings/local-start.vue
+++ b/feature/src/views/settings/local-start.vue
@ -0,0 +1,71 @@
+<template>
+  <div class="file-container" @drop.prevent="dropFile" @dragenter="checkDrop" @dragover="checkDrop">
+    <a-alert message="可拖放文件夹到这里加入启动" type="info" show-icon />
+    <a-list item-layout="horizontal" :data-source="localStartList">
+      <template #renderItem="{ item }">
+        <a-list-item>
+          <template #actions>
+            <a key="list-loadmore-edit" @click="() => remove(item)">移除</a>
+          </template>
+          <a-list-item-meta :description="item.desc">
+            <template #title>
+              <div>{{item.name}}</div>
+            </template>
+            <template #avatar>
+              <a-avatar shape="square" :src="item.icon" />
+            </template>
+          </a-list-item-meta>
+        </a-list-item>
+      </template>
+    </a-list>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const dbId = 'rubick-local-start-app';
+
+const localStartList = ref(window.rubick.dbStorage.getItem(dbId) || []);
+
+const dropFile = (e) => {
+  const files = Array.from(e.dataTransfer.files).map((file) => {
+    const plugin = {
+      icon: window.rubick.getFileIcon(file.path),
+      value: 'plugin',
+      desc: file.path,
+      pluginType: 'app',
+      name: file.name,
+      action: `open ${file.path.replace(/ /g, '\\ ')}`,
+      keyWords: [file.name],
+      names: [file.name],
+    };
+    window.market.addLocalStartPlugin(plugin);
+    return plugin;
+  });
+  localStartList.value = [
+    ...localStartList.value,
+    ...files,
+  ];
+  window.rubick.dbStorage.setItem(dbId, JSON.parse(JSON.stringify(localStartList.value)));
+};
+
+const remove = (item) => {
+  localStartList.value = localStartList.value.filter(app => app.desc !== item.desc);
+  window.rubick.dbStorage.setItem(dbId, JSON.parse(JSON.stringify(localStartList.value)));
+  window.market.removeLocalStartPlugin(JSON.parse(JSON.stringify(item)));
+};
+
+const checkDrop = (e) => {
+  e.preventDefault();
+};
+</script>
+
+<style lang="less">
+.file-container {
+  box-sizing: border-box;
+  width: 100%;
+  overflow-x: hidden;
+  background: var(--color-body-bg);
+  height: calc(~'100vh - 106px');
+}
+</style>
--- a/package.json
+++ b/package.json
@ -33,6 +33,7 @@
    "lodash.throttle": "^4.1.1",
    "node-key-sender": "^1.0.11",
    "pouchdb": "^7.2.2",
+    "simple-plist": "0.2.1",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0",
--- a/public/feature/package.json
+++ b/public/feature/package.json
@ -1,7 +1,7 @@
 {
  "name": "rubick-system-feature",
-  "pluginName": "rubick 系统菜单",
-  "description": "rubick 系统菜单",
+  "pluginName": "系统菜单",
+  "description": "系统菜单",
  "main": "index.html",
  "logo": "https://pic1.zhimg.com/80/v2-c09780808301668a82e6646cb42f0806_720w.png",
  "version": "0.0.0",
@ -10,19 +10,19 @@
  "features": [
    {
      "code": "market",
-      "explain": "rubick 插件市场",
+      "explain": "插件市场",
      "cmds":[
        "插件市场"
      ]
    },{
      "code": "installed",
-      "explain": "rubick 已安装插件",
+      "explain": "已安装插件",
      "cmds":[
        "已安装插件"
      ]
    },{
      "code": "settings",
-      "explain": "rubick 偏好设置",
+      "explain": "偏好设置",
      "cmds":[
        "偏好设置"
      ]
--- a/public/feature/preload.js
+++ b/public/feature/preload.js
@ -1,4 +1,21 @@
 const remote = require('@electron/remote');
+const { ipcRenderer } = require('electron');
+
+const ipcSendSync = (type, data) => {
+  const returnValue = ipcRenderer.sendSync('msg-trigger', {
+    type,
+    data,
+  });
+  if (returnValue instanceof Error) throw returnValue;
+  return returnValue;
+};
+
+const ipcSend = (type, data) => {
+  ipcRenderer.send('msg-trigger', {
+    type,
+    data,
+  });
+};

 window.market = {
  getLocalPlugins() {
@ -13,4 +30,10 @@ window.market = {
  refreshPlugin(plugin) {
    return remote.getGlobal('LOCAL_PLUGINS').refreshPlugin(plugin);
  },
+  addLocalStartPlugin(plugin) {
+    ipcSend('addLocalStartPlugin', { plugin });
+  },
+  removeLocalStartPlugin(plugin) {
+    ipcSend('removeLocalStartPlugin', { plugin });
+  },
 };
--- a/src/common/utils/getWindowHeight.ts
+++ b/src/common/utils/getWindowHeight.ts
@ -1,12 +1,14 @@
 const WINDOW_MAX_HEIGHT = 600;
 const WINDOW_MIN_HEIGHT = 60;
 const PRE_ITEM_HEIGHT = 60;
+const HISTORY_HEIGHT = 80;

-export default (searchList: Array<any>): number => {
-  if (!searchList) return WINDOW_MAX_HEIGHT;
-  if (!searchList.length) return WINDOW_MIN_HEIGHT;
-  return searchList.length * PRE_ITEM_HEIGHT + WINDOW_MIN_HEIGHT + 5 >
+export default (searchList: Array<any>, historyList): number => {
+  const defaultHeight = historyList.length ? HISTORY_HEIGHT : 0;
+  if (!searchList) return WINDOW_MAX_HEIGHT + defaultHeight;
+  if (!searchList.length) return WINDOW_MIN_HEIGHT + defaultHeight;
+  return searchList.length * PRE_ITEM_HEIGHT + WINDOW_MIN_HEIGHT >
    WINDOW_MAX_HEIGHT
    ? WINDOW_MAX_HEIGHT
-    : searchList.length * PRE_ITEM_HEIGHT + WINDOW_MIN_HEIGHT + 5;
+    : searchList.length * PRE_ITEM_HEIGHT + WINDOW_MIN_HEIGHT;
 };
--- a/src/core/app-search/darwin.ts
+++ b/src/core/app-search/darwin.ts
@ -16,16 +16,7 @@ if (!exists) {

 const isZhRegex = /[\u4e00-\u9fa5]/;

-async function getAppIcon(
-  appPath: string,
-  nativeImage: {
-    createThumbnailFromPath: (
-      iconPath: string,
-      size: { width: number; height: number }
-    ) => { toDataURL: () => string };
-  },
-  name: string
-) {
+async function getAppIcon(appPath: string, nativeImage: any, name: string) {
  try {
    const iconpath = path.join(icondir, `${name}.png`);
    const iconnone = path.join(icondir, `${name}.none`);
@ -33,52 +24,40 @@ async function getAppIcon(
    const existsnone = fs.existsSync(iconnone);
    if (exists) return true;
    if (existsnone) return false;
-    const appName: string = appPath.split('/').pop() || '';
-    const extname: string = path.extname(appName);
-    const appSubStr: string = appName.split(extname)[0];
-    const path1 = path.join(appPath, `/Contents/Resources/App.icns`);
-    const path2 = path.join(appPath, `/Contents/Resources/AppIcon.icns`);
-    const path3 = path.join(appPath, `/Contents/Resources/${appSubStr}.icns`);
-    const path4 = path.join(
-      appPath,
-      `/Contents/Resources/${appSubStr.replace(' ', '')}.icns`
-    );
-    let iconPath: string = path1;
-    if (fs.existsSync(path1)) {
-      iconPath = path1;
-    } else if (fs.existsSync(path2)) {
-      iconPath = path2;
-    } else if (fs.existsSync(path3)) {
-      iconPath = path3;
-    } else if (fs.existsSync(path4)) {
-      iconPath = path4;
-    } else {
-      // 性能最低的方式
-      const resourceList = fs.readdirSync(
-        path.join(appPath, `/Contents/Resources`)
-      );
-      const iconName = resourceList.filter(
-        (file) => path.extname(file) === '.icns'
-      )[0];
-      if (!iconName) {
-        fs.writeFileSync(iconnone, '');
-        return false;
-      }
-      iconPath = path.join(appPath, `/Contents/Resources/${iconName}`);
-    }
-    const img = await nativeImage.createThumbnailFromPath(iconPath, {
-      width: 64,
-      height: 64,
-    });
-
-    const base64Data = img.toDataURL().replace(/^data:.+;base64,/, '"');
-
-    const result = Buffer.from(base64Data, 'base64');
-
-    fs.writeFile(iconpath, result, 'base64', () => {
-      // todo
-    });
-
+    // const appName: string = appPath.split('/').pop() || '';
+    // const extname: string = path.extname(appName);
+    // const appSubStr: string = appName.split(extname)[0];
+    // const path1 = path.join(appPath, `/Contents/Resources/App.icns`);
+    // const path2 = path.join(appPath, `/Contents/Resources/AppIcon.icns`);
+    // const path3 = path.join(appPath, `/Contents/Resources/${appSubStr}.icns`);
+    // const path4 = path.join(
+    //   appPath,
+    //   `/Contents/Resources/${appSubStr.replace(' ', '')}.icns`
+    // );
+    // let iconPath: string = path1;
+    // if (fs.existsSync(path1)) {
+    //   iconPath = path1;
+    // } else if (fs.existsSync(path2)) {
+    //   iconPath = path2;
+    // } else if (fs.existsSync(path3)) {
+    //   iconPath = path3;
+    // } else if (fs.existsSync(path4)) {
+    //   iconPath = path4;
+    // } else {
+    //   // 性能最低的方式
+    //   const resourceList = fs.readdirSync(
+    //     path.join(appPath, `/Contents/Resources`)
+    //   );
+    //   const iconName = resourceList.filter(
+    //     (file) => path.extname(file) === '.icns'
+    //   )[0];
+    //   if (!iconName) {
+    //     fs.writeFileSync(iconnone, '');
+    //     return false;
+    //   }
+    //   iconPath = path.join(appPath, `/Contents/Resources/${iconName}`);
+    // }
+    await getMacApps.app2png(appPath, iconpath);
    return true;
  } catch (e) {
    return false;
--- a/src/core/app-search/get-mac-app/app2png.ts
+++ b/src/core/app-search/get-mac-app/app2png.ts
@ -0,0 +1,109 @@
+import path from 'path';
+import fs from 'fs';
+import { exec } from 'child_process';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const plist = require('simple-plist');
+
+const getIconFile = (appFileInput) => {
+  return new Promise((resolve, reject) => {
+    const plistPath = path.join(appFileInput, 'Contents', 'Info.plist');
+    plist.readFile(plistPath, (err, data) => {
+      if (err || !data.CFBundleIconFile) {
+        return resolve(
+          '/System/Library/CoreServices/CoreTypes.bundle/Contents/Resources/GenericApplicationIcon.icns'
+        );
+      }
+      const iconFile = path.join(
+        appFileInput,
+        'Contents',
+        'Resources',
+        data.CFBundleIconFile
+      );
+      const iconFiles = [iconFile, iconFile + '.icns', iconFile + '.tiff'];
+      const existedIcon = iconFiles.find((iconFile) => {
+        return fs.existsSync(iconFile);
+      });
+      resolve(
+        existedIcon ||
+          '/System/Library/CoreServices/CoreTypes.bundle/Contents/Resources/GenericApplicationIcon.icns'
+      );
+    });
+  });
+};
+
+// const sortIcons = (icons) => {
+//   const aWins = -1;
+//   const bWins = 1;
+//   const catWins = 0;
+//   return icons.sort((a, b) => {
+//     const aSize = parseInt(a.match(/(\d+)x\1/)[1], 10);
+//     const bSize = parseInt(b.match(/(\d+)x\1/)[1], 10);
+//     if (aSize === bSize) {
+//       if (a.indexOf('@2x') > -1) return aWins;
+//       if (b.indexOf('@2x') > -1) return bWins;
+//       return catWins;
+//     }
+//     if (aSize > bSize) return aWins;
+//     if (aSize < bSize) return bWins;
+//     return catWins;
+//   });
+// };
+
+// const icnsToPng = (iconFile, pngFileOutput) => {
+//   const outputDir = pngFileOutput.split('.')[0] + '.iconset'
+//   return new Promise((resolve, reject) => {
+//     exec(`iconutil --convert iconset '${iconFile}' --output '${outputDir}'`, (error) => {
+//       if (error) return reject(error)
+//       fs.readdir(outputDir, (error, files) => {
+//         if (error) {
+//           return resolve(tiffToPng(iconFile, pngFileOutput))
+//         }
+//         const realIcons = files.map((file) => {
+//           return path.join(outputDir, file)
+//         })
+//         const biggestIcon = sortIcons(realIcons).find(Boolean)
+//         fs.rename(biggestIcon, pngFileOutput, (error) => {
+//           error ? reject(error) : resolve(realIcons.filter((file) => {
+//             return file !== biggestIcon
+//           }))
+//         })
+//       })
+//     })
+//   }).then((files) => {
+//     // Cleanup temp icons
+//     return Promise.all(files.map((file) => {
+//       return new Promise((resolve, reject) => {
+//         fs.unlink(file, (error) => {
+//           error ? reject(error) : resolve()
+//         })
+//       })
+//     }))
+//   }).then(() => {
+//     // Cleanup temp directory
+//     return new Promise((resolve, reject) => {
+//       fs.rmdir(outputDir, (error) => {
+//         error ? reject(error) : resolve()
+//       })
+//     })
+//   })
+// }
+
+const tiffToPng = (iconFile, pngFileOutput) => {
+  return new Promise((resolve, reject) => {
+    exec(
+      `sips -s format png '${iconFile}' --out '${pngFileOutput}' --resampleHeightWidth 64 64`,
+      (error) => {
+        error ? reject(error) : resolve(null);
+      }
+    );
+  });
+};
+
+const app2png = (appFileInput, pngFileOutput) => {
+  return getIconFile(appFileInput).then((iconFile) => {
+    return tiffToPng(iconFile, pngFileOutput);
+  });
+};
+
+export default app2png;
--- a/src/core/app-search/get-mac-app/index.ts
+++ b/src/core/app-search/get-mac-app/index.ts
@ -1,4 +1,5 @@
-import getApps from "./getApps";
+import getApps from './getApps';
+import app2png from './app2png';

 export default {
  getApps: () => {
@ -7,4 +8,5 @@ export default {
  isInstalled: (appName) => {
    return new Promise((resolve, reject) => getApps(resolve, reject, appName));
  },
+  app2png,
 };
--- a/src/main/common/api.ts
+++ b/src/main/common/api.ts
@ -319,6 +319,22 @@ class API extends DBInstance {
      ks.sendKeys(keys);
    }
  }
+
+  public addLocalStartPlugin({ data: { plugin } }, window) {
+    window.webContents.executeJavaScript(
+      `window.addLocalStartPlugin(${JSON.stringify({
+        plugin,
+      })})`
+    );
+  }
+
+  public removeLocalStartPlugin({ data: { plugin } }, window) {
+    window.webContents.executeJavaScript(
+      `window.removeLocalStartPlugin(${JSON.stringify({
+        plugin,
+      })})`
+    );
+  }
 }

 export default new API();
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@ -12,6 +12,7 @@
      :searchValue="searchValue"
      :placeholder="placeholder"
      :pluginLoading="pluginLoading"
+      :pluginHistory="pluginHistory"
      :clipboardFile="clipboardFile || []"
      @choosePlugin="choosePlugin"
      @focus="searchFocus"
@ -20,6 +21,7 @@
      @readClipboardContent="readClipboardContent"
    />
    <Result
+      :pluginHistory="pluginHistory"
      :currentPlugin="currentPlugin"
      :searchValue="searchValue"
      :currentSelect="currentSelect"
@ -37,7 +39,6 @@ import Search from './components/search.vue';
 import getWindowHeight from '../common/utils/getWindowHeight';
 import createPluginManager from './plugins-manager';
 import useDrag from '../common/utils/dragWindow';
-import commonConst from '@/common/utils/commonConst';

 const { onMouseDown } = useDrag();
 const remote = window.require('@electron/remote');
@ -58,6 +59,7 @@ const {
  setSearchValue,
  clearClipboardFile,
  readClipboardContent,
+  pluginHistory,
 } = createPluginManager();

 initPlugins();
@ -74,24 +76,37 @@ getPluginInfo({
  remote.getGlobal('LOCAL_PLUGINS').addPlugin(res);
 });

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

 const changeIndex = (index) => {
-  if (!options.value.length) return;
+  if (!options.value.length) {
+    if (!pluginHistory.value.length) return;
+    if (
+      currentSelect.value + index > pluginHistory.value.length - 1 ||
+      currentSelect.value + index < 0
+    ) {
+      currentSelect.value = 0;
+      return;
+    }
+    currentSelect.value = currentSelect.value + index;
+    return;
+  }
  if (
    currentSelect.value + index > options.value.length - 1 ||
    currentSelect.value + index < 0
-  )
+  ) {
+    currentSelect.value = 0;
    return;
+  }
  currentSelect.value = currentSelect.value + index;
 };

@ -101,14 +116,20 @@ const openMenu = (ext) => {
    feature: menuPluginInfo.value.features[0],
    cmd: '插件市场',
    ext,
+    click: () => openMenu(ext),
  });
 };

 window.rubick.openMenu = openMenu;

 const choosePlugin = () => {
-  const currentChoose = options.value[currentSelect.value];
-  currentChoose.click();
+  if (options.value.length) {
+    const currentChoose = options.value[currentSelect.value];
+    currentChoose.click();
+  } else {
+    const currentChoose = pluginHistory.value[currentSelect.value];
+    currentChoose.click();
+  }
 };

 const clearSearchValue = () => {
--- a/src/renderer/assets/var.less
+++ b/src/renderer/assets/var.less
@ -5,7 +5,7 @@
  // 背景色
  --color-body-bg: #fff;
  --color-menu-bg: #f3efef;
-  --color-list-hover: #e2e2e2;
+  --color-list-hover: #ebeee8;
  --color-input-hover: #fff;
  // 边框
  --color-border-light: #f0f0f0;
--- a/src/renderer/components/result.vue
+++ b/src/renderer/components/result.vue
@ -1,14 +1,24 @@
 <template>
  <div
-    v-show="
-      !!options.length &&
-      (searchValue || !!clipboardFile.length) &&
-      !currentPlugin.name
-    "
+    v-show="!currentPlugin.name"
    class="options"
    ref="scrollDom"
  >
-    <a-list item-layout="horizontal" :dataSource="sort(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'"
+          :span="3"
+          v-for="(item, index) in pluginHistory"
+          :key="index"
+        >
+          <a-avatar style="border-radius: 0" :src="item.icon" />
+          <div class="name ellpise">{{item.pluginName || item._name || item.name}}</div>
+        </a-col>
+      </a-row>
+    </div>
+    <a-list v-else item-layout="horizontal" :dataSource="sort(options)">
      <template #renderItem="{ item, index }">
        <a-list-item
          @click="() => item.click()"
@ -52,6 +62,7 @@ const props = defineProps({
    default: 0,
  },
  currentPlugin: {},
+  pluginHistory: (() => [])(),
  clipboardFile: (() => [])(),
 });

@ -91,15 +102,45 @@ const sort = (options) => {
 </script>

 <style lang="less">
+.ellpise {
+  overflow:hidden;
+  text-overflow:ellipsis;
+  display:-webkit-box;
+  -webkit-line-clamp:1;
+  -webkit-box-orient:vertical;
+}
+
 .options {
  position: absolute;
-  top: 62px;
+  top: 60px;
  left: 0;
  width: 100%;
  z-index: 99;
-  max-height: calc(~'100vh - 64px');
+  max-height: calc(~'100vh - 60px');
  overflow: auto;
  background: var(--color-body-bg);
+  .history-plugins {
+    width: 100%;
+    border-top: 1px dashed #ddd;
+    box-sizing: border-box;
+    .history-item {
+      box-sizing: border-box;
+      height: 79px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      border-right: 1px dashed #ddd;
+      &.active {
+        background: var(--color-list-hover);
+      }
+    }
+    .name {
+      margin-top: 4px;
+      width: 100%;
+      text-align: center;
+    }
+  }
  .op-item {
    padding: 0 10px;
    height: 60px;
--- a/src/renderer/components/search.vue
+++ b/src/renderer/components/search.vue
@ -19,6 +19,7 @@
      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"
@ -71,6 +72,7 @@ const props: any = defineProps({
    type: String,
    default: '',
  },
+  pluginHistory: (() => [])(),
  currentPlugin: {},
  pluginLoading: Boolean,
  clipboardFile: (() => [])(),
@ -107,7 +109,7 @@ const keydownEvent = (e, key: string) => {
      modifiers,
    },
  });
-  const runPluginDisable = e.target.value === '' || props.currentPlugin.name;
+  const runPluginDisable = ((e.target.value === '' && !props.pluginHistory.length) || props.currentPlugin.name) ;
  switch (key) {
    case 'up':
      emit('changeCurrent', -1);
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@ -7,6 +7,8 @@ import {
  Avatar,
  Tag,
  ConfigProvider,
+  Row,
+  Col,
 } from 'ant-design-vue';
 import App from './App.vue';
 import localConfig from './confOp';
@ -26,4 +28,6 @@ createApp(App)
  .use(Input)
  .use(Avatar)
  .use(Tag)
+  .use(Row)
+  .use(Col)
  .mount('#app');
--- a/src/renderer/plugins-manager/clipboardWatch.ts
+++ b/src/renderer/plugins-manager/clipboardWatch.ts
@ -56,7 +56,7 @@ export default ({ currentPlugin, optionsRef, openPlugin, setOptionsRef }) => {
              regImg.test(ext) &&
              fileList.length === 1
            ) {
-              options.push({
+              const option = {
                name: cmd.label,
                value: 'plugin',
                icon: plugin.logo,
@ -75,17 +75,19 @@ export default ({ currentPlugin, optionsRef, openPlugin, setOptionsRef }) => {
                        .toDataURL(),
                    },
                    openPlugin,
+                    option,
                  });
                  clearClipboardFile();
                },
-              });
+              };
+              options.push(option);
            }
            // 如果是文件，且符合文件正则类型
            if (
              fileList.length > 1 ||
              (cmd.type === 'file' && new RegExp(cmd.match).test(ext))
            ) {
-              options.push({
+              const option = {
                name: cmd,
                value: 'plugin',
                icon: plugin.logo,
@ -96,6 +98,7 @@ export default ({ currentPlugin, optionsRef, openPlugin, setOptionsRef }) => {
                    plugin,
                    fe,
                    cmd,
+                    option,
                    ext: {
                      code: fe.code,
                      type: cmd.type || 'text',
@ -105,7 +108,8 @@ export default ({ currentPlugin, optionsRef, openPlugin, setOptionsRef }) => {
                  });
                  clearClipboardFile();
                },
-              });
+              };
+              options.push(option);
            }
          });
        });
@ -155,7 +159,7 @@ export default ({ currentPlugin, optionsRef, openPlugin, setOptionsRef }) => {
      feature.forEach((fe) => {
        fe.cmds.forEach((cmd) => {
          if (cmd.type === 'img') {
-            options.push({
+            const option = {
              name: cmd.label,
              value: 'plugin',
              icon: plugin.logo,
@ -172,10 +176,12 @@ export default ({ currentPlugin, optionsRef, openPlugin, setOptionsRef }) => {
                    payload: dataUrl,
                  },
                  openPlugin,
+                  option,
                });
                clearClipboardFile();
              },
-            });
+            };
+            options.push(option);
          }
        });
      });
--- a/src/renderer/plugins-manager/index.ts
+++ b/src/renderer/plugins-manager/index.ts
@ -21,12 +21,35 @@ const createPluginManager = (): any => {
    localPlugins: [],
    currentPlugin: {},
    pluginLoading: false,
+    pluginHistory: [],
  });

-  const appList = ref([]);
+  const appList: any = ref([]);

  const initPlugins = async () => {
    appList.value = await appSearch(nativeImage);
+    initLocalStartPlugin();
+  };
+
+  const initLocalStartPlugin = () => {
+    const result = ipcRenderer.sendSync('msg-trigger', {
+      type: 'dbGet',
+      data: {
+        id: 'rubick-local-start-app',
+      },
+    });
+    if (result && result.value) {
+      appList.value = [...appList.value, ...result.value];
+    }
+  };
+
+  window.removeLocalStartPlugin = ({ plugin }) => {
+    appList.value = appList.value.filter((app) => app.desc !== plugin.desc);
+  };
+
+  window.addLocalStartPlugin = ({ plugin }) => {
+    window.removeLocalStartPlugin({ plugin });
+    appList.value.push(plugin);
  };

  const loadPlugin = async (plugin) => {
@ -43,7 +66,7 @@ const createPluginManager = (): any => {
    state.pluginLoading = false;
  };

-  const openPlugin = async (plugin) => {
+  const openPlugin = async (plugin, option) => {
    if (plugin.pluginType === 'ui' || plugin.pluginType === 'system') {
      if (state.currentPlugin && state.currentPlugin.name === plugin.name) {
        return;
@ -66,6 +89,23 @@ const createPluginManager = (): any => {
    if (plugin.pluginType === 'app') {
      execSync(plugin.action);
    }
+    window.initRubick();
+    changePluginHistory({
+      ...plugin,
+      ...option,
+    });
+  };
+
+  const changePluginHistory = (plugin) => {
+    if (state.pluginHistory.length >= 8) {
+      state.pluginHistory.pop();
+    }
+    state.pluginHistory.forEach((p, index) => {
+      if (p.name === plugin.name) {
+        state.pluginHistory.splice(index, 1);
+      }
+    });
+    state.pluginHistory.unshift(plugin);
  };

  const { searchValue, onSearch, setSearchValue, placeholder } =
--- a/src/renderer/plugins-manager/options.ts
+++ b/src/renderer/plugins-manager/options.ts
@ -52,29 +52,33 @@ const optionsManager = ({
        const cmds = searchKeyValues(fe.cmds, value, strict);
        options = [
          ...options,
-          ...cmds.map((cmd) => ({
-            name: cmd.label || cmd,
-            value: 'plugin',
-            icon: plugin.logo,
-            desc: fe.explain,
-            type: plugin.pluginType,
-            zIndex: cmd.label ? 0 : 1, // 排序权重
-            click: () => {
-              pluginClickEvent({
-                plugin,
-                fe,
-                cmd,
-                ext: cmd.type
-                  ? {
-                      code: fe.code,
-                      type: cmd.type || 'text',
-                      payload: searchValue.value,
-                    }
-                  : null,
-                openPlugin,
-              });
-            },
-          })),
+          ...cmds.map((cmd) => {
+            const option = {
+              name: cmd.label || cmd,
+              value: 'plugin',
+              icon: plugin.logo,
+              desc: fe.explain,
+              type: plugin.pluginType,
+              zIndex: cmd.label ? 0 : 1, // 排序权重
+              click: () => {
+                pluginClickEvent({
+                  plugin,
+                  fe,
+                  cmd,
+                  ext: cmd.type
+                    ? {
+                        code: fe.code,
+                        type: cmd.type || 'text',
+                        payload: searchValue.value,
+                      }
+                    : null,
+                  openPlugin,
+                  option,
+                });
+              },
+            };
+            return option;
+          }),
        ];
      });
    });
@ -106,13 +110,14 @@ const optionsManager = ({
          }
        })
        .map((plugin) => {
-          return {
+          const option = {
            ...plugin,
            zIndex: 1,
            click: () => {
-              openPlugin(plugin);
+              openPlugin(plugin, option);
            },
          };
+          return option;
        }),
    ];
    return options;
--- a/src/renderer/plugins-manager/pluginClickEvent.ts
+++ b/src/renderer/plugins-manager/pluginClickEvent.ts
@ -3,7 +3,14 @@ import path from 'path';
 import { toRaw } from 'vue';
 import commonConst from '@/common/utils/commonConst';

-export default function pluginClickEvent({ plugin, fe, cmd, ext, openPlugin }) {
+export default function pluginClickEvent({
+  plugin,
+  fe,
+  cmd,
+  ext,
+  openPlugin,
+  option,
+}) {
  const pluginPath = path.resolve(baseDir, 'node_modules', plugin.name);
  const pluginDist = {
    ...toRaw(plugin),
@ -24,5 +31,5 @@ export default function pluginClickEvent({ plugin, fe, cmd, ext, openPlugin }) {
      ? 'http://localhost:8081/#/'
      : `file://${__static}/feature/index.html`;
  }
-  openPlugin(pluginDist);
+  openPlugin(pluginDist, option);
 }
--- a/src/renderer/shims-vue.d.ts
+++ b/src/renderer/shims-vue.d.ts
@ -21,6 +21,8 @@ interface Window {
  loadPlugin: (plugin: any) => void;
  updatePlugin: (plugin: any) => void;
  initRubick: () => void;
+  addLocalStartPlugin: (plugin: any) => void;
+  removeLocalStartPlugin: (plugin: any) => void;
  setCurrentPlugin: (plugin: any) => void;
  pluginLoaded: () => void;
  getMainInputInfo: () => any;