ProfileLinks 组件

ProfileLinks 组件

概述

ProfileLinks 组件用于展示用户的个人简介和自定义社交链接，支持文本格式化（链接、加粗）和多种社交平台图标。

文件路径

src/components/user/profile-links.tsx

功能特性

  • 个人简介展示: 支持文本格式化
  • 链接自动识别: 自动将 URL 转换为可点击链接
  • 加粗文本: 支持 text 语法
  • 多平台图标: 支持 11 种社交平台
  • 自定义标签: 链接可显示自定义标签
  • 响应式布局: 链接自动换行

接口定义

export type CustomLinkType = 
  | "website" | "github" | "twitter" | "linkedin" 
  | "instagram" | "youtube" | "twitch" | "discord" 
  | "mastodon" | "bluesky" | "sponsor";

export interface CustomLink {
  type: CustomLinkType;
  url: string;
  label?: string;  // 可选的自定义标签
}

interface ProfileLinksProps {
  bio?: string | null;              // 个人简介
  customLinks?: CustomLink[] | null; // 自定义链接
  className?: string;               // 额外的 CSS 类
}

使用示例

import { ProfileLinks } from "@/components/user/profile-links";

export default function UserProfile({ user }: { user: User }) {
  return (
    <ProfileLinks
      bio={user.bio}
      customLinks={user.customLinks}
      className="mt-4"
    />
  );
}

文本格式化

链接自动转换

输入：访问 https://example.com 了解更多
显示：访问 [example.com](link) 了解更多

加粗文本

输入：**重要提示**：请阅读文档
显示：**重要提示**：请阅读文档（加粗）

支持的平台

平台图标悬停颜色
websiteGlobe默认
githubGitHub默认
twitterX (Twitter)默认
linkedinLinkedIn蓝色
instagramInstagram粉色
youtubeYouTube红色
twitchTwitch紫色
discordDiscord靛蓝
mastodonMastodon紫色
blueskyBluesky天蓝
sponsorHeart粉色

自定义图标

组件内置以下自定义 SVG 图标：

  • XIcon: X (Twitter) Logo
  • DiscordIcon: Discord Logo
  • MastodonIcon: Mastodon Logo
  • BlueskyIcon: Bluesky Logo

样式配置

const linkIcons: Record<CustomLinkType, LinkIconConfig> = {
  website: { 
    icon: Globe, 
    color: "text-muted-foreground", 
    hoverColor: "hover:text-foreground" 
  },
  linkedin: { 
    icon: Linkedin, 
    color: "text-muted-foreground", 
    hoverColor: "hover:text-blue-600" 
  },
  // ...
};

链接显示逻辑

  1. 显示平台图标
  2. 如果有 label，显示标签文本
  3. 链接可点击，在新标签页打开
  4. 链接有悬停颜色效果

依赖

  • lucide-react - 基础图标
  • @/lib/utils - cn 工具函数

注意事项

  1. 如果没有简介和链接，组件返回 null 不渲染
  2. 简介中的 URL 必须包含 http:// 或 https://
  3. 加粗语法必须是双星号包裹 text
  4. 所有链接使用 target="_blank" 和 rel="noopener noreferrer"
  5. URL 显示时会移除协议和尾部斜杠
← 返回目录