diff --git a/README.md b/README.md index b71325f..94f78a7 100644 --- a/README.md +++ b/README.md @@ -1 +1,13 @@ -# utools-plugin-template +# clipboard-manager + +**首次安装需要设置“跟随主程序同时启动”** + +轮询记录剪切板历史并保存到本地,支持文字/图片/文件。 + +本地存储路径: `{userpath}/_utools_clipboard_manager_storage` + +### 快捷键 + +`/` `Ctrl+F` / `Ctrl+L` 聚焦搜索框 + +`Tab` 切换分类 diff --git a/public/logo.png b/public/logo.png index 62db9f3..7327248 100644 Binary files a/public/logo.png and b/public/logo.png differ diff --git a/public/plugin.json b/public/plugin.json index 2af1fab..bc7d675 100644 --- a/public/plugin.json +++ b/public/plugin.json @@ -1,17 +1,16 @@ { - "name": "clipboard", "version": "1.0.0", - "pluginName": "剪切板", - "description": "剪切板历史,snippet,代码片段", - "author": "inu1255", - "homepage": "https://github.com/inu1255/utools-clipboard", + "pluginName": "剪贴板", + "description": "强大的剪贴板管理工具", + "author": "ZiuChen", + "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", diff --git a/public/preload.js b/public/preload.js index e664ff3..25c647e 100644 --- a/public/preload.js +++ b/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: 监听剪贴板 读写本地文件 // */ diff --git a/src/views/Main.vue b/src/views/Main.vue index 340be66..267d20e 100644 --- a/src/views/Main.vue +++ b/src/views/Main.vue @@ -13,16 +13,23 @@
- +
+ +
+ +
-
- 当前记录为空,快去复制点东西来吧 -
+
📪 无记录
{ + 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) - } else { + if (this.filterText) { + // 有过滤词 则过滤掉图片 + 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; }