fix UI & token copy

frontend/src/components/QRCodeCard.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="flex flex-col items-center space-y-4 p-6 bg-base-100 rounded-xl shadow-lg 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>