Tube - Studio Layout

在clerk提供的user dropdown中添加studio选项及跳转

• 空标签表示不渲染任何DOM元素，在返回多个元素时，不用必须被div包裹，不影响布局、样式

// src/modules/auth/ui/components/auth-button.tsx

"use client";
...
...
export const AuthButton = () => {
  return (
    <>
      <SignedIn>
        <UserButton>
          <UserButton.MenuItems>
            <UserButton.Link
              label="Studio"
              href="/studio"
              labelIcon={<ClapperboardIcon className="size-4" />}
            />
          </UserButton.MenuItems>
        </UserButton>
      </SignedIn>
      ...
    </>
  )
}

<Component>内容</Component>

• 像这样将内容写在组件中间，这个写法在React中默认会将 "内容" 传给组件的 props.children，不需要手动传；"内容" 不管是什么，都会作为一个叫作 children 的 prop 传过去

<StudioLayout>内容</StudioLayout>

• 以下2种写法是一个意思，把 abc 的值作为 children 传进去了

<StudioLayout>{abc}</StudioLayout>
<StudioLayout children={abc} />

• 这才是把 abc 作为命名 prop 传进去

<StudioLayout abc={abc} />

studio 模块的文件结构及 children 的传递

• 之前有提到过，我们当前项目的 src/app 路径下只放路由相关的文件，其他页面文件或者组件都放在 src/modules 文件夹下，关于页面的layout部分也是放在 modules 下的

src/
  app/
    studio/
      layout.tsx   // 在这个文件中导入 @/modules/studio/ui/layouts/studio-layout

// src/app/(studio)/layout.tsx
import { StudioLayout } from "@/modules/studio/ui/layouts/studio-layout";

interface LayoutProps {
  children: React.ReactNode
};

const Layout = ({children}:LayoutProps) => {
  return (
    <StudioLayout>{children}</StudioLayout>
  );
}

export default Layout;

src/
  modules/  
    studio/
      ui/
        layouts/
          studio-layout.tsx  // 在这个文件真正实现studio页面的layout

// src/modules/studio/ui/layouts/studio-layout.tsx
interface StudioLayoutProps {
  children: React.ReactNode;
}

export const StudioLayout = ({ children }: StudioLayoutProps) => {
  return (
    <div>
      {children}
    </div>
  );
}

默认导出和命名导出

• 默认导出
  • 可直接导入 import Page from ...，也可以重命名导入 import StudioPage from ...
  • 一个文件只能有 一个 export default
  • 在 Next.js 的 app 路由 里，page.tsx 必须用 默认导出，不然识别不了页面入口，只会被当做一个普通的导出组件

// src/app/(studio)/studio/page.tsx

const Page = async () => {
  return (
    <div>studio page</div>
  )
}

export default Page;

• 命名导出
  • 必须用花括号导出，且命名保持一致 import { StudioLayout } from ...
  • 重命名需要用 as修改import { PageLayout as StudioLayout } from ...
  • 一个文件可以有多个 export const ...

// src/modules/studio/ui/layouts/studio-layout.tsx

export const StudioLayout = ({ children }: StudioLayoutProps) => {
  return (
    ...
  )
}

Tips

1. usePathname()

• 获取当前页面的路径，不返回查询参数；只能在 客户端组件"use client"里使用
• 例如路径 http://localhost:3000/studio?a=1&b=2，会返回 /studio
• 查询参数使用 useSearchParams() 获取

import { usePathname } from "next/navigation"
const pathname = usePathname()

2. useUser()

• Clerk 提供的一个 React Hook，用来在客户端组件中获取当前登录用户的信息和状态
• 服务端组件中想要获取用户信息可以使用 useAuth()，tRPC路由中使用 auth() 获取用户
• 常见返回值如下：

import { useUser } from '@clerk/nextjs'

// 用户是否登录，用户信息是否加载完成，用户信息
const { isSignedIn, isLoaded, user } = useUser()

// 用户信息
const { id, imageUrl, fullName } = user

3. useSidebar()

import { useSidebar } from "@/components/ui/sidebar"

export function AppSidebar() {
  const {
    state, // 侧边栏折叠或展开
    open,
    setOpen,
    openMobile,
    setOpenMobile,
    isMobile,
    toggleSidebar,
  } = useSidebar()
}

class-variance-authority (cva)

• cva('', {...}) 创建一个样式生成器函数（注意：avatarVariants 是一个函数） ，我们这里只有一个variant就是size，defaultVariants就是不传size时使用的默认值
• VariantProps<typeof avatarVariants> 会根据你在 cva() 里定义的 variants，自动生成一个 TypeScript 类型，我们这里生成的就是 { size?: "default" | "xs" | "sm" | "lg" | "xl"; }
• 使用extends相当于我给 user-avatar 这个组件自定义了size属性，但这个属性的类型只能是 "default" | "xs" | "sm" | "lg" | "xl"

// src/components/user-avatar.tsx

import { cva, type VariantProps } from 'class-variance-authority';

const avatarVariants = cva('', {
  variants: {
    size: {
      default: 'h-9 w-9',
      xs: 'h-4 w-4',
      sm: 'h-6 w-6',
      lg: 'h-10 w-10',
      xl: 'h-[160px] w-[160px]',
    }
  },
  defaultVariants: {
    size: 'default',
  }
})

interface UseAvatarProps extends VariantProps<typeof avatarVariants> {
  imageUrl: string;
  name: string;
  className?: string;
  onClick?: () => void;
}

• 我们在声明 UserAvatar 组件时，直接从解构中获取了 size 属性
• 前面说了 avatarVariants 是一个函数，那么avatarVariants({size} 会根据size的传值返回对应的字符串，然后再通过 cn() 把多个class合并成一个

// src/components/user-avatar.tsx

export const UserAvatar = ({
  imageUrl,
  name,
  size,
  className,
  onClick
}: UseAvatarProps) => {
  <Avatar className={cn(avatarVariants({size}), className)} onClick={onClick}>
    <AvatarImage src={imageUrl} alt={name}></AvatarImage>
  </Avatar>
}

• 如果使用组件时传的值比如 <UserAvatar size='big' /> ，那么就会报错

// src/modules/studio/ui/components/studio-sidebar/studio-sidebar-header.tsx

<UserAvatar
  imageUrl={user.imageUrl}
  name={user.fullName ?? 'User'}
  size="lg"
  className="size-[112px] hover:opacity-80 transition-opacity"
/>