npmapps 1.1.4 → 1.1.6

package/app/wujie-wk/wujie-vue3-child copy/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "wujie-vue3-child",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.13",
+    "element-plus": "^2.9.1",
+    "pinia-plugin-persistedstate": "^4.2.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.0.5"
+  }
+}

package/app/wujie-wk/wujie-vue3-child copy/public/vite.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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/app/wujie-wk/wujie-vue3-child copy/src/App.vue

@@ -0,0 +1,124 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
+
+// 从路由配置生成菜单项
+const menuItems = computed(() => 
+  router.options.routes.map((route, index) => ({
+    index: String(index + 1),
+    path: route.path,
+    label: route.meta?.title || route.name,
+    children: route.children?.map((child, childIndex) => ({
+      index: `${index + 1}-${childIndex + 1}`,
+      path: child.path,
+      label: child.meta?.title || child.name
+    }))
+  }))
+)
+
+// 根据当前路由路径获取激活的菜单项
+const activeIndex = computed(() => {
+  const currentPath = route.path
+  for (const item of menuItems.value) {
+    if (item.path === currentPath) return item.index
+    const child = item.children?.find(child => child.path === currentPath)
+    if (child) return child.index
+  }
+  return '1'
+})
+
+const handleSelect = (key) => {
+  // 先查找主菜单项
+  const mainItem = menuItems.value.find(item => item.index === key)
+  if (mainItem && !mainItem.children) {
+    router.push(mainItem.path)
+    return
+  }
+
+  // 查找子菜单项
+  for (const item of menuItems.value) {
+    const childItem = item.children?.find(child => child.index === key)
+    if (childItem) {
+      router.push(childItem.path)
+      return
+    }
+  }
+}
+
+window.$wujie?.bus.$on('router-jump', (data) => {
+  if(data.app === 'vue3-child-copy'){
+    router.push({
+      path: data.path,
+      query: data.query
+    })
+  }
+  })
+  window.$wujie?.bus.$emit('loaded', 'vue3-child-copy')
+
+</script>
+
+<template>
+  <div class="app-container">
+    <el-menu
+      :default-active="activeIndex"
+      class="el-menu-demo"
+      mode="horizontal"
+      @select="handleSelect"
+    >
+      <template v-for="item in menuItems" :key="item.index">
+        <!-- 有子菜单的情况 -->
+        <el-sub-menu v-if="item.children?.length" :index="item.index">
+          <template #title>{{ item.label }}</template>
+          <el-menu-item 
+            v-for="child in item.children" 
+            :key="child.index" 
+            :index="child.index"
+          >
+            {{ child.label }}
+          </el-menu-item>
+        </el-sub-menu>
+        <!-- 没有子菜单的情况 -->
+        <el-menu-item v-else :index="item.index">
+          {{ item.label }}
+        </el-menu-item>
+      </template>
+    </el-menu>
+    
+    <div class="content-container">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.app-container {
+  min-height: 100vh;
+}
+
+.el-menu-demo {
+  padding-left: 20px;
+  height: 40px;  /* 减小菜单高度 */
+  line-height: 40px;  /* 确保文字垂直居中 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);  /* 添加阴影效果 */
+}
+
+:deep(.el-menu-item) {
+  height: 40px;  /* 减小菜单项高度 */
+  line-height: 40px;  /* 确保文字垂直居中 */
+  padding: 0 20px;  /* 调整内边距 */
+  font-size: 14px;  /* 调整字体大小 */
+}
+
+.content-container {
+  padding: 20px;  /* 给内容区域添加内边距 */
+}
+
+/* 自定义菜单项悬停和激活状态的样式 */
+:deep(.el-menu-item:hover),
+:deep(.el-menu-item.is-active) {
+  background-color: #f5f7fa;  /* 更柔和的背景色 */
+  color: #409eff;  /* Element Plus 的主题蓝色 */
+}
+</style>

package/app/wujie-wk/wujie-vue3-child copy/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-child copy/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-child copy/src/main.js

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import router from './router' // 更新导入路径
+import './style.css'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+
+const app = createApp(App)
+app.use(ElementPlus)
+app.use(router)
+app.mount('#app') 

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

