2025-03-13 14:56:29 +08:00

96 lines
2.2 KiB
TypeScript

import { createApp } from 'vue';
import VueGridLayout from 'vue-grid-layout'; // 引入layout
import { baseAxios } from '@/utils/request';
import { createPinia } from 'pinia';
import Postmate from 'postmate';
import {
qiankunWindow,
renderWithQiankun,
} from 'vite-plugin-qiankun/dist/helper';
import App from './App.vue';
import { createProjectRouter } from './router';
import './global.less';
// Postmate 握手协议
const postmate = new Postmate.Model({
sayHi: (data: any) => {
console.log('sayHi', data);
},
});
// 数据模型
const model = {
name: '',
applicationId: -1,
projectId: -1,
fileId: '',
url: '',
accessToken: '',
};
await postmate.then((parent) => {
parent.emit('some-event', 'y-code-renderer is ready');
Object.assign(model, parent.model);
localStorage.setItem('y-code-access-token', model.accessToken || '');
baseAxios.interceptors.request.use((config) => {
config.headers.Authorization = `Bearer ${model.accessToken}`;
return config;
});
});
let app;
function render(props: object = {}) {
app = createApp(App);
setStyleSheet(props.styles);
const router = createProjectRouter(props.base);
app.use(router);
app.use(VueGridLayout);
app.use(createPinia());
app.mount('#y-code-app');
}
function setStyleSheet(styles: object = {}) {
const styleEle = document.createElement('style');
styleEle.type = 'text/css';
styleEle.innerHTML = `
:root {
--primary-color: ${styles.primaryColor || '#1677ff'};
--primary-light-color: ${styles.primaryLightColor || '#4096ff'};
--table-head-bg-color: ${styles.tableHeadBgColor || '#fafafa'};
--table-head-font-color: ${styles.tableHeadFontColor || '#191919'};
}
`;
document.head.append(styleEle);
}
const __POWERED_BY_QIANKUN__ =
qiankunWindow?.__POWERED_BY_QIANKUN__ ||
window?.proxy?.__POWERED_BY_QIANKUN__;
if (__POWERED_BY_QIANKUN__) {
renderWithQiankun({
bootstrap() {
console.log('bootstrap');
return Promise.resolve();
},
mount(props) {
console.log('mount');
render(props);
return Promise.resolve();
},
unmount() {
console.log('unmount');
if (app) {
app.unmount();
}
return Promise.resolve();
},
update() {},
});
} else {
render();
}