评论附件拖放区放大：小胶囊 → 整块虚线大框 (#81)

用户 2026-11-05：「评论里面拖文件上传附件，那个地方太小了。」

原来：`padding:4px 10px` 的小胶囊（约 26px 高）+ 一行小字提示，
拖动落点只有那一条窄带 —— 触屏不好瞄，桌面也容易拖偏。

改成与「任务附件」同一套 `.upbox`（那个是站点级上传组件的标准外观）：
  · 高度 89px（触屏建议下限 44px，绰绰有余）
  · 宽度占满整行（桌面 840px / 手机 330px）
  · 虚线大框 + 加号图标 + 说明文字
  · 副标题写清「点『发表』时随这条评论一起发出」——
    与上面那块「拖上去立刻上传」语义不同，不写清楚用户会以为已经传了
  · 比「任务附件」矮一点（96 → 72 min-height，实测 89px）：
    评论框已经在下面，96px 会把讨论区推太长；89px 仍然很好点

顺带改的：
  · 已选文件从"逗号拼一行"改成"一行一个，带 📎"，长名截断
  · 渲染用 createElement + textContent，**不拼 innerHTML**
    （文件名是用户可控的，拼 innerHTML 就是 XSS）
  · 列表为空时 hidden，不挂空灰条
  · 加键盘支持：`.upbox` 带 role=button + tabindex，Enter/Space 能打开选择框

实测（Playwright，两种视口）：
  桌面 900px：840 × 89px，边框 1px dashed，触屏可点性 ✅
  手机 390px：330 × 89px，触屏可点性 ✅
  文件列表：2 项，高 56px，正常显示

templates/tasks/_panel.php

@@ -436,22 +436,29 @@ $tpLate     = $tpDue !== '' && $tpStatus !== 'done' && \App\Task::isOverdue($tpD
                ⚠️ 用原生 `<input type=file>` 而不是拖拽框：评论是一次性提交，
                   拖拽框那套（`data-tk-drop-box`）是"点了立刻上传"，两者语义不同。 */ ?>
         <?php /* 🔴 #79（用户 2026-11-05）：「评论框下面的附件也需要可以拖动添加。」
+               🔴 #81（同日）：「评论里面拖文件上传附件，那个地方太小了。」
 
-               ⇒ 给这片区域挂上拖拽落点（`data-cmt-drop`，由 task_panel.js 接管）。
-                 两个要点：
-                 ① `dragover` 必须 `preventDefault()` —— 不拦的话浏览器
-                    会把文件当"打开"处理（直接跳走，当前页面全丢）。
-                 ② 拖进来的文件**要写回真正的 `<input type=file>`** ——
-                    `<input>` 的 `files` 是只读的，得用 `DataTransfer` 重建
-                    一个 FileList 赋回去。这样表单提交时浏览器才会真的带上文件，
-                    否则只是"看起来加上了"，提交是空的。 */ ?>
+               ⇒ 原来是一个 `padding:4px 10px` 的小胶囊 + 一行小字提示，
+                  拖动落点只有 ~26px 高，触屏上根本不好瞄，桌面上也经常拖偏。
+               ⇒ 改成与**「任务附件」那块完全一样**的 `.upbox`：
+                  高 96px、虚线大框、加号图标 + 说明文字。
+                  同一个交互在一个页面里不该长两个样子，也不该一个大一个小。
+
+               ⚠️ 这块的语义是"挂到评论表单、点发表才一起提交"，
+                  而上面「任务附件」是"拖上去立刻上传" —— 外观一致但行为不同，
+                  所以说明文字要写清"随这条评论一起发出"，避免用户以为已经传上去了。
+               ⚠️ `data-cmt-drop` 仍是拖拽落点标记（task_panel.js 认它），
+                  不要改成 `data-tk-drop-box`（那是立刻上传那条路）。 */ ?>
         <div class="cmt-attach-row" data-cmt-drop>
-          <label class="cmt-attach-pick">
+          <label class="upbox cmt-upbox" role="button" tabindex="0"
+                 aria-label="点击选择文件，或把文件拖进来">
             <input type="file" name="attach[]" multiple class="sr-only"
                    id="tkp-cmt-files" data-cmt-file-input>
-            <span aria-hidden="true">📎</span> 添加附件
+            <span class="upbox-ico" aria-hidden="true">＋</span>
+            <span class="upbox-msg">点击选择，或把文件拖到这里</span>
+            <span class="cmt-upbox-sub">点「发表」时随这条评论一起发出</span>
           </label>
-          <span class="cmt-attach-name" data-cmt-file-name>可点击选择，也可把文件拖进来</span>
+          <div class="cmt-file-list" data-cmt-file-name hidden></div>
         </div>
         <div class="btn-row"><button class="btn btn-sm" type="submit">发表</button></div>
       </form>