feat(web): 设置页字段提示改为问号图标悬停气泡

- Field 的 hint 由输入框下方段落改为 label 旁问号图标,鼠标悬停显示提示气泡,覆盖所有设置 Tab
This commit is contained in:
oudecheng 2026-08-17 17:52:31 +08:00
parent d5c0b50e63
commit c666c48f09

View File

@ -1,6 +1,6 @@
// Shared UI primitives extracted from ConfigPage.tsx
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 type { KnownSource } from './types';
@ -15,9 +15,24 @@ export function Field({
}) {
return (
<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}
{hint && <p className="text-xs text-[var(--text-muted)]">{hint}</p>}
</div>
);
}