npmapps 1.1.4 → 1.1.6

package/app/wujie-wk/wujie-vue3-main/src/App.vue

@@ -0,0 +1,879 @@
+<script setup>
+// 移除不需要的导入
+import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import { ElNotification, ElDialog } from 'element-plus'
+import { useRouter } from 'vue-router'
+import WujieVue from 'wujie-vue3'
+import { useMicroAppStore } from './store/useMicroAppStore'
+
+const {bus} = WujieVue
+const microAppStore = useMicroAppStore()
+
+bus.$on('child-event', (data,from) => {
+  // 先存储消息到 pinia
+  microAppStore.receiveMessage({
+    ...data,
+    from: from || 'child-app' // 添加消息来源标识
+  })
+  
+  // 然后显示通知
+  ElNotification({
+    message: data.message,
+    type: data.type,
+    duration: data.duration,
+    title:'主应用接受：' +  data.title
+  })
+})
+
+const router = useRouter()
+
+
+
+const isMenuOpen = ref(false)
+const position = ref({ 
+  x: window.innerWidth - 56, // 窗口宽度减去按钮宽度(36px)和右边距(20px)
+  y: window.innerHeight - 56 // 窗口高度减去按钮高度(36px)和底部距离(20px)
+})
+const isDragging = ref(false)
+const startPosition = ref({ x: 0, y: 0 })
+// 添加一个变量来追踪是否发生了拖动
+const hasMoved = ref(false)
+
+// 计算菜单位置
+const menuPosition = ref({ direction: 'top', align: 'right' })
+
+const updateMenuPosition = () => {
+  const buttonRect = document.querySelector('.menu-button').getBoundingClientRect()
+  const menuEl = document.querySelector('.menu-content')
+  if (!menuEl) return
+
+  const menuRect = menuEl.getBoundingClientRect()
+  const windowHeight = window.innerHeight
+  const windowWidth = window.innerWidth
+
+  // 计算垂直方向
+  if (buttonRect.top < menuRect.height + 10) {
+    menuPosition.value.direction = 'bottom'
+  } else {
+    menuPosition.value.direction = 'top'
+  }
+
+  // 计算水平方向
+  if (buttonRect.right < menuRect.width) {
+    menuPosition.value.align = 'right'
+  } else if (windowWidth - buttonRect.left < menuRect.width) {
+    menuPosition.value.align = 'left'
+  } else {
+    menuPosition.value.align = 'center'
+  }
+}
+
+// 监听菜单打开状态
+watch(isMenuOpen, (newValue) => {
+  if (newValue) {
+    nextTick(() => {
+      updateMenuPosition()
+    })
+  }
+})
+
+// 监听位置变化
+watch(position, () => {
+  if (isMenuOpen.value) {
+    updateMenuPosition()
+  }
+  checkStickToEdge()
+})
+
+// 监听窗口大小变化
+onMounted(() => {
+  // 获取保存的位置
+  const savedPosition = localStorage.getItem('menuPosition')
+  if (savedPosition) {
+    position.value = JSON.parse(savedPosition)
+  } else {
+    // 如果没有保存的位置，设置默认位置在右下角
+    position.value = {
+      x: window.innerWidth - 56,
+      y: window.innerHeight - 56
+    }
+  }
+  
+  document.addEventListener('click', handleClickOutside)
+  window.addEventListener('resize', () => {
+    if (isMenuOpen.value) {
+      updateMenuPosition()
+    }
+  })
+  document.addEventListener('mousemove', onDialogDrag)
+  document.addEventListener('mouseup', stopDialogDrag)
+})
+
+// 在组件卸载时移除事件监听
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('mousemove', onDialogDrag)
+  document.removeEventListener('mouseup', stopDialogDrag)
+})
+
+const isStickToEdge = ref(false)
+const stickDirection = ref(null) // 'left' or 'right'
+const STICK_THRESHOLD = 10 // 距离边缘多少像素时触发吸附
+
+// 获取滚动条宽度
+const getScrollbarWidth = () => {
+  const outer = document.createElement('div')
+  outer.style.visibility = 'hidden'
+  outer.style.overflow = 'scroll'
+  document.body.appendChild(outer)
+
+  const inner = document.createElement('div')
+  outer.appendChild(inner)
+
+  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
+  outer.parentNode.removeChild(outer)
+
+  return scrollbarWidth
+}
+
+// 检查是否应该吸附到边缘
+const checkStickToEdge = () => {
+  const windowWidth = window.innerWidth
+  const buttonWidth = 36 // 按钮的正常宽度
+  
+  if (position.value.x < STICK_THRESHOLD) {
+    stickDirection.value = 'left'
+    isStickToEdge.value = true
+    isMenuOpen.value = false
+    position.value.x = 0 // 直接设置位置为0，完全贴边
+  } else if (windowWidth - position.value.x - buttonWidth < STICK_THRESHOLD) {
+    stickDirection.value = 'right'
+    isStickToEdge.value = true
+    isMenuOpen.value = false
+    position.value.x = windowWidth - buttonWidth // 直接设置位置到右边缘
+  } else {
+    isStickToEdge.value = false
+  }
+}
+
+// 修改 onDrag 函数
+const onDrag = (e) => {
+  if (isDragging.value) {
+    const buttonWidth = 36 // 按钮的正常宽度
+    const maxX = window.innerWidth - buttonWidth // 修改最大 X 坐标
+    const maxY = window.innerHeight - 40
+    
+    const newX = e.clientX - startPosition.value.x
+    const newY = e.clientY - startPosition.value.y
+    
+    if (newX !== position.value.x || newY !== position.value.y) {
+      hasMoved.value = true
+      isStickToEdge.value = false
+    }
+    
+    position.value = {
+      x: Math.min(Math.max(0, newX), maxX),
+      y: Math.min(Math.max(0, newY), maxY)
+    }
+  }
+}
+
+// 添加全局鼠标事件监听，优化拖拽体验
+const setupGlobalEvents = () => {
+  window.addEventListener('mousemove', onDrag)
+  window.addEventListener('mouseup', stopDrag)
+}
+
+const startDrag = (e) => {
+  if (e.target.closest('.menu-button')) {
+    isDragging.value = true
+    hasMoved.value = false
+    startPosition.value = {
+      x: e.clientX - position.value.x,
+      y: e.clientY - position.value.y
+    }
+    document.body.style.userSelect = 'none'
+    document.body.style.cursor = 'move'
+    setupGlobalEvents()
+  }
+}
+
+const stopDrag = () => {
+  isDragging.value = false
+  document.body.style.userSelect = ''
+  document.body.style.cursor = ''
+  window.removeEventListener('mousemove', onDrag)
+  window.removeEventListener('mouseup', stopDrag)
+  localStorage.setItem('menuPosition', JSON.stringify(position.value))
+  checkStickToEdge() // 停止拖动时检查是否需要吸附
+}
+
+// 添加点击外部关闭菜单的处理
+const handleClickOutside = (e) => {
+  const floatingMenu = document.querySelector('.floating-menu')
+  if (isMenuOpen.value && floatingMenu && !floatingMenu.contains(e.target)) {
+    isMenuOpen.value = false
+    checkStickToEdge()
+  }
+}
+
+// 鼠标移入时展开
+const handleMouseEnter = () => {
+  if (isStickToEdge.value) {
+    isStickToEdge.value = false
+  }
+}
+
+// 鼠标移出时检查是否需要吸附
+const handleMouseLeave = (e) => {
+  // 检查鼠标是否移动到菜单内容区域
+  const menuContent = document.querySelector('.menu-content')
+  if (menuContent && menuContent.contains(e.relatedTarget)) {
+    return
+  }
+  
+  if (isMenuOpen.value) {
+    isMenuOpen.value = false
+  }
+  
+  // 立即检查吸附
+  if (!isDragging.value) {
+    checkStickToEdge()
+  }
+}
+
+// 添加菜单内容区域的标移出处理
+const handleMenuContentLeave = (e) => {
+  // 检查鼠标是否移动到按钮区域
+  const button = document.querySelector('.menu-button')
+  if (button && button.contains(e.relatedTarget)) {
+    return
+  }
+  
+  isMenuOpen.value = false
+  // 重置状态并检查吸附
+  isDragging.value = false
+  hasMoved.value = false
+  checkStickToEdge()
+}
+
+// 修改点击处理函数，阻止事件冒泡
+const handleClick = (e) => {
+  e.stopPropagation() // 阻止事件冒泡
+  if (!hasMoved.value) {
+    isMenuOpen.value = !isMenuOpen.value
+  }
+}
+
+// 添加对 isStickToEdge 的监听
+watch(isStickToEdge, (newValue) => {
+  if (!newValue) {
+    // 当取消吸附时，启动一个短暂延时，然后重新检查吸附
+    setTimeout(() => {
+      if (!isDragging.value && !isMenuOpen.value) {
+        checkStickToEdge()
+      }
+    }, 300) // 300ms 延时，与 CSS 过渡时间匹配
+  }
+})
+
+// 添加新的响应式变量
+const dialogVisible = ref(false)
+const messageText = ref('')
+const selectedTarget = ref('')
+const targets = ref([
+  { label: 'vue3子应用', value: 'vue3-child-message' },
+  { label: 'vue2子应用', value: 'vue2-child-message' },
+  { label: 'react子应用', value: 'react-child-message' }
+])
+
+// 修改 menuItems 数组
+const menuItems = [
+  { name: '主应用首页', path: '/' },
+  { name: 'Vue3Child', path: '/vue3-child' },
+  { name: 'Vue3ChildCopy(保活)', path: '/vue3-child-copy' },
+  { name: 'Vue2Child', path: '/vue2-child' },
+  { name: 'ReactChild', path: '/react-child' },
+  { name: '发送消息', action: 'openMessageDialog' }  // 新增菜单项
+]
+
+// 修改菜单点击处理函数
+const handleMenuItemClick = (path, action) => {
+  if (action === 'openMessageDialog') {
+    dialogVisible.value = true
+    // 设置弹窗初始位置为居中
+    nextTick(() => {
+      const dialog = document.querySelector('.custom-dialog')
+      if (dialog) {
+        const windowWidth = window.innerWidth
+        const windowHeight = window.innerHeight
+        const dialogWidth = dialog.offsetWidth
+        const dialogHeight = dialog.offsetHeight
+        
+        dialogPosition.value = {
+          x: (windowWidth - dialogWidth) / 2,
+          y: (windowHeight - dialogHeight) / 2
+        }
+      }
+    })
+  } else {
+    router.push(path)
+  }
+  isMenuOpen.value = false
+}
+
+// 添加消息类型选项
+const messageTypes = ref([
+  { label: '成功', value: 'success' },
+  { label: '警告', value: 'warning' },
+  { label: '信息', value: 'info' },
+  { label: '错误', value: 'error' }
+])
+
+// 添加选中的消息类型
+const selectedType = ref('success')
+
+// 修改发送消息的函数
+const sendGlobalMessage = () => {
+  if (!messageText.value) return
+  bus.$emit('global-message', {
+    message: messageText.value,
+    type: selectedType.value,  // 使用选中的类型
+    duration: 3000,
+    title: '全局消息'
+  })
+  dialogVisible.value = false
+  messageText.value = ''
+}
+
+const sendTargetMessage = () => {
+  if (!messageText.value || !selectedTarget.value) return
+  bus.$emit(selectedTarget.value, {
+    message: messageText.value,
+    type: selectedType.value,  // 使用选中的类型
+    duration: 3000,
+    title: '定向消息'
+  })
+  dialogVisible.value = false
+  messageText.value = ''
+}
+
+// 添加拖拽相关的变量
+const dialogDragging = ref(false)
+const dialogPosition = ref({ x: 0, y: 0 })
+const dialogStartPosition = ref({ x: 0, y: 0 })
+
+// 添加拖拽相关的方法
+const startDialogDrag = (e) => {
+  if (e.target.classList.contains('dialog-header')) {
+    dialogDragging.value = true
+    const dialog = document.querySelector('.custom-dialog')
+    const rect = dialog.getBoundingClientRect()
+    dialogStartPosition.value = {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    }
+    document.body.style.userSelect = 'none'
+  }
+}
+
+const onDialogDrag = (e) => {
+  if (dialogDragging.value) {
+    dialogPosition.value = {
+      x: e.clientX - dialogStartPosition.value.x,
+      y: e.clientY - dialogStartPosition.value.y
+    }
+  }
+}
+
+const stopDialogDrag = () => {
+  dialogDragging.value = false
+  document.body.style.userSelect = ''
+}
+bus.$on('router-jump-to-main', (data) => {
+  if(data.app === 'main'){
+    router.push({
+      path: data.path,
+      query: data.query
+    })
+  }else{
+    router.push({
+      path: `/${data.app}${data.path}`
+    })
+    jumpToChild(data)
+  }
+})
+const isAlive = {
+  'vue3-child':false,
+  'vue3-child-copy':true
+}
+
+const jumpToChild = (data) => {
+  router.push(data.app);
+  // 判断子应用是否存在
+  if ( isAlive[data.app] && window.document.querySelector(`iframe[name=${data.app}]`)) {
+    bus.$emit("router-jump", {
+      app: data.app,
+      path: data.path,
+      query: data.query,
+    });
+  } else {
+    console.log("子应用不存在");
+    // 监听子应用加载完成
+    bus.$on("loaded", (app) => handleLoaded(app,data));
+  }
+};
+
+// 定义一个具体的函数
+const handleLoaded = (app,data) => {
+  if (app === data.app) {
+    bus.$emit("router-jump", {
+      app: data.app,
+      path: data.path,
+      query: data.query,
+    });
+    // 使用相同的函数引用来移除监听器
+    bus.$off("loaded", handleLoaded);
+  }
+};
+</script>
+
+<template>
+  <div class="container">
+    <router-view></router-view>
+    <div class="floating-menu" 
+         :style="{ 
+           left: `${position.x}px`,
+           top: `${position.y}px`
+         }"
+         :class="{ 
+           'menu-expanded': isMenuOpen,
+           'stick-to-edge': isStickToEdge,
+           'stick-left': stickDirection === 'left',
+           'stick-right': stickDirection === 'right'
+         }"
+         @mouseenter="handleMouseEnter">
+      <button class="menu-button" 
+              @mousedown="startDrag"
+              @click="handleClick">
+        <div class="menu-icon" @mousedown.stop>
+          <span class="icon-line"></span>
+          <span class="icon-line"></span>
+          <span class="icon-line"></span>
+        </div>
+      </button>
+      <div class="menu-content"
+           :class="[
+             `menu-${menuPosition.direction}`,
+             `menu-align-${menuPosition.align}`
+           ]">
+        <ul>
+          <li v-for="(item, index) in menuItems" 
+              :key="index"
+              :style="{ '--i': index }"
+              @click.stop="handleMenuItemClick(item.path, item.action)">
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
+    </div>
+
+   
+    <!-- 自定义弹窗 -->
+    <div v-if="dialogVisible" 
+         class="custom-dialog"
+         :style="{
+           left: `${dialogPosition.x}px`,
+           top: `${dialogPosition.y}px`
+         }">
+      <div class="dialog-header" @mousedown="startDialogDrag">
+        <span>发送消息</span>
+        <button class="close-btn" @click="dialogVisible = false">×</button>
+      </div>
+      <div class="dialog-body">
+        <div class="form-item">
+          <label>消息内容</label>
+          <textarea 
+            v-model="messageText"
+            placeholder="请输入消息内容"
+            rows="3"
+          ></textarea>
+        </div>
+        <div class="form-item">
+          <label>消息类型</label>
+          <select v-model="selectedType">
+            <option 
+              v-for="type in messageTypes"
+              :key="type.value"
+              :value="type.value"
+            >
+              {{ type.label }}
+            </option>
+          </select>
+        </div>
+        <div class="form-item">
+          <label>接收方</label>
+          <select v-model="selectedTarget">
+            <option value="">请选择接收方</option>
+            <option 
+              v-for="item in targets"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </option>
+          </select>
+        </div>
+      </div>
+      <div class="dialog-footer">
+        <button class="btn btn-cancel" @click="dialogVisible = false">取消</button>
+        <button class="btn btn-primary" @click="sendGlobalMessage">全局发送</button>
+        <button class="btn btn-success" @click="sendTargetMessage">定向发送</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  min-height: 100vh;
+  position: relative;
+}
+
+.floating-menu {
+  position: fixed;
+  z-index: 1000;
+  cursor: move;
+  user-select: none;
+}
+
+.menu-button {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: linear-gradient(145deg, #4cc592, #42b883);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 3px 8px rgba(66, 184, 131, 0.2);
+  transition: all 0.2s ease;
+  outline: none;
+  padding: 0;
+  min-width: 36px;
+  position: relative;
+  z-index: 2;
+}
+
+/* 修改吸附状态下的按钮样式 */
+.stick-to-edge .menu-button {
+  width: 10px !important; /* 强制置宽度为10px */
+  min-width: 10px !important; /* 确保最小宽度也是10px */
+  border-radius: 3px;
+  height: 40px;
+  background: #42b883;
+  transform: none; /* 移除任何可能的transform */
+}
+
+/* 隐藏吸附状态下的图标 */
+.stick-to-edge .menu-icon {
+  opacity: 0;
+}
+
+.menu-icon {
+  width: 18px;
+  height: 18px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transform: translateY(0);
+  pointer-events: none;
+}
+
+.icon-line {
+  width: 100%;
+  height: 2px;
+  background-color: white;
+  border-radius: 1px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center;
+}
+
+/* 间线的特殊处理 */
+.icon-line:nth-child(2) {
+  transform-origin: center;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 菜单展开时图标动画 */
+.menu-expanded .icon-line:first-child {
+  transform: translateY(8px) rotate(45deg);
+}
+
+.menu-expanded .icon-line:nth-child(2) {
+  opacity: 0;
+  transform: scaleX(0);
+}
+
+.menu-expanded .icon-line:last-child {
+  transform: translateY(-8px) rotate(-45deg);
+}
+
+.menu-button:hover {
+  transform: scale(1.05);
+  background: linear-gradient(145deg, #42b883, #3aa876);
+  box-shadow: 0 4px 12px rgba(66, 184, 131, 0.3);
+}
+
+.menu-button:active {
+  transform: scale(0.95);
+}
+
+.menu-content {
+  position: absolute;
+  background-color: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  padding: 8px 0;
+  min-width: 120px;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 垂直方向定位 */
+.menu-top {
+  bottom: 45px;
+  transform-origin: bottom;
+  transform: scale(0.95) translateY(-10px);
+}
+
+.menu-bottom {
+  top: 45px;
+  transform-origin: top;
+  transform: scale(0.95) translateY(10px);
+}
+
+/* 水平方向定位 */
+.menu-align-left {
+  right: 0;
+  transform-origin: bottom right;
+}
+
+.menu-align-right {
+  left: 0;
+  transform-origin: bottom left;
+}
+
+.menu-align-center {
+  left: 50%;
+  transform: translateX(-50%) scale(0.95) translateY(-10px);
+  transform-origin: bottom center;
+}
+
+/* 展开状态 */
+.menu-expanded .menu-content {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1) translateY(0);
+}
+
+.menu-expanded .menu-align-center {
+  transform: translateX(-50%) scale(1) translateY(0);
+}
+
+.menu-content ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.menu-content li {
+  padding: 8px 16px;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: #333;
+  font-size: 14px;
+  opacity: 0;
+  transform: translateX(-10px);
+}
+
+/* 菜单项动画 */
+.menu-expanded .menu-content li {
+  opacity: 1;
+  transform: translateX(0);
+  transition-delay: calc(0.05s * var(--i));
+}
+
+.menu-content li:hover {
+  background-color: rgba(66, 184, 131, 0.1);
+  color: #42b883;
+  padding-left: 20px;
+}
+
+/* 修改吸附样式 */
+.stick-to-edge {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.stick-to-edge.stick-left {
+  transform: translateX(-3px);
+}
+
+.stick-to-edge.stick-right {
+  transform: translateX(26px);
+}
+
+/* 确保悬停时恢复原样 */
+.stick-to-edge:hover .menu-button {
+  width: 36px !important;
+  min-width: 36px !important;
+  height: 36px;
+  border-radius: 50%;
+  background: linear-gradient(145deg, #4cc592, #42b883);
+}
+
+.stick-to-edge:hover .menu-icon {
+  opacity: 1;
+}
+
+.stick-to-edge:hover {
+  transform: translateX(0);
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* 添加自定义弹窗样式 */
+.custom-dialog {
+  position: fixed;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+  width: 400px;
+  z-index: 2000;
+}
+
+.dialog-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: move;
+  background: #f8f9fa;
+  border-radius: 8px 8px 0 0;
+}
+
+.dialog-header span {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.close-btn {
+  border: none;
+  background: none;
+  font-size: 20px;
+  color: #999;
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.close-btn:hover {
+  background: #eee;
+  color: #666;
+}
+
+.dialog-body {
+  padding: 20px;
+}
+
+.form-item {
+  margin-bottom: 16px;
+}
+
+.form-item label {
+  display: block;
+  margin-bottom: 8px;
+  color: #333;
+  font-size: 14px;
+}
+
+.form-item textarea,
+.form-item select {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: border-color 0.2s;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.form-item textarea:focus,
+.form-item select:focus {
+  border-color: #409eff;
+}
+
+.dialog-footer {
+  padding: 10px 20px 20px;
+  text-align: right;
+}
+
+.btn {
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  margin-left: 8px;
+  transition: all 0.2s;
+}
+
+.btn-cancel {
+  background: #f4f4f5;
+  color: #606266;
+}
+
+.btn-cancel:hover {
+  background: #e9e9eb;
+}
+
+.btn-primary {
+  background: #409eff;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #66b1ff;
+}
+
+.btn-success {
+  background: #67c23a;
+  color: white;
+}
+
+.btn-success:hover {
+  background: #85ce61;
+}
+</style>
+
+<script>
+// 添加响应式数据
+export default {
+  data() {
+    return {
+      isMenuOpen: false
+    }
+  }
+}
+</script>