Add ignore mouse events feature

Author: rtugeek

public/widget.json

@@ -137,38 +137,38 @@
       ]
     },
     {
-      "name": "cn.widgetjs.widgets.labor_progress",
+      "name": "cn.widgetjs.widgets.phone_reminder",
       "title": {
-        "zh-CN": "打工进度"
+        "zh-CN": "来电提醒"
       },
       "description": {
-        "zh-CN": "打工人，打工魂"
+        "zh-CN": "用灵动通知加语音，提醒重要事项"
       },
       "keywords": [
         "recommend"
       ],
       "security": false,
       "permissions": [],
       "lang": "zh-CN",
-      "width": 4,
+      "width": 1,
       "height": 1,
-      "maxWidth": 6,
+      "maxWidth": 1,
       "webviewTag": false,
-      "maxHeight": 2,
-      "minWidth": 3,
+      "maxHeight": 1,
+      "minWidth": 1,
       "minHeight": 1,
       "movable": true,
       "singleton": false,
       "resizable": true,
-      "path": "/widget/labor_progress",
+      "path": "/widget/phone_reminder",
       "meta": {},
-      "backgroundThrottling": true,
-      "previewImage": "/images/preview_labor_progress.png",
+      "backgroundThrottling": false,
+      "previewImage": "/images/preview_phone_reminder.png",
       "categories": [
         "fun"
       ],
-      "supportDeployMode": 17,
-      "configPagePath": "/widget/config/labor_progress?frame=true&transparent=false",
+      "supportDeployMode": 65536,
+      "configPagePath": "/widget/config/phone_reminder?frame=true&transparent=false",
       "routes": [],
       "socialLinks": [
         {
@@ -178,38 +178,38 @@
       ]
     },
     {
-      "name": "cn.widgetjs.widgets.phone_reminder",
+      "name": "cn.widgetjs.widgets.labor_progress",
       "title": {
-        "zh-CN": "来电提醒"
+        "zh-CN": "打工进度"
       },
       "description": {
-        "zh-CN": "用灵动通知加语音，提醒重要事项"
+        "zh-CN": "打工人，打工魂"
       },
       "keywords": [
         "recommend"
       ],
       "security": false,
       "permissions": [],
       "lang": "zh-CN",
-      "width": 1,
+      "width": 4,
       "height": 1,
-      "maxWidth": 1,
+      "maxWidth": 6,
       "webviewTag": false,
-      "maxHeight": 1,
-      "minWidth": 1,
+      "maxHeight": 2,
+      "minWidth": 3,
       "minHeight": 1,
       "movable": true,
       "singleton": false,
       "resizable": true,
-      "path": "/widget/phone_reminder",
+      "path": "/widget/labor_progress",
       "meta": {},
-      "backgroundThrottling": false,
-      "previewImage": "/images/preview_phone_reminder.png",
+      "backgroundThrottling": true,
+      "previewImage": "/images/preview_labor_progress.png",
       "categories": [
         "fun"
       ],
-      "supportDeployMode": 65536,
-      "configPagePath": "/widget/config/phone_reminder?frame=true&transparent=false",
+      "supportDeployMode": 17,
+      "configPagePath": "/widget/config/labor_progress?frame=true&transparent=false",
       "routes": [],
       "socialLinks": [
         {

src/views/manager/DeployedWidgetCard.vue

@@ -4,6 +4,7 @@ import { DeployedWidgetApi, WidgetApi } from '@widget-js/core'
 import type { PropType } from 'vue'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { Code, Delete, Refresh } from '@icon-park/vue-next'
 import { useDebugConfig } from '@/composition/useAppConfig'
 
 const props = defineProps({
@@ -16,6 +17,7 @@ const props = defineProps({
 const emits = defineEmits(['remove'])
 const widget = ref<Widget>()
 const { t, locale } = useI18n()
+const ignoreMouseEvents = ref<boolean>(props.deployedWidget.isIgnoreMouseEvents ?? false)
 WidgetApi.getWidget(props.deployedWidget.name).then((value) => {
   widget.value = value
 })
@@ -33,6 +35,10 @@ function openDevTools() {
 function refresh() {
   WidgetApi.reload(props.deployedWidget.id)
 }
+
+function onIgnoreMouseEventChange() {
+  WidgetApi.setIgnoreMouseEvents(props.deployedWidget.id, ignoreMouseEvents.value)
+}
 </script>
 
 <template>
@@ -50,17 +56,21 @@ function refresh() {
         <!--          <span><AutoWidth class="mr-2" />W: {{ deployedWidget.width }} H: {{ deployedWidget.height }}</span> -->
         <!--        </div> -->
       </div>
-      <div class="flex">
+      <div class="flex items-center">
+        <el-checkbox v-model="ignoreMouseEvents" class="mr-auto" @change="onIgnoreMouseEventChange">
+          鼠标穿透
+        </el-checkbox>
+        <span class="ml-auto" />
         <el-button v-if="debugMode" size="small" type="primary" @click="openDevTools">
-          DevTools
+          <Code />
         </el-button>
         <el-button size="small" type="primary" @click="refresh">
-          {{ t('manager.refresh') }}
+          <Refresh />
         </el-button>
         <el-popconfirm :title="t('manager.confirmRemove')" width="200" @confirm="removeWidget">
           <template #reference>
             <el-button size="small" type="danger">
-              {{ t('manager.remove') }}
+              <Delete />
             </el-button>
           </template>
         </el-popconfirm>

src/views/manager/DeployedWidgetList.vue

@@ -2,9 +2,10 @@
 import { ref } from 'vue'
 import type { DeployedWidget } from '@widget-js/core'
 import { BrowserWindowApi, DeployedWidgetApi } from '@widget-js/core'
+import { useEventListener } from '@vueuse/core'
 import DeployedWidgetCard from '@/views/manager/DeployedWidgetCard.vue'
 
-const widgets = ref<DeployedWidget[]>()
+const widgets = ref<DeployedWidget[]>([])
 DeployedWidgetApi.getDeployedWidgets().then((value) => {
   widgets.value = value
 })
@@ -13,10 +14,16 @@ function removeWidget(widget: DeployedWidget) {
   DeployedWidgetApi.removeDeployedWidget(widget.id)
   widgets.value = widgets.value.filter(it => it.id != widget.id)
 }
+
+useEventListener('focus', () => {
+  DeployedWidgetApi.getDeployedWidgets().then((value) => {
+    widgets.value = value
+  })
+})
 </script>
 
 <template>
-  <div class="flex flex-col gap-3 px-3">
+  <div class="flex flex-col gap-3 px-3 pb-4">
     <DeployedWidgetCard v-for="widget in widgets" :key="widget.id" :deployed-widget="widget" @remove="removeWidget" />
   </div>
 </template>

src/views/tray/TrayMenuView.vue

@@ -46,14 +46,14 @@ function copyAndReport() {
       <div class="title">
         {{ t('tray.runningWidgets') }}
       </div>
-      <el-scrollbar height="400">
+      <el-scrollbar height="390">
         <DeployedWidgetList />
       </el-scrollbar>
     </div>
     <div class="menus flex flex-col gap-2 my-2">
       <div class="menu-item" @click="AppApi.openAddWidgetWindow()">
         <Plus />
-        {{ t('tray.addWidget') }}
+        <div>{{ t('tray.addWidget') }}</div>
       </div>
       <div class="menu-item" @click="AppApi.openSettingWindow()">
         <Setting />
@@ -81,7 +81,7 @@ function copyAndReport() {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
 .header, .footer {
   background: #f8f9fa;
   color: #303030;
@@ -101,12 +101,19 @@ function copyAndReport() {
     cursor: pointer;
     border-radius: 4px;
     background-color: rgba(0, 0, 0, 0.04);
+    .i-icon {
+      cursor: pointer;
+    }
     &:hover {
       background-color: rgba(0, 0, 0, 0.08);
     }
   }
 }
 
+.el-scrollbar{
+  height: 390px;
+}
+
 .widgets {
   border-bottom: 1px solid #e7e7e7;
 }