diff --git a/src/components/md-deck/DeckHeader.tsx b/src/components/md-deck/DeckHeader.tsx
index 5c7a0ff..d7ba752 100644
--- a/src/components/md-deck/DeckHeader.tsx
+++ b/src/components/md-deck/DeckHeader.tsx
@@ -1,3 +1,5 @@
+import { Show, createSignal, onMount } from "solid-js";
+import { Portal } from "solid-js/web";
import type { DeckStore } from "./hooks/deckStore";
export interface DeckHeaderProps {
@@ -9,36 +11,93 @@ export interface DeckHeaderProps {
*/
export function DeckHeader(props: DeckHeaderProps) {
const { store } = props;
+ const [showCopyFallback, setShowCopyFallback] = createSignal(false);
+ const [fallbackCode, setFallbackCode] = createSignal("");
+ let textareaRef: HTMLTextAreaElement | undefined;
+
+ onMount(() => {
+ if (showCopyFallback() && textareaRef) {
+ textareaRef.focus();
+ textareaRef.select();
+ }
+ });
+
+ const handleCopy = () => {
+ store.actions.copyCode((code) => {
+ setFallbackCode(code);
+ setShowCopyFallback(true);
+ });
+ };
+
+ const closeFallback = () => setShowCopyFallback(false);
return (
-
- {/* 编辑按钮 */}
-
+ <>
+
+ {/* 编辑按钮 */}
+
- {/* 导出 PDF 按钮 */}
-
+ {/* 导出 PDF 按钮 */}
+
- {/* 复制代码按钮 */}
-
-
+ {/* 复制代码按钮 */}
+
+
+
+ {/* 剪贴板不可用时的手动复制弹窗 */}
+
+
+
+
e.stopPropagation()}
+ >
+
复制代码
+
+ 自动复制失败(当前站点可能不是 HTTPS),请手动复制下面的代码:
+
+
+
+
+
+ >
);
}
diff --git a/src/components/md-deck/hooks/deckStore.ts b/src/components/md-deck/hooks/deckStore.ts
index f19a8d3..2719877 100644
--- a/src/components/md-deck/hooks/deckStore.ts
+++ b/src/components/md-deck/hooks/deckStore.ts
@@ -145,7 +145,7 @@ export interface DeckActions {
clearError: () => void;
generateCode: (backLayersStr?: string) => string;
- copyCode: (backLayersStr?: string) => Promise;
+ copyCode: (fallback?: (code: string) => void) => Promise;
setExporting: (exporting: boolean) => void;
exportDeck: () => void;
@@ -514,14 +514,18 @@ export function createDeckStore(initialSrc: string = ""): DeckStore {
return parts.join("");
};
- const copyCode = async (backLayersStr?: string) => {
- const code = generateCode(backLayersStr);
+ const copyCode = async (fallback?: (code: string) => void) => {
+ const code = generateCode();
try {
await navigator.clipboard.writeText(code);
alert("已复制到剪贴板!");
} catch (err) {
console.error("复制失败:", err);
- alert("复制失败,请手动复制");
+ if (fallback) {
+ fallback(code);
+ } else {
+ alert("复制失败,请手动复制");
+ }
}
};