f7a8e3524c
- LeftPanel: 整合子组件，使用 useChannels/useGroups/useFavorites - BottomPanel: 使用 useUI 替代 props - VideoPlayer: 优化播放器逻辑 - DebugPanel: 移动到 Layout 目录 - InputPanel: 新增遥控输入组件 - useUI: 优化 UI 状态管理
69 lines
1.3 KiB
Vue
69 lines
1.3 KiB
Vue
<template>
|
||
<div class="debug-panel" v-if="showDebug">
|
||
<div class="debug-header">
|
||
<span>调试信息</span>
|
||
<button @click="handleClosePanel">×</button>
|
||
</div>
|
||
<div class="debug-content">
|
||
<p>调试功能开发中...</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
import { useEvent, useKeyEvent } from "../../composables/useEvent.js";
|
||
|
||
const input = ref("");
|
||
const showDebug = ref(false);
|
||
const handleClosePanel = () => {
|
||
showDebug.value = false;
|
||
input.value = "";
|
||
};
|
||
onMounted(() => {
|
||
useEvent("keyup", (e) => {
|
||
input.value += e.key;
|
||
if (input.value.includes("bug")) {
|
||
showDebug.value = true;
|
||
}
|
||
});
|
||
useKeyEvent("Escape", () => {
|
||
if (showDebug.value) {
|
||
handleClosePanel();
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.debug-panel {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: #1a1a1a;
|
||
border: 2px solid #ff6b6b;
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
z-index: 9999;
|
||
min-width: 300px;
|
||
}
|
||
|
||
.debug-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.debug-header button {
|
||
background: #333;
|
||
border: none;
|
||
color: #fff;
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|