fix(mileage): 修复车牌多选弹窗手机端右侧溢出与粘贴行为
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

- 弹窗改为 right-0 锚右,宽度 min(280px, vw-24px),避免在窄列触发器下右侧溢出
- 移除 onPaste 自动 apply(避免与已输入文本拼接出非预期 token),改为粘贴入框 + 点击「添加」或 Cmd/Ctrl+Enter 确认
- placeholder 文案补充提示

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-04-29 16:12:19 +08:00
parent cab86556f3
commit f9c6155ea7

View File

@@ -103,23 +103,22 @@ export default function PlateMultiSelect({ allPlates, selected, onChange, placeh
initial={{ opacity: 0, y: -5 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -5 }}
className="absolute z-50 left-0 right-0 mt-1 bg-white border border-slate-100 rounded-xl shadow-xl w-[280px] max-w-[calc(100vw-32px)]"
style={{ minWidth: '100%' }}
className="absolute z-50 right-0 mt-1 bg-white border border-slate-100 rounded-xl shadow-xl"
style={{ width: 'min(280px, calc(100vw - 24px))', minWidth: '100%' }}
>
<div className="p-2 space-y-2">
<textarea
value={text}
onChange={(e) => setText(e.target.value)}
onPaste={(e) => {
const pasted = e.clipboardData.getData('text');
if (pasted && /[\s,;,;、]/.test(pasted)) {
e.preventDefault();
apply(text + (text ? ' ' : '') + pasted);
}
}}
placeholder="粘贴或输入车牌&#10;支持换行/逗号/空格分隔"
placeholder="粘贴或输入车牌&#10;支持换行/逗号/空格分隔,回车或点添加确认"
className="w-full bg-slate-50 border-none rounded-lg p-2 text-[11px] text-slate-700 outline-none focus:ring-1 focus:ring-blue-500/30 resize-none"
rows={3}
onKeyDown={(e) => {
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
apply(text);
}
}}
/>
<div className="flex justify-between items-center">
<span className="text-[10px] text-slate-400"> <span className="font-bold text-blue-600">{selected.length}</span> </span>