🐛 Fixed date selection issue in countdown widget

rtugeek · rtugeek · commit 55acd2228e52 · 2024-01-16T09:48:17.000+08:00
diff --git a/package.json b/package.json
@@ -21,8 +21,8 @@
     "@vueuse/integrations": "^10.5.0",
     "@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.5",
+    "@widget-js/core": "^0.11.22-beta.2",
+    "@widget-js/vue3": "^0.11.21-rc.6",
     "animate.css": "^4.1.1",
     "axios": "^1.6.0",
     "color": "^4.2.3",
@@ -33,7 +33,7 @@
     "element-plus": "^2.2.26",
     "localforage": "^1.10.0",
     "lodash-es": "^4.17.21",
-    "lunar-typescript": "^1.6.6",
+    "lunar-typescript": "^1.7.0",
     "lyric-resolver": "^0.1.6",
     "nanoid": "^4.0.2",
     "pinia": "^2.1.6",
diff --git a/public/widget.json b/public/widget.json
@@ -238,35 +238,36 @@
       "routes": []
     },
     {
-      "name": "cn.widgetjs.widgets.labor_progress",
+      "name": "cn.widgetjs.widgets.key_stroke",
       "title": {
-        "zh-CN": "打工进度"
+        "zh-CN": "键盘演示"
       },
       "description": {
-        "zh-CN": "打工人，打工魂"
+        "zh-CN": "在屏幕显示每一次快捷键敲击"
       },
       "keywords": [
         "recommend"
       ],
       "security": false,
-      "permissions": [],
+      "permissions": [
+        "keyboard"
+      ],
       "lang": "zh-CN",
       "width": 4,
-      "height": 1,
-      "maxWidth": 6,
+      "height": 3,
+      "maxWidth": 4,
       "webviewTag": false,
-      "maxHeight": 2,
-      "minWidth": 3,
-      "minHeight": 1,
-      "movable": true,
+      "maxHeight": 3,
+      "minWidth": 4,
+      "minHeight": 3,
+      "movable": false,
       "singleton": false,
       "resizable": true,
-      "path": "/widget/labor_progress",
+      "path": "/widget/key_stroke",
       "meta": {},
-      "backgroundThrottling": true,
-      "previewImage": "/images/preview_labor_progress.png",
-      "supportDeployMode": 17,
-      "configPagePath": "/widget/config/labor_progress",
+      "backgroundThrottling": false,
+      "previewImage": "/images/preview_keystroke.png",
+      "supportDeployMode": 65536,
       "routes": []
     },
     {
@@ -302,40 +303,39 @@
       "routes": []
     },
     {
-      "name": "cn.widgetjs.widgets.key_stroke",
+      "name": "cn.widgetjs.widgets.countdown2",
       "title": {
-        "zh-CN": "键盘演示"
+        "zh-CN": "倒计时"
       },
       "description": {
-        "zh-CN": "在屏幕显示每一次快捷键敲击"
+        "zh-CN": "简单的倒计时组件，支持农历"
       },
       "keywords": [
         "recommend"
       ],
       "security": false,
-      "permissions": [
-        "keyboard"
-      ],
+      "permissions": [],
       "lang": "zh-CN",
-      "width": 4,
-      "height": 3,
+      "width": 2,
+      "height": 2,
       "maxWidth": 4,
       "webviewTag": false,
-      "maxHeight": 3,
-      "minWidth": 4,
-      "minHeight": 3,
-      "movable": false,
+      "maxHeight": 4,
+      "minWidth": 2,
+      "minHeight": 2,
+      "movable": true,
       "singleton": false,
       "resizable": true,
-      "path": "/widget/key_stroke",
+      "path": "/widget/countdown2",
       "meta": {},
-      "backgroundThrottling": false,
-      "previewImage": "/images/preview_keystroke.png",
-      "supportDeployMode": 65536,
+      "backgroundThrottling": true,
+      "previewImage": "/images/preview_countdown2.png",
+      "supportDeployMode": 17,
+      "configPagePath": "/widget/config/countdown2",
       "routes": []
     },
     {
-      "name": "cn.widgetjs.widgets.countdown2",
+      "name": "cn.widgetjs.widgets.countdown",
       "title": {
         "zh-CN": "倒计时"
       },
@@ -358,44 +358,44 @@
       "movable": true,
       "singleton": false,
       "resizable": true,
-      "path": "/widget/countdown2",
+      "path": "/widget/countdown",
       "meta": {},
       "backgroundThrottling": true,
-      "previewImage": "/images/preview_countdown2.png",
+      "previewImage": "/images/preview_countdown.png",
       "supportDeployMode": 17,
-      "configPagePath": "/widget/config/countdown2",
+      "configPagePath": "/widget/config/countdown",
       "routes": []
     },
     {
-      "name": "cn.widgetjs.widgets.countdown",
+      "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": 2,
-      "height": 2,
-      "maxWidth": 4,
+      "width": 4,
+      "height": 1,
+      "maxWidth": 6,
       "webviewTag": false,
-      "maxHeight": 4,
-      "minWidth": 2,
-      "minHeight": 2,
+      "maxHeight": 2,
+      "minWidth": 3,
+      "minHeight": 1,
       "movable": true,
       "singleton": false,
       "resizable": true,
-      "path": "/widget/countdown",
+      "path": "/widget/labor_progress",
       "meta": {},
       "backgroundThrottling": true,
-      "previewImage": "/images/preview_countdown.png",
+      "previewImage": "/images/preview_labor_progress.png",
       "supportDeployMode": 17,
-      "configPagePath": "/widget/config/countdown",
+      "configPagePath": "/widget/config/labor_progress",
       "routes": []
     },
     {
diff --git a/src/components/DatePickerDialog.vue b/src/components/DatePickerDialog.vue
@@ -1,48 +1,47 @@
 <script lang="ts" setup>
 import {
-  nextTick,
-  onMounted,
   ref,
 } from 'vue'
 import 'vue-scroll-picker/lib/style.css'
-import { useVModels } from '@vueuse/core'
+import { useVModel } from '@vueuse/core'
 import SolarDatePicker from '@/components/SolarDatePicker.vue'
 import LunarDatePicker from '@/components/LunarDatePicker.vue'
 
 const props = defineProps({
-  visible: {
+  modelValue: {
     type: Boolean,
     default: false,
   },
-  modelValue: {
+  date: {
     type: Date,
-    required: true,
+    default: new Date(),
   },
   lunar: {
     type: Boolean,
     default: false,
   },
 })
-const emits = defineEmits(['update:visible', 'update:modelValue', 'update:lunar'])
+const emits = defineEmits(['update:visible', 'update:modelValue', 'update:lunar', 'confirm'])
 const opened = ref(false)
-const {
-  visible,
-  modelValue,
-  lunar,
-} = useVModels(props, emits)
-onMounted(async () => {
-  await nextTick()
-})
+const model = useVModel(props, 'modelValue', emits)
+
+const isLunar = ref(props.lunar)
+const dateModel = ref(props.date)
+
+function onConfirmClick() {
+  model.value = false
+  emits('confirm', dateModel.value, isLunar.value)
+}
 </script>
 
 <template>
   <div class="picker-group">
     <el-dialog
-      v-model="visible" :modal="false" :show-close="false" @opened="opened = true"
+      v-model="model" :modal="false" :show-close="false" @opened="opened = true"
       @closed="opened = false"
     >
       <div class="header">
-        <el-radio-group v-model="lunar" label="label position">
+        <el-radio-group v-model="isLunar" label="label position">
           <el-radio-button :label="false">
             公历
           </el-radio-button>
@@ -53,15 +52,15 @@ onMounted(async () => {
       </div>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="visible = false">取消</el-button>
-          <el-button type="primary" @click="visible = false">
+          <el-button @click="model = false">取消</el-button>
+          <el-button type="primary" @click="onConfirmClick">
             确定
           </el-button>
         </span>
       </template>
       <template v-if="opened">
-        <LunarDatePicker v-if="lunar" v-model="modelValue" />
-        <SolarDatePicker v-else v-model="modelValue" />
+        <LunarDatePicker v-if="isLunar" v-model="dateModel" />
+        <SolarDatePicker v-else v-model="dateModel" />
       </template>
     </el-dialog>
   </div>
diff --git a/src/components/SolarDatePicker.vue b/src/components/SolarDatePicker.vue
@@ -8,7 +8,6 @@ import {
 } from 'vue'
 import { VueScrollPicker } from 'vue-scroll-picker'
 import 'vue-scroll-picker/lib/style.css'
-import dayjs from 'dayjs'
 
 const props = defineProps({
   height: {
@@ -42,11 +41,7 @@ const solarDates = computed(() => {
 })
 
 function emitDateUpdate() {
-  emits('update:modelValue', dayjs({
-    year: selectedYear.value,
-    month: selectedMonth.value - 1,
-    date: selectedDate.value,
-  }).toDate())
+  emits('update:modelValue', new Date(selectedYear.value, selectedMonth.value - 1, selectedDate.value))
 }
 
 watch(selectedYear, () => {
diff --git a/src/widgets/countdown/Countdown.widget.ts b/src/widgets/countdown/Countdown.widget.ts
@@ -3,7 +3,6 @@ import {
   WidgetKeyword,
 } from '@widget-js/core'
 
-// TODO 修改组件信息，标题，描述，关键词
 const name = 'cn.widgetjs.widgets.countdown'
 // 组件标题
 const title = { 'zh-CN': '倒计时' }
diff --git a/src/widgets/countdown/CountdownConfigView.vue b/src/widgets/countdown/CountdownConfigView.vue
@@ -10,6 +10,7 @@ import { Lunar } from 'lunar-typescript'
 import {
   BrowserWindowApi,
   WidgetDataApi,
+  WidgetParams,
 } from '@widget-js/core'
 import { CountdownModel } from '@/widgets/countdown/model/CountdownModel'
 import DatePickerDialog from '@/components/DatePickerDialog.vue'
@@ -23,16 +24,16 @@ export default {
     WidgetEditDialog,
   },
   setup() {
-    BrowserWindowApi.setSize(600, 400)
+    BrowserWindowApi.setSize(600, 500)
     BrowserWindowApi.center()
     const showDatePicker = ref(false)
     const date = ref(CountdownModel.DEFAULT_DATE)
     const isLunar = ref(false)
+    const widgetParams = WidgetParams.fromCurrentLocation()
     const defaultData = new CountdownModel(CountdownWidgetDefine.name)
     defaultData.theme.backgroundColor = '#FFC455'
     const {
       widgetData,
-      widgetParams,
     } = useWidget(CountdownModel, {
       defaultData,
       onDataLoaded: (data) => {
@@ -84,6 +85,10 @@ export default {
       this.widgetData.dateType = this.isLunar ? DateType.LUNAR : DateType.SOLAR
       await WidgetDataApi.save(this.widgetData)
     },
+    onDateConfirm(date: Date, isLunar: boolean) {
+      this.date = date
+      this.isLunar = isLunar
+    },
     async onSaveClick() {
       await this.onApplyClick()
       window.close()
@@ -105,7 +110,7 @@ export default {
         <el-input v-model="widgetData.title" />
       </el-form-item>
       <el-form-item label="事项日期">
-        <DatePickerDialog v-model:visible="showDatePicker" v-model="date" v-model:is-lunar="isLunar" />
+        <DatePickerDialog v-model="showDatePicker" :date="date" :is-lunar="isLunar" @confirm="onDateConfirm" />
         <el-button @click="showDatePicker = !showDatePicker">
           {{ dateStr }}
         </el-button>
diff --git a/src/widgets/countdown2/Countdown2.widget.ts b/src/widgets/countdown2/Countdown2.widget.ts
@@ -3,7 +3,6 @@ import {
   WidgetKeyword,
 } from '@widget-js/core'
 
-// TODO 修改组件信息，标题，描述，关键词
 const name = 'cn.widgetjs.widgets.countdown2'
 // 组件标题
 const title = { 'zh-CN': '倒计时' }
diff --git a/src/widgets/countdown2/Countdown2ConfigView.vue b/src/widgets/countdown2/Countdown2ConfigView.vue
diff --git a/src/widgets/countdown2/Countdown2Widget.vue b/src/widgets/countdown2/Countdown2Widget.vue
diff --git a/src/widgets/countdown2/Countdown2WidgetView.vue b/src/widgets/countdown2/Countdown2WidgetView.vue
