Logo文档
配置

设置标签配置

配置设置页面标签和导航结构

NEXTDEVKIT 为组织设置页面提供了全面的设置标签配置系统。设置标签配置位于 src/config/settings-tabs.tsx,支持图标、国际化和灵活导航。

🔧 设置标签结构

设置标签系统提供了组织设置页面的结构化方式:

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;
}
属性类型描述
valuestring标签的唯一标识符
labelstring标签的显示文本
iconLucideIconLucide React 图标组件
hrefstring导航链接URL

SettingsTabsConfig 接口

export interface SettingsTabsConfig {
  heading: string;
  description: string;
  tabs: SettingsTabItem[];
}
属性类型描述
headingstring设置部分的主标题
descriptionstring设置部分的描述文本
tabsSettingsTabItem[]设置标签配置数组