✨ 支持 ctrl/command + v 图片匹配

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/rubick.iml" filepath="$PROJECT_DIR$/.idea/rubick.iml" />
-    </modules>
-  </component>
-</project>

.idea/rubick.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

src/renderer/App.vue

@@ -15,6 +15,7 @@
         @choosePlugin="choosePlugin"
         @focus="searchFocus"
         @clearClipbord="clearClipboardFile"
+        @readClipboardContent="readClipboardContent"
       />
     </div>
     <Result
@@ -50,6 +51,7 @@ const {
   searchFocus,
   clipboardFile,
   clearClipboardFile,
+  readClipboardContent,
 } = createPluginManager();
 
 initPlugins();

src/renderer/components/search.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="rubick-select">
     <div class="select-tag" v-show="currentPlugin.cmd">{{ currentPlugin.cmd }}</div>
-    <div class="clipboard-tag" v-if="!!clipboardFile.length">
+    <div :class="clipboardFile[0].name ? 'clipboard-tag' : 'clipboard-img'" v-if="!!clipboardFile.length">
-      <img :src="clipboardFile[0].isFile ? require('../assets/file.png') : require('../assets/folder.png')" />
+      <img :src="getIcon()" />
       {{ clipboardFile[0].name }}
     </div>
     <a-input
@@ -77,6 +77,7 @@ const emit = defineEmits([
   "changeSelect",
   "choosePlugin",
   "focus",
+  "readClipboardContent",
 ]);
 
 const keydownEvent = (e, index) => {
@@ -101,9 +102,15 @@ const keydownEvent = (e, index) => {
 };
 
 const checkNeedInit = (e) => {
+  const { ctrlKey, metaKey } = e;
+
   if (e.target.value === "" && e.keyCode === 8) {
     closeTag();
   }
+  // 手动粘贴
+  if ((ctrlKey || metaKey) && e.key === "v") {
+    emit("readClipboardContent");
+  }
 };
 
 const targetSearch = ({ value }) => {
@@ -166,6 +173,11 @@ const changeHideOnBlur = () => {
   config.value = cfg;
 };
 
+const getIcon = () => {
+  if (props.clipboardFile[0].dataUrl) return props.clipboardFile[0].dataUrl;
+  return props.clipboardFile[0].isFile ? require("../assets/file.png") : require("../assets/folder.png")
+}
+
 const newWindow = () => {
   // todo
 };
@@ -259,5 +271,18 @@ const newWindow = () => {
       margin-right: 6px;
     }
   }
+  .clipboard-img {
+    white-space: pre;
+    user-select: none;
+    font-size: 16px;
+    height: 32px;
+    position: relative;
+    align-items: center;
+    display: flex;
+    img {
+      width: 32px;
+      height: 32px;
+    }
+  }
 }
 </style>

src/renderer/plugins-manager/clipboardWatch.ts

@@ -128,10 +128,63 @@ export default ({
     clipboardFile.value = [];
     optionsRef.value = [];
   };
+  // 触发 ctrl + v 主动粘贴时
+  const readClipboardContent = () => {
+    // read image
+    const img = clipboard.readImage();
+    const dataUrl = img.toDataURL();
+    if (!dataUrl.replace("data:image/png;base64,", "")) return;
+    clipboardFile.value = [
+      {
+        isFile: true,
+        isDirectory: false,
+        path: null,
+        dataUrl,
+      }
+    ];
+    const localPlugins = remote.getGlobal("LOCAL_PLUGINS").getLocalPlugins();
+    const options: any = [];
+    // 再正则插件
+    localPlugins.forEach((plugin) => {
+      const feature = plugin.features;
+      // 系统插件无 features 的情况，不需要再搜索
+      if (!feature) return;
+      feature.forEach((fe) => {
+        fe.cmds.forEach((cmd) => {
+          if (cmd.type === "img") {
+            options.push({
+              name: cmd.label,
+              value: "plugin",
+              icon: plugin.logo,
+              desc: fe.explain,
+              type: plugin.pluginType,
+              click: () => {
+                pluginClickEvent({
+                  plugin,
+                  fe,
+                  cmd,
+                  ext: {
+                    code: fe.code,
+                    type: cmd.type || "text",
+                    payload: dataUrl,
+                  },
+                  openPlugin,
+                });
+                clearClipboardFile();
+              },
+            });
+          }
+        });
+      });
+
+      setOptionsRef(options);
+    });
+  };
 
   return {
     searchFocus,
     clipboardFile,
     clearClipboardFile,
+    readClipboardContent,
   };
 };

src/renderer/plugins-manager/index.ts

@@ -56,7 +56,7 @@ const createPluginManager = (): any => {
 
   const { searchValue, onSearch, setSearchValue, placeholder } =
     searchManager();
-  const { options, searchFocus, clipboardFile, clearClipboardFile } =
+  const { options, searchFocus, clipboardFile, clearClipboardFile, readClipboardContent } =
     optionsManager({
       searchValue,
       appList,
@@ -124,6 +124,7 @@ const createPluginManager = (): any => {
     searchFocus,
     clipboardFile,
     clearClipboardFile,
+    readClipboardContent,
   };
 };
 

src/renderer/plugins-manager/options.ts

@@ -116,7 +116,7 @@ const optionsManager = ({
     optionsRef.value = options;
   };
 
-  const { searchFocus, clipboardFile, clearClipboardFile } = useFocus({
+  const { searchFocus, clipboardFile, clearClipboardFile, readClipboardContent } = useFocus({
     currentPlugin,
     optionsRef,
     openPlugin,
@@ -128,6 +128,7 @@ const optionsManager = ({
     searchFocus,
     clipboardFile,
     clearClipboardFile,
+    readClipboardContent,
   };
 };