fix: keep user and limit drag handles beside names

This commit is contained in:
sagitchu
2026-11-10 10:32:43 +08:00
parent 577c189737
commit e0dc2a9ca7
3 changed files with 22 additions and 13 deletions
@@ -58,7 +58,7 @@ export function OrderItem({
{...attributes}
{...listeners}
aria-label={`拖动排序:${label}`}
className="shrink-0 rounded p-1 text-default-500 hover:bg-default-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary disabled:opacity-40 disabled:cursor-not-allowed cursor-grab active:cursor-grabbing"
className={`inline-flex items-center justify-center shrink-0 rounded text-default-500 hover:bg-default-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary disabled:opacity-40 disabled:cursor-not-allowed cursor-grab active:cursor-grabbing ${row ? "p-1" : "h-8 w-8 [@media(pointer:coarse)]:h-11 [@media(pointer:coarse)]:w-11"}`}
disabled={disabled}
style={{ touchAction: "none" }}
type="button"
+8 -4
View File
@@ -358,14 +358,18 @@ export default function LimitPage() {
>
<Card className="shadow-sm overflow-hidden h-full">
<CardHeader className="pb-2 md:pb-2">
<OrderHandle />
<div className="flex justify-between items-start w-full">
<div>
<h3 className="font-semibold text-foreground">
<div className="flex items-center gap-2 w-full min-w-0">
<div className="flex items-center gap-1 flex-1 min-w-0">
<OrderHandle />
<h3
className="font-semibold text-foreground truncate"
title={rule.name}
>
{rule.name}
</h3>
</div>
<Chip
className="shrink-0"
color={rule.status === 1 ? "success" : "danger"}
size="sm"
variant="flat"
+13 -8
View File
@@ -1316,25 +1316,30 @@ export default function UserPage() {
>
<Card className="overflow-hidden h-full">
<CardHeader className="pb-2 md:pb-2">
<OrderHandle />
<div className="flex justify-between items-start w-full">
<div className="flex items-center gap-3 flex-1 min-w-0">
<div className="flex flex-wrap items-start gap-2 w-full">
<div className="flex items-center gap-3 grow basis-44 min-w-0">
<div className="flex items-center justify-center shrink-0 w-10 h-10 rounded-full bg-primary text-white font-bold text-sm relative">
{(user.name || user.user).slice(0, 2).toUpperCase()}
<span
className={`absolute bottom-0 right-0 w-3 h-3 border-2 border-white dark:border-zinc-900 rounded-full ${userStatus.color === "success" ? "bg-success" : "bg-danger"}`}
/>
</div>
<div className="flex flex-col min-w-0">
<h3 className="font-semibold text-foreground truncate text-sm">
{user.name || user.user}
</h3>
<div className="flex flex-col flex-1 min-w-0">
<div className="flex items-center gap-1 min-w-0">
<OrderHandle />
<h3
className="font-semibold text-foreground truncate text-sm"
title={user.name || user.user}
>
{user.name || user.user}
</h3>
</div>
<p className="text-xs text-default-500 truncate">
@{user.user}
</p>
</div>
</div>
<div className="flex items-center gap-1.5 ml-2">
<div className="flex flex-wrap items-center gap-1.5 ml-auto max-w-full shrink-0">
<Chip
className="text-xs"
color={userStatus.color}