fix: 修复前端复制兼容性问题
This commit is contained in:
@@ -2,6 +2,7 @@
|
|||||||
import { keysApi } from "@/api/keys";
|
import { keysApi } from "@/api/keys";
|
||||||
import type { Group, GroupStatsResponse } from "@/types/models";
|
import type { Group, GroupStatsResponse } from "@/types/models";
|
||||||
import { getGroupDisplayName } from "@/utils/display";
|
import { getGroupDisplayName } from "@/utils/display";
|
||||||
|
import { copy } from "@/utils/clipboard";
|
||||||
import { Pencil, Trash } from "@vicons/ionicons5";
|
import { Pencil, Trash } from "@vicons/ionicons5";
|
||||||
import {
|
import {
|
||||||
NButton,
|
NButton,
|
||||||
@@ -124,15 +125,16 @@ function formatPercentage(num: number): string {
|
|||||||
return `${(num * 100).toFixed(1)}%`;
|
return `${(num * 100).toFixed(1)}%`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function copyUrl(url: string) {
|
async function copyUrl(url: string) {
|
||||||
navigator.clipboard
|
if (!url) {
|
||||||
.writeText(url)
|
return;
|
||||||
.then(() => {
|
}
|
||||||
window.$message.success("地址已复制到剪贴板");
|
const success = await copy(url);
|
||||||
})
|
if (success) {
|
||||||
.catch(() => {
|
window.$message.success("地址已复制到剪贴板");
|
||||||
window.$message.error("复制失败");
|
} else {
|
||||||
});
|
window.$message.error("复制失败");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetPage() {
|
function resetPage() {
|
||||||
|
@@ -3,6 +3,7 @@ import { keysApi } from "@/api/keys";
|
|||||||
import type { APIKey, Group, KeyStatus } from "@/types/models";
|
import type { APIKey, Group, KeyStatus } from "@/types/models";
|
||||||
import { appState } from "@/utils/app-state";
|
import { appState } from "@/utils/app-state";
|
||||||
import { getGroupDisplayName, maskKey } from "@/utils/display";
|
import { getGroupDisplayName, maskKey } from "@/utils/display";
|
||||||
|
import { copy } from "@/utils/clipboard";
|
||||||
import {
|
import {
|
||||||
AddCircleOutline,
|
AddCircleOutline,
|
||||||
AlertCircleOutline,
|
AlertCircleOutline,
|
||||||
@@ -149,15 +150,13 @@ async function loadKeys() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function copyKey(key: KeyRow) {
|
async function copyKey(key: KeyRow) {
|
||||||
navigator.clipboard
|
const success = await copy(key.key_value);
|
||||||
.writeText(key.key_value)
|
if (success) {
|
||||||
.then(() => {
|
window.$message.success("密钥已复制到剪贴板");
|
||||||
window.$message.success("密钥已复制到剪贴板");
|
} else {
|
||||||
})
|
window.$message.error("复制失败");
|
||||||
.catch(() => {
|
}
|
||||||
window.$message.error("复制失败");
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function testKey(_key: KeyRow) {
|
async function testKey(_key: KeyRow) {
|
||||||
|
35
web/src/utils/clipboard.ts
Normal file
35
web/src/utils/clipboard.ts
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
/**
|
||||||
|
* 复制文本
|
||||||
|
*/
|
||||||
|
export async function copy(text: string): Promise<boolean> {
|
||||||
|
// navigator.clipboard 仅在安全上下文(HTTPS)或 localhost 中可用
|
||||||
|
if (navigator.clipboard && window.isSecureContext) {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(text);
|
||||||
|
return true;
|
||||||
|
} catch (e) {
|
||||||
|
console.error("使用 navigator.clipboard 复制失败:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 后备方案:使用已弃用但兼容性更好的 execCommand
|
||||||
|
try {
|
||||||
|
const input = document.createElement("input");
|
||||||
|
input.style.position = "fixed";
|
||||||
|
input.style.opacity = "0";
|
||||||
|
input.value = text;
|
||||||
|
document.body.appendChild(input);
|
||||||
|
input.select();
|
||||||
|
const result = document.execCommand("copy");
|
||||||
|
document.body.removeChild(input);
|
||||||
|
|
||||||
|
if (!result) {
|
||||||
|
console.error("使用 execCommand 复制失败");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
} catch (e) {
|
||||||
|
console.error("后备复制方法执行出错:", e);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
Reference in New Issue
Block a user