feat: 添加新建任务按钮功能，聚焦待办列输入框

src/components/TaskDetailDrawer.vue

@@ -249,34 +249,38 @@ function remove(): void {
         <TagInput v-model="tags" :suggestions="store.allTags" />
       </div>
 
-      <section
-        class="flex flex-col gap-2 rounded-md border border-slate-200 bg-slate-50/70 px-3 py-2.5 dark:border-zinc-800 dark:bg-zinc-800/40"
-        aria-labelledby="task-time-heading"
-      >
+      <!--
+        时间：标题与「标签」同级平铺，明细单独用一个描边框圈起来。
+        只靠字号（标题 text-sm / 明细 text-xs）分层，框只负责把只读信息
+        和上方的可编辑字段区分开，不参与层级表达。
+      -->
+      <section class="flex flex-col gap-1.5" aria-labelledby="task-time-heading">
         <h3 id="task-time-heading" class="text-sm font-medium text-slate-600 dark:text-zinc-400">
           时间
         </h3>
-        <dl class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs">
+        <dl
+          class="grid grid-cols-[auto_1fr] items-baseline gap-x-3 gap-y-0.5 rounded-md border border-slate-300 px-3 py-2 text-xs dark:border-zinc-700"
+        >
           <dt class="text-slate-400 dark:text-zinc-500">创建</dt>
-          <dd data-role="created-at" class="text-slate-600 dark:text-zinc-300">
+          <dd data-role="created-at" class="tabular-nums text-slate-600 dark:text-zinc-300">
             {{ createdAtText ?? '—' }}
           </dd>
 
           <dt class="text-slate-400 dark:text-zinc-500">完成</dt>
-          <dd data-role="completed-at" class="text-slate-600 dark:text-zinc-300">
+          <dd data-role="completed-at" class="tabular-nums text-slate-600 dark:text-zinc-300">
             <span :class="completedAtText ? '' : 'text-slate-400 dark:text-zinc-500'">
               {{ completedLabel }}
             </span>
           </dd>
 
           <dt class="text-slate-400 dark:text-zinc-500">更新</dt>
-          <dd data-role="updated-at" class="text-slate-600 dark:text-zinc-300">
+          <dd data-role="updated-at" class="tabular-nums text-slate-600 dark:text-zinc-300">
             {{ updatedAtText ?? '—' }}
           </dd>
 
           <template v-if="archivedAtText">
             <dt class="text-slate-400 dark:text-zinc-500">归档</dt>
-            <dd data-role="archived-at" class="text-slate-600 dark:text-zinc-300">
+            <dd data-role="archived-at" class="tabular-nums text-slate-600 dark:text-zinc-300">
               {{ archivedAtText }}
             </dd>
           </template>