fix(settings): 插件二级页头部补层级——面包屑导航层 + 大标题 + 元数据行

This commit is contained in:
Rick Ye
2026-09-11 15:29:24 +08:00
parent 335a08454a
commit 1326f9b672
@@ -1543,20 +1543,39 @@ export function SettingsModal({
<div className="flex min-w-0 flex-1 flex-col">
<div className="flex items-start gap-3 px-6 pb-3 pt-5">
{tab.startsWith('plugin:') ? (
// 二级页顶部:面包屑导航(shadcn Breadcrumb 语义——上级可点、ChevronRight 分隔、当前页前景色不可点)
<nav aria-label="面包屑" className="mt-1 flex min-w-0 flex-1 items-center gap-1.5 text-[12.5px]">
<button
type="button"
onClick={() => setTab('plugins')}
className="shrink-0 rounded-control px-1 py-0.5 text-ink-3 transition-colors hover:bg-hover hover:text-ink"
>
插件
</button>
<LuChevronRight size={13} aria-hidden="true" className="shrink-0 text-ink-3" />
<span aria-current="page" className="min-w-0 truncate font-medium text-ink">
{plugins.find((p) => `plugin:${p.manifest.id}` === tab)?.manifest.name ?? '插件'}
</span>
</nav>
// 二级页顶部:面包屑(导航层,shadcn 语义——上级可点、ChevronRight 分隔、当前页仅标记)
// + 页标题(与一级页同级 16px semibold)+ 元数据行(来源 · 版本)
(() => {
const info = plugins.find((p) => `plugin:${p.manifest.id}` === tab)
const originLabel =
!info || info.source === 'builtin' ? '内置' : info.origin === 'project' ? '项目' : '全局'
return (
<div className="min-w-0 flex-1">
<nav aria-label="面包屑" className="flex items-center gap-1 text-[11.5px]">
<button
type="button"
onClick={() => setTab('plugins')}
className="rounded-control px-1 py-0.5 text-ink-3 transition-colors hover:bg-hover hover:text-ink"
>
插件
</button>
<LuChevronRight size={12} aria-hidden="true" className="shrink-0 text-ink-3" />
<span aria-current="page" className="truncate text-ink-2">
{info?.manifest.name ?? '插件'}
</span>
</nav>
<div className="mt-1.5 flex min-w-0 items-center gap-2">
{info && <PluginIconValue icon={info.manifest.icon} size={16} className="shrink-0 text-ink-2" />}
<div className="truncate text-[16px] font-semibold text-ink">{info?.manifest.name ?? '插件'}</div>
</div>
{info && (
<div className="mt-0.5 text-[12px] leading-5 text-ink-3">
{originLabel}插件 · v{info.manifest.version}
</div>
)}
</div>
)
})()
) : (
<div className="min-w-0 flex-1">
<div className="text-[16px] font-semibold text-ink">{meta.title}</div>