npmapps 1.1.4 → 1.1.6

package/app/wujie-wk/wujie-vue3-main/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/app/wujie-wk/wujie-vue3-main/src/components/HelloWorld.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

package/app/wujie-wk/wujie-vue3-main/src/components/WujieReact/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="wujie-react-container">
+    <WujieVue
+      width="100%"
+      height="100%"
+      name="react"
+      url="http://localhost:3005"
+      :sync="true"
+    ></WujieVue>
+  </div>
+</template>
+
+
+<style scoped>
+.wujie-react-container {
+  width: 100%;
+  height: 100%;
+  min-height: 500px;
+}
+</style>

package/app/wujie-wk/wujie-vue3-main/src/components/WujieVue2/index.vue

@@ -0,0 +1,8 @@
+<template>
+   <WujieVue :url="url" height="100%" width="100%" name="vue3-child"  :sync="true"
+     :alive="false"
+   ></WujieVue>
+</template>
+<script setup>
+const url = 'http://localhost:3004'
+</script>

package/app/wujie-wk/wujie-vue3-main/src/components/WujieVue3/index.vue

@@ -0,0 +1,8 @@
+<template>
+   <WujieVue :url="url" height="100%" width="100%" name="vue3-child"  :sync="true"
+     :alive="false"
+   ></WujieVue>
+</template>
+<script setup>
+const url = 'http://localhost:3001'
+</script>

package/app/wujie-wk/wujie-vue3-main/src/components/WujieVue3Copy/index.vue

@@ -0,0 +1,8 @@
+<template>
+   <WujieVue :url="url" height="100%" width="100%" name="vue3-child-copy"  :sync="true"
+     :alive="true"
+   ></WujieVue>
+</template>
+<script setup>
+const url = 'http://localhost:3002'
+</script>

package/app/wujie-wk/wujie-vue3-main/src/main.js

@@ -0,0 +1,23 @@
+import { createApp } from 'vue'
+import router from './router' // 更新导入路径
+import './style.css'
+import App from './App.vue'
+import WujieVue from "wujie-vue3";
+// 引人element-plus
+import 'element-plus/dist/index.css'
+import ElementPlus from 'element-plus'
+// 引入 pinia
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+const app = createApp(App)
+// 创建 pinia 实例
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
+
+app.use(router)
+app.use(WujieVue);
+app.use(ElementPlus);
+// 使用 pinia
+app.use(pinia)
+app.mount('#app') 

package/app/wujie-wk/wujie-vue3-main/src/router/index.js

@@ -0,0 +1,88 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/home.vue'
+import Test from '../views/test.vue'
+import WujieVue3 from '../components/WujieVue3/index.vue'
+import WujieVue3Copy from '../components/WujieVue3Copy/index.vue'
+import Vue3ChildMsg from '../views/vue3-child-msg.vue'
+import RouterJump from '../views/router-jump.vue'
+import WujieVue2 from '../components/WujieVue2/index.vue'
+import WujieReact from '../components/WujieReact/index.vue'
+// 定义路由配置
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home,
+      meta: {
+        title: '主应用主页',
+      }
+    },
+    {
+      path: '/test',
+      name: 'test',
+      component: Test,
+      meta: {
+        title: '测试页面',
+      }
+    },
+    
+    {
+      path: '/vue3-child',
+      name: 'vue3-child',
+      component: WujieVue3,
+      meta: {
+        title: 'Vue3子应用',
+      }
+    },
+
+    {
+      path: '/vue3-child-copy',
+      name: 'vue3-child-copy',
+      component: WujieVue3Copy,
+      meta: {
+        title: 'Vue3子应用（保活）',
+      }
+    },
+
+    {
+      path: '/vue2-child',
+      name: 'vue2-child',
+      component: WujieVue2,
+      meta: {
+        title: 'Vue2子应用',
+      }
+    },
+    // react子应用
+    {
+      path: '/react-child',
+      name: 'react-child',
+      component: WujieReact,
+      meta: {
+        title: 'React子应用',
+      }
+    },
+    // 子应用消息
+    {
+      path: '/vue3-child-msg',
+      name: 'vue3-child-msg',
+      component: Vue3ChildMsg,
+      meta: {
+        title: '子应用消息',
+      }
+    },
+    // 路由跳转 
+    {
+      path: '/router-jump',
+      name: 'router-jump',
+      component: RouterJump,
+      meta: {
+        title: '路由跳转',
+      }
+    }
+    
+  ]
+})
+
+export default router

package/app/wujie-wk/wujie-vue3-main/src/store/useMicroAppStore.js

