fix: make task due date fully clickable

frontend/src/App.vue

@@ -78,6 +78,7 @@ const composeListId = ref('')
 const composeDueAt = ref('')
 const composeHasTime = ref(false)
 const composeTime = ref('12:00')
+const composeDatePicker = ref<HTMLInputElement | null>(null)
 const composeTimePicker = ref<HTMLInputElement | null>(null)
 const composePriority = ref(0)
 const composeDescription = ref('')
@@ -119,6 +120,16 @@ const composeDueLabel = computed(() => {
   const value = new Date(year, month - 1, day)
   return Number.isNaN(value.getTime()) ? '设置截止日期' : new Intl.DateTimeFormat('zh-CN', { month: 'short', day: 'numeric', weekday: 'short' }).format(value)
 })
+function openComposeDuePicker() {
+  const picker = composeDatePicker.value as (HTMLInputElement & { showPicker?: () => void }) | null
+  if (!picker) return
+  try {
+    if (picker.showPicker) picker.showPicker()
+    else picker.click()
+  } catch {
+    picker.click()
+  }
+}
 function clearComposeDueDate() {
   composeDueAt.value = ''
   composeHasTime.value = false
@@ -934,10 +945,10 @@ onMounted(bootstrap)
           <div class="task-compose-row"><label>清单<select v-model="composeListId"><option v-for="list in lists" :key="list.id" :value="list.id">{{list.name}}</option></select></label><label>优先级<select v-model.number="composePriority"><option :value="0">无</option><option :value="1">低</option><option :value="2">中</option><option :value="3">高</option></select></label></div>
           <div class="task-compose-date-actions" aria-label="截止时间">
             <div class="task-compose-date-control">
-              <label class="task-compose-date-chip" :class="{selected:composeDueAt}">
+              <button class="task-compose-date-chip" :class="{selected:composeDueAt}" type="button" @click="openComposeDuePicker">
                 <CalendarDays/><span>{{ composeDueLabel }}</span>
-                <input v-model="composeDueAt" class="task-compose-native-picker" type="date" aria-label="选择截止日期">
+              </button>
-              </label>
+              <input ref="composeDatePicker" v-model="composeDueAt" class="task-compose-native-picker" type="date" aria-label="选择截止日期" tabindex="-1">
               <button v-if="composeDueAt" class="task-compose-date-clear" type="button" aria-label="清除截止日期" @click="clearComposeDueDate"><X/></button>
             </div>
             <button v-if="composeDueAt && !composeHasTime" class="task-compose-time-add" type="button" @click="addComposeTime">添加时间</button>

frontend/src/style.test.ts

@@ -483,15 +483,21 @@ describe('unified floating add interaction', () => {
   it('uses compact date and time chips instead of large visible mobile inputs', () => {
     expect(app).toContain("composeDueAt.value = activeView.value === 'today' ? defaultTaskDueAt() : ''")
     expect(app).toContain('const composeDueLabel = computed')
+    expect(app).toContain('ref="composeDatePicker"')
+    expect(app).toContain('aria-label="选择截止日期" tabindex="-1"')
     expect(app).toContain('class="task-compose-date-chip"')
-    expect(app).toContain('class="task-compose-native-picker"')
+    expect(app).toContain('@click="openComposeDuePicker"')
+    expect(app).toContain('function openComposeDuePicker()')
+    expect(app).toContain('picker.showPicker()')
     expect(app).toContain('<span>{{ composeDueLabel }}</span>')
     expect(app).toContain('v-if="composeDueAt" class="task-compose-date-clear"')
     expect(app).toContain('v-if="composeDueAt && !composeHasTime"')
     expect(app).toContain('v-else-if="composeDueAt" class="task-compose-time-chip"')
     expect(app).toContain('function clearComposeDueDate()')
-    expect(css).toContain('.task-compose-date-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}')
+    expect(css).toContain('.task-compose-date-chip{position:relative;display:inline-flex!important')
-    expect(css).toContain('.task-compose-native-picker{position:absolute;inset:0;opacity:0;cursor:pointer')
+    expect(css).toContain('min-height:44px')
+    expect(css).toContain('.task-compose-native-picker{position:absolute;width:1px!important;height:1px!important')
+    expect(css).toContain('pointer-events:none')
     expect(css).not.toContain('@media(max-width:480px){.task-compose-due-row')
     expect(app).toContain("composeHasTime.value ? composeTime.value : '23:59'")
   })