用户中心控制台

控制台

用户中心

用户登录后,点击头像下拉,可以进入用户中心。查看自己的订单,编辑个人信息等。

你可以根据自己的需求,在用户控制台添加更多的功能。

user-orders

控制台布局

ShipAny 内置了一个控制台布局,位于 components/console/layout.tsx 文件。

实现一个用户中心布局,只需要引入控制台布局组件,传递一个 sidebar 即可。

app/[locale]/(default)/(console)/layout.tsx
import ConsoleLayout from "@/components/console/layout";
import { ReactNode } from "react";
import { Sidebar } from "@/types/blocks/sidebar";
import { getTranslations } from "next-intl/server";
import { getUserInfo } from "@/services/user";
import { redirect } from "next/navigation";
 
export default async function ({ children }: { children: ReactNode }) {
  const userInfo = await getUserInfo();
  if (!userInfo || !userInfo.email) {
    redirect("/auth/signin");
  }
 
  const t = await getTranslations();
 
  const sidebar: Sidebar = {
    nav: {
      items: [
        {
          title: t("user.my_orders"),
          url: "/my-orders",
          icon: "RiOrderPlayLine",
          is_active: true,
        },
      ],
    },
  };
 
  return <ConsoleLayout sidebar={sidebar}>{children}</ConsoleLayout>;
}