如何基于ButtonBuilder实现Discord机器人的URL复制按钮功能？

前置要求 #

确保你使用的是Discord.js v14+，因为ButtonBuilder属于该版本引入的组件API。同时安装必要依赖：

npm install discord.js @discordjs/builders

1. 实现基础URL缩短逻辑 #

先写一个轻量的短链生成与存储逻辑（生产环境建议用数据库替代内存存储）：

// 内存存储短码与原URL的映射，重启机器人后会丢失
const urlMapping = new Map();

function generateShortUrl(longUrl) {
  // 生成6位随机短码
  const shortCode = Math.random().toString(36).slice(2, 8);
  urlMapping.set(shortCode, longUrl);
  // 替换成你的跳转服务域名，或者直接返回短码（需搭配跳转逻辑）
  return `https://your-bot-url/${shortCode}`;
}

// 可选：短链跳转逻辑（需搭建web服务）
// app.get('/:shortCode', (req, res) => {
//   const longUrl = urlMapping.get(req.params.shortCode);
//   longUrl ? res.redirect(longUrl) : res.send('无效短链');
// });

2. 创建复制按钮并发送消息 #

在命令处理逻辑中，生成短链后用ButtonBuilder创建复制按钮，通过ActionRowBuilder挂载到消息上：

const { ButtonBuilder, ButtonStyle, ActionRowBuilder } = require('discord.js');

// 处理用户的url缩短命令
client.on('interactionCreate', async interaction => {
  if (!interaction.isChatInputCommand()) return;

  if (interaction.commandName === 'shorten') {
    const inputUrl = interaction.options.getString('url');
    
    // 验证URL合法性
    try {
      new URL(inputUrl);
    } catch {
      return interaction.reply({ content: '请输入有效的HTTP/HTTPS链接！', ephemeral: true });
    }

    const shortUrl = generateShortUrl(inputUrl);

    // 构建复制按钮
    const copyBtn = new ButtonBuilder()
      .setCustomId('copy_shortlink')
      .setLabel('复制短链')
      .setStyle(ButtonStyle.Primary)
      .setEmoji('📋');

    // 将按钮放入行组件
    const actionRow = new ActionRowBuilder().addComponents(copyBtn);

    // 发送带按钮的消息
    await interaction.reply({
      content: `生成的短链：\`${shortUrl}\``,
      components: [actionRow]
    });
  }
});

3. 处理按钮点击事件 #

用户点击按钮后，通过交互响应实现剪贴板复制提示，并更新按钮状态防止重复点击：

// 处理按钮交互
client.on('interactionCreate', async interaction => {
  if (!interaction.isButton()) return;

  if (interaction.customId === 'copy_shortlink') {
    // 从原消息中提取短链
    const shortUrlMatch = interaction.message.content.match(/`(https?:\/\/.+?)`/);
    if (!shortUrlMatch) return interaction.reply({ content: '无法获取短链', ephemeral: true });

    const shortUrl = shortUrlMatch[1];

    // 发送仅用户可见的复制提示
    await interaction.reply({
      content: `✅ 短链已复制：\`${shortUrl}\``,
      ephemeral: true
    });

    // 更新按钮为禁用状态
    const disabledBtn = new ButtonBuilder()
      .setCustomId('copy_shortlink')
      .setLabel('已复制')
      .setStyle(ButtonStyle.Secondary)
      .setEmoji('✅')
      .setDisabled(true);

    const updatedRow = new ActionRowBuilder().addComponents(disabledBtn);
    await interaction.message.edit({ components: [updatedRow] });
  }
});

生产环境优化建议 #

• 用数据库（如MongoDB、SQLite）替代urlMapping内存存储，避免重启丢失数据
• 增加短码重复检测，确保生成的短码唯一
• 搭建web服务实现短链跳转功能
• 添加更多URL验证规则（如禁止非法协议）

内容的提问来源于stack exchange，提问作者Hm Elius Hossain Himel