npmapps 1.1.6 → 1.2.0

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

@@ -1 +0,0 @@
-<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

@@ -1,43 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

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

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

@@ -1,103 +0,0 @@
-// 主页
-<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

@@ -1,159 +0,0 @@
-<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

@@ -1,125 +0,0 @@
-<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>