用户中心

学习如何自定义和扩展 ShipNow 用户中心（Dashboard），包括菜单、新页面和添加表格。

概述

ShipNow 用户中心提供了一个灵活且可自定义的界面来管理您的应用程序。本指南将带您创建一个用户中心页面，并添加一个表格，包括：

📋 添加和自定义导航菜单
🎨 创建新页面
📊 实现数据表格

添加导航菜单

用户中心菜单在 components/dashboard-layout.tsx 中配置。以下是添加新菜单项的方法：

在 DashboardSidebar 组件中找到 navItems 数组：

components/dashboard-layout.tsx

const navItems = [
  { name: t("billing"), href: "/billing", icon: TbCreditCard },
];

向 navItems 数组添加新项目。

components/dashboard-layout.tsx

import { TbDashboard, TbSettings, TbCreditCard } from "react-icons/tb";
 
const navItems = [
  { name: t("billing"), href: "/billing", icon: TbCreditCard },
  { name: t("newPages"), href: "/new-pages", icon: TbSettings },
];

在语言文件中添加相应的翻译键：

messages/en.json

{
  "dashboard": {
    "billing": "Billing",
    "newPages": "New Pages"
  }
}

创建用户中心页面

在 app/[locale]/(dashboard) 目录中创建新的页面文件：

app/[locale]/(dashboard)/new-pages/page.tsx

import { useTranslations } from 'next-intl';
 
export default function NewPages() {
  const t = useTranslations('newPages');
 
  return (
    <div className="space-y-6">
      <h2 className="text-2xl font-bold mb-0">{t('title')}</h2>
      <p className="text-muted-foreground mb-4">{t('description')}</p>
    </div>
  )
}

在语言文件中添加相应的翻译键：

messages/en.json

{
  "newPages": {
    "title": "页面标题",
    "description": "页面描述在这里。"
  }
}

页面将在用户中心布局中显示如下：

用户中心新页面示例

实现数据表格

ShipNow 使用 Shadcn 的 DataTable 组件和 Tanstack Table 来实现强大的数据表格功能。

创建带有列配置的表格文件。

表格组件是客户端组件，所以我们将其放在新文件中。

app/[locale]/(dashboard)/new-pages/table.tsx

'use client';
 
import { useDataTable } from "@/hooks/use-data-table";
import { Badge } from "@/components/ui/badge";
import { useTranslations } from "next-intl";
import { DataTable } from "@/components/ui/data-table";
 
interface Order {
  id: string;
  product_name: string;
  mode: string;
  amount: number;
  paid_at: string;
}
 
interface TableProps {
  data: {
    data: Order[];
    total: number;
  };
}
 
const Table = ({ data }: TableProps) => {
  const t = useTranslations("billing");
 
  const { table } = useDataTable({
    data: data.data,
    total: data.total,
    columns: [
      {
        accessorKey: "product_name",
        header: t("product"),
      },
      {
        accessorKey: "mode",
        header: t("type"),
        cell: ({ row }) => {
          return (
            <Badge variant="outline">
              {row.getValue("mode")}
            </Badge>
          )
        },
      },
      {
        accessorKey: "amount",
        header: t("amount"),
        cell: ({ row }) => {
          return `$${(row.getValue("amount") as number).toFixed(2)}`;
        },
      },
      {
        accessorKey: "paid_at",
        header: t("paidAt"),
      },
    ],
  });
 
  return (
    <DataTable
      table={table}
    />
  );
};
 
export default Table;

将表格组件添加到您的页面：

app/[locale]/(dashboard)/new-pages/page.tsx

import { useTranslations } from "next-intl";
import Table from "./table";
 
export default function NewPagesPage() {
  const t = useTranslations('newPages');
 
  // 从数据库读取数据
  const data = {
    total: 2,
    data: [
      {
        id: "1",
        product_name: "Product 1",
        mode: "One-time",
        amount: 100,
        paid_at: "2025-01-01"
      },
      {
        id: "2",
        product_name: "Product 2",
        mode: "Monthly",
        amount: 200,
        paid_at: "2025-01-02"
      }
    ]
  };
 
  return (
    <div className="space-y-6">
      <h2 className="text-2xl font-bold mb-0">{t('title')}</h2>
      <p className="text-muted-foreground mb-4">{t('description')}</p>
      <Table data={data}/>
    </div>
  )
}

带有表格的页面将在用户中心布局中显示如下：

用户中心新页面带表格示例

需要帮助？

加入我们的 Discord 社区
在 GitHub 上提出问题

概述

添加导航菜单

创建用户中心页面

实现数据表格

需要帮助？

On this page