AIプログラミングとタスク分解

2年前にサイトに追加したコード領域のコピー機能の開発で、あれほど手間取ったのに、最終的な表示は少し期待外れだった。半熟前任開発者として、動けば良いやと諦め、そのままにしてきた。今年は__INLINE_CODE_0__で小程序を開発し、フロントエンド開発にも慣れたので、改めて（AIによる再設計）。

悟道：任務分解され、多くの小任務が __INLINE_CODE_0__开发起来还是顺手的。已经倒闭的小程序，__INLINE_CODE_1__BOLD_5AI提供，拆解了多个任务交付，人工进行项目代码的组装。

前文

申し訳ありませんが、翻訳する中国語のテキストが提供されていません。テキストを提供していただければ、日本語に翻訳します。

正文

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;
}

このスタイルでは、ボタンのサイズとフォントサイズを小さくし、より洗練された印象にしました。また、ボタンのデフォルト状態は半透明で、マウスオーバー時に不透明になり、背景色がわずかに明るくなることで視覚的なフィードバックを提供します。このようなデザインは、お客様の色に関する要件を満たしつつ、モダンさとユーザビリティを維持しています。

対応する、より簡単なものを提示しました。

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がプログラミングにどの程度影響を与えるか、まだわからない。