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 min-w-0 flex-1 flex-col">
|
||||||
<div className="flex items-start gap-3 px-6 pb-3 pt-5">
|
<div className="flex items-start gap-3 px-6 pb-3 pt-5">
|
||||||
{tab.startsWith('plugin:') ? (
|
{tab.startsWith('plugin:') ? (
|
||||||
// 二级页顶部:面包屑导航(shadcn Breadcrumb 语义——上级可点、ChevronRight 分隔、当前页前景色不可点)
|
// 二级页顶部:面包屑(导航层,shadcn 语义——上级可点、ChevronRight 分隔、当前页仅标记)
|
||||||
<nav aria-label="面包屑" className="mt-1 flex min-w-0 flex-1 items-center gap-1.5 text-[12.5px]">
|
// + 页标题(与一级页同级 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
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setTab('plugins')}
|
onClick={() => setTab('plugins')}
|
||||||
className="shrink-0 rounded-control px-1 py-0.5 text-ink-3 transition-colors hover:bg-hover hover:text-ink"
|
className="rounded-control px-1 py-0.5 text-ink-3 transition-colors hover:bg-hover hover:text-ink"
|
||||||
>
|
>
|
||||||
插件
|
插件
|
||||||
</button>
|
</button>
|
||||||
<LuChevronRight size={13} aria-hidden="true" className="shrink-0 text-ink-3" />
|
<LuChevronRight size={12} aria-hidden="true" className="shrink-0 text-ink-3" />
|
||||||
<span aria-current="page" className="min-w-0 truncate font-medium text-ink">
|
<span aria-current="page" className="truncate text-ink-2">
|
||||||
{plugins.find((p) => `plugin:${p.manifest.id}` === tab)?.manifest.name ?? '插件'}
|
{info?.manifest.name ?? '插件'}
|
||||||
</span>
|
</span>
|
||||||
</nav>
|
</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="min-w-0 flex-1">
|
||||||
<div className="text-[16px] font-semibold text-ink">{meta.title}</div>
|
<div className="text-[16px] font-semibold text-ink">{meta.title}</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user