Fix AI install prompt copy interaction
This commit is contained in:
yoma committed
1 parent
a2cb26bb5d
commit
85dfa302ae
1 file changed
+74
-33
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user