Logan
e363ded445
- 新增 PageShell/PageTabs/ContentPanel/PageLoading/PageEmpty 页面骨架 - index.css 设计令牌文档化，布局令牌与纯色主按钮（去除渐变粉彩） - 全站路由页接入 PageShell，云账单三 Tab 为标杆 - 主题体系：跟随系统 + 主流/开发者分组，新增 Dracula/Tokyo Night，One Dark 暖灰差异化 - 登录页/侧栏/顶栏去渐变光球，企业克制风 - 修复 AIAlertAnalyzer JSX 与构建依赖导入问题
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
// 页面级 Tab 导航 — 与内容区筛选分离 // Logan.Li
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export interface PageTabItem {
|
|
id: string;
|
|
label: string;
|
|
badge?: number | string;
|
|
}
|
|
|
|
interface PageTabsProps {
|
|
items: PageTabItem[];
|
|
value: string;
|
|
onChange: (id: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function PageTabs({ items, value, onChange, className }: PageTabsProps) {
|
|
return (
|
|
<nav
|
|
className={cn('dg-page-tabs flex gap-0.5 border-b border-[var(--border-default)]', className)}
|
|
role="tablist"
|
|
>
|
|
{items.map((tab) => {
|
|
const active = value === tab.id;
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={active}
|
|
onClick={() => onChange(tab.id)}
|
|
className={cn(
|
|
'dg-page-tab px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px',
|
|
active
|
|
? 'text-[var(--brand)] border-[var(--brand)]'
|
|
: 'dg-text-secondary border-transparent hover:text-[var(--text-primary)]',
|
|
)}
|
|
>
|
|
{tab.label}
|
|
{tab.badge != null && (
|
|
<span className="ml-1.5 text-xs dg-text-muted">({tab.badge})</span>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
} |