两年前给站点添加代码区域的拷贝功能，前后折腾了小半天，最终渲染效果有点不如意，作为半吊子前端开发，也没想着改进，能用就行，今年用AI开发了小程序，对于前端的开发也更加熟悉了，重构一波（AI重新设计）。

悟道：任务拆解开，很多小任务，AI开发起来还是顺手的。已经倒闭的小程序，75%代码由AI提供，拆解了多个任务交付，人工进行项目代码的组装。

前文

以为很简单的事情，增加一个代码复制按钮

正文

promot: 设计 css 和 JavaScript 代码，定位网页元素 class=“highlight”，这个元素的容器内，添加一个 复制按钮，实现复制代码的功能

给的第一稿代码一眼看上去就有问题，重新生成一稿，基本可用，复制的内容不对，有冗余的文字，再次引导优化，人工指定核心的颜色设计，包含哪些特效

了解到您对按钮的尺寸和颜色有特定的要求，我们可以重新设计按钮的样式以适应这些要求。以下是一个调整后的 CSS 样式，其中包括了您提供的颜色方案，并对按钮的尺寸进行了优化：

.copy-btn {
  position: absolute;
  top: 2px; /* 调整位置 */
  right: 2px;
  padding: 3px 6px; /* 缩小尺寸 */
  font-size: 12px; /* 减小字体大小 */
  background-color: #8FD1E1; /* 按钮背景色 */
  color: #272822; /* 文字颜色 */
  border: 1px solid #272822; /* 边框颜色 */
  border-radius: 3px; /* 圆角 */
  cursor: pointer;
  opacity: 0.7; /* 默认半透明 */
  transition: opacity 0.3s ease, background-color 0.3s ease; /* 平滑过渡效果 */
}

.copy-btn:hover {
  opacity: 1; /* 鼠标悬停时不透明 */
  background-color: #A3D4E5; /* 鼠标悬停时的背景色 */
}

.highlight {
  position: relative;
}

在这个样式中，我减小了按钮的尺寸和字体大小，使其更加精致。同时，按钮的默认状态是半透明的，当鼠标悬停在按钮上时，它会变为不透明，并且背景色会变得稍微亮一些，以提供视觉反馈。这样的设计既符合您的颜色要求，又保持了现代化和用户友好的特点。

对应的提供了一份更简单的 JavaScript：

document.addEventListener('DOMContentLoaded', function() {
  // 查找所有 .highlight 元素
  const highlights = document.querySelectorAll('.highlight');

  highlights.forEach(function(highlight) {
    // 创建复制按钮
    const copyBtn = document.createElement('button');
    copyBtn.textContent = '复制';
    copyBtn.classList.add('copy-btn');

    // 将按钮添加到每个 .highlight 元素中
    highlight.appendChild(copyBtn);

    // 添加点击事件监听器
    copyBtn.addEventListener('click', function() {
      // 假设 .highlight 下的第一个 <code> 元素包含要复制的代码
      const code = highlight.querySelector('code') ? highlight.querySelector('code').textContent : '';

      navigator.clipboard.writeText(code).then(() => {
        // 显示复制成功信息
        copyBtn.textContent = '已复制!';
        setTimeout(() => {
          copyBtn.textContent = '复制';
        }, 2000);
      }).catch(err => {
        console.error('复制失败: ', err);
      });
    });
  });
});

后记

虽说我更期望在代码区域的右上角，顶部区域新增复制按钮，由于对前端不够了解，无法基于关键词准确描述功能，和AI来回折腾几个回合也没有达到预期。

就是不知道随着时间的发展，AI对于程序开发会有多大的影响。