fix(settings): 插件二级页头部补层级——面包屑导航层 + 大标题 + 元数据行
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user