feat(web): 设置页字段提示改为问号图标悬停气泡
- Field 的 hint 由输入框下方段落改为 label 旁问号图标,鼠标悬停显示提示气泡,覆盖所有设置 Tab
This commit is contained in:
parent
d5c0b50e63
commit
c666c48f09
@ -1,6 +1,6 @@
|
|||||||
// Shared UI primitives extracted from ConfigPage.tsx
|
// Shared UI primitives extracted from ConfigPage.tsx
|
||||||
import { useState, type ReactNode } from 'react';
|
import { useState, type ReactNode } from 'react';
|
||||||
import { X, Plus, Trash2 } from 'lucide-react';
|
import { X, Plus, Trash2, HelpCircle } from 'lucide-react';
|
||||||
import { inputCls } from './constants';
|
import { inputCls } from './constants';
|
||||||
import type { KnownSource } from './types';
|
import type { KnownSource } from './types';
|
||||||
|
|
||||||
@ -15,9 +15,24 @@ export function Field({
|
|||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label className="block text-[13px] font-medium text-[var(--text-secondary)]">{label}</label>
|
<label className="flex items-center gap-1 text-[13px] font-medium text-[var(--text-secondary)]">
|
||||||
|
<span>{label}</span>
|
||||||
|
{hint && (
|
||||||
|
<span className="group/hint relative inline-flex">
|
||||||
|
<HelpCircle
|
||||||
|
className="h-3.5 w-3.5 shrink-0 cursor-help text-[var(--text-muted)] transition-colors group-hover/hint:text-[var(--accent-cyan)]"
|
||||||
|
aria-label={hint}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
role="tooltip"
|
||||||
|
className="pointer-events-none invisible absolute top-full left-0 z-50 mt-1.5 w-max max-w-[280px] rounded-lg border border-[var(--border-color)] bg-[var(--bg-tertiary)] px-2.5 py-1.5 text-xs leading-relaxed font-normal text-[var(--text-secondary)] opacity-0 shadow-lg transition-opacity duration-150 group-hover/hint:visible group-hover/hint:opacity-100"
|
||||||
|
>
|
||||||
|
{hint}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</label>
|
||||||
{children}
|
{children}
|
||||||
{hint && <p className="text-xs text-[var(--text-muted)]">{hint}</p>}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user