[codex] fix(apikeys): support clipboard fallback on HTTP

frontend/src/components/ai-elements/masked-code-block.tsx

@@ -4,6 +4,7 @@ import { type ComponentProps, createContext, type HTMLAttributes, useContext, us
 import type { Element } from 'hast';
 import { CheckIcon, CopyIcon } from 'lucide-react';
 import { type BundledLanguage, codeToHtml, type ShikiTransformer } from 'shiki';
+import { copyTextToClipboard } from '@/lib/clipboard';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 
@@ -126,13 +127,8 @@ export const MaskedCodeBlockCopyButton = ({ onCopy, onError, timeout = 2000, chi
   const { realCode } = useContext(MaskedCodeBlockContext);
 
   const copyToClipboard = async () => {
-    if (typeof window === 'undefined' || !navigator?.clipboard?.writeText) {
-      onError?.(new Error('Clipboard API not available'));
-      return;
-    }
-
     try {
-      await navigator.clipboard.writeText(realCode);
+      await copyTextToClipboard(realCode);
       setIsCopied(true);
       onCopy?.();
       setTimeout(() => setIsCopied(false), timeout);

frontend/src/features/apikeys/components/apikeys-columns.tsx

@@ -2,8 +2,8 @@ import { format } from 'date-fns';
 import { ColumnDef, Table, Row } from '@tanstack/react-table';
 import { Copy, Eye } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'sonner';
-import { cn, extractNumberID } from '@/lib/utils';
+import { extractNumberID } from '@/lib/utils';
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { DataTableColumnHeader } from '@/components/data-table-column-header';
@@ -19,10 +19,10 @@ function ApiKeyCell({ apiKey, fullApiKey }: { apiKey: string; fullApiKey: ApiKey
   // 显示前8个字符和后4个字符，中间用省略号
   const maskedKey = apiKey.replace(/./g, '*').slice(0, -4) + apiKey.slice(-4);
 
-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(apiKey);
-    toast.success(t('apikeys.messages.copied'));
-  };
+  const { handleCopy: copyToClipboard } = useCopyToClipboard({
+    text: apiKey,
+    copyMessage: t('apikeys.messages.copied'),
+  });
 
   const handleViewKey = () => {
     openDialog('view', fullApiKey);

frontend/src/features/apikeys/components/apikeys-rotate-dialog.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { Copy, RefreshCw, AlertTriangle, CheckIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'sonner';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import {
@@ -12,6 +11,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { useApiKeysContext } from '../context/apikeys-context';
 import { useRotateApiKey } from '../data/apikeys';
 
@@ -20,7 +20,10 @@ export function ApiKeysRotateDialog() {
   const { isDialogOpen, closeDialog, selectedApiKey, setSelectedApiKey } = useApiKeysContext();
   const rotateApiKey = useRotateApiKey();
   const [newKey, setNewKey] = useState<string | null>(null);
-  const [isCopied, setIsCopied] = useState(false);
+  const { isCopied, handleCopy } = useCopyToClipboard({
+    text: newKey ?? '',
+    copyMessage: t('apikeys.messages.copied'),
+  });
 
   const handleRotate = async () => {
     if (!selectedApiKey) return;
@@ -35,15 +38,6 @@ export function ApiKeysRotateDialog() {
     }
   };
 
-  const handleCopy = async () => {
-    if (newKey) {
-      await navigator.clipboard.writeText(newKey);
-      setIsCopied(true);
-      toast.success(t('apikeys.messages.copied'));
-      setTimeout(() => setIsCopied(false), 2000);
-    }
-  };
-
   const handleClose = () => {
     setNewKey(null);
     closeDialog();

frontend/src/features/apikeys/components/apikeys-view-dialog.tsx

@@ -1,25 +1,21 @@
 import { useState, useEffect, useMemo } from 'react';
 import { Copy, Eye, EyeOff, AlertTriangle, Link, CheckIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'sonner';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { MaskedCodeBlock, MaskedCodeBlockCopyButton, highlightMaskedCode } from '@/components/ai-elements/masked-code-block';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { useApiKeysContext } from '../context/apikeys-context';
 
 function CopyBaseUrlButton({ baseUrl }: { baseUrl: string }) {
   const { t } = useTranslation();
-  const [isCopied, setIsCopied] = useState(false);
-
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(baseUrl);
-    setIsCopied(true);
-    toast.success(t('apikeys.messages.baseUrlCopied'));
-    setTimeout(() => setIsCopied(false), 2000);
-  };
+  const { isCopied, handleCopy } = useCopyToClipboard({
+    text: baseUrl,
+    copyMessage: t('apikeys.messages.baseUrlCopied'),
+  });
 
   return (
     <Tooltip>
@@ -38,6 +34,10 @@ export function ApiKeysViewDialog() {
   const { isDialogOpen, closeDialog, selectedApiKey } = useApiKeysContext();
   const [isVisible, setIsVisible] = useState(false);
   const [preRenderedCode, setPreRenderedCode] = useState<Record<string, { light: string; dark: string }>>({});
+  const { handleCopy: copyApiKey } = useCopyToClipboard({
+    text: selectedApiKey?.key ?? '',
+    copyMessage: t('apikeys.messages.copied'),
+  });
 
   const apiKey = selectedApiKey?.key || '';
   const maskedApiKey = selectedApiKey?.key ? selectedApiKey.key.slice(0, 3) + '...' + selectedApiKey.key.slice(-4) : '';
@@ -245,13 +245,6 @@ print(response.text)`
     renderAllCodeBlocks();
   }, [selectedApiKey?.key, codeExamples]);
 
-  const copyToClipboard = () => {
-    if (selectedApiKey?.key) {
-      navigator.clipboard.writeText(selectedApiKey.key);
-      toast.success(t('apikeys.messages.copied'));
-    }
-  };
-
   const maskedKey = selectedApiKey?.key ? selectedApiKey.key.replace(/./g, '*').slice(0, -4) + selectedApiKey.key.slice(-4) : '';
 
   return (
@@ -282,7 +275,7 @@ print(response.text)`
               <Button variant='outline' size='sm' onClick={() => setIsVisible(!isVisible)} className='flex-shrink-0'>
                 {isVisible ? <EyeOff className='h-4 w-4' /> : <Eye className='h-4 w-4' />}
               </Button>
-              <Button variant='outline' size='sm' onClick={copyToClipboard} className='flex-shrink-0'>
+              <Button variant='outline' size='sm' onClick={copyApiKey} className='flex-shrink-0'>
                 <Copy className='h-4 w-4' />
               </Button>
             </div>

frontend/src/hooks/use-copy-to-clipboard.ts

@@ -1,34 +1,33 @@
 import { useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
+import { copyTextToClipboard } from '@/lib/clipboard';
 
 type UseCopyToClipboardProps = {
   text: string;
   copyMessage?: string;
 };
 
-export function useCopyToClipboard({ text, copyMessage = 'Copied to clipboard!' }: UseCopyToClipboardProps) {
+export function useCopyToClipboard({ text, copyMessage }: UseCopyToClipboardProps) {
   const { t } = useTranslation();
   const [isCopied, setIsCopied] = useState(false);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-  const handleCopy = useCallback(() => {
-    navigator.clipboard
-      .writeText(text)
-      .then(() => {
-        toast.success(t('common.success.copiedToClipboard'));
-        setIsCopied(true);
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-          timeoutRef.current = null;
-        }
-        timeoutRef.current = setTimeout(() => {
-          setIsCopied(false);
-        }, 2000);
-      })
-      .catch(() => {
-        toast.error(t('common.errors.copyFailed'));
-      });
+  const handleCopy = useCallback(async () => {
+    try {
+      await copyTextToClipboard(text);
+      toast.success(copyMessage ?? t('common.success.copiedToClipboard'));
+      setIsCopied(true);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      timeoutRef.current = setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    } catch {
+      toast.error(t('common.errors.copyFailed'));
+    }
   }, [text, copyMessage, t]);
 
   return { isCopied, handleCopy };

frontend/src/lib/clipboard.ts

@@ -0,0 +1,30 @@
+function copyTextWithDocumentCommand(text: string): boolean {
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  textarea.setAttribute('readonly', '');
+  textarea.style.position = 'fixed';
+  textarea.style.left = '-9999px';
+  textarea.style.opacity = '0';
+
+  document.body.appendChild(textarea);
+  textarea.select();
+  textarea.setSelectionRange(0, textarea.value.length);
+
+  try {
+    // Clipboard API is unavailable on non-secure origins; this is the only broadly supported fallback.
+    return document.execCommand('copy');
+  } finally {
+    textarea.remove();
+  }
+}
+
+export async function copyTextToClipboard(text: string): Promise<void> {
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+
+  if (!copyTextWithDocumentCommand(text)) {
+    throw new Error('Clipboard API is unavailable and the compatibility copy command failed.');
+  }
+}