119 lines
3.9 KiB
Vue
119 lines
3.9 KiB
Vue
<template>
|
|
<div class="flex flex-col items-center space-y-4 p-6 bg-base-100 rounded-xl shadow-lg mt-2 max-w-sm mx-auto backdrop-blur-xl glass">
|
|
|
|
<div class="p-3 bg-white rounded-lg shadow-inner cursor-pointer" @click="toggleQRCode">
|
|
<qrcode-vue :value="currentValue" :size="size" level="H" />
|
|
</div>
|
|
|
|
<div class="relative w-full p-4 ">
|
|
<p
|
|
class="text-sm break-all whitespace-pre-wrap m-1 p-1 pr-5 text-base-content border border-dashed border-base-content rounded-lg">
|
|
{{ currentValue }}
|
|
</p>
|
|
<button @click="copyValue" class="absolute top-2 right-2 btn btn-xs btn-ghost bg-gray-100">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2M16 8h2a2 2 0 012 2v8a2 2 0 01-2-2h-8a2 2 0 01-2-2v-2" />
|
|
</svg>
|
|
</button>
|
|
<div v-if="showCopied"
|
|
class="absolute -top-5 -right-2 bg-neutral text-neutral-content px-2 py-1 rounded text-xs opacity-100 transition-opacity duration-300">
|
|
Copied
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-2 w-full">
|
|
<button v-for="app in applist" :key="app.name"
|
|
class="btn btn-sm btn-outline btn-ghost flex items-center justify-center"
|
|
@click="applyPrefix(app.name)">
|
|
<img :src="app.url" alt="" class="w-5 h-5 mr-1">
|
|
<span>{{ app.name }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<button class="btn btn-outline btn-sm w-full" @click="resetValue">
|
|
Reset
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, watch } from 'vue';
|
|
import QrcodeVue from 'qrcode.vue';
|
|
|
|
// 定义组件接收的 props
|
|
const props = defineProps({
|
|
value: { // 二维码的原始值
|
|
type: String,
|
|
required: true
|
|
},
|
|
size: { // 二维码的尺寸 (像素)
|
|
type: Number,
|
|
default: 160 // 默认大小
|
|
}
|
|
});
|
|
|
|
// 使用 ref 创建一个响应式变量，用于存储当前显示的二维码值
|
|
// 初始值是来自 props 的 value
|
|
const currentValue = ref(props.value);
|
|
|
|
// 监听 props.value 的变化，如果外部传入的 value 改变，更新 currentValue
|
|
watch(() => props.value, (newValue) => {
|
|
currentValue.value = newValue;
|
|
});
|
|
|
|
|
|
const showCopied = ref(false);
|
|
|
|
const copyValue = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(currentValue.value);
|
|
|
|
showCopied.value = true;
|
|
setTimeout(() => {
|
|
showCopied.value = false;
|
|
}, 1500); // 1.5 秒后恢复
|
|
} catch (err) {
|
|
console.error('Failed to copy: ', err);
|
|
// 可以在这里添加错误提示
|
|
}
|
|
};
|
|
|
|
const applist = reactive([
|
|
// { name: 'openteam', url: '/assets/logo.svg' },
|
|
{ name: 'botgem', url: 'https://botgem.com/favicon.ico' },
|
|
{ name: 'opencat', url: 'https://opencat.app/favicon.ico' },
|
|
])
|
|
|
|
const applyPrefix = (name) => {
|
|
let origin = window.location.origin;
|
|
|
|
switch (name) {
|
|
case 'botgem':
|
|
currentValue.value = `ama://set-api-key?server=${origin}&key=${props.value}`;
|
|
break;
|
|
case 'opencat':
|
|
currentValue.value = `opencat://team/join?domain=${origin}&token=${props.value}`;
|
|
break;
|
|
default:
|
|
currentValue.value = name + props.value;
|
|
break;
|
|
}
|
|
};
|
|
|
|
const toggleQRCode = () => {
|
|
if (currentValue.value.startsWith('sk-')) {
|
|
return
|
|
} else {
|
|
window.open(currentValue.value, '_blank')
|
|
}
|
|
}
|
|
|
|
// 清除前缀，恢复到原始值
|
|
const resetValue = () => {
|
|
currentValue.value = props.value;
|
|
};
|
|
</script> |