graphite_vue/src/App.vue

<script setup lang="ts">
import { useRouter } from "vue-router";
import { exceptionOb } from "./services/httpRequest";
import { createWebSocket, sharedWsUrl } from "./services/socket";
import { onMounted } from "vue";
import { getConfig, getContainerList } from "./services/sysConfig/sysConfig";
import { useSettingStore } from "./stores/setting";
import { getLiquidList } from "./services/liquid/liquidManage";
import { useStatusStore } from "./stores/status";
import { ElMessage } from "element-plus";
import { getUserList } from "./services/user/userManager";
import { useUserStore } from "./stores/user";
const router = useRouter();
const settingStore = useSettingStore();
const statusStore = useStatusStore();
const userStore = useUserStore();

const wsClient = createWebSocket(sharedWsUrl);
wsClient.dataOb.subscribe(data => {
	if (data.type === "status") {
		statusStore.setStatus(data.data);
	} else if (data.type === "warn") {
		ElMessage({
			message: data.data.msg,
			type: "warning",
		});
	}
});
wsClient.connect();

exceptionOb.subscribe(exp => {
	if (exp === "invalidToken") {
		router.replace("/login");
	}
});

onMounted(() => {
	getConfig().then(res => {
		if (res.success) {
			settingStore.setConfigs(res.data);
		}
	});
	getLiquidList({ pageNum: 1, pageSize: 9999 }).then(res => {
		if (res.success) {
			settingStore.setLiquidList(res.data.list);
		}
	});
	getContainerList().then(res => {
		if (res.success) {
			settingStore.setContainerConf(res.data);
		}
	});
	getUserList({ pageNum: 1, pageSize: 9999 }).then(res => {
		if (res.success) {
			userStore.setUserList(res.data.list);
		}
	});
});
</script>

<template>
	<div>
		<router-view></router-view>
	</div>
</template>

<style>
html,
body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
</style>