细节调整

Author: rtugeek

README.md

@@ -41,13 +41,13 @@ widgets
 ### 运行项目
 
 #### Vue
-
+#
 ```shell
 pnpm serve
 ```
 
 #### Storybook
-
+用StoryBook运行只能查看组件
 ```shell
 pnpm storybook
 ```

components.d.ts

@@ -14,6 +14,7 @@ declare module '@vue/runtime-core' {
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']

package.json

@@ -29,7 +29,8 @@
     "@vueuse/core": "^9.4.0",
     "@vueuse/integrations": "^9.6.0",
     "@vueuse/motion": "2.0.0-beta.12",
-    "@widget-js/core": "^0.1.16",
+    "@vueuse/router": "^9.9.0",
+    "@widget-js/core": "^0.1.18",
     "@widget-js/vue3": "^0.1.18",
     "animate.css": "^4.1.1",
     "axios": "^1.1.3",

src/common/css/common.css

@@ -6,7 +6,7 @@ page view {
 }
 
 body {
-    font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
+    font-family: Roboto, Helvetica Neue, Helvetica, Tahoma,
     Arial, PingFang SC-Light, Microsoft YaHei;
     margin: 0;
     overflow: hidden;

src/widgets/dynamic-island/BreakView.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="break-view">
+    <div class="countdown">
+      <template v-for="(item,index) in array">
+        <text-switcher :text="item" :font-size="item === ':' ? 150:300"/>
+      </template>
+    </div>
+    <p>按Esc退出</p>
+  </div>
+</template>
+
+<script lang="ts">
+import {onKeyStroke, useIntervalFn} from "@vueuse/core";
+import {ref} from "vue";
+import TextSwitcher from "@/widgets/dynamic-island/components/TextSwitcher.vue";
+import '@/common/dayjs-extend'
+import dayjs from "dayjs";
+import {useRouteHash, useRouteQuery} from "@vueuse/router";
+
+export default {
+  name: "BreakView",
+  components: {TextSwitcher},
+  setup() {
+    const i = ref(0);
+    const duration = useRouteQuery('duration', `${5 * 60}`);
+    console.log(window.location);
+    console.log(duration);
+    const targetTime = dayjs().add(parseInt(duration.value), 'second');
+    const array = ref<string[]>();
+    useIntervalFn(() => {
+      const remindDuration = dayjs.duration(targetTime.diff(dayjs()))
+      if (remindDuration.asSeconds() <= 0) {
+        window.close()
+      }
+      const timeStr = remindDuration.format("mm:ss");
+      array.value = timeStr.split('');
+      i.value++;
+    }, 1000, {immediate: true});
+
+    onKeyStroke('Escape', (e) => {
+      window.close();
+    })
+    return {array}
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.break-view {
+  color: white;
+  background-color: rgba(0, 0, 0, 0.8);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-items: center;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  .text-switcher {
+    color: white;
+  }
+
+  .countdown {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    letter-spacing: 16px;
+    font-weight: bold;
+    outline: none;
+
+    .number {
+      font-size: 258px;
+    }
+
+    .colon {
+      font-size: 128px;
+    }
+  }
+
+}
+</style>

src/widgets/dynamic-island/DynamicIsland.widget.ts

@@ -2,7 +2,7 @@ import {Widget, WidgetKeyword} from "@widget-js/core";
 //TODO 修改组件信息，标题，描述，关键词
 const name = "cn.widgetjs.widgets.dynamic_island";
 //组件标题
-const title = {"zh": "灵动岛"};
+const title = {"zh": "灵动通知"};
 //组件描述
 const description = {"zh": "丝般顺滑的灵动通知组件"};
 //组件关键词

src/widgets/dynamic-island/DynamicIslandConfigView.vue

@@ -5,9 +5,9 @@
                       @confirm="onSaveClick()">
     <template v-slot:form>
       <widget-checkbox-field v-model:checked="widgetData.enable" label="启用久坐提醒"/>
-      <widget-slider-field v-model:value="widgetData.sitInterval" label="久坐时长（分钟）" :min="5" :max="120"/>
+      <widget-slider-field v-model:value="widgetData.sitInterval" label="久坐时长（分钟）" :min="1" :max="120"/>
       <widget-slider-field v-model:value="widgetData.breakInterval" label="休息时长（分钟）" :min="1" :max="60"/>
-      <widget-slider-field v-model:value="widgetData.usageInterval" label="检测阈值（分钟）" :min="1" :max="120"/>
+      <widget-slider-field v-model:value="widgetData.mouseCheckInterval" label="检测阈值（分钟）" :min="1" :max="120"/>
       <el-alert type="info" :closable="false">
         <p>检测阈值：多久没使用鼠标视为离开电脑</p>
       </el-alert>
@@ -27,7 +27,7 @@ export default {
   name: "",
   components: {DynamicIslandWidget, WidgetEditDialog},
   setup() {
-    const name = "cn.widgetjs.widget.dynamic_island.sit_reminder";
+    const name = "cn.widgetjs.widget.sit_reminder";
     const sitReminder = new SitReminder(name);
     const {widgetData, widgetParams} = useWidget(SitReminder, {
       defaultData: sitReminder,
@@ -47,7 +47,6 @@ export default {
   methods: {
     async onSaveClick() {
       await WidgetApi.saveDataByName(this.widgetData);
-      NotificationApi.info(this.widgetData.breakInterval)
       window.close();
     }
   }

src/widgets/dynamic-island/DynamicIslandWidget.stories.ts

@@ -1,7 +1,7 @@
 import DynamicIslandWidget from './DynamicIslandWidget.vue';
 import dayjs from "dayjs";
 import {NotificationState} from "@/widgets/dynamic-island/model/NotificationState";
-import {NotificationType} from "@widget-js/core";
+import {AdvanceCountdownDemo, SitReminderDemo} from "@/widgets/dynamic-island/model/Demo";
 
 export default {
     title: 'Widget/DynamicIsland',
@@ -78,13 +78,7 @@ Countdown.args = {
 export const CountdownAdvance = Template.bind({})
 // @ts-ignore
 CountdownAdvance.args = {
-    notification: {
-        type: 'advance-countdown',
-        title: "新年倒计时",
-        message: '恭喜发财',
-        backgroundColor: "rgba(0,0,0,0.5)",
-        targetTime: date.toISOString(),
-    },
+    notification: AdvanceCountdownDemo,
     state: NotificationState.NORMAL,
 }
 
@@ -93,14 +87,5 @@ export const Reminder = Template.bind({})
 // @ts-ignore
 Reminder.args = {
     state: NotificationState.LARGE,
-    notification: {
-        type: "reminder",
-        message: '您已经连续使用电脑45分钟',
-        state: NotificationState.LARGE,
-        title: '久坐提醒',
-        icon: 'computer_line',
-        color: '#5D8AC8',
-        cancelButtonText:"知道了",
-        confirmButtonText:"休息一下",
-    }
+    notification: SitReminderDemo
 }

src/widgets/dynamic-island/DynamicIslandWidget.vue

@@ -5,7 +5,8 @@
     <advance-countdown-notification v-else-if="notification.type === 'advance-countdown'" v-bind="notification"/>
     <custom-url-notification v-else-if="notification.type === 'url'" v-bind="notification"/>
     <reminder-notification v-else-if="notification.type === 'reminder'" :notification="notification"/>
-    <phone-call-notification ref="phoneCall" v-else-if="notification.type === 'call'" v-bind="notification"/>
+    <phone-call-notification :key="notification.createdAt" ref="phoneCall" v-else-if="notification.type === 'call'"
+                             v-bind="notification"/>
     <message-notification v-else v-bind="notification"/>
   </div>
 </template>
@@ -20,7 +21,7 @@ import CustomUrlNotification from "@/widgets/dynamic-island/components/CustomUrl
 import ReminderNotification from "@/widgets/dynamic-island/components/ReminderNotification.vue";
 import {NotificationState} from "@/widgets/dynamic-island/model/NotificationState";
 import {useMotion} from "@vueuse/motion";
-import {SwipeDirection, usePointerSwipe} from "@vueuse/core";
+import {SwipeDirection, useDraggable, useIntervalFn, usePointerSwipe} from "@vueuse/core";
 import {AppNotification} from "@widget-js/core";
 
 export default {
@@ -31,7 +32,7 @@ export default {
     MessageNotification,
     AdvanceCountdownNotification, CountingNotification, PhoneCallNotification
   },
-  emits: ["mouseEnter", "mouseLeave", "hidden", "update:state"],
+  emits: ["mouseEnter", "mouseLeave", "update:state"],
   setup(props, context) {
     const container = ref();
     const backgroundColor = ref("black");
@@ -52,15 +53,23 @@ export default {
       height: 48,
       scale: 1,
       backgroundColor: backgroundColor,
-      transition
+      transition: {
+        duration: 500,
+        type: 'keyframe',
+        onComplete: () => {
+        },
+      }
     }
-    const {apply, motionProperties} = useMotion(island, {
-      initial: {...hide},
+    const {apply, motionProperties, variant} = useMotion(island, {
+      initial: {...hide,},
       hide,
       tapped: {
         scale: 0.95,
         backgroundColor: backgroundColor,
-        transition
+        transition: {
+          ...transition,
+          onComplete: () => (variant.value = 'hovered'),
+        }
       },
       hovered: {
         scale: 1,
@@ -92,26 +101,24 @@ export default {
         transition
       },
     });
-    watch(motionProperties, () => {
-      if (motionProperties['y'] < minY) {
-        context.emit('hidden');
-        if (phoneCall) {
-          phoneCall.value?.stop();
-        }
-      }
-    })
     const stateModel = computed({
       get: () => {
         return props.state
       },
       set: (value) => {
         apply(value);
+        if (value == NotificationState.HIDE) {
+          if (phoneCall) {
+            phoneCall.value?.stop();
+          }
+        }
         context.emit('update:state', value);
       }
     })
     let startTranslateY = -100;
-    const {distanceY} = usePointerSwipe(island, {
-      onSwipeStart() {
+    const {distanceY, isSwiping, stop: stopSwipe} = usePointerSwipe(island, {
+      threshold: 10,
+      onSwipeStart(e) {
         startTranslateY = motionProperties['y'];
       },
       async onSwipe(e: PointerEvent) {
@@ -126,20 +133,19 @@ export default {
         })
       },
       async onSwipeEnd(e: PointerEvent, direction: SwipeDirection) {
-        console.log(motionProperties['y'])
         if (motionProperties['y'] < 0) {
           stateModel.value = NotificationState.HIDE;
         } else {
           await apply(stateModel.value)
         }
       },
     });
-    return {container, phoneCall, backgroundColor, island, stateModel, apply}
+    return {container, phoneCall, isSwiping, variant, backgroundColor, island, stateModel, apply}
   },
   methods: {},
   async mounted() {
     await nextTick();
-    this.apply(this.state);
+    await this.apply(this.state);
   },
   watch: {
     state(newState) {
@@ -168,6 +174,8 @@ export default {
 <style scoped lang="scss">
 $cubic-bezier: cubic-bezier(0, 1, .68, 1.05);
 .island {
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
   cursor: pointer;
   border-radius: 42px;
   display: flex;
@@ -176,40 +184,20 @@ $cubic-bezier: cubic-bezier(0, 1, .68, 1.05);
   right: 0;
   margin: auto;
   background-color: black;
-  transition-property: width, height;
-  transition-duration: 0.8s;
-  transition-timing-function: $cubic-bezier;
   will-change: width, height;
   clip: auto;
   overflow: hidden;
   justify-content: flex-start;
   box-shadow: (0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08));
 
-  .content {
-    flex: 1;
-    display: flex;
-
-    align-items: flex-start;
-    margin-left: 1rem;
-    margin-right: 1rem;
+  .mask {
+    position: absolute;
+    width: 100%;
     height: 100%;
-    justify-content: space-around;
-    flex-direction: column;
-
-    .title {
-      font-size: 0.8em;
-      color: rgba(255, 255, 255, 0.6);
-    }
-
-    .description {
-      color: white;
-      font-size: 1em;
-    }
-  }
-
-  .actions {
-    display: flex;
-    justify-content: flex-start;
+    z-index: 5;
+    left: 0;
+    top: 0;
+    background-color: black;
   }
 }
 </style>

src/widgets/dynamic-island/DynamicIslandWidgetRoutes.ts

@@ -20,6 +20,11 @@ const DynamicIslandWidgetRoutes = [
         path: '/widget/dynamic_island/call',
         name: `${name}.call`,
         component: () => import(/* webpackChunkName: "com.wisdom.widgets.dynamic_island.call" */ './components/PhoneCallNotification.vue')
+    },
+    {
+        path: '/widget/dynamic_island/break',
+        name: `${name}.break`,
+        component: () => import(/* webpackChunkName: "com.wisdom.widgets.dynamic_island.break" */ './BreakView.vue')
     }
 ]