From 85dfa302ae75e9a023cfefebc3181fbde443d565 Mon Sep 17 00:00:00 2001
From: yoma <yingwaizhiying@gmail.com>
Date: Fri, 3 Jul 2026 21:17:49 +0800
Subject: [PATCH] Fix AI install prompt copy interaction

---
 .../src/components/agent-install-tabs.astro   | 107 ++++++++++++------
 1 file changed, 74 insertions(+), 33 deletions(-)

diff --git a/apps/site/src/components/agent-install-tabs.astro b/apps/site/src/components/agent-install-tabs.astro
index 45125da7..3c85c174 100644
--- a/apps/site/src/components/agent-install-tabs.astro
+++ b/apps/site/src/components/agent-install-tabs.astro
@@ -2,7 +2,7 @@
 import { Icon } from "astro-icon/components";
 
 const promptText =
-  "请先 Fork EdgeEver 仓库：https://github.com/msh01/edgeever\n\nFork 完成后，请使用 Fork 后的仓库把 EdgeEver 安装部署到 Cloudflare 上。";
+  "请先 Fork EdgeEver 仓库：https://github.com/msh01/edgeever\n\nFork 完成后，请使用 Fork 后的仓库把 EdgeEver 安装部署到 Cloudflare 上，并为 Fork 仓库配置自动同步上游，以便后续获取最新产品特性。";
 ---
 
 <section class="not-prose relative left-1/2 my-10 w-[min(92vw,960px)] -translate-x-1/2" data-agent-install-tabs>
@@ -25,6 +25,10 @@ const promptText =
 
   <div class="mt-8 overflow-hidden rounded-[28px] bg-slate-100 px-6 py-8 sm:px-10 md:px-14">
     <div class="agent-install-panel" data-tab-panel="agent">
+      <p class="mx-auto mb-8 max-w-3xl text-center text-lg leading-9 text-slate-600">
+        将下方提示词复制给你的 AI 助手（Claude Code、Codex、Cursor、Trae 等），它会自动完成安装。
+      </p>
+
       <div class="mx-auto max-w-3xl rounded-2xl bg-white p-6 shadow-sm">
         <p class="text-sm font-medium text-slate-400">提示词</p>
         <pre class="mt-4 whitespace-pre-wrap break-words font-mono text-base leading-8 text-slate-900">{promptText}</pre>
@@ -56,46 +60,83 @@ bun run deploy</pre>
   </div>
 </section>
 
-<script>
-  document.querySelectorAll("[data-agent-install-tabs]").forEach((root) => {
-    const tabs = Array.from(root.querySelectorAll("[data-tab-target]"));
-    const panels = Array.from(root.querySelectorAll("[data-tab-panel]"));
+<script is:inline>
+  const copyTextToClipboard = async (text) => {
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text);
+      return;
+    }
 
-    tabs.forEach((tab) => {
-      tab.addEventListener("click", () => {
-        const target = tab.getAttribute("data-tab-target");
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.left = "-9999px";
+    textarea.style.top = "0";
+    document.body.appendChild(textarea);
+    textarea.focus();
+    textarea.select();
 
-        tabs.forEach((item) => {
-          const isActive = item === tab;
-          item.setAttribute("aria-selected", String(isActive));
-          item.classList.toggle("active", isActive);
-          item.classList.toggle("text-brand", isActive);
-          item.classList.toggle("text-slate-500", !isActive);
+    const copied = document.execCommand("copy");
+    document.body.removeChild(textarea);
+
+    if (!copied) {
+      throw new Error("Copy command failed");
+    }
+  };
+
+  const initAgentInstallTabs = () => {
+    document.querySelectorAll("[data-agent-install-tabs]").forEach((root) => {
+      if (root.getAttribute("data-agent-install-ready") === "true") return;
+      root.setAttribute("data-agent-install-ready", "true");
+
+      const tabs = Array.from(root.querySelectorAll("[data-tab-target]"));
+      const panels = Array.from(root.querySelectorAll("[data-tab-panel]"));
+
+      tabs.forEach((tab) => {
+        tab.addEventListener("click", () => {
+          const target = tab.getAttribute("data-tab-target");
+
+          tabs.forEach((item) => {
+            const isActive = item === tab;
+            item.setAttribute("aria-selected", String(isActive));
+            item.classList.toggle("active", isActive);
+            item.classList.toggle("text-brand", isActive);
+            item.classList.toggle("text-slate-500", !isActive);
+          });
+
+          panels.forEach((panel) => {
+            panel.classList.toggle("hidden", panel.getAttribute("data-tab-panel") !== target);
+          });
         });
+      });
 
-        panels.forEach((panel) => {
-          panel.classList.toggle("hidden", panel.getAttribute("data-tab-panel") !== target);
+      root.querySelectorAll("[data-copy-text]").forEach((button) => {
+        button.addEventListener("click", async () => {
+          const text = button.getAttribute("data-copy-text") || "";
+          const label = button.querySelector("[data-copy-label]");
+
+          if (label) label.textContent = "复制中...";
+
+          try {
+            await copyTextToClipboard(text);
+            if (label) label.textContent = "已复制";
+            window.setTimeout(() => {
+              if (label) label.textContent = "复制提示词";
+            }, 1600);
+          } catch {
+            if (label) label.textContent = "复制失败";
+          }
         });
       });
     });
+  };
 
-    root.querySelectorAll("[data-copy-text]").forEach((button) => {
-      button.addEventListener("click", async () => {
-        const text = button.getAttribute("data-copy-text") || "";
-        const label = button.querySelector("[data-copy-label]");
-
-        try {
-          await navigator.clipboard.writeText(text);
-          if (label) label.textContent = "已复制";
-          window.setTimeout(() => {
-            if (label) label.textContent = "复制提示词";
-          }, 1600);
-        } catch {
-          if (label) label.textContent = "复制失败";
-        }
-      });
-    });
-  });
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initAgentInstallTabs);
+  } else {
+    initAgentInstallTabs();
+  }
 </script>
 
 <style>