@@ -0,0 +1,84 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/home.vue'
+import Test from '../views/test.vue'
+import PhoneCode from '../views/phone-code.vue'
+import ChildToParent from '../views/child-to-parent.vue'
+import ParentToChild from '../views/parent-to-child.vue'
+import RouterJump from '../views/router-jump.vue'
+// 定义路由配置
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home,
+      meta: {
+        title: '首页'
+      }
+    },
+
+
+    // 通讯
+    {
+      path: '/contact',
+      name: 'contact',
+      meta: {
+        title: '通讯'
+      },
+      children: [
+        // 子通知父
+        {
+          path: '/contact/child-to-parent',
+          name: 'child-to-parent',
+          component: ChildToParent,
+          meta: {
+            title: '子通知父'
+          }
+        },
+        // 父通知子
+        {
+          path: '/contact/parent-to-child',
+          name: 'parent-to-child',
+          component: ParentToChild,
+          meta: {
+            title: '父通知子'
+          }
+        }
+      ]
+    },
+
+    // 手机验证码
+    {
+      path: '/phone-code',
+      name: 'phone-code',
+      component: PhoneCode,
+      meta: {
+        title: '手机验证码'
+      }
+    },
+
+
+    // 路由跳转
+    {
+      path: '/router-jump',
+      name: 'router-jump',
+      component: RouterJump,
+      meta: {
+        title: '路由跳转'
+      }
+    },
+
+    // 测试
+    {
+      path: '/test',
+      name: 'test',
+      component: Test,
+      meta: {
+        title: '测试'
+      }
+    }
+  ]
+})
+
+export default router

package/app/wujie-wk/wujie-vue3-child copy/src/style.css

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