@@ -0,0 +1,66 @@
+import { defineStore } from 'pinia'
+
+export const useMicroAppStore = defineStore('microApp', {
+  state: () => ({
+    // 存储子应用的消息
+    messages: [],
+    // 当前激活的子应用
+    activeApp: '',
+    // 子应用的状态
+    appStatus: {
+      vue3: false,
+      react: false,
+      vite: false
+    }
+  }),
+
+  // 添加持久化配置
+  persist: {
+    // 启用持久化
+    enabled: true,
+    // 存储到 localStorage
+    storage: localStorage,
+    // 只持久化 messages 数据
+    paths: ['messages']
+  },
+
+  getters: {
+    // 获取最新的消息
+    latestMessage: (state) => state.messages[state.messages.length - 1],
+    // 获取指定应用的消息
+    getMessagesByApp: (state) => (appName) => {
+      return state.messages.filter(msg => msg.from === appName)
+    }
+  },
+
+  actions: {
+    // 接收子应用消息
+    receiveMessage(message) {
+      this.messages.push({
+        ...message,
+        timestamp: new Date().getTime()
+      })
+    },
+
+    // 设置当前激活的子应用
+    setActiveApp(appName) {
+      this.activeApp = appName
+    },
+
+    // 更新子应用状态
+    updateAppStatus(appName, status) {
+      if (appName in this.appStatus) {
+        this.appStatus[appName] = status
+      }
+    },
+
+    // 清除指定应用的消息
+    clearMessages(appName) {
+      if (appName) {
+        this.messages = this.messages.filter(msg => msg.from !== appName)
+      } else {
+        this.messages = []
+      }
+    }
+  }
+})

package/app/wujie-wk/wujie-vue3-main/src/style.css

@@ -0,0 +1,3 @@
+body {
+  margin: 0;
+}

package/app/wujie-wk/wujie-vue3-main/src/views/home.vue

