fix: streamline task time selection

frontend/src/App.vue

@@ -771,9 +771,11 @@ onMounted(bootstrap)
           <header><div><small>NEW TASK</small><h2 id="task-compose-title">{{ taskComposeTitle }}</h2></div><button class="icon" type="button" aria-label="关闭添加任务" @click="closeTaskCompose"><X/></button></header>
           <label>任务名称<input v-model="composeTitle" class="task-compose-input" placeholder="准备做点什么？" autocomplete="off"></label>
           <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>
-          <label>截止日期<input v-model="composeDueAt" type="date"></label>
-          <label class="time-toggle"><input v-model="composeHasTime" type="checkbox"> 添加时间</label>
-          <label v-if="composeHasTime">时间<input v-model="composeTime" type="time"></label>
+          <div class="task-compose-due-row">
+            <label>截止日期<input v-model="composeDueAt" type="date"></label>
+            <button v-if="!composeHasTime" class="task-compose-time-add" type="button" @click="composeHasTime=true">添加时间</button>
+            <label v-else class="task-compose-time-field">时间<span><input v-model="composeTime" type="time"><button class="task-compose-time-remove" type="button" aria-label="移除时间" @click="composeHasTime=false"><X/></button></span></label>
+          </div>
           <label>重复<select v-model="composeRepeat" :disabled="!composeDueAt"><option value="none">不重复</option><option value="daily">每天</option><option value="weekly">每周</option><option value="monthly">每月</option><option value="yearly">每年</option><option value="custom">自定义…</option></select><small v-if="!composeDueAt" class="field-hint">设置截止时间后可重复</small></label>
           <section v-if="composeRepeat==='custom'" class="repeat-custom-fields"><div><span>每隔</span><input v-model.number="composeRepeatConfig.interval" type="number" min="1"><select v-model="composeRepeatConfig.frequency"><option value="daily">天</option><option value="weekly">周</option><option value="monthly">月</option><option value="yearly">年</option></select></div><label v-if="composeRepeatConfig.frequency==='weekly'">重复日期<span class="weekday-picker"><label v-for="day in weekdayOptions" :key="day.value"><input v-model="composeRepeatConfig.weekdays" type="checkbox" :value="day.value">{{day.label}}</label></span></label><label v-if="composeRepeatConfig.frequency==='monthly'">每月日期<input v-model.number="composeRepeatConfig.monthDays![0]" type="number" min="1" max="31"></label><label>结束方式<select v-model="composeRepeatConfig.endMode"><option value="never">永不结束</option><option value="date">指定日期</option><option value="count">重复次数</option></select></label><label v-if="composeRepeatConfig.endMode==='date'">结束日期<input v-model="composeRepeatConfig.until" type="date"></label><label v-if="composeRepeatConfig.endMode==='count'">重复次数<input v-model.number="composeRepeatConfig.count" type="number" min="1"></label></section>
           <label>备注<textarea v-model="composeDescription" rows="3" placeholder="可选，支持 Markdown"/></label>

frontend/src/style.test.ts

@@ -186,7 +186,12 @@ describe('unified floating add interaction', () => {
   it('defaults every new-task composer to today', () => {
     expect(app).toContain('composeDueAt.value = defaultTaskDueAt()')
     expect(app).toContain('v-model="composeDueAt" type="date"')
-    expect(app).toContain('v-model="composeHasTime" type="checkbox"')
+    expect(app).not.toContain('class="time-toggle"')
+    expect(app).not.toContain('v-model="composeHasTime" type="checkbox"')
+    expect(app).toContain('class="task-compose-due-row"')
+    expect(app).toContain('class="task-compose-time-add"')
+    expect(app).toContain('class="task-compose-time-remove"')
+    expect(css).toContain('.task-compose-due-row{display:grid;grid-template-columns:minmax(0,1fr) auto;')
     expect(app).toContain("composeHasTime.value ? composeTime.value : '23:59'")
   })