laoyang
33940fa730
评论附件拖放区放大:小胶囊 → 整块虚线大框 (#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,正常显示
2026-11-05 18:57:56 +08:00
..
2026-10-26 06:45:38 +08:00
2026-10-26 06:45:38 +08:00
2026-11-05 18:57:56 +08:00
2026-10-03 08:18:05 +08:00
2026-10-03 08:18:05 +08:00
2026-10-22 12:40:14 +08:00
2026-10-07 15:31:26 +08:00
2026-10-17 23:10:49 +08:00