✨ Added clipboard search shortcut configuration

Author: rtugeek

package.json

@@ -23,7 +23,7 @@
     "@vueuse/motion": "2.0.0-beta.12",
     "@vueuse/router": "^9.9.0",
     "@widget-js/core": "^0.11.22-beta.1",
-    "@widget-js/vue3": "^0.11.21-rc.2",
+    "@widget-js/vue3": "^0.11.21-rc.5",
     "animate.css": "^4.1.1",
     "axios": "^1.6.0",
     "color": "^4.2.3",

src/widgets/clipboard/assets/baidu.png public/images/logo/baidu.png

@@ -366,38 +366,6 @@
       "configPagePath": "/widget/config/countdown2",
       "routes": []
     },
-    {
-      "name": "cn.widgetjs.widgets.countdown",
-      "title": {
-        "zh-CN": "倒计时"
-      },
-      "description": {
-        "zh-CN": "简单的倒计时组件，支持农历"
-      },
-      "keywords": [
-        "recommend"
-      ],
-      "security": false,
-      "permissions": [],
-      "lang": "zh-CN",
-      "width": 2,
-      "height": 2,
-      "maxWidth": 4,
-      "webviewTag": false,
-      "maxHeight": 4,
-      "minWidth": 2,
-      "minHeight": 2,
-      "movable": true,
-      "singleton": false,
-      "resizable": true,
-      "path": "/widget/countdown",
-      "meta": {},
-      "backgroundThrottling": true,
-      "previewImage": "/images/preview_countdown.png",
-      "supportDeployMode": 17,
-      "configPagePath": "/widget/config/countdown",
-      "routes": []
-    },
     {
       "name": "cn.widgetjs.widgets.clipboard",
       "title": {
@@ -432,6 +400,38 @@
       "configPagePath": "/widget/config/clipboard",
       "routes": []
     },
+    {
+      "name": "cn.widgetjs.widgets.countdown",
+      "title": {
+        "zh-CN": "倒计时"
+      },
+      "description": {
+        "zh-CN": "简单的倒计时组件，支持农历"
+      },
+      "keywords": [
+        "recommend"
+      ],
+      "security": false,
+      "permissions": [],
+      "lang": "zh-CN",
+      "width": 2,
+      "height": 2,
+      "maxWidth": 4,
+      "webviewTag": false,
+      "maxHeight": 4,
+      "minWidth": 2,
+      "minHeight": 2,
+      "movable": true,
+      "singleton": false,
+      "resizable": true,
+      "path": "/widget/countdown",
+      "meta": {},
+      "backgroundThrottling": true,
+      "previewImage": "/images/preview_countdown.png",
+      "supportDeployMode": 17,
+      "configPagePath": "/widget/config/countdown",
+      "routes": []
+    },
     {
       "name": "cn.widgetjs.widgets.birthday_list",
       "title": {

src/widgets/clipboard/assets/bing.png public/images/logo/bing.png

@@ -1,55 +1,64 @@
-<script lang="ts">
-import {
-  WidgetConfigOption,
-  WidgetEditDialog,
-  useWidget,
-} from '@widget-js/vue3'
-import {
-  WidgetData,
-  WidgetDataApi,
-} from '@widget-js/core'
-
-export default {
-  name: '',
-  components: { WidgetEditDialog },
-  setup() {
-    const {
-      widgetData,
-      widgetParams,
-    } = useWidget(WidgetData)
-
-    // 修改成需要设置组件参数配置
-    const widgetConfigOption = new WidgetConfigOption({
-      custom: true,
-      theme: {
-        backgroundColor: true,
-        borderRadius: true,
-      },
-    })
-
-    return {
-      widgetData,
-      widgetParams,
-      widgetConfigOption,
-    }
-  },
-  methods: {
-    async onSaveClick() {
-      await WidgetDataApi.save(this.widgetData)
-      window.close()
-    },
-  },
+<script lang="ts" setup>
+import { WidgetConfigOption, WidgetEditDialog, useWidget } from '@widget-js/vue3'
+import { BroadcastApi, BroadcastEvent, BrowserWindowApi, WidgetApiEvent, WidgetData } from '@widget-js/core'
+import { useLocalStorage } from '@vueuse/core'
+import ClipboardWidget from '@/widgets/clipboard/Clipboard.widget'
+import { searchPlatformList } from '@/widgets/clipboard/model/SearchPlatform'
+
+const shortcut = useLocalStorage(`${ClipboardWidget.name}.shortcut`, 'Meta+Alt+S')
+const searchPlatform = useLocalStorage(`${ClipboardWidget.name}.platform`, 'google')
+const {
+  widgetData,
+  widgetParams,
+} = useWidget(WidgetData)
+
+const widgetConfigOption = new WidgetConfigOption({
+  custom: true,
+})
+
+async function apply() {
+  const event = new BroadcastEvent({
+    event: WidgetApiEvent.DATA_CHANGED,
+    payload: { name: ClipboardWidget.name },
+  })
+  await BroadcastApi.send(event)
 }
+
+async function save() {
+  await apply()
+  window.close()
+}
+
+BrowserWindowApi.setup({
+  width: 500,
+  height: 400,
+  center: true,
+})
 </script>
 
 <template>
   <WidgetEditDialog
     v-model="widgetData" :widget-params="widgetParams"
     :option="widgetConfigOption"
-    @confirm="onSaveClick()"
+    @apply="apply"
+    @confirm="save"
   >
     <template #custom>
-      <!--  TODO 这里写自定义表单内容          -->
+      <el-alert type="info" :closable="false">
+        按下快捷键搜索剪贴板内容，不用鼠标点击搜索框
+      </el-alert>
+      <el-form class="mt-4" label-width="100">
+        <el-form-item label="搜索快捷键">
+          <BindShortcutField v-model="shortcut" />
+        </el-form-item>
+        <el-form-item label="搜索平台">
+          <el-radio-group v-model="searchPlatform">
+            <el-radio v-for="platform in searchPlatformList" :key="platform.value" :label="platform.value">
+              {{ platform.title }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
     </template>
   </WidgetEditDialog>
 </template>

src/widgets/clipboard/assets/google.png public/images/logo/google.png

@@ -1,22 +1,22 @@
 import type { RouteRecordRaw } from 'vue-router'
-import ClipboardWidgetDefine from './Clipboard.widget'
+import ClipboardWidget from './Clipboard.widget'
 
-const path = ClipboardWidgetDefine.path
-const name = ClipboardWidgetDefine.name
+const path = ClipboardWidget.path
+const name = ClipboardWidget.name
 
-// const configUrl = ClipboardWidgetDefine.getConfigRoute()!.path;
+const configUrl = ClipboardWidget.configPagePath!
 
 const ClipboardWidgetRoutes: RouteRecordRaw[] = [
   {
     path,
     name: `${name}`,
-    component: () => import(/* webpackChunkName: "com.wisdom.widgets.clipboard" */ './ClipboardWidget.vue'),
+    component: () => import(/* webpackChunkName: "com.wisdom.widgets.clipboard" */ './ClipboardWidgetView.vue'),
+  },
+  {
+    path: configUrl,
+    name: `${name}.config`,
+    component: () => import(/* webpackChunkName: "com.wisdom.widgets.clipboard.config" */ './ClipboardConfigView.vue'),
   },
-  // {
-  //     path: configUrl,
-  //     name: `${name}.config`,
-  //     component: () => import(/* webpackChunkName: "com.wisdom.widgets.clipboard.config" */ './ClipboardConfigView.vue')
-  // }
 ]
 
 export default ClipboardWidgetRoutes

public/widget.json

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { useAppBroadcast } from '@widget-js/vue3'
+import { useAppBroadcast, useShortcutListener } from '@widget-js/vue3'
 import {
   BrowserWindowApi,
   BrowserWindowApiEvent,
   ClipboardApiEvent,
+  ShortcutApi,
 } from '@widget-js/core'
 import {
   ref,
@@ -12,12 +13,12 @@ import {
 import type { Transition } from '@vueuse/motion'
 import { useMotion } from '@vueuse/motion'
 import delay from 'lodash-es/delay'
+import { useLocalStorage } from '@vueuse/core'
 import { ClipboardData } from '@/widgets/clipboard/model/ClipboardData'
+import type { SearchEngine } from '@/widgets/clipboard/model/SearchPlatform'
+import { search, searchPlatformList } from '@/widgets/clipboard/model/SearchPlatform'
+import ClipboardWidget from '@/widgets/clipboard/Clipboard.widget'
 
-type SearchEngine = 'bing' | 'google' | 'baidu'
-// const { widgetData } = useWidget(ClipboardListData, {
-//   loadDataByWidgetName: true
-// })
 const showing = ref(false)
 const data = ref<ClipboardData | undefined>()
 
@@ -76,20 +77,6 @@ function startHideTimer() {
   }, 3000)
 }
 
-function search(se: SearchEngine) {
-  switch (se) {
-    case 'bing':
-      BrowserWindowApi.openUrl(`https://cn.bing.com/search?q=${data.value?.content}`, { external: true })
-      break
-    case 'google':
-      BrowserWindowApi.openUrl(`https://www.google.com/search?q=${data.value?.content}`, { external: true })
-      break
-    case 'baidu':
-      BrowserWindowApi.openUrl(`https://www.baidu.com/s?wd=${data.value?.content}`, { external: true })
-      break
-  }
-}
-
 watch(
   () => motionProperties.y,
   (newY) => {
@@ -111,6 +98,7 @@ async function initWindow() {
 }
 
 initWindow()
+
 useAppBroadcast([ClipboardApiEvent.CHANGED, BrowserWindowApiEvent.FOCUS], async (broadcast) => {
   if (broadcast.event == ClipboardApiEvent.CHANGED) {
     const text = broadcast.payload.content as string
@@ -122,6 +110,21 @@ useAppBroadcast([ClipboardApiEvent.CHANGED, BrowserWindowApiEvent.FOCUS], async
     startHideTimer()
   }
 })
+
+const shortcut = useLocalStorage(`${ClipboardWidget.name}.shortcut`, 'Meta+Alt+S', { listenToStorageChanges: true })
+const searchPlatform = useLocalStorage<SearchEngine>(`${ClipboardWidget.name}.platform`, 'google', { listenToStorageChanges: true })
+watch(shortcut, (newShortcut, oldValue) => {
+  ShortcutApi.unregister(oldValue)
+  ShortcutApi.register(newShortcut)
+})
+
+ShortcutApi.register(shortcut.value)
+
+useShortcutListener(() => {
+  if (data.value) {
+    search(searchPlatform.value, data.value!.content)
+  }
+})
 </script>
 
 <template>
@@ -130,14 +133,8 @@ useAppBroadcast([ClipboardApiEvent.CHANGED, BrowserWindowApiEvent.FOCUS], async
       {{ data?.content }}
     </div>
     <div class="actions">
-      <div class="search-engine" @click="search('bing')">
-        <img src="./assets/bing.png" alt="Bing" @click="search('bing')">
-      </div>
-      <div class="search-engine">
-        <img src="./assets/google.png" alt="Google" @click="search('google')">
-      </div>
-      <div class="search-engine">
-        <img src="./assets/baidu.png" alt="BaiDu" @click="search('baidu')">
+      <div v-for="platform in searchPlatformList" :key="platform.value" class="search-engine" @click="search(platform.value)">
+        <img :src="platform.icon" :alt="platform.title">
       </div>
     </div>
   </div>

src/widgets/clipboard/ClipboardConfigView.vue

@@ -0,0 +1,39 @@
+import { BrowserWindowApi } from '@widget-js/core'
+
+export type SearchEngine = 'bing' | 'google' | 'baidu'
+
+export interface SearchPlatform {
+  title: string
+  url: string
+  value: SearchEngine
+  icon: string
+}
+
+export const searchPlatformList: SearchPlatform[] = [
+  {
+    title: 'Google',
+    url: 'https://www.google.com/search?q=%s',
+    value: 'google',
+    icon: '/images/logo/google.png',
+  },
+  {
+    title: 'Bing',
+    url: 'https://cn.bing.com/search?q=%s',
+    value: 'bing',
+    icon: '/images/logo/bing.png',
+  },
+  {
+    title: '百度',
+    url: 'https://www.baidu.com/s?wd=%s',
+    value: 'baidu',
+    icon: '/images/logo/baidu.png',
+  },
+]
+
+export function search(se: SearchEngine, keyword: string) {
+  const platform = searchPlatformList.find(item => item.value === se)
+  if (platform) {
+    const url = platform.url.replaceAll('%s', keyword)
+    BrowserWindowApi.openUrl(url, { external: true })
+  }
+}

src/widgets/clipboard/ClipboardWidgetRoutes.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+})

src/widgets/clipboard/ClipboardWidget.vue src/widgets/clipboard/ClipboardWidgetView.vue

@@ -4,7 +4,7 @@ import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
-import ViteWidget from '@widget-js/vite-plugin-widget'
+import widget from '@widget-js/vite-plugin-widget'
 import checker from 'vite-plugin-checker'
 import UnoCSS from 'unocss/vite'
 
@@ -20,7 +20,7 @@ export default defineConfig({
       },
     },
   },
-  plugins: [vue(), UnoCSS(), ViteWidget(), checker({ typescript: true }), AutoImport({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] })],
+  plugins: [vue(), UnoCSS(), widget(), checker({ typescript: true }), AutoImport({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] })],
   resolve: {
     alias: [{
       find: '@',