增加灵动岛

Author: rtugeek

components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElForm: typeof import('element-plus/es')['ElForm']

package.json

@@ -28,8 +28,9 @@
   "dependencies": {
     "@vueuse/core": "^9.4.0",
     "@vueuse/integrations": "^9.6.0",
-    "@widget-js/core": "^0.1.15",
-    "@widget-js/vue3": "^0.0.11",
+    "@vueuse/motion": "2.0.0-beta.12",
+    "@widget-js/core": "^0.1.16",
+    "@widget-js/vue3": "^0.1.18",
     "animate.css": "^4.1.1",
     "axios": "^1.1.3",
     "color": "^4.2.3",
@@ -72,8 +73,8 @@
     "@vue/cli-service": "~5.0.0",
     "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-typescript": "^9.1.0",
-    "@widget-js/cli": "^1.0.5",
-    "@widget-js/webpack-plugin": "^1.0.1",
+    "@widget-js/cli": "^1.0.7",
+    "@widget-js/webpack-plugin": "^1.0.5",
     "archiver": "^5.3.1",
     "babel-loader": "^8.3.0",
     "css-loader": "^6.7.2",

src/widgets/dynamic-island/images/zhangyuge.jpg renamed to public/images/zhangyuge.jpg

@@ -6,6 +6,8 @@ import {WidgetJsPlugin} from "@widget-js/vue3";
 import '@widget-js/vue3/dist/style.css'
 import '@widget-js/vue3/dist/mingcute_icon/font/Mingcute.css'
 import {createPinia} from "pinia";
+import {MotionPlugin} from '@vueuse/motion'
 
-createApp(App).use(WidgetJsPlugin).use(router).use(createPinia()).mount('#app')
+createApp(App).use(WidgetJsPlugin).use(MotionPlugin)
+    .use(router).use(createPinia()).mount('#app')
 

src/main.ts

@@ -45,7 +45,7 @@
 import dayjs, {Dayjs} from "dayjs";
 import {Lunar, LunarMonth, Solar, SolarMonth} from 'lunar-typescript';
 import BirthdayListData, {BirthdayPeople} from "@/widgets/birthday-list/model/BirthdayListData";
-import {WidgetApi} from "../../../../core";
+import {WidgetApi} from "@widget-js/core";
 // import {delay} from "lodash";
 //import BirthdayListData from './model/BirthdayListData';
 

src/widgets/birthday-list/BirthdayListWidget.vue

@@ -9,7 +9,7 @@ import {Solar} from 'lunar-typescript';
 import BirthdayListWidget from "./BirthdayListWidget.vue";
 import BirthdayListData from "@/widgets/birthday-list/model/BirthdayListData";
 import {useWidget} from "@widget-js/vue3";
-import {BrowserWindowApi, WidgetApi} from "../../../../core";
+import {BrowserWindowApi, WidgetApi} from "@widget-js/core";
 
 //默认数据
 const previewData = new BirthdayListData("");

src/widgets/birthday-list/BirthdayListWidgetView.vue

@@ -4,7 +4,7 @@ const name = "cn.widgetjs.widgets.dynamic_island";
 //组件标题
 const title = {"zh": "灵动岛"};
 //组件描述
-const description = {"zh": ""};
+const description = {"zh": "丝般顺滑的灵动通知组件"};
 //组件关键词
 const keywords = [WidgetKeyword.RECOMMEND];
 //组件路由地址
@@ -20,12 +20,12 @@ const DynamicIslandWidgetDefine = new Widget({
     lang: "zh",
     url: url,
     configUrl: configUrl,
-    width: 4,
+    width: 6,
     height: 4,
-    minWidth: 4,
-    maxWidth: 4,
+    minWidth: 6,
+    maxWidth: 6,
     minHeight: 4,
-    maxHeight: 4
+    maxHeight: 4,
 })
 
 export default DynamicIslandWidgetDefine;

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

@@ -1,46 +1,53 @@
 <template>
 
-    <widget-edit-dialog :widget-params="widgetParams" :option="widgetConfigOption"
-                        :widget-data="widgetData"
-                        @confirm="onSaveClick()">
-        <template v-slot:widget>
-            <!-- 组件配置内容   -->
-            <dynamic-island-widget :style="{
-        width:`${widgetParams.widthPx}px`,
-        height:`${widgetParams.heightPx}px`
-      }" :background-color="widgetData.backgroundColor"></dynamic-island-widget>
-        </template>
-        <template v-slot:form>
-            <!--  TODO 这里写自定义表单内容          -->
-        </template>
-    </widget-edit-dialog>
+  <widget-edit-dialog :widget-params="widgetParams" :option="widgetConfigOption"
+                      :widget-data="widgetData"
+                      @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.breakInterval" label="休息时长（分钟）" :min="1" :max="60"/>
+      <widget-slider-field v-model:value="widgetData.usageInterval" label="检测阈值（分钟）" :min="1" :max="120"/>
+      <el-alert type="info" :closable="false">
+        <p>检测阈值：多久没使用鼠标视为离开电脑</p>
+      </el-alert>
+    </template>
+  </widget-edit-dialog>
 </template>
 
 <script lang="ts">
 
 import DynamicIslandWidget from "./DynamicIslandWidget.vue";
 import {useWidget, WidgetConfigOption, WidgetEditDialog} from "@widget-js/vue3";
-import {WidgetData, WidgetDataRepository} from "@widget-js/core";
+import {NotificationApi, WidgetApi} from "@widget-js/core";
 import {reactive} from "vue";