@@ -0,0 +1,103 @@
+// 主页
+<template>
+  <div class="home-container">
+    <h1 class="home-title">主应用主页</h1>
+    <!-- 使用 Element Plus 的导航菜单 -->
+    <el-menu
+      :default-active="activeRoute"
+      class="nav-menu"
+      mode="horizontal"
+      router
+      @select="handleSelect"
+    >
+      <el-menu-item 
+        v-for="route in routes" 
+        :key="route.path"
+        :index="route.path"
+      >
+        <el-icon v-if="route.meta?.icon">
+          <component :is="route.meta.icon" />
+        </el-icon>
+        <span>{{ route.meta.title }}</span>
+      </el-menu-item>
+    </el-menu>
+    
+    <div class="home-content">
+      <p class="welcome-text">欢迎使用无界微前端框架</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();
+const route = useRoute();
+
+// 获取路由配置
+const routes = router.options.routes.filter(route => route.name);
+
+// 当前激活的路由
+const activeRoute = computed(() => route.path);
+
+// 菜单选择处理
+const handleSelect = (path) => {
+  router.push(path);
+};
+</script>
+
+<style scoped>
+.home-container {
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  min-height: 80vh;
+}
+
+.home-title {
+  color: #2c3e50;
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+.nav-menu {
+  margin-bottom: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+:deep(.el-menu) {
+  border-radius: 8px;
+}
+
+:deep(.el-menu-item) {
+  display: flex;
+  align-items: center;
+  font-size: 1.1rem;
+}
+
+:deep(.el-menu-item.is-active) {
+  font-weight: bold;
+}
+
+:deep(.el-icon) {
+  margin-right: 8px;
+}
+
+.home-content {
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  padding: 2rem;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.welcome-text {
+  font-size: 1.2rem;
+  color: #666;
+  text-align: center;
+  line-height: 1.6;
+}
+</style>
+

package/app/wujie-wk/wujie-vue3-main/src/views/router-jump.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="flex-container" style="margin-top: 50px;">
+    <div class="container">
+      <h1>主应用路由跳转</h1>
+      <el-input v-model="url" placeholder="请输入地址"></el-input>
+      <el-input v-model="name" placeholder="请输入姓名"></el-input>
+      <el-input v-model="age" placeholder="请输入年龄" type="number"></el-input>
+      <el-select v-model="selectedApp" placeholder="请选择应用">
+        <el-option label="vue3-child" value="vue3-child"></el-option>
+        <el-option label="vue3-child-copy" value="vue3-child-copy"></el-option>
+        <el-option label="vue2-child" value="vue2-child"></el-option>
+        <el-option label="react-child" value="react-child"></el-option>
+      </el-select>
+      <el-button type="primary" @click="jumpToChild">跳转到子应用</el-button>
+    </div>
+    <div class="route-params">
+      <h2>路由参数</h2>
+      <p>地址: {{ $route.path }}</p>
+      <p v-for="(item,key) in $route.query" :key="item">{{ key }}:{{ item }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+import { ref } from "vue";
+import { ElInput, ElButton, ElSelect, ElOption } from "element-plus";
+import WujieVue from "wujie-vue3";
+const router = useRouter();
+const url = ref("/router-jump");
+const name = ref("zhangsan");
+const age = ref(18);
+const selectedApp = ref("vue3-child");
+const { bus } = WujieVue;
+
+const isAlive = {
+  'vue3-child':false,
+  'vue3-child-copy':true,
+  'react-child':false
+}
+
+const jumpToChild = () => {
+  router.push(selectedApp.value);
+  // 判断子应用是否存在
+  if ( isAlive[selectedApp.value] && window.document.querySelector(`iframe[name=${selectedApp.value}]`)) {
+    bus.$emit("router-jump", {
+      app: selectedApp.value,
+      path: url.value,
+      query: {
+        name: name.value,
+        age: age.value,
+      },
+    });
+  } else {
+    console.log("子应用不存在");
+    // 监听子应用加载完成
+    bus.$on("loaded", handleLoaded);
+  }
+};
+
+// 定义一个具体的函数
+const handleLoaded = (app) => {
+  console.log("子应用加载完成", app);
+  
+  if (app === selectedApp.value) {
+    console.log(selectedApp.value);
+    
+    bus.$emit("router-jump", {
+      app: selectedApp.value,
+      path: url.value,
+      query: {
+        name: name.value,
+        age: age.value,
+      },
+    });
+    // 使用相同的函数引用来移除监听器
+    bus.$off("loaded", handleLoaded);
+  }
+};
+</script>
+<style scoped>
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    padding: 20px;
+    background-color: #f8f8f8;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    width: 45%;
+    margin: 0;
+    transition: box-shadow 0.3s ease-in-out;
+}
+
+h1 {
+    color: #333;
+    margin-bottom: 20px;
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+}
+
+el-input, el-select {
+    width: 100%;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 10px;
+    transition: border-color 0.3s ease-in-out;
+}
+
+el-input:focus, el-select:focus {
+    border-color: #007BFF;
+}
+
+el-button {
+    width: 100%;
+    height: 40px;
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease-in-out;
+}
+
+el-button:hover {
+    background-color: #0056b3;
+}
+
+.route-params {
+    padding: 20px;
+    background-color: #eef2f7;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    width: 45%;
+    margin: 0;
+}
+
+.route-params h1 {
+    color: #007BFF;
+    font-size: 24px;
+}
+
+.route-params p {
+    font-size: 16px;
+    color: #333;
+    margin-bottom: 10px;
+    background-color: #fff;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+
+.flex-container {
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+    padding: 20px;
+    gap: 20px;
+}
+</style>

package/app/wujie-wk/wujie-vue3-main/src/views/test.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="test-container">
+    <h1 class="test-title">功能测试页面</h1>
+    
+    <div class="test-section">
+      <h2 class="section-title">基础功能演示</h2>
+      
+      <div class="card">
+        <h3>计数器示例</h3>
+        <div class="counter-wrapper">
+          <button class="btn" @click="decrease">-</button>
+          <span class="counter">{{ counter }}</span>
+          <button class="btn" @click="increase">+</button>
+        </div>
+      </div>
+
+      <div class="card">
+        <h3>数据列表示例</h3>
+        <ul class="test-list">
+          <li v-for="item in items" :key="item.id" class="list-item">
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const counter = ref(0)
+const items = ref([
+  { id: 1, name: '测试项目 1' },
+  { id: 2, name: '测试项目 2' },
+  { id: 3, name: '测试项目 3' }
+])
+
+const increase = () => {
+  counter.value++
+}
+
+const decrease = () => {
+  counter.value--
+}
+</script>
+
+<style scoped>
+.test-container {
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.test-title {
+  color: #2c3e50;
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+.test-section {
+  margin-top: 2rem;
+}
+
+.section-title {
+  color: #42b983;
+  font-size: 1.8rem;
+  margin-bottom: 1.5rem;
+}
+
+.card {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.card h3 {
+  color: #2c3e50;
+  margin-bottom: 1rem;
+}
+
+.counter-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.counter {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  text-align: center;
+}
+
+.btn {
+  background-color: #42b983;
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1.2rem;
+}
+
+.btn:hover {
+  background-color: #3aa876;
+}
+
+.test-list {
+  list-style: none;
+  padding: 0;
+}
+
+.list-item {
+  padding: 0.8rem;
+  border-bottom: 1px solid #eee;
+}
+
+.list-item:last-child {
+  border-bottom: none;
+}
+</style>