feat: 开发完成第一版本的 适配qiankun的子应用

.fes.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-16 10:53:09
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2025-04-01 15:43:12
+ * @LastEditTime: 2025-04-02 09:30:39
  */
 // import { resolve } from 'path';
 import { join } from 'path'
@@ -104,7 +104,12 @@ export default defineBuildConfig({
                 },
             },
         },
-        server: { 
+        server: {
+            server: {
+                headers: {
+                    'Access-Control-Allow-Origin': '*',
+                },
+            },
             host: '0.0.0.0',
             proxy: {
                 '/resource.cos': {

src/app.jsx

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-16 10:53:09
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2025-04-01 10:43:48
+ * @LastEditTime: 2025-04-02 11:00:19
  */
 import { defineRuntimeConfig, useModel } from '@fesjs/fes'
 import { FMenu } from '@fesjs/fes-design'
@@ -20,17 +20,24 @@ import { addCollection } from 'iconify-icon'
 import uimIcons from '@iconify/json/json/uim.json'
 import lineMdIcons from '@iconify/json/json/line-md.json'
 import wiIcons from '@iconify/json/json/wi.json'
+import { useQiankunTvtStore } from 'PLS/qiankunTvt/stores/index'
+import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
 import UserCenter from '@/components/forPreview/userCenter.vue'
 import PageLoading from '@/components/pageLoading.vue'
 
+
 addCollection(uimIcons)
 addCollection(lineMdIcons)
 addCollection(wiIcons)
 
+let qiankunTvtStore = null
 export default defineRuntimeConfig({
     beforeRender: {
         loading: <PageLoading />,
         action () {
+            if (qiankunWindow.__POWERED_BY_QIANKUN__) {
+                qiankunTvtStore = useQiankunTvtStore()
+            }
             const { signin, getMenu } = useModel('forPreview')
             signin()
             if ((process.env.FES_APP_PLUGINS === 'true' && process.env.NODE_ENV === 'development') || process.env.FES_APP_ONLINE_API) {
@@ -51,11 +58,13 @@ export function layout (layoutConfig) {
     }
 }
 
+
 export function onAppCreated ({ app }) {
     app.use(FMenu)
     app.use(Tres)
 
     window.$vue = app
+
     // if (process.env.FES_APP_PLUGINS === 'true') { 
     console.log(chalk.hex('#1c86e5')(`
      ░▒▓████████▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓████████▓▒░                 ░▒▓█▓▒░  ░▒▓███████▓▒░ 
@@ -152,14 +161,21 @@ export function modifyRoute (memo) {
     }
 }
 
-export const qiankun = {
+export const qiankun = { 
     // 应用加载之前
     async bootstrap (props) {
         console.log('son TvT.js bootstrap', props)
     },
     // 应用 render 之前触发
     async mount (props) {
+
         console.log('son TvT.js mount', props)
+        if (props) {
+            props.onGlobalStateChange((state, prev) => {
+                qiankunTvtStore.setGlobalState(state)
+            })
+            window.qiankunProps = props
+        }
     },
     // 当 props 更新时触发
     async update (props) {

src/plugins/qiankunTvt/config.js

@@ -0,0 +1,38 @@
+/*
+ * @Description:
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2025-04-01 15:50:33
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2025-04-02 11:25:25
+ */
+export default {
+    name: 'qiankunTvt',
+    title: '微前端qiankun',
+    intro: '本案例结合qiankun微前端框架，演示了如何把tvt以子应用引入到自己的主应用框架中，并且实现了qiankun的沙箱隔离机制。qiankun是一个基于single-spa的微前端框架，支持多种主应用和子应用的组合方式。',
+    version: '1.0.0',
+    author: '地虎降天龙',
+    website: 'https://gitee.com/hawk86104',
+    state: 'active',
+    creatTime: '2025-04-01',
+    updateTime: '2025-04-01',
+    require: [],
+    preview: [
+        {
+            src: 'plugins/qiankunTvt/preview/theBasic.png',
+            type: 'img',
+            name: 'theBasic',
+            title: '简单实例',
+            disableFPSGraph: false,
+            disableSrcBtn: true,
+        },
+        {
+            src: 'plugins/qiankunTvt/preview/events.png',
+            type: 'img',
+            name: 'events',
+            title: '通讯实例',
+            disableFPSGraph: false,
+            disableSrcBtn: true,
+        },
+    ],
+}

src/plugins/qiankunTvt/pages/events.vue

@@ -0,0 +1,113 @@
+<template>
+    <TresCanvas v-bind="state" :style="{ height }">
+        <TresPerspectiveCamera :position="[15, 15, 15]" :fov="45" :near="0.1" :far="1000" :look-at="[0, 0, 0]" />
+        <OrbitControls v-bind="controlsState" />
+        <TresAmbientLight :intensity="0.5" />
+
+        <TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow @pointer-enter="onPointerEnter" @pointer-leave="onPointerLeave">
+            <TresSphereGeometry :args="[2, 32, 32]" />
+            <TresMeshToonMaterial color="#006060" />
+        </TresMesh>
+
+        <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
+            <TresPlaneGeometry :args="[20, 20, 20, 20]" />
+            <TresMeshToonMaterial />
+        </TresMesh>
+
+        <TresDirectionalLight ref="TDirectionalLight" :position="[10, 8, 4]" :intensity="1" cast-shadow />
+        <TresDirectionalLight :position="[10, 2, 4]" :intensity="1" cast-shadow />
+
+        <TresGridHelper />
+    </TresCanvas>
+    <h1 class="text-center text-white w-full absolute" v-if="!qiankunWindow.__POWERED_BY_QIANKUN__">请通过qiankun主程序访问此页面</h1>
+</template>
+
+<script setup lang="ts">
+import { SRGBColorSpace, BasicShadowMap, NoToneMapping } from 'three'
+import { reactive, ref, onMounted, shallowRef, watchEffect } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
+import { useQiankunTvtStore } from 'PLS/qiankunTvt/stores/index'
+
+const state = reactive({
+    clearColor: '#201919',
+    shadows: true,
+    alpha: false,
+    shadowMapType: BasicShadowMap,
+    outputColorSpace: SRGBColorSpace,
+    toneMapping: NoToneMapping,
+    windowSize: !qiankunWindow.__POWERED_BY_QIANKUN__,
+})
+const controlsState = reactive({
+    enableDamping: true,
+    dampingFactor: 0.05,
+    enableZoom: true,
+    autoRotate: false,
+    autoRotateSpeed: 2,
+    maxPolarAngle: Math.PI,
+    minPolarAngle: 0,
+    maxAzimuthAngle: Math.PI,
+    minAzimuthAngle: -Math.PI,
+    enablePan: true,
+    keyPanSpeed: 7,
+    maxDistance: 100,
+    minDistance: 0,
+    minZoom: 0,
+    maxZoom: 100,
+    zoomSpeed: 1,
+    enableRotate: true,
+    rotateSpeed: 1,
+})
+
+const sphereRef = ref()
+const TDirectionalLight = shallowRef()
+
+const { onLoop } = useRenderLoop()
+const qiankunTvtStore = useQiankunTvtStore() as any
+let timeplay = 0
+onLoop(() => {
+    if (!sphereRef.value) return
+    if (qiankunTvtStore.floatMove) {
+        timeplay++
+        sphereRef.value.position.y = 4 + Math.sin(timeplay / 60) * 3
+    }
+})
+function onPointerEnter(ev: any) {
+    if (ev) {
+        if (ev.object.material.color.getHexString() !== 'ffff40') {
+            window.qiankunProps?.setGlobalState({ mouseInState: true, curType: 'mouseIn' })
+            ev.object.material.color.set('#ffFF40')
+        }
+    }
+}
+function onPointerLeave(ev: any) {
+    if (ev) {
+        if (ev.object.material.color.getHexString() !== '006060') {
+            window.qiankunProps?.setGlobalState({ mouseInState: false, curType: 'mouseIn' })
+            ev.eventObject.material.color.set('#006060')
+        }
+    }
+}
+
+watchEffect(() => {
+    if (TDirectionalLight.value) {
+        TDirectionalLight.value.shadow.mapSize.set(1000, 1000)
+        TDirectionalLight.value.shadow.camera.near = 0.5 // default
+        TDirectionalLight.value.shadow.camera.far = 50000 // default
+        TDirectionalLight.value.shadow.camera.top = 20
+        TDirectionalLight.value.shadow.camera.right = 20
+        TDirectionalLight.value.shadow.camera.left = -20
+        TDirectionalLight.value.shadow.camera.bottom = -20
+    }
+})
+
+const height = ref('auto')
+onMounted(() => {
+    sphereRef.value.position.y = 4
+    const parentElement = document.querySelector('.app-main')
+    if (parentElement) {
+        height.value = `${parentElement.clientHeight}px`
+    }
+})
+</script>

src/plugins/qiankunTvt/pages/theBasic.vue

@@ -24,6 +24,7 @@
 
         <TresGridHelper />
     </TresCanvas>
+    <h1 class="text-center text-white w-full absolute" v-if="!qiankunWindow.__POWERED_BY_QIANKUN__">请通过qiankun主程序访问此页面</h1>
 </template>
 
 <script setup lang="ts">
@@ -31,7 +32,7 @@ import { SRGBColorSpace, BasicShadowMap, NoToneMapping } from 'three'
 import { reactive, ref, onMounted, shallowRef, watchEffect } from 'vue'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
-import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
+import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
 
 const state = reactive({
     clearColor: '#201919',

src/plugins/qiankunTvt/stores/index.js

@@ -0,0 +1,23 @@
+/*
+ * @Description:
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2025-04-02 10:17:02
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2025-04-02 11:40:45
+ */
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useQiankunTvtStore = defineStore('qiankunTvtStore', () => {
+    const globalState = ref({})
+    const floatMove = ref(true)
+
+    function setGlobalState(value) {
+        globalState.value = value
+        if (value.curType === 'floatMove') {
+            floatMove.value = !floatMove.value
+        }
+    }
+    return { floatMove, setGlobalState, globalState }
+})