90 lines
2.0 KiB
Vue
90 lines
2.0 KiB
Vue
<template>
|
|
<div class="main">
|
|
<Sidebar></Sidebar>
|
|
<MainPanel></MainPanel>
|
|
|
|
<Tour v-if="!userHasReadGuide"/>
|
|
<PasswordDialog v-if="useAuth"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { Connection } from './components/sidebar/sidebar';
|
|
|
|
import Sidebar from '@/components/sidebar/index.vue';
|
|
import MainPanel from '@/components/main-panel/index.vue';
|
|
import { setDefaultCss } from './hook/css';
|
|
import { greenLog, pinkLog } from './views/setting/util';
|
|
import { useMessageBridge } from './api/message-bridge';
|
|
import { initialise } from './views/connect';
|
|
import Tour from '@/components/guide/tour.vue';
|
|
import { userHasReadGuide } from './components/guide/tour';
|
|
|
|
import PasswordDialog from '@/components/password-dialog/index.vue';
|
|
import { privilegeStatus } from './components/password-dialog/status';
|
|
|
|
const bridge = useMessageBridge();
|
|
|
|
// 监听所有消息
|
|
bridge.addCommandListener('hello', data => {
|
|
greenLog(`${data.name}`);
|
|
greenLog(`version: ${data.version}`);
|
|
}, { once: true });
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const useAuth = Boolean(import.meta.env.VITE_USE_AUTH !== "false");
|
|
console.log(import.meta.env.VITE_USE_AUTH, useAuth);
|
|
|
|
privilegeStatus.allow = !Boolean(useAuth);
|
|
|
|
onMounted(async () => {
|
|
// 初始化 css
|
|
setDefaultCss();
|
|
|
|
pinkLog('OpenMCP Client 启动');
|
|
|
|
// 跳转到首页
|
|
if (route.name !== 'debug') {
|
|
const targetRoute = import.meta.env.BASE_URL + 'debug';
|
|
console.log('go to ' + targetRoute);
|
|
router.push(targetRoute);
|
|
}
|
|
|
|
// 进行桥接
|
|
await bridge.awaitForWebsocket();
|
|
|
|
// 根据是否需要密码进行后续的选择
|
|
if (!privilegeStatus.allow) {
|
|
return;
|
|
}
|
|
|
|
document?.addEventListener('click', () => {
|
|
Connection.showPanel = false;
|
|
});
|
|
|
|
await initialise();
|
|
});
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.main {
|
|
height: calc(100vh - 5px);
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.message-text img {
|
|
max-width: 300px;
|
|
}
|
|
|
|
|
|
.icon-chat:before {
|
|
font-weight: 1000;
|
|
}
|
|
</style>
|