fix: 调整dropdown,tag的间距

This commit is contained in:
肖应宇 2026-04-17 17:02:23 +08:00
parent eed425e965
commit 1d031f4577
3 changed files with 11 additions and 11 deletions

View File

@ -44,7 +44,7 @@ function DropdownMenuContent({
data-slot="dropdown-menu-content" data-slot="dropdown-menu-content"
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-[20px] border p-[20px] shadow-md", "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-[20px] border p-[20px] shadow-[0_0_20px_0_rgba(0,0,0,0.20)]",
className, className,
)} )}
{...props} {...props}

View File

@ -7,7 +7,7 @@ function Tag({ className, ...props }: React.ComponentProps<"span">) {
<span <span
data-slot="tag" data-slot="tag"
className={cn( className={cn(
"inline-flex items-center gap-1 rounded-full border border-transparent bg-[#EAE2F5] px-[15px] py-[4px] text-xs font-medium text-[#8E47F0]", "inline-flex items-center gap-1 rounded-full border border-transparent bg-[#EAE2F5] px-[15px] py-[5px] text-xs font-medium text-[#8E47F0]",
className, className,
)} )}
{...props} {...props}

View File

@ -679,7 +679,7 @@ export function InputBox({
<button <button
ref={mentionTriggerRef} ref={mentionTriggerRef}
type="button" type="button"
className="pointer-events-none absolute right-2 bottom-2 h-0 w-0 opacity-0" className="pointer-events-none absolute right-2 bottom-0 h-0 w-0 opacity-0"
aria-hidden="true" aria-hidden="true"
tabIndex={-1} tabIndex={-1}
/> />
@ -688,7 +688,7 @@ export function InputBox({
align="start" align="start"
side="top" side="top"
sideOffset={8} sideOffset={8}
className="w-[min(32rem,var(--radix-dropdown-menu-trigger-width)+28rem)] max-h-[578px] overflow-y-visible p-[20px]" className="w-[min(32rem,var(--radix-dropdown-menu-trigger-width)+28rem)] max-h-[400px] overflow-y-visible p-[20px]"
data-testid="mention-candidate-panel" data-testid="mention-candidate-panel"
onCloseAutoFocus={(event) => { onCloseAutoFocus={(event) => {
event.preventDefault(); event.preventDefault();
@ -1077,15 +1077,15 @@ function SuggestionList({
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
align="start" align="start"
className="min-w-[240px] rounded-[20px] p-5" className="min-w-[240px] rounded-[20px] p-[20px]"
onMouseEnter={() => setOpenDropdownKey(dropdownKey)} onMouseEnter={() => setOpenDropdownKey(dropdownKey)}
onMouseLeave={() => setOpenDropdownKey(null)} onMouseLeave={() => setOpenDropdownKey(null)}
> >
<DropdownMenuLabel className="px-2 text-xs text-[#8A8694]"> <DropdownMenuLabel className="p-0 text-[14px] text-[#333333]">
{suggestion.suggestion} {suggestion.suggestion}
</DropdownMenuLabel > </DropdownMenuLabel >
<DropdownMenuSeparator /> <DropdownMenuSeparator className="mx-0 mt-[20px] mb-0" />
<DropdownMenuGroup> <DropdownMenuGroup className=" pt-[20px] px-0">
{childSkills.map((item) => ( {childSkills.map((item) => (
<Tooltip <Tooltip
key={`${dropdownKey}-${item.id}`} key={`${dropdownKey}-${item.id}`}
@ -1246,11 +1246,11 @@ function IframeSkillDialogButton({
key={`${skill.skill_id}-${skill.title}-${index}`} key={`${skill.skill_id}-${skill.title}-${index}`}
className="shrink-0" className="shrink-0"
> >
{skill.title} <span className="text-[12px]/[12px]">{skill.title}</span>
{/* TODO: 因为后端接口不支持取消选择skill所以暂时禁用取消选择按钮 */} {/* TODO: 因为后端接口不支持取消选择skill所以暂时禁用取消选择按钮 */}
<button <button
onClick={() => clearSkill(skill.skill_id)} onClick={() => clearSkill(skill.skill_id)}
className="hover:bg-muted-foreground/20 ml-1 rounded-full" className="hover:bg-muted-foreground/20 ml-1 inline-flex size-4 items-center justify-center rounded-full align-middle"
type="button" type="button"
> >
<XIcon className="size-3" /> <XIcon className="size-3" />