package/app/wujie-wk/wujie-vue3-child copy/src/views/child-to-parent.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="child-to-parent">
+    <h1>子应用消息发送</h1>
+    <div class="form-container">
+      <div class="form-item">
+        <label>标题：</label>
+        <input type="text" v-model="formData.title" placeholder="请输入标题">
+      </div>
+      <div class="form-item">
+        <label>消息：</label>
+        <input type="text" v-model="formData.message" placeholder="请输入消息内容">
+      </div>
+      <div class="form-item">
+        <label>类型：</label>
+        <select v-model="formData.type">
+          <option value="success">成功</option>
+          <option value="warning">警告</option>
+          <option value="error">错误</option>
+          <option value="info">信息</option>
+        </select>
+      </div>
+      <div class="form-item">
+        <label>持续时间：</label>
+        <input type="number" v-model="formData.duration" placeholder="持续时间(ms)">
+      </div>
+      <button class="submit-btn" @click="sendToParent">发送消息</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+
+const formData = reactive({
+  title: 'vue3子应用测试title',
+  message: 'vue3子应用测试消息',
+  type: 'success',
+  duration: 3000
+})
+
+const sendToParent = () => {
+  window.$wujie?.bus.$emit('child-event', {
+    message: formData.message,
+    type: formData.type,
+    duration: formData.duration,
+    title: formData.title
+  },'vue3子应用')
+}
+</script>
+
+<style scoped>
+.child-to-parent {
+  padding: 20px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+h1 {
+  color: #333;
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.form-container {
+  background: #fff;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.form-item {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+}
+
+label {
+  width: 100px;
+  text-align: right;
+  padding-right: 12px;
+  color: #606266;
+}
+
+input, select {
+  flex: 1;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  transition: border-color 0.2s;
+}
+
+input:focus, select:focus {
+  outline: none;
+  border-color: #409eff;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 40px;
+  background-color: #409eff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.submit-btn:hover {
+  background-color: #66b1ff;
+}
+
+.submit-btn:active {
+  background-color: #3a8ee6;
+}
+</style>

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

@@ -0,0 +1,53 @@
+// 主页
+<template>
+  <div class="home-container">
+    <h1 class="home-title">vue3-child-copy子应用主页（保活）</h1>
+    <div class="home-content">
+      <p class="welcome-text">欢迎使用无界微前端框架</p>
+      <el-button @click="jumpToChild">跳转到测试页面</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRoute, useRouter } from 'vue-router'
+
+// 可以在这里添加组件逻辑
+// 获取路由参数
+const router = useRouter()
+const route = useRoute()
+const jumpToChild = () => {
+  router.push('/test'+ '?name=123' )
+}
+</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;
+}
+
+.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-child copy/src/views/parent-to-child.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="parent-to-child">
+    <h2 class="page-title">消息接收中心</h2>
+    
+    <div class="message-container">
+      <div class="message-section">
+        <div class="section-header">
+          <h3>全局广播消息</h3>
+          <el-button type="primary" size="small" @click="clearGlobalMessages">
+            清空消息
+          </el-button>
+        </div>
+        <div class="message-list" v-if="globalMessages.length">
+          <div v-for="(msg, index) in globalMessages" 
+               :key="index" 
+               class="message-item">
+            <div class="message-header">
+              <span class="message-time">{{ msg.time }}</span>
+              <span class="message-type" :class="msg.type">{{ msg.type }}</span>
+            </div>
+            <h4 class="message-title">{{ msg.title }}</h4>
+            <p class="message-content">{{ msg.message }}</p>
+          </div>
+        </div>
+        <div v-else class="empty-message">
+          暂无消息
+        </div>
+      </div>
+
+      <div class="message-section">
+        <div class="section-header">
+          <h3>定向消息</h3>
+          <el-button type="primary" size="small" @click="clearDirectMessages">
+            清空消息
+          </el-button>
+        </div>
+        <div class="message-list" v-if="directMessages.length">
+          <div v-for="(msg, index) in directMessages" 
+               :key="index" 
+               class="message-item">
+            <div class="message-header">
+              <span class="message-time">{{ msg.time }}</span>
+              <span class="message-type" :class="msg.type">{{ msg.type }}</span>
+            </div>
+            <h4 class="message-title">{{ msg.title }}</h4>
+            <p class="message-content">{{ msg.message }}</p>
+          </div>
+        </div>
+        <div v-else class="empty-message">
+          暂无消息
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const globalMessages = ref([])
+const directMessages = ref([])
+
+const formatTime = () => {
+  const now = new Date()
+  return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
+}
+
+const clearGlobalMessages = () => {
+  globalMessages.value = []
+}
+
+const clearDirectMessages = () => {
+  directMessages.value = []
+}
+
+onMounted(() => {
+  // 监听全局广播消息
+  window.$wujie?.bus.$on('global-message', (data) => {
+    globalMessages.value.unshift({
+      ...data,
+      time: formatTime()
+    })
+  })
+
+  // 监听定向消息
+  window.$wujie?.bus.$on('vue3-child-message', (data) => {
+    directMessages.value.unshift({
+      ...data,
+      time: formatTime()
+    })
+  })
+})
+</script>
+
+<style scoped>
+.parent-to-child {
+  padding: 24px;
+  background-color: #f5f7fa;
+  min-height: 100vh;
+}
+
+.page-title {
+  color: #303133;
+  margin-bottom: 24px;
+  font-size: 24px;
+}
+
+.message-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 24px;
+}
+
+.message-section {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.section-header h3 {
+  margin: 0;
+  color: #303133;
+  font-size: 18px;
+}
+
+.message-list {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.message-item {
+  padding: 12px;
+  border-bottom: 1px solid #ebeef5;
+  transition: background-color 0.3s;
+}
+
+.message-item:hover {
+  background-color: #f5f7fa;
+}
+
+.message-time {
+  font-size: 12px;
+  color: #909399;
+}
+
+.message-content {
+  margin: 8px 0 0;
+  color: #606266;
+  line-height: 1.5;
+}
+
+.empty-message {
+  text-align: center;
+  color: #909399;
+  padding: 30px 0;
+}
+
+/* 滚动条样式 */
+.message-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.message-list::-webkit-scrollbar-thumb {
+  background: #c0c4cc;
+  border-radius: 3px;
+}
+
+.message-list::-webkit-scrollbar-track {
+  background: #f5f7fa;
+}
+
+.message-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.message-type {
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.message-type.info {
+  background-color: #ecf5ff;
+  color: #409eff;
+}
+
+.message-type.success {
+  background-color: #f0f9eb;
+  color: #67c23a;
+}
+
+.message-type.warning {
+  background-color: #fdf6ec;
+  color: #e6a23c;
+}
+
+.message-type.error {
+  background-color: #fef0f0;
+  color: #f56c6c;
+}
+
+.message-title {
+  margin: 8px 0;
+  font-size: 14px;
+  color: #303133;
+}
+
+.message-content {
+  margin: 8px 0 0;
+  color: #606266;
+  line-height: 1.5;
+}
+</style>