+import {SitReminder} from "@/widgets/dynamic-island/model/SitReminder";
 
 export default {
   name: "",
   components: {DynamicIslandWidget, WidgetEditDialog},
   setup() {
-    const {widgetData, widgetParams} = useWidget(WidgetData)
-
+    const name = "cn.widgetjs.widget.dynamic_island.sit_reminder";
+    const sitReminder = new SitReminder(name);
+    const {widgetData, widgetParams} = useWidget(SitReminder, {
+      defaultData: sitReminder,
+      loadDataByWidgetName: true,
+      widgetName: name
+    })
     //修改成需要设置组件参数配置
     const widgetConfigOption = reactive(new WidgetConfigOption({
       custom: true,
-      backgroundColor: true,
-      borderRadius: true
+      backgroundColor: false,
+      borderRadius: false,
+      preview: false
     }));
 
     return {widgetData, widgetParams, widgetConfigOption}
   },
   methods: {
     async onSaveClick() {
-      await WidgetDataRepository.save(this.widgetData);
+      await WidgetApi.saveDataByName(this.widgetData);
+      NotificationApi.info(this.widgetData.breakInterval)
       window.close();
     }
   }

src/widgets/dynamic-island/DynamicIslandConfigView.vue

@@ -1,16 +1,17 @@
 import DynamicIslandWidget from './DynamicIslandWidget.vue';
 import dayjs from "dayjs";
+import {NotificationState} from "@/widgets/dynamic-island/model/NotificationState";
+import {NotificationType} from "@widget-js/core";
 
 export default {
     title: 'Widget/DynamicIsland',
     component: DynamicIslandWidget,
     argTypes: {
-        size: {control: 'select', options: ['small', 'default', 'large']},
-        targetTime: {control: 'date'},
-        type: {
+        // size: {control: 'select', options: ['small', 'default', 'large']},
+        state: {
             control: 'select',
-            options: ['call', 'countdown', 'advance-countdown', 'error', 'success', 'warning', 'info'],
-        }
+            options: [NotificationState.HIDE, NotificationState.SMALL, NotificationState.NORMAL, NotificationState.LARGE]
+        },
     },
 };
 
@@ -25,77 +26,81 @@ const Template = (args: any) => ({
 export const MessageError = Template.bind({})
 // @ts-ignore
 MessageError.args = {
-    show: true,
-    type: 'error',
-    size: 'small',
-    message: "错误信息"
+    notification: {
+        type: 'error',
+        message: "错误信息",
+    },
+    state: NotificationState.SMALL
 }
 export const MessageInfo = Template.bind({})
 // @ts-ignore
 MessageInfo.args = {
-    show: true,
-    type: 'info',
-    size: 'small',
-    message: "Hello World"
+    notification: {
+        type: 'info',
+        message: "Hello World",
+    },
+    state: NotificationState.SMALL
 }
 export const MessageSuccess = Template.bind({})
 // @ts-ignore
 MessageSuccess.args = {
-    show: true,
-    type: 'success',
-    size: 'small',
-    message: "Hello World"
+    notification: {
+        type: 'success',
+        message: "Hello World",
+    },
+    state: NotificationState.SMALL,
 }
 
 export const MessageWarning = Template.bind({})
 // @ts-ignore
 MessageWarning.args = {
-    show: true,
-    type: 'warning',
-    size: 'small',
-    message: "警告信息"
+    notification: {
+        type: 'warning',
+        message: "警告信息",
+    },
+    state: NotificationState.SMALL,
 }
 
 export const Countdown = Template.bind({})
 const date = dayjs('2023-01-01');
 
 // @ts-ignore
 Countdown.args = {
-    show: true,
-    type: 'countdown',
-    size: 'small',
-    message: '新年倒计时',
-    targetTime: date.toISOString(),
+    notification: {
+        type: 'countdown',
+        message: "新年倒计时",
+        backgroundColor: "rgba(0,0,0,0.5)",
+        targetTime: date.toISOString(),
+    },
+    state: NotificationState.SMALL,
 }
 
 export const CountdownAdvance = Template.bind({})
 // @ts-ignore
 CountdownAdvance.args = {
-    show: true,
-    type: 'advance-countdown',
-    size: 'default',
-    message: '恭喜发财',
-    title: '新年倒计时',
-    targetTime: date.toISOString(),
-}
-
-export const Call = Template.bind({})
-// @ts-ignore
-Call.args = {
-    show: true,
-    type: 'call',
-    size: 'default',
-    message: '下班提醒',
-    title: '章鱼哥',
+    notification: {
+        type: 'advance-countdown',
+        title: "新年倒计时",
+        message: '恭喜发财',
+        backgroundColor: "rgba(0,0,0,0.5)",
+        targetTime: date.toISOString(),
+    },
+    state: NotificationState.NORMAL,
 }
 
 
-export const Alert = Template.bind({})
+export const Reminder = Template.bind({})
 // @ts-ignore
-Alert.args = {
-    show: true,
-    type: 'alert',
-    size: 'large',
-    message: '您已经连续使用电脑45分钟',
-    title: '久坐提醒',
+Reminder.args = {
+    state: NotificationState.LARGE,
+    notification: {
+        type: "reminder",
+        message: '您已经连续使用电脑45分钟',
+        state: NotificationState.LARGE,
+        title: '久坐提醒',
+        icon: 'computer_line',
+        color: '#5D8AC8',
+        cancelButtonText:"知道了",
+        confirmButtonText:"休息一下",
+    }
 }