96 lines
3.2 KiB
Vue
96 lines
3.2 KiB
Vue
<template>
|
|
<!-- 快捷操作卡片 -->
|
|
<div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl p-5 transform transition-all duration-300 hover:shadow-2xl border border-gray-100 h-full flex flex-col">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3">
|
|
<i class="fa-solid fa-magic text-purple-500"></i>
|
|
</div>
|
|
<h3 class="font-semibold">快捷操作</h3>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4 flex-grow">
|
|
<button
|
|
@click="clearMessages"
|
|
class="p-4 rounded-lg font-medium text-base flex flex-col items-center justify-center space-y-2 transition-all duration-300 bg-gray-100 hover:bg-gray-200 text-gray-700"
|
|
>
|
|
<i class="fa-solid fa-trash-can text-gray-500 text-lg"></i>
|
|
<span>清空消息</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="showConnectionHelp"
|
|
class="p-4 rounded-lg font-medium text-base flex flex-col items-center justify-center space-y-2 transition-all duration-300 bg-gray-100 hover:bg-gray-200 text-gray-700"
|
|
>
|
|
<i class="fa-solid fa-question-circle text-gray-500 text-lg"></i>
|
|
<span>帮助</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="copyDebugInfo"
|
|
class="p-4 rounded-lg font-medium text-base flex flex-col items-center justify-center space-y-2 transition-all duration-300 bg-gray-100 hover:bg-gray-200 text-gray-700"
|
|
>
|
|
<i class="fa-solid fa-copy text-gray-500 text-lg"></i>
|
|
<span>复制调试信息</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="toggleDarkMode"
|
|
class="p-4 rounded-lg font-medium text-base flex flex-col items-center justify-center space-y-2 transition-all duration-300 bg-gray-100 hover:bg-gray-200 text-gray-700"
|
|
>
|
|
<i class="fa-solid fa-moon text-gray-500 text-lg"></i>
|
|
<span>切换主题</span>
|
|
</button>
|
|
|
|
<button
|
|
@click="takePhoneScreenshot"
|
|
:disabled="!isConnected"
|
|
class="p-4 rounded-lg font-medium text-base flex flex-col items-center justify-center space-y-2 transition-all duration-300 bg-gray-100 hover:bg-gray-200 text-gray-700"
|
|
:class="{ 'opacity-50 cursor-not-allowed': !isConnected }"
|
|
>
|
|
<i class="fa-solid fa-mobile-screen text-gray-500 text-lg"></i>
|
|
<span>手机截屏</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// Props
|
|
const props = defineProps({
|
|
isConnected: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
// Emits
|
|
const emit = defineEmits(['clear-messages', 'show-help', 'take-phone-screenshot']);
|
|
|
|
// Methods
|
|
const clearMessages = () => {
|
|
emit('clear-messages');
|
|
};
|
|
|
|
const showConnectionHelp = () => {
|
|
emit('show-help');
|
|
};
|
|
|
|
const copyDebugInfo = () => {
|
|
const debugInfo = `浏览器: ${navigator.userAgent}\n时间: ${new Date().toLocaleString()}`;
|
|
navigator.clipboard.writeText(debugInfo).then(() => {
|
|
alert('调试信息已复制到剪贴板');
|
|
}).catch(err => {
|
|
|
|
});
|
|
};
|
|
|
|
const toggleDarkMode = () => {
|
|
document.documentElement.classList.toggle('dark');
|
|
};
|
|
|
|
const takePhoneScreenshot = () => {
|
|
if (props.isConnected) {
|
|
emit('take-phone-screenshot');
|
|
}
|
|
};
|
|
</script> |