style(UI): 统一组件圆角样式
Modal: - 圆角从 rounded-xl 调整为 rounded-md ToolsDropdown: - 按钮样式简化,移除条件样式 - 下拉菜单和列表项圆角统一为 rounded-md
This commit is contained in:
parent
16079af79d
commit
ec4f5f2dba
@ -47,12 +47,7 @@ export function ToolsDropdown({ tools, onToolToggle, onEnableAllToggle }: ToolsD
|
|||||||
<Tooltip content="工具" position="top">
|
<Tooltip content="工具" position="top">
|
||||||
<button
|
<button
|
||||||
onClick={() => setIsOpen(!isOpen)}
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
className={cn(
|
className="w-8 h-8 flex items-center justify-center rounded-md transition-colors cursor-pointer text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-secondary)]"
|
||||||
'w-8 h-8 flex items-center justify-center rounded-lg transition-colors cursor-pointer',
|
|
||||||
enabledCount > 0
|
|
||||||
? 'text-[var(--color-primary)] bg-[var(--color-primary-light)]'
|
|
||||||
: 'text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-secondary)]'
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
<Wrench size={20} />
|
<Wrench size={20} />
|
||||||
</button>
|
</button>
|
||||||
@ -67,7 +62,7 @@ export function ToolsDropdown({ tools, onToolToggle, onEnableAllToggle }: ToolsD
|
|||||||
{/* 下拉菜单 */}
|
{/* 下拉菜单 */}
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
'absolute bottom-full left-0 mb-2 min-w-[220px] bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-xl shadow-lg p-2 z-50',
|
'absolute bottom-full left-0 mb-2 min-w-[220px] bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-md shadow-lg p-2 z-50',
|
||||||
'transition-all duration-150',
|
'transition-all duration-150',
|
||||||
isOpen
|
isOpen
|
||||||
? 'opacity-100 visible translate-y-0'
|
? 'opacity-100 visible translate-y-0'
|
||||||
@ -87,7 +82,7 @@ export function ToolsDropdown({ tools, onToolToggle, onEnableAllToggle }: ToolsD
|
|||||||
<button
|
<button
|
||||||
key={tool.id}
|
key={tool.id}
|
||||||
onClick={() => onToolToggle(tool.id)}
|
onClick={() => onToolToggle(tool.id)}
|
||||||
className="flex items-center gap-3 w-full px-3 py-2 rounded-lg hover:bg-[var(--color-bg-hover)] transition-colors"
|
className="flex items-center gap-3 w-full px-3 py-2 rounded-md hover:bg-[var(--color-bg-hover)] transition-colors"
|
||||||
>
|
>
|
||||||
{Icon && <Icon size={20} className="text-[var(--color-text-tertiary)]" />}
|
{Icon && <Icon size={20} className="text-[var(--color-text-tertiary)]" />}
|
||||||
<span className="flex-1 text-sm text-[var(--color-text-primary)] text-left">
|
<span className="flex-1 text-sm text-[var(--color-text-primary)] text-left">
|
||||||
|
|||||||
@ -87,7 +87,7 @@ export function Modal({
|
|||||||
<div
|
<div
|
||||||
ref={contentRef}
|
ref={contentRef}
|
||||||
className={cn(
|
className={cn(
|
||||||
'relative bg-[var(--color-bg-primary)] rounded-xl shadow-2xl',
|
'relative bg-[var(--color-bg-primary)] rounded-md shadow-2xl',
|
||||||
'animate-scale-in-fast',
|
'animate-scale-in-fast',
|
||||||
fullScreen ? 'w-full h-full rounded-none' : 'max-h-[90vh]',
|
fullScreen ? 'w-full h-full rounded-none' : 'max-h-[90vh]',
|
||||||
className
|
className
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user