43 lines
1.3 KiB
Vue
43 lines
1.3 KiB
Vue
<script setup>
|
|
import { onMounted } from 'vue';
|
|
import { store, initProto } from './store/controllerStore';
|
|
import ConnectionPanel from './components/ConnectionPanel.vue';
|
|
import RemoteScreen from './components/RemoteScreen.vue';
|
|
import ControlBar from './components/ControlBar.vue';
|
|
import StatsBar from './components/StatsBar.vue';
|
|
|
|
onMounted(async () => {
|
|
if (!store.deviceId) store.deviceId = 'web-' + Math.random().toString(36).slice(2, 8);
|
|
await initProto();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app">
|
|
<header class="topbar">
|
|
<div class="brand">WebRTC 网页远程控制</div>
|
|
<div class="status" :class="{ ok: store.rtcConnected }">{{ store.statusText }}</div>
|
|
<div class="badges">
|
|
<span class="badge" :class="{ on: store.signalingConnected }">信令</span>
|
|
<span class="badge" :class="{ on: store.registered }">注册</span>
|
|
<span class="badge" :class="{ on: store.rtcConnected }">P2P</span>
|
|
<span class="badge" :class="{ on: store.dataChannelOpen }">通道</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="layout">
|
|
<aside class="sidebar">
|
|
<ConnectionPanel />
|
|
</aside>
|
|
<section class="stage">
|
|
<RemoteScreen />
|
|
<ControlBar />
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<StatsBar />
|
|
</footer>
|
|
</div>
|
|
</template>
|