配置
设置标签配置
配置设置页面标签和导航结构
NEXTDEVKIT 为组织设置页面提供了全面的设置标签配置系统。设置标签配置位于 src/config/settings-tabs.tsx
,支持图标、国际化和灵活导航。
🔧 设置标签结构
设置标签系统提供了组织设置页面的结构化方式:
export function getSettingsTabsConfig(): SettingsTabsConfig {
const t = useTranslations("settings.tabs");
const settingsTabs: SettingsTabItem[] = [
{
value: "account",
label: t("account"),
icon: User,
href: "/app/settings/account",
},
{
value: "security",
label: t("security"),
icon: Lock,
href: "/app/settings/security",
},
{
value: "billing",
label: t("billing"),
icon: CreditCard,
href: "/app/settings/billing",
},
{
value: "notification",
label: t("notification"),
icon: Bell,
href: "/app/settings/notification",
},
];
return {
heading: t("heading"),
description: t("description"),
tabs: settingsTabs,
};
}
📋 设置标签类型
SettingsTabItem 接口
export interface SettingsTabItem {
value: string;
label: string;
icon: LucideIcon;
href: string;
}
属性 | 类型 | 描述 |
---|---|---|
value | string | 标签的唯一标识符 |
label | string | 标签的显示文本 |
icon | LucideIcon | Lucide React 图标组件 |
href | string | 导航链接URL |
SettingsTabsConfig 接口
export interface SettingsTabsConfig {
heading: string;
description: string;
tabs: SettingsTabItem[];
}
属性 | 类型 | 描述 |
---|---|---|
heading | string | 设置部分的主标题 |
description | string | 设置部分的描述文本 |
tabs | SettingsTabItem[] | 设置标签配置数组 |