feat: update

README.md

@@ -1 +1,13 @@
-# utools-plugin-template
+# clipboard-manager
+
+**首次安装需要设置“跟随主程序同时启动”**
+
+轮询记录剪切板历史并保存到本地，支持文字/图片/文件。
+
+本地存储路径: `{userpath}/_utools_clipboard_manager_storage`
+
+### 快捷键
+
+`/`  `Ctrl+F` / `Ctrl+L` 聚焦搜索框
+
+`Tab` 切换分类

public/plugin.json

@@ -1,17 +1,16 @@
 {
-  "name": "clipboard",
   "version": "1.0.0",
-  "pluginName": "剪切板",
+  "pluginName": "剪贴板",
-  "description": "剪切板历史,snippet,代码片段",
+  "description": "强大的剪贴板管理工具",
-  "author": "inu1255",
+  "author": "ZiuChen",
-  "homepage": "https://github.com/inu1255/utools-clipboard",
+  "homepage": "https://github.com/ZiuChen",
   "main": "index.html",
   "preload": "preload.js",
   "development": {
     "main": "http://localhost:8081/"
   },
   "logo": "logo.png",
-  "platform": ["win32", "darwin", "linux"],
+  "platform": ["win32"],
   "features": [
     {
       "code": "clipboard",

public/preload.js

@@ -1,7 +1,7 @@
 // /*
-// 	name: powerful_clipboard_manager
+// 	name: clipboard_manager
 // 	author: Github @ZiuChen
-// 	lastUpdate: v0.0.1 2022/08/14
+// 	lastUpdate: v1.0.0 2022/08/14
 // 	desc: 监听剪贴板 读写本地文件
 // */
 

src/views/Main.vue

@@ -13,16 +13,23 @@
     </transition>
     <div class="clip-overlay" v-show="fullDataShow" @click="toggleFullData('')"></div>
     <div class="clip-switch">
-      <template v-for="tab of tabs">
+      <div class="clip-switch-items">
-        <div :class="{ active: activeTab === tab.type }" @click="toggleNav(tab.type)">
+        <template v-for="tab of tabs">
-          {{ tab.name }}
+          <div
-        </div>
+            :class="{ 'clip-switch-item': true, active: activeTab === tab.type }"
-      </template>
+            @click="toggleNav(tab.type)"
+          >
+            {{ tab.name }}
+          </div>
+        </template>
+      </div>
+
+      <div class="clip-search">
+        <input v-model="filterText" autofocus type="text" placeholder="输入关键词检索" />
+      </div>
     </div>
     <div class="clip-break"></div>
-    <div class="clip-empty-status" v-if="showList.length === 0">
+    <div class="clip-empty-status" v-if="showList.length === 0">📪 无记录</div>
-      当前记录为空，快去复制点东西来吧
-    </div>
     <div
       class="clip-item"
       v-for="(item, index) in showList"
@@ -78,6 +85,7 @@ export default {
       list: [],
       fullData: { type: 'text', data: '' },
       fullDataShow: false,
+      filterText: '',
       tabs: [
         {
           name: '📚 全部',
@@ -99,6 +107,11 @@ export default {
       activeTab: 'all'
     }
   },
+  watch: {
+    filterText: function (val) {
+      this.updateShowList()
+    }
+  },
   mounted: function () {
     this.list = window.db.dataBase.data
     this.showList = this.list.slice(0, this.GAP) // 最初展示 10条
@@ -137,6 +150,25 @@ export default {
       }
     }
     document.addEventListener('scroll', callBack)
+    document.addEventListener('keydown', (e) => {
+      const { key, ctrlKey } = e
+      const isTab = key === 'Tab'
+      const isSearch =
+        key === '/' ||
+        (ctrlKey && (key === 'F' || key === 'f')) ||
+        (ctrlKey && (key === 'L' || key === 'l'))
+      const isExit = key === 'Escape'
+      if (isTab) {
+        const l = ['all', 'text', 'image', 'file']
+        const i = l.indexOf(this.activeTab)
+        const t = i === l.length - 1 ? l[0] : l[i + 1]
+        this.toggleNav(t)
+      } else if (isSearch) {
+        document.querySelector('input').focus()
+      } else if (isExit) {
+        this.filterText = ''
+      }
+    })
   },
   methods: {
     toggleNav(type) {
@@ -146,9 +178,28 @@ export default {
     },
     updateShowList(type = this.activeTab) {
       if (type === 'all') {
-        this.showList = this.list.slice(0, this.GAP)
+        if (this.filterText) {
-      } else {
+          // 有过滤词 则过滤掉图片
+          this.showList = this.list
+            .filter((item) => item.type !== 'image')
+            .filter((item) => item.data.indexOf(this.filterText) !== -1)
+            .slice(0, this.GAP)
+        } else {
+          // 无过滤词 直接更新
+          this.showList = this.list
+            .filter((item) => item.data.indexOf(this.filterText) !== -1)
+            .slice(0, this.GAP)
+        }
+      } else if (type === 'image') {
+        // 排除掉对图片 DataURL的筛选
         this.showList = this.list.filter((item) => item.type === type).slice(0, this.GAP)
+      } else {
+        // `file`类型 在stringify的data里搜
+        // `text`类型 在data里搜
+        this.showList = this.list
+          .filter((item) => item.type === type)
+          .filter((item) => item.data.indexOf(this.filterText) !== -1)
+          .slice(0, this.GAP)
       }
       document.scrollingElement.scrollTop = 0
     },
@@ -232,19 +283,26 @@ export default {
   position: fixed;
   top: 0px;
   display: flex;
-  justify-content: left;
+  justify-content: space-between;
   align-items: center;
+  flex-direction: row;
   width: 100%;
   background-color: #eeeeee;
 }
-.clip-switch * {
+.clip-switch-items {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  flex-direction: row;
+}
+.clip-switch .clip-switch-item {
   padding: 10px 15px 10px 15px;
   margin: 10px 5px 10px 10px;
   cursor: pointer;
   border-radius: 5px;
   font-size: 14px;
 }
-.clip-switch *:hover {
+.clip-switch .clip-switch-item:hover {
   background-color: rgb(222, 222, 222);
   transition: all 0.15s ease-in-out;
 }
@@ -253,6 +311,27 @@ export default {
   background-color: white;
   transition: all 0.15s ease-in-out;
 }
+.clip-search {
+  width: 40%;
+  margin-right: 30px;
+}
+.clip-search input {
+  width: 100%;
+  /* normalize */
+  background: none;
+  outline: none;
+  border: none;
+  /* custom */
+  color: var(--text-color);
+  background-color: white;
+  height: fit-content;
+  font-size: 15px;
+  padding: 10px;
+  border-radius: 5px;
+}
+.clip-search input::placeholder {
+  color: var(--text-color-lighter);
+}
 .clip-break {
   height: 55px;
 }