refactor(web): 提取共享的圆形多选勾选框组件,统一5处重复实现
创建群聊、消息多选、我的收藏多选、黑名单多选、转发选择器——这5个 地方各自手写了一份几乎一样的"圆形+选中变实心+里面check图标"勾选框 markup,样式上有细微且无意的差异(比如有的选中态多画了一圈边框、 用的灰色深浅不完全一致),上次只修了转发选择器一处,用户指出创建 群聊那里同样丑、而且问了"这种组件不该统一做吗"——確实该統一。 新增 `app/SelectionCheckbox.tsx`,把上次在转发选择器里验证过的 矢量勾选图标方案抽成共享组件,5处全部换成调用它。以后这个视觉样式 要再调整,改一个文件就够了,不会再出现"修好了一处,另外四处还是 老样子"的情况。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
3280b92a09
commit
4e1f1cbf0f
@@ -0,0 +1,32 @@
|
||||
interface SelectionCheckboxProps {
|
||||
selected: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shared circular multi-select indicator -- every list in this app that lets you pick multiple
|
||||
* items (forward targets, message multi-select, create-group contact picker, favorites, blocklist)
|
||||
* used to hand-copy this same circle-that-fills-with-a-checkmark markup into its own file, each
|
||||
* with small, accidental class differences (a stray extra border in the selected state here, a
|
||||
* slightly different gray there) -- fixing the same visual bug five separate times is exactly the
|
||||
* failure mode a shared component exists to prevent.
|
||||
*
|
||||
* Draws the checkmark as a hand-drawn SVG path, not the Material Icons font glyph `Icon` uses
|
||||
* everywhere else: the font's hinting isn't tuned for a ~13px glyph inside a 20px circle, so above
|
||||
* 1x pixel density it renders visibly soft/asymmetric where a vector path stays crisp at any scale.
|
||||
* A deliberate one-off exception to this app's usual `Icon`-for-everything convention, not a second
|
||||
* icon system -- scoped to this one selection indicator.
|
||||
*/
|
||||
export function SelectionCheckbox({ selected, className = '' }: SelectionCheckboxProps) {
|
||||
return (
|
||||
<span
|
||||
className={`grid h-5 w-5 flex-none place-items-center rounded-full ${selected ? 'bg-accent' : 'border-[1.5px] border-[#c5cad2] bg-white'} ${className}`}
|
||||
>
|
||||
{selected ? (
|
||||
<svg viewBox="0 0 16 16" fill="none" className="h-3 w-3 text-white" aria-hidden="true">
|
||||
<path d="M3.5 8.5L6.5 11.5L12.5 4.5" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
) : null}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user