Add image preview feature to WidgetContainer and clean up styles

Author: rtugeek

public/widget.json

@@ -96,12 +96,12 @@
       ]
     },
     {
-      "name": "cn.widgetjs.widgets.phone_reminder",
+      "name": "cn.widgetjs.widgets.sit_reminder",
       "title": {
-        "zh-CN": "来电提醒"
+        "zh-CN": "久坐提醒"
       },
       "description": {
-        "zh-CN": "用灵动通知加语音，提醒重要事项"
+        "zh-CN": "设置间隔，定时提醒，适合长期久坐的人群"
       },
       "keywords": [
         "recommend"
@@ -119,15 +119,15 @@
       "movable": true,
       "singleton": false,
       "resizable": true,
-      "path": "/widget/phone_reminder",
+      "path": "/widget/sit_reminder",
       "meta": {},
       "backgroundThrottling": false,
-      "previewImage": "/images/preview_phone_reminder.png",
+      "previewImage": "/images/preview_sit_reminder.png",
       "categories": [
-        "fun"
+        "utilities"
       ],
       "supportDeployMode": 65536,
-      "configPagePath": "/widget/config/phone_reminder?frame=true&transparent=false",
+      "configPagePath": "/widget/config/sit_reminder?frame=true&transparent=false",
       "routes": [],
       "socialLinks": [
         {
@@ -137,12 +137,12 @@
       ]
     },
     {
-      "name": "cn.widgetjs.widgets.sit_reminder",
+      "name": "cn.widgetjs.widgets.phone_reminder",
       "title": {
-        "zh-CN": "久坐提醒"
+        "zh-CN": "来电提醒"
       },
       "description": {
-        "zh-CN": "设置间隔，定时提醒，适合长期久坐的人群"
+        "zh-CN": "用灵动通知加语音，提醒重要事项"
       },
       "keywords": [
         "recommend"
@@ -160,15 +160,15 @@
       "movable": true,
       "singleton": false,
       "resizable": true,
-      "path": "/widget/sit_reminder",
+      "path": "/widget/phone_reminder",
       "meta": {},
       "backgroundThrottling": false,
-      "previewImage": "/images/preview_sit_reminder.png",
+      "previewImage": "/images/preview_phone_reminder.png",
       "categories": [
-        "utilities"
+        "fun"
       ],
       "supportDeployMode": 65536,
-      "configPagePath": "/widget/config/sit_reminder?frame=true&transparent=false",
+      "configPagePath": "/widget/config/phone_reminder?frame=true&transparent=false",
       "routes": [],
       "socialLinks": [
         {

src/views/add/WidgetContainer.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { WidgetApi } from '@widget-js/core'
 import { WebWidget } from '@widget-js/web-api'
-import { nextTick, onMounted } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
 import { FileFailed, PictureOne } from '@icon-park/vue-next'
 import { computedAsync } from '@vueuse/core'
 
@@ -12,6 +12,10 @@ const props = defineProps({
   },
 })
 
+const cellSize = 72
+const containerHeight = cellSize * 2
+const showPreview = ref(false)
+
 const previewImage = computedAsync(async () => {
   if (props.widget.package && props.widget.package.remote) {
     return `https://${props.widget.package.remote.hostname}${props.widget.package.remote.base}${props.widget.previewImage}`
@@ -21,8 +25,7 @@ const previewImage = computedAsync(async () => {
     return url + props.widget.previewImage!
   }
 }, null)
-const cellSize = 72
-const containerHeight = cellSize * 2
+
 onMounted(async () => {
   await nextTick()
 })
@@ -35,12 +38,19 @@ onMounted(async () => {
     }"
     class="widget-container"
   >
+    <el-image-viewer
+      v-if="showPreview"
+      :url-list="[previewImage]"
+      show-progress
+      @close="showPreview = false"
+    />
     <el-image
       v-if="!!widget.previewImage"
-      class="preview-image"
+      class="preview-image cursor-pointer"
       :src="previewImage"
       alt=""
       fit="contain"
+      @click="showPreview = true"
     >
       <template #error>
         <FileFailed />
@@ -58,7 +68,6 @@ onMounted(async () => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  position: relative;
 }
 
 .title {
@@ -73,60 +82,4 @@ onMounted(async () => {
   height: auto;
   max-height: 128px;
 }
-
-iframe {
-  transform: scale(1);
-  transition-timing-function: ease-out;
-  transition-duration: 0.2s;
-  filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.2));
-
-  &.editing {
-    transform: scale(0.9);
-  }
-}
-
-.toolbox {
-  position: absolute;
-  right: 0;
-  top: 0;
-
-  .el-button.is-circle {
-    border-radius: 50%;
-    padding: 8px;
-    border-color: white;
-    border-width: 2px;
-    width: 32px;
-    height: 32px;
-  }
-
-  .mgc_delete_line {
-    &::before {
-      color: white;
-    }
-  }
-
-  .mgc_edit_2_fill {
-    &::before {
-      color: white;
-    }
-  }
-
-  .mgc_edit_2_line {
-    &::before {
-      color: white;
-    }
-  }
-
-  .mgc_delete_fill {
-    &::before {
-      color: white;
-    }
-  }
-
-  .mgc_close_line {
-    &::before {
-      color: white;
-    }
-  }
-}
 </style>

src/views/tray/SocialLinks.vue

@@ -38,7 +38,7 @@ const iconSizePx = computed(() => `${props.iconSize}px`)
 
     <a target="_blank" href="https://space.bilibili.com/207395767">
       <img src="../../assets/images/bilibili_logo_red.png" alt="Bilibili"></a>
-    <a ref="github" target="_blank" href="https://github.com/widget-js">
+    <a ref="github" target="_blank" href="https://github.com/widget-js/widgets">
       <img src="../../assets/images/github-mark.png" alt="GitHub"></a>
   </div>
 